/* ==========================================================================
   gabs.news — hand-drawn, asymmetric, aurora-bokeh, newsprint journal
   Palette:
     Aurora Pink    #E88B9C
     Aurora Gold    #F0C86A
     Aurora Violet  #7B68AE
     Newsprint Cream #F5EEE0
     Reporter's Ink  #1E1E28
     Margin Blue    #3A6EA5
     Sketch Gray    #6B6B78
   Fonts: Archivo Black (display) · Literata (body) · Space Grotesk (meta)
   ========================================================================== */

:root {
    --pink: #E88B9C;
    --gold: #F0C86A;
    --violet: #7B68AE;
    --cream: #F5EEE0;
    --ink: #1E1E28;
    --blue: #3A6EA5;
    --gray: #6B6B78;

    --cream-deep: #EDE4D0;
    --cream-light: #FAF5E8;
    --ink-soft: rgba(30, 30, 40, 0.78);

    --font-display: 'Archivo Black', 'Impact', 'Helvetica Neue', sans-serif;
    --font-body: 'Literata', 'Georgia', 'Times New Roman', serif;
    --font-meta: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;

    --max-w: 1240px;
    --ease-ink: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--cream);
    background-image:
        /* warm paper grain: layered gradients */
        radial-gradient(circle at 15% 10%, rgba(240, 200, 106, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(232, 139, 156, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(123, 104, 174, 0.04) 0%, transparent 45%),
        radial-gradient(circle at 90% 85%, rgba(240, 200, 106, 0.04) 0%, transparent 45%),
        /* paper fiber streaks */
        repeating-linear-gradient(
            92deg,
            rgba(107, 107, 120, 0.012) 0 1px,
            transparent 1px 3px,
            rgba(107, 107, 120, 0.020) 3px 4px,
            transparent 4px 9px
        ),
        repeating-linear-gradient(
            178deg,
            rgba(30, 30, 40, 0.015) 0 1px,
            transparent 1px 5px
        ),
        linear-gradient(180deg, var(--cream-light) 0%, var(--cream) 40%, var(--cream-deep) 100%);
    overflow-x: hidden;
    line-height: 1.8;
    font-size: clamp(15px, 1.1vw, 18px);
}

/* ==========================================================================
   AURORA BOKEH LAYER
   ========================================================================== */
.aurora-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.aurora-spot {
    position: absolute;
    border-radius: 50%;
    filter: blur(42px);
    will-change: transform;
    opacity: 0;
    transition: opacity 1.2s var(--ease-ink);
}

body.loaded .aurora-spot { opacity: 1; }

.spot-pink {
    width: 420px; height: 420px;
    top: -80px; left: -80px;
    background: radial-gradient(circle, rgba(232, 139, 156, 0.28) 0%, rgba(232, 139, 156, 0.06) 55%, transparent 75%);
    transition-delay: 0.05s;
}
.spot-gold {
    width: 360px; height: 360px;
    top: 12vh; right: -60px;
    background: radial-gradient(circle, rgba(240, 200, 106, 0.26) 0%, rgba(240, 200, 106, 0.06) 55%, transparent 75%);
    transition-delay: 0.25s;
}
.spot-violet {
    width: 480px; height: 480px;
    top: 55vh; left: 35%;
    background: radial-gradient(circle, rgba(123, 104, 174, 0.22) 0%, rgba(123, 104, 174, 0.05) 55%, transparent 75%);
    transition-delay: 0.45s;
}
.spot-pink-2 {
    width: 300px; height: 300px;
    top: 125vh; right: 8%;
    background: radial-gradient(circle, rgba(232, 139, 156, 0.22) 0%, rgba(232, 139, 156, 0.05) 55%, transparent 75%);
    transition-delay: 0.65s;
}

/* ==========================================================================
   FLOWING SPINE (left-margin SVG path)
   ========================================================================== */
.spine {
    position: absolute;
    top: 0;
    left: 16px;
    width: 80px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.spine #spinePath {
    stroke-dasharray: 6400;
    stroke-dashoffset: 6400;
    transition: stroke-dashoffset 0.9s var(--ease-ink);
}

.spine circle.spine-dot {
    fill: var(--blue);
    opacity: 0;
    transition: opacity 0.5s var(--ease-ink);
}

body.loaded .spine #spinePath { /* initial reveal handled in JS via scroll */ }

/* ==========================================================================
   SHARED SECTION CONTAINER SPACING
   ========================================================================== */
.masthead,
.lede,
.field-notes,
.ledger-section,
.colophon,
.footer,
.section-divider {
    position: relative;
    z-index: 2;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 clamp(28px, 6vw, 88px);
}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.masthead {
    min-height: 100vh;
    padding-top: clamp(32px, 5vw, 72px);
    padding-bottom: clamp(32px, 4vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dateline {
    font-family: var(--font-meta);
    font-size: clamp(11px, 0.85vw, 13px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(18px, 2.5vw, 36px);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.6s var(--ease-ink), transform 0.6s var(--ease-ink);
}
body.loaded .dateline { opacity: 1; transform: none; transition-delay: 0.1s; }

.dateline .date-sep { color: var(--pink); font-weight: 700; }
.dateline .edition { color: var(--blue); }

.title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 14vw, 220px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 clamp(14px, 1.8vw, 28px) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(6px, 1vw, 18px);
}

.title-word {
    display: inline-flex;
    line-height: 0.9;
}

.title .letter {
    display: inline-block;
    transform-origin: 50% 80%;
    clip-path: inset(100% 0 0 0);
    transform: translateY(28px) rotate(var(--rot, 0deg));
    opacity: 0;
    transition:
        clip-path 0.7s var(--ease-ink),
        transform 0.7s var(--ease-ink),
        opacity 0.5s var(--ease-ink);
    transition-delay: calc(0.4s + var(--i) * 0.15s);
}

body.loaded .title .letter {
    clip-path: inset(0 0 0 0);
    transform: translateY(0) rotate(var(--rot, 0deg));
    opacity: 1;
}

.title .letter:nth-child(1) { --rot: -1.1deg; }
.title .letter:nth-child(2) { --rot: 0.8deg; }
.title .letter:nth-child(3) { --rot: -0.4deg; }
.title .letter:nth-child(4) { --rot: 1.2deg; }

.title-suffix {
    position: relative;
    font-size: clamp(20px, 5.5vw, 72px);
    line-height: 1;
    color: var(--ink);
    padding-bottom: clamp(8px, 1vw, 14px);
    align-self: flex-end;
}

.suffix-text { position: relative; z-index: 2; }

.suffix-underline {
    position: absolute;
    left: 2px;
    right: 0;
    bottom: -4px;
    width: 100%;
    height: clamp(10px, 1.2vw, 18px);
    overflow: visible;
}
.suffix-underline path {
    stroke-dasharray: 720;
    stroke-dashoffset: 720;
    transition: stroke-dashoffset 0.9s var(--ease-ink);
    transition-delay: 1.2s;
    stroke: var(--ink);
}
body.loaded .suffix-underline path { stroke-dashoffset: 0; }

.tagline {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.55;
    max-width: 58ch;
    color: var(--ink-soft);
    margin: clamp(18px, 2vw, 32px) 0 clamp(26px, 3vw, 46px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.7s var(--ease-ink), transform 0.7s var(--ease-ink);
    transition-delay: 1.5s;
    font-style: italic;
}
.tagline em { font-style: normal; color: var(--pink); font-weight: 700; letter-spacing: 0.02em; }
body.loaded .tagline { opacity: 1; transform: none; }

.masthead-meta {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity 0.8s var(--ease-ink);
    transition-delay: 1.75s;
}
body.loaded .masthead-meta { opacity: 1; }

.meta-pill {
    font-family: var(--font-meta);
    font-size: clamp(11px, 0.8vw, 13px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray);
    padding: 6px 14px;
    border: 1.4px solid var(--ink);
    border-radius: 2px;
    background: rgba(245, 238, 224, 0.5);
    transform: rotate(-0.5deg);
}
.meta-pill:nth-child(3) { transform: rotate(0.6deg); border-color: var(--blue); color: var(--blue); }
.pill-line {
    flex: 0 0 40px;
    height: 2px;
    padding: 0;
    background: var(--ink);
    border: none;
    transform: rotate(-1deg);
}

.masthead-divider {
    width: 100%;
    height: 40px;
    margin-top: clamp(36px, 4.5vw, 72px);
    opacity: 0;
    transition: opacity 0.9s var(--ease-ink);
    transition-delay: 1.95s;
}
body.loaded .masthead-divider { opacity: 1; }

/* ==========================================================================
   LEDE (feature + asides, asymmetric)
   ========================================================================== */
.lede {
    display: grid;
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
    gap: clamp(30px, 4.5vw, 82px);
    align-items: flex-start;
    padding-top: clamp(32px, 5vw, 72px);
    padding-bottom: clamp(36px, 5vw, 80px);
}

.feature {
    position: relative;
    padding-right: clamp(0px, 2vw, 28px);
    transform: translateX(-18px);
    opacity: 0;
    transition: opacity 0.9s var(--ease-ink), transform 0.9s var(--ease-ink);
}
.lede.revealed .feature { opacity: 1; transform: none; }

.kicker {
    display: inline-block;
    font-family: var(--font-meta);
    font-size: clamp(10px, 0.8vw, 12px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--pink);
    padding: 3px 0;
    border-bottom: 1.6px solid var(--pink);
    margin-bottom: clamp(14px, 1.6vw, 22px);
    transform: rotate(-0.6deg);
}

.feature-headline {
    position: relative;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(30px, 4.4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 clamp(14px, 1.5vw, 22px);
    padding-bottom: 14px;
}

.headline-underline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 14px;
    overflow: visible;
    pointer-events: none;
}
.headline-underline path {
    stroke-dasharray: 650;
    stroke-dashoffset: 650;
    transition: stroke-dashoffset 0.9s var(--ease-ink);
}
[data-underline].in-view .headline-underline path,
.section-title.in-view .section-underline path {
    stroke-dashoffset: 0;
}
.section-underline path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 0.9s var(--ease-ink);
}

[data-underline]:hover .headline-underline path {
    stroke-dashoffset: 0;
    transition-duration: 0.3s;
}

.byline {
    font-family: var(--font-meta);
    font-size: clamp(12px, 0.9vw, 14px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
    margin: 0 0 clamp(18px, 2vw, 30px);
}
.byline .by { color: var(--ink); font-weight: 500; }
.byline .reporter { color: var(--blue); font-weight: 700; }
.byline .sep { margin: 0 10px; color: var(--pink); }
.byline .location { color: var(--gray); }

.lede-body {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.8;
    color: var(--ink);
    margin: 0 0 clamp(16px, 1.6vw, 22px);
    hyphens: auto;
}
.lede-body::first-letter {
    font-family: var(--font-display);
    font-size: 1em;
    line-height: 1;
    color: var(--ink);
}
.lede-body:first-of-type::first-letter {
    font-size: 3.4em;
    line-height: 0.85;
    float: left;
    margin: 6px 10px 0 0;
    color: var(--ink);
    padding: 4px 10px 0 0;
}
.lede-body em { color: var(--violet); font-style: italic; font-weight: 700; }

.feature-illustration {
    margin: clamp(24px, 3vw, 42px) 0;
    padding: 0;
}
.feature-illustration svg {
    width: 100%;
    height: auto;
    max-width: 620px;
    display: block;
}
.feature-illustration figcaption {
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
    margin-top: 10px;
    transform: rotate(-0.3deg);
}

.pull-quote {
    position: relative;
    margin: clamp(32px, 4vw, 56px) 0 clamp(16px, 2vw, 28px);
    padding: 20px 0 20px clamp(24px, 3vw, 48px);
    border-left: 3px solid var(--pink);
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(18px, 1.7vw, 26px);
    line-height: 1.45;
    color: var(--ink);
    max-width: 50ch;
}
.pull-quote .quote-mark {
    position: absolute;
    top: -16px;
    left: 4px;
    font-family: var(--font-display);
    font-size: 3em;
    line-height: 1;
    color: var(--pink);
    font-style: normal;
}
.pull-quote .attribution {
    display: block;
    margin-top: 14px;
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray);
    font-style: normal;
}

/* Aside column */
.aside-column {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 2.4vw, 40px);
    padding-top: clamp(20px, 3vw, 48px);
}

.aside-story {
    position: relative;
    padding: clamp(16px, 2vw, 26px) clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) clamp(22px, 2.4vw, 34px);
    background: rgba(245, 238, 224, 0.6);
    border-top: 1.8px solid var(--ink);
    border-bottom: 1.2px solid var(--gray);
    transform: translateX(22px) rotate(0.25deg);
    opacity: 0;
    transition: opacity 0.9s var(--ease-ink), transform 0.9s var(--ease-ink);
}
.aside-story.revealed { opacity: 1; transform: translateX(0) rotate(0.25deg); }

.aside-story:nth-child(2) { transform: translateX(22px) rotate(-0.35deg); }
.aside-story:nth-child(2).revealed { transform: translateX(0) rotate(-0.35deg); }
.aside-story:nth-child(3) { transform: translateX(22px) rotate(0.4deg); }
.aside-story:nth-child(3).revealed { transform: translateX(0) rotate(0.4deg); }

/* Torn-paper left edge via clip-path (irregular polygon) */
.torn-edge {
    clip-path: polygon(
        3% 0%, 97% 0%, 100% 4%, 100% 96%, 97% 100%, 3% 100%, 0% 96%,
        2% 84%, 0% 72%, 3% 60%, 1% 48%, 3% 36%, 0% 24%, 2% 12%, 0% 4%
    );
}

.aside-headline {
    position: relative;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(18px, 1.9vw, 26px);
    line-height: 1.12;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 clamp(10px, 1.2vw, 16px);
    padding-bottom: 10px;
}
.aside-headline .headline-underline {
    height: 12px;
}

.aside-body {
    font-family: var(--font-body);
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0 0 14px;
}

.aside-meta {
    font-family: var(--font-meta);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0;
}

/* ==========================================================================
   SECTION DIVIDERS (ink sketches, full-width)
   ========================================================================== */
.section-divider {
    padding-top: clamp(16px, 2.5vw, 40px);
    padding-bottom: clamp(24px, 3vw, 52px);
    text-align: center;
}
.section-divider svg {
    width: 100%;
    max-width: var(--max-w);
    height: auto;
    display: block;
    margin: 0 auto;
}
.divider-caption {
    display: block;
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray);
    margin-top: clamp(10px, 1.2vw, 18px);
    transform: rotate(-0.3deg);
}

/* Ink path draw animation shared */
.ink-path {
    stroke-dasharray: var(--dash, 900);
    stroke-dashoffset: var(--dash, 900);
    transition: stroke-dashoffset 1s var(--ease-ink);
}
[data-illustration].drawn .ink-path { stroke-dashoffset: 0; }

/* Subtle wobble for "variable stroke-width" feel */
[data-illustration] .ink-path:nth-child(2n) { stroke-width: calc(var(--sw, 1.8) + 0.2px); }
[data-illustration] .ink-path:nth-child(3n) { stroke-width: calc(var(--sw, 1.8) - 0.1px); }

/* ==========================================================================
   FIELD NOTES (asymmetric stagger)
   ========================================================================== */
.section-head {
    margin-bottom: clamp(28px, 3.5vw, 52px);
}
.section-title {
    position: relative;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 10px;
    padding-bottom: 14px;
    display: inline-block;
}
.section-title .section-underline {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 14px;
    overflow: visible;
}
.section-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--gray);
    margin: 0;
    font-size: clamp(14px, 1.05vw, 16px);
}

.field-notes {
    padding-top: clamp(24px, 3.5vw, 56px);
    padding-bottom: clamp(36px, 4vw, 72px);
}

.notes-stagger {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(16px, 2.2vw, 32px);
}

.note {
    position: relative;
    padding: clamp(18px, 2vw, 30px) clamp(20px, 2.2vw, 34px);
    background: rgba(250, 245, 232, 0.55);
    border: 1.6px solid var(--ink);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.9s var(--ease-ink), transform 0.9s var(--ease-ink);
}

.note-a {
    grid-column: 1 / span 7;
    transform: translateX(-24px) rotate(-0.4deg);
    border-left-width: 3px;
    border-left-color: var(--pink);
}
.note-b {
    grid-column: 7 / span 6;
    margin-top: clamp(24px, 4vw, 68px);
    transform: translateX(24px) rotate(0.5deg);
    border-top-color: var(--gold);
    border-top-width: 3px;
}
.note-c {
    grid-column: 3 / span 8;
    transform: translateX(-24px) rotate(-0.25deg);
    border-right-color: var(--violet);
    border-right-width: 3px;
    margin-top: clamp(8px, 1.5vw, 18px);
}

.note.revealed { opacity: 1; transform: translateX(0) rotate(var(--r, 0deg)); }
.note-a.revealed { transform: translateX(0) rotate(-0.4deg); }
.note-b.revealed { transform: translateX(0) rotate(0.5deg); }
.note-c.revealed { transform: translateX(0) rotate(-0.25deg); }

.note-stamp {
    display: inline-block;
    font-family: var(--font-meta);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    padding: 4px 10px;
    border: 1.2px dashed var(--blue);
    margin-bottom: 14px;
    transform: rotate(-0.8deg);
}

.note-headline {
    position: relative;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 14px;
    padding-bottom: 10px;
}
.note-body {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.75;
    color: var(--ink);
    margin: 0;
}

/* ==========================================================================
   LEDGER (running list)
   ========================================================================== */
.ledger-section {
    padding-top: clamp(24px, 3.5vw, 56px);
    padding-bottom: clamp(36px, 4vw, 72px);
}
.ledger-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1.6px solid var(--ink);
}
.ledger-row {
    display: grid;
    grid-template-columns: clamp(56px, 6vw, 88px) 1fr;
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(18px, 2.2vw, 28px) 0;
    border-bottom: 1.2px solid rgba(30, 30, 40, 0.18);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s var(--ease-ink), transform 0.8s var(--ease-ink);
}
.ledger-row.revealed { opacity: 1; transform: none; }
.ledger-row:nth-child(even) { background: rgba(240, 200, 106, 0.05); }

.ledger-mark {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 34px);
    line-height: 1;
    color: var(--pink);
    padding-top: 2px;
    text-transform: lowercase;
    letter-spacing: -0.02em;
    transform: rotate(-2deg);
    display: inline-block;
}

.ledger-line {
    position: relative;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(18px, 1.7vw, 26px);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0 0 6px;
    padding-bottom: 6px;
}
.ledger-line .headline-underline { height: 10px; }
.ledger-gloss {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.05vw, 16px);
    color: var(--gray);
    margin: 6px 0 0;
    font-style: italic;
}
.ledger-gloss em { color: var(--violet); font-style: italic; font-weight: 700; }

/* ==========================================================================
   COLOPHON
   ========================================================================== */
.colophon {
    padding-top: clamp(36px, 4.5vw, 72px);
    padding-bottom: clamp(36px, 4.5vw, 72px);
}
.colophon-inner {
    max-width: 780px;
    margin-left: clamp(0px, 6vw, 120px);
    padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(28px, 3.5vw, 52px);
    background: rgba(250, 245, 232, 0.65);
    border: 1.8px solid var(--ink);
    border-radius: 2px;
    position: relative;
    transform: rotate(-0.3deg);
}
.colophon-inner::before,
.colophon-inner::after {
    content: '';
    position: absolute;
    width: 28px; height: 28px;
    border: 1.6px solid var(--ink);
    background: var(--cream);
}
.colophon-inner::before { top: -12px; left: 32px; transform: rotate(18deg); background: var(--gold); opacity: 0.7; }
.colophon-inner::after { bottom: -12px; right: 40px; transform: rotate(-16deg); background: var(--pink); opacity: 0.55; }

.colophon-title {
    position: relative;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.008em;
    color: var(--ink);
    margin: 0 0 clamp(16px, 2vw, 26px);
    padding-bottom: 14px;
    display: inline-block;
}
.colophon-title .section-underline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 14px;
    overflow: visible;
}
.colophon-body {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.8;
    color: var(--ink);
    margin: 0 0 16px;
}
.colophon-body em { color: var(--violet); font-weight: 700; font-style: italic; }

.colophon-meta {
    display: flex;
    gap: clamp(20px, 3vw, 48px);
    margin-top: clamp(20px, 2.6vw, 36px);
    padding-top: 20px;
    border-top: 1.2px dashed var(--gray);
    flex-wrap: wrap;
}
.meta-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-meta);
}
.meta-label {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gray);
}
.meta-value {
    font-size: clamp(13px, 1vw, 15px);
    color: var(--ink);
    letter-spacing: 0.02em;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    padding-top: clamp(24px, 3vw, 48px);
    padding-bottom: clamp(28px, 3vw, 56px);
    text-align: center;
}
.footer-mark { width: 160px; height: 32px; margin: 0 auto 12px; display: block; opacity: 0.8; }
.footer-line {
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray);
    margin: 0;
}
.footer-line em { color: var(--pink); font-style: italic; font-weight: 700; }

/* ==========================================================================
   REVEAL UTILITIES (sections and stories fade in from sides)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateX(0) translateY(12px);
    transition: opacity 0.9s var(--ease-ink), transform 0.9s var(--ease-ink);
}
.reveal[data-reveal="left"] { transform: translateX(-24px) translateY(8px); }
.reveal[data-reveal="right"] { transform: translateX(24px) translateY(8px); }
.reveal.revealed { opacity: 1; transform: translateX(0) translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
    .lede {
        grid-template-columns: 1fr;
        gap: clamp(28px, 4vw, 48px);
    }
    .feature { padding-right: 0; }
    .aside-column { padding-top: 0; }

    .notes-stagger { grid-template-columns: 1fr; }
    .note-a, .note-b, .note-c { grid-column: 1 / -1; margin-top: 0; }

    .spine { display: none; }
}

@media (max-width: 600px) {
    body { font-size: 15px; }

    .title { font-size: clamp(56px, 22vw, 140px); }
    .title-suffix { font-size: clamp(26px, 10vw, 64px); }

    .masthead, .lede, .field-notes, .ledger-section, .colophon, .footer, .section-divider {
        padding-left: 20px;
        padding-right: 20px;
    }

    .pull-quote { font-size: 18px; padding-left: 18px; }
    .colophon-inner { margin-left: 0; }
    .colophon-meta { flex-direction: column; gap: 16px; }
}

/* ==========================================================================
   KEYFRAMES (small ambient animations)
   ========================================================================== */
@keyframes auroraDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(14px, -10px) scale(1.04); }
    100% { transform: translate(0, 0) scale(1); }
}
.spot-pink   { animation: auroraDrift 18s ease-in-out infinite; }
.spot-gold   { animation: auroraDrift 22s ease-in-out infinite reverse; }
.spot-violet { animation: auroraDrift 26s ease-in-out infinite; }
.spot-pink-2 { animation: auroraDrift 20s ease-in-out infinite reverse; }

@keyframes inkBreathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.94; }
}
.ink-path { animation: inkBreathe 9s ease-in-out infinite; }

@keyframes underlineWiggle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1px); }
}
.suffix-underline path { animation: underlineWiggle 6s ease-in-out infinite; }

/* Print niceties */
@media print {
    .aurora-layer, .spine { display: none; }
    body { background: white; color: black; }
}