/* ============================================================
   BOVENDAWN — authoritative design layer
   Tokens · typography · components · responsive · motion
   One dawn: warm near-black → warm ivory. Gold is an event.
   ============================================================ */

/* ---- fonts (OFL, self-hosted) ---- */
@font-face {
  font-family: "Fraunces";
  src: url(../fonts/fraunces-var.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url(../fonts/fraunces-italic-var.woff2) format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url(../fonts/geist-var.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens ---- */
:root {
  /* night foundation */
  --base: #14110E;
  --raised: #1A1611;
  --hairline: #221D17;
  --hairline-lit: #2C2620;
  --lit: #F6F1E9;
  --body: #B8AF9F;
  /* --dim carries the small uppercase labels and the nav links. #7A7268
     measured 3.80–3.94:1 against the night surfaces — under AA for text
     below 24px. #8B8273 measures 4.62:1 on the lightest night ground
     (#1C1712) and higher everywhere else. */
  --dim: #8B8273;
  --dimmer: #4A443C;
  --deep: #1F1A15;
  --gold: #D1B078;

  /* daylight foundation (approved Checkpoint 1) */
  --day-high: #F4EEE4;
  --day-mid: #EFE7DA;
  --day-low: #E6DCCB;
  --day-hairline: #D9CEBB;
  /* same reasoning on the daylight side: #8A7F70 measured 3.28:1 behind the
     form field labels; #6E6558 measures 4.81:1 on the brightest ivory. */
  --day-dim: #6E6558;
  --day-body: #5E564B;
  --day-ink: #2A241C;
  --gold-ink: #96793F;
  --gold-cta: #7E6535; /* CTA interaction only: lightness lowered for AA at 13px */
  /* Third gold, for small gold body text on the daylight surface. --gold-ink
     measures 3.32:1 there and --gold-cta 4.46:1 — both under AA below 24px.
     This one measures 5.4:1 with margin. */
  --gold-ink-aa: #6E5A2E;

  /* register-indirect tokens: night values by default,
     flipped inside [data-register="day"] sections */
  --tx-hi: var(--lit);
  --tx-body: var(--body);
  --tx-dim: var(--dim);
  --tx-dimmer: var(--dimmer);
  --ln: var(--hairline);
  --ln-lit: var(--hairline-lit);
  --gold-cur: var(--gold);

  /* type */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(32px, 6.5vw, 92px);
  --fs-display: clamp(28px, 4vw, 50px);
  --fs-line: clamp(24px, 3vw, 38px);
  --fs-title: clamp(19px, 2vw, 24px);
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-label: 11px;

  /* motion — three tempos, deliberately not interchangeable:
     fast   = pointer response (aura, spotlight, hover)
     medium = entrance and section reveals
     slow   = environmental drift, beam breathing, gold shimmer */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
  --t-sig: 1.05s;
  --t-fn: 0.7s;
  --t-fast: 0.18s;

  /* environment */
  --gold-pale: #E4CFA0;
  --gold-deep: #A98A4E;

  /* ---- semantic environment tokens ----
     One warm ramp from night to day. Every section background is drawn from
     these; no section repeats a raw hex. Values are the existing approved
     palette, named — not a new palette. */
  --color-night-deep:    #14110E;  /* hero ground, the darkest point */
  --color-night-surface: #17130F;  /* first content sections */
  --color-night-warm:    #1C1712;  /* last night section before the turn */
  --color-dawn-shadow:   #2A231B;  /* brown-gold shadow, start of the turn */
  --color-dawn-mid:      #7A6D58;  /* the crossover band */
  --color-dawn-beige:    #B7A68C;
  --color-day-surface:   #EFE7DA;  /* warm ivory daylight, never white */
  --color-day-high:      #F4EEE4;
  --color-text-on-night: #F6F1E9;
  --color-text-on-day:   #2A241C;

  /* environmental state — rewritten per phase, read by the decorative layers.
     Defaults are the night-hero values so a no-JS page still looks right. */
  --env-dust: 1;        /* canvas opacity          */
  --env-field: 0;       /* page-level warm fields  */
  --env-vignette: 1;    /* vignette strength       */
  --env-grain: 0.028;   /* film grain opacity      */
  --dawn-p: 0;          /* 0..1 through the turn   */

  /* layout */
  --measure: 1160px;
  --pad-x: clamp(22px, 6vw, 72px);
  --pad-block: clamp(96px, 15vh, 176px);
  --gap-major: clamp(56px, 8vh, 88px);
  --gap-minor: clamp(48px, 7vh, 72px);
  --pad-sub: clamp(52px, 8vh, 92px);

  /* shared material grain texture */
  --grain: 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%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-register="day"] {
  --tx-hi: var(--day-ink);
  --tx-body: var(--day-body);
  --tx-dim: var(--day-dim);
  --tx-dimmer: var(--day-dim);
  --ln: var(--day-hairline);
  --ln-lit: var(--day-hairline);
  --gold-cur: var(--gold-ink);
}

/* ---- base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--base);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(209, 176, 120, 0.28); color: var(--lit); }
[data-register="day"] ::selection { color: var(--day-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 10px 18px; background: var(--raised); color: var(--lit);
  font-size: var(--fs-small); letter-spacing: 0.08em; text-decoration: none;
  border: 1px solid var(--hairline-lit);
  transform: translateY(-64px); opacity: 0;
}
.skip-link:focus-visible { transform: none; opacity: 1; }

/* material grain — static, near-invisible depth */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: 0.028;
  background-image: var(--grain);
}

.wrap { max-width: var(--measure); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ---- brand lockup: wordmark (SVG alpha mask — color CSS-controlled)
   The wordmark is painted with background-color: currentColor through an alpha
   mask, so one `color` on .bd-lockup drives the lockup and the existing
   night/day transitions keep working unchanged.

   Size: --lk-cap is the wordmark's cap height (its SVG is trimmed to the cap
   band, so box height == cap height). It is the single sizing knob — the nav
   and footer override it and nothing else needs to change.

   The lockup is currently wordmark-only. See HANDOFF.md before changing its
   composition. ---- */
.bd-lockup {
  --lk-cap: 12px;                                     /* wordmark cap height */

  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.bd-lockup__word {
  display: block;
  width: auto;              /* height-constrained; aspect-ratio derives the width */
  background-color: currentColor;
  height: var(--lk-cap);
  aspect-ratio: 2682.2 / 275.5;
  -webkit-mask: url(../logo/bovendawn-wordmark.svg) no-repeat center / contain;
  mask: url(../logo/bovendawn-wordmark.svg) no-repeat center / contain;
}

/* ---- navigation ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad-x);
  transition: background-color 0.6s var(--ease);
}
/* --body, not --dim: --dim (#7A7268) is the de-emphasised label token and
   measures 3.97:1 on --base, well under the 7:1 target. --body is 8.66:1,
   and stays below the hero headline's --lit (16.73:1) so hierarchy holds. */
/* the home link carries a 44px tap target without changing the bar's height */
.nav > a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
.nav > a:focus-visible { outline: 1px solid var(--dim); outline-offset: 6px; }
.nav .bd-lockup { --lk-cap: 12px; color: var(--body); transition: color 0.8s var(--ease); }
.nav-links { display: flex; gap: clamp(18px, 3vw, 40px); list-style: none; }
.nav-links a {
  display: inline-block;
  color: var(--dim); text-decoration: none;
  font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase;
  transition: color 0.35s var(--ease);
}
.nav-links a:hover { color: var(--lit); }
.nav-links a:focus-visible { color: var(--lit); outline: 1px solid var(--dim); outline-offset: 6px; }
.nav-links a:active { transform: translateY(1px); }
/* Once scrolled the nav needs a surface so content cannot collide with it.
   Both scrims fade out at their lower edge — a flat block would draw a hard
   horizontal line across the dawn, which is exactly the seam we are avoiding. */
html[data-scrolled] .nav {
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.95) 55%, rgba(20, 17, 14, 0.70) 100%);
}
/* nav over daylight surfaces */
html[data-mode="day"] .nav {
  background: linear-gradient(180deg, rgba(244, 238, 228, 0.94) 55%, rgba(244, 238, 228, 0.66) 100%);
  backdrop-filter: blur(6px);
}
html[data-mode="day"] .nav .bd-lockup { color: var(--day-ink); }
html[data-mode="day"] .nav-links a { color: var(--day-dim); }
html[data-mode="day"] .nav-links a:hover { color: var(--day-ink); }
html[data-mode="day"] .nav-links a:focus-visible { color: var(--day-ink); outline-color: var(--day-dim); }

/* ---- shared text roles ---- */
.eyebrow {
  font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tx-dim);
}
.display { font-family: var(--serif); font-optical-sizing: auto; font-weight: 340; color: var(--tx-hi); }
.gold-word { color: var(--gold-cur); }
.refusal { font-family: var(--serif); font-style: italic; font-weight: 380; color: var(--tx-dim); }
.hairline-rule { border: 0; border-top: 1px solid var(--ln); }

/* ---- illumination (JS adds .lit; no-JS pages render fully lit) ---- */
html.js .ill {
  opacity: 0.06;
  transform: translateY(22px);
  transition: opacity var(--t-fn) var(--ease), transform var(--t-fn) var(--ease),
              filter var(--t-fn) var(--ease);
  transition-delay: var(--d, 0s);
}
/* significant lines also resolve from lightly blurred to sharp */
html.js .ill.ill-sig { filter: blur(3px); transition-duration: var(--t-sig), var(--t-sig), var(--t-sig); }
html.js .ill.lit { opacity: 1; transform: none; }
html.js .ill.ill-sig.lit { filter: blur(0); }

/* ============================================================
   BLOCK 1 — THE DAWN
   Light reveals value that already exists. Three tempos run at once:
   pointer (fast) · entrance (medium) · environment (very slow).
   ============================================================ */
/* No `isolation` here: the page-level .bd-env layer sits at z-index 1 and must
   be able to paint above the hero's own world layer (z 0) while staying below
   the hero copy (z 2). An isolated hero would trap it underneath everything. */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--color-night-deep);
  overflow: hidden;
}

/* ============================================================
   SHARED ENVIRONMENT — one layer, one canvas, whole page
   Fixed to the viewport and driven entirely by --env-* custom
   properties that the phase controller rewrites on :root. All of
   it is decorative and pointer-transparent.
   ============================================================ */
.bd-env {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  contain: strict;
}
.bd-env > * { position: absolute; inset: 0; pointer-events: none; }

/* the dust canvas: opacity is phase-driven, geometry is handled in JS */
.bd-dust {
  width: 100%; height: 100%;
  opacity: var(--env-dust);
  transition: opacity 1.2s linear;
  /* mirrors the hero's world parallax so hero dust still drifts with it */
  transform: translate3d(var(--world-x, 0px), var(--world-y, 0px), 0);
}

/* broad warm fields for the night sections below the hero — the hero supplies
   its own, so this stays at 0 while the hero is on screen */
.bd-fields {
  opacity: var(--env-field);
  transition: opacity 1.4s linear;
  background:
    radial-gradient(58% 42% at 18% 22%, rgba(165, 117, 53, 0.10), transparent 70%),
    radial-gradient(52% 40% at 84% 74%, rgba(116, 99, 68, 0.09), transparent 72%);
}

.bd-vignette {
  opacity: var(--env-vignette);
  transition: opacity 1.4s linear;
  background:
    radial-gradient(circle at 50% 43%, transparent 0%, rgba(5, 4, 3, 0.08) 30%, rgba(5, 4, 3, 0.55) 100%),
    linear-gradient(180deg, rgba(3, 3, 2, 0.40), transparent 22%, transparent 70%, rgba(20, 17, 14, 0.55));
}

/* content rides above the environment everywhere */
.wrap { position: relative; z-index: 2; }

/* grain follows the phase too — lighter as the page reaches daylight */
body::after { opacity: var(--env-grain); transition: opacity 1.4s linear; }

/* ---- environmental phases ----
   The controller writes one attribute on <html>; everything decorative reads
   from these five rows. Nothing else is touched during scroll. The hero stays
   the most intense dark state; night content runs at roughly 40% of it. */
html[data-phase="night-hero"]    { --env-dust: 1;    --env-field: 0;    --env-vignette: 1;    --env-grain: 0.028; }
html[data-phase="night-content"] { --env-dust: 0.8;  --env-field: 1;    --env-vignette: 0.62; --env-grain: 0.026; }
html[data-phase="pre-dawn"]      { --env-dust: 0.5;  --env-field: 0.66; --env-vignette: 0.4;  --env-grain: 0.021; }
html[data-phase="dawn"]          { --env-dust: 0.2;  --env-field: 0.28; --env-vignette: 0.14; --env-grain: 0.013; }
html[data-phase="day"]           { --env-dust: 0;    --env-field: 0;    --env-vignette: 0;    --env-grain: 0.007; }

/* the hero keeps a deeper foot so it still seats into the section beneath it */
html[data-phase="night-hero"] .bd-vignette {
  background:
    radial-gradient(circle at 50% 43%, transparent 0%, rgba(5, 4, 3, 0.08) 30%, rgba(5, 4, 3, 0.55) 100%),
    linear-gradient(180deg, rgba(3, 3, 2, 0.40), transparent 22%, transparent 70%, rgba(20, 17, 14, 0.86));
}

/* Without scripting the phase controller never runs, so the environment would
   be frozen in its night-hero defaults all the way down. Drop the whole layer
   instead — the section gradients already carry the night-to-day arc on their
   own, and every word stays readable. */
html:not(.js) .bd-env { display: none; }

/* ---- environment: resource layers, paths, dawn beam (very slow) ---- */
.hero-world {
  position: absolute; inset: -4%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 52% 44%, rgba(75, 61, 41, 0.20), transparent 30%),
    linear-gradient(155deg, #16120E 0%, #0E0C09 53%, #17130D 100%);
  /* parallax is written by JS as px values; transform only, never layout */
  transform: translate3d(var(--world-x, 0px), var(--world-y, 0px), 0) scale(1.03);
}
.hero-world > * { position: absolute; pointer-events: none; }

/* broad, low-contrast warm light fields */
.hw-field { border-radius: 50%; filter: blur(32px); opacity: 0.22; mix-blend-mode: screen; }
.hw-field--1 {
  top: 14%; left: 10%; width: min(34rem, 62vw); height: min(28rem, 48vh);
  background: radial-gradient(circle, rgba(165, 117, 53, 0.34), transparent 68%);
  animation: hw-field-1 34s ease-in-out infinite alternate;
}
.hw-field--2 {
  right: 4%; bottom: 4%; width: min(38rem, 68vw); height: min(32rem, 52vh);
  background: radial-gradient(circle, rgba(116, 99, 68, 0.26), transparent 70%);
  animation: hw-field-2 43s ease-in-out infinite alternate;
}

/* translucent resource membranes — things that already exist, not yet lit */
.hw-membrane {
  border: 1px solid rgba(219, 195, 143, 0.075);
  border-radius: 46% 54% 62% 38% / 58% 43% 57% 42%;
  background: linear-gradient(135deg, rgba(212, 176, 104, 0.028), rgba(246, 241, 233, 0.014));
  box-shadow: inset 0 0 5rem rgba(203, 163, 90, 0.022);
}
.hw-membrane--1 { top: -18%; left: -6%; width: 58vw; height: 96vh; animation: hw-mem-1 50s ease-in-out infinite alternate; }
.hw-membrane--2 { right: -10%; bottom: -32%; width: 64vw; height: 94vh; animation: hw-mem-2 62s ease-in-out infinite alternate; }

/* path lines — one legible gold path, two quiet contours */
.hw-paths {
  inset: 0; width: 100%; height: 100%; fill: none; opacity: 0.34;
  transform: translate3d(var(--path-x, 0px), var(--path-y, 0px), 0);
}
.hw-path { vector-effect: non-scaling-stroke; }
.hw-path--quiet, .hw-path--faint { stroke: rgba(246, 241, 233, 0.10); stroke-width: 0.8; }
.hw-path--gold {
  stroke: rgba(219, 195, 143, 0.42); stroke-width: 1;
  stroke-dasharray: 0.15 0.85; stroke-dashoffset: 1;
  animation: hw-path-breathe 18s ease-in-out infinite alternate;
}

/* dust and vignette now live in the shared .bd-env layer so that one canvas
   serves the whole page and the vignette can fade across the dawn */

/* broad dawn beam */
.hw-beam {
  top: -8%; left: 50%; width: min(64rem, 74vw); height: 112%;
  background: linear-gradient(180deg, rgba(219, 195, 143, 0.05), rgba(184, 147, 85, 0.016) 48%, transparent 82%);
  clip-path: polygon(38% 0, 62% 0, 92% 100%, 8% 100%);
  opacity: 0.6; transform: translateX(-50%);
  animation: hw-beam-breathe 16s ease-in-out infinite;
}

@keyframes hw-field-1 {
  from { opacity: 0.13; transform: translate3d(-2%, 1%, 0) scale(0.96); }
  to   { opacity: 0.27; transform: translate3d(6%, -3%, 0) scale(1.08); }
}
@keyframes hw-field-2 {
  from { opacity: 0.10; transform: translate3d(2%, -1%, 0) scale(1); }
  to   { opacity: 0.24; transform: translate3d(-7%, 4%, 0) scale(1.1); }
}
@keyframes hw-mem-1 {
  from { transform: rotate(-16deg) translate3d(-1%, 0, 0) scale(1); }
  to   { transform: rotate(-12deg) translate3d(4%, 2%, 0) scale(1.04); }
}
@keyframes hw-mem-2 {
  from { transform: rotate(21deg) translate3d(1%, -2%, 0) scale(0.96); }
  to   { transform: rotate(17deg) translate3d(-5%, -5%, 0) scale(1.06); }
}
@keyframes hw-path-breathe { from { opacity: 0.30; stroke-dashoffset: 1; } to { opacity: 0.72; stroke-dashoffset: 0; } }
@keyframes hw-beam-breathe { 0%, 100% { opacity: 0.38; } 50% { opacity: 0.70; } }

/* ---- hero copy (medium tempo) ---- */
.hero-inner {
  position: relative; z-index: 2; text-align: center;
  transform: translate3d(var(--copy-x, 0px), var(--copy-y, 0px), 0);
}
.hero-sig {
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 22px);
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--dim);
  animation: rise-in 0.9s var(--ease) 0.18s both;
}
.hero-sig .sig-rule {
  width: clamp(28px, 7vw, 92px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(219, 195, 143, 0.5));
}
.hero-sig .sig-rule:last-child { background: linear-gradient(90deg, rgba(219, 195, 143, 0.5), transparent); }

.hero h1 {
  margin-top: clamp(22px, 3vh, 38px);
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 320;
  font-size: var(--fs-hero); line-height: 1.03; letter-spacing: -0.032em;
  color: var(--lit); text-wrap: balance;
}
.hero h1 .hl { display: block; }
.hero h1 .hl-1 { animation: hl-in 1.35s var(--ease-cine) 0.56s both; }
.hero h1 .hl-2 { animation: hl-in 1.45s var(--ease-cine) 0.78s both; }
/* entrance blur is short-lived by design — never a persistent filter */
@keyframes hl-in {
  from { opacity: 0; filter: blur(5px); transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0) scale(1); }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero-anchor {
  margin: clamp(22px, 3.4vh, 40px) auto 0; max-width: 48ch;
  font-family: var(--serif); font-style: italic; font-weight: 330;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.65; color: var(--body);
  animation: rise-in 1.15s var(--ease) 1.28s both;
}
.hero-actions { margin-top: clamp(26px, 4vh, 46px); animation: rise-in 1.05s var(--ease) 1.65s both; }

/* ============================================================
   `visible.` — local illumination
   Gold is the resting state. An identically-positioned ivory copy sits
   above it, revealed only through a soft radial mask that follows the
   pointer. JS writes --spot-x/--spot-y (element-local px) and
   --spot-opacity (0→1 by proximity); no layout is read per event.
   ============================================================ */
.gold-turn {
  position: relative; display: inline-block; white-space: nowrap;
  font-style: italic;
  --spot-x: 50%; --spot-y: 50%; --spot-opacity: 0;
}
.gold-turn__gold {
  color: var(--gold); /* fallback wherever background-clip: text is unsupported */
  background: linear-gradient(92deg, #A98A4E 0%, #D1B078 38%, #F1E2BC 51%, #C7A469 72%, #A98A4E 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: gold-shimmer 26s linear infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-turn__gold { color: transparent; }
}
.gold-turn__light {
  position: absolute; inset: 0; pointer-events: none;
  color: var(--lit);
  opacity: var(--spot-opacity);
  text-shadow: 0 0 20px rgba(250, 241, 218, 0.30);
  -webkit-mask-image: radial-gradient(circle 80px at var(--spot-x) var(--spot-y), #000 0%, rgba(0,0,0,0.98) 30%, rgba(0,0,0,0.52) 58%, transparent 79%);
  mask-image: radial-gradient(circle 80px at var(--spot-x) var(--spot-y), #000 0%, rgba(0,0,0,0.98) 30%, rgba(0,0,0,0.52) 58%, transparent 79%);
  transition: opacity var(--t-fast) ease;
}
/* very slow shimmer — must never read as a flashing gradient */
@keyframes gold-shimmer { from { background-position: 140% center; } to { background-position: -140% center; } }

/* ---- night CTA (hero) ----
   Doubled class: the base .cta lives in Block 7 further down the file,
   so a single class here would lose the cascade and set dark on dark. */
.cta.cta-night {
  border-color: rgba(246, 241, 233, 0.26);
  color: var(--lit);
  background-color: transparent;
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease),
              background-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.cta.cta-night .cta-arr { background: currentColor; }
.cta.cta-night:hover, .cta.cta-night:focus-visible {
  color: var(--base); border-color: var(--gold-pale); background-color: var(--gold-pale);
}
.cta.cta-night:focus-visible { outline: 1px solid var(--gold-pale); outline-offset: 5px; }
.cta.cta-night:active { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) translateY(1px); }

/* ============================================================
   POINTER — bright core + larger delayed aura
   Nodes are created by JS only after it initialises on a fine
   pointer, so the native cursor is never hidden on a page where
   scripting failed or on touch.
   ============================================================ */
.bd-cursor, .bd-aura {
  position: fixed; top: 0; left: 0; z-index: 90;
  border-radius: 50%; pointer-events: none; will-change: transform;
  /* until the pointer actually moves there is nothing to point at, and a dot
     parked in the middle of the hero reads as an artefact */
  opacity: 0; transition: opacity 0.3s ease;
}
html.cursor-live .bd-cursor, html.cursor-live .bd-aura { opacity: 1; }
.bd-cursor {
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: rgba(249, 240, 218, 0.95);
  box-shadow: 0 0 10px rgba(219, 195, 143, 0.55);
}
.bd-aura {
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border: 1px solid rgba(219, 195, 143, 0.11);
  background: radial-gradient(circle, rgba(219, 195, 143, 0.10), transparent 68%);
  transition: width 0.36s var(--ease), height 0.36s var(--ease),
              margin 0.36s var(--ease), background-color 0.36s var(--ease);
}
/* the aura warms and grows as it nears `visible.` */
html.near-visible .bd-aura {
  width: 144px; height: 144px; margin: -72px 0 0 -72px;
  border-color: rgba(236, 222, 191, 0.18);
  background: radial-gradient(circle, rgba(250, 241, 218, 0.17) 0%, rgba(212, 176, 104, 0.09) 36%, transparent 70%);
}
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label { cursor: none; }
/* text entry keeps its native caret — the custom dot must not cost accuracy */
html.has-cursor input, html.has-cursor textarea { cursor: auto; }
html.has-cursor select { cursor: pointer; }
/* over daylight sections the core inverts so it stays visible */
html[data-mode="day"] .bd-cursor { background: rgba(42, 36, 28, 0.9); box-shadow: 0 0 10px rgba(150, 121, 63, 0.4); }
html[data-mode="day"] .bd-aura { border-color: rgba(150, 121, 63, 0.16); background: radial-gradient(circle, rgba(150, 121, 63, 0.08), transparent 68%); }

/* ============================================================
   BLOCK 2 — WHAT WE BELIEVE
   ============================================================ */
.beliefs { background: linear-gradient(180deg, var(--color-night-deep), var(--color-night-surface)); padding: var(--pad-block) 0; }
.belief-panel { position: relative; overflow: hidden; padding: clamp(64px, 11vh, 128px) 0; }
/* a very slow light field crosses each belief — transform only */
.belief-panel::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 45%; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(209, 176, 120, 0.05), transparent 70%);
  animation: belief-sweep 64s linear infinite;
}
.belief-panel > * { position: relative; z-index: 1; }
@keyframes belief-sweep { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
.belief-panel .maxim {
  margin-top: 26px;
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 340;
  font-size: var(--fs-display); line-height: 1.22; letter-spacing: -0.01em;
  color: var(--lit); max-width: 22ch; text-wrap: balance;
}
.belief-panel .support {
  margin-top: 30px; max-width: 46ch;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.65; color: var(--body);
}
.belief-panel .support .gold-word { color: var(--gold); }

/* ============================================================
   BLOCK 3 — HOW WE WORK
   ============================================================ */
.how { background: linear-gradient(180deg, var(--color-night-surface), #191510); padding: var(--pad-block) 0; }
.how-opening {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 340;
  font-size: var(--fs-display); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--lit); max-width: 24ch; text-wrap: balance;
}
.how-path { position: relative; margin-top: clamp(64px, 9vh, 110px); padding-left: clamp(34px, 5vw, 64px); }
.rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--hairline); }
.rail-fill {
  position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--rail-p, 0) * 100%);
  background: linear-gradient(180deg, #6B5F4E, #4A443C);
}
html:not(.js) .rail-fill { height: 100%; }
.step { padding: clamp(40px, 6vh, 64px) 0; max-width: 58ch; }
.step + .step { border-top: 1px solid var(--hairline); }
/* the ordinals are real text, so they take the AA-passing label tone,
   not --tx-dimmer (1.89:1 on the night grounds) */
.step .step-num { font-size: var(--fs-small); letter-spacing: 0.18em; color: var(--tx-dim); }
/* Clarity → Structure → Execution: the stage each step belongs to */
.step .step-stage {
  margin-left: 12px; color: var(--gold-cur);
  font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase;
}
.step h3 {
  margin-top: 12px; font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-title); letter-spacing: -0.01em; color: var(--lit);
}
.step p { margin-top: 16px; color: var(--body); }
.step .refusal { display: block; margin-top: 18px; font-size: 16px; }
.how-principle { margin-top: 20px; padding-left: clamp(34px, 5vw, 64px); max-width: 58ch; color: var(--dim); font-size: var(--fs-small); line-height: 1.7; }
.how-closing {
  margin-top: var(--gap-major);
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 340;
  font-size: var(--fs-line); line-height: 1.3; color: var(--lit); max-width: 32ch; text-wrap: balance;
}

/* ============================================================
   BLOCK 4 — WHAT YOU BRING
   ============================================================ */
.bring { background: linear-gradient(180deg, #191510, var(--color-night-warm)); padding: var(--pad-block) 0; }
.bring-opening {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 340;
  font-size: var(--fs-display); line-height: 1.25; color: var(--lit); max-width: 24ch; text-wrap: balance;
}
.doors {
  margin-top: clamp(64px, 9vh, 110px);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(8, auto);
}
.door {
  position: relative;
  padding: 8px clamp(22px, 2.6vw, 40px) 30px;
  grid-row: 1 / -1;
  display: grid; grid-template-rows: subgrid;
  align-items: start;
  transition: opacity 0.45s var(--ease);
  --dx: 50%; --dy: 40%; --dop: 0;
}
/* local illumination — one system, three slightly different responses.
   Keyboard focus lights the same field from the entrance's own position,
   so focus feedback is never weaker than hover. */
.door::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle 200px at var(--dx) var(--dy), rgba(209, 176, 120, 0.11), transparent 72%);
  opacity: var(--dop); transition: opacity 0.4s var(--ease);
}
.door:nth-child(2)::before { background: radial-gradient(circle 220px at var(--dx) var(--dy), rgba(219, 195, 143, 0.10), transparent 74%); }
.door:nth-child(3)::before { background: radial-gradient(circle 180px at var(--dx) var(--dy), rgba(196, 168, 118, 0.12), transparent 70%); }
.door:focus-within::before { opacity: 1; }
.door > * { position: relative; z-index: 1; }
.door + .door { border-left: 1px solid var(--hairline-lit); }
.doors:has(.door:hover) .door:not(:hover),
.doors:has(.door:focus-within) .door:not(:focus-within) { opacity: 0.5; }
.door .door-num { font-size: var(--fs-small); letter-spacing: 0.18em; color: var(--dim); }
.door h3 { margin-top: 12px; font-family: var(--sans); font-weight: 500; font-size: var(--fs-title); color: var(--lit); letter-spacing: -0.01em; }
.door .hold-label, .door .stall-label {
  margin-top: 26px; font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
}
.door .hold-copy { margin-top: 10px; font-size: 15px; line-height: 1.7; }
.door .stall-lead { margin-top: 10px; font-family: var(--serif); font-style: italic; font-weight: 380; font-size: 17px; color: var(--body); }
.door .stall-copy { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--body); }
.door .enter {
  align-self: end; margin-top: 0; padding-top: 34px;
  align-self: flex-start;
  color: var(--body); text-decoration: none;
  font-size: var(--fs-small); letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
  transition: color 0.35s var(--ease), transform 0.5s var(--ease);
}
.door .enter .arr { display: inline-block; transition: transform 0.35s var(--ease); }
.door .enter:hover, .door .enter:focus-visible { color: var(--lit); }
.door .enter:hover .arr, .door .enter:focus-visible .arr { transform: translateX(6px); }
.door .enter:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; color: var(--lit); }
.door .enter { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0); }
.door .enter:active { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) translateY(1px); }
.bring-closing {
  margin-top: clamp(64px, 9vh, 100px);
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 340;
  font-size: var(--fs-line); line-height: 1.35; color: var(--lit); max-width: 34ch; text-wrap: balance;
}

/* ============================================================
   BLOCK 5 — ONE SYSTEM  (carries the dawn transition)
   ============================================================ */
.step-num, .door-num, .fdn-num { font-variant-numeric: tabular-nums; }

.system {
  position: relative;
  /* text lives in the still-dark upper half; the empty runway below
     carries the steepest stretch of the dawn */
  /* the turn: five named tonal stages, no stop more than ~14% apart, so the
     ramp never shows a band edge. Content occupies the dark top; the long
     runway below carries the crossover. */
  /* The turn, in named stages. The dark end is held until ~54% so every line
     of copy in this section still sits on a dark ground (the seam paragraph
     measured 3.57:1 when the ramp lightened under it); the crossover then runs
     entirely inside the empty runway below the text. */
  background: linear-gradient(180deg,
    var(--color-night-warm) 0%, #201A14 12%, var(--color-dawn-shadow) 24%,
    #332B21 34%, #3D3327 44%, #4A4134 54%, #5E5343 63%,
    var(--color-dawn-mid) 72%, #9B8C72 79%, var(--color-dawn-beige) 86%,
    #D2C4AC 92%, #E2D8C5 96%, var(--color-day-surface) 100%);
  padding: var(--pad-block) 0 clamp(400px, 62vh, 720px);
}
.sys-lines { max-width: none; }
.sys-line {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 340;
  font-size: var(--fs-line); line-height: 1.42; letter-spacing: -0.005em;
  color: var(--lit);
}
.sys-line + .sys-line { margin-top: 18px; }
.sys-line em { font-style: italic; font-weight: 380; }
.sys-line .gold-word { color: inherit; transition: color 0.9s var(--ease); }
.sys-line .gold-word.gold-lit { color: var(--gold); }
/* Invisible sentinel: day mode begins when the runway behind the nav is
   genuinely light. At 72% the ramp is still mid-brown and the light scrim
   landed on a dark ground; 84% sits in the beige stage where it belongs. */
.sys-day-sentinel { position: absolute; left: 0; top: 84%; width: 1px; height: 1px; }
.sys-seam { margin-top: clamp(52px, 7vh, 76px); max-width: 52ch; }
.sys-seam hr { border: 0; border-top: 1px solid #5C5344; margin-bottom: 26px; }
.sys-seam p { color: var(--body); font-size: 17px; }
/* convergence figure */
.converge { margin-top: var(--gap-minor); display: block; width: min(480px, 76%); height: auto; }
.converge path { stroke: #6B5F4E; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }

/* ============================================================
   BLOCK 6 — THE OPERATING FOUNDATION (day register)
   ============================================================ */
.foundation { background: linear-gradient(180deg, #EFE7DA, #F1EADD); padding: var(--pad-block) 0; }
.fdn-opening { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.5; letter-spacing: -0.01em; }
.fdn-opening strong { font-weight: 500; color: var(--day-ink); }
.fdn-opening em { font-family: var(--serif); font-style: italic; font-weight: 380; color: var(--day-dim); }
.fdn-rows { margin-top: var(--gap-major); border-top: 1px solid var(--day-hairline); }
.fdn-row {
  display: grid; grid-template-columns: 72px minmax(220px, 340px) 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(30px, 4.5vh, 44px) 0;
  border-bottom: 1px solid var(--day-hairline);
}
.fdn-row .fdn-num { font-size: var(--fs-small); letter-spacing: 0.18em; color: var(--day-dim); padding-top: 3px; }
.fdn-row h3 { font-family: var(--sans); font-weight: 500; font-size: var(--fs-title); letter-spacing: -0.01em; color: var(--day-ink); }
.fdn-row p { color: var(--day-body); font-size: 15.5px; max-width: 62ch; }
.dims {
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  list-style: none;
  padding: 24px 0 8px;
  font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--day-body);
}
.fdn-closing { margin-top: var(--gap-minor); max-width: 60ch; }
.fdn-closing .lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.6; color: var(--day-ink); }
.fdn-closing .lead .gold-word { color: var(--gold-ink); }
.fdn-closing .note { margin-top: 20px; font-family: var(--serif); font-style: italic; font-weight: 380; font-size: 16px; color: var(--day-body); line-height: 1.7; }

/* ============================================================
   BLOCK 7 — BEGIN (brightest)
   ============================================================ */
/* the second climax: the page arrives at full daylight */
.begin {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #F1EADD, #F4EEE4);
  padding: var(--pad-block) 0 clamp(72px, 11vh, 120px);
}
.begin::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(72% 52% at 50% 6%, rgba(209, 176, 120, 0.20), transparent 64%);
}
.begin > .wrap { position: relative; z-index: 1; }
.promise .p1 {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 360;
  font-size: var(--fs-display); line-height: 1.2; letter-spacing: -0.01em; color: var(--day-ink);
}
.promise .p2 {
  margin-top: 10px;
  font-family: var(--serif); font-style: italic; font-weight: 360;
  font-size: var(--fs-line); line-height: 1.3; color: var(--day-dim);
}
.promise .p2 .gold-word { font-style: normal; color: var(--gold-ink); }
.begin-filter { margin-top: clamp(44px, 6vh, 64px); max-width: 52ch; color: var(--day-body); font-size: 17px; }
.questions { margin-top: clamp(44px, 6vh, 64px); border-top: 1px solid var(--day-hairline); max-width: 760px; }
.question { padding: clamp(26px, 4vh, 38px) 0; border-bottom: 1px solid var(--day-hairline); }
.question h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(17px, 1.9vw, 21px); color: var(--day-ink); letter-spacing: -0.01em; }
.question p { margin-top: 10px; color: var(--day-body); font-size: 15.5px; max-width: 60ch; }
.fit-boundary { margin-top: clamp(36px, 5vh, 52px); max-width: 56ch; font-size: 14.5px; color: var(--day-body); }
.cta-zone { margin-top: clamp(52px, 8vh, 84px); }
.cta {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 18px 46px;
  border: 1px solid var(--day-body);
  color: var(--day-ink); text-decoration: none;
  font-size: var(--fs-small); letter-spacing: 0.3em; text-transform: uppercase;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.cta .cta-arr { position: relative; width: 26px; height: 1px; background: currentColor; transition: transform 0.4s var(--ease); transform-origin: left center; }
.cta .cta-arr::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.cta:hover, .cta:focus-visible { color: var(--gold-cta); border-color: var(--gold-cta); }
.cta:hover .cta-arr, .cta:focus-visible .cta-arr { transform: scaleX(1.35); }
.cta:focus-visible { outline: 1px solid var(--gold-cta); outline-offset: 5px; }
.cta:active { transform: translateY(1px); }
.cta-note { margin-top: 26px; font-size: 14px; color: var(--day-body); max-width: 52ch; }
.cta-note a { color: var(--day-body); text-decoration: underline; text-underline-offset: 3px; }
.cta-note a:hover, .cta-note a:focus-visible { color: var(--day-ink); }

/* ---- partnership form (Block 7) — hairline fields, no card, no radius ---- */
.pform { margin-top: var(--gap-major); max-width: 680px; display: grid; gap: 26px; }
.pf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; }
.pf-label { display: block; margin-bottom: 9px; font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--day-dim); }
.pf-input {
  width: 100%; padding: 13px 15px;
  background: transparent; border: 1px solid var(--day-hairline); border-radius: 0;
  font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--day-ink);
  transition: border-color 0.3s var(--ease);
}
.pf-input:hover { border-color: var(--day-dim); }
.pf-input:focus { border-color: var(--day-ink); }
/* a 1px border shift is not a sufficient focus indicator on its own */
.pf-input:focus-visible { outline: 2px solid var(--gold-cta); outline-offset: 2px; border-color: var(--day-ink); }
textarea.pf-input { resize: vertical; min-height: 88px; }
.pf-selectwrap { position: relative; }
.pf-selectwrap select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.pf-selectwrap select:required:invalid { color: var(--day-dim); }
.pf-selectwrap::after {
  content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px;
  border-right: 1px solid var(--day-body); border-bottom: 1px solid var(--day-body);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.pf-group { border: 0; min-width: 0; }
.pf-group legend { margin-bottom: 5px; }
.pf-optgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.pf-optgroup[hidden] { display: none; }
.pf-check {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; cursor: pointer;
  min-height: 44px;
  font-size: 14.5px; line-height: 1.5; color: var(--day-body);
  transition: color 0.3s var(--ease);
}
.pf-check:hover { color: var(--day-ink); }
.pf-check input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 15px; height: 15px; margin-top: 3px;
  border: 1px solid var(--day-body); background: transparent; cursor: pointer;
  display: grid; place-content: center;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pf-check input::before { content: ""; width: 7px; height: 7px; background: var(--day-high); transform: scale(0); transition: transform 0.25s var(--ease); }
.pf-check input:checked { background: var(--day-ink); border-color: var(--day-ink); }
.pf-check input:checked::before { transform: scale(1); }
.pf-check input:focus-visible { outline: 1px solid var(--day-dim); outline-offset: 3px; }
.pf-phone { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.pf-privacy { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--day-body); max-width: 56ch; }
.pf-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pf-privacy a:hover, .pf-privacy a:focus-visible { color: var(--day-ink); }
.pf-submit { width: 100%; justify-content: center; margin-top: 4px; background: transparent; font-family: var(--sans); cursor: pointer; }
@media (max-width: 640px) {
  .pf-2col { grid-template-columns: 1fr; }
  .pf-optgroup { grid-template-columns: 1fr; }
}

/* ---- footer (deepened parchment band) ---- */
.footer { background: var(--day-low); padding: var(--gap-minor) 0; }
.footer .bd-lockup { --lk-cap: min(22px, 4.7vw); color: var(--day-ink); }
.footer-meta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 14px; font-size: 13px; color: var(--day-body); }
/* padded to a 44px tap target, pulled back so the row reads unchanged */
.footer-meta a { color: inherit; text-decoration: none; display: inline-block; padding: 11px 0; margin-block: -11px; }
.footer-meta a:hover, .footer-meta a:focus-visible { color: var(--day-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-meta .sep { color: var(--day-dim); }

/* ============================================================
   Sub-page register (paths) — brighter, operational
   ============================================================ */
.subpage-body { background: var(--day-mid); }
/* the masthead opens in the same night family as the homepage hero, one step
   less deep so the hero stays the most intense dark moment on the site */
.masthead {
  position: relative;
  background: linear-gradient(180deg,
    var(--color-night-deep) 0%, #191510 34%, var(--color-night-warm) 72%, #221C15 100%);
  padding: calc(80px + var(--pad-block) * 0.55) 0 var(--gap-major);
}

/* ---- the subpage turn ----
   Previously the masthead cut straight to #EFE7DA in a single edge. This band
   carries the same five-stage crossover the homepage uses, at roughly 80vh of
   total transition once the masthead's own tail is counted. */
.sub-dawn {
  position: relative;
  height: clamp(300px, 58vh, 660px);
  background: linear-gradient(180deg,
    #221C15 0%, var(--color-dawn-shadow) 16%, #332B21 30%, #453B2E 41%,
    #5E5343 51%, var(--color-dawn-mid) 62%, #9B8C72 72%,
    var(--color-dawn-beige) 80%, #D2C4AC 88%, #E2D8C5 94%, var(--color-day-surface) 100%);
}
/* the sentinel that flips the nav to its daylight palette, placed where the
   band is genuinely light enough to need it */
.sub-dawn__sentinel { position: absolute; left: 0; top: 82%; width: 1px; height: 1px; }
.crumbs { display: flex; align-items: center; gap: 12px; font-size: var(--fs-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.crumbs a { display: inline-block; padding: 10px 4px; margin: -10px -4px; color: var(--dim); text-decoration: none; transition: color 0.35s var(--ease); }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--lit); }
.crumbs a:focus-visible { outline: 1px solid var(--dim); outline-offset: 4px; }
.crumbs [aria-current] { color: var(--body); }
.masthead h1 {
  margin-top: 22px; font-family: var(--serif); font-optical-sizing: auto; font-weight: 340;
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.18; letter-spacing: -0.01em; color: var(--lit);
  max-width: 22ch; text-wrap: balance;
}
.masthead .support { margin-top: 20px; color: var(--body); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.65; max-width: 52ch; }
.masthead .audience { margin-top: 14px; color: var(--dim); font-size: 14px; line-height: 1.7; max-width: 52ch; }

/* entrance diagram — monoline stage chain, static, shared grammar */
.efig { display: flex; margin-top: clamp(36px, 5vh, 56px); max-width: 780px; }
.efig .st { flex: 1; position: relative; padding: 16px 16px 0 0; }
.efig .st::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #5C5344; }
.efig .st::after { content: ""; position: absolute; top: -3.5px; left: 0; width: 7px; height: 7px;
  border: 1px solid var(--dim); background: #241E17; }
.efig .st .t { font-size: 12.5px; line-height: 1.45; color: var(--body); max-width: 15ch; }
.efig .st .t small { display: block; margin-top: 2px; font-size: 11px; color: var(--dim); }
/* P&S: inputs converging into the first stage */
.efig .fan { flex: 0 0 52px; position: relative; margin-right: 2px; }
.efig .fan span { position: absolute; right: 0; width: 100%; height: 1px; background: #4A4136; transform-origin: right center; }
.efig .fan span:nth-child(1) { top: 0; transform: rotate(-11deg); }
.efig .fan span:nth-child(2) { top: 0; }
.efig .fan span:nth-child(3) { top: 0; transform: rotate(11deg); }
/* M&C: partner input joining a stage + feedback return */
.efig .st.joined .join { position: absolute; top: -34px; left: 0; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim); padding-left: 10px; }
.efig .st.joined .join::before { content: ""; position: absolute; left: 0; top: 2px; width: 1px; height: 30px; background: #4A4136; }
.efig-ret { max-width: 780px; position: relative; margin-top: 18px; }
.efig-ret .arc { border: 1px solid #4A4136; border-top: 0; height: 16px; margin: 0 12% 0 38%; }
.efig-ret .lbl { margin-top: 8px; margin-left: 38%; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
/* B&IP: boundary corridor on contained stages */
.efig .st.bound .b2 { position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: #3A332A; }

/* ============================================================
   Sub-page sections — operational register
   ============================================================ */
.sub-section { padding-bottom: var(--pad-sub); }
.sub-section .wrap { border-top: 1px solid var(--day-hairline); padding-top: var(--pad-sub); }
.sub-section.sub-first .wrap { border-top: 0; padding-top: clamp(56px, 9vh, 104px); }
.sub-label { font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--day-dim); }

.sit-open { margin-top: 22px; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.5; letter-spacing: -0.01em; color: var(--day-ink); max-width: 52ch; }
.sit-list { margin-top: 28px; list-style: none; max-width: 66ch; }
.sit-list li { padding: 14px 0; border-top: 1px solid var(--day-hairline); color: var(--day-body); font-size: 15.5px; line-height: 1.7; }
.sit-list li:last-child { border-bottom: 1px solid var(--day-hairline); }

.bring-lead { margin-top: 22px; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--day-ink); font-weight: 500; max-width: 50ch; letter-spacing: -0.01em; }
.bring-sub { margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--day-body); max-width: 60ch; }
.bring-sub strong { font-weight: 500; color: var(--day-ink); }

/* grouped operating outcomes — a system, not a service menu */
.outcome-groups { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); }
.og { padding: 0 clamp(18px, 2.4vw, 36px); }
.og:first-child { padding-left: 0; }
.og + .og { border-left: 1px solid var(--day-hairline); }
.og h3 { font-family: var(--sans); font-weight: 500; font-size: 15.5px; line-height: 1.45;
  letter-spacing: -0.005em; color: var(--day-ink); }
.og h3 .og-n { display: block; margin-bottom: 6px; font-weight: 400; font-size: var(--fs-small);
  letter-spacing: 0.18em; color: var(--day-dim); font-variant-numeric: tabular-nums; }
.og ul { margin-top: 14px; list-style: none; }
.og li { padding: 7px 0; border-top: 1px solid var(--day-hairline); font-size: 14px; color: var(--day-body); }

.phase-rail { display: flex; margin-top: 34px; max-width: 760px; }
.phase-rail .pr { flex: 1; position: relative; padding: 20px 18px 0 0; }
.phase-rail .pr::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--day-hairline); }
.phase-rail .pr::after { content: ""; position: absolute; top: -3.5px; left: 0; width: 7px; height: 7px;
  border: 1px solid var(--day-body); background: var(--day-mid); }
.phase-rail .pr .n { font-size: var(--fs-small); letter-spacing: 0.18em; color: var(--day-dim); font-variant-numeric: tabular-nums; }
.phase-rail .pr .t { margin-top: 4px; font-size: 15px; font-weight: 500; color: var(--day-ink); letter-spacing: -0.01em; }

.phase { display: grid; grid-template-columns: minmax(170px, 250px) 1fr; gap: clamp(18px, 3vw, 44px);
  padding: clamp(26px, 4vh, 38px) 0; border-top: 1px solid var(--day-hairline); margin-top: 0; }
.phases { margin-top: 40px; }
.phase .ph-name .n { font-size: var(--fs-small); letter-spacing: 0.18em; color: var(--day-dim); font-variant-numeric: tabular-nums; }
.phase .ph-name .t { margin-top: 6px; font-size: 17px; font-weight: 500; color: var(--day-ink); letter-spacing: -0.01em; }
.phase .scope { font-size: 14px; line-height: 1.8; color: var(--day-body); max-width: 62ch; }
.phase .outcome { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--day-body); max-width: 62ch; }
.phase .outcome strong { font-weight: 500; color: var(--day-ink); }
.gate { margin-top: 16px; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  border: 1px solid var(--day-hairline); padding: 9px 14px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--day-ink); }
.gate .g-lbl { color: var(--day-dim); }
.phase-note { margin-top: 30px; max-width: 62ch; font-size: 14.5px; color: var(--day-body); line-height: 1.7; }

.refusal-block { max-width: 62ch; }
.refusal-block .r1 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 500; letter-spacing: -0.01em; color: var(--day-ink); }
.refusal-block .r2 { margin-top: 12px; font-family: var(--serif); font-style: italic; font-weight: 380;
  font-size: 17px; line-height: 1.6; color: var(--day-body); }

.rel-row { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: clamp(18px, 3vw, 44px);
  padding: 20px 0; border-top: 1px solid var(--day-hairline); }
.rel-rows { margin-top: 28px; max-width: 820px; }
.rel-row .rel-tag { font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--day-dim); padding-top: 4px; }
.rel-row p { font-size: 16px; line-height: 1.7; color: var(--day-body); max-width: 58ch; }
.rel-row.rel-this p { color: var(--day-ink); }
.rel-principle { margin-top: 30px; max-width: 62ch; font-size: 15px; line-height: 1.75; color: var(--day-body); }
.rel-principle strong { font-weight: 500; color: var(--day-ink); }
.models-label { margin-top: 34px; font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--day-dim); }
.models { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none;
  font-size: 14px; color: var(--day-body); }

.qa-list { margin-top: 26px; list-style: none; max-width: 760px; counter-reset: q; }
.qa-list li { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--day-hairline);
  font-size: 16px; font-weight: 500; color: var(--day-ink); letter-spacing: -0.01em; counter-increment: q; }
.qa-list li::before { content: "0" counter(q); flex: 0 0 auto; font-weight: 400;
  font-size: var(--fs-small); letter-spacing: 0.18em; color: var(--day-dim);
  font-variant-numeric: tabular-nums; padding-top: 3px; }
.qa-list li:last-child { border-bottom: 1px solid var(--day-hairline); }
.sub-cta-zone { margin-top: 40px; }

/* section rhythm variants */
.sub-air { padding-bottom: clamp(76px, 11vh, 128px); }
.sub-air .wrap { padding-top: clamp(76px, 11vh, 128px); }
.sub-bright { background: var(--day-high); }
.sub-bright .wrap { border-top: 0; }
.proof-strip { background: var(--day-low); padding: clamp(38px, 6vh, 60px) 0; margin-bottom: var(--pad-sub); }
.proof-strip h2 { font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--day-dim); }
.proof-strip p { margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--day-ink); max-width: 64ch; }

.other-paths { display: flex; flex-wrap: wrap; gap: 16px 44px; margin-top: 26px; }
.other-paths a { display: inline-flex; align-items: center; gap: 12px; color: var(--day-body); text-decoration: none;
  font-size: var(--fs-small); letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.35s var(--ease); }
.other-paths a .arr { display: inline-block; transition: transform 0.35s var(--ease); }
.other-paths a:hover, .other-paths a:focus-visible { color: var(--day-ink); }
.other-paths a:hover .arr, .other-paths a:focus-visible .arr { transform: translateX(6px); }
.other-paths a:focus-visible { outline: 1px solid var(--day-dim); outline-offset: 6px; }
.other-paths a:active { transform: translateY(1px); }

/* ============================================================
   Legal pages — reading register, no theatrics
   Same daylight surface, ink, gold and type system as the bright
   end of the homepage; none of the hero's motion machinery.
   ============================================================ */
.legal { padding: calc(88px + 4vh) 0 clamp(72px, 10vh, 120px); }
.legal .wrap { max-width: 820px; }

/* masthead */
.legal-head { margin-bottom: clamp(34px, 5vh, 56px); }
.legal-head .eyebrow { color: var(--day-dim); }
.legal h1 {
  margin-top: 14px;
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 340;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.015em;
  color: var(--day-ink); text-wrap: balance;
}
.legal .updated {
  margin-top: 14px;
  font-family: var(--serif); font-style: italic; font-weight: 380;
  /* --gold-ink is fine for the large display words it was made for, but
     measures 3.32:1 at this size; --gold-cta only reaches 4.46:1. */
  font-size: clamp(15px, 1.6vw, 17px); color: var(--gold-ink-aa);
}
.legal .lede { margin-top: 26px; font-size: 16.5px; }
.legal-head hr { border: 0; border-top: 1px solid var(--day-hairline); margin-top: clamp(30px, 4vh, 46px); }

/* table of contents — built from the headings below, static, no JS */
/* Selectors are doubled up (.legal .legal-toc …) because the generic
   .legal h2 / .legal a rules sit later in this file and would otherwise
   win on equal specificity and turn the contents list into body headings. */
.legal .legal-toc { margin: 0 0 clamp(38px, 6vh, 64px); }
.legal .legal-toc h2 {
  margin: 0 0 10px; font-family: var(--sans); font-weight: 400;
  font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--day-dim);
}
.legal .legal-toc ol {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: clamp(24px, 4vw, 56px);
}
/* entries carry the full heading text, so the contents list can never drift
   out of step with the sections it points at */
.legal .legal-toc li { margin: 0; break-inside: avoid; max-width: none; }
.legal .legal-toc a {
  display: block; padding: 8px 0; max-width: none;
  font-size: 14.5px; line-height: 1.5; color: var(--day-body);
  text-decoration: none;
}
.legal .legal-toc a:hover { color: var(--day-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal .legal-toc a:focus-visible { outline: 2px solid var(--gold-cta); outline-offset: 3px; color: var(--day-ink); }
@media (max-width: 620px) { .legal .legal-toc ol { columns: 1; } }

/* body */
.legal h2 {
  margin-top: clamp(40px, 5.5vh, 60px);
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 360;
  font-size: clamp(21px, 2.3vw, 26px); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--day-ink); scroll-margin-top: 96px;
}
.legal h3 {
  margin-top: 30px; font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--day-dim);
}
.legal p, .legal li {
  margin-top: 14px; font-size: 16px; line-height: 1.7;
  color: var(--day-body); max-width: 70ch;
}
.legal ul { margin-top: 8px; padding-left: 22px; max-width: 70ch; }
.legal li { margin-top: 9px; }
.legal li::marker { color: var(--day-dim); }
.legal strong { font-weight: 500; color: var(--day-ink); }
.legal a { color: var(--day-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover, .legal a:focus-visible { color: var(--gold-cta); }
.legal a:focus-visible { outline: 2px solid var(--gold-cta); outline-offset: 3px; }
/* long addresses and mail links must never push the page sideways */
.legal a[href^="mailto:"] { overflow-wrap: anywhere; }
.legal .rule { border: 0; border-top: 1px solid var(--day-hairline); margin: clamp(38px, 5vh, 56px) 0 0; }
.legal .contact-block { margin-top: 14px; font-size: 16px; line-height: 1.85; color: var(--day-body); }

/* Tabular content scrolls rather than escaping on narrow screens. The two
   `local` gradients mask the edges and the two `scroll` shadows appear only on
   the side that still has content, so the affordance manages itself with no JS.
   The container is focusable because a scrollable region has to be reachable
   by keyboard (WCAG 2.1.1). */
.legal .table-wrap {
  margin-top: 18px; max-width: 100%; overflow-x: auto;
  background:
    linear-gradient(to right, var(--day-mid) 30%, rgba(239, 231, 218, 0)) left center local,
    linear-gradient(to left,  var(--day-mid) 30%, rgba(239, 231, 218, 0)) right center local,
    radial-gradient(farthest-side at 0 50%, rgba(42, 36, 28, 0.16), transparent) left center scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(42, 36, 28, 0.16), transparent) right center scroll;
  background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
}
.legal .table-wrap:focus-visible { outline: 2px solid var(--gold-cta); outline-offset: 4px; }
.legal table { width: 100%; min-width: 30rem; border-collapse: collapse; }
.legal th, .legal td {
  text-align: left; vertical-align: top; padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--day-hairline);
  font-size: 15px; line-height: 1.6; color: var(--day-body);
}
.legal thead th {
  font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--day-dim);
}
.legal tbody th { font-weight: 400; color: var(--day-ink); }

.legal .back {
  display: inline-block; margin-top: clamp(44px, 6vh, 64px);
  padding: 11px 0; font-size: var(--fs-small); letter-spacing: 0.08em;
}

/* ---- print: quiet, black on white, no chrome ---- */
@media print {
  .nav, .skip-link, .bd-env, .bd-cursor, .bd-aura, .legal .back, .legal-toc { display: none !important; }
  body::after { display: none !important; }
  html, body, .subpage-body { background: #fff !important; color: #000 !important; }
  .legal { padding: 0 !important; }
  .legal .wrap { max-width: none; padding: 0; }
  .legal h1, .legal h2, .legal h3, .legal p, .legal li,
  .legal th, .legal td, .legal .updated, .legal .contact-block { color: #000 !important; }
  .legal a { color: #000 !important; text-decoration: underline; }
  .legal h1, .legal h2, .legal h3 { break-after: avoid; page-break-after: avoid; }
  .legal p, .legal li, .legal tr { break-inside: avoid; page-break-inside: avoid; }
  .legal table { min-width: 0; }
  /* the footer carries the entity and copyright line — keep it in print */
  .footer { background: #fff !important; border-top: 1px solid #999; }
  .footer .footer-meta, .footer .footer-meta a { color: #000 !important; }
}

/* ---- responsive ---- */
@media (max-width: 920px) {
  .doors { display: block; }
  .door { display: flex; flex-direction: column; padding: 30px 0; }
  .door + .door { border-left: 0; border-top: 1px solid var(--hairline-lit); }
  .fdn-row { grid-template-columns: 48px 1fr; }
  .fdn-row p { grid-column: 2; }
}
@media (max-width: 720px) {
  .phase { grid-template-columns: 1fr; gap: 10px; }
  .rel-row { grid-template-columns: 1fr; gap: 6px; }
  .phase-rail { flex-direction: column; max-width: none; }
  .phase-rail .pr { padding: 12px 0 12px 20px; }
  .phase-rail .pr::before { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .phase-rail .pr::after { top: 14px; left: -3.5px; }
  .outcome-groups { display: block; }
  .og { padding: 22px 0 8px; }
  .og:first-child { padding-top: 0; }
  .og + .og { border-left: 0; }
  .efig { flex-direction: column; }
  .efig .st { padding: 11px 0 11px 20px; }
  .efig .st::before { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .efig .st::after { top: 13px; left: -3.5px; }
  .efig .st .t { max-width: none; }
  .efig .fan, .efig .st.joined .join, .efig-ret, .efig .st.bound .b2 { display: none; }
  .nav-links a { padding: 13px 6px; margin: -13px -6px; }
  .other-paths a { padding: 13px 6px; margin: -13px -6px; }
}
@media (max-width: 640px) {
  :root { --pad-block: 84px; }
  .nav { padding: 18px var(--pad-x); }
  .nav .bd-lockup { --lk-cap: 10px; }
  .eyebrow { letter-spacing: 0.16em; }
  .hero-anchor { margin-top: 26px; }
  .fdn-row { grid-template-columns: 1fr; gap: 8px; }
  .fdn-row p { grid-column: 1; }
}

/* ---- narrow phones: the lockup and the three nav links have to share
   375px. Left unattended they abut at ~149px and the last link clips the
   viewport edge, so both sides tighten together. ---- */
@media (max-width: 440px) {
  .nav { padding-left: 18px; padding-right: 18px; gap: 12px; }
  .nav .bd-lockup { --lk-cap: 9px; }
  .nav-links { gap: 13px; }
  .nav-links a { font-size: 10px; letter-spacing: 0.1em; padding: 13px 4px; margin: -13px -4px; }
}
@media (max-width: 345px) {
  .nav .bd-lockup { --lk-cap: 8px; }
  .nav-links { gap: 10px; }
  .nav-links a { letter-spacing: 0.06em; }
}

@media (max-width: 640px) {
  .hero h1 { line-height: 1.08; letter-spacing: -0.022em; }
  .hero-sig { font-size: 9px; letter-spacing: 0.24em; }
  .hero-sig .sig-rule { width: clamp(16px, 6vw, 40px); }
  .hero-actions .cta { width: 100%; justify-content: center; padding: 17px 24px; letter-spacing: 0.2em; }
  .hw-field { filter: blur(24px); }
}
/* short viewports: keep the hero from crowding its own foot */
@media (max-height: 700px) and (min-width: 641px) {
  .hero-anchor { margin-top: 20px; }
  .hero-actions { margin-top: 22px; }
}

/* ---- touch / coarse pointer: no fake hover, a readable static highlight ---- */
@media (hover: none), (pointer: coarse) {
  /* the environment stays, at lower intensity — no continuous heavy effects */
  html[data-phase="night-hero"]    { --env-dust: 0.8; --env-vignette: 0.9; }
  html[data-phase="night-content"] { --env-dust: 0.6; --env-vignette: 0.55; }
  html[data-phase="pre-dawn"]      { --env-dust: 0.35; }
  .bd-fields { opacity: calc(var(--env-field) * 0.8); }
  .gold-turn { --spot-opacity: 0.30; --spot-x: 58%; --spot-y: 46%; }
  .doors:has(.door:hover) .door:not(:hover) { opacity: 1; }
  /* 44px tap targets belong to touch devices at every width, not just
     narrow ones — a 768px tablet needs them as much as a 375px phone */
  .nav-links a { padding: 13px 6px; margin: -13px -6px; }
  .other-paths a { padding: 13px 6px; margin: -13px -6px; }
  .crumbs a { padding: 13px 4px; margin: -13px -4px; }
}

/* ============================================================
   INTRO — the first light (homepage opening sequence)
   Mounted by JS only when the head gate sets html.intro-hold.
   Absent entirely for no-JS, reduced motion, and repeat visits.
   ============================================================ */
/* while the intro holds, the hero and nav wait beneath it */
html.intro-hold { overflow: hidden; }
html.intro-hold .hero-sig, html.intro-hold .hero h1 .hl,
html.intro-hold .hero-anchor, html.intro-hold .hero-actions,
html.intro-hold .nav { animation-play-state: paused !important; }

.intro {
  position: fixed; inset: 0; z-index: 200; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 42%, #17130E 0%, #121009 58%, #0D0B08 100%);
}
.intro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.03; background-image: var(--grain);
}
.intro-core { display: flex; flex-direction: column; align-items: center; }

.intro-line {
  height: 1px; width: min(340px, 64vw);
  background: linear-gradient(90deg, transparent, rgba(196, 183, 158, 0.7) 18%, rgba(196, 183, 158, 0.7) 82%, transparent);
  opacity: 0; transform: scaleX(0); transform-origin: center;
}
.intro-line--lower { width: min(270px, 52vw); }

.intro-light {
  width: 5px; height: 5px; border-radius: 50%;
  margin: 22px 0 4px;
  background: #FBF7EF;
  box-shadow:
    0 0 14px 3px rgba(246, 241, 233, 0.30),
    0 0 46px 14px rgba(209, 176, 120, 0.16);
  opacity: 0; transform: scale(0.4); filter: blur(2px);
}

/* The opening word is the wordmark itself, carried on the same alpha-mask +
   currentColor mechanism as the nav and footer. It stays one span per letter:
   each span is a horizontal slice of the single wordmark SVG, cut at the
   midpoint of each inter-letter gap (20.7 units of clearance to the nearest
   ink, so no letterform can be clipped). Because the spans are unchanged in
   number and order, the staggered timeline below is untouched. */
.intro-word {
  --iw-w: clamp(196px, 50vw, 560px);      /* viewport-relative wordmark width */
  --iw-h: calc(var(--iw-w) / 9.7358);     /* tightened viewBox ratio */
  display: flex; margin: 30px 0 24px;
  width: var(--iw-w); height: var(--iw-h);
  color: var(--lit);
  white-space: nowrap;
}
.intro-word span {
  display: block;
  height: 100%;
  width: calc(var(--iw-w) * var(--lw));
  background-color: currentColor;
  -webkit-mask: url(../logo/bovendawn-wordmark.svg) no-repeat;
  mask: url(../logo/bovendawn-wordmark.svg) no-repeat;
  -webkit-mask-size: var(--iw-w) var(--iw-h);
  mask-size: var(--iw-w) var(--iw-h);
  -webkit-mask-position: calc(var(--iw-w) * var(--lx) * -1) 0;
  mask-position: calc(var(--iw-w) * var(--lx) * -1) 0;
  opacity: 0; transform: translateY(4px) scale(0.985); filter: blur(var(--lblur, 5px));
}

.intro-desc {
  font-family: var(--sans);
  font-size: clamp(9px, 1.1vw, 11px); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--body);
  opacity: 0; transform: translateY(5px); filter: blur(3px);
  margin-bottom: 18px;
}

/* ---- skip control: always present, always reachable ---- */
.intro-skip {
  position: absolute; top: clamp(14px, 3vh, 26px); right: clamp(14px, 3vw, 26px);
  min-width: 44px; min-height: 44px; padding: 10px 16px;
  border: 1px solid rgba(246, 241, 233, 0.16); border-radius: 999px;
  background: transparent; color: var(--body);
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.intro-skip:hover { color: var(--lit); border-color: rgba(219, 195, 143, 0.5); }
.intro-skip:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; color: var(--lit); }

/* ---- timeline (added class .play starts everything) ---- */
:root { --lstag: 0.105s; --in-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.intro.play .intro-light {
  animation:
    in-light 0.5s var(--in-ease) 0.25s forwards,
    in-breathe 3.2s ease-in-out 1s infinite;
}
.intro.play .intro-line--upper { animation: in-line 0.6s var(--in-ease) 0.45s forwards; }
.intro.play .intro-word span { animation: in-letter 0.52s var(--in-ease) calc(0.72s + var(--i) * var(--lstag)) forwards; }
.intro.play .intro-desc { animation: in-desc 0.5s var(--in-ease) 1.82s forwards; }
.intro.play .intro-line--lower { animation: in-line 0.55s var(--in-ease) 1.88s forwards; }

@keyframes in-light { to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes in-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.88; } }
@keyframes in-line { to { opacity: 0.55; transform: scaleX(1); } }
@keyframes in-letter { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes in-desc { to { opacity: 0.6; transform: none; filter: blur(0); } }

/* ---- exit: crossfade into the hero (.leave) ---- */
.intro.leave { pointer-events: none; animation: out-veil 0.8s ease 0.1s forwards; }
.intro.leave .intro-word span {
  animation: out-letter 0.3s ease calc(var(--i) * 0.04s) forwards;
}
.intro.leave .intro-light,
.intro.leave .intro-line,
.intro.leave .intro-desc { animation: out-soft 0.4s ease forwards; }
@keyframes out-veil { to { opacity: 0; } }
@keyframes out-letter { to { opacity: 0; transform: translateY(-5px); filter: blur(5px); } }
@keyframes out-soft { to { opacity: 0; } }

/* ---- compressed hero handoff (html.intro-comp, persists for the load) ----
   The hero begins the moment the intro releases, so its statement is
   emerging while the opening wordmark is still leaving. */
/* On intro visits the headline is the LCP element and cannot paint until the
   overlay releases, so its delay here is kept as short as the crossfade allows
   — every 100ms of delay is 100ms straight onto LCP for a first-time visitor. */
html.intro-comp .hero-sig { animation-delay: 0.02s; animation-duration: 0.55s; }
html.intro-comp .hero h1 .hl-1 { animation-delay: 0.06s; animation-duration: 0.8s; }
html.intro-comp .hero h1 .hl-2 { animation-delay: 0.24s; animation-duration: 0.85s; }
html.intro-comp .hero-anchor { animation-delay: 0.7s; animation-duration: 0.75s; }
html.intro-comp .hero-actions { animation-delay: 0.98s; animation-duration: 0.7s; }
html.intro-comp .nav { opacity: 0; animation: nav-settle 0.6s ease 0.85s forwards; }
@keyframes nav-settle { to { opacity: 1; } }

@media (max-width: 720px) {
  :root { --lstag: 0.09s; }
  .intro-word span { --lblur: 3px; }
  .intro.play .intro-desc { animation-delay: 1.62s; }
  .intro.play .intro-line--lower { animation-delay: 1.68s; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  html.intro-hold { overflow: visible; }
  html.intro-hold .hero-sig, html.intro-hold .hero h1 .hl,
  html.intro-hold .hero-anchor, html.intro-hold .hero-actions,
  html.intro-hold .nav { animation-play-state: running !important; }
  html.intro-comp .nav { opacity: 1; }
}

/* ---- reduced motion: everything visible, static ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .ill { opacity: 1; transform: none; filter: none; }
  .hero h1 .hl { opacity: 1; filter: none; transform: none; }
  .hero-sig, .hero-anchor, .hero-actions { opacity: 1; filter: none; transform: none; }
  /* the word stays plainly gold; no pointer light, no shimmer */
  .gold-turn { --spot-opacity: 0; }
  .gold-turn__gold { animation: none; background-position: 0 center; }
  .hero-world { transform: none; }
  .belief-panel::after { display: none; }
  /* the night-to-day colour progression stays; only the motion goes. The
     canvas is never started under reduced motion, so it has nothing to draw. */
  .bd-dust { display: none; }
  .bd-env, .bd-fields, .bd-vignette { transition: none; }
  .sys-line .gold-word { color: var(--gold); }
  .rail-fill { height: 100%; }
}