:root {
    --ink-strong: #132238;
    --ink-main: #24364d;
    --ink-soft: #6a7b92;
    --surface: rgba(255, 255, 255, 0.78);
    --surface-strong: rgba(255, 255, 255, 0.92);
    --line: rgba(132, 148, 168, 0.18);
    --accent: #ff6b35;
    --accent-deep: #d84c1f;
    --accent-soft: rgba(255, 107, 53, 0.12);
    --blue-soft: rgba(59, 130, 246, 0.12);
    --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 12px 32px rgba(15, 23, 42, 0.06);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --shell-width: min(1220px, calc(100vw - 32px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Noto Sans SC', sans-serif;
    color: var(--ink-main);
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 107, 53, 0.18), transparent 32%),
        radial-gradient(circle at 88% 10%, rgba(41, 98, 255, 0.16), transparent 30%),
        linear-gradient(180deg, #fffdf8 0%, #f6f8fb 42%, #edf2f8 100%);
    min-height: 100vh;
}
img { display: block; max-width: 100%; }
a, button { font: inherit; }
.shell { width: var(--shell-width); margin: 0 auto; }
.backdrop { position: fixed; pointer-events: none; filter: blur(42px); opacity: 0.55; z-index: 0; }
.backdrop-one { top: 76px; left: 28px; width: 220px; height: 220px; background: rgba(255, 176, 59, 0.28); border-radius: 40% 60% 55% 45%; }
.backdrop-two { right: 40px; top: 200px; width: 260px; height: 260px; background: rgba(44, 123, 229, 0.2); border-radius: 60% 40% 52% 48%; }
.topbar, .hero, .section { position: relative; z-index: 1; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 24px 0 10px; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand-mark { width: 48px; height: 48px; border-radius: 18px; display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; color: white; background: linear-gradient(135deg, #ff7f50, #ff5d8f 74%); box-shadow: 0 10px 22px rgba(255, 107, 53, 0.22); }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong, .hero h1, .section-head h2, .archive-toolbar h2 { font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif; }
.brand-copy small, .section-meta, .artist-line, .metric-row, .inline-link, .month-card summary, .day-pill { color: var(--ink-soft); }
.topnav { display: flex; gap: 12px; }
.nav-button { display: inline-flex; align-items: center; justify-content: center; min-width: 106px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); text-decoration: none; color: var(--ink-main); box-shadow: var(--shadow-card); }
.nav-button:hover { color: var(--accent-deep); }
.hero { padding: 20px 0 8px; }
.hero-copy { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: var(--radius-xl); padding: 28px 30px 24px; }
.hero-copy.compact { display: flex; flex-direction: column; gap: 14px; }
.eyebrow { display: inline-flex; width: fit-content; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.8); color: var(--ink-soft); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.02; color: var(--ink-strong); }
.hero-inline-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.meta-pill { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.78); border: 1px solid var(--line); color: var(--ink-main); }
.action-pill { cursor: pointer; color: var(--accent-deep); background: var(--accent-soft); }
.section { padding: 16px 0 26px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; }
.section-head h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink-strong); }
.section-head.minimal { margin-bottom: 14px; }
.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.featured-card, .archive-card, .card-panel, .month-card, .empty-state { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.featured-card, .archive-card, .month-card { border-radius: var(--radius-lg); overflow: hidden; }
.card-panel, .empty-state { border-radius: var(--radius-xl); padding: 18px 20px; }
.featured-card { display: flex; flex-direction: column; }
.art-thumb, .archive-thumb { display: block; background: linear-gradient(135deg, rgba(255,107,53,0.08), rgba(41,98,255,0.08)); }
.art-thumb { aspect-ratio: 4 / 5; }
.archive-thumb { aspect-ratio: 1 / 1; }
.art-thumb img, .archive-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-body, .archive-card-body { padding: 16px; }
.compact-body { display: flex; flex-direction: column; gap: 10px; }
.featured-ranks, .metric-row, .tag-row, .archive-card-body { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rank-badge, .ghost-badge, .tag { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 0.78rem; }
.rank-badge { background: var(--accent-soft); color: var(--accent-deep); }
.ghost-badge { background: rgba(91, 104, 122, 0.12); color: var(--ink-soft); }
.featured-body h3 { margin: 0; font-size: 1.06rem; line-height: 1.5; color: var(--ink-strong); }
.metric-row, .artist-line, .inline-link, .archive-card-body span { font-size: 0.92rem; }
.artist-line { margin: 0; }
.tag-row { min-height: 28px; }
.tag { background: rgba(59, 130, 246, 0.08); color: #2457d6; }
.inline-link { text-decoration: none; color: var(--ink-main); }
.inline-link:hover { color: var(--accent-deep); }
.archive-card-body { justify-content: space-between; }
.archive-card-body strong { color: var(--ink-strong); font-size: 0.92rem; }
.lead-card { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: var(--radius-xl); padding: 18px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.lead-visual { display: block; border-radius: calc(var(--radius-lg) - 4px); overflow: hidden; background: linear-gradient(135deg, rgba(255,107,53,0.08), rgba(41,98,255,0.08)); aspect-ratio: 4 / 5; }
.lead-visual img { width: 100%; height: 100%; object-fit: cover; }
.lead-copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.lead-copy h2 { margin: 0; font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif; font-size: clamp(1.8rem, 3vw, 2.8rem); color: var(--ink-strong); line-height: 1.1; }
.lead-author { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.lead-metrics, .lead-actions, .daily-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nav-button.solid { background: linear-gradient(135deg, #ff7f50, #ff5d8f 74%); color: #fff; border: none; }
.nav-button.solid:hover { color: #fff; filter: brightness(0.98); }
.daily-card .art-thumb { aspect-ratio: 4 / 5; }
.daily-links { min-height: 28px; }
.daily-open-site { text-decoration: none; justify-content: center; }
.archive-layout.split-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.archive-sidebar { position: sticky; top: 14px; }
.archive-months { display: grid; gap: 12px; }
.month-card { padding: 0; }
.month-card summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; font-weight: 600; }
.month-card summary::-webkit-details-marker { display: none; }
.month-days { display: grid; gap: 8px; padding: 0 14px 14px; }
.day-pill { border: 1px solid rgba(132,148,168,0.18); border-radius: 14px; background: rgba(255,255,255,0.78); padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.day-pill.active, .day-pill:hover { border-color: rgba(255, 107, 53, 0.28); background: rgba(255, 107, 53, 0.08); color: var(--accent-deep); }
.day-pill b { color: var(--ink-main); }
.archive-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.archive-toolbar h2 { margin: 0; font-size: 1.3rem; color: var(--ink-strong); }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.skeleton-card { padding: 16px; }
.skeleton-card.compact { padding: 14px; }
.skeleton-image, .skeleton-line, .skeleton-chip { animation: pulse 1.4s ease-in-out infinite; background: linear-gradient(90deg, rgba(226,232,240,0.8), rgba(241,245,249,1), rgba(226,232,240,0.8)); background-size: 200% 100%; border-radius: 14px; }
.skeleton-image { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 14px; }
.skeleton-image.square { aspect-ratio: 1 / 1; }
.skeleton-line { height: 12px; margin-bottom: 10px; }
.skeleton-line.wide { width: 82%; }
.skeleton-chip-row { display: flex; gap: 8px; }
.skeleton-chip { width: 72px; height: 26px; }
.skeleton-chip.short { width: 50px; }
.empty-state strong { display: block; color: var(--ink-strong); margin-bottom: 6px; }
.hidden { display: none !important; }
@keyframes pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (max-width: 960px) { .topbar, .section-head, .archive-layout.split-layout, .archive-toolbar { flex-direction: column; align-items: stretch; grid-template-columns: 1fr; } .archive-sidebar { position: static; } .section-head { align-items: flex-start; } .lead-card { grid-template-columns: 1fr; } }
@media (max-width: 720px) { :root { --shell-width: min(100vw - 20px, 1220px); } .topbar { padding-top: 18px; } .topnav { width: 100%; } .nav-button { width: 100%; } .hero-copy, .card-panel, .empty-state { padding: 20px; } .featured-grid, .archive-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .featured-body, .archive-card-body { padding: 14px; } .hero h1 { font-size: 2.1rem; } }
@media (max-width: 520px) { .featured-grid, .archive-grid { grid-template-columns: 1fr; } .hero-inline-meta { flex-direction: column; align-items: stretch; } .meta-pill, .action-pill { justify-content: center; } }