/* skin.css — vegaorin (Vega & Orin). Site 8: the Saga. lab/docs/SITE8-PLAN.md §4.

   The night told as an epic in an original universe: a deep blue-black night, a warm parchment white, one luminous
   amber (Orin's blade) and an ice white (Vega's). The four loud axes: navigation the command line · architecture
   five pages, the weight in the Timeline · hero two light swords over the real sky (engine/sky.js) · grid the
   instrument frame (hard-edged panels with corner ticks, the scroll ruler).
   ⚠ An original universe only (DECISIONS.md → Intellectual property): the light swords are the studio's own: no
   franchise word, hilt, sound, font, crawl, streaking stars or blade colour code. Vega's blade is ice, Orin's amber,
   the guests' the colours of real stars.
   Type (the user: "decide for me"): Cinzel for the names and titles (display capitals), EB Garamond for reading,
   JetBrains Mono for the clock, the prompt, the labels. All OFL, self-hosted in demo/assets/type/.
   Motion: slow and grand, one ambient surface a screen (the sky). html[data-calm] (the motion switch) and reduced
   motion still everything that moves by itself and keep the light.

   §1 type and tokens · §2 base · §3 frame, type, buttons · §4 the command bar · §5 the design-study tab · §6 the
   prompt · §7 the ruler · §8 the arrival · §9 the cover · §10 the Brief's sections · §11 the arch · §12 inner pages
   · §13 the Log · §14 the Timeline · §15 the Briefing · §16 the Manifest · §17 the foot · §18 motion */

/* §1 · type and tokens */
@font-face { font-family: "Cinzel"; font-weight: 400; font-display: swap; src: url("../assets/type/cinzel-400.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-display: swap; src: url("../assets/type/eb-garamond-400.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 600; font-display: swap; src: url("../assets/type/eb-garamond-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../assets/type/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("../assets/type/jetbrains-mono-500.woff2") format("woff2"); }

[data-skin="vegaorin"] {
  --space: #0a0c17;          /* the night: a deep blue-black, never pure black */
  --space-2: #12152a;        /* a panel */
  --space-3: #1b1f3a;
  --star: #efe9dc;           /* parchment by starlight: text */
  --star-2: #b3ad9f;         /* quieter text: 8.4:1 on --space */
  --line: rgb(214 206 188 / .16);
  --line-hi: rgb(214 206 188 / .34);
  --amber: #f0a33a;          /* Orin's blade, the one luminous accent: 8.9:1 on --space */
  --amber-soft: rgb(240 163 58 / .14);
  --ice: #dfe9ff;            /* Vega's blade */

  --bg: var(--space);
  --bg-raised: var(--space-2);
  --ink: var(--star);
  --muted: var(--star-2);
  --rule: var(--line);
  --accent: var(--amber);
  --accent-soft: var(--amber-soft);
  --field: #0e1122;

  --display: "Cinzel", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --ui: var(--mono);

  --step--1: .9375rem;
  --step-0: 1.1875rem;
  --step-1: 1.375rem;
  --step-2: clamp(1.45rem, 1.25rem + .9vw, 1.95rem);
  --step-3: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --step-4: clamp(2.4rem, 1.6rem + 3.8vw, 4.6rem);
  --step-5: clamp(2.6rem, 1rem + 7vw, 6.5rem);

  --radius: 0;
  --rule-w: 1px;
  --gap: 1rem;
  --margin: clamp(1rem, 5vw, 3rem);
  --module: clamp(3.5rem, 8vw, 6.5rem);
  --bar-h: 52px;
  --motion-fast: 200ms;
  --motion-slow: 900ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --a-rise-y: 18px;

  /* the sky (engine/sky.js) */
  --sky-star: #fff8ee;
  --sky-warm: #ffcf9a;
  --sky-cool: #cfe0ff;
  --sky-label: rgb(239 233 220 / .5);
  --sky-label-font: 500 11px "JetBrains Mono", ui-monospace, monospace;
  --sky-ground: #05060c;
  --sky-meteor: #fff3dc;
  --sky-moon: #efe9dc;
  --sky-cloud: #262a40;
  --sky-ridge-h: 3.2;
}
@media (max-width: 47.99em) { [data-skin="vegaorin"] { --bar-h: 93px; --step-0: 1.125rem; } }

/* §2 · base. Both html and body clip sideways (DECISIONS.md, the iPhone stand-in). */
html[data-skin="vegaorin"] { overflow-x: clip; background: var(--space); color-scheme: dark; scroll-padding-top: calc(var(--bar-h) + 1rem); }
[data-skin="vegaorin"] body {
  background: var(--space); color: var(--ink);
  font: var(--step-0)/1.55 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
[data-skin="vegaorin"] a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .24em; text-decoration-color: var(--line-hi); }
[data-skin="vegaorin"] a:hover { color: var(--amber); text-decoration-color: currentColor; }
/* the placeholder ground is for photographs only: the .webp ornaments are transparent, and a ground behind them
   veiled the cover's whole sky at 72% (the branches layer) until 2026-11-03 */
[data-skin="vegaorin"] main img:not([src$=".webp"]) { background: var(--space-3); }
[data-skin="vegaorin"] :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.wsd-skip { background: var(--amber); color: var(--space); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
.kicker, .eyebrow, .label {
  font: 500 .78rem/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
}
kbd { font: inherit; }
.hint { font-size: var(--step--1); color: var(--muted); }

/* §3 · frame, type, buttons */
.wrap { width: min(100% - 2 * var(--margin), 70rem); margin-inline: auto; }
.section { padding-block: var(--module); position: relative; }
/* two plain sections in a row share their gap rather than doubling it (V4, 2026-11-03) */
.section:not(.arch-band) + .section:not(.arch-band) { padding-top: calc(var(--module) * .55); }
.band-title {
  font: 400 var(--step-3)/1.12 var(--display); letter-spacing: .06em; text-transform: uppercase;
  text-wrap: balance; margin-top: .5rem;
}
.band-head { margin-bottom: 1.6rem; }
.links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.1rem; align-items: center; }
.more { font: .9rem/1.3 var(--mono); letter-spacing: .04em; display: inline-flex; align-items: center; min-height: 44px; }
.more::after { content: "→"; margin-left: .5em; color: var(--amber); }
.btn, .tool {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.4rem;
  border: 1px solid var(--line-hi); background: transparent; color: var(--ink); cursor: pointer;
  font: 500 .82rem/1.15 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.tool { min-height: 44px; padding: 0 1rem; font-size: .75rem; background: rgb(10 12 23 / .55); }
[data-skin="vegaorin"] a.btn { text-decoration: none; }
.btn:hover, .tool:hover { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 18px rgb(240 163 58 / .18); }
.tool[aria-pressed="true"] { border-color: var(--ice); color: var(--ice); }
.btn--signal { border-color: var(--amber) !important; color: var(--amber); background: var(--amber-soft); }
.btn--signal:hover { background: var(--amber) !important; color: var(--space) !important; }
/* M3 · a panel: hard edges, a hairline, corner ticks drawn in amber; its edges draw before its content */
.panel {
  position: relative; background: linear-gradient(var(--space-2), var(--space)); border: 1px solid var(--line-hi);
  padding: clamp(1.25rem, 4vw, 2rem);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 10px; height: 10px; border: 0 solid var(--amber); pointer-events: none; }
.panel::before { left: -1px; top: -1px; border-top-width: 1px; border-left-width: 1px; }
.panel::after { right: -1px; bottom: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* §4 · the command bar: names, five numbered tabs, the design-study tab, the prompt. One 52px row at a laptop;
   at a phone two rows (the study tab and Ask, then the five tabs, number over name). */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "mark nav study ask";
  align-items: stretch; min-height: var(--bar-h);
  padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right));
  /* no backdrop blur (M4, 2026-11-03): over a sky redrawn every frame it re-blurred the screen each frame */
  background: rgb(10 12 23 / .94); border-bottom: 1px solid var(--line-hi);
}
.bar-mark {
  grid-area: mark; display: none; align-items: center; padding: 0 1.6rem;
  font: 400 .9rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
[data-skin="vegaorin"] .bar-mark { text-decoration: none; }
.bar-nav { grid-area: nav; min-width: 0; }
.tabs { display: flex; height: 100%; }
.tabs li { display: flex; }
.tab {
  position: relative; display: flex; align-items: center; gap: .55rem; padding: 0 1.05rem; min-height: 44px;
  border-left: 1px solid var(--line); color: var(--muted); font: .95rem/1 var(--mono); letter-spacing: .04em; white-space: nowrap;
}
.tabs li:last-child .tab { border-right: 1px solid var(--line); }
[data-skin="vegaorin"] .tab { text-decoration: none; }
.tab kbd { font: .75rem/1 var(--mono); padding: .2rem .35rem; border: 1px solid var(--line-hi); color: var(--muted); }
[data-skin="vegaorin"] .tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); background: var(--amber-soft); }
.tab[aria-current="page"] kbd { background: var(--amber); border-color: var(--amber); color: var(--space); }
/* M4 · the current tab's underline is a lit blade */
.tab[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #fff3dc;
  box-shadow: 0 0 4px 1px var(--amber), 0 0 12px 2px rgb(240 163 58 / .5);
}
.ask {
  grid-area: ask; align-self: center; margin: 0 1rem 0 .4rem; min-height: 44px; padding: 0 .7rem;
  border: 1px solid var(--line-hi); background: none; color: var(--ink); cursor: pointer;
  font: .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.ask kbd { color: var(--amber); margin-right: .25rem; }
.ask:hover, .ask[aria-expanded="true"] { border-color: var(--amber); }
@media (min-width: 64em) { .bar-mark { display: flex; } }
@media (max-width: 47.99em) {
  .bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "study ask" "nav nav"; grid-template-rows: 44px 48px; }
  .tabs { border-top: 1px solid var(--line); }
  .tabs li { flex: 1 1 0; min-width: 0; }
  .tab { flex: 1; flex-direction: column; justify-content: center; gap: .3rem; padding: 0; font-size: .75rem; }
  .tabs li:first-child .tab { border-left: 0; }
  .tabs li:last-child .tab { border-right: 0; }
  .tab kbd { font-size: .75rem; padding: .1rem .3rem; }
  .ask { margin: 0 .5rem 0 0; min-height: 44px; font-size: .75rem; }
}

/* §5 · the design-study tab: in the bar, always readable; its panel drops below the bar */
.study { grid-area: study; position: relative; display: flex; align-items: center; }
.study-tab, .demo-btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .75rem;
  background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer;
  font: .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.study-tab:hover, .study-tab[aria-expanded="true"] { color: var(--ink); border-color: var(--line-hi); }
.study-dot { width: 7px; height: 7px; background: var(--amber); flex: none; }
.study-long { display: none; }
@media (min-width: 80em) { .study-long { display: inline; } }
.study-panel {
  position: absolute; top: calc(100% + 1px); right: 0; z-index: 2; width: min(25rem, 100vw - 2rem);
  max-height: calc(100svh - var(--bar-h) - 1rem); overflow-y: auto;
  background: var(--space-2); border: 1px solid var(--line-hi); padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 24px 50px rgb(0 0 0 / .5);
}
.study-panel p { font: var(--step--1)/1.5 var(--body); color: var(--muted); }
.study-panel p + p, .study-panel p + .study-ctl, .study-ctl + .study-music, .study-music + p { margin-top: .7rem; }
.study-panel b { color: var(--ink); font-weight: 600; }
.study-ctl { display: flex; flex-wrap: wrap; gap: .5rem; }
.demo-btn { border-color: var(--line-hi); color: var(--ink); }
[data-skin="vegaorin"] a.demo-btn { text-decoration: none; }
.demo-btn:hover { border-color: var(--amber); }
.demo-btn[aria-pressed="true"] { border-color: var(--ice); color: var(--ice); }
.study-music-label { margin-top: .4rem; font-size: .85rem !important; }
@media (max-width: 47.99em) {
  .study-tab { min-height: 44px; padding: 0 .5rem 0 .75rem; font-size: .75rem; }
  /* below the whole bar, so the five tabs stay in reach while it is open */
  .study-panel { position: fixed; top: var(--bar-h); left: .75rem; right: auto; }
}

/* §6 · the prompt: one line under the bar; its answers in prompt-msg */
.prompt {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
  padding: 1rem max(1.6rem, env(safe-area-inset-right)) 1.1rem max(1.6rem, env(safe-area-inset-left));
  background: var(--space-2); border-bottom: 1px solid var(--amber); box-shadow: 0 24px 50px rgb(0 0 0 / .5);
}
.prompt-line { display: flex; align-items: center; gap: .6rem; max-width: 46rem; }
.prompt-line label { color: var(--amber); font: 1.25rem/1 var(--mono); }
.prompt-line input {
  flex: 1; min-width: 0; min-height: 44px; background: var(--field); border: 1px solid var(--line-hi);
  color: var(--ink); caret-color: var(--amber); font: 1.05rem/1.2 var(--mono); padding: 0 .75rem;
}
.prompt-line input::placeholder { color: var(--muted); }
.prompt-go {
  min-height: 44px; padding: 0 1rem; background: var(--amber-soft); border: 1px solid var(--amber); color: var(--amber);
  font: .8rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.prompt-hints { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.prompt-hints a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--line-hi);
  font: .78rem/1 var(--mono); color: var(--muted);
}
[data-skin="vegaorin"] .prompt-hints a { text-decoration: none; }
.prompt-hints b { color: var(--ink); font-weight: 400; margin-right: .4em; }
.prompt-msg { margin-top: .7rem; max-width: 46rem; font: .9rem/1.5 var(--mono); color: var(--ink); }
.prompt-msg:empty { display: none; }
.prompt-msg a { display: inline-flex; align-items: center; min-height: 44px; color: var(--amber); }
@media (max-width: 47.99em) { .prompt { padding: .8rem 1rem 1rem; } }

/* §7 · M7 the ruler: ticks down the left edge that move with the page, an amber mark for where you are
   (a scroll-driven animation; where the browser has none, a still ruler with no mark) */
.ruler {
  position: fixed; left: max(0px, env(safe-area-inset-left)); top: var(--bar-h); bottom: 0; width: 9px; z-index: 30;
  pointer-events: none; opacity: .7;
  background: repeating-linear-gradient(to bottom, var(--line-hi) 0 1px, transparent 1px 12px),
              repeating-linear-gradient(to bottom, rgb(240 163 58 / .45) 0 1px, transparent 1px 60px);
  background-size: 5px 100%, 9px 100%; background-repeat: repeat-y;
}
.ruler-mark { position: absolute; left: 0; top: 0; width: 9px; height: 2px; background: var(--amber); box-shadow: 0 0 6px var(--amber); display: none; }
@media (max-width: 47.99em) { .ruler { width: 6px; opacity: .5; } }
@supports (animation-timeline: scroll()) {
  .ruler { animation: vo-ruler linear both; animation-timeline: scroll(root); }
  .ruler-mark { display: block; animation: vo-mark linear both; animation-timeline: scroll(root); }
}
@keyframes vo-ruler { from { background-position: 0 0, 0 0; } to { background-position: 0 -240px, 0 -240px; } }
@keyframes vo-mark { from { top: 0; } to { top: calc(100% - 2px); } }

/* §8 · the arrival: the dome opens onto Ignition (engine: atelier.js → the ignition route). Stages on the stage:
   dark → slit → hilts → vega → orin → cross → bloom → lit (Enter). Every beat in ms. */
.ign {
  position: fixed; inset: 0; z-index: 80; overflow: hidden; display: grid; place-items: center; text-align: center;
  background: #04050a; color: var(--star);
}
.ign[hidden] { display: none; }
.ign-stage {
  position: absolute; inset: 0;
  --a-ign-dark: 300; --a-ign-slit: 1800; --a-ign-hilts: 350; --a-ign-vega: 550; --a-ign-orin: 550;
  --a-ign-cross: 700; --a-ign-bloom: 600;
}
/* the band of stars the slit opens on, then the sky pouring over everything */
.ign-band {
  position: absolute; inset: 0; opacity: 0;
  /* the real sky (sky.js) over the night's own gradient; it was ten tiled star patterns, which showed their grid (D4) */
  background: radial-gradient(120% 80% at 50% 20%, #141a36, #04050a 70%);
  --sky-az: 25; --sky-alt: 62; --sky-fov: 140; --sky-ridge-h: 0;
  clip-path: inset(0 47% 0 47%);
  transition: opacity 600ms ease, clip-path 1100ms cubic-bezier(.6, 0, .2, 1) 500ms;
}
.ign-band canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ign-shutter {
  position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(90deg, #0c0e18, #171a28 60%, #0c0e18);
  transition: transform 1500ms cubic-bezier(.65, 0, .25, 1) 250ms;
}
.ign-shutter--l { left: 0; box-shadow: inset -2px 0 0 rgb(214 206 188 / .1); }
.ign-shutter--r { right: 0; box-shadow: inset 2px 0 0 rgb(214 206 188 / .1); }
/* keyframes, not transitions (2026-11-03): the overlay is shown and staged in the same moment, and a transition does
   not run from a hidden element, so the shutters and the slit had jumped straight open */
.ign-stage:not([data-stage="dark"]) .ign-band { animation: vo-slit 1600ms cubic-bezier(.6, 0, .2, 1) both; }
.ign-stage:not([data-stage="dark"]) .ign-shutter--l { animation: vo-shut-l 1500ms cubic-bezier(.65, 0, .25, 1) 250ms both; }
.ign-stage:not([data-stage="dark"]) .ign-shutter--r { animation: vo-shut-r 1500ms cubic-bezier(.65, 0, .25, 1) 250ms both; }
@keyframes vo-slit { 0% { opacity: 0; clip-path: inset(0 47% 0 47%); } 35% { opacity: 1; clip-path: inset(0 47% 0 47%); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes vo-shut-l { from { transform: none; } to { transform: translateX(-101%); } }
@keyframes vo-shut-r { from { transform: none; } to { transform: translateX(101%); } }
/* two plain hilts, then a blade each, then they swing up and cross mid-blade */
.ign-blades { position: absolute; left: 50%; bottom: 18%; width: 0; height: min(44vh, 56vw); }
.iblade { position: absolute; bottom: 0; width: 10px; height: 100%; margin-left: -5px; transform-origin: 50% 100%; opacity: 0; transition: opacity 300ms ease, transform 700ms cubic-bezier(.3, .9, .25, 1); }
.iblade--vega { left: calc(-1 * min(16vw, 13vh)); transform: rotate(-58deg); --glow: 223 233 255; }
.iblade--orin { left: min(16vw, 13vh); transform: rotate(58deg); --glow: 240 163 58; }
.iblade .hilt, .blade .hilt {
  position: absolute; left: 0; bottom: 0; width: 10px; height: 16%;
  background: linear-gradient(90deg, #2a2d38, #6a6f7d 45%, #23252e); border-top: 2px solid rgb(var(--glow));
}
.iblade .beam, .blade .beam {
  position: absolute; left: 2px; bottom: 16%; width: 6px; height: 84%; border-radius: 3px 3px 1px 1px;
  background: #fff8ee; transform-origin: 50% 100%; transform: scaleY(0);
  box-shadow: 0 0 4px 1px rgb(var(--glow)), 0 0 14px 4px rgb(var(--glow) / .75), 0 0 42px 10px rgb(var(--glow) / .35);
  transition: transform 520ms cubic-bezier(.3, .9, .25, 1);
}
.ign-stage:is([data-stage="hilts"], [data-stage="vega"], [data-stage="orin"], [data-stage="cross"], [data-stage="bloom"], [data-stage="lit"]) .iblade { opacity: 1; }
.ign-stage:is([data-stage="vega"], [data-stage="orin"], [data-stage="cross"], [data-stage="bloom"], [data-stage="lit"]) .iblade--vega .beam,
.ign-stage:is([data-stage="orin"], [data-stage="cross"], [data-stage="bloom"], [data-stage="lit"]) .iblade--orin .beam { transform: scaleY(1); }
/* crossed: each blade leans in by the angle that meets the other at 60% of its length */
.ign-stage:is([data-stage="cross"], [data-stage="bloom"], [data-stage="lit"]) .iblade--vega { transform: rotate(28deg); }
.ign-stage:is([data-stage="cross"], [data-stage="bloom"], [data-stage="lit"]) .iblade--orin { transform: rotate(-28deg); }
.ign-bloom {
  position: absolute; left: -60px; bottom: calc(min(16vw, 13vh) / .5317 - 60px); width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 248 238 / .9), rgb(240 163 58 / .3) 40%, transparent 70%);
  opacity: 0; transform: scale(.3); transition: opacity 600ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1);
}
.ign-stage:is([data-stage="bloom"], [data-stage="lit"]) .ign-bloom { opacity: 1; transform: scale(2.4); }
.ign-stage[data-stage="lit"] .ign-bloom { opacity: .5; }
.ign-words { position: absolute; left: 0; right: 0; top: 25%; transform: translateY(-50%); padding: 0 1rem; opacity: 0; transition: opacity 900ms ease; }
.ign-stage:is([data-stage="bloom"], [data-stage="lit"]) .ign-words { opacity: 1; }
.ign-names {
  font: 400 clamp(2.3rem, 1rem + 7vw, 6rem)/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 0 30px rgb(240 163 58 / .45);
}
.ign-names .amp { color: var(--amber); letter-spacing: 0; }
.ign-sub { margin-top: .9rem; font: .78rem/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--star-2); }
.ign-enter {
  margin-top: 2rem; min-height: 52px; min-width: 9rem; padding: 0 2rem; cursor: pointer;
  background: var(--amber-soft); border: 1px solid var(--amber); color: var(--amber);
  font: 500 .9rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase;
}
.ign-enter:hover { background: var(--amber); color: var(--space); }
.ign-skip {
  position: absolute; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 2;
  min-height: 44px; padding: 0 1rem; background: none; border: 1px solid rgb(214 206 188 / .3); color: var(--star-2); cursor: pointer;
  font: .75rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.ign[data-leaving] { animation: vo-ign-out 800ms cubic-bezier(.4, 0, .2, 1) both; pointer-events: none; }
@keyframes vo-ign-out { to { opacity: 0; } }

/* §9 · the cover: the real sky (one canvas, H1–H3, H6), two glows (H4), two light swords (H5), the names */
.cover {
  position: relative; overflow: clip; text-align: center; isolation: isolate;
  min-height: clamp(38rem, calc(100svh - var(--bar-h)), 60rem);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem) var(--margin) clamp(2rem, 5vw, 3.5rem);
  background: radial-gradient(120% 80% at 50% 0%, #10142b, var(--space) 70%);
}
.sky { position: absolute; inset: 0; z-index: -3; }
.sky canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sky--cover { --sky-az: 25; --sky-alt: 32; --sky-fov: 170; cursor: crosshair; }
@media (max-aspect-ratio: 1/1) { .sky--cover { --sky-az: 340; --sky-alt: 40; --sky-fov: 150; } }
/* M5: a faint pool of light follows the pointer at a laptop */
@media (hover: hover) and (pointer: fine) {
  .sky--cover::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(280px 280px at calc(var(--sky-px, .5) * 100%) calc(var(--sky-py, .5) * 100%), rgb(240 163 58 / .07), transparent 70%);
  }
}
/* F1: cloudy. The dome's inside comes up behind the projected sky (sky.js draws it in a circle) */
.sky--cover { --sky-dome-x: 50; --sky-dome-y: 34; --sky-dome-r: 30; }
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: -4; opacity: 0; transition: opacity 1.6s ease 1.4s;
  background: linear-gradient(rgb(10 12 23 / .55), rgb(10 12 23 / .85)), url("../assets/vegaorin/venue-dome.jpg") center / cover;
}
html[data-cloudy] .cover::before { opacity: 1; }
.cover-dome { display: none; }
html[data-cloudy] .cover-dome {
  display: block; position: absolute; left: 50%; top: 1rem; transform: translateX(-50%); width: min(30rem, 90%);
  font: .8rem/1.4 var(--mono); color: var(--ice); letter-spacing: .04em;
}
.glows { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.glow { position: absolute; top: 34%; width: 60vmin; height: 60vmin; border-radius: 50%; filter: blur(30px); opacity: .32; }
.glow--ice { left: calc(50% - 50vmin); background: radial-gradient(circle, rgb(223 233 255 / .45), transparent 65%); }
.glow--amber { left: calc(50% - 10vmin); background: radial-gradient(circle, rgb(240 163 58 / .4), transparent 65%); }
/* two blades from two hilts, crossing above the names; they brighten as the pointer nears (--near, sky.js) */
.crossing { position: relative; width: 100%; margin: 0 auto 1rem; --gap2: clamp(4rem, 9vw, 7rem); }
.blades { position: relative; height: clamp(10rem, 24vw, 17rem); width: 100%; pointer-events: none; --near: 0; }
.blade { position: absolute; bottom: 0; width: 10px; height: 100%; margin-left: -5px; transform-origin: 50% 100%; }
.blade--vega { left: calc(50% - var(--gap2)); transform: rotate(32deg); --glow: 223 233 255; }
.blade--orin { left: calc(50% + var(--gap2)); transform: rotate(-32deg); --glow: 240 163 58; }
.blade .beam { transform: scaleY(1); filter: brightness(calc(1 + var(--near) * .35)); }
/* A2 (round 2): the blades breathe, out of step with each other; touching the crossing leans them a few degrees
   apart and back (a greeting, never a duel); now and then the crossing flares */
.blade { transition: rotate 900ms cubic-bezier(.3, .9, .25, 1); }
.blade .beam { animation: vo-hum 4.4s ease-in-out infinite; }
.blade--orin .beam { animation-duration: 5.3s; animation-delay: -1.7s; }
.crossing:is(:hover, :focus-within, :active) .blade--vega { rotate: -3.5deg; }
.crossing:is(:hover, :focus-within, :active) .blade--orin { rotate: 3.5deg; }
.spark::before { content: ""; position: absolute; inset: -60%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(255 243 220 / .85), rgb(240 163 58 / .25) 35%, transparent 65%); opacity: 0;
  animation: vo-flare 9s ease-out 3s infinite; }
/* a slow breath (M5, 2026-11-03: the old three dips inside half a second read as a stutter) */
@keyframes vo-hum { 0%, 100% { opacity: 1; } 50% { opacity: .86; } }
@keyframes vo-flare { 0%, 88%, 100% { opacity: 0; transform: scale(.5); } 91% { opacity: 1; transform: scale(1); } }
/* H5: the crossing, at the hilts half-gap ÷ tan 32° above their foot; a press ripples it (data-wsd-pulse) */
.spark {
  position: absolute; left: 50%; bottom: calc(var(--gap2) / .6249 - 28px); width: 56px; height: 56px; margin-left: -28px;
  border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle, rgb(255 248 238 / .95), rgb(240 163 58 / .35) 40%, transparent 70%);
}
.spark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgb(255 243 220 / .8); opacity: 0; }
.spark[data-pulse]::after { animation: vo-ripple 900ms ease-out; }
@keyframes vo-ripple { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(3.2); } }
.brief { position: relative; }
.names {
  font: 400 var(--step-5)/1 var(--display); text-transform: uppercase; letter-spacing: .12em;
  text-shadow: 0 2px 30px rgb(0 0 0 / .6);
}
.amp { color: var(--amber); letter-spacing: 0; }
.tagline { margin-top: .9rem; font: italic var(--step-2)/1.3 var(--body); color: var(--ink); }
.when { margin-top: .7rem; color: var(--muted); font-size: var(--step-1); }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.4rem; }
.by { margin-top: .9rem; font: .85rem/1.5 var(--mono); color: var(--muted); }
/* T-minus: the countdown's fields, figures that do not dance (M2: they roll, the odometer) */
.tminus { margin-top: 1rem; font: var(--step-2)/1.2 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tminus b { font-weight: 400; color: var(--amber); }
.t-label, .t-unit { color: var(--muted); }
.count-after { display: none; }
[data-phase="after"] .count-before, .tminus[data-phase="after"] .count-before { display: none; }
[data-phase="after"] .count-after, .tminus[data-phase="after"] .count-after { display: inline; font-family: var(--body); font-size: var(--step-1); }
.cover-tools { margin-top: 1.6rem; display: grid; justify-items: center; gap: .6rem; }
.cover-readout { font: .75rem/1.4 var(--mono); letter-spacing: .08em; color: var(--muted); }
.cover-readout b { color: var(--ink); font-weight: 400; }
.cover-btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.cover-wishes { font: .75rem/1.4 var(--mono); color: var(--amber); min-height: 1.05rem; }
/* F12: after the wedding, the arch complete over the names */
.cover-arch { display: none; position: absolute; left: 50%; top: 6%; width: min(44rem, 92%); height: 42%; transform: translateX(-50%); z-index: -1; }
[data-phase="after"] .cover-arch { display: block; }
.cover-arch i {
  position: absolute; bottom: 0; width: 3px; height: 70%; border-radius: 2px; transform-origin: 50% 100%;
  background: linear-gradient(to top, #3a3d48 0 12%, #fff8ee 12% 100%);
  box-shadow: 0 0 5px 1px rgb(240 163 58 / .8), 0 0 16px 4px rgb(240 163 58 / .25);
}
.cover-arch i:nth-child(3n+2) { box-shadow: 0 0 5px 1px rgb(223 233 255 / .85), 0 0 16px 4px rgb(223 233 255 / .25); }
.cover-arch i:nth-child(3n) { box-shadow: 0 0 5px 1px rgb(255 217 138 / .85), 0 0 16px 4px rgb(255 217 138 / .25); }
.cover-arch i:nth-child(odd) { transform: rotate(26deg); }
.cover-arch i:nth-child(even) { transform: rotate(-26deg); }
.cover-arch i:nth-child(1) { left: 2%; } .cover-arch i:nth-child(2) { left: 14%; }
.cover-arch i:nth-child(3) { left: 18%; } .cover-arch i:nth-child(4) { left: 30%; }
.cover-arch i:nth-child(5) { left: 34%; } .cover-arch i:nth-child(6) { left: 46%; }
.cover-arch i:nth-child(7) { left: 54%; } .cover-arch i:nth-child(8) { left: 66%; }
.cover-arch i:nth-child(9) { left: 70%; } .cover-arch i:nth-child(10) { left: 82%; }
.cover-arch i:nth-child(11) { left: 86%; } .cover-arch i:nth-child(12) { left: 98%; }
[data-phase="after"] .blades, [data-phase="after"] .spark { display: none; }

/* §10 · the Brief's sections */
.parts { display: grid; gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 40em) { .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .parts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.part-no { display: block; font: 400 var(--step-4)/1 var(--display); color: var(--amber); }
.part h3 { margin-top: .8rem; font: 400 var(--step-1)/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; }
.part p { margin-top: .7rem; color: var(--muted); font-size: var(--step--1); line-height: 1.6; }
.saga > .links { justify-content: center; }
.saga > .kicker, .saga > .band-title { text-align: center; }

.sky-facts { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 52em) { .sky-facts { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.facts-words p:not(.kicker) { margin-top: 1rem; max-width: 34em; }
.readouts { display: grid; gap: 0; }
.readouts div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.readouts div:last-child { border-bottom: 0; }
.readouts dt { color: var(--muted); font-size: var(--step--1); }
.readouts dd { font: .9rem/1.4 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
[data-sky-filled] { color: var(--amber); }

.marks { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 40em) { .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .marks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mark { display: flex; flex-direction: column; border-top: 1px solid var(--line-hi); padding-top: .9rem; }
.mark img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; order: -1; margin-bottom: .9rem; }
.mark-t { font: .78rem/1.3 var(--mono); letter-spacing: .08em; color: var(--amber); }
.mark-what { margin-top: .35rem; font: 400 var(--step-1)/1.2 var(--display); letter-spacing: .04em; }
.mark-where { margin-top: .25rem; color: var(--muted); font-size: var(--step--1); }

.invite { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 48em) { .invite { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.invite-shot { margin: 0; }
.invite-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 0 0 1px var(--line-hi), 0 30px 60px rgb(0 0 0 / .45); }
.invite-words p:not(.kicker):not(.cta) { margin-top: 1rem; max-width: 34em; }
.invite .cta { justify-content: flex-start; }

/* §11 · the arch (lights.js): a sword for every yes, from the dome door out into the night. Each sword is placed
   by the engine (--x --y --w --h, its tilt --r, its colour --c); the box below is the picture they stand on. */
.arch-band { overflow: clip; text-align: center; padding-top: clamp(2rem, 5vw, 4rem); background: radial-gradient(90% 70% at 50% 40%, var(--space-3), var(--space) 70%); }
.arch-scene { position: relative; width: min(100%, 64rem); aspect-ratio: 16 / 9; margin: 0 auto; max-height: 62vh; }
@media (max-width: 47.99em) { .arch-scene { aspect-ratio: 4 / 3; } }
.arch-door {
  position: absolute; left: 44%; width: 12%; top: 34%; height: 26%; border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: radial-gradient(70% 90% at 50% 100%, rgb(255 217 160 / .55), rgb(240 163 58 / .12) 60%, transparent);
  box-shadow: 0 0 0 1px rgb(214 206 188 / .25);
}
.arch-door::after { content: ""; position: absolute; left: -300%; right: -300%; top: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-hi), transparent); }
.arch-lights { position: absolute; inset: 0; }
.sword {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  transform: rotate(var(--r, 0deg)); transform-origin: 50% 100%; --c: #f0a33a;
}
.sword::before { /* the blade */
  content: ""; position: absolute; left: 50%; bottom: 14%; width: 3px; margin-left: -1.5px; height: 86%; border-radius: 2px 2px 0 0;
  background: #fff8ee; box-shadow: 0 0 3px 1px var(--c), 0 0 12px 3px color-mix(in srgb, var(--c) 55%, transparent);
}
.sword::after { /* the hilt */
  content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; margin-left: -2px; height: 14%; background: #4a4e5c;
}
/* A5 (round 2): the arch lights when it comes into view (.a-seen), one sword at a time from the door outward, then
   each sways a little in its holder's hand; the visitor's lights last, with a flare. Without the reveal driver the
   swords simply stand lit. */
html[data-reveal="on"] .arch-scene:not([data-seen]) .sword { opacity: 0; }
.arch-scene[data-seen] .arch-lights[data-ready] .sword {
  animation: vo-sword-on 700ms cubic-bezier(.3, .9, .25, 1) both, vo-sway calc(4.6s + var(--i) * 97ms) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms + 700ms);
}
.arch-scene[data-seen] .arch-lights[data-ready] .sword[data-yours] { animation-delay: calc(36 * 70ms), calc(36 * 70ms + 700ms); }
.arch-scene[data-seen] .sword[data-yours]::before { animation: vo-yours 1600ms ease-out calc(36 * 70ms + 500ms) both; }
@keyframes vo-sway { from { rotate: -.9deg; } to { rotate: 1deg; } }
/* A13: a hold flares the visitor's sword again; before a yes, a preview of it stands at the front */
.sword[data-flare]::before { animation: vo-yours 1600ms ease-out both !important; }
.sword[data-preview] { opacity: .9; }
.hold { margin: 1.6rem auto 0; display: grid; justify-items: center; gap: .6rem; }
.hold-btn {
  --hold: 0; position: relative; display: grid; justify-items: center; gap: .7rem; min-height: 44px; padding: 1rem 1.4rem;
  background: rgb(10 12 23 / .6); border: 1px solid var(--line-hi); color: var(--ink); cursor: pointer;
  font: 500 .78rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none;
}
.hold-btn:hover, .hold-btn:focus-visible { border-color: var(--amber); }
.hold-sword { position: relative; display: block; width: min(18rem, 70vw); height: 12px; }
.hold-hilt { position: absolute; left: 0; top: 2px; width: 22%; height: 8px; border-radius: 2px; background: linear-gradient(#5a5f70, #343846); }
.hold-blade {
  position: absolute; left: 22%; top: 4px; width: 78%; height: 4px; border-radius: 0 2px 2px 0; transform-origin: 0 50%;
  transform: scaleX(var(--hold)); background: #fff8ee;
  box-shadow: 0 0 4px 2px var(--c, #e6efff), 0 0 18px 6px color-mix(in srgb, var(--c, #e6efff) 55%, transparent);
}
html[data-lights-colour="vega"] .hold-btn { --c: #e6efff; } html[data-lights-colour="arcturus"] .hold-btn { --c: #f0a33a; }
html[data-lights-colour="capella"] .hold-btn { --c: #ffd98a; } html[data-lights-colour="rigel"] .hold-btn { --c: #bcd2ff; }
html[data-lights-colour="spica"] .hold-btn { --c: #9fbdff; }
.hold-done { display: none; color: var(--amber); }
.hold-btn[data-held] .hold-say { display: none; }
.hold-btn[data-held] .hold-done { display: block; }
.sword[data-yours]::before { width: 4px; margin-left: -2px; box-shadow: 0 0 4px 2px var(--c), 0 0 18px 6px color-mix(in srgb, var(--c) 60%, transparent); }
.sword[data-yours][data-fresh]::before { animation: vo-yours 1600ms ease-out 400ms both; }
@keyframes vo-sword-on { from { opacity: 0; transform: rotate(var(--r, 0deg)) scaleY(.2); } to { opacity: 1; transform: rotate(var(--r, 0deg)) scaleY(1); } }
@keyframes vo-yours { 0% { filter: brightness(1); } 30% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
.arch-words { margin-top: 1.4rem; }
.arch-words p:not(.kicker) { margin: 1rem auto 0; max-width: 36em; color: var(--muted); }
.arch-tally b, .arch-words b { color: var(--amber); font-weight: 400; font-family: var(--mono); }
.picks { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.2rem; }
.pick {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1rem; cursor: pointer;
  background: none; border: 1px solid var(--line-hi); color: var(--ink); font: .8rem/1 var(--mono); letter-spacing: .08em;
}
.pick::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: #fff8ee; box-shadow: 0 0 3px 1px var(--c), 0 0 8px 2px var(--c); }
.pick[aria-pressed="true"] { border-color: var(--c); color: var(--c); }
.pick:hover { border-color: var(--amber); }

/* §12 · inner pages: the head, the page turn */
.head { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem); }
.head + .section { padding-top: clamp(1rem, 3vw, 2rem); }
.head-title { margin-top: .6rem; font: 400 var(--step-4)/1.06 var(--display); letter-spacing: .06em; text-transform: uppercase; text-wrap: balance; }
.lede { margin-top: 1.1rem; max-width: 36em; font-size: var(--step-1); color: var(--muted); }
.turn { display: flex; justify-content: space-between; gap: 1rem; padding-block: 2rem 4rem; border-top: 1px solid var(--line); }
.turn a {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 48px; padding: 0 1rem; border: 1px solid var(--line-hi);
  font: .85rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
[data-skin="vegaorin"] .turn a { text-decoration: none; }
.turn kbd { color: var(--amber); }
.turn a:hover { border-color: var(--amber); }

/* §13 · the Log: four long parts, their constellation joining in the margin as each is read (F3) */
.log { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: var(--module); }
@media (min-width: 60em) { .log { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; } }
.const { position: sticky; top: calc(var(--bar-h) + 1.5rem); z-index: 1; }
.const-map { display: block; width: 100%; max-width: 15rem; height: auto; overflow: visible; }
.const-line { stroke: var(--amber); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.3, .9, .25, 1); }
.const-star { fill: var(--star-2); transition: fill .6s ease, filter .6s ease; }
.const-label { fill: var(--muted); font: 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.log:has(.log-part--1[data-seen]) .const-star--1,
.log:has(.log-part--2[data-seen]) .const-star--2,
.log:has(.log-part--3[data-seen]) .const-star--3,
.log:has(.log-part--4[data-seen]) .const-star--4 { fill: #fff8ee; filter: drop-shadow(0 0 4px var(--amber)); }
.log:has(.log-part--2[data-seen]) .const-line--1,
.log:has(.log-part--3[data-seen]) .const-line--2,
.log:has(.log-part--4[data-seen]) .const-line--3 { stroke-dashoffset: 0; }
html:not([data-reveal="on"]) .const-line { stroke-dashoffset: 0; }
.const-name { margin-top: .8rem; font: .75rem/1.5 var(--mono); color: var(--muted); letter-spacing: .06em; opacity: .35; transition: opacity 1s ease; }
.const-name b { display: block; font: 400 var(--step-1)/1.2 var(--display); color: var(--ink); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 59.99em) {
  .const { top: var(--bar-h); display: flex; align-items: center; gap: 1rem; padding: .6rem 0; background: rgb(10 12 23 / .92); border-bottom: 1px solid var(--line); }
  .const-map { width: 64px; max-height: 84px; flex: none; }
  .const-label { display: none; }
  .const-name { margin-top: 0; }
  .const-name b { font-size: var(--step-0); }
}
.log:has(.log-part--4[data-seen]) .const-name, html:not([data-reveal="on"]) .const-name { opacity: 1; }
.log-parts { display: grid; gap: clamp(3rem, 8vw, 6rem); }
.log-no { font: 500 .8rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.log-no > span:first-child { color: var(--amber); font-family: var(--display); font-size: 1.4rem; letter-spacing: 0; margin-right: .3rem; }
.log-title { margin-top: .4rem; font: 400 var(--step-3)/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.log-shot { margin: 1.2rem 0 1.4rem; }
.log-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 0 0 1px var(--line-hi); }
.log-part > p:not(.log-no) { margin-top: 1rem; max-width: 36em; }
.log-end { font-style: italic; color: var(--ink); }
.zones { margin: 1.4rem 0 .4rem; display: grid; gap: .8rem; max-width: 34rem; }
@media (min-width: 40em) { .zones { grid-template-columns: 1fr 1fr; } .zones-k { grid-column: 1 / -1; } }
.zones-k { font: 500 .72rem/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.zone { display: grid; gap: .2rem; }
.zone-who { font-size: var(--step--1); color: var(--muted); }
.zone-t { font: 400 var(--step-3)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.zone-t[data-dark] { color: var(--ice); }

/* §14 · the Timeline: the sky over the deck beside the live night (F5, F6), the running order with T±,
   the sky's own timetable, the rain plan */
.scope { display: grid; gap: 1.4rem; padding: 0; overflow: clip; }
@media (min-width: 56em) { .scope { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.sky--scope { position: relative; z-index: 0; min-height: clamp(20rem, 52vw, 32rem); --sky-az: 20; --sky-alt: 36; --sky-fov: 165; background: radial-gradient(120% 90% at 50% 0%, #10142b, #070812 70%); }
@media (max-width: 40em) { .sky--scope { --sky-az: 30; --sky-fov: 175; } }
.scope-time { position: absolute; left: .6rem; top: .5rem; padding: .3rem .5rem .4rem; font: .75rem/1.4 var(--mono); letter-spacing: .1em; color: var(--muted);
  background: rgb(10 12 23 / .62); } /* a ground of its own: by day the sky behind it is light (V3, 2026-11-03) */
.scope-time b { display: block; font: 400 var(--step-2)/1.1 var(--mono); color: var(--ink); letter-spacing: .02em; }
.scope-card {
  position: absolute; left: 1rem; right: 1rem; bottom: 4.2rem; max-width: 28rem; padding: .6rem .8rem;
  background: rgb(10 12 23 / .85); border: 1px solid var(--line-hi); font: .85rem/1.45 var(--body); color: var(--ink);
}
.scope-card:empty { display: none; }
.scope-names { position: absolute; left: 1rem; bottom: 1rem; }
.live { padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1rem; align-content: start; }
.live-before, .live-over { color: var(--muted); font-size: var(--step--1); }
.live-over, [data-live] .live-before { display: none; }
[data-live="after"] .live-over { display: block; }
.nn-label { font: 500 .72rem/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.nn-label span { color: var(--muted); margin-left: .4em; }
.nn-time { font: 400 var(--step-1)/1.2 var(--mono); }
.nn-title { font: 400 var(--step-1)/1.2 var(--display); letter-spacing: .04em; }
.nn-note { color: var(--muted); font-size: var(--step--1); }
.nn-left { color: var(--amber); font: .8rem/1.4 var(--mono); }
.live-next { border-top: 1px solid var(--line); padding-top: .8rem; }
.skip-said { font: .85rem/1.4 var(--mono); color: var(--muted); }
.skip-said b { color: var(--amber); font-weight: 400; }
.skip-on { display: none; }
[data-live] .skip-count { display: none; }
[data-live] .skip-on { display: inline; }
.scrub-row { display: grid; gap: .4rem; margin-top: .6rem; }
.scrub-label { font: .8rem/1.4 var(--mono); letter-spacing: .06em; }
.skip-sim { color: var(--muted); }
.scrub { width: 100%; min-height: 44px; accent-color: var(--amber); }
.scrub-ends { display: flex; justify-content: space-between; font: .7rem/1 var(--mono); color: var(--muted); }
.live-skip .btn { margin-top: .6rem; }
.night-live .band-head { margin-top: clamp(2.5rem, 6vw, 4rem); }
.prog { display: grid; border-top: 1px solid var(--line-hi); }
.prog-item {
  display: grid; grid-template-columns: 5.6rem 5.4rem minmax(0, 1fr); gap: .3rem 1rem; padding: 1rem 0;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
@media (max-width: 40em) { .prog-item { grid-template-columns: 5.6rem minmax(0, 1fr); } .prog-body { grid-column: 1 / -1; } }
.prog-mark { font: 500 .85rem/1.3 var(--mono); color: var(--amber); font-variant-numeric: tabular-nums; }
.prog-time { font: .85rem/1.3 var(--mono); color: var(--muted); }
.prog-title { display: block; font: 400 var(--step-1)/1.25 var(--display); letter-spacing: .04em; }
.prog-note { display: block; margin-top: .25rem; color: var(--muted); font-size: var(--step--1); }
.prog-item[data-state="past"] { opacity: .5; }
.prog-item[data-state="now"] { background: linear-gradient(90deg, var(--amber-soft), transparent 70%); }
.prog-item[data-state="now"] .prog-title { color: var(--amber); }
.prog-item[data-item="s8"] .prog-title::after { content: " ✦"; color: var(--amber); }
/* A17 (round 2): the stardust trail (dust.js) over the page, under the bar and the arrival, never in the way */
.dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 35; pointer-events: none; --dust-a: 255,243,220; --dust-b: 240,163,58; }
/* A12 (round 2): night-eye, the observatory's dim amber on every page (chrome.js's page switch). A layer over
   everything multiplies the colours toward red-amber and down, the way a red torch keeps eyes dark; a layer, not a
   filter, so nothing fixed on the page loses its place. */
html[data-night-eye] body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: rgb(255 120 40); mix-blend-mode: multiply;
}
html[data-night-eye] body::before {
  content: ""; position: fixed; inset: 0; z-index: 2147482999; pointer-events: none; background: rgb(0 0 0 / .18);
}
/* A9 (round 2): on the Timeline the sun's real height (sky.js data-sky-tint) tints the night's own colours, gold
   before the vows, blue at dusk, the night after; the arch photograph lights while the arch is on */
html[data-sky-light="day"], html[data-sky-light="golden"] { --space: #17130f; --space-2: #231b13; --space-3: #33261a; }
html[data-sky-light="dusk"] { --space: #0b1022; --space-2: #141a36; --space-3: #1e2650; }
html[data-sky-light] body, html[data-sky-light] .section, html[data-sky-light] .panel { transition: background-color 1.4s ease; }
.prog-item { transition: background 600ms ease, opacity 600ms ease; }
.arch-shot img { transition: filter 1.2s ease, box-shadow 1.2s ease; }
html:has(.prog-item[data-item="s8"][data-state="now"]) .arch-shot img { filter: brightness(1.14) saturate(1.2); box-shadow: 0 0 70px rgb(223 233 255 / .18); }
.skyline-list { display: grid; gap: .9rem; max-width: 44rem; counter-reset: sk; }
.skyline-list li { padding-left: 1.4rem; position: relative; }
.skyline-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--amber); transform: rotate(45deg); }
.skyline-list b { font: 500 .85rem/1.4 var(--mono); color: var(--ink); margin-right: .4rem; }
.arch-shot { margin: clamp(2rem, 5vw, 3.5rem) 0 0; }
.arch-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.arch-shot figcaption { margin-top: .6rem; font: .78rem/1.4 var(--mono); color: var(--amber); letter-spacing: .1em; }
.band-shot { margin-block: clamp(2rem, 5vw, 3.5rem) 0; }
.band-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.band-shot figcaption { margin-top: .6rem; font: .78rem/1.4 var(--mono); color: var(--amber); letter-spacing: .1em; }
.rain-panel { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
@media (min-width: 52em) { .rain-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.rain-shot { margin: 0; }
.rain-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.rain-panel p:not(.kicker) { margin-top: 1rem; max-width: 34em; }

/* §15 · the Briefing: the road drawn up the ridge (F7), the cold, the clothes, the beds */
.road-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 52em) { .road-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.road-map { margin: 0; }
.road-svg { display: block; width: 100%; max-width: 24rem; height: auto; margin: 0 auto; }
.road-ridge { fill: var(--space-3); opacity: .7; }
.road-line { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
html[data-reveal="on"] .road-map:not([data-seen]) .road-line { stroke-dashoffset: 1; }
.road-map[data-seen] .road-line { transition: stroke-dashoffset 2.6s cubic-bezier(.4, 0, .2, 1) .2s; }
.road-stop { fill: var(--space); stroke: var(--star); stroke-width: 1.5; }
.road-stop--top { fill: var(--amber); stroke: #fff3dc; }
.road-map figcaption { margin-top: .8rem; font: .75rem/1.5 var(--mono); color: var(--muted); }
.shuttle { display: grid; border-top: 1px solid var(--line-hi); }
.shuttle li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.shuttle-t { font: 500 .95rem/1.4 var(--mono); color: var(--amber); font-variant-numeric: tabular-nums; }
/* A11 (round 2): each time sends the shuttle along the drawn road (ride.js) */
button.shuttle-t { justify-self: start; align-self: start; min-height: 44px; margin: -.6rem 0; padding: 0 .4rem; background: none;
  border: 0; border-bottom: 1px dashed rgb(240 163 58 / .45); cursor: pointer; text-align: left; }
button.shuttle-t:hover, button.shuttle-t[aria-pressed="true"] { border-bottom-style: solid; color: #ffc97a; }
.rider-glow { fill: rgb(255 214 150 / .22); }
.rider-lamp { fill: #fff3dc; filter: drop-shadow(0 0 2px #ffd38a) drop-shadow(0 0 5px rgb(255 190 110 / .7)); }
.road-svg[data-riding] .rider-glow { fill: rgb(255 214 150 / .35); }
.road-words .hint { margin-top: 1rem; }
.road-shot { margin: clamp(2rem, 5vw, 3rem) 0 0; }
.road-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.offers { display: grid; gap: 1rem; }
@media (min-width: 48em) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.offer-t { margin-top: .5rem; font: 400 var(--step-2)/1.2 var(--display); letter-spacing: .04em; }
.offer p:not(.kicker) { margin-top: .8rem; color: var(--muted); }

/* §16 · the Manifest: the short reply, the sword, the crew pass, the seat in the dome */
.reply-body { max-width: 44rem; margin: 0 auto; }
.reply-form { display: grid; gap: 1.3rem; }
.field { display: grid; gap: .4rem; }
.field label, .reply-q { font: 500 .8rem/1.4 var(--mono); letter-spacing: .08em; color: var(--ink); }
.field input, .field textarea {
  min-height: 48px; padding: .6rem .8rem; background: var(--field); border: 1px solid var(--line-hi); color: var(--ink);
  font: var(--step-0)/1.4 var(--body); caret-color: var(--amber);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 1px var(--amber); }
.choices { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.choice { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 1rem; border: 1px solid var(--line-hi); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--amber); background: var(--amber-soft); }
.choice input { accent-color: var(--amber); width: 18px; height: 18px; }
.reply-ask .hint { margin-top: .5rem; }
.stepper { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }
.step-btn { width: 44px; height: 44px; background: none; border: 1px solid var(--line-hi); color: var(--ink); font: 1.2rem/1 var(--mono); cursor: pointer; }
.step-out { font: 400 1.2rem/1 var(--mono); min-width: 1.5rem; text-align: center; color: var(--amber); }
.step-label { color: var(--muted); font-size: var(--step--1); }
.plus-names { display: grid; gap: .8rem; margin-top: .8rem; }
.error { margin: 1rem 0; padding: .6rem .8rem; border: 1px solid var(--amber); color: var(--amber); font: .85rem/1.4 var(--mono); }
.confirm { display: grid; gap: .9rem; }
.confirm-h { font: 400 var(--step-2)/1.2 var(--display); letter-spacing: .04em; }
.summary-row { font-size: var(--step--1); color: var(--muted); }
.crew-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 52em) { .crew-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.pass {
  --pass-ground: #12152a; --pass-ground-2: #0a0c17; --pass-ink: #efe9dc; --pass-muted: #b3ad9f; --pass-accent: #f0a33a;
  --pass-display: "Cinzel", Georgia, serif; --pass-ui: "JetBrains Mono", monospace;
  max-width: 30rem; overflow: hidden;
}
.pass-head { border-bottom: 1px solid var(--line-hi); padding-bottom: 1rem; }
.pass-names { font: 400 .9rem/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pass-kicker { margin-top: .8rem; font: 500 .72rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--amber); }
.pass-name { margin-top: .4rem; font: 400 var(--step-3)/1.05 var(--display); letter-spacing: .04em; overflow-wrap: anywhere; }
.pass-party { margin-top: .3rem; color: var(--muted); font: .85rem/1.4 var(--mono); }
.pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.pass-grid dt { font: 500 .68rem/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pass-grid dd { margin-top: .2rem; font: .95rem/1.3 var(--mono); }
.pass-dress { padding-top: .9rem; color: var(--muted); font-size: var(--step--1); }
.pass-stub { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line-hi); }
.pass-code { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.pass-code .mark {
  position: absolute; left: 50%; top: 50%; width: 2px; height: calc(8px + var(--v) * 16px); margin-left: -1px;
  background: var(--amber); transform-origin: 50% 0; transform: rotate(calc(var(--i) / var(--n) * 360deg)) translateY(14px);
  opacity: calc(.4 + var(--v) * .6);
}
.pass-initials { font: 500 .8rem/1 var(--mono); color: var(--ink); }
.pass-number { font: 500 .95rem/1.3 var(--mono); color: var(--amber); }
.pass-note { margin-left: auto; font: .7rem/1.3 var(--mono); color: var(--muted); text-align: right; max-width: 9rem; }
.pass-stamp {
  position: absolute; right: 1rem; top: 1rem; padding: .25rem .5rem; border: 1px solid var(--muted); color: var(--muted);
  font: 500 .7rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; transform: rotate(6deg);
}
[data-pass="yours"] .pass-stamp, [data-pass="regrets"] .pass-stamp { display: none; }
.pass-say > p { display: none; }
[data-pass="sample"] .say-sample, [data-pass="yours"] .say-yours, [data-pass="regrets"] .say-regrets { display: block; }
.pass-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.pass-actions .btn:disabled { color: var(--muted); border-style: dashed; cursor: not-allowed; }
.pass-said { font: .85rem/1.4 var(--mono); color: var(--amber); }
/* the seat in the dome (seating.js): a round room, drawn in its square of data, the circle the skin's frame */
.seat-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .8rem 1rem; margin-bottom: 1.2rem; }
.seat-mode { min-height: 44px; padding: 0 1rem; background: none; border: 1px dashed var(--line-hi); color: var(--amber); cursor: pointer; font: .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.seat-mode[aria-pressed="true"] { border-style: solid; border-color: var(--amber); }
.seat-mine { display: grid; gap: .8rem 1rem; padding-top: 1rem; border-top: 2px solid var(--amber); margin-bottom: 1.2rem; }
@media (min-width: 48em) { .seat-mine { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.seat-mine-name b { font: 400 var(--step-2)/1.15 var(--display); font-weight: 400; }
.seat-mine-name span { display: block; color: var(--muted); font-size: var(--step--1); font-style: italic; }
.seat-names { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: var(--step--1); }
.seat-name em { color: var(--muted); font-size: .85em; }
.seat-name[data-mine] b { color: var(--amber); }
.seat-body { display: grid; gap: 1.2rem; }
/* V4 (2026-11-03): the words sit level with the plan, which grows to fill its half, rather than leaving the half beside it empty */
@media (min-width: 62em) { .seat-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } .seat-body .seat-plot { width: min(100%, 36rem); } }
.seat-plot {
  container-type: inline-size; position: relative; width: min(100%, 30rem); margin-inline: auto; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, var(--space-3), var(--space-2) 70%); border: 1px solid var(--line-hi); overflow: clip;
}
.seat-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seat-lines .seat-grid { stroke: var(--line); stroke-width: 1; }
.seat-lines .seat-room { fill: none; stroke: none; }
.seat-lines .seat-walk { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 5 4; animation: vo-march 1.1s linear infinite; }
@keyframes vo-march { to { stroke-dashoffset: -9; } } /* A15: the walk marches from the dome door to the seat */
/* A7 (round 2): each Log still develops out of the dark as it comes into view, then drifts slowly */
.log-shot { overflow: clip; }
.log-shot img { transition: filter 1.8s cubic-bezier(.3, .6, .2, 1) .15s; }
html[data-reveal="on"] .log-shot:not([data-seen]) img { filter: brightness(.12) contrast(1.4) saturate(.3); }
.log-shot[data-seen] img { animation: vo-drift 26s ease-in-out 1.8s infinite alternate; transform-origin: 60% 40%; }
@keyframes vo-drift { from { scale: 1; } to { scale: 1.06; } }
.seat-anchors, .seat-marks { position: absolute; inset: 0; }
.seat-anchor { position: absolute; transform: translate(-50%, -50%); width: var(--tw); height: var(--th); display: grid; place-items: center; text-align: center; border: 1px dashed var(--line-hi); }
.seat-anchor span { font: 500 10px/1.15 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .1em .2em; }
.seat-anchor[data-kind="zone"] { border-radius: 50%; background: rgb(214 206 188 / .06); }
.seat-anchor[data-point] { width: 12px; height: 12px; border: 0; background: var(--amber); border-radius: 50%; }
.seat-anchor[data-point] span { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); white-space: nowrap; color: var(--ink); }
.seat-anchor[data-small] { display: block; }
.seat-anchor[data-small] span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px; white-space: nowrap; }
.seat-anchor[data-quiet] span { opacity: 0; }
/* the pier's label inside the pier: below it, the chairs of tables III and IV run through it (2026-11-03) */
.seat-anchor[data-kind="zone"][data-small] { display: grid; }
.seat-anchor[data-kind="zone"][data-small] span { position: static; transform: none; margin: 0; white-space: normal; font-size: 8px; letter-spacing: 0; line-height: 1.15; }
.seat-table { position: absolute; transform: translate(-50%, -50%); width: var(--tw); height: var(--th); min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--ink); }
.seat-disc {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--tw); height: var(--th); border-radius: 50%;
  display: grid; place-items: center; background: var(--space-2); border: 1.5px solid var(--line-hi);
}
.seat-table[data-shape="long"] .seat-disc { border-radius: 2px; }
.seat-num { font: 500 10px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.seat-table[data-kind="head"] .seat-disc { background: var(--amber-soft); border-color: var(--amber); }
.seat-table[data-mine] .seat-disc { background: var(--amber); border-color: #fff3dc; box-shadow: 0 0 14px rgb(240 163 58 / .6); }
.seat-table[data-mine] .seat-num { color: var(--space); }
.seat-table[aria-pressed="true"] .seat-disc, .seat-table:hover .seat-disc { border-color: var(--amber); }
/* the engine's --sx/--sy are offsets from the table's centre, so the chairs' origin is the centre (D2, 2026-11-03:
   from the corner, every row sat half a table up and left, and the outer chairs left the room) */
.seat-dots { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.seat-chair { position: absolute; left: var(--sx); top: var(--sy); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--line-hi); }
.seat-chair[data-taken] { background: var(--star-2); }
.seat-label { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px; display: none; white-space: nowrap; font: 10px/1.2 var(--mono); }
.seat-table:is(:hover, :focus-visible, [aria-pressed="true"]) .seat-label { display: block; }
/* right of the door and above it, so "The dome door" keeps its line (D3, 2026-11-03), still inside the round wall */
.seat-scale { position: absolute; left: 72%; bottom: 15%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: .4rem; font: 10px var(--mono); color: var(--muted); }
.vmap-bar { display: block; height: 4px; border: 1px solid var(--muted); border-top: 0; }
.seat-detail { display: grid; gap: .5rem; }
.seat-detail-count { font: .8rem/1.4 var(--mono); color: var(--muted); }
.seat-detail-count b { color: var(--amber); font-weight: 400; }
.seat-legend { margin-top: 1rem; font-size: var(--step--1); color: var(--muted); }
.seat-plan { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--line-hi); display: grid; gap: 1rem; }
.seat-sandbox { font-size: var(--step--1); color: var(--muted); }
.seat-plan-cols { display: grid; gap: 1rem; }
@media (min-width: 48em) { .seat-plan-cols { grid-template-columns: 1fr 1fr; } }
.seat-tray { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.seat-chip { min-height: 44px; padding: .4rem .8rem; background: none; border: 1px solid var(--line-hi); color: var(--ink); text-align: left; cursor: pointer; font: .8rem/1.3 var(--mono); }
.seat-chip[aria-pressed="true"] { border-color: var(--amber); }
.seat-issues { display: grid; gap: .4rem; margin: .5rem 0 1rem; font-size: var(--step--1); color: var(--amber); }

/* §17 · the foot */
.foot { border-top: 1px solid var(--line-hi); padding-block: clamp(2.5rem, 6vw, 4rem); font-size: var(--step--1); color: var(--muted); }
.foot .wrap > * + * { margin-top: .6rem; }
.foot-names { font: 400 var(--step-2)/1.2 var(--display); color: var(--ink); text-transform: uppercase; letter-spacing: .14em; }
.foot-mark { max-width: 40em; }
.foot-mark strong { color: var(--ink); }
.wsd-mark { display: flex; align-items: center; gap: .5rem; font: .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.wsd-mark i { width: 8px; height: 8px; background: var(--amber); }

/* §18 · motion: slow and grand, never busy. The cover's blades light from their hilts (after the arrival, or at
   once when there is none); H4 the glows breathe; M4 the current tab, Reply and the prompt's cursor pulse.
   Calm (html[data-calm], the motion switch) and reduced motion: everything at rest, lit. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-calm]) .cover .beam { animation: vo-ignite 1.1s cubic-bezier(.3, .9, .25, 1) both; }
  html:not([data-calm]) .cover .blade--vega .beam { animation-delay: .35s; }
  html:not([data-calm]) .cover .blade--orin .beam { animation-delay: .7s; }
  html[data-arrival] .cover .beam { animation-play-state: paused; }
  html:not([data-calm]) .glow { animation: vo-breathe 8s ease-in-out infinite; }
  html:not([data-calm]) .glow--amber { animation-delay: -4s; }
  html:not([data-calm]) .blade .beam { --shimmer: 1; }
  html:not([data-calm]) .cover .blade .beam { animation: vo-ignite 1.1s cubic-bezier(.3, .9, .25, 1) both, vo-shimmer 3.2s ease-in-out 1.8s infinite; }
  html:not([data-calm]) .tab[aria-current="page"] kbd, html:not([data-calm]) .cover .btn--signal { animation: vo-pulse 4s ease-in-out infinite; }
  html:not([data-calm]) .prompt-line input:focus { animation: vo-caret 2.4s ease-in-out infinite; }
  .a-rise.panel { --a-rise-y: 10px; }
}
@keyframes vo-ignite { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vo-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .86; } }
@keyframes vo-breathe { 0%, 100% { opacity: .22; transform: scale(.94); } 50% { opacity: .4; transform: scale(1.04); } }
@keyframes vo-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(240 163 58 / 0); } 50% { box-shadow: 0 0 16px 1px rgb(240 163 58 / .35); } }
@keyframes vo-caret { 0%, 100% { box-shadow: 0 0 0 0 rgb(240 163 58 / 0); } 50% { box-shadow: 0 0 10px rgb(240 163 58 / .3); } }
html[data-calm] .sword, html[data-calm] .road-line, html[data-calm] .const-line { animation: none !important; transition: none !important; }
html[data-calm] .ruler, html[data-calm] .ruler-mark { animation: none; }
html[data-calm] .blade .beam, html[data-calm] .blade, html[data-calm] .seat-walk, html[data-calm] .log-shot img { animation: none !important; transition: none !important; }
html[data-calm] .spark::before { animation: none !important; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .sword, .road-line, .const-line { animation: none !important; transition: none !important; }
  .blade .beam, .blade, .spark::before, .seat-walk, .log-shot img { animation: none !important; transition: none !important; }
  .spark::before { opacity: 0; }
  .ruler, .ruler-mark { animation: none !important; }
}

/* §19 · round 2's photographs (2026-11-03, SITE8-PLAN.md §9). Every image here is a part the page moves or a ground
   the drawn things stand on; motion follows the switch and reduced motion as everything else does. */

/* A1 (P3): the cover in depth. The ridge with the dome behind the names, branches nearer; both lean with the pointer
   (sky.js sets --sky-px/--sky-py on the section; on a phone they follow the scroll) */
.cover-depth { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.cover-depth img { position: absolute; display: block; max-width: none; height: auto;
  transition: translate 900ms cubic-bezier(.2, .7, .2, 1); }
.depth-ridge { left: -3%; bottom: -2%; width: 106%;
  translate: calc((var(--sky-px, .5) - .5) * -14px) calc((var(--sky-py, .5) - .5) * -6px); }
/* the branches fill the whole cover at every width (a shorter image left its edge across a phone's cover) */
.cover-depth .depth-branches { left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover; opacity: .72;
  translate: calc((var(--sky-px, .5) - .5) * -36px) calc((var(--sky-py, .5) - .5) * -22px); }
@media (max-width: 47.99em) { .depth-ridge { width: 190%; left: -60%; } .cover-depth .depth-branches { object-position: 30% 50%; opacity: .6; } }
html[data-cloudy] .cover-depth { opacity: .35; transition: opacity 1.4s ease; }

/* P1: the cover's two swords are photographs; the drawn hilt and beam stay underneath as the fallback */
.blade:has(.blade-photo) :is(.hilt, .beam) { visibility: hidden; }
.blade-photo { position: absolute; left: 50%; top: calc(100% - clamp(10rem, 24vw, 17rem) * .0345); width: clamp(10rem, 24vw, 17rem);
  height: auto; max-width: none; transform-origin: 0 50%; rotate: -90deg; filter: brightness(calc(1 + var(--near, 0) * .3)); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-calm]) .cover .blade-photo { animation: vo-photo-on 1.1s cubic-bezier(.3, .9, .25, 1) both, vo-hum 4.4s ease-in-out 1.8s infinite; }
  html:not([data-calm]) .cover .blade--vega .blade-photo { animation-delay: .35s, 1.8s; }
  html:not([data-calm]) .cover .blade--orin .blade-photo { animation-delay: .7s, 2.4s; }
  html[data-arrival] .cover .blade-photo { animation-play-state: paused; }
}
@keyframes vo-photo-on { from { clip-path: inset(0 77% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* P5: the arrival's shutters are the dome's own, closed, seen from below; each half shows its half */
.ign-shutter { overflow: clip; }
.ign-shutter::before { content: ""; position: absolute; top: 0; bottom: 0; width: 198%;
  background: linear-gradient(rgb(10 12 23 / .15), rgb(10 12 23 / .35)), url("../assets/vegaorin/orn-shutter.jpg") center / cover; }
.ign-shutter--l::before { left: 0; }
.ign-shutter--r::before { right: 0; }

/* P2: the arch stands on the real terrace, its lit door where the drawn door was (the photograph's door sits 48.9%
   across and 57% down; scaled 1.376 times it is the drawn door's height, centred on it) */
.arch-scene { container-type: inline-size; }
.arch-scene::before { content: ""; position: absolute; z-index: 0; left: calc(50% - 67.3cqw); top: calc(47% - 44.3cqw);
  width: 137.6cqw; aspect-ratio: 16 / 9; pointer-events: none;
  background: linear-gradient(rgb(10 12 23 / .2), rgb(10 12 23 / .45)), url("../assets/vegaorin/arch-terrace.jpg") center / 100% 100%;
  -webkit-mask: radial-gradient(75% 85% at 50% 48%, #000 55%, transparent 100%); mask: radial-gradient(75% 85% at 50% 48%, #000 55%, transparent 100%); }
.arch-scene .arch-door { background: none; box-shadow: none; }
.arch-scene .arch-door::after { display: none; }
.arch-lights { z-index: 1; }

/* A9 (P6): the deck in the light of the minute on the scrub */
.deck-plates { position: relative; margin: clamp(2rem, 5vw, 3rem) 0 0; aspect-ratio: 16 / 7; overflow: clip; border: 1px solid var(--line); }
.deck-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  opacity: 0; transition: opacity 1.4s ease; }
.deck-plate--gold, html[data-sky-light="dusk"] .deck-plate--dusk, html[data-sky-light="night"] .deck-plate--night { opacity: 1; }
html[data-sky-light="dusk"] .deck-plate--gold, html[data-sky-light="night"] .deck-plate--gold { opacity: 0; }
.deck-plates figcaption { position: absolute; left: 1rem; bottom: .8rem; font: .75rem/1.3 var(--mono); letter-spacing: .1em; color: var(--ink);
  text-shadow: 0 1px 6px rgb(0 0 0 / .8); }

/* P7: the ridge from above, numbered to the list beside it; hovering a line lights its number */
.aerial-grid { display: grid; gap: 1.6rem; margin-top: 1.4rem; }
@media (min-width: 64em) { .aerial-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.aerial-map { position: relative; margin: 0; }
.aerial-map img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.aerial-marks { list-style: none; margin: 0; padding: 0; }
.aerial-marks li { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center; font: 500 .78rem/1 var(--mono); color: var(--space); background: var(--amber);
  box-shadow: 0 0 0 3px rgb(10 12 23 / .55), 0 0 14px rgb(240 163 58 / .6); transition: scale 300ms ease; }
.aerial-list { display: grid; gap: .7rem; padding-left: 1.6rem; }
.aerial-list li::marker { font: 500 .85rem var(--mono); color: var(--amber); }
.aerial-list b { font-weight: 600; }
.aerial:has(.aerial-list li:nth-child(1):hover) .aerial-marks li:nth-child(1),
.aerial:has(.aerial-list li:nth-child(2):hover) .aerial-marks li:nth-child(2),
.aerial:has(.aerial-list li:nth-child(3):hover) .aerial-marks li:nth-child(3),
.aerial:has(.aerial-list li:nth-child(4):hover) .aerial-marks li:nth-child(4),
.aerial:has(.aerial-list li:nth-child(5):hover) .aerial-marks li:nth-child(5),
.aerial:has(.aerial-list li:nth-child(6):hover) .aerial-marks li:nth-child(6) { scale: 1.35; }

/* P11: a stitched patch beside each part of the Log */
.log-part { position: relative; }
.log-patch { position: absolute; right: 0; top: -.4rem; width: clamp(4rem, 9vw, 6.5rem); height: auto; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .45)); }
.log-part > .log-no, .log-part > .log-title { padding-right: clamp(5rem, 11vw, 8rem); }

/* A7 (P12): the stills develop through real film grain, which settles to a whisper */
.log-shot { position: relative; }
.log-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../assets/vegaorin/orn-grain.webp") 0 0 / 256px;
  mix-blend-mode: overlay; opacity: .18; transition: opacity 2.2s ease .2s; }
html[data-reveal="on"] .log-shot:not([data-seen])::after { opacity: .7; }

/* P8: the dome's own floor under the plan (its inner floor sized to the room's 14 metres), and the couple's table */
.seat-plot { background: url("../assets/vegaorin/dome-floor.webp") center / 106.6% auto no-repeat, radial-gradient(circle, var(--space-3), var(--space-2) 70%); }
.seat-lines .seat-grid { stroke: rgb(214 206 188 / .07); }
.seat-anchor[data-kind="zone"] { background: none; border-color: rgb(214 206 188 / .2); }
.seat-table[data-kind="head"] .seat-disc { background: url("../assets/vegaorin/dome-table-pair.webp") center / 100% 100%; border-color: transparent; }
.seat-table[data-kind="head"] .seat-num { color: var(--space); background: rgb(255 248 238 / .85); padding: .1em .3em; }
/* the four long tables: the table built from the first delivery (7 + 7 settings stretched with plain cloth to 5.3 : 1) */
.seat-table[data-shape="long"]:not([data-kind="head"]) .seat-disc { background: url("../assets/vegaorin/dome-table-long.webp") center / 100% 100%; border-color: transparent; }
.seat-table[data-shape="long"]:not([data-kind="head"]) .seat-num { color: var(--space); background: rgb(255 248 238 / .9); padding: .1em .35em; }
.seat-table[data-mine] .seat-disc { box-shadow: 0 0 0 2px var(--amber), 0 0 14px rgb(240 163 58 / .6); }

/* P10: the crew pass is a real card */
.pass { background: linear-gradient(rgb(10 12 23 / .55), rgb(10 12 23 / .7)), url("../assets/vegaorin/orn-pass.jpg") center / cover; }

/* P1 in A13: the sword you hold is a photograph, its blade growing out of the hilt */
.hold-sword { background: url("../assets/vegaorin/orn-sword-vega.webp") left center / 100% auto no-repeat; height: 1.2rem;
  clip-path: inset(0 calc((1 - var(--hold)) * 75%) 0 0); }
.hold-sword > i { display: none; }
html[data-lights-colour="arcturus"] .hold-sword { background-image: url("../assets/vegaorin/orn-sword-arcturus.webp"); }
html[data-lights-colour="capella"] .hold-sword { background-image: url("../assets/vegaorin/orn-sword-capella.webp"); }
html[data-lights-colour="rigel"] .hold-sword { background-image: url("../assets/vegaorin/orn-sword-rigel.webp"); }
html[data-lights-colour="spica"] .hold-sword { background-image: url("../assets/vegaorin/orn-sword-spica.webp"); }

html[data-calm] .cover-depth img, html[data-calm] .deck-plate, html[data-calm] .log-shot::after { transition: none; }
html[data-calm] .cover-depth img { translate: none; }
@media (prefers-reduced-motion: reduce) {
  .cover-depth img { translate: none; transition: none; }
  .deck-plate, .log-shot::after { transition: none; }
}

/* §20 · the backdrops (2026-11-03, round 3, B1–B4): a photograph faded behind each inner page's opening, darkest
   behind the words on the left and gone by a screen and a half down; each moves slowly. Under calm and reduced
   motion they stand still. Generic: .backdrop holds one or more img.bd; a page's own rules pick which shows. */
[data-skin="vegaorin"] main { position: relative; isolation: isolate; }
.backdrop { position: absolute; z-index: -1; inset: 0 0 auto; height: min(150vh, 72rem); overflow: clip; pointer-events: none;
  -webkit-mask: linear-gradient(#000, rgb(0 0 0 / .8) 40%, transparent); mask: linear-gradient(#000, rgb(0 0 0 / .8) 40%, transparent); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--space) 8%, transparent 75%); }
.bd { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .34; transition: opacity 1.8s ease; }
@media (max-width: 47.99em) { .backdrop::after { background: linear-gradient(var(--space) 0, transparent 30%, transparent 60%, var(--space)); } .bd { opacity: .26; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-calm]) .bd { animation: vo-push 46s ease-in-out infinite alternate; }
}
@keyframes vo-push { from { scale: 1.02; } to { scale: 1.1; } }

/* B2 · the Timeline: the deck in the light of the minute on the scrub, as the deck plates below it */
.bd-deck { opacity: 0; object-position: 50% 62%; }
.bd-deck--gold, html[data-sky-light="dusk"] .bd-deck--dusk, html[data-sky-light="night"] .bd-deck--night { opacity: .34; }
html[data-sky-light="dusk"] .bd-deck--gold, html[data-sky-light="night"] .bd-deck--gold { opacity: 0; }
@media (max-width: 47.99em) {
  .bd-deck--gold, html[data-sky-light="dusk"] .bd-deck--dusk, html[data-sky-light="night"] .bd-deck--night { opacity: .26; }
  html[data-sky-light="dusk"] .bd-deck--gold, html[data-sky-light="night"] .bd-deck--gold { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bd { transition: none; } }

/* B1 · the Log: the backdrop stays (sticky) the whole way down the page, and each part's photograph, once it comes
   up, brings that place in. Keyed on reveal.js's data-seen, as the constellation is: it follows the reading
   forward and never back, and under reduced motion (everything stamped at once) it is the dome */
.backdrop--stay { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh;
  -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.bd-log { opacity: 0; }
main:not(:has(.log-part--2 .log-shot[data-seen])) .bd-log--1,
main:has(.log-part--2 .log-shot[data-seen]):not(:has(.log-part--3 .log-shot[data-seen])) .bd-log--2,
main:has(.log-part--3 .log-shot[data-seen]):not(:has(.log-part--4 .log-shot[data-seen])) .bd-log--3,
main:has(.log-part--4 .log-shot[data-seen]) .bd-log--4 { opacity: .34; }
@media (max-width: 47.99em) {
  main:not(:has(.log-part--2 .log-shot[data-seen])) .bd-log--1,
  main:has(.log-part--2 .log-shot[data-seen]):not(:has(.log-part--3 .log-shot[data-seen])) .bd-log--2,
  main:has(.log-part--3 .log-shot[data-seen]):not(:has(.log-part--4 .log-shot[data-seen])) .bd-log--3,
  main:has(.log-part--4 .log-shot[data-seen]) .bd-log--4 { opacity: .26; }
}

/* B3 · the Briefing: the sea of clouds, and the mist over it drifting slowly sideways (made on black: screen lifts
   the black off, so it needs no cut-out) */
.bd-cloud { object-position: 50% 60%; }
.bd-mist { inset: auto auto 16% -20%; width: 140%; height: 46%; object-fit: cover; opacity: .5; mix-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-calm]) .bd-mist { animation: vo-drift 64s ease-in-out infinite alternate; }
}
@keyframes vo-drift { from { translate: -7% 0; } to { translate: 7% 0; } }

/* B4 · the Manifest: the whole vault from beneath, the slit open, turning once in six minutes. It is a disc (a round
   mask fading at its rim), so it turns without a corner ever showing */
.bd-dome { inset: auto; left: 60%; top: 40%; width: clamp(26rem, 112vmin, 62rem); height: auto; aspect-ratio: 1;
  translate: -50% -50%; opacity: .3;
  -webkit-mask: radial-gradient(closest-side, #000 62%, transparent); mask: radial-gradient(closest-side, #000 62%, transparent); }
@media (max-width: 47.99em) { .bd-dome { top: 34%; opacity: .24; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-calm]) .bd-dome { animation: vo-turn 360s linear infinite, vo-push 46s ease-in-out infinite alternate; }
}
@keyframes vo-turn { to { rotate: 1turn; } }

/* §21 · C1 (round 3, 2026-11-03): the couple under the crossing, in the column between the hilts and the names:
   Orin's head level with the hilts, the names over their shoulders. The photograph is graded into the night for it
   (ice on Vega's side, amber on Orin's, dark and fading below the chest). Their own depth in the lean, between the
   ridge's and the branches'; they come in once the blades have crossed; the blades' two lights breathe on them,
   out of step as the blades are */
.cover-couple { --cw: clamp(16.5rem, 34vw + 6rem, 25rem); position: relative; z-index: -1; width: var(--cw);
  margin: calc(var(--cw) * -.1) auto calc(var(--cw) * -.57); pointer-events: none;
  translate: calc((var(--sky-px, .5) - .5) * -24px) calc((var(--sky-py, .5) - .5) * -12px);
  transition: translate 900ms cubic-bezier(.2, .7, .2, 1); }
.cover-couple img { display: block; width: 100%; height: auto; max-width: none; }
.cover-couple::before, .cover-couple::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; opacity: .6;
  -webkit-mask: url("../assets/vegaorin/couple-cover.webp") 0 0 / 100% 100%; mask: url("../assets/vegaorin/couple-cover.webp") 0 0 / 100% 100%; }
.cover-couple::before { background: linear-gradient(120deg, rgb(223 233 255 / .3), transparent 42%); }
.cover-couple::after { background: linear-gradient(240deg, rgb(240 163 58 / .3), transparent 42%); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-calm]) .cover-couple { animation: vo-couple-on 1.8s ease 1.7s both; }
  html[data-arrival] .cover-couple { animation-play-state: paused; }
  html:not([data-calm]) .cover-couple::before { animation: vo-wash 4.4s ease-in-out infinite; }
  html:not([data-calm]) .cover-couple::after { animation: vo-wash 5.3s ease-in-out -1.7s infinite; }
}
@keyframes vo-couple-on { from { opacity: 0; filter: brightness(.3); } to { opacity: 1; filter: none; } }
@keyframes vo-wash { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
html[data-calm] .cover-couple { translate: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .cover-couple { translate: none; transition: none; } }
/* the place line stands over their shoulders: a dark halo, as the names have, keeps it legible over the photograph */
.cover .eyebrow { text-shadow: 0 1px 2px rgb(10 12 23 / .95), 0 0 10px rgb(10 12 23 / .9), 0 0 22px rgb(10 12 23 / .7); }