/* ============================================================================
   FIGHTING THE FUTURE — "walk toward the light"
   A one-page case file against doom. The page opens at midnight and ends at
   sunrise: a fixed sky layer interpolates from midnight violet to morning
   gold as you scroll, stars fade, a sun rises behind the horizon ridge.

   Sibling of thefutureisbuilt.com (same craft DNA, different soul).
   Doom speaks in Fraunces italic; the answers speak in Bricolage Grotesque;
   dates, stamps and the clock speak in Spline Sans Mono.

   Modes:
     html.sky        JS-driven dynamic sky (default for capable browsers)
     html:not(.sky)  static night→dawn gradient painted down the document
                     (no-JS and prefers-reduced-motion visitors)
   ============================================================================ */

/* ---- Tokens ---------------------------------------------------------------- */
:root {
    /* night ink (default; sections travel through the dark) */
    --ink:        #efe7f4;
    --ink-dim:    #b6aac8;
    --ink-faint:  #7e7195;
    --line:       rgba(239, 231, 244, 0.14);

    --gold:        #ffb45c;
    --gold-bright: #ffd28f;
    --gold-rgb:    255, 180, 92;
    --ember:       #ff5f4d;
    --ember-rgb:   255, 95, 77;

    --panel:      rgba(255, 255, 255, 0.03);
    --panel-line: rgba(239, 231, 244, 0.13);

    --ridge:  #1c1126;      /* horizon silhouette; lerped to warm umber by JS */
    --chrome: #cfc3de;      /* fixed header ink; lerped by JS */

    --maxw:  900px;
    --bar-h: 58px;

    --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
    --font-body:    "Fraunces", Georgia, serif;
    --font-mono:    "Spline Sans Mono", ui-monospace, monospace;
}

/* daylight sections — the verdict, the finale, the footer.
   Ink is per-section constant (never lerped) so contrast is guaranteed
   at every scroll position, in every mode. */
.zone-day {
    --ink:        #33241a;
    --ink-dim:    #5d4530;
    --ink-faint:  #8a6c50;
    --line:       rgba(51, 36, 26, 0.2);
    --gold:        #8f5510;
    --gold-bright: #6e3f08;
    --panel:      rgba(255, 250, 240, 0.34);
    --panel-line: rgba(51, 36, 26, 0.18);
}

/* ---- Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #08040f; }

body {
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

/* Static fallback sky: one long gradient down the whole document,
   midnight at the hero, morning gold at the footer. */
html:not(.sky) body {
    background: linear-gradient(180deg,
        #08040f 0%, #12081f 30%, #1e0f33 50%, #33184a 62%,
        #55284e 70%, #7d3a52 76%, #a04a56 81%, #cf7355 86%,
        #eb9a63 90%, #f4bc82 94%, #f6ddb0 100%);
}
html.sky body { background: transparent; }

/* ---- Background theatre ----------------------------------------------------- */
#sky       { position: fixed; inset: 0; z-index: -3; pointer-events: none;
             background: linear-gradient(180deg, #060310, #150b28); }
#celestial { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
#horizon   { position: fixed; bottom: 0; left: 0; width: 100%;
             height: clamp(70px, 13vh, 150px); z-index: -1; pointer-events: none; }
#horizon .ridge { fill: var(--ridge); }
#horizon .flyer   { animation: skim 22s ease-in-out infinite alternate; }
#horizon .flyer-b { animation-duration: 30s; animation-direction: alternate-reverse; }
#horizon .flyer-c { animation-duration: 17s; }
@keyframes skim {
    from { transform: translate(-26px, 2px); }
    to   { transform: translate(26px, -3px); }
}
#lantern   { position: fixed; inset: 0; z-index: 3; pointer-events: none;
             mix-blend-mode: screen;
             background: radial-gradient(34vmax 34vmax at var(--lx, 50%) var(--ly, 130%),
                 rgba(255, 186, 110, var(--lo, 0)), transparent 62%); }

html:not(.sky) #sky,
html:not(.sky) #celestial,
html:not(.sky) #lantern { display: none; }

::selection { background: rgba(var(--gold-rgb), 0.35); color: #fff; }
.zone-day ::selection { color: #33241a; }

a { color: var(--gold); text-decoration: none;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.3);
    transition: color 0.2s, border-color 0.2s; }
a:hover { color: var(--gold-bright); border-bottom-color: currentColor; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

@keyframes blink  { 50% { opacity: 0; } }
@keyframes drop   { 0%, 100% { opacity: 0.25; transform: translateY(0); }
                    50% { opacity: 0.9; transform: translateY(6px); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); }
                    to   { opacity: 1; transform: none; } }
@keyframes slam   { from { opacity: 0; transform: rotate(-7deg) scale(2.6); }
                    60%  { opacity: 1; transform: rotate(-7deg) scale(0.94); }
                    to   { opacity: 1; transform: rotate(-7deg) scale(1); } }

/* ---- Top bar ----------------------------------------------------------------- */
.topbar {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--bar-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(18px, 4vw, 44px); z-index: 100; pointer-events: none;
}
.topbar .wordmark {
    font-family: var(--font-mono); font-weight: 600; font-size: 0.72rem;
    letter-spacing: 0.32em; color: var(--chrome); pointer-events: auto;
}
.skyclock {
    display: inline-flex; align-items: center; gap: 0.55em;
    font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem;
    letter-spacing: 0.14em; color: var(--chrome);
    font-variant-numeric: tabular-nums;
    padding: 0.3rem 0.8rem; border-radius: 100px;
    background: rgba(10, 6, 18, 0.16);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.skyclock .glyph { font-size: 0.9em; opacity: 0.85; }
html:not(.sky) .topbar { position: absolute; }
html:not(.sky) .skyclock { display: none; }

/* ---- Layout primitives -------------------------------------------------------- */
section { max-width: var(--maxw); margin: 0 auto; position: relative;
          padding: 110px clamp(22px, 5vw, 48px) 60px; }
.wide { max-width: 1120px; }

.exhibit-label {
    font-family: var(--font-mono); font-weight: 600; font-size: 0.7rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
    display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.6rem;
}
.exhibit-label::after { content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.4), transparent); }
.zone-day .exhibit-label::after {
    background: linear-gradient(90deg, rgba(143, 85, 16, 0.5), transparent); }

.section-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.7rem, 4.6vw, 2.6rem); line-height: 1.12;
    letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1.1rem;
    max-width: 24ch;
}
.section-title.big { font-size: clamp(1.9rem, 5vw, 3.1rem); max-width: 26ch; }
.underline { background: linear-gradient(180deg, transparent 72%, rgba(214, 128, 32, 0.45) 72%); }

.section-intro { color: var(--ink-dim); font-size: 1.02rem; max-width: 58ch; margin-bottom: 2.6rem; }

/* scroll reveal (progressive enhancement; identical pattern to the sibling site) */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
html.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
html.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
html.js .reveal[data-delay="4"] { transition-delay: 0.32s; }

/* ============================================================================
   Hero · midnight
   ============================================================================ */
.hero {
    min-height: 100svh; max-width: 1050px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding-top: calc(var(--bar-h) + 40px);
}
.kicker {
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint);
    margin-bottom: 1.6rem;
}
.hero-title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(3.1rem, 11vw, 6.6rem); line-height: 0.96;
    letter-spacing: -0.015em; color: #f2ecfa; margin-bottom: 1.5rem;
    text-shadow: 0 0 50px rgba(120, 80, 200, 0.25);
}
.hero-title .grad {
    background: linear-gradient(100deg, var(--ember) 10%, var(--gold) 60%, var(--gold-bright));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
    font-size: clamp(1.02rem, 2.3vw, 1.28rem); font-weight: 340;
    color: var(--ink-dim); line-height: 1.7; max-width: 640px; margin: 0 auto 2.1rem;
}
.hero-sub em { font-style: italic; color: var(--ink); }
.whois {
    font-family: var(--font-mono); font-size: clamp(0.66rem, 1.9vw, 0.8rem);
    color: var(--gold); letter-spacing: 0.02em; opacity: 0.85;
    min-height: 1.6em; margin-bottom: 3rem; max-width: 92vw;
}
.whois .cursor { display: inline-block; width: 0.55em; height: 1em; background: var(--gold);
    vertical-align: -0.12em; margin-left: 3px; animation: blink 1.1s steps(1) infinite; }
.hero-scroll {
    display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--ink-faint);
}
.hero-scroll .bar { width: 1px; height: 34px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: drop 2.4s ease-in-out infinite; }

/* ============================================================================
   Exhibit A · the ledger — a rail of prophecies, each stamped
   ============================================================================ */
.ledger-rail { border-left: 1px solid var(--line); margin-left: 0.35rem; padding-top: 0.6rem; }
.entry { position: relative; padding: 0 0 3.4rem clamp(1.4rem, 4vw, 2.4rem); }
@media (min-width: 721px) { .entry { padding-right: 200px; } }  /* the stamp's lane */
.entry:last-child { padding-bottom: 0.6rem; }
.entry::before {
    content: ""; position: absolute; left: -5px; top: 0.5em;
    width: 9px; height: 9px; border-radius: 50%;
    background: #08040f; border: 1px solid var(--gold);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.5);
}
.entry-date {
    font-family: var(--font-mono); font-weight: 600; font-size: 0.78rem;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
    margin-bottom: 0.9rem;
}
.prophecy {
    font-family: var(--font-body); font-style: italic; font-weight: 340;
    font-size: clamp(1.14rem, 2.6vw, 1.44rem); line-height: 1.55;
    color: #e8ddf0; max-width: 34em; margin-bottom: 0.9rem;
}
.entry-who { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em;
    color: var(--ink-faint); margin-bottom: 1.2rem; line-height: 1.7; }
.entry-who b { color: var(--ink-dim); font-weight: 600; }
.entry-who i { font-style: italic; }
.verdict {
    font-family: var(--font-display); font-weight: 400; font-size: 0.95rem;
    line-height: 1.7; color: var(--ink-dim); max-width: 60ch;
}
.verdict b, .verdict strong { color: var(--ink); font-weight: 600; }
.verdict-label {
    display: block; font-family: var(--font-mono); font-weight: 600; font-size: 0.64rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
    margin-bottom: 0.4rem;
}
.verdict-label::after { content: " —"; }

/* the rubber stamp */
.stamp {
    position: absolute; top: 2.2rem; right: 0;
    font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ember); border: 2px solid rgba(var(--ember-rgb), 0.85);
    border-radius: 5px; padding: 0.34em 0.75em;
    transform: rotate(-7deg);
    box-shadow: inset 0 0 10px rgba(var(--ember-rgb), 0.12);
    text-shadow: 0 0 14px rgba(var(--ember-rgb), 0.35);
    background: rgba(var(--ember-rgb), 0.04);
    white-space: nowrap; pointer-events: none;
}
.stamp-gold { color: var(--gold); border-color: rgba(var(--gold-rgb), 0.85);
    box-shadow: inset 0 0 10px rgba(var(--gold-rgb), 0.14);
    text-shadow: 0 0 16px rgba(var(--gold-rgb), 0.4);
    background: rgba(var(--gold-rgb), 0.05); }
html.js .entry .stamp { opacity: 0; }
html.js .entry.in .stamp { animation: slam 0.5s cubic-bezier(0.16, 1.3, 0.3, 1) 0.45s forwards; }

/* ============================================================================
   Exhibit B · tonight's arguments — native <details>, "turn on the light"
   ============================================================================ */
.tally {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim);
    border: 1px solid var(--panel-line); border-radius: 100px;
    padding: 0.42rem 1.05rem; margin-bottom: 2.2rem;
    font-variant-numeric: tabular-nums;
}
.tally-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
    box-shadow: 0 0 10px var(--gold); }

.dooms { display: flex; flex-direction: column; gap: 1rem; }
.doom {
    border: 1px solid var(--panel-line); border-radius: 12px;
    background: var(--panel);
    transition: border-color 0.35s, background 0.35s, box-shadow 0.35s;
}
.doom summary {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
    gap: 0.4rem 1.4rem; padding: 1.25rem clamp(1.1rem, 3vw, 1.7rem);
    cursor: pointer; list-style: none;
}
.doom summary::-webkit-details-marker { display: none; }
.doom-no {
    font-family: var(--font-mono); font-weight: 600; font-size: 0.66rem;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember);
}
.doom-claim {
    font-family: var(--font-body); font-style: italic; font-weight: 360;
    font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.45; color: #e8ddf0;
}
.doom-cta { justify-self: end; white-space: nowrap; }
.doom-cta::after {
    content: "turn on the light ⟶";
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
    opacity: 0.75; transition: opacity 0.2s;
}
.doom summary:hover .doom-cta::after { opacity: 1; }
.doom[open] {
    border-color: rgba(var(--gold-rgb), 0.45);
    background: rgba(var(--gold-rgb), 0.045);
    box-shadow: 0 0 46px rgba(var(--gold-rgb), 0.1), inset 0 0 30px rgba(var(--gold-rgb), 0.04);
}
.doom[open] .doom-cta::after { content: "lit ●"; opacity: 1; color: var(--gold-bright); }
.answer {
    padding: 0.4rem clamp(1.1rem, 3vw, 1.7rem) 1.5rem;
    border-top: 1px dashed rgba(var(--gold-rgb), 0.25);
    margin-top: 0.1rem;
}
html.js .doom[open] .answer { animation: fadeup 0.45s ease both; }
.answer-label {
    display: block; font-family: var(--font-mono); font-weight: 600; font-size: 0.64rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
    margin: 1rem 0 0.8rem;
}
.answer-label::before { content: "☀ "; }
.answer p { font-family: var(--font-display); font-weight: 400; font-size: 0.95rem;
    line-height: 1.72; color: var(--ink-dim); max-width: 66ch; margin-bottom: 1rem; }
.answer p em { font-style: italic; }
.answer-kicker { font-weight: 600 !important; color: var(--gold-bright) !important;
    font-size: 0.98rem !important; margin-bottom: 0.2rem !important; }

.payoff {
    display: none; margin-top: 2.4rem; max-width: 46ch;
    font-family: var(--font-body); font-style: italic; font-size: 1.1rem;
    line-height: 1.7; color: var(--gold-bright);
}
#tonight.all-lit .payoff { display: block; animation: fadeup 0.7s ease both; }
.payoff-arrow { font-style: normal; }

/* ============================================================================
   Exhibit C · the scoreboard — then→now stat tiles
   (dark translucent panels so the light ink stays readable while the sky
    behind them turns rose — this section spans the dawn crossover)
   ============================================================================ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.1rem; }
.tile {
    background: rgba(14, 7, 24, 0.55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(239, 231, 244, 0.14); border-radius: 12px;
    padding: 1.5rem 1.4rem 1.35rem; position: relative; overflow: hidden;
}
.tile::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent 75%); opacity: 0.65; }
.tile-key {
    font-family: var(--font-mono); font-weight: 500; font-size: 0.64rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: #b6aac8;
    margin-bottom: 0.85rem;
}
.tile-val {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2.1rem, 4.6vw, 2.9rem); line-height: 1; color: #f6efff;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.tile-val .unit { font-size: 0.46em; color: #ffb45c; margin-left: 0.12em; font-weight: 600; }
.tile-val .minus { color: #ffb45c; font-weight: 600; }
.tile-range {
    font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.6;
    color: #7e7195; margin-top: 0.8rem; letter-spacing: 0.02em;
}
.sources { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em;
    color: var(--ink-faint); margin-top: 1.8rem; }

/* ============================================================================
   The verdict + finale · daylight
   Morning wash: a pool of warm light behind the words, so dark ink is
   readable the moment these sections enter the still-rose sky.
   ============================================================================ */
.morning-wash::before {
    content: ""; position: absolute; inset: 2% -34%; z-index: -1;
    background: radial-gradient(72% 82% at 50% 46%,
        rgba(255, 241, 219, 0.85), rgba(255, 241, 219, 0.55) 55%,
        rgba(255, 241, 219, 0) 78%);
    pointer-events: none;
}
#verdict { padding-top: 150px; }
.manifesto p {
    font-size: clamp(1.02rem, 2.2vw, 1.16rem); font-weight: 380;
    line-height: 1.85; color: var(--ink); max-width: 60ch; margin-bottom: 1.5rem;
}
.manifesto strong { font-weight: 640; }

.finale { text-align: center; padding-top: 130px; padding-bottom: 150px; }
.finale-title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2.5rem, 8vw, 4.7rem); line-height: 1.02;
    letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.2rem;
}
.finale-sub {
    font-style: italic; font-weight: 360; font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    color: var(--ink-dim); max-width: 44ch; margin: 0 auto 2.8rem;
}
.dawn-btn {
    display: inline-flex; align-items: center; gap: 0.7em;
    font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: #ffd9a0; background: #33241a; border: none; border-radius: 999px;
    padding: 1.15rem 2.4rem;
    box-shadow: 0 14px 44px rgba(51, 36, 26, 0.35);
    transition: transform 0.25s, box-shadow 0.25s, color 0.25s;
}
.dawn-btn:hover {
    color: #ffe9c4; transform: translateY(-3px);
    box-shadow: 0 20px 56px rgba(51, 36, 26, 0.42), 0 0 40px rgba(255, 180, 92, 0.35);
}
.dawn-btn .arrow { font-size: 1.1em; line-height: 0; }

/* ---- Footer ------------------------------------------------------------------- */
footer { text-align: center; padding: 46px 24px clamp(150px, 20vh, 210px); position: relative; }
footer.zone-day { color: var(--ink-dim); }
.foot-mark { font-family: var(--font-mono); font-weight: 600; font-size: 0.72rem;
    letter-spacing: 0.32em; color: var(--ink); margin-bottom: 0.9rem; }
.foot-line { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
    color: var(--ink-faint); line-height: 2; }
.foot-line a { color: var(--gold); border-bottom-color: rgba(143, 85, 16, 0.35); }

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 720px) {
    .doom summary { grid-template-columns: 1fr; gap: 0.55rem; }
    .doom-cta { justify-self: start; margin-top: 0.2rem; }
    .stamp { position: static; display: inline-block; margin-top: 1.1rem;
        transform: rotate(-4deg); }
}
@media (max-width: 600px) {
    body { font-size: 16px; }
    section { padding: 84px 20px 48px; }
    #verdict { padding-top: 110px; }
    .topbar .wordmark { display: none; }  /* the hero says it; the clock is the magic */
    .topbar { justify-content: flex-end; }
    .skyclock { font-size: 0.7rem; }
    .ledger-rail { margin-left: 0.1rem; }
    footer { padding-bottom: 100px; }
}

/* ============================================================================
   Reduced motion — static dawn (the gradient still tells the story)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .reveal, html.js .reveal { opacity: 1; transform: none; }
    html.js .entry .stamp { opacity: 1; }
    #sky, #celestial, #lantern { display: none; }
}