/* Ad Astra — the site stylesheet. Generated by build.mjs; edit src/css/*.css and the DS tokens, not this file. */

/* The two faces, self-hosted (SPEC §1: load from the DS tokens/fonts.css, font-display swap, preload the two woff2).
   tokens/fonts.css is a Google Fonts @import of exactly these two families and axes; the same files are served
   from /assets/fonts so they can be preloaded and never go through a third party. Latin + Latin Extended subsets.
   STAND-IN faces (SIL OFL) — the licensed multi-script replacements are an open decision (AA-403). */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../assets/fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../assets/fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ══ DS tokens/colors.css ══ */

/* Ad Astra color tokens · ratified (Token Sheet v2, 31 Jul; contract: brand/tokens.json in the Ad Astra project).
   LAWS: white = Astra + ceremonies only, never fills · gold never a button, never warns · gold TEXT night-only, always with halo ·
   state colors belong to knowledge objects only · hue never the sole identifier.
   NOT-YET-RATIFIED (bench named, do not invent): functional error/success/destructive CHROME (re-derivation bench) · ember v2 (AA-348).
   RULED AND QUOTABLE, do not confuse with that bench: the VERDICT pair below (--verdict-*), ROOM GRAMMAR §16.5 + §16.13. */
:root {
  /* primitives — night */
  --night-field: #0b0e19;
  --night-crown: #101528;
  --night-sheet: #121727;
  --night-ink: #ece7db;
  --night-ink-muted: #8f92a8; /* 5.8:1 on night field */
  --night-hairline: rgba(255,253,246,.05);
  --night-ledger-rule: #2b2752;
  /* primitives — day family */
  --day-field: #f7f8f9;
  --dawn-field: #faf8f7;
  --dusk-field: #f1eef0;
  --day-sheet: #fffdfd;
  --day-ink: #1d2129;
  --day-ink-muted: #5c6570; /* 5.6:1 on day field */
  --day-hairline: #e8eaec;
  /* the glow band (64px, top of field; night uses star points instead) */
  --glow-dawn: rgba(226,168,138,.24);
  --glow-day: rgba(176,205,228,.18);
  --glow-dusk: rgba(90,84,110,.16);
  /* gold — the light currency */
  --gold-lamp: #e6a852;        /* night gold · 8.6:1 on night field */
  --gold-lamp-bright: #f2c078;
  --gold-glyph-day: #b8860b;   /* 3.1:1 — graphic floor only, never body text */
  --gold-halo: rgba(230,168,82,.32);
  /* the spectrum — the alive wear bands; sigil + name always accompany */
  --spectral-1: #7ec8e3; --spectral-2: #8bd3a4; --spectral-3: #ffd479; --spectral-4: #c96f7e; --spectral-5: #b39ddb;
  /* knowledge states */
  --state-dark: #171433;
  --state-chalk: #8f88b8;
  --state-ember: #a85618; /* v0 — re-derive (AA-348) */
  --state-white: #fffdf6; /* THE WHITE-RARITY LAW */
  /* ── THE VERDICT · ruled in ROOM GRAMMAR §16.5 + §16.13, read out of `deck-loop-v2.jsx` ──
     A verdict is what an ANSWERED card wears — any card that can be committed or uncommitted, on ANY
     surface: a Deck letter, a Book offer, a mind's comment, a thread card. One recipe everywhere.
     THIS IS NOT THE OPEN FUNCTIONAL-COLOUR BENCH. That bench owns error / success / destructive CHROME
     and is still unratified; these ten values are RULED and quotable. "Absent from the DS" never meant
     "not ruled" — it meant open the grammar. A chat that read the bench as a ban invented a green (28 Aug).
     LAWS: the rim LANDS AND STAYS — a commitment is a persistent mark, never a flash · the plate lives
     UNDER the card in its exact rect and radius · nothing is ever crossed out: an uncommit simply LOSES
     its frank (§16.4) · green and red here are an ANSWER, never a status and never a warning. */
  --verdict-commit: rgba(47,107,74,.92);         /* the plate the card slides off, opacity |x|/16 */
  --verdict-commit-rim: rgba(47,107,74,.78);     /* 1.5px · lands +0.4→+0.78 of the flick · STAYS */
  --verdict-commit-glow: rgba(139,211,164,.5);   /* 0 0 18px -6px */
  --verdict-commit-ink: rgba(240,250,243,.95);   /* "Committed" · 11.5 caps .18em · start-aligned */
  --verdict-commit-frank: rgb(47,107,74);        /* the stamp's words, and a franked meta row */
  --verdict-commit-frank-fill: rgba(139,211,164,.16);
  --verdict-commit-frank-rim: rgba(47,107,74,.34);
  --verdict-uncommit: rgba(166,61,49,.9);
  --verdict-uncommit-rim: rgba(166,61,49,.7);    /* the letter inside dims to .62 (§16.5) */
  --verdict-uncommit-ink: rgba(255,244,241,.95); /* "Uncommitted" · end-aligned */

  /* THE FOUR — the mark's spheres of knowledge, RULED 2 Sep (Arthur), palette E of
     canvases/Canvas - The Mark, Traced 4.dc.html turns 2–4. Clockwise from north: maths · universe ·
     life · humanity. Their four-way crossing is the light of knowledge and is white by construction;
     nothing is ever drawn at the centre. TWO BODIES OF THE SAME FOUR, never mixed:
     LIGHT — additive (`plus-lighter`) on the 37-stop profile, for the living mark, the app cut, the
     loading and creation loops, and the source of EVERY MIND'S SKY (ROOM GRAMMAR §2: primary 60 /
     secondary 40, lifted 22 % toward candle white — recompute the five skies of record from these).
     FLAT — on white paper, for the app icon and print; every crossing is the SCREEN of its lights.
     Superseded and not to be quoted: 39a's madder/slate/moss/ember (#b04455 #5b727d #7d8339 #d25614)
     and the 5–7 Aug three-disc triad (rgb 166,89,25 / 11,117,160 / 196,54,54). */
  --mark-n-light: #b04833;   /* maths    · vermilion */
  --mark-e-light: #59737a;   /* universe · teal */
  --mark-s-light: #74863f;   /* life     · chartreuse */
  --mark-w-light: #be6b00;   /* humanity · saffron */
  --mark-n-flat: #ee5a3c;
  --mark-e-flat: #3f9fb5;
  --mark-s-flat: #a9c832;
  --mark-w-flat: #f3a83a;

  /* semantic — hour-scoped aliases; day is the base scope */
  --field: var(--day-field);
  --field-bg: var(--day-field);
  --glow: var(--glow-day);
  --sheet: var(--day-sheet);
  --ink: var(--day-ink);
  --ink-muted: var(--day-ink-muted);
  --hairline: var(--day-hairline);
  --gold: var(--gold-glyph-day);
  --focus-ring: var(--day-ink);
}
[data-hour="dawn"] { --field: var(--dawn-field); --field-bg: var(--dawn-field); --glow: var(--glow-dawn); }
[data-hour="dusk"] { --field: var(--dusk-field); --field-bg: var(--dusk-field); --glow: var(--glow-dusk); }
[data-hour="night"] {
  --field: var(--night-field);
  --field-bg: radial-gradient(130% 90% at 50% 0%, var(--night-crown) 0%, var(--night-field) 60%);
  --glow: transparent;
  --sheet: var(--night-sheet);
  --ink: var(--night-ink);
  --ink-muted: var(--night-ink-muted);
  --hairline: var(--night-hairline);
  --gold: var(--gold-lamp);
  --focus-ring: var(--state-white);
}
/* DEAD (never reintroduce): #171433/#1e1b4b as shells · #f2a54a on light · gold text by day · cream cardstock · italics. */


/* ══ DS tokens/typography.css ══ */

/* Ad Astra type tokens · structure ratified; faces are stand-ins (licensing open, multi-script = hard requirement).
   LAWS: inscription = caps only, hierarchy by tracking tier, zero weight games · reading = ALWAYS upright, italics banned everywhere ·
   matter carries tnum on every numeric line · body floor 13px · display caps hold at 1.3× under dynamic type.
   THE VOICE LAW (Arthur, 25 Aug; ROOM GRAMMAR §3 holds it): a MIND speaks in the reading serif — and Astra is a mind.
   A REAL PERSON, a SOURCE, YOU, and ALL CHROME speak in the grotesk. A description of an experience is chrome even when a mind sent it.
   That is how you tell, at a glance, whether the words were written by someone who exists. Setting a person's words in the serif is a defect.
   AMENDMENT THREE · 26 Aug 2026: the pair is Hanken Grotesk + Newsreader. This REVERSES amendment one-b (11 Aug), which retired Hanken
   for reading dated at semibold titles — the 25 Aug ruling closed the divergence between the loops and the thread work, and it is later law.
   Instrument Sans and Libre Caslon Text are RETIRED: neither may appear on any surface or in any canvas.
   THE RAMP, nine steps, ruled 28 Aug (ROOM GRAMMAR §18 type.ramp) by reading seven rigs against law already on the books —
   34 display · 26 plate/cover title · 20.5 a mind's spoken line · 17 body · 15 a plate credit · 14 a pill · 13 the body floor · 12 a label · 11 a tracked caps name.
   No value here is new; each was already ruled in §3, §16.3, §15.1 or §2. The rigs held 23 distinct sizes for 142 uses.
   THE 13 FLOOR IS A BODY FLOOR: tracked caps go to 11. Practice everywhere, written nowhere until now.
   THE SWEEP RAN 28 Aug: 55 of the 56 off-ramp uses in the seven rigs moved to their nearest step, and
   the check is HARD (ROOM GRAMMAR §18; one exemption — a font character used as a MARK in a control).
   STILL OPEN: the ramp's exact metrics re-derive on the licensed faces (multi-script) — the STEPS are ruled, the faces are still stand-ins. */
:root {
  --font-inscription: "Hanken Grotesk", sans-serif;
  --font-reading: "Newsreader", serif;
  --font-matter: "Hanken Grotesk", sans-serif;
  --track-kicker: .22em;   /* tiers tuned for a grotesk — a grotesk needs less air than a decorative cap */
  --track-display: .06em;
  --track-meta: .16em;     /* the voice row's name: 11px caps at .16em (ROOM GRAMMAR §2) */
  --text-floor: 13px;
  --text-display: 34px;
  --text-voice: 20.5px;    /* AMENDMENT THREE: a spoken line in a room is 20.5, not 21 (§3) */
  --text-body: 17px;
  --text-label: 12px;
  /* THE PAGE, ROOM GRAMMAR §19.1 — the ramp two steps taller, for the marketing site ONLY.
     58 and 44 are the ramp's own top ratio (34/26 = 1.31) applied twice, not new values: the page
     already stood at 44 and 59, and §19 corrects the 59. 11 NEVER appears on a page — it is the
     tracked-caps step of a MIND'S NAME (§2) and no mind stands on a marketing page; the page floor
     is 12. The page SLUG (§19.4) is --text-label at --track-kicker; it gets no token of its own,
     because a token that restates two others is how a ramp becomes 23 sizes again. */
  --text-page-hero: 58px;
  --text-page-open: 44px;
}
.tnum, [data-tnum] { font-feature-settings: "tnum"; }


/* ══ DS tokens/spacing.css ══ */

/* Ad Astra spacing + size tokens · ratified by practice (proofs bench) + turn-28 spec layer.
   Jobs: inside controls s2–s3 · card padding s3–s4 · between cards s3 · screen gutter s4 · between sections s5–s6 · display air s7.
   LAW: spacing only from the scale; ±2px optical exceptions only against tracked caps.
   AMENDMENT THREE · 26 Aug 2026 — ONE RADIUS FAMILY, re-derived from the thread card and ruled in ROOM GRAMMAR §1:
   device 42 · a sheet or a standalone artefact 30 · a plate INSIDE a sheet 22 · a pill on an action baseline 16 · a token 999 · a stamp 4.
   The reference ratio is 5.6% of the card's width (r18 on a 320 card), which is why a 408-wide plate wants 22 and not 16.
   SUPERSEDED, do not quote: card 14 then 24 · sheet 28 · pane 28 · button 999 · device 24. Move a sheet and its plate together, never one alone. */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --size-pill: 52px;    /* the one held (S2) object per screen */
  --size-button: 52px;
  --size-chip: 44px;
  --size-tab: 56px;
  --hit-min: 48px;
  --radius-device: 42px;
  --radius-sheet: 30px;
  --radius-card: 30px;
  --radius-plate: 22px;
  --radius-pane: 30px;
  --radius-button: 16px;
  --radius-chip: 999px;
  --radius-stamp: 4px;
  --pane-pad: 28px;
}


/* ══ DS tokens/elevation.css ══ */

/* Ad Astra elevation · ratified (turn 20b).
   LAW: day builds depth with two-layer soft shadow; night builds depth with LIGHT (lamplit top edge + darkness below) — nothing at night casts gray.
   One held object per screen; held rises 2px; press settles at scale(.98). */
:root {
  --shadow-s1: 0 1px 2px rgba(29,33,41,.06), 0 4px 12px rgba(29,33,41,.06);
  --shadow-s2: 0 2px 4px rgba(29,33,41,.08), 0 12px 28px rgba(29,33,41,.12);
  --night-edge: inset 0 1px 0 rgba(255,253,246,.06); /* @kind shadow */
  --night-edge-held: inset 0 1px 0 rgba(255,253,246,.09); /* @kind shadow */
  --night-drop-held: 0 10px 28px rgba(0,0,0,.5);
}


/* ══ DS tokens/motion.css ══ */

/* Ad Astra motion · ratified (turns 20/22/25).
   THE THREE SIGNATURES (the whole brand motion vocabulary): the breath (alive) · the ignition (earned) · the hour turn (present).
   All other motion = ordinary interface motion on these springs; it carries no brand meaning.
   RATIONS: ≤2 enchantments + the breath per screen · 1 lamp per surface · 1 display moment.
   LAWS: returns always faster than opens · every ceremony leaves a persistent mark · reduced-motion = stillness, hour swaps at boundaries. */
:root {
  --dur-press: 120ms; /* @kind other */
  --dur-container: 350ms; /* @kind other */
  --dur-risers: 420ms; /* @kind other */
  --dur-stagger: 80ms; /* @kind other */
  --ease-container: cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-risers: cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --dur-breath: 6s; /* @kind other */ /* grows ≤2%, never pauses */
  --dur-ignite-climb: .5s; /* @kind other */ /* silent */
  --dur-ignite-bloom: .4s; /* @kind other */ /* one chime + success haptic */
  --dur-ignite-settle: .7s; /* @kind other */
}
/* ── THE GESTURE INDEX (added 28 Aug) ───────────────────────────────────────────────────────
   THE DS DOES NOT OWN BEHAVIOUR. The three signatures above are the whole BRAND motion vocabulary;
   every gesture below is ruled in `ROOM GRAMMAR.md` in the Ad Astra project. The tokens that follow
   are machine-readable QUOTATIONS of that file, carried here for one reason: so a consumer holding
   only the DS is ROUTED instead of stranded. Where a value here and the grammar differ, THE GRAMMAR
   WINS and this file is patched the same sitting. A gesture NOT in this index is not yet ruled —
   open the grammar; never invent one.

     the answer flick — commit / uncommit a card, EVERY surface ......... §16.13
     the letter list — one flick, one letter ........................... §16.1
     when the answer fires inside a beat .............................. §16.12
     the deck, the tuck, the z ladder, the opacity law .................. §5
     the travel column — one driver, one wrapper, the stage dip ......... §6
     the learner's flick between artefacts ............................ §6b
     how a mind's words arrive — spoken in vs. appear ................... §3
     the speaking ring, the halo lift, the transit dim ................. §2
     the press ghost, trails, the pinch, the drag ..................... §9b
     the camera — opens, closes, zooms ................................. §7
     the collect ceremony and the release .............................. §9
     the loop seam .................................................... §10
     the web cut and its stage sizes .................................. §17
   ──────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* §16.13 · THE ANSWER FLICK — one recipe on every surface. Never a scale, never an overshoot. */
  --flick-travel: 118px;         /* +118 on a commit · −118 on an uncommit */
  --dur-flick-out: .44s;         /* easeOut */
  --dur-flick-hold: .04s;
  --dur-flick-back: .32s;        /* easeInOut — the return is faster, as always */
  --flick-tilt-per-px: .012deg;  /* about 50% 120% */
  --flick-verdict-in: .4s;       /* the rim lands +0.4→+0.78 of the gesture, then STAYS */
  /* §3 · how a mind's words arrive */
  --dur-word: .5s;               /* easeOutCubic, from blur(5px), 5px below its seat, 12px glow at .9 */
  --dur-word-step: .10s;         /* word to word, in a ROOM only */
  --dur-appear: .42s;            /* everywhere else: the whole line as one block, blur(4px), 4px */
  /* §2 / §6 · what a moving group does to everything around it */
  --transit-dim: .6;             /* rowO = 1 − 0.6 × transit */
  --stage-dip: .035;             /* 3.5% at peak travel velocity, then returns */
  --ring-orbit: 17px;            /* the 14-dot speaking ring; speed T×0.7 */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ══ the page ══ */

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   THE PAGE — Home v5 (4 Sep, 5 Sep patches) and the two research pages, rebuilt 1:1.
   Part 1 is the DC's helmet <style>, quoted; part 2 is every declaration that lived as an inline
   style on the DC's markup, moved onto a class (SPEC §1: one stylesheet). Values are the file's.
   Where an inline style was BEATEN by a rule below it in the DC (inline wins over a plain rule), the
   rendered result is kept and the dead declaration is noted, never applied.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

/* ══ 1 · the helmet <style>, verbatim ══ */
body { margin:0; background:#0b0e19; overflow-x:clip; }   /* addendum 2 (7 Sep): the guard against any sideways widening · addendum 9 (11 Sep): the gap between pages is night, never white */
/* ADDENDUM 9 (11 Sep): cross-document view transitions — the header is one object across the site and holds while the
   page beneath crossfades in §3's .42s. Same-origin only; Safari 18.2+ / Chrome 126+; older browsers load as before. */
@view-transition { navigation: auto; }
.v5-glass { view-transition-name: v5-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; animation-timing-function: ease; }
::view-transition-old(v5-header), ::view-transition-new(v5-header) { animation-duration: .42s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
a { color:var(--day-ink); text-decoration:none; }
a:hover { color:#4a4438; }
[data-hour="night"] a { color:var(--night-ink-muted); }
[data-hour="night"] a:hover { color:var(--night-ink); }
.v5-thread { fill:none; stroke:url(#v5thread); stroke-width:1.1; stroke-dasharray:3 9; animation:v5drift 22s linear infinite; }
.v5-thread-under { fill:none; stroke:rgba(230,168,82,.16); stroke-width:1; }
.v5-breath { animation:v5breath 6s ease-in-out infinite; }
@keyframes v5drift { to { stroke-dashoffset:-240; } }
@keyframes v5breath { 0%, 100% { opacity:1; } 50% { opacity:.86; } }
.v5-tw { animation:v5tw 6s ease-in-out infinite; }
.v5-tw2 { animation:v5tw 6s ease-in-out infinite; animation-delay:-2.3s; }
.v5-tw3 { animation:v5tw 6s ease-in-out infinite; animation-delay:-3.7s; }
@keyframes v5tw { 0%, 100% { opacity:1; } 38% { opacity:.62; } 55% { opacity:.9; } 74% { opacity:.7; } }
.v5-lbl { animation:v5lbl 6s ease-in-out infinite; }
.v5-day { position:relative; }
.v5-day::before { content:''; position:absolute; inset:-140px; mask-image:linear-gradient(180deg, transparent 140px, black 360px, black calc(100% - 360px), transparent calc(100% - 140px)); -webkit-mask-image:linear-gradient(180deg, transparent 140px, black 360px, black calc(100% - 360px), transparent calc(100% - 140px)); pointer-events:none; background:radial-gradient(88% 64% at 6% 112%, rgba(255,212,152,.5) 0%, rgba(255,212,152,0) 70%), radial-gradient(78% 58% at 94% -12%, rgba(178,202,232,.36) 0%, rgba(178,202,232,0) 72%); animation:v5daydrift 52s ease-in-out infinite alternate; }
.v5-dawn::before { background:radial-gradient(110% 72% at 50% 116%, rgba(255,168,88,.38) 0%, rgba(255,168,88,0) 70%), radial-gradient(72% 52% at 10% -8%, rgba(198,170,214,.2) 0%, rgba(198,170,214,0) 72%); }
.v5-morn::before { background:radial-gradient(96% 58% at 50% -18%, rgba(255,190,120,.26) 0%, rgba(255,190,120,0) 70%), radial-gradient(80% 58% at 92% 108%, rgba(178,202,232,.2) 0%, rgba(178,202,232,0) 72%); }
.v5-dusk::before { background:radial-gradient(110% 70% at 50% 116%, rgba(255,168,88,.3) 0%, rgba(255,168,88,0) 72%), radial-gradient(78% 54% at 90% -10%, rgba(150,158,198,.16) 0%, rgba(150,158,198,0) 74%); }
.v5-day > * { position:relative; }
@keyframes v5daydrift { 0% { transform:translate3d(-36px,-24px,0) scale(1); } 100% { transform:translate3d(36px,30px,0) scale(1.07); } }
.v5-morestar { opacity:.8; transform:scale(1); transition:opacity .9s ease, transform .9s ease; }
#v5b5:hover .v5-morestar { opacity:1; transform:scale(1.18); }
#v5b5.v5-pl-on .v5-morestar { opacity:1; transform:scale(1.18); } /* while the path paints, Astra holds her brightest – hover adds nothing but the rim */
.v5-sp-halo { animation:v5spHalo 5.2s ease-in-out infinite; }
.v5-sp-v { animation:v5spRay 4.1s ease-in-out infinite; }
.v5-sp-h { animation:v5spRay 5.3s ease-in-out infinite -1.7s; }
.v5-sp-d1 { animation:v5spRay 6.7s ease-in-out infinite -3.2s; }
.v5-sp-d2 { animation:v5spRay 7.7s ease-in-out infinite -5.1s; }
.v5-sp-core { animation:v5spCore 3.4s ease-in-out infinite; }
@keyframes v5spRay { 0%, 100% { transform:scaleY(1); opacity:.92; } 32% { transform:scaleY(.78); opacity:.6; } 58% { transform:scaleY(1.14); opacity:1; } 81% { transform:scaleY(.9); opacity:.78; } }
@keyframes v5spCore { 0%, 100% { opacity:.78; transform:scale(.9); } 44% { opacity:1; transform:scale(1.16); } 72% { opacity:.62; transform:scale(.84); } }
@keyframes v5spHalo { 0%, 100% { opacity:.68; transform:scale(1); } 50% { opacity:1; transform:scale(1.12); } }
/* the mirror's lights: three drifts on 9.5 / 12.5 / 15.5s and one slow turn of sheen – never in phase */
.v5-mr-a { animation:v5mrA 9.5s ease-in-out infinite; }
.v5-mr-b { animation:v5mrB 12.5s ease-in-out infinite -4s; }
.v5-mr-c { animation:v5mrC 15.5s ease-in-out infinite -9s; }
.v5-mr-s { animation:v5mrS 26s linear infinite; }
@keyframes v5mrA { 0%, 100% { transform:translate(0, 0) scale(1); opacity:.9; } 33% { transform:translate(14%, 10%) scale(1.12); opacity:1; } 66% { transform:translate(-10%, 16%) scale(.92); opacity:.7; } }
@keyframes v5mrB { 0%, 100% { transform:translate(0, 0) scale(1); opacity:.8; } 40% { transform:translate(-22%, -14%) scale(1.18); opacity:1; } 72% { transform:translate(8%, -26%) scale(.9); opacity:.6; } }
@keyframes v5mrC { 0%, 100% { transform:translate(0, 0) scale(1); opacity:.7; } 30% { transform:translate(24%, -18%) scale(1.1); opacity:.95; } 64% { transform:translate(30%, 12%) scale(.86); opacity:.55; } }
@keyframes v5mrS { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .v5-mr-a, .v5-mr-b, .v5-mr-c, .v5-mr-s { animation:none; } }
.v5-alive { animation:v5alive 6s ease-in-out infinite; }
@keyframes v5alive { 0%, 100% { opacity:.03; } 50% { opacity:.2; } }
.v5-flow { stroke-width:1.4; filter:blur(.7px); animation:v5flow 6s ease-in-out infinite; }
.v5-hit { cursor:pointer; fill:none; stroke:#000; stroke-opacity:0; stroke-width:30; pointer-events:stroke; }
text.v5-name { cursor:pointer; pointer-events:all; }   /* 10 Sep, 3 → addendum 4: the names breathe again (.v5-lbl) now that the halo is paint, not a filter */
.v5-boost { opacity:0; transition:opacity 1.15s ease; pointer-events:none; }
.v5-boost.on { opacity:1; }
.v5word { display:inline-block; opacity:0; animation:v5word .5s cubic-bezier(.215,.61,.355,1) forwards; }
@keyframes v5word { 0% { opacity:0; filter:blur(5px); transform:translateY(5px); text-shadow:0 0 12px rgba(240,198,124,.9); } 100% { opacity:1; filter:blur(0); transform:translateY(0); text-shadow:0 0 12px rgba(240,198,124,0); } }
/* 6 Sep night, 9: on WebKit the word arrives without the filter — bloom and glow only (grammar exception, to be recorded) */
@keyframes v5wordWk { 0% { opacity:0; transform:translateY(5px); text-shadow:0 0 12px rgba(240,198,124,.9); } 100% { opacity:1; transform:translateY(0); text-shadow:0 0 12px rgba(240,198,124,0); } }
html.v5-wk .v5word { animation-name:v5wordWk; }
.v5beat { transition:opacity .8s ease; }
.v5name { animation:v5appear .42s ease-out both; }
@keyframes v5appear { 0% { opacity:0; filter:blur(4px); transform:translateY(4px); } 100% { opacity:1; filter:blur(0); transform:none; } }
.v5halo { transition:opacity .9s ease; }
@keyframes v5orbit { to { transform:rotate(360deg); } }
.v5dots { animation:v5orbit 14s linear infinite; transition:opacity .6s ease; }
.v5-talk { animation:v5orbit 14s linear infinite; transition:opacity .6s ease; }
/* coming forward is a FADE (2 Sep): the speaker takes the top at once but wears a mask that hides the
   crescent where its neighbour overlapped it; the mask's inner alpha then eases 0 → 1, so the crescent
   fades in over the neighbour instead of snapping. Stepping back runs it in reverse. */
.v5-brim-mask { --v5ma:0; -webkit-mask-mode:alpha; mask-mode:alpha; }
/* the RIGHT crescent (where the next face laps this one) */
.v5-brim-mask.v5-bm-r {
  -webkit-mask-image:radial-gradient(circle at calc(var(--pg-av) + var(--pg-lap) + var(--pg-av) / 2) calc(var(--pg-av) / 2), rgba(0,0,0,var(--v5ma)) calc(var(--pg-av) / 2 - 1px), #000 calc(var(--pg-av) / 2));
  mask-image:radial-gradient(circle at calc(var(--pg-av) + var(--pg-lap) + var(--pg-av) / 2) calc(var(--pg-av) / 2), rgba(0,0,0,var(--v5ma)) calc(var(--pg-av) / 2 - 1px), #000 calc(var(--pg-av) / 2)); }
/* the LEFT crescent (where this face laps the previous one) */
.v5-brim-mask.v5-bm-l {
  -webkit-mask-image:radial-gradient(circle at calc(var(--pg-av) / 2 - var(--pg-av) - var(--pg-lap)) calc(var(--pg-av) / 2), rgba(0,0,0,var(--v5ma)) calc(var(--pg-av) / 2 - 1px), #000 calc(var(--pg-av) / 2));
  mask-image:radial-gradient(circle at calc(var(--pg-av) / 2 - var(--pg-av) - var(--pg-lap)) calc(var(--pg-av) / 2), rgba(0,0,0,var(--v5ma)) calc(var(--pg-av) / 2 - 1px), #000 calc(var(--pg-av) / 2)); }
/* BOTH crescents – two cut-outs intersected */
.v5-brim-mask.v5-bm-lr {
  -webkit-mask-image:radial-gradient(circle at calc(var(--pg-av) + var(--pg-lap) + var(--pg-av) / 2) calc(var(--pg-av) / 2), rgba(0,0,0,var(--v5ma)) calc(var(--pg-av) / 2 - 1px), #000 calc(var(--pg-av) / 2)), radial-gradient(circle at calc(var(--pg-av) / 2 - var(--pg-av) - var(--pg-lap)) calc(var(--pg-av) / 2), rgba(0,0,0,var(--v5ma)) calc(var(--pg-av) / 2 - 1px), #000 calc(var(--pg-av) / 2));
  mask-image:radial-gradient(circle at calc(var(--pg-av) + var(--pg-lap) + var(--pg-av) / 2) calc(var(--pg-av) / 2), rgba(0,0,0,var(--v5ma)) calc(var(--pg-av) / 2 - 1px), #000 calc(var(--pg-av) / 2)), radial-gradient(circle at calc(var(--pg-av) / 2 - var(--pg-av) - var(--pg-lap)) calc(var(--pg-av) / 2), rgba(0,0,0,var(--v5ma)) calc(var(--pg-av) / 2 - 1px), #000 calc(var(--pg-av) / 2));
  -webkit-mask-composite:source-in; mask-composite:intersect; }
.v5-byline { display:block; margin-top:14px; font-family:'Hanken Grotesk',sans-serif; font-size:12px; letter-spacing:var(--track-meta); text-transform:uppercase; color:rgba(236,231,219,.72); }
@media (prefers-reduced-motion: reduce) { .v5word, .v5name { animation:none; opacity:1; } .v5dots, .v5-talk { animation:none; } }
.v5-node { animation:v5node 6s ease-in-out infinite; }
@keyframes v5node { 0%, 52% { opacity:.3; } 66% { opacity:1; } 84%, 100% { opacity:.3; } }
@keyframes v5flow { 0%, 100% { opacity:0; } 50% { opacity:.5; } }
@keyframes v5lbl { 0%, 100% { opacity:.5; } 50% { opacity:.95; } }
/* the header glass: a matte pane held to another planet's sky – the mark's triad (amber A,
   red C, blue B) plus the lamp, as huge soft stars drifting left↔right and breathing.
   THE BASE IS ALONE ON THE ELEMENT and the washes live on ::before, MASKED OFF before the
   bottom edge – composited over the base they were landing the header's last rows on ~#241b1e
   against the film's #040c1f, a hard warm step that varied along the seam. The last ~9px are now
   the base gradient only, which ends exactly on the film's measured hex. */
.v5-glass { background: transparent; }
@media (max-width:700px) { .v5-glass { padding-top:8px !important; padding-bottom:8px !important; } }
#v5hdnight { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, #060e22 0%, #040c1f 100%); transition:opacity .9s ease; }
.v5-hd-lit #v5hdnight { opacity:0; }
/* the lit pane: the header's day answer — warm glass over the page, hairline underneath */
#v5hdpane { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .9s ease; background:linear-gradient(180deg, rgba(238,205,168,.82) 0%, rgba(246,224,194,.6) 100%); box-shadow:inset 0 -1px 0 rgba(120,80,40,.14); }
.v5-hd-lit #v5hdpane { opacity:1; }
.v5-hd-ink, a.v5-hd-lnk { transition:color .9s ease; }
.v5-hd-lit .v5-hd-ink { color:#241f16 !important; }
.v5-hd-lit a.v5-hd-lnk { color:rgba(36,31,22,.62) !important; }
.v5-hd-pill { transition:background-color .9s ease, color .9s ease; }
.v5-glass.v5-res-open #v5hdPanel { opacity:1 !important; pointer-events:auto !important; transform:translateY(0) !important; }
.v5-glass.v5-res-open #v5hdPanel .v5-hd-item { opacity:1 !important; transform:translateY(0) !important; }
.v5-glass.v5-res-open #v5hdScrim { opacity:1 !important; }
.v5-glass.v5-res-open .v5-hd-chev { transform:rotate(180deg); }
.v5-glass.v5-res-open #v5hdblur { backdrop-filter:blur(34px) saturate(1.3); -webkit-backdrop-filter:blur(34px) saturate(1.3); }
.v5-hd-res a:focus { outline:none; }
.v5-hd-res::after { content:''; position:absolute; left:-24px; right:-24px; top:100%; height:16px; }
.v5-hd-lit #v5hdPanel, .v5-hd-lit #v5hdSheet { background:linear-gradient(180deg, rgba(250,240,224,.985) 0%, rgba(244,228,206,.975) 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(36,31,22,.08), 0 34px 70px -30px rgba(60,40,20,.45), 0 8px 24px -12px rgba(60,40,20,.25) !important; }
.v5-hd-lit .v5-hd-pane-k { color:rgba(36,31,22,.5) !important; border-color:rgba(36,31,22,.1) !important; }
.v5-hd-lit .v5-hd-item:hover { background:rgba(36,31,22,.06) !important; }
.v5-hd-lit #v5hdScrim { background:rgba(60,44,24,.22) !important; }
.v5-hd-lit .v5-hd-thumb { background:linear-gradient(160deg, rgba(36,31,22,.14), rgba(36,31,22,.05)) !important; box-shadow:inset 0 0 0 1px rgba(36,31,22,.1) !important; }
.v5-hd-lit .v5-hd-pane-t { color:#241f16 !important; }
.v5-hd-lit .v5-hd-pane-b, .v5-hd-lit #v5hdSheet p { color:rgba(36,31,22,.62) !important; }
.v5-hd-lit .v5-hd-burger { background:rgba(36,31,22,.08) !important; color:#241f16 !important; box-shadow:inset 0 0 0 1px rgba(36,31,22,.12) !important; }
.v5-hd-open .v5-bg1 { transform:translateY(5px) rotate(45deg); }
.v5-hd-open .v5-bg2 { opacity:0; }
.v5-hd-open .v5-bg3 { transform:translateY(-5px) rotate(-45deg); }
.v5-hd-open #v5hdSheet { opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important; }
.v5-hd-open #v5hdSheet .v5-hd-item { opacity:1 !important; transform:translateY(0) !important; }
.v5-hd-open #v5hdblur { backdrop-filter:blur(34px) saturate(1.3); -webkit-backdrop-filter:blur(34px) saturate(1.3); }
.v5-hd-open #v5hdScrim { opacity:1 !important; display:block !important; }
.v5-hd-lit .v5-hd-pill { background:#241f16 !important; color:#f4efe6 !important; }
.v5-wrap a:focus-visible, .v5-wrap button:focus-visible, .v5-wrap input:focus-visible, .v5-wrap [tabindex]:focus-visible { outline:2px solid rgba(255,246,232,.9); outline-offset:3px; border-radius:16px; }
.v5-day a:focus-visible, .v5-day button:focus-visible, .v5-day [tabindex]:focus-visible { outline-color:#241f16; }
/* link hit areas reach 24 without moving the type (lens 6) */
.v5-hd-lnk, #join footer a, #join a { padding-top:6px; padding-bottom:6px; margin-top:-6px; margin-bottom:-6px; }
/* the foot's living light — the breath of canvas Mark Traced 4 · 4a: six out, seven in, four clocks */
@keyframes v5btN { 0%,100% { transform:translate(0,-6px); animation-timing-function:cubic-bezier(.42,0,.58,1); } 50% { transform:translate(0,7px); animation-timing-function:cubic-bezier(.42,0,.58,1); } }
@keyframes v5btE { 0%,100% { transform:translate(6px,0); animation-timing-function:cubic-bezier(.42,0,.58,1); } 50% { transform:translate(-7px,0); animation-timing-function:cubic-bezier(.42,0,.58,1); } }
@keyframes v5btS { 0%,100% { transform:translate(0,6px); animation-timing-function:cubic-bezier(.42,0,.58,1); } 50% { transform:translate(0,-7px); animation-timing-function:cubic-bezier(.42,0,.58,1); } }
@keyframes v5btW { 0%,100% { transform:translate(-6px,0); animation-timing-function:cubic-bezier(.42,0,.58,1); } 50% { transform:translate(7px,0); animation-timing-function:cubic-bezier(.42,0,.58,1); } }
.v5bt-N, .v5bt-E, .v5bt-S, .v5bt-W { animation-timing-function:linear; animation-iteration-count:infinite; }
/* one breath (2 Sep): 6 · 8 · 10 · 12 — ratios of the page's 6s pulse, never in step (they meet once in 120s) */
.v5bt-N { animation-name:v5btN; animation-duration:12s; }
.v5bt-E { animation-name:v5btE; animation-duration:10s; animation-delay:-2.6s; }
.v5bt-S { animation-name:v5btS; animation-duration:8s; animation-delay:-5.2s; }
.v5bt-W { animation-name:v5btW; animation-duration:6s; animation-delay:-3.4s; }
@media (prefers-reduced-motion: reduce) { .v5bt-N, .v5bt-E, .v5bt-S, .v5bt-W { animation:none; } }
.v5-hd-mark-night { transition:opacity .9s ease; }
/* the header mark is the live 39b cut in E on its own flat ground, on both glasses (2 Sep);
   the ink trinity swap is retired with the triad */
.v5-hd-markfield { background:transparent; }
/* the header mark answers a click like the foot's light, in miniature: the four gather to one white body
   (.32s in), hold a beat, and fall back (.9s) as the page goes home */
.v5-hd-mark-night { transform-origin:50% 50%; transition:filter .32s cubic-bezier(.45,0,1,1), transform .32s cubic-bezier(.45,0,1,1); }
.v5-hd-pop .v5-hd-mark-night { filter:brightness(1.9) saturate(.6) blur(.8px); transform:scale(.5); }
.v5-hd-pop .v5-hd-core { opacity:1; transform:scale(1); }   /* Astra's white: pure core on the warm halo, as in her seat */
.v5-hd-settle .v5-hd-mark-night { transition:filter .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.v5-hd-settle .v5-hd-core { transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
/* past the hero the header leaves the flow and fades in pinned, as day glass.
   10 Sep, 1: the page is the viewport, so the pinned header is a full-width band too; its --pg-gx padding keeps the
   wordmark and Research on the centred 1280. The 1280 clamp was written when .v5-wrap itself stopped at 1280. */
.v5-hd-fix { position:fixed !important; top:0; left:0; margin-left:0; width:100%; box-sizing:border-box; animation:v5hdin .65s ease both; }
@keyframes v5hdin { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
.v5-hd-out { animation:v5hdout .5s ease both; }
@keyframes v5hdout { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-12px); } }
#v5hdnight::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 340% at 6% 60%, rgba(166,89,25,.26) 0%, rgba(166,89,25,0) 68%),
    radial-gradient(44% 300% at 34% 20%, rgba(196,54,54,.14) 0%, rgba(196,54,54,0) 66%),
    radial-gradient(50% 320% at 64% 80%, rgba(11,117,160,.17) 0%, rgba(11,117,160,0) 68%),
    radial-gradient(42% 300% at 94% 35%, rgba(214,120,86,.18) 0%, rgba(214,120,86,0) 66%);
  background-size: 190% 100%, 210% 100%, 200% 100%, 190% 100%;
  background-position: 0% 50%, 100% 0%, 30% 100%, 80% 40%;
  animation: v5skydrift 52s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,0) 86%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,0) 86%, rgba(0,0,0,0) 100%);
}
@keyframes v5skydrift {
  0%   { background-position: 0% 50%, 100% 0%, 30% 100%, 80% 40%; }
  50%  { background-position: 60% 40%, 40% 30%, 80% 60%, 20% 60%; }
  100% { background-position: 100% 60%, 0% 100%, 0% 0%, 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .v5-thread, .v5-breath, #v5hdnight::before, .v5-tw, .v5-tw2, .v5-tw3, .v5-lbl, .v5-alive, .v5-flow, .v5-node { animation:none; opacity:.2; }
.v5-day::before, .v5-sp-halo, .v5-sp-v, .v5-sp-h, .v5-sp-d1, .v5-sp-d2, .v5-sp-core { animation:none; } }
/* ── ONE PAGE, TWO WIDTHS (31 Aug). There is no second file and no second layout. The §19 ramp
   is declared ONCE here and switched at 700px: desktop 58 · 44 · 34 · 26 · 17, phone one rung
   down the same ramp 44 · 34 · 26 · 20.5 · 17 (§19.1). §19.2: the page floor is 12, never 11.
   Gutters, the avatar group, Astra's seat, the frames and the mark follow the same switch.
   Copy, the traced path, the voice table and the choreography exist once and serve both. */
:root {
  --pg-d1:58px; --pg-d2:44px; --pg-d3:34px; --pg-d4:26px;
  --pg-lead:20.5px; --pg-body:20.5px; --pg-body2:17px; --pg-cred:17px;
  --pg-gut:56px; --pg-gutw:120px; --pg-secpad:110px; --pg-deckpad:96px;
  --pg-av:190px; --pg-lap:-56px; --pg-face:180px; --pg-grp:592px;
  --pg-pour-top:190px; --pg-pour-h:212px; --pg-pour-gap:142px;
  --pg-seat:190px; --pg-mark:240px;
  --pg-frame:350px; --pg-frame3:340px; --pg-createframe:360px; --pg-rowgap:110px;
  --pg-pad1b:120px; --pg-pad1b-b:150px; --pg-pad4:76px; --pg-pad5:76px; --pg-pad5-b:110px; --pg-pad7:87px;
}
@media (max-width:700px) {
  :root {
    --pg-gut:24px; --pg-gutw:24px; --pg-secpad:64px; --pg-deckpad:150px;
    --pg-av:112px; --pg-lap:-33px; --pg-face:106px; --pg-grp:349px;
    --pg-pour-top:112px; --pg-pour-h:150px; --pg-pour-gap:88px;
    --pg-seat:132px; --pg-mark:300px;   /* 9 Sep, 3: visible body ~210, core hit ~100 */
    /* PHONE MEDIA IS INSET, NOT BLED (1 Sep): every frame on the phone is the same 300 —
       §2, the deck, the Book pair and Create — so a screen reads as an object held on the page,
       and the two-across rows keep 300 + gap + a real peek instead of a full-width slab. */
    --pg-frame:300px; --pg-frame3:300px; --pg-createframe:300px; --pg-rowgap:24px;
    --pg-pad1b:64px; --pg-pad1b-b:104px; --pg-pad4:64px; --pg-pad5:64px; --pg-pad5-b:76px; --pg-pad7:64px;
  }
}
/* THE PAGE IS THE VIEWPORT (10 Sep, 1): the wrap loses its 1280 cap; 1280 becomes the CONTENT measure — every band runs
   edge to edge and its inline padding grows to keep the content on a centred 1280. Below 1280 + 2·gut the max() returns
   the gutter, so tablet and phone are untouched. */
.v5-wrap { width:100%; max-width:none; --pg-gx:max(var(--pg-gut), calc((100% - 1280px) / 2 + var(--pg-gut))); }
.v5-wrap > header, .v5-wrap > main > section, .v5-wrap > footer { padding-left:var(--pg-gx) !important; padding-right:var(--pg-gx) !important; }
.v5-wrap > main > section#adventures { padding-left:max(var(--pg-gutw), calc((100% - 1280px) / 2 + var(--pg-gutw))) !important; padding-right:max(var(--pg-gutw), calc((100% - 1280px) / 2 + var(--pg-gutw))) !important; }
/* ADDENDUM 7 (11 Sep): the hero takes no inline padding. Its aspect-ratio applies to the content box, so padding made the
   border box wider than 16:9 — the painting (cover, scaled by width) and the sky svg (meet, scaled by height) then ran on
   two scales and every star drifted off its spire. The sky runs edge to edge; the title stays on the 1280 via --pg-gx. */
.v5-wrap > main > section.v5-hero, .v5-wrap > main > section.rs-hero { padding-left:0 !important; padding-right:0 !important; }
.v5-plate-tall { display:none; }
.v5-heroline { pointer-events:none; }
.v5-hero { height:auto; aspect-ratio:1280/720; }
.v5-tall { display:none; }
.v5-row { display:flex; gap:var(--pg-rowgap); align-items:center; }
.v5-row > div { min-width:0; }
.v5-frame { flex:0 0 var(--pg-frame); }
@media (max-width:700px) {
  .v5-hero { aspect-ratio:390/693; }
  .v5-wide { display:none !important; }
  .v5-tall { display:block; }
  .v5-g { display:none !important; }
  a.v5-hd-lnk, .v5-hd-res, #v5hdPanel { display:none !important; }
  #v5hdScrim { display:none; }
  .v5-hd-burger { display:inline-flex !important; }
  #v5hdSheet { display:block !important; }
  .v5-hd-fix { left:0 !important; margin-left:0 !important; width:100% !important; max-width:100%; }
  /* phone: the title holds the top of the sky, the line under it holds the FOOT (1 Sep) */
  .v5-heroline { top:28px; bottom:var(--pg-gut) !important; display:flex; flex-direction:column; justify-content:space-between; }
  .v5-heroline > :first-child { margin-bottom:0 !important; }
  .v5-heroline > :last-child { font-size:var(--pg-cred) !important; }

  .v5-mirror { height:280px !important; }
  .v5-swipe { justify-content:flex-start !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .v5-swipe > div { flex:0 0 auto !important; scroll-snap-align:start; }

  /* Astra's star scales with her seat — the 64/-34/174 stack re-measured, not re-invented */
  #v5mindsLine, #v5astraLine { font-size:var(--pg-d3) !important; max-width:100% !important; }
  /* the foot on a phone (9 Sep, 2): one column, centred, never a wrapping space-between row — a lone item on a line sat
     left and two items spread, so the line jumped between left and centred. The © line is 12, the site floor. */
  #v5footline { flex-direction:column !important; align-items:center !important; justify-content:center !important; flex-wrap:nowrap !important; gap:14px !important; padding:18px 0 26px !important; text-align:center; }
  #v5footline > div { gap:20px !important; justify-content:center !important; flex-wrap:wrap; }
  #v5footline > span { font-size:12px; }
  #v5b4 .v5-morestar { width:38px !important; height:38px !important; }
  #v5b5 .v5-morestar { width:44px !important; height:44px !important; }
  #v5b4 .v5-morestar > .v5-sp-halo { inset:-37px !important; }
  #v5b5 .v5-morestar > .v5-sp-halo { inset:-44px !important; }
  #v5b4 .v5-morestar .v5-astra-fade { width:103px !important; height:103px !important; margin:-51.5px 0 0 -51.5px !important; }
  #v5b5 .v5-morestar .v5-astra-fade { width:121px !important; height:121px !important; margin:-60.5px 0 0 -60.5px !important; }
  /* 6 Sep evening, item 7: the foot mark's core hits at 44px on the 164 mark */
  .v5mk-hit-core { r:260px; }   /* 10 Sep addendum 2: 125px on the 300 phone mark; the lobes keep their outer halves as seats */
  /* 6 Sep night, 5 + addendum 2: the pair strip bleeds to both screen edges relative to the ROW — no viewport units, which
     widened the page sideways on the phone and shifted the layout on every scroll; the frames keep the gutter */
  .v5-swipe { margin-left:calc(-1 * var(--pg-gut)) !important; margin-right:calc(-1 * var(--pg-gut)) !important; width:calc(100% + 2 * var(--pg-gut)) !important; box-sizing:border-box; padding:0 var(--pg-gut); scroll-padding:0 var(--pg-gut); }
}
/* TWO BANDS, not one (1 Sep). The TYPE ramp still steps down at 1200 — but the COLUMNS no longer
   collapse with it: between 1001 and 1200 there is room for two, once the gutter and the row gap
   come in (120→64, 110→64). That keeps the §2 measure at ~52ch instead of stacking a 350 frame
   over its own paragraph with 200px of empty page either side. Below 1000 it is one column. */
@media (max-width:1200px) {
  :root {
    --pg-d1:44px; --pg-d2:34px; --pg-d3:26px; --pg-d4:20.5px;
    --pg-lead:17px; --pg-body:17px; --pg-body2:15px; --pg-cred:15px;
  }
}
@media (max-width:1200px) and (min-width:1001px) {
  :root { --pg-gutw:64px; --pg-rowgap:64px; }
  .v5-row > div:not(.v5-frame):not(.v5-swipe) { max-width:52ch; }
  .v5-row.v5-deckrow { padding:0 40px !important; gap:56px !important; }
  /* §4 keeps its frames at their desktop 330 here — the text column gives up the 80px instead,
     and the second frame peeks by scroll rather than both shrinking to thumbnails. */
  .v5-row:has(> .v5-swipe) > div:first-child { flex:0 0 320px !important; }
  .v5-swipe { justify-content:flex-start !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .v5-swipe > div { flex:0 0 auto !important; scroll-snap-align:start; }
  .v5-swipe > div > div { width:330px !important; max-width:330px !important; }
}
@media (max-width:1000px) and (min-width:701px) {
  /* the tablet band (2 Sep): the pair fits side by side at 300 each, so the words stand centred over it on one
     axis, and nothing peeks. Left-set words over a wider pair had nothing to align to. */
  .v5-row.v5-pairrow { max-width:none !important; align-items:center !important; gap:48px !important; }
  .v5-row.v5-pairrow > div:first-child { max-width:56ch !important; text-align:center; align-items:center; }
  .v5-row.v5-pairrow > div:first-child > :first-child { max-width:24ch; text-wrap:balance; }
  .v5-row.v5-pairrow > .v5-swipe { justify-content:center !important; margin-right:0 !important; overflow:visible !important; gap:24px !important; align-items:flex-start !important; }
  .v5-row.v5-pairrow > .v5-swipe > div > div { width:300px !important; max-width:300px !important; }
}
@media (max-width:1000px) {
  /* ONE AXIS BELOW 1000 (2 Sep audit, lens 1): words stand centred over their media in every section */
  .v5-row > div:not(.v5-frame):not(.v5-swipe) { text-align:center; align-items:center; }
  .v5-row > div:not(.v5-frame):not(.v5-swipe) > :first-child { max-width:26ch; text-wrap:balance; margin-inline:auto; }
  .v5-row > div:not(.v5-frame):not(.v5-swipe) > :not(:first-child) { max-width:52ch; text-wrap:pretty; margin-inline:auto; }
  .v5-row { flex-direction:column; align-items:center; gap:34px; max-width:52ch; margin-inline:auto; }
  .v5-row.v5-rev { flex-direction:column-reverse; }
  .v5-row > div { flex:1 1 auto !important; width:auto; }
  .v5-frame { width:100% !important; max-width:var(--pg-frame) !important; align-self:flex-start; }   /* 6 Sep: now winning over `.v5-row > div { width:auto }` */
  .v5-row.v5-deckrow { padding:0 !important; gap:34px !important; flex-direction:column-reverse; }
  .v5-row > div:not(.v5-frame):not(.v5-swipe) { max-width:52ch; }
  .v5-plate-wide { display:none !important; }
  .v5-plate-tall { display:block !important; }
  #v5seam { background:linear-gradient(180deg, #f4efe6 0%, rgba(244,239,230,.80) 3%, rgba(244,239,230,.62) 5%, rgba(244,239,230,.45) 8%, rgba(244,239,230,.30) 10.5%, rgba(244,239,230,.18) 13%, rgba(244,239,230,.10) 16%, rgba(244,239,230,0) 20%, rgba(244,239,230,0) 80%, rgba(244,239,230,.10) 84%, rgba(244,239,230,.26) 87%, rgba(244,239,230,.43) 90%, rgba(244,239,230,.59) 93%, rgba(244,239,230,.75) 95.5%, rgba(244,239,230,.89) 98%, #f4efe6 100%) !important; }
  #v5dim { background:linear-gradient(180deg, rgba(11,14,25,0) 5%, rgba(11,14,25,.34) 11%, rgba(11,14,25,.44) 17%, rgba(11,14,25,.44) 33%, rgba(11,14,25,.48) 40%, rgba(11,14,25,.5) 80%, rgba(11,14,25,.24) 88%, rgba(11,14,25,0) 93%) !important; }
  /* 701–1000: the two Book frames stand SIDE BY SIDE under the words at their own 330 — a single
     520 screen centred with a sliver peeking beside it was the worst reading of this row (1 Sep). */
  .v5-swipe { justify-content:center !important; max-width:none; flex-wrap:nowrap; }
  .v5-row:has(> .v5-swipe) { max-width:none; }   /* the row must hold both frames (2 Sep) — the 52ch cap clipped the left one */
  .v5-swipe > div > div { width:min(330px, calc((100vw - 2*var(--pg-gut) - 24px)/2)) !important; max-width:330px !important; }
}
@media (max-width:700px) {
  /* the plate brings its own fog at this crop — the seam only guarantees the join */
  #v5seam { background:linear-gradient(180deg, #f4efe6 0%, rgba(244,239,230,.5) 1.5%, rgba(244,239,230,0) 5%, rgba(244,239,230,0) 95%, rgba(244,239,230,.45) 98%, #f4efe6 100%) !important; }
  /* and the dim starts BELOW that fog rather than inside it */
  #v5dim { background:linear-gradient(180deg, rgba(11,14,25,0) 14%, rgba(11,14,25,.32) 18%, rgba(11,14,25,.44) 24%, rgba(11,14,25,.44) 33%, rgba(11,14,25,.48) 40%, rgba(11,14,25,.5) 76%, rgba(11,14,25,.20) 84%, rgba(11,14,25,0) 90%) !important; }
}
@media (max-width:700px) { :root { --pg-bookframe:300px; --pg-bookframe1:300px; }
  .v5-row { gap:var(--pg-rowgap); max-width:none; } .v5-row.v5-deckrow { gap:var(--pg-rowgap) !important; } .v5-row:has(> .v5-swipe) { max-width:none; } .v5-frame { max-width:var(--pg-frame); align-self:center; }
  /* the phone keeps the peek: first frame larger, the rest overflowing the gutter as the invitation
     to swipe. The frames must OVERFLOW the capped row — that overflow IS the peek. */
  .v5-swipe { justify-content:flex-start !important; margin-right:calc(50% - 50vw); }
  .v5-swipe > div > div { width:var(--pg-bookframe, 300px) !important; max-width:var(--pg-bookframe, 300px) !important; }
  /* and the WORDS take the media's measure, not the page's (1 Sep): a paragraph in a row sits on
     the same 300 as the screen above it. Only the section banners keep the full 24px gutter. */
  .v5-row > div:not(.v5-frame):not(.v5-swipe) { width:var(--pg-frame) !important; max-width:var(--pg-frame) !important; align-self:center; } }
@media (min-width:701px) { .v5-tall { display:none !important; } }
/* THE TABLET BAND HOLDS TWO COLUMNS (2 Sep audit): between 761 and 1000 a 300 screen and a 40ch column fit
   side by side, so the Adventures rows and the deck row stay media-beside-words — words LEFT, on the frame's
   axis — instead of stacking into screen / paragraph / screen with a viewport of air between each. Only the
   pair rows (Book, Create) stack here, as a centred header over the pair, because two screens plus a column
   do not fit. Axis follows geometry: beside → left, over → centred. */
@media (min-width:761px) and (max-width:1000px) {
  #v5footline { justify-content:center !important; text-align:center; }
  #v5footline > div { gap:20px !important; }
  .v5-row:not(.v5-pairrow) { flex-direction:row !important; align-items:center !important; gap:44px !important; max-width:none !important; margin-inline:0 !important; }
  .v5-row.v5-rev:not(.v5-pairrow) { flex-direction:row !important; }
  .v5-row:not(.v5-pairrow) > .v5-frame { flex:0 0 300px !important; width:300px !important; max-width:300px !important; align-self:center !important; }
  .v5-row:not(.v5-pairrow) > div:not(.v5-frame):not(.v5-swipe) { flex:1 1 auto !important; max-width:44ch !important; text-align:left !important; align-items:flex-start !important; }
  .v5-row:not(.v5-pairrow) > div:not(.v5-frame):not(.v5-swipe) > * { margin-inline:0 !important; max-width:none !important; text-wrap:pretty !important; }
  .v5-row.v5-deckrow { flex-direction:row !important; padding:0 !important; gap:44px !important; }
  #adventures { padding-left:var(--pg-gut) !important; padding-right:var(--pg-gut) !important; }
}
/* the portrait sky answers by DIMMING (no boost twins at 390 — they read as noise there) */
#v5sky9 g, #v5sky9 text, #v5sky9 line, #v5sky9 circle { transition:opacity .8s ease, filter .8s ease; }
#v5sky9.dim > g:not(.lit), #v5sky9.dim > text:not(.lit), #v5sky9.dim > line:not(.lit), #v5sky9.dim > circle:not(.lit) { opacity:.08; }
#v5sky9 .lit { filter:drop-shadow(0 0 7px rgba(255,232,196,.85)); }
#v5sky9 .hint { filter:drop-shadow(0 0 9px rgba(255,232,196,.9)); }
#v5sky9 .v5-dot9 { stroke:rgba(230,168,82,.34); stroke-width:1.2; animation:v5drift 26s linear infinite; }
@media (prefers-reduced-motion: reduce) { #v5sky9 .v5-dot9 { animation:none; } }
/* THE MAT (1 Sep) — a screen is a plate INSIDE a mat, never a bare rectangle: cream mat at 9px
   on the artefact's 30, the screen itself at the plate's 22 with a 1px ink hairline inset and a
   white top lip, over the day's two-layer shadow (S1 sheet + S2 held object). At night the mat
   is lamplit glass and casts no gray — depth by light. */
.v5-scr { position:relative; padding:9px; border-radius:30px !important; background:linear-gradient(180deg, rgba(255,253,248,.92) 0%, rgba(243,236,225,.84) 100%); box-shadow:0 1px 2px rgba(29,33,41,.05), 0 4px 10px -4px rgba(29,33,41,.10), 0 22px 40px -26px rgba(29,33,41,.26) !important; }
/* a screen in the peek row is clipped by the section on purpose — a clipped drop shadow reads as
   a bug, so there the mat carries the lift itself and casts almost nothing (1 Sep) */
@media (max-width:700px) { .v5-swipe .v5-scr { box-shadow:0 1px 2px rgba(29,33,41,.05), 0 6px 14px -8px rgba(29,33,41,.20) !important; } }
.v5-scr > img { display:block; width:100%; height:auto; border-radius:22px; }
/* NO JUMP ON SCROLL (6 Sep): a live frame reserves its box from --ar, so the page never grows when a
   lazy poster decodes. The still and the film both fill that box. */
.v5-scr.v5-live { aspect-ratio:var(--ar); }
.v5-scr.v5-live > img { position:absolute; left:6px; top:6px; width:calc(100% - 12px); height:calc(100% - 12px); object-fit:cover; }   /* 1c: inside the brim, as the video */
/* A LIVE FRAME IS THE LOOP ITSELF (2 Sep): the eight loops bake their own ground and their own
   device, so the page adds no plate around them — no padding, no second ground, no inner hairline.
   The frame is one rounded clip at the sheet radius with the S2 shadow; anything more is a frame
   around a frame. */
.v5-scr.v5-live { padding:0 !important; background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.v5-scr.v5-live::after { display:none; }
.v5-scr.v5-live > img, .v5-scr.v5-live > video { border-radius:30px !important; }
/* THE GLASS BRIM (2 Sep): a 6px ring of glass around each loop that shows the section's sky through
   it, with the SUN on it — a warm glint that sits where the sun is at that hour of the page, dawn low
   in the east on Musk (§2), overhead on the deck (§3), settling west and amber through the Book and
   Create (§4–5). Each brim glows a little toward its sun. --sun is the glint's clock angle from the
   top; --sunc its colour. The loop itself is untouched: same 30 radius, inside the brim. */
.v5-scr.v5-live { padding:6px !important; border-radius:36px !important;
  background:conic-gradient(from var(--sun) at 50% 50%, rgba(var(--sunc),.92) 0deg, rgba(var(--sunc),.42) 26deg, rgba(255,255,255,.14) 70deg, rgba(255,255,255,.07) 180deg, rgba(255,255,255,.14) 290deg, rgba(var(--sunc),.42) 334deg, rgba(var(--sunc),.92) 360deg) !important;
  backdrop-filter:blur(10px) saturate(1.15) !important; -webkit-backdrop-filter:blur(10px) saturate(1.15) !important;
  /* no drop shadow (2 Sep): the loops bake their own device shadow, and a grey cast under a glass brim
     on a warm ground read as dirt. The brim is glass — light, not weight. */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.45) !important; }
/* A PAIR OF LOOPS STANDS ON ONE BASELINE (2 Sep). Above 1000 the pair rows (§4 Book · Threads, §5
   Builder · Florence) are a column: the words first, then the two devices side by side at ONE HEIGHT,
   centred, each taking its own width from its aspect — nothing is clipped, nothing peeks, and a taller
   and a squarer screen read as two objects set down together rather than two thumbnails in a strip. */
@media (min-width:1001px) {
  /* ONE AXIS (2 Sep): when the words stand over the pair they share its centre. A left-set paragraph over a
     centred pair put two axes in one module and read as a leftover. The block is a header now: title one step
     up (44), body capped at 56ch, both centred, the pair on one top line beneath. */
  .v5-row.v5-pairrow { flex-direction:column !important; align-items:center !important; gap:64px !important; max-width:none !important; }
  .v5-row.v5-pairrow > div:first-child { flex:0 0 auto !important; max-width:56ch; width:auto !important; text-align:center; align-items:center; gap:18px !important; }
  .v5-row.v5-pairrow > div:first-child > :first-child { font-size:var(--pg-d2) !important; line-height:1.16 !important; max-width:24ch; text-wrap:balance; }
  .v5-row.v5-pairrow > div:first-child > :not(:first-child) { max-width:52ch; text-wrap:pretty; }
  /* ONE WIDTH, their own heights (2 Sep): the pair share a width of 400 and stand on one top line;
     the squarer screen is simply shorter — that is what it is. The swipe wrapper stops clipping so the
     click-breath (scale 1.03) has room; it is a strip only below 1000. */
  .v5-row.v5-pairrow > .v5-swipe { width:100%; justify-content:center !important; align-items:flex-start !important; gap:32px !important; flex:0 0 auto !important; overflow:visible !important; padding:14px 0; }
  .v5-row.v5-pairrow > .v5-swipe > div { flex:0 0 auto !important; }
  /* 10 Sep, 2: the 400 width and the poster's width:100%/height:auto are gone — 100% of an absolute poster is the padding
     box, so the still ran 6px past the brim right and bottom; the one rule .v5-scr.v5-live > img (6px inset) is the truth,
     and the second ≥1001 block's 340 stands */
  .v5-row.v5-pairrow .v5-scr.v5-live { aspect-ratio:var(--ar); box-sizing:border-box; }
}
@media (min-width:1001px) {
  .v5-row.v5-pairrow { flex-direction:row !important; align-items:center !important; gap:clamp(40px, 4.5vw, 72px) !important; }
  .v5-row.v5-pairrow > div:first-child { flex:0 1 340px !important; min-width:240px; max-width:340px !important; text-align:left; align-items:flex-start; }
  .v5-row.v5-pairrow > div:first-child > :first-child { font-size:var(--pg-d3) !important; line-height:1.24 !important; max-width:none; }
  .v5-row.v5-pairrow > .v5-swipe { width:auto; flex:1 1 auto !important; min-width:0; justify-content:flex-end !important; align-items:flex-start !important; gap:24px !important; }
  .v5-row.v5-pairrow > .v5-swipe > div { flex:1 1 0 !important; min-width:0; max-width:340px; }
  .v5-row.v5-pairrow .v5-scr.v5-live { width:100% !important; max-width:340px !important; min-width:0; }
  .v5-row.v5-pairrow > .v5-swipe > div:last-child { margin-top:40px; transform:scale(.97); transform-origin:top center; }
  .v5-row.v5-pairrow > .v5-swipe > div:last-child .v5-scr.v5-live { box-shadow:0 14px 30px -20px rgba(29,33,41,.18) !important; }
}
/* THE PRESS HAS A PLACE (2 Sep): the frame is a card on a soft mount. Where you press it decides the
   answer — pressed at the top edge it gives down; pressed at a corner it tilts on the axis away from
   your finger (rotateX/Y up to 6°); pressed at the centre it only sinks. Then it springs home with a
   small overshoot. Driven by JS from the click point; one rAF spring per frame. */
.v5-scr.v5-live { cursor:pointer; transform-style:preserve-3d; will-change:transform; touch-action:manipulation; }
/* 6 Sep evening, item 4: no grey tap rectangle on the SVG hits or anywhere else */
.v5-wrap, .v5-wrap * { -webkit-tap-highlight-color:transparent; }
/* A TOUCH LEAVES A SPARK (2 Sep): click empty sky in the hero or the foot and a tiny star flickers
   where you touched — a four-point flare that blooms in .18s and is gone in 1.1s. Never on an
   interactable (threads, names, faces, the mark, links, the join). */
@keyframes v5sparkIn { 0% { opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(0deg); } 7% { opacity:1; transform:translate(-50%,-50%) scale(1.15) rotate(8deg); } 38% { opacity:.85; transform:translate(-50%,-50%) scale(.9) rotate(14deg); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(22deg); } }
.v5-arrive { opacity:0; filter:blur(4px); transform:translateY(6px); }
.v5-arrive.v5-arrived { opacity:1; filter:blur(0); transform:none; transition:opacity .42s ease, filter .42s ease, transform .42s ease; }
@media (prefers-reduced-motion: reduce) { .v5-arrive { opacity:1; filter:none; transform:none; } }
.v5-spark { position:absolute; width:22px; height:22px; pointer-events:none; animation:v5sparkIn 1.1s cubic-bezier(.2,.6,.3,1) forwards; }
.v5-spark::before, .v5-spark::after { content:''; position:absolute; left:50%; top:50%; background:linear-gradient(90deg, rgba(255,246,230,0) 0%, rgba(255,246,230,.95) 50%, rgba(255,246,230,0) 100%); transform:translate(-50%,-50%); }
.v5-spark::before { width:22px; height:1.2px; }
.v5-spark::after { width:1.2px; height:22px; background:linear-gradient(180deg, rgba(255,246,230,0) 0%, rgba(255,246,230,.95) 50%, rgba(255,246,230,0) 100%); }
.v5-spark > i { position:absolute; left:50%; top:50%; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:50%; background:#fff8ec; box-shadow:0 0 6px 2px rgba(255,236,200,.7); }
.v5-row.v5-pairrow > .v5-swipe, .v5-row { perspective:1400px; }
.v5-scr.v5-live > .v5-live-glow { display:none; }
.v5-scr.v5-live > video { left:6px !important; top:6px !important; width:calc(100% - 12px) !important; height:calc(100% - 12px) !important; }
.v5-scr.v5-live::before { content:''; position:absolute; inset:0; border-radius:36px; pointer-events:none;
  background:radial-gradient(60% 60% at calc(50% + sin(var(--sun)) * 50%) calc(50% - cos(var(--sun)) * 50%), rgba(var(--sunc),.55) 0%, rgba(var(--sunc),0) 60%); }
@media (max-width:700px) { .v5-scr.v5-live { padding:5px !important; border-radius:35px !important;
    background:conic-gradient(from var(--sun) at 50% 50%, rgba(var(--sunc),.92) 0deg, rgba(var(--sunc),.42) 13deg, rgba(255,255,255,.14) 35deg, rgba(255,255,255,.07) 180deg, rgba(255,255,255,.14) 325deg, rgba(var(--sunc),.42) 347deg, rgba(var(--sunc),.92) 360deg) !important; } .v5-scr.v5-live > video, .v5-scr.v5-live > img { left:5px !important; top:5px !important; width:calc(100% - 10px) !important; height:calc(100% - 10px) !important; } .v5-scr.v5-live::before { border-radius:35px; } }
.v5-scr::after { content:''; position:absolute; inset:9px; border-radius:22px; box-shadow:inset 0 0 0 1px rgba(29,33,41,.10), inset 0 1px 0 rgba(255,255,255,.5); pointer-events:none; }
.v5-scr-night { background:linear-gradient(180deg, rgba(255,246,232,.15) 0%, rgba(255,246,232,.05) 55%, rgba(255,246,232,.11) 100%); backdrop-filter:blur(8px) saturate(1.2); -webkit-backdrop-filter:blur(8px) saturate(1.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 30px 60px -34px rgba(0,0,0,.55) !important; }
.v5-scr-night::after { box-shadow:inset 0 0 0 1px rgba(255,236,200,.17), inset 0 1px 0 rgba(255,246,232,.22); }
@media (max-width:700px) { .v5-scr { padding:7px; } .v5-scr > img { border-radius:18px; } .v5-scr::after { inset:7px; border-radius:18px; } }

/* ── research page (4 Sep) ── */
.rs-hero { position:relative; overflow:hidden; aspect-ratio:1280/720; background:#050b16; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:default; }
.rs-col { width:66ch; max-width:100%; font-size:17px; }
.rs-body { font-size:17px; line-height:1.62; color:#4a4438; display:flex; flex-direction:column; gap:22px; text-wrap:pretty; }
.rs-body p { margin:0; }
.rs-body sup { font-size:12px; line-height:0; font-feature-settings:'tnum'; vertical-align:baseline; position:relative; top:-.55em; margin-left:1px; color:#4a4438; }
.rs-h2 { margin:28px 0 0; font-family:'Newsreader',serif; font-weight:500; font-size:var(--pg-d3); line-height:1.15; color:#241f16; text-wrap:balance; }
.rs-lead { font-size:var(--pg-lead); line-height:1.5; color:#241f16; }
.rs-cap { float:left; font-family:'Newsreader',serif; font-weight:500; font-size:98px; line-height:.78; padding:10px 12px 0 0; color:#241f16; }
.rs-refs a { color:rgba(236,231,219,.72); text-decoration:underline; text-decoration-color:rgba(236,231,219,.3); text-underline-offset:3px; }
.rs-refs a:hover { text-decoration-color:rgba(236,231,219,.9); }
.rs-flick { position:absolute; width:260px; height:260px; margin:-130px 0 0 -130px; border-radius:50%; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(circle, rgba(255,240,210,.85) 0%, rgba(255,232,190,.45) 22%, rgba(255,224,170,.12) 48%, rgba(255,224,170,0) 70%); animation:rsFlick 1.1s ease-out forwards; }
@keyframes rsFlick { 0% { opacity:0; transform:scale(.6); } 10% { opacity:.55; } 20% { opacity:.2; } 34% { opacity:.65; transform:scale(1); } 50% { opacity:.3; } 66% { opacity:.42; } 100% { opacity:0; transform:scale(1.15); } }
@media (max-width:1200px) { .rs-cap { font-size:82px; padding-top:8px; } }
@media (max-width:700px) { .rs-hero { aspect-ratio:390/560; } .rs-hero img { object-position:50% 30%; } .rs-cap { font-size:80px; } .rs-body sup { font-size:12px; } }
@media (prefers-reduced-motion: reduce) { .rs-flick { display:none; } }

/* ══ 2 · the markup's inline styles, moved onto classes (same values, same order of precedence) ══ */

/* the page */
.v5-wrap { margin:0 auto; background:#f4efe6; font-family:'Hanken Grotesk',sans-serif; color:var(--day-ink); overflow:hidden; }

/* §5.5 the header */
/* the header's height is fixed in CSS (12 Sep): 38px of content (the mark, the burger) inside its padding — 58 on desktop, 54 on the
   phone — so nothing the type does on arrival can move it, and the seat the fixed header leaves in the flow is always the same */
.v5-glass { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px var(--pg-gut); height:38px; }
.v5-glass.v5-hd-fix { height:58px; }   /* the pinned header is border-box (the DC's .v5-hd-fix), so the same 58 is written whole */
@media (max-width:700px) { .v5-glass.v5-hd-fix { height:54px; } }
#v5hdblur { position:absolute; inset:0; pointer-events:none; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.v5-hd-left { position:relative; display:flex; align-items:center; gap:11px; }
.v5-hd-right { position:relative; display:flex; align-items:center; gap:26px; }
#v5hdHome { position:relative; width:38px; height:38px; display:inline-flex; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.v5-hd-mark-night { position:absolute; inset:3px; width:32px; height:32px; }
.v5-hd-core { position:absolute; left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:999px; pointer-events:none; opacity:0; transform:scale(.3); background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,250,240,.98) 18%, rgba(255,241,214,.75) 34%, rgba(255,232,190,.32) 54%, rgba(255,228,182,.08) 74%, rgba(255,228,182,0) 100%); transition:opacity .32s cubic-bezier(.45,0,1,1), transform .32s cubic-bezier(.45,0,1,1); }
.v5-hd-word, a.v5-hd-word, a.v5-hd-word:hover { font-family:var(--font-inscription); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:rgba(236,231,219,.92); margin-left:2px; text-decoration:none; }
.v5-hd-res { position:relative; display:flex; align-items:center; }
a.v5-hd-lnk { display:inline-flex; align-items:center; gap:6px; outline:none; font-size:13px; letter-spacing:.02em; color:rgba(236,231,219,.68); transition:color .3s ease; }
a.v5-hd-lnk:hover { color:rgba(236,231,219,1); }
.v5-hd-chev { display:block; transition:transform .4s ease; }
.v5-hd-burger { display:none; width:38px; height:38px; padding:0; border:0; border-radius:12px; background:rgba(240,230,220,.1); color:rgba(236,231,219,.9); cursor:pointer; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(255,246,232,.14); }
.v5-hd-burger svg { display:block; }
.v5-bg1 { transition:transform .35s ease, opacity .35s ease; transform-origin:9px 1px; }
.v5-bg2 { transition:opacity .25s ease; }
.v5-bg3 { transition:transform .35s ease, opacity .35s ease; transform-origin:9px 11px; }
#v5hdPanel { position:absolute; left:0; right:0; top:100%; padding:34px var(--pg-gut) 40px; border-radius:0 0 30px 30px; opacity:0; pointer-events:none; transform:translateY(-10px); transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1); background:linear-gradient(180deg, rgba(4,12,31,.96) 0%, rgba(6,12,28,.78) 100%); backdrop-filter:blur(34px) saturate(1.3); -webkit-backdrop-filter:blur(34px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,246,232,.07), 0 40px 90px -40px rgba(0,0,0,.85); text-align:left; }
.v5-hd-panel-grid { display:grid; grid-template-columns:minmax(220px, 1fr) minmax(0, 2fr); gap:64px; align-items:start; max-width:1168px; margin:0 auto; }
.v5-hd-bench { display:flex; flex-direction:column; gap:14px; padding-top:14px; }
.v5-hd-list { display:flex; flex-direction:column; gap:6px; }
.v5-hd-pane-k { margin:0; font-size:12px; letter-spacing:var(--track-kicker); text-transform:uppercase; color:rgba(236,231,219,.5); }
.v5-hd-pane-t { margin:0; font-family:'Newsreader',serif; font-weight:500; font-size:26px; line-height:1.18; color:rgba(236,231,219,.94); text-wrap:pretty; }
.v5-hd-pane-b { margin:0; font-size:14px; line-height:1.5; color:rgba(236,231,219,.6); max-width:30ch; }
#v5hdSheet .v5-hd-bench .v5-hd-pane-b, .v5-hd-sheet-bench .v5-hd-pane-b { max-width:34ch; }
.v5-hd-item { display:grid; grid-template-columns:200px 1fr; gap:22px; align-items:center; padding:14px; margin:0 -14px; border-radius:22px; text-decoration:none; transition:background-color .35s ease, opacity .5s ease 0.08s, transform .5s cubic-bezier(.2,.7,.2,1) 0.08s; opacity:0; transform:translateY(8px); }
.v5-hd-item:hover { background:rgba(255,246,232,.05); }
.v5-hd-item:nth-child(2) { transition:background-color .35s ease, opacity .5s ease 0.16s, transform .5s cubic-bezier(.2,.7,.2,1) 0.16s; }
.v5-hd-thumb { display:block; width:200px; aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:linear-gradient(160deg, rgba(255,246,232,.12), rgba(255,246,232,.03)); box-shadow:inset 0 1px 0 rgba(255,246,232,.16), inset 0 0 0 1px rgba(255,246,232,.08); }
.v5-hd-thumb img { display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
.v5-hd-item-text { display:flex; flex-direction:column; gap:6px; min-width:0; }
.v5-hd-item .v5-hd-pane-t { font-size:20.5px; line-height:1.22; }
.v5-hd-item .v5-hd-pane-b { font-size:13px; line-height:1.4; color:rgba(236,231,219,.55); font-feature-settings:'tnum'; max-width:none; }
#v5hdScrim { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .6s ease; background:rgba(3,6,16,.42); }
#v5hdSheet { display:none; position:absolute; left:0; right:0; top:100%; z-index:19; padding:20px var(--pg-gut) 28px; max-height:calc(100dvh - 72px); overflow-y:auto; border-radius:0 0 30px 30px; opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1); background:linear-gradient(180deg, rgba(4,12,31,.96) 0%, rgba(6,12,28,.8) 100%); backdrop-filter:blur(34px) saturate(1.3); -webkit-backdrop-filter:blur(34px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,246,232,.07), 0 40px 90px -40px rgba(0,0,0,.85); text-align:left; }
/* 6 Sep evening, item 6: kicker + line only, items as 96px rows, and the sheet scrolls inside the fixed header */
.v5-hd-sheet-bench { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.v5-hd-sheet-list { display:flex; flex-direction:column; gap:18px; }
#v5hdSheet .v5-hd-item { display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; padding:0; margin:0; border-radius:0; transition:opacity .5s ease 0.08s, transform .5s cubic-bezier(.2,.7,.2,1) 0.08s; }
#v5hdSheet .v5-hd-item:nth-child(2) { transition:opacity .5s ease 0.16s, transform .5s cubic-bezier(.2,.7,.2,1) 0.16s; }
#v5hdSheet .v5-hd-item:hover { background:none; }
#v5hdSheet .v5-hd-thumb { width:96px; aspect-ratio:16/10; border-radius:16px; }
#v5hdSheet .v5-hd-item .v5-hd-pane-t { font-size:17px; line-height:1.25; }
#v5hdSheet .v5-hd-item-text { gap:4px; }

/* §5.1 the hero */
.v5-hero { position:relative; overflow:hidden; background:linear-gradient(180deg, #040c1f 0%, #050b16 100%); }
.v5-wide, .v5-tall { position:absolute; inset:0; }
.v5-hero-still { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.v5-film { position:absolute; inset:0; }
.v5-veil-top { position:absolute; left:0; right:0; top:0; height:110px; background:linear-gradient(180deg, #040c1f 0%, rgba(4,12,31,.5) 42%, rgba(4,12,31,0) 100%); }
.v5-veil-bot { position:absolute; left:0; right:0; bottom:0; height:150px; background:linear-gradient(0deg, #050b16 0%, rgba(5,11,22,.55) 46%, rgba(5,11,22,0) 100%); }
.v5-tall .v5-veil-top { height:29%; background:linear-gradient(180deg, #040c1f 0%, rgba(4,12,31,.55) 55%, rgba(4,12,31,0) 100%); }
.v5-tall .v5-veil-bot { height:14%; background:linear-gradient(0deg, #050b16 0%, rgba(5,11,22,.5) 46%, rgba(5,11,22,0) 100%); }
.v5-skysvg { position:absolute; inset:0; width:100%; height:100%; }
#v5voice { position:absolute; inset:0; z-index:12; opacity:0; pointer-events:none; transition:opacity 1.1s ease; background:rgba(11,14,25,.93); }
.v5-heroline { position:absolute; left:var(--pg-gx); right:var(--pg-gx); bottom:var(--pg-gut); z-index:9; text-align:center; }   /* addendum 7: the title on the 1280 while the sky runs edge to edge */
.v5-hero-h1 { margin:0 0 16px; font-family:'Newsreader',serif; font-weight:500; font-size:var(--pg-d1); line-height:1.12; color:var(--night-ink); }
.v5-hero-lead { margin:0 auto; max-width:60ch; font-family:'Hanken Grotesk',sans-serif; font-size:var(--pg-lead); line-height:1.55; color:var(--night-ink-muted); }

/* §5.2 the four faces */
.v5-minds { overflow:hidden; position:relative; padding:var(--pg-pad1b) var(--pg-gut) var(--pg-pad1b-b); background:linear-gradient(180deg, #050b16 0%, #0b1020 8%, #171623 17%, #251b28 26%, #3a2a36 36%, #4b3140 45%, #5c3a40 54%, #6f4344 64%, #8a564e 75%, #a86e5b 88%, #c58a68 100%); }
.v5-minds-stack { position:relative; display:flex; flex-direction:column; align-items:center; gap:24px; }
#v5pourline { transition:opacity .7s ease; position:absolute; left:50%; top:var(--pg-pour-top); width:1px; height:var(--pg-pour-h); transform:translateX(-50%); pointer-events:none; background:linear-gradient(180deg, rgba(255,236,200,0) 0%, rgba(255,236,200,.16) 12%, rgba(255,236,200,.32) 26%, rgba(255,233,192,.40) 40%, rgba(252,224,168,.36) 52%, rgba(248,213,148,.30) 62%, rgba(244,205,136,.24) 71%, rgba(241,200,128,.18) 79%, rgba(240,198,124,.12) 86%, rgba(240,198,124,.075) 91%, rgba(240,198,124,.04) 95%, rgba(240,198,124,.018) 98%, rgba(240,198,124,.006) 100%); }
.v5-group { position:relative; display:flex; justify-content:center; }
.v5-glow { position:absolute; top:-65px; width:320px; height:320px; opacity:0; pointer-events:none; transition:opacity .7s ease; background:radial-gradient(circle closest-side, rgba(255,232,186,.32) 0%, rgba(255,230,181,.22) 28%, rgba(255,228,176,.135) 50%, rgba(255,226,172,.07) 68%, rgba(255,226,172,.03) 82%, rgba(255,226,172,.009) 93%, rgba(255,226,172,0) 100%); }
#v5g1 { left:-65px; }
#v5g2 { left:69px; }
#v5g3 { left:203px; }
#v5g4 { left:337px; }
#v5g5 { left:50%; margin-left:-160px; }
.v5-brim { position:relative; width:var(--pg-av); height:var(--pg-av); border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:box-shadow .7s ease; background:linear-gradient(160deg, rgba(255,246,235,.20) 0%, rgba(255,246,235,.08) 52%, rgba(255,246,235,.16) 100%); backdrop-filter:blur(11px) saturate(1.25); -webkit-backdrop-filter:blur(11px) saturate(1.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12); }
.v5-brim + .v5-brim { margin-left:var(--pg-lap); }
.v5-brim-glass { background:linear-gradient(152deg, rgba(255,246,235,.17) 0%, rgba(255,246,235,.06) 55%, rgba(255,246,235,.14) 100%); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.13); }
.v5-seat { width:var(--pg-seat); height:var(--pg-seat); }
.v5-face { position:relative; width:var(--pg-face); height:var(--pg-face); border-radius:999px; overflow:hidden; background:var(--day-sheet); }
.v5-talk { position:absolute; inset:-1px; border-radius:999px; opacity:0; pointer-events:none; }
.v5-talk svg { width:100%; height:100%; display:block; }
.v5-inf-face { position:absolute; width:var(--pg-face); height:var(--pg-face); border-radius:999px; object-fit:cover; opacity:0; filter:blur(4px); transform:scale(1.04); transition:opacity .9s ease, filter .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
#v5inf-mirror { position:absolute; width:var(--pg-face); height:var(--pg-face); border-radius:999px; overflow:hidden; opacity:0; transition:opacity 1.1s ease; pointer-events:none; mix-blend-mode:screen; isolation:isolate; }
.v5-mr-veil { position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(255,236,200,.16) 0%, rgba(255,232,190,.06) 45%, rgba(255,230,186,0) 72%); }
.v5-mr-a { position:absolute; left:18%; top:14%; width:58%; height:58%; border-radius:999px; background:radial-gradient(circle, rgba(255,246,226,.55) 0%, rgba(255,240,208,.26) 28%, rgba(255,236,196,0) 66%); filter:blur(6px); }
.v5-mr-b { position:absolute; left:40%; top:44%; width:46%; height:46%; border-radius:999px; background:radial-gradient(circle, rgba(255,232,196,.42) 0%, rgba(255,228,186,.18) 32%, rgba(255,226,180,0) 68%); filter:blur(7px); }
.v5-mr-c { position:absolute; left:8%; top:52%; width:38%; height:38%; border-radius:999px; background:radial-gradient(circle, rgba(255,240,214,.34) 0%, rgba(255,236,204,.12) 36%, rgba(255,232,196,0) 70%); filter:blur(8px); }
.v5-mr-s { position:absolute; inset:-30%; background:conic-gradient(from 0deg, rgba(255,246,230,0) 0deg, rgba(255,246,230,.14) 40deg, rgba(255,246,230,0) 80deg, rgba(255,246,230,0) 200deg, rgba(255,246,230,.08) 236deg, rgba(255,246,230,0) 270deg); filter:blur(10px); }
.v5-morestar { position:relative; width:64px; height:64px; display:inline-flex; }
#v5b5 .v5-morestar { flex:none; }
.v5-sp-halo { position:absolute; inset:-34px; border-radius:999px; background:radial-gradient(circle, rgba(255,233,188,.50) 0%, rgba(255,231,182,.40) 12%, rgba(255,229,178,.30) 24%, rgba(255,227,174,.215) 36%, rgba(255,226,172,.145) 48%, rgba(255,226,172,.092) 60%, rgba(255,226,172,.054) 71%, rgba(255,226,172,.028) 81%, rgba(255,226,172,.011) 90%, rgba(255,226,172,.003) 96%, rgba(255,226,172,0) 100%); }
/* ASTRA'S FADE (7 Sep addendum, ported 9 Sep): the fade lives on a plain wrapper, never on the element carrying the
   plus-lighter groups — a mask on that svg flattened her four lobes into a disc on WebKit, and no mask at all left the
   four r=495 circles clipped to a square tile. border-radius:50% + overflow:hidden is the belt: if a browser drops the
   mask she is a soft disc, never a square. ADDENDUM 3 (10 Sep night) — THE RULE: Astra's fade is v5aFade's curve and
   nothing else, translated into the wrapper's box (zero at 17% of the lobes' 1422-unit bbox = 77% of the 157-unit half
   box). The 9 Sep widening (full to 40%, zero at 100%) left her a sphere with a cross: the lobes are r=495 discs whose
   rims cross at the centre, and the star look depends on the fade hiding them. border-radius/overflow came off — they
   drew the disc's hard edge. Any future change is re-derived from the five stops, never tuned by eye. */
.v5-morestar > .v5-astra-fade { position:absolute; left:50%; top:50%; width:174px; height:174px; margin:-87px 0 0 -87px; display:block; pointer-events:none;
  -webkit-mask-image:radial-gradient(circle closest-side, #000 0%, #000 14.5%, rgba(0,0,0,.79) 30.6%, rgba(0,0,0,.34) 45.9%, rgba(0,0,0,.10) 61.8%, rgba(0,0,0,0) 77%); mask-image:radial-gradient(circle closest-side, #000 0%, #000 14.5%, rgba(0,0,0,.79) 30.6%, rgba(0,0,0,.34) 45.9%, rgba(0,0,0,.10) 61.8%, rgba(0,0,0,0) 77%); }
.v5-astra-fade > svg { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.v5-names { position:relative; width:var(--pg-grp); height:14px; }
.v5-face-name { position:absolute; transform:translateX(-50%); white-space:nowrap; font-size:12px; letter-spacing:var(--track-meta); text-transform:uppercase; color:rgba(236,231,219,.8); opacity:0; transition:opacity .55s ease, text-shadow .55s ease; }
#v5n1 { left:16.05%; }
#v5n2 { left:38.68%; }
#v5n3 { left:61.32%; }
#v5n4 { left:83.95%; }
.v5-face-name-inf { font-size:var(--pg-body2); line-height:14px; letter-spacing:normal; text-transform:none; color:rgba(236,231,219,.85); }
.v5-minds-line-wrap { position:relative; margin-top:var(--pg-pour-gap); }
.v5-pool { position:absolute; left:50%; top:50%; width:760px; height:280px; transform:translate(-50%,-50%); border-radius:999px; background:radial-gradient(50% 50% at 50% 50%, rgba(255,232,186,.28) 0%, rgba(255,229,178,.19) 24%, rgba(255,226,172,.108) 44%, rgba(255,226,172,.052) 62%, rgba(255,226,172,.020) 79%, rgba(255,226,172,.006) 91%, rgba(255,226,172,0) 100%); pointer-events:none; }
/* the world's line, twice (§1b and §3): the serif at the second display step, seated as a flex row so a spoken line lands word by word */
#v5mindsLine { position:relative; }
.v5-worldline { margin:0 auto; font-family:'Newsreader',serif; font-weight:500; font-size:var(--pg-d2); line-height:1.16; text-align:center; color:#f4e9de; transition:opacity .5s ease; max-width:30ch; min-height:calc(var(--pg-d2) * 1.16 * 2); display:flex; flex-wrap:wrap; justify-content:center; align-content:center; column-gap:.28em; }
#v5astraLine { margin-top:56px; }
/* the two lines' inline `transition:opacity .5s ease` outranked .v5-arrive.v5-arrived's .42s triple in the DC: their arrival fades opacity only */
#v5mindsLine, #v5astraLine { transition:opacity .5s ease; }

/* §2 · §4 · §5 the rows */
#adventures { overflow:hidden; padding:var(--pg-secpad) var(--pg-gutw); background:linear-gradient(180deg, #c58a68 0%, #eec9a6 16%, #f6e0c2 30%, #f4efe6 58%, #f4efe6 100%); }
.v5-rows { display:flex; flex-direction:column; gap:100px; }
.v5-scr { overflow:hidden; box-shadow:var(--shadow-s2, 0 26px 50px -26px rgba(29,33,41,.24)); }
/* the eight posters' inline style is `display:block` alone (patch 2b, 6 Sep): the still fills the frame exactly */
.v5-scr.v5-live > img { display:block; }
.v5-words { flex:1; display:flex; flex-direction:column; gap:13px; }
.v5-h2 { margin:0; font-family:'Newsreader',serif; font-weight:500; font-size:var(--pg-d3); line-height:1.24; }
.v5-body { margin:0; font-family:'Hanken Grotesk',sans-serif; font-size:var(--pg-body); line-height:1.5; color:#4a4438; }
.v5-body2 { margin:0; font-family:'Hanken Grotesk',sans-serif; font-size:var(--pg-body2); line-height:1.5; color:#4a4438; }
/* the words in a row keep margin 0 at every width: the DC's inline margin:0 outranked the ≤1000 margin-inline:auto
   (the column's align-items:center is what centres them), and the only other margin rule, 761–1000, sets the same 0 */
.v5-row > .v5-words > .v5-h2, .v5-row > .v5-words > .v5-body, .v5-row > .v5-words > .v5-body2, .v5-row > .v5-words > .v5-cred-night { margin:0 !important; }
.v5-book { overflow:hidden; position:relative; padding:var(--pg-pad4) var(--pg-gut); background:linear-gradient(180deg, #f4efe6 0%, #f6e6cc 100%); }
.v5-create { overflow:hidden; position:relative; padding:var(--pg-pad5) var(--pg-gut) var(--pg-pad5-b); background:linear-gradient(180deg, #f6e6cc 0%, #efd3a8 55%, #e8b98a 100%); }
.v5-row.v5-pairrow { gap:34px; }
.v5-pairwords { flex:0 0 400px; min-width:0; gap:14px; }
.v5-swipe { flex:1; min-width:0; display:flex; gap:24px; justify-content:center; align-items:center; }
.v5-swipe-item { display:flex; flex-direction:column; align-items:center; gap:14px; }
.v5-pairframe { width:100%; max-width:330px; }

/* §5.3 Astra and the path */
#deck { position:relative; overflow:hidden; padding:var(--pg-deckpad) var(--pg-gut) 76px; background:#f4efe6; }
.v5-plate { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.v5-trail { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; }
#v5path9 { mix-blend-mode:screen; filter:blur(12px); will-change:opacity; }    /* 6 Sep night, B: the glow */
#v5path9c { filter:blur(3px); will-change:opacity; }    /* 6 Sep night, B: the core; the 13 Sep export blends only the glow, not the core */
#v5seam { position:absolute; inset:0; background:linear-gradient(180deg, #f4efe6 0%, rgba(244,239,230,.55) 6%, rgba(244,239,230,0) 13%, rgba(244,239,230,0) 87%, rgba(244,239,230,.6) 94%, #f4efe6 100%); }
#v5dim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,14,25,0) 22%, rgba(11,14,25,.44) 28%, rgba(11,14,25,.44) 44%, rgba(11,14,25,.5) 50%, rgba(11,14,25,.5) 78%, rgba(11,14,25,.24) 82%, rgba(11,14,25,0) 85%); }
.v5-deck-stack { position:relative; display:flex; flex-direction:column; align-items:center; }
.v5-row.v5-deckrow { position:relative; margin-top:48px; width:100%; box-sizing:border-box; padding:0 64px; gap:96px; }
.v5-frame.v5-deckframe { flex-basis:var(--pg-frame3); max-width:var(--pg-frame3); }
.v5-deckwords { gap:20px; max-width:52ch; }
.v5-body-night { max-width:52ch; color:#ece7db; text-shadow:0 1px 18px rgba(11,14,25,.55); }
#deck .v5-deckwords > .v5-body-night { max-width:52ch; }   /* the DC's inline 52ch outranked the ≤1000 first-child 26ch; 761–1000's none !important still wins, as there */
.v5-cred-night { margin:0; font-family:'Hanken Grotesk',sans-serif; font-size:var(--pg-cred); line-height:1.6; color:rgba(236,231,219,.86); text-shadow:0 1px 18px rgba(11,14,25,.55); }

/* §6 the Mirror */
.v5-mirror { position:relative; height:420px; overflow:hidden; background:linear-gradient(180deg, #e8b98a 0%, #c98d74 26%, #6b5064 55%, #2c2740 78%, #1d1c30 100%); }
.v5-mirror-sky { position:absolute; inset:0; width:100%; height:100%; }
.v5-mirror-line { position:absolute; left:var(--pg-gut); right:var(--pg-gut); top:50%; transform:translateY(-50%); margin:0; text-align:center; font-family:'Newsreader',serif; font-weight:500; font-size:var(--pg-d2); line-height:1.16; color:var(--night-ink); }

/* §7 the lockup */
#join { position:relative; min-height:100vh; min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:var(--pg-pad7) var(--pg-gut) 0; background:linear-gradient(180deg, #1d1c30 0%, #0b0e19 80px, #0b0e19 100%); text-align:center; overflow:hidden; user-select:none; -webkit-user-select:none; }
#v5mkStars { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.v5-foot-sp1 { flex:1 1 0; min-height:24px; }
#v5mkFoot { width:var(--pg-mark); height:var(--pg-mark); display:block; margin:0 auto; overflow:visible; touch-action:manipulation; }   /* addendum 5: never wait for a double-tap zoom on the mark */
#v5motto { margin:-13px 0 10px; display:grid; justify-items:center; font-family:var(--font-inscription); font-size:var(--pg-d1); line-height:1.1; letter-spacing:var(--track-kicker); text-transform:uppercase; color:var(--night-ink); transition:opacity .5s ease; user-select:none; will-change:opacity; }   /* addendum 8: line-height 1.1 keeps the ink inside the box; the −13 top margin keeps the seat */
#v5motto > span { grid-area:1/1; transition:opacity .05s linear; }
#v5motto > span[aria-hidden] { opacity:0; }
.v5-foot-gap { height:56px; flex:none; }
.v5-foot-sp2 { flex:1 1 0; min-height:40px; }
#v5footline { position:relative; z-index:1; width:100%; box-sizing:border-box; padding:22px 0 30px; display:flex; gap:18px 26px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.v5-foot-links { display:flex; gap:26px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--night-ink-muted); }
#v5footline a { color:var(--night-ink-muted); transition:color .3s ease; }
#v5footline a:hover { color:var(--night-ink); }
#v5footline a.v5-foot-mail { text-transform:none; letter-spacing:.02em; }
.v5-foot-copy { font-size:12px; letter-spacing:.06em; color:var(--night-ink-muted); font-feature-settings:'tnum'; }

/* §10 the research pages */
.rs-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rs-scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(4,12,31,.35) 0%, rgba(4,12,31,0) 22%, rgba(60,40,20,0) 40%, rgba(60,40,20,.3) 56%, rgba(60,40,20,.62) 78%, #f4efe6 100%); }
.rs-hero-seat { position:absolute; left:0; right:0; bottom:64px; display:flex; justify-content:center; padding:0 var(--pg-gut); pointer-events:none; }
.rs-hero-col { display:flex; flex-direction:column; gap:18px; color:#f4e9de; }
.rs-kicker { margin:0; font-size:12px; letter-spacing:var(--track-kicker); text-transform:uppercase; color:rgba(244,233,222,.72); text-shadow:0 1px 14px rgba(20,10,0,.55), 0 0 2px rgba(20,10,0,.6); }
.rs-h1 { margin:0; font-family:'Newsreader',serif; font-weight:500; font-size:var(--pg-d1); line-height:1.06; text-wrap:balance; text-shadow:0 2px 24px rgba(20,10,0,.35); }
.rs-sub { margin:0; font-size:var(--pg-lead); line-height:1.4; color:rgba(244,233,222,.88); text-wrap:pretty; }
.rs-paper { background:#f4efe6; padding:8px var(--pg-gut) 0; display:flex; flex-direction:column; align-items:center; }
.rs-byline { display:flex; gap:18px; align-items:center; font-size:15px; color:#4a4438; font-feature-settings:'tnum'; }
.rs-byline-name { color:#241f16; }
.rs-byline-dot { opacity:.4; }
.rs-paper .rs-body { padding-top:56px; }
.rs-dusk { margin-top:72px; background:linear-gradient(180deg, #f4efe6 0%, #f6e6cc 30%, #e8b98a 100%); padding:56px var(--pg-gut) 96px; display:flex; justify-content:center; }
.rs-dusk .rs-h2:first-child { margin-top:0; }
/* References + Next on night: the ramp is the Mirror's, and it holds #1d1c30 so the lockup begins on the colour it always begins on */
.rs-refs { background:linear-gradient(180deg, #e8b98a 0px, #c98d74 70px, #6b5064 160px, #2c2740 250px, #1d1c30 320px, #1d1c30 100%); padding:300px var(--pg-gut) 96px; display:flex; flex-direction:column; align-items:center; gap:72px; color:#ece7db; }
.rs-refs-block { display:flex; flex-direction:column; gap:22px; }
.rs-label { margin:0; font-size:12px; letter-spacing:var(--track-kicker); text-transform:uppercase; color:rgba(236,231,219,.55); }
.rs-refs ol { margin:0; padding:0 0 0 28px; display:flex; flex-direction:column; gap:12px; font-size:13px; line-height:1.5; color:rgba(236,231,219,.72); font-feature-settings:'tnum'; }
.rs-next-block { display:flex; flex-direction:column; gap:16px; padding-top:48px; border-top:1px solid rgba(236,231,219,.14); }
.rs-refs a.rs-next, .rs-refs a.rs-next:hover { display:grid; grid-template-columns:minmax(120px,200px) 1fr; gap:22px; align-items:center; text-decoration:none; color:inherit; }
.rs-next-thumb { display:block; aspect-ratio:16/10; border-radius:16px; overflow:hidden; }
.rs-next-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.rs-next-text { display:flex; flex-direction:column; gap:6px; min-width:0; }
.rs-next-k { font-size:12px; letter-spacing:var(--track-kicker); text-transform:uppercase; color:rgba(236,231,219,.5); }
.rs-next-t { font-family:'Newsreader',serif; font-weight:500; font-size:20.5px; line-height:1.22; color:rgba(236,231,219,.94); text-wrap:pretty; }
.rs-next-m { font-size:13px; color:rgba(236,231,219,.55); font-feature-settings:'tnum'; }

/* ── 404 (12 Sep): the research hero's seat with no painting; a night gradient so the header reads as it does over a paper ── */
.nf-hero { aspect-ratio:auto; min-height:min(720px, 72vh); background:linear-gradient(180deg, #050b16 0%, #0b1020 60%, #1d1c30 100%); }
.nf-hero .rs-hero-seat { pointer-events:auto; }
.nf-home { color:#f4e9de; text-decoration:underline; text-underline-offset:3px; }


/* ── THE WAITLIST BAR (17 Sep, SPEC §5.7): one bar, 56 tall, radius 16, night glass; input 14px; pill button 48 inside.
   The glass recipe is the header sheet's. Resting shadow is the one _wireJoin restores to; its rings replace it for a beat. ── */
.v5-join { position:relative; z-index:1; width:min(100%, 440px); height:56px; box-sizing:border-box; margin:0; padding:4px 4px 4px 18px; display:flex; align-items:center; gap:10px; border-radius:16px;
  background:linear-gradient(180deg, rgba(4,12,31,.96) 0%, rgba(6,12,28,.8) 100%); backdrop-filter:blur(34px) saturate(1.3); -webkit-backdrop-filter:blur(34px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,246,232,.07), 0 24px 48px -30px rgba(0,0,0,.6); transition:box-shadow .3s ease; }
.v5-join-lbl { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.v5-join-in { flex:1 1 auto; min-width:0; height:48px; margin:0; padding:0; border:0; outline:0; background:transparent; font:inherit; font-family:'Hanken Grotesk',sans-serif; font-size:14px; line-height:1; letter-spacing:.01em; color:var(--night-ink); -webkit-appearance:none; appearance:none; }
.v5-join-in::placeholder { color:var(--night-ink-muted); opacity:1; }
.v5-join-in:disabled { color:var(--night-ink); -webkit-text-fill-color:var(--night-ink); opacity:1; }
.v5-join-in:disabled::placeholder { color:var(--night-ink); }
.v5-join-btn { flex:none; height:48px; margin:0; padding:0 20px; border:0; border-radius:12px; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; font-size:13px; font-weight:600; letter-spacing:.02em; line-height:1; color:#241f16; background:#f4efe6; transition:background-color .3s ease, color .3s ease, transform .14s ease; }
.v5-join-btn:hover { background:#fff6e8; }
.v5-join-btn:active { transform:scale(.98); }
.v5-join:focus-within { box-shadow:inset 0 0 0 1.5px rgba(255,236,200,.35), 0 24px 48px -30px rgba(0,0,0,.6); }
@media (max-width:700px) {
  .v5-join { width:100%; padding-left:14px; }
  .v5-join-btn { padding:0 14px; }
}

/* the header pill (17 Sep): night glass carries a light pill; .v5-hd-lit inverts it to dark (rule above, from the DC). Hidden on the phone. */
.v5-hd-pill { display:inline-flex; align-items:center; height:30px; padding:0 14px; border-radius:16px; background:#f4efe6; color:#241f16; font-size:12px; font-weight:600; letter-spacing:.02em; line-height:1; white-space:nowrap; text-decoration:none; }
.v5-hd-pill:hover { background:#fff6e8; }
@media (max-width:700px) { .v5-hd-pill { display:none; } }
/* the bar dims for the pop (Arthur, 17 Sep): a third while the sky is full, still tappable; full while someone is on it
   or typing (.v5-join-awake, set by _wireJoin, dropped 5s after the last touch); full again over .9s when the stars settle */
.v5-join { transition:box-shadow .3s ease, opacity .9s ease; }
#join.v5-popped .v5-join { opacity:.35; transition:box-shadow .3s ease, opacity .5s ease; }
#join.v5-popped .v5-join.v5-join-awake { opacity:1; transition:box-shadow .3s ease, opacity .25s ease; }
/* #join turns text selection off for the mark; the field needs it back so iOS places a caret */
.v5-join-in { -webkit-user-select:text; user-select:text; }

/* the waitlist in the phone sheet (17 Sep): a foot row under the papers, the pill at a 44 tap height; .v5-hd-lit inverts it */
.v5-hd-sheet-foot { margin-top:22px; padding-top:18px; border-top:1px solid rgba(236,231,219,.1); display:flex; gap:18px; }   /* gap as the research DC gives every sheet child; one child, so it draws nothing */
.v5-hd-lit .v5-hd-sheet-foot { border-color:rgba(36,31,22,.1); }
.v5-hd-sheet-pill { height:44px; padding:0 22px; font-size:14px; }
@media (max-width:700px) { .v5-hd-sheet-pill { display:inline-flex; } }

/* 24 Sep, 2: iOS never draws its own player over a film; the film is invisible until it plays and the still stands under it */
video::-webkit-media-controls, video::-webkit-media-controls-panel, video::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-start-playback-button { display:none !important; -webkit-appearance:none; opacity:0 !important; }