/* =========================================================
   cbdc.study — sunset-warm, broken grid, aged paper substrate
   Cascade layers per DESIGN.md
   ========================================================= */
@layer reset, tokens, paper, type, layout-broken, components, marginalia, motion, overrides;

/* ------------------------- RESET ------------------------- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    img, svg { display: block; max-width: 100%; }
    button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3, h4, p, dl, dt, dd, ol, ul, figure { margin: 0; padding: 0; }
    ol, ul { list-style: none; }
}

/* ------------------------- TOKENS ------------------------ */
@layer tokens {
    :root {
        /* sunset-warm palette */
        --paper-aged:     #F4ECDB;
        --paper-deep:     #E8D9BB;
        --ink-walnut:     #2A1A12;
        --dusk-rose:      #E07A5F;
        --ember:          #D4593A;
        --gold-leaf:      #C8932B;
        --horizon:        #8A4A3A;
        --indigo-eve:     #3D3A55;
        --charcoal-haze:  #5A4A42;
        /* night */
        --night-paper:    #1F1A26;
        --night-ink:      #E8DCC2;
        --night-rose:     #F2A38C;

        --measure: 62ch;
        --grid-gap: clamp(12px, 1.4vw, 22px);
        --serif-display: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
        --serif-architectural: "DM Serif Display", "Playfair Display", Georgia, serif;
        --serif-body: "EB Garamond", Garamond, Georgia, serif;
        --whisper: "Inter", system-ui, -apple-system, sans-serif;
        --mono: "JetBrains Mono", ui-monospace, "Fira Code", Menlo, monospace;
    }

    body[data-mode="dusk"] {
        --bg: var(--paper-aged);
        --bg-deep: var(--paper-deep);
        --ink: var(--ink-walnut);
        --ink-soft: var(--charcoal-haze);
        --rose: var(--dusk-rose);
        --rule: var(--horizon);
    }
    body[data-mode="night"] {
        --bg: var(--night-paper);
        --bg-deep: #15121C;
        --ink: var(--night-ink);
        --ink-soft: #B5A98E;
        --rose: var(--night-rose);
        --rule: var(--gold-leaf);
    }
}

/* ------------------------- PAPER ------------------------- */
@layer paper {
    body {
        background-color: var(--bg);
        color: var(--ink);
        font-family: var(--serif-body);
        font-size: 19px;
        line-height: 1.62;
        font-feature-settings: "onum" 1, "liga" 1, "kern" 1;
        text-wrap: pretty;
        position: relative;
        overflow-x: hidden;
        transition: background-color 600ms ease, color 600ms ease;
    }

    .paper-grain {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background: transparent;
        opacity: 0.07;
        mix-blend-mode: multiply;
        backdrop-filter: contrast(1.02);
    }
    .paper-grain::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="7" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 0.16  0 0 0 0 0.10  0 0 0 0 0.07  0 0 0 0.85 0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
        background-size: 320px 320px;
        will-change: transform;
    }
    body[data-mode="night"] .paper-grain { opacity: 0.18; mix-blend-mode: screen; }

    .paper-fiber {
        position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.06;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900"><filter id="f"><feTurbulence type="turbulence" baseFrequency="0.012 0.45" numOctaves="2" seed="3" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 0.55  0 0 0 0 0.36  0 0 0 0 0.17  0 0 0 0.6 0"/></filter><rect width="100%25" height="100%25" filter="url(%23f)"/></svg>');
        background-size: 900px 900px;
        mix-blend-mode: multiply;
    }
    body[data-mode="night"] .paper-fiber { mix-blend-mode: screen; opacity: 0.08; }

    .sunset-wash {
        position: fixed; inset: 0; pointer-events: none; z-index: 0;
        background:
            radial-gradient(ellipse at 88% 18%, rgba(212, 89, 58, 0.18) 0%, transparent 45%),
            radial-gradient(ellipse at 10% 88%, rgba(61, 58, 85, 0.12) 0%, transparent 50%),
            linear-gradient(135deg, transparent 0%, transparent 60%, rgba(138, 74, 58, 0.08) 100%);
    }
    body[data-mode="night"] .sunset-wash {
        background:
            radial-gradient(ellipse at 88% 18%, rgba(242, 163, 140, 0.10) 0%, transparent 45%),
            radial-gradient(ellipse at 10% 88%, rgba(200, 147, 43, 0.07) 0%, transparent 50%);
    }

    ::selection { background: var(--dusk-rose); color: var(--paper-aged); }
    body[data-mode="night"] ::selection { background: var(--night-rose); color: var(--night-paper); }
}

/* ------------------------- TYPE -------------------------- */
@layer type {
    .wordmark {
        font-family: var(--serif-architectural);
        font-weight: 400;
        font-size: clamp(72px, 14vw, 240px);
        line-height: 0.92;
        letter-spacing: -0.025em;
        color: var(--ink);
        text-wrap: balance;
    }
    .wordmark .punct { color: var(--ember); }

    .wordmark-mini {
        font-family: var(--serif-architectural);
        font-size: 18px;
        letter-spacing: -0.01em;
        color: var(--ink);
    }
    .wordmark-mini .dot { color: var(--ember); padding: 0 1px; }

    .hero-subtitle {
        font-family: var(--serif-display);
        font-style: italic;
        font-weight: 400;
        font-size: clamp(20px, 2.2vw, 30px);
        color: var(--charcoal-haze);
        line-height: 1.4;
    }
    body[data-mode="night"] .hero-subtitle { color: var(--ink-soft); }

    .hero-essay {
        font-family: var(--serif-body);
        font-size: clamp(18px, 1.4vw, 22px);
        line-height: 1.7;
        color: var(--ink);
        max-width: 32ch;
    }

    .lede {
        font-family: var(--serif-display);
        font-weight: 400;
        font-size: clamp(22px, 2.4vw, 32px);
        line-height: 1.45;
        color: var(--ink);
        text-wrap: pretty;
    }
    .lede em { color: var(--horizon); font-style: italic; }
    body[data-mode="night"] .lede em { color: var(--night-rose); }

    .dropcap {
        font-family: var(--serif-display);
        font-weight: 300;
        font-style: italic;
        float: left;
        font-size: 4.4em;
        line-height: 0.86;
        margin: 0.06em 0.10em -0.05em -0.04em;
        color: var(--horizon);
    }
    body[data-mode="night"] .dropcap { color: var(--gold-leaf); }

    .chapter-head {
        font-family: var(--serif-display);
        font-weight: 500;
        font-style: italic;
        font-size: clamp(40px, 5.2vw, 78px);
        line-height: 1.04;
        letter-spacing: -0.02em;
        color: var(--ink);
        text-wrap: balance;
    }
    .chapter-head.right-align { text-align: right; }

    .essay-body {
        font-family: var(--serif-body);
        font-size: 19px;
        line-height: 1.65;
        max-width: var(--measure);
        color: var(--ink);
    }
    .essay-body.narrow { max-width: 52ch; }

    .pull-quote {
        font-family: var(--serif-display);
        font-weight: 400;
        font-style: italic;
        font-size: clamp(34px, 4.4vw, 64px);
        line-height: 1.16;
        color: var(--horizon);
        text-wrap: balance;
        position: relative;
    }
    .pull-quote em { color: var(--ember); font-style: italic; }
    .pull-quote .quote-mark {
        font-family: var(--serif-architectural);
        color: var(--gold-leaf);
        font-size: 1.1em;
        margin-right: 0.05em;
    }
    .pull-quote .quote-mark.close { margin-left: 0.05em; }
    body[data-mode="night"] .pull-quote { color: var(--night-rose); }

    .closing {
        font-family: var(--serif-display);
        font-style: italic;
        font-size: clamp(22px, 2.4vw, 30px);
        line-height: 1.45;
        max-width: 48ch;
        color: var(--ink);
    }
}

/* ------------------------- LAYOUT-BROKEN ----------------- */
@layer layout-broken {
    .journal {
        display: grid;
        grid-template-columns:
            [edge-l] minmax(20px, 60px)
            [main-start] repeat(14, 1fr)
            [main-end] minmax(20px, 60px) [edge-r];
        column-gap: var(--grid-gap);
        position: relative;
        padding: 0;
        z-index: 5;
    }

    .spread {
        grid-column: edge-l / edge-r;
        display: grid;
        grid-template-columns: subgrid;
        position: relative;
        padding: clamp(60px, 9vh, 130px) 0 clamp(40px, 6vh, 90px);
        column-gap: var(--grid-gap);
    }

    .pause {
        grid-column: edge-l / edge-r;
        height: 32vh;
    }
    .pause.short { height: 16vh; }

    /* Folio (page number / chapter label - marginalia) */
    .folio {
        grid-column: main-start / span 2;
        font-family: var(--whisper);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink-soft);
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-self: start;
        padding-top: 6px;
        border-top: 1px solid var(--rule);
        max-width: 14ch;
    }
    .folio .folio-num { color: var(--ember); }

    .margin-folio {
        position: absolute;
        font-family: var(--whisper);
        font-size: 10px;
        letter-spacing: 0.22em;
        color: var(--ink-soft);
        text-transform: uppercase;
    }
    .margin-folio.left { left: 16px; bottom: 30px; transform: rotate(-90deg); transform-origin: left bottom; }

    /* HERO --------------------------------------------------- */
    .spread--hero {
        min-height: 96vh;
        align-content: end;
    }
    .spread--hero .wordmark {
        grid-column: main-start 3 / span 9; /* offset to columns 3-11 */
        margin-top: 8vh;
        position: relative;
    }
    .spread--hero .ember-bar {
        grid-column: main-start 3 / span 4;
        height: 3px;
        background: var(--ember);
        margin-top: 8px;
        position: relative;
        animation: barPulse 6s ease-in-out infinite;
    }
    @keyframes barPulse {
        0%, 100% { opacity: 0.85; transform: scaleX(1); transform-origin: left; }
        50% { opacity: 1; transform: scaleX(1.04); }
    }
    .spread--hero .hero-subtitle {
        position: absolute;
        right: 28px;
        top: 14vh;
        transform: rotate(90deg);
        transform-origin: right top;
        white-space: nowrap;
        font-size: 11px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        font-family: var(--whisper);
        font-style: normal;
        color: var(--ink-soft);
    }
    .spread--hero .hero-lottie {
        grid-column: main-start / span 14;
        margin-top: 24px;
    }
    .spread--hero .hero-essay {
        grid-column: main-start 9 / span 5;
        margin-top: 4vh;
        max-width: 38ch;
        font-style: italic;
        color: var(--ink-soft);
    }

    /* INVITATION --------------------------------------------- */
    .spread--invitation .lede {
        grid-column: main-start 4 / span 9; /* leak across 4-14 */
    }
    .spread--invitation .footnote {
        grid-column: main-start 12 / span 3;
        align-self: start;
        margin-top: 10vh;
    }

    /* DEFINITIONS -------------------------------------------- */
    .definitions {
        grid-column: main-start / span 14;
        display: grid;
        gap: clamp(60px, 12vh, 160px);
    }
    .def {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: main-start / span 14;
        align-items: start;
    }
    .def-word {
        font-family: var(--serif-display);
        font-weight: 400;
        line-height: 0.86;
        letter-spacing: -0.03em;
        color: var(--ink);
        text-wrap: balance;
    }
    .def-word em {
        font-style: italic;
        color: var(--horizon);
    }
    .def-text {
        font-family: var(--serif-body);
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink-soft);
    }
    /* def--a: word in cols 1-7, text in cols 9-12 */
    .def--a .def-word { grid-column: main-start 1 / span 7; font-size: clamp(80px, 14vw, 220px); }
    .def--a .def-text { grid-column: main-start 9 / span 4; margin-top: clamp(40px, 6vw, 80px); }
    /* def--b: word in cols 4-12, text BELOW it in cols 1-4 (headline-under-paragraph reverse) */
    .def--b .def-word { grid-column: main-start 4 / span 9; font-size: clamp(100px, 16vw, 260px); text-align: right; }
    .def--b .def-text { grid-column: main-start 1 / span 4; margin-top: clamp(20px, 4vw, 60px); align-self: end; }
    /* def--c: word in cols 2-14, text directly under in cols 11-14 */
    .def--c .def-word { grid-column: main-start 2 / span 13; font-size: clamp(70px, 13vw, 200px); }
    .def--c .def-text { grid-column: main-start 11 / span 4; margin-top: clamp(20px, 3vw, 40px); }

    /* EXPLAINER (two-tier) ----------------------------------- */
    .spread--explainer .explainer-grid {
        grid-column: main-start / span 14;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--grid-gap);
    }
    .explainer-text {
        grid-column: main-start / span 7;
    }
    .explainer-text .chapter-head {
        margin-bottom: 24px;
    }
    .explainer-text p {
        max-width: 44ch;
        margin-top: 18px;
        line-height: 1.62;
    }
    .step .step-num {
        font-family: var(--serif-display);
        font-style: italic;
        color: var(--ember);
        margin-right: 8px;
    }
    .step.is-active {
        color: var(--ink);
        background: linear-gradient(90deg, rgba(212,89,58,0.08), transparent);
        padding-left: 8px;
        margin-left: -8px;
    }
    .step.is-active .step-num { color: var(--ember); }

    .explainer-figure {
        grid-column: main-start 9 / span 5;
        position: sticky;
        top: 14vh;
        align-self: start;
    }

    /* OFFLINE ------------------------------------------------ */
    .spread--offline .pull-quote {
        grid-column: main-start 2 / span 11;
        margin-bottom: 8vh;
    }
    .spread--offline .offline-lottie {
        grid-column: main-start / span 14;
    }
    .spread--offline .essay-body {
        grid-column: main-start 5 / span 7;
        margin-top: 6vh;
    }
    .spread--offline .footnote.right {
        grid-column: main-start 13 / span 2;
        margin-top: 6vh;
        align-self: start;
    }

    /* PRIVACY ------------------------------------------------ */
    .spread--privacy .privacy-grid {
        grid-column: main-start / span 14;
        display: grid;
        grid-template-columns: subgrid;
        align-items: start;
    }
    .privacy-text {
        grid-column: main-start 8 / span 6;
        order: 2;
    }
    .privacy-text .chapter-head { margin-bottom: 18px; }
    .privacy-text .privacy-list {
        margin-top: 22px;
        display: grid;
        gap: 14px;
        font-family: var(--serif-body);
        font-size: 17px;
        line-height: 1.55;
        color: var(--ink);
    }
    .privacy-text .privacy-list .lvl {
        font-family: var(--serif-display);
        font-style: italic;
        color: var(--ember);
        margin-right: 10px;
    }
    .privacy-text .muted {
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink-soft);
        margin-top: 22px;
        max-width: 44ch;
    }
    .privacy-figure {
        grid-column: main-start / span 6;
        order: 1;
        position: sticky;
        top: 18vh;
    }

    /* TRACKER ------------------------------------------------ */
    .spread--tracker .chapter-head { grid-column: main-start 1 / span 9; }
    .spread--tracker .essay-body.narrow { grid-column: main-start 1 / span 8; margin-top: 16px; }
    .spread--tracker .tracker-wrap {
        grid-column: main-start / span 14;
        margin-top: 6vh;
        display: grid;
        grid-template-columns: subgrid;
        align-items: start;
        position: relative;
    }
    .cartogram {
        grid-column: main-start / span 9;
        height: 60vh;
        min-height: 480px;
        position: relative;
    }
    .tracker-drawer {
        grid-column: main-start 11 / span 4;
        background: var(--bg-deep);
        border-left: 1px solid var(--rule);
        padding: 28px 26px;
        font-family: var(--serif-body);
        font-size: 16px;
        line-height: 1.55;
        color: var(--ink);
        position: sticky;
        top: 14vh;
        opacity: 0.92;
        backdrop-filter: blur(0.5px);
    }

    /* LIBRARY ------------------------------------------------ */
    .spread--library .chapter-head { grid-column: main-start 2 / span 11; }
    .spread--library .essay-body.narrow { grid-column: main-start 2 / span 8; margin-top: 16px; }
    .spread--library .library-grid {
        grid-column: main-start 1 / span 14;
        margin-top: 8vh;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 32px 24px;
    }

    /* LETTERS ------------------------------------------------ */
    .spread--letters {
        align-content: start;
    }
    .spread--letters .closing { grid-column: main-start 3 / span 9; margin-top: 4vh; }
    .spread--letters .quiet-link { grid-column: main-start 3 / span 8; margin-top: 4vh; }
    .spread--letters .footnotes { grid-column: main-start 3 / span 10; margin-top: 14vh; }

    /* FOOTER ------------------------------------------------- */
    .site-foot {
        grid-column: edge-l / edge-r;
        border-top: 1px solid var(--rule);
        margin-top: 12vh;
        padding: 32px clamp(20px, 4vw, 60px) 36px;
        font-family: var(--whisper);
        font-size: 11px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
    .foot-inner {
        display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    }
    .colophon { max-width: 60ch; text-transform: none; letter-spacing: 0.04em; font-style: italic; font-family: var(--serif-display); font-size: 13px; color: var(--ink-soft); }

    /* container queries: definitions adapt without breaking brokenness */
    @container (max-width: 720px) {
        .def--a .def-word, .def--b .def-word, .def--c .def-word {
            font-size: 22vw;
            grid-column: main-start / span 14 !important;
            text-align: left !important;
        }
        .def--a .def-text, .def--b .def-text, .def--c .def-text {
            grid-column: main-start / span 14 !important;
            margin-top: 18px;
        }
    }
}

/* ------------------------- COMPONENTS -------------------- */
@layer components {

    /* HEADER (whisper) */
    .site-header {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 50;
        padding: 14px clamp(18px, 3vw, 40px);
        font-family: var(--whisper);
        font-size: 13px;
        font-weight: 500;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 700ms ease, transform 700ms ease, background-color 600ms ease;
        backdrop-filter: blur(2px);
        background: linear-gradient(to bottom, rgba(244,236,219,0.78), rgba(244,236,219,0));
        pointer-events: none;
    }
    body[data-mode="night"] .site-header {
        background: linear-gradient(to bottom, rgba(31,26,38,0.82), rgba(31,26,38,0));
    }
    .site-header.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

    .header-inner {
        display: flex; justify-content: space-between; align-items: center; gap: 24px;
        max-width: 1600px; margin: 0 auto;
    }
    .site-nav { display: flex; gap: 28px; }
    .site-nav a {
        color: var(--ink-soft);
        font-weight: 500;
        font-size: 13px;
        letter-spacing: 0.02em;
        position: relative;
        transition: color 240ms ease;
    }
    .site-nav a::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: -4px;
        height: 1px;
        background: var(--ember);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 320ms ease;
    }
    .site-nav a:hover { color: var(--ember); }
    .site-nav a:hover::after { transform: scaleX(1); }
    body[data-mode="night"] .site-nav a:hover { color: var(--night-rose); }

    .mode-toggle {
        font-family: var(--whisper);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink-soft);
        padding: 6px 14px;
        border: 1px solid var(--rule);
        border-radius: 999px;
        transition: color 240ms ease, border-color 240ms ease, background-color 240ms ease;
    }
    .mode-toggle:hover {
        color: var(--ember);
        border-color: var(--ember);
        background: rgba(212, 89, 58, 0.06);
    }
    body[data-mode="night"] .mode-toggle:hover { color: var(--night-rose); border-color: var(--night-rose); }

    /* Lottie stage frames */
    .lottie-stage {
        background: linear-gradient(135deg, rgba(244,236,219,0.0) 0%, rgba(232,217,187,0.0) 35%, rgba(224,122,95,0.05) 70%, rgba(138,74,58,0.08) 100%);
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        position: relative;
        overflow: hidden;
        min-height: 320px;
        max-height: 60vh;
    }
    .lottie-stage.tall { min-height: 520px; max-height: 70vh; }
    .lottie-stage.wide { min-height: 320px; }
    .lottie-stage.circle { aspect-ratio: 1 / 1; max-width: 480px; min-height: 0; border: 1px solid var(--rule); border-radius: 0; }

    .hero-lottie figcaption,
    .offline-lottie figcaption,
    .explainer-figure figcaption,
    .privacy-figure figcaption {
        font-family: var(--serif-display);
        font-style: italic;
        font-size: 14px;
        color: var(--ink-soft);
        margin-top: 14px;
        line-height: 1.45;
        max-width: 60ch;
    }

    .sunset-ledger { width: 100%; height: 100%; min-height: 380px; }
    .two-tier-svg, .privacy-svg { width: 100%; height: 100%; }

    /* skyline divider */
    .skyline-divider {
        grid-column: edge-l / edge-r;
        position: relative;
        height: 90px;
        margin: 6vh 0;
        padding: 0 clamp(20px, 4vw, 60px);
        opacity: 0.85;
    }
    .skyline-divider svg { width: 100%; height: 100%; }
    .skyline-divider.alt { opacity: 0.7; }
    .divider-label {
        position: absolute;
        bottom: -18px;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--whisper);
        font-size: 10px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--ink-soft);
        white-space: nowrap;
    }

    /* Footnote (right rail / inline) */
    .footnote {
        font-family: var(--serif-body);
        font-size: 14px;
        line-height: 1.5;
        color: var(--ink-soft);
        font-style: italic;
        padding-left: 12px;
        border-left: 1px solid var(--gold-leaf);
    }
    .footnote sup { color: var(--ember); font-weight: 500; margin-right: 4px; }

    /* Pull-quote */

    /* Ornament */
    .ornament {
        grid-column: edge-l / edge-r;
        display: flex;
        justify-content: center;
        margin: 8vh 0;
        opacity: 0.85;
    }

    /* Tracker drawer typography */
    .drawer-label {
        font-family: var(--whisper);
        font-size: 10px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--ink-soft);
        display: block;
        margin-bottom: 6px;
    }
    .drawer-title {
        font-family: var(--serif-display);
        font-style: italic;
        font-size: 28px;
        line-height: 1.1;
        color: var(--ink);
        margin-bottom: 10px;
    }
    .drawer-status {
        font-family: var(--serif-body);
        font-size: 15px;
        font-style: italic;
        color: var(--horizon);
        margin-bottom: 14px;
    }
    body[data-mode="night"] .drawer-status { color: var(--night-rose); }
    .drawer-note {
        font-size: 14px;
        color: var(--ink-soft);
        margin-bottom: 16px;
    }
    .drawer-code {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ember);
        display: block;
        font-feature-settings: "tnum" 1;
    }

    /* Cartogram tiles */
    .hex-tile {
        position: absolute;
        width: 64px; height: 72px;
        cursor: pointer;
        will-change: transform;
        transition: transform 360ms cubic-bezier(.2,.8,.2,1), filter 240ms ease;
    }
    .hex-tile svg {
        width: 100%; height: 100%;
        overflow: visible;
    }
    .hex-tile polygon {
        fill: var(--paper-deep);
        stroke: var(--horizon);
        stroke-width: 0.8;
        transition: fill 240ms ease, stroke 240ms ease;
    }
    body[data-mode="night"] .hex-tile polygon { fill: #2A2333; }
    .hex-tile.s-pilot polygon { fill: rgba(224, 122, 95, 0.32); stroke: var(--ember); }
    .hex-tile.s-retail polygon { fill: rgba(212, 89, 58, 0.55); stroke: var(--ember); }
    .hex-tile.s-wholesale polygon { fill: rgba(200, 147, 43, 0.45); stroke: var(--gold-leaf); }
    .hex-tile.s-paused polygon { fill: rgba(61, 58, 85, 0.30); stroke: var(--indigo-eve); }
    .hex-tile.s-declined polygon { fill: rgba(90, 74, 66, 0.18); stroke: var(--charcoal-haze); }
    .hex-tile:hover, .hex-tile.is-active {
        filter: drop-shadow(0 6px 16px rgba(212, 89, 58, 0.18));
    }
    .hex-tile:hover polygon, .hex-tile.is-active polygon {
        fill: var(--ember);
        stroke: var(--ink);
    }
    .hex-label {
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--whisper);
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.06em;
        color: var(--ink);
        pointer-events: none;
        white-space: nowrap;
    }
    body[data-mode="night"] .hex-label { color: var(--night-ink); }

    /* Library portraits (stippled engravings, drawn in CSS) */
    .portrait { display: flex; flex-direction: column; gap: 10px; }
    .engraving {
        aspect-ratio: 4 / 5;
        background: var(--paper-deep);
        border: 1px solid var(--rule);
        position: relative;
        overflow: hidden;
    }
    .engraving::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(circle at 30% 28%, var(--ink) 0.6px, transparent 1.2px),
            radial-gradient(circle at 70% 30%, var(--ink) 0.5px, transparent 1.2px),
            radial-gradient(circle at 50% 50%, var(--ink) 0.7px, transparent 1.4px),
            radial-gradient(circle at 50% 70%, var(--ink) 0.6px, transparent 1.2px),
            radial-gradient(circle at 38% 80%, var(--ink) 0.5px, transparent 1.2px),
            radial-gradient(circle at 62% 80%, var(--ink) 0.5px, transparent 1.2px);
        background-size: 14px 14px, 18px 18px, 12px 14px, 16px 14px, 20px 18px, 22px 20px;
        opacity: 0.6;
    }
    .engraving::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 50% 35%, rgba(42,26,18,0.45) 0%, transparent 32%),
            radial-gradient(circle at 50% 70%, rgba(42,26,18,0.30) 0%, transparent 38%),
            radial-gradient(circle at 18% 88%, rgba(138,74,58,0.18) 0%, transparent 18%),
            radial-gradient(circle at 88% 18%, rgba(200,147,43,0.14) 0%, transparent 22%);
    }
    body[data-mode="night"] .engraving { background: #2A2333; }
    body[data-mode="night"] .engraving::before {
        background-image:
            radial-gradient(circle at 30% 28%, var(--night-ink) 0.6px, transparent 1.2px),
            radial-gradient(circle at 70% 30%, var(--night-ink) 0.5px, transparent 1.2px),
            radial-gradient(circle at 50% 50%, var(--night-ink) 0.7px, transparent 1.4px),
            radial-gradient(circle at 50% 70%, var(--night-ink) 0.6px, transparent 1.2px),
            radial-gradient(circle at 38% 80%, var(--night-ink) 0.5px, transparent 1.2px),
            radial-gradient(circle at 62% 80%, var(--night-ink) 0.5px, transparent 1.2px);
        background-size: 14px 14px, 18px 18px, 12px 14px, 16px 14px, 20px 18px, 22px 20px;
        opacity: 0.5;
    }
    .portrait figcaption { display: flex; flex-direction: column; gap: 2px; }
    .port-name { font-family: var(--serif-display); font-style: italic; font-size: 18px; color: var(--ink); }
    .port-role { font-family: var(--serif-body); font-size: 13px; color: var(--ink-soft); font-style: italic; }

    /* Footnotes section */
    .footnotes-title {
        font-family: var(--whisper);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--ink-soft);
        margin-bottom: 14px;
    }
    .footnotes ol { display: grid; gap: 10px; counter-reset: fn; }
    .footnotes li {
        font-family: var(--serif-body);
        font-size: 14px;
        line-height: 1.55;
        color: var(--ink-soft);
        padding-left: 2ch;
        text-indent: -2ch;
    }
    .footnotes sup { color: var(--ember); margin-right: 4px; }

    .quiet-link {
        font-family: var(--serif-display);
        font-style: italic;
        font-size: 18px;
        color: var(--charcoal-haze);
        position: relative;
        display: inline-block;
        padding-bottom: 4px;
        transition: color 320ms ease, transform 320ms ease;
    }
    .quiet-link::after {
        content: "";
        position: absolute; left: 0; right: 0; bottom: 0;
        height: 1px;
        background: var(--charcoal-haze);
        transform-origin: left;
        transition: background 320ms ease, transform 320ms ease;
    }
    .quiet-link:hover { color: var(--ember); transform: translateX(4px); }
    .quiet-link:hover::after { background: var(--ember); }
    body[data-mode="night"] .quiet-link { color: var(--ink-soft); }
    body[data-mode="night"] .quiet-link:hover { color: var(--night-rose); }
    body[data-mode="night"] .quiet-link:hover::after { background: var(--night-rose); }

    /* Reading-mode hint pill */
    .reading-hint {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 60;
        background: var(--bg-deep);
        border: 1px solid var(--rule);
        padding: 8px 12px;
        font-family: var(--whisper);
        font-size: 11px;
        letter-spacing: 0.1em;
        color: var(--ink-soft);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 600ms ease 1.2s, transform 600ms ease 1.2s;
        pointer-events: none;
    }
    .reading-hint kbd {
        font-family: var(--mono);
        background: var(--bg);
        border: 1px solid var(--rule);
        padding: 1px 5px;
        font-size: 10px;
        margin: 0 2px;
        color: var(--ember);
    }
    .reading-hint.is-visible { opacity: 1; transform: translateY(0); }
}

/* ------------------------- MARGINALIA -------------------- */
@layer marginalia {
    .margin-left, .margin-right {
        position: fixed;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
        transform-origin: center;
        font-family: var(--whisper);
        font-size: 10px;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: var(--ink-soft);
        z-index: 10;
        pointer-events: none;
        opacity: 0.7;
        white-space: nowrap;
    }
    .margin-left { left: 12px; }
    .margin-right { right: 12px; transform: translateY(-50%) rotate(90deg); }
    .running-head { display: inline-block; }
    @media (max-width: 900px) {
        .margin-left, .margin-right { display: none; }
    }
}

/* ------------------------- MOTION ------------------------ */
@layer motion {
    /* Fireflies float upward subtly */
    @keyframes float-firefly {
        0% { transform: translateY(0) translateX(0); opacity: 0; }
        15% { opacity: 0.95; }
        85% { opacity: 0.85; }
        100% { transform: translateY(-60px) translateX(8px); opacity: 0; }
    }
    .fireflies .ff {
        animation: float-firefly 7s ease-in-out infinite;
        opacity: 0;
    }
    .fireflies .f1 { animation-delay: 0s; }
    .fireflies .f2 { animation-delay: 0.6s; }
    .fireflies .f3 { animation-delay: 1.2s; }
    .fireflies .f4 { animation-delay: 1.8s; }
    .fireflies .f5 { animation-delay: 2.4s; }
    .fireflies .f6 { animation-delay: 3.0s; }
    .fireflies .f7 { animation-delay: 3.6s; }
    .fireflies .f8 { animation-delay: 4.2s; }
    .fireflies .f9 { animation-delay: 4.8s; }
    .fireflies .f10 { animation-delay: 5.4s; }

    /* Sun slowly descends */
    @keyframes sun-set {
        0% { transform: translate(0, -40px); opacity: 1; }
        100% { transform: translate(40px, 30px); opacity: 0.65; }
    }
    .sun {
        transform-origin: center;
        animation: sun-set 14s ease-in-out forwards;
    }

    /* Two-tier nodes pulse */
    @keyframes node-pulse {
        0%, 100% { stroke-width: 1.4; opacity: 0.92; }
        50% { stroke-width: 2.2; opacity: 1; }
    }
    .two-tier-svg .node.is-active circle {
        animation: node-pulse 1.6s ease-in-out infinite;
        stroke: var(--ember);
    }
    .two-tier-svg .edge {
        stroke-dasharray: 320;
        stroke-dashoffset: 320;
        transition: stroke-dashoffset 900ms ease, stroke 240ms ease;
    }
    .two-tier-svg .edge.is-active {
        stroke-dashoffset: 0;
        stroke: var(--ember);
    }
    .two-tier-svg .token {
        opacity: 0;
        transition: opacity 240ms ease;
    }
    .two-tier-svg .token.is-running { opacity: 1; }

    /* Offline phones move toward stall */
    @keyframes phone-l-meet {
        0%, 100% { transform: translateX(0); }
        40%, 60% { transform: translateX(280px); }
    }
    @keyframes phone-r-meet {
        0%, 100% { transform: translateX(0); }
        40%, 60% { transform: translateX(-280px); }
    }
    @keyframes person-l-meet {
        0%, 100% { transform: translateX(0); }
        40%, 60% { transform: translateX(280px); }
    }
    @keyframes person-r-meet {
        0%, 100% { transform: translateX(0); }
        40%, 60% { transform: translateX(-280px); }
    }
    @keyframes exchange-glow {
        0%, 35%, 65%, 100% { opacity: 0; r: 4; }
        50% { opacity: 1; r: 14; filter: drop-shadow(0 0 12px var(--dusk-rose)); }
    }
    .offline-svg.is-running .phone-l { animation: phone-l-meet 9s ease-in-out infinite; }
    .offline-svg.is-running .phone-r { animation: phone-r-meet 9s ease-in-out infinite; }
    .offline-svg.is-running .person-l { animation: person-l-meet 9s ease-in-out infinite; }
    .offline-svg.is-running .person-r { animation: person-r-meet 9s ease-in-out infinite; }
    .offline-svg.is-running .exchange-dot { animation: exchange-glow 9s ease-in-out infinite; }

    /* Privacy rings - scrubbed by JS via stroke-dashoffset */
    .privacy-svg .ring { transition: stroke-dashoffset 600ms ease, opacity 400ms ease, stroke-width 400ms ease; }
    .privacy-svg .core { transition: r 600ms ease, opacity 400ms ease; }

    /* Hex tile drift */
    @keyframes hex-drift {
        0%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--dr, 0deg)); }
        50% { transform: translate(calc(var(--dx, 0px) * -1), calc(var(--dy, 0px) * -1)) rotate(calc(var(--dr, 0deg) * -1)); }
    }
    .hex-tile {
        animation: hex-drift var(--drift-dur, 9s) ease-in-out infinite;
        animation-delay: var(--drift-delay, 0s);
    }
    .hex-tile.is-active, .hex-tile:hover { animation-play-state: paused; }

    /* Reading mode collapses broken grid */
    body.is-reading .spread > * {
        grid-column: main-start 4 / span 8 !important;
        text-align: left !important;
        font-size: revert;
    }
    body.is-reading .definitions .def-word {
        font-size: clamp(48px, 6vw, 80px) !important;
        text-align: left !important;
        grid-column: main-start 4 / span 8 !important;
    }
    body.is-reading .definitions .def-text {
        margin-top: 12px !important;
        grid-column: main-start 4 / span 8 !important;
    }
    body.is-reading .lottie-stage,
    body.is-reading .skyline-divider,
    body.is-reading .ornament,
    body.is-reading .margin-left,
    body.is-reading .margin-right,
    body.is-reading .reading-hint { opacity: 0.18; }
    body.is-reading .essay-body, body.is-reading .essay-body.narrow {
        max-width: 65ch !important;
        margin-left: auto;
        margin-right: auto;
    }
    body.is-reading {
        --bg: #FAF3E1;
        --rose: #C97B5C;
    }
    body.is-reading .sunset-wash { opacity: 0.4; }

    @media (prefers-reduced-motion: reduce) {
        .fireflies .ff,
        .sun,
        .offline-svg.is-running .phone-l,
        .offline-svg.is-running .phone-r,
        .offline-svg.is-running .person-l,
        .offline-svg.is-running .person-r,
        .offline-svg.is-running .exchange-dot,
        .hex-tile {
            animation: none !important;
        }
        .ember-bar { animation: none !important; }
    }
}

/* ------------------------- OVERRIDES --------------------- */
@layer overrides {
    @media (max-width: 900px) {
        .journal {
            grid-template-columns:
                [edge-l] 16px
                [main-start] repeat(14, 1fr)
                [main-end] 16px [edge-r];
        }
        .spread--hero .wordmark { grid-column: main-start / span 14; font-size: 22vw; }
        .spread--hero .ember-bar { grid-column: main-start / span 8; }
        .spread--hero .hero-essay { grid-column: main-start / span 14; }
        .spread--hero .hero-subtitle { display: none; }
        .spread--invitation .lede { grid-column: main-start / span 14; }
        .spread--invitation .footnote { grid-column: main-start / span 14; margin-top: 4vh; }
        .def--a .def-word, .def--b .def-word, .def--c .def-word { grid-column: main-start / span 14 !important; font-size: 22vw !important; text-align: left !important; }
        .def--a .def-text, .def--b .def-text, .def--c .def-text { grid-column: main-start / span 14 !important; }
        .explainer-text, .explainer-figure { grid-column: main-start / span 14 !important; position: static; }
        .privacy-text, .privacy-figure { grid-column: main-start / span 14 !important; position: static; }
        .privacy-figure .lottie-stage.circle { max-width: 320px; margin: 0 auto; }
        .cartogram { grid-column: main-start / span 14; height: 50vh; }
        .tracker-drawer { grid-column: main-start / span 14; position: static; margin-top: 24px; }
        .spread--offline .pull-quote, .spread--offline .essay-body, .spread--offline .footnote.right {
            grid-column: main-start / span 14;
        }
        .spread--letters .closing, .spread--letters .quiet-link, .spread--letters .footnotes {
            grid-column: main-start / span 14;
        }
        .folio { grid-column: main-start / span 14; max-width: none; }
        .site-nav { display: none; }
    }
}