/* ============================================================
   MONTEREY STUDIO — tokens.css
   Palette · spacing · radii · sun-bridge custom properties
   Owner: palette specialist
   Direction: design/direction.md §2 (sun bridge) + §3 (palette)
   ============================================================ */

:root {
  /* ---- The sun's true screen position, published per-frame by
     ocean.js from the projected WebGL sun. Every DOM glow anchors
     here — never to a parallel approximation of the arc. Defaults
     serve first paint and the no-WebGL scene. ---- */
  --sun-sx: 50%;
  --sun-sy: 26%;

  /* ---- Palette — 8 values + 1 event color (§3) ---- */
  --noon-haze:     #FFF8EF;  /* page ground at top */
  --golden-hour:   #FFCE8F;  /* mid-scroll ground, hotspots */
  --low-sun:       #FF8F4C;  /* sun disc, glare cores, glints */
  --ember:         #B4441F;  /* interactive only */
  --offshore:      #9FB8C4;  /* cool counterweight */
  --kelp:          #2E4C52;  /* secondary text, sea mid-tone */
  --deep-pacific:  #10222B;  /* dusk sea, footer ground */
  --afterglow-ink: #201622;  /* primary text, dusk sky */
  --green-flash:   #7FD8C4;  /* EVENT color — never above contact */

  /* ---- Sunset waypoints — INTERPOLATION STOPS, not palette
         members. A real sky never desaturates on its way from
         amber to slate: it pivots through rose and plum. These
         are the hand-placed pivots that keep chroma alive in
         every warm→cool ramp on the page. Never used for text,
         never used for UI — ground color only. ---- */
  --rose:       #EE9070;   /* salmon-rose: amber's exit ramp   */
  --plum:       #9A5B6D;   /* dusty plum: rose's exit ramp     */
  --dusk-slate: #47536F;   /* violet-leaning slate: pre-night  */
  --water-plum: #55344E;   /* deep plum: sunset water pivot    */

  /* ---- Sun bridge (§2) — written every frame by motion.js.
         Defaults below paint the golden scene with zero JS. ---- */
  --sun-x: 0.15;            /* azimuth, −1 … 1 */
  --sun-elev: 1;            /* elevation, 1 top → 0 at contact */
  --sun-warmth: 0;          /* 0 noon → 1 sunset */
  --dusk: 0;                /* 0 day → 1 afterglow (post-contact) */
  --shadow-len: 10px;       /* grows as the sun falls */
  --shadow-dx: -2px;        /* opposes --sun-x */
  --shadow-dy: 4px;
  --display-wdth: 118;      /* Archivo wdth axis, breathes with the day */

  /* ---- Live scene colors — lerped by motion.js; warm-noon
         defaults so the zero-JS scene is already golden ---- */
  --sky-top: #FFF6E6;
  --sky-mid: #FBE9D2;
  --sky-hor: #A9BCC4;       /* marine layer band — Offshore, per §5 */
  --sea-far: #6D8390;
  --sea-near: #2E4C52;
  --glint: #FFE9C4;
  --ink: var(--afterglow-ink);
  --chrome-ink: var(--afterglow-ink); /* motion.js lightens it as the page darkens */

  /* ---- Structure ---- */
  --horizon: 62vh;          /* the line that never leaves the screen */
  --horizon-b: 38vh;        /* distance from viewport bottom */

  /* ---- Spacing scale ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.75rem;
  --s-5: 3rem;
  --s-6: 5rem;
  --s-7: 8rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  /* ---- Radii — this site is made of horizons, not pills ---- */
  --r-hair: 1px;
  --r-soft: 6px;
  --r-full: 999px;

  /* ---- Motion (§8) — one easing, no bounce, ever ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 600ms;
  --dur-2: 900ms;
  --dur-3: 1200ms;

  /* ---- Hairlines ---- */
  --hairline: color-mix(in srgb, var(--offshore) 55%, transparent);
}

/* ============================================================
   THE AFTERNOON, PAINTED IN DOCUMENT SPACE
   Owner: palette specialist.

   The fixed backdrop and the WebGL sea live in VIEWPORT space.
   The layers below paint the same afternoon into DOCUMENT space
   — in-flow, color-only, pointer-events:none — so the sunset is
   a property of the page itself. One rule, learned the hard way:
   NO RAMP MAY PASS THROUGH GREY. Every warm→cool transition on
   this page pivots through rose and plum, the way a sky does.
   And light needs a floor: every section's ground carries enough
   chroma to read as an HOUR at a glance, not as tinted cream.
   ============================================================ */

/* ---- The sky arc: one gradient, the whole afternoon.
   Sits inside <main> (z −1: over the sea, under every letter).
   Hand-placed waypoints — cream → gold → honey → amber → rose →
   plum → slate → ink — each of the nine viewports owns a stop.
   Alphas are high on purpose: mid-page must BE a different hour,
   not remember one. ---- */
main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 8.5%,
    /* 14:30 — the studio: the first lean of the light */
    color-mix(in srgb, var(--golden-hour) 30%, transparent) 13%,
    color-mix(in srgb, var(--golden-hour) 44%, transparent) 19%,
    /* 15:20 — evidence: full honey, the working light */
    color-mix(in srgb, var(--golden-hour) 58%, transparent) 24%,
    color-mix(in srgb,
      color-mix(in srgb, var(--golden-hour) 78%, var(--low-sun)) 66%,
      transparent) 30%,
    /* 16:12 — reach: amber leans in */
    color-mix(in srgb,
      color-mix(in srgb, var(--golden-hour) 55%, var(--low-sun)) 72%,
      transparent) 36%,
    color-mix(in srgb,
      color-mix(in srgb, var(--low-sun) 72%, var(--golden-hour)) 76%,
      transparent) 42%,
    /* 16:58 — the answer hour: amber at full burn */
    color-mix(in srgb, var(--low-sun) 76%, transparent) 47%,
    color-mix(in srgb,
      color-mix(in srgb, var(--low-sun) 55%, var(--rose)) 78%,
      transparent) 52%,
    /* 17:44 — form from light: the rose hour */
    color-mix(in srgb, var(--rose) 80%, transparent) 58%,
    color-mix(in srgb,
      color-mix(in srgb, var(--rose) 52%, var(--plum)) 82%,
      transparent) 64%,
    /* 18:26 — hold the course: plum climbs the sky */
    color-mix(in srgb, var(--plum) 82%, transparent) 69%,
    color-mix(in srgb,
      color-mix(in srgb, var(--plum) 48%, var(--dusk-slate)) 84%,
      transparent) 74%,
    /* 19:04 — sunset: slate overhead, fire kept to the horizon */
    color-mix(in srgb, var(--dusk-slate) 84%, transparent) 79%,
    color-mix(in srgb,
      color-mix(in srgb, var(--dusk-slate) 55%, var(--afterglow-ink)) 88%,
      transparent) 85%,
    /* 19:40 — night owns the foot of the page */
    color-mix(in srgb,
      color-mix(in srgb, var(--afterglow-ink) 76%, var(--deep-pacific)) 92%,
      transparent) 100%
  );
}

/* ---- Film grain, printed on the page itself (document space,
   so it survives everywhere the scroll goes). Soft-light keeps
   blacks pitch; the texture lives in the mids, exactly where
   gradient banding does. ---- */
main::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px 240px;
}

/* ---- The water at each stanza's foot. Every section keeps the
   62% horizon; below it the sea takes the color of its hour —
   a thin line of reflected fire at the waterline, a fast pivot
   through copper or plum, then hue-rich depth. NEVER ink-alpha
   over cream (that is how grey happens); the dark is always
   mixed THROUGH a hue. This is also the dark ground the light
   instrument text was set for. Desktop only: on mobile those
   instruments are ink-colored and need light. ---- */
@media (min-width: 901px) {
  /* VIEWPORT-ANCHORED (integration pass): the tint gradient is
     fixed to the viewport, so water color can never paint above
     the viewport's 62% horizon no matter where the section edge
     lands mid-scroll — one world, no leftover bands. The element
     still spans its whole section; a document-space mask fades
     the tint near section boundaries so neighboring hours hand
     off in the water instead of meeting at a hard line. */
  #studio::after, #evidence::after, #reach::after,
  #answer::after, #design::after, #course::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--horizon),
      var(--fire) var(--horizon),
      var(--fire) calc(var(--horizon) + 1.5vh),
      var(--shallow) calc(var(--horizon) + 7vh),
      var(--mid-water) calc(var(--horizon) + 16vh),
      var(--depth) calc(var(--horizon) + 34vh)
    );
    background-attachment: fixed;
    -webkit-mask-image: linear-gradient(
      to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(
      to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  }

  /* 14:30 · gold glare on marine water — the cool counterweight.
     No gold in the water mixes: gold+kelp makes olive. The glare
     is a thin line; the water is frankly blue-green. */
  #studio {
    --fire:      color-mix(in srgb, var(--golden-hour) 58%, transparent);
    --shallow:   color-mix(in srgb,
                   color-mix(in srgb, var(--offshore) 58%, var(--kelp)) 60%,
                   transparent);
    --mid-water: color-mix(in srgb,
                   color-mix(in srgb, var(--kelp) 58%, var(--offshore)) 64%,
                   transparent);
    --depth:     color-mix(in srgb,
                   color-mix(in srgb, var(--kelp) 72%, var(--deep-pacific)) 85%,
                   transparent);
  }

  /* 15:20 · honey glare, the water a notch deeper */
  #evidence {
    --fire:      color-mix(in srgb,
                   color-mix(in srgb, var(--golden-hour) 72%, var(--low-sun)) 62%,
                   transparent);
    --shallow:   color-mix(in srgb,
                   color-mix(in srgb, var(--kelp) 45%, var(--offshore)) 62%,
                   transparent);
    --mid-water: color-mix(in srgb,
                   color-mix(in srgb, var(--kelp) 72%, var(--offshore)) 70%,
                   transparent);
    --depth:     color-mix(in srgb,
                   color-mix(in srgb, var(--kelp) 60%, var(--deep-pacific)) 87%,
                   transparent);
  }

  /* 16:12 · amber glare pivots through copper into plum */
  #reach {
    --fire:      color-mix(in srgb,
                   color-mix(in srgb, var(--noon-haze) 42%, var(--golden-hour)) 80%,
                   transparent);
    --shallow:   color-mix(in srgb,
                   color-mix(in srgb, var(--ember) 62%, var(--low-sun)) 68%,
                   transparent);
    --mid-water: color-mix(in srgb,
                   color-mix(in srgb, var(--water-plum) 62%, var(--ember)) 78%,
                   transparent);
    --depth:     color-mix(in srgb,
                   color-mix(in srgb, var(--deep-pacific) 68%, var(--water-plum)) 88%,
                   transparent);
  }

  /* 16:58 · the burn: copper to plum to deep */
  #answer {
    --fire:      color-mix(in srgb,
                   color-mix(in srgb, var(--noon-haze) 30%, var(--golden-hour)) 82%,
                   transparent);
    --shallow:   color-mix(in srgb,
                   color-mix(in srgb, var(--ember) 74%, var(--low-sun)) 74%,
                   transparent);
    --mid-water: color-mix(in srgb,
                   color-mix(in srgb, var(--water-plum) 72%, var(--ember)) 82%,
                   transparent);
    --depth:     color-mix(in srgb,
                   color-mix(in srgb, var(--deep-pacific) 72%, var(--water-plum)) 88%,
                   transparent);
  }

  /* 17:44 · rose glare, plum water */
  #design {
    --fire:      color-mix(in srgb,
                   color-mix(in srgb, var(--golden-hour) 68%, var(--rose)) 82%,
                   transparent);
    --shallow:   color-mix(in srgb,
                   color-mix(in srgb, var(--ember) 58%, var(--rose)) 76%,
                   transparent);
    --mid-water: color-mix(in srgb, var(--water-plum) 84%, transparent);
    --depth:     color-mix(in srgb,
                   color-mix(in srgb, var(--deep-pacific) 66%, var(--water-plum)) 90%,
                   transparent);
  }

  /* 18:26 · last fire on slate water — §6, literally */
  #course {
    --fire:      color-mix(in srgb,
                   color-mix(in srgb, var(--golden-hour) 55%, var(--low-sun)) 86%,
                   transparent);
    --shallow:   color-mix(in srgb, var(--ember) 76%, transparent);
    --mid-water: color-mix(in srgb,
                   color-mix(in srgb, var(--water-plum) 64%, var(--dusk-slate)) 86%,
                   transparent);
    --depth:     color-mix(in srgb,
                   color-mix(in srgb, var(--deep-pacific) 78%, var(--water-plum)) 92%,
                   transparent);
  }

  /* ---- (Removed) Each service stanza used to paint its own
     document-space sun bloom "so no sky is a lightless field".
     In practice those blooms scrolled with their sections while
     the real sun rode the viewport — two suns drifting apart,
     both reading as flattened ghosts. The sky's light source is
     now solely the GL disc plus the single viewport glow on
     html::before, both anchored to --sun-sx/--sun-sy. The
     stanzas keep their ::after ground tints. ---- */
  #reach {
    --sun-h: calc(var(--horizon) - 26vh);
    --glow-core: color-mix(in srgb, var(--noon-haze) 72%, var(--golden-hour));
    --glow-air:  color-mix(in srgb, var(--golden-hour) 52%, transparent);
  }
  #answer {
    --sun-h: calc(var(--horizon) - 19vh);
    --glow-core: color-mix(in srgb, var(--noon-haze) 55%, var(--golden-hour));
    --glow-air:  color-mix(in srgb,
                   color-mix(in srgb, var(--golden-hour) 72%, var(--low-sun)) 56%,
                   transparent);
  }
  #design {
    --sun-h: calc(var(--horizon) - 13vh);
    --glow-core: color-mix(in srgb, var(--golden-hour) 78%, var(--low-sun));
    --glow-air:  color-mix(in srgb,
                   color-mix(in srgb, var(--golden-hour) 45%, var(--rose)) 58%,
                   transparent);
  }
  #course {
    --sun-h: calc(var(--horizon) - 7vh);
    --glow-core: color-mix(in srgb, var(--golden-hour) 55%, var(--low-sun));
    --glow-air:  color-mix(in srgb, var(--low-sun) 54%, transparent);
  }
}

/* ---- Waterline glare band (legibility rule): a fixed sheet of
   sun-glare riding the viewport's 62% line. Any text row that
   crosses the sea surface crosses THROUGH this glare, so ink
   never lands on dark water unlit — the crossing is always a
   glare beat, not a dark-on-dark beat. Warms with the hour,
   extinguished after sunset (the water goes dark, the type that
   lives there is already light). ---- */
#glareband { display: none; }
@media (min-width: 901px) {
#glareband {
  display: block;
  position: fixed;
  left: 0; right: 0;
  top: calc(var(--horizon) - 3vh);
  height: 11vh;
  z-index: 0;
  pointer-events: none;
  /* the band's gold follows the hour: near-neutral glare at noon,
     gilded only as warmth rises (a fixed gold band read as a
     sunset cue in noon skies — cloud critic catch) */
  --glare-ink: color-mix(in srgb, var(--glint)
    calc(100% * (0.3 + 0.7 * var(--sun-warmth))), var(--noon-haze));
  background:
    radial-gradient(
      64vw 8vh at var(--sun-sx) 34%,
      color-mix(in srgb, var(--glare-ink) 52%, transparent),
      transparent 72%
    ),
    linear-gradient(
      to bottom,
      transparent 0,
      color-mix(in srgb, var(--glare-ink) 26%, transparent) 30%,
      color-mix(in srgb, var(--glare-ink) 34%, transparent) 45%,
      color-mix(in srgb, var(--glare-ink) 14%, transparent) 74%,
      transparent 100%
    );
  opacity: calc((0.55 + 0.35 * var(--sun-warmth)) * (1 - var(--dusk)));
}
}

/* ---- 19:04 — SUNSET. The contact section is the hinge of the
   whole arc: fire at the top, and the page cools through plum
   and slate into night before the visitor's eyes. The veil
   yields to the real backdrop as --dusk arrives. ---- */
#contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb,
      color-mix(in srgb, var(--rose) 60%, var(--low-sun)) 72%,
      transparent) 0%,
    color-mix(in srgb,
      color-mix(in srgb, var(--ember) 62%, var(--rose)) 78%,
      transparent) 18%,
    color-mix(in srgb, var(--plum) 84%, transparent) 34%,
    color-mix(in srgb,
      color-mix(in srgb, var(--plum) 40%, var(--dusk-slate)) 88%,
      transparent) 48%,
    color-mix(in srgb,
      color-mix(in srgb, var(--deep-pacific) 68%, var(--dusk-slate)) 92%,
      transparent) var(--horizon),
    color-mix(in srgb,
      color-mix(in srgb, var(--deep-pacific) 62%, var(--afterglow-ink)) 96%,
      transparent) 100%
  );
  opacity: calc(1 - var(--dusk) * 0.85);
  /* soft edges BOTH ways: blend out of the course hour above and
     into the afterglow below — an unfaded bottom edge printed a
     hard seam across the viewport at the contact→afterglow
     boundary mid-scroll */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}

/* The sun itself, touching the section's own waterline — the
   one place Low Sun may burn this late, because this IS the
   sunset. Gone entirely once --dusk rises. */
#contact::after {
  /* (Removed) This used to paint "the sun itself" at the contact
     waterline — three wide document-space ellipses. But by the
     contact section the scroll-driven elevation has brought the
     REAL GL sun to the horizon: the rendered disc, bloom, and
     glitter lane are already the sunset. The painted duplicate
     produced a second squashed sun plus hard horizontal banding
     as its flat ellipse edges crossed the dusk ground. One sun. */
  content: none;
}

/* ---- 19:40 — AFTERGLOW. Deep ink resolve: sky band Afterglow
   Ink, sea Deep Pacific, exactly the §6 footer — with one
   whisper of Green Flash at the horizon, the event color's only
   ambient appearance, earned because the sun has gone. ---- */
#afterglow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      transparent calc(var(--horizon) - 3vh),
      color-mix(in srgb, var(--green-flash) 9%, transparent) var(--horizon),
      transparent calc(var(--horizon) + 3vh)
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb,
        color-mix(in srgb, var(--afterglow-ink) 72%, var(--water-plum)) 94%,
        transparent) 0%,
      color-mix(in srgb, var(--afterglow-ink) 97%, transparent) 34%,
      color-mix(in srgb,
        color-mix(in srgb, var(--deep-pacific) 72%, var(--afterglow-ink)) 97%,
        transparent) var(--horizon),
      color-mix(in srgb, var(--deep-pacific) 97%, transparent) 100%
    );
  opacity: calc(1 - var(--dusk) * 0.92);
  /* soft top edge into the sunset section above */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
}

/* Footer content must sit above its own night ground; footer
   gets its own grain (it lives outside <main>) */
#afterglow { position: relative; }
#afterglow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px 240px;
}

/* ============================================================
   ATMOSPHERE GRADE — fixed, viewport-space overlays that put
   the sun's light IN THE AIR, over the live scene. The grade
   obeys the §2 bridge but the gold has a FLOOR: this is a
   golden-hour studio and the air is never colorless. Warm
   layers still die with --dusk (§3 altitudes).
   ============================================================ */

/* Warm air: sun bloom + golden veil. Floor of 0.55 so the hero
   delivers the headline's promise even at high sun; breathes up
   with --sun-warmth; extinguished after sunset. */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background:
    /* hot core around the sun's position in the air — a CIRCLE
       riding the PROJECTED GL sun (--sun-sx/--sun-sy), and a glow
       rather than a disc: the WebGL dome owns the only sun disc on
       the page. A parallel CSS approximation of the arc is exactly
       what drifted apart from the disc on scroll. */
    radial-gradient(
      circle 9vw at var(--sun-sx) var(--sun-sy),
      color-mix(in srgb, var(--golden-hour) 46%, transparent),
      color-mix(in srgb, var(--low-sun) 22%, transparent) 52%,
      transparent 82%
    ),
    /* wide glow — circular air halo on the same anchor */
    radial-gradient(
      circle 30vw at var(--sun-sx) var(--sun-sy),
      color-mix(in srgb, var(--low-sun) 26%, transparent),
      color-mix(in srgb, var(--golden-hour) 14%, transparent) 46%,
      transparent 76%
    ),
    /* directional golden veil across the frame */
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--golden-hour) 22%, transparent),
      color-mix(in srgb, var(--golden-hour) 10%, transparent) 40%,
      transparent 64%
    );
  opacity: calc((0.55 + 0.45 * var(--sun-warmth)) * (1 - var(--dusk)));
}

/* The gilding: soft-light grade pinned to the viewport horizon.
   Cool lift at the top of frame, gold struck along the waterline
   so the sea reads as lit metal instead of overcast silver, and
   Deep Pacific weight at the frame's foot. Constant — this is
   the polarizing filter + warming filter on the lens. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 39;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--offshore) 34%, transparent),
      transparent 24%
    ),
    linear-gradient(
      to bottom,
      transparent 36%,
      color-mix(in srgb, var(--golden-hour) 58%, transparent) 56%,
      color-mix(in srgb, var(--low-sun) 62%, transparent) 63%,
      color-mix(in srgb, var(--ember) 42%, transparent) 74%,
      color-mix(in srgb, var(--deep-pacific) 50%, transparent) 100%
    );
  opacity: calc(1 - 0.7 * var(--dusk));
}

/* Night vignette — arrives only as the sun goes (narrative dark
   mode, earned not toggled). Afterglow Ink closing the frame. */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 41;
  pointer-events: none;
  background: radial-gradient(
    130vw 130vh at 50% 44%,
    transparent 52%,
    color-mix(in srgb, var(--afterglow-ink) 32%, transparent) 100%
  );
  opacity: var(--dusk);
}

/* Selection is a hand-shaped act: Ember (§3) */
::selection {
  background: var(--ember);
  color: var(--noon-haze);
}

/* Focus rings are interactive: Ember */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: var(--r-hair);
}

/* Skip link: hidden until keyboard focus, then surfaces above the chrome */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--afterglow-ink, #2E4C52);
  color: var(--noon-haze, #FFF8EF);
  text-decoration: none;
  border-radius: var(--r-hair, 2px);
  transform: translateY(-250%);
}
.skip-link:focus-visible,
.skip-link:focus {
  transform: none;
}

/* ?bare=1 — scene-only capture mode (main.js sets html.bare):
   every DOM overlay disappears so ONLY the WebGL scene (plus its
   CSS sky backdrop and stars) renders, for judging against a
   reference shader. */
html.bare #chrome,
html.bare main,
html.bare #wake,
html.bare #dayrail,
html.bare #lighthouse,
html.bare #flash,
html.bare .skip-link {
  display: none !important;
}