/* ============================================================
   SECTIONS v3 — "THE EGRESS", minimal + fully asymmetric.
   The page margin is the negative space; uneven spans are the
   composition. Effects from v2 preserved; layout de-centered.
   ============================================================ */

/* ---- GRID: 12 cols, asymmetric placement ---- */
.scene{ position:relative; }
.scene > .wrap{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols), minmax(0,1fr));
  column-gap:var(--grid-gutter); row-gap:0; align-items:start;
  position:relative; z-index:1;            /* content always above the backdrop */
}
/* grid items must be allowed to shrink below content size, or long mono strings
   (e.g. the route card kicker) force the track wider and text runs off the side */
.scene > .wrap > *{ min-width:0; }
.scene > .wrap *{ max-width:100%; }
/* sec-head is alignment-neutral; placement comes from col-* on it */
.sec-head{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--flow-tight); text-align:left; }
.sec-head .kicker{ justify-content:flex-start; }
.sec-head .program{ margin-top:0; }
.sec-head .lead{ margin-top:var(--flow-default); }
.center{ text-align:center; }

/* horizontal span + anchor */
.col-wide-l { grid-column:1 / 10; }
.col-wide-r { grid-column:4 / 13; }
.col-7-l    { grid-column:1 / 8;  }
.col-7-r    { grid-column:6 / 13; }
.col-6-l    { grid-column:1 / 7;  }
.col-6-r    { grid-column:7 / 13; }
.col-5-l    { grid-column:1 / 6;  }
.col-5-r    { grid-column:8 / 13; }
.col-4-l    { grid-column:1 / 5;  }
.col-4-r    { grid-column:9 / 13; }
.col-inset  { grid-column:3 / 11; }   /* use ONCE (the climax) */
.col-full   { grid-column:1 / -1; }
/* vertical anchor within a row */
.v-top { align-self:start; } .v-mid { align-self:center; } .v-end { align-self:end; }
/* baseline drop: push a block down so it does not top-align with its neighbour */
.drop-1 { margin-top:var(--flow-loose); }
.drop-2 { margin-top:var(--rest); }

@media (max-width:760px){
  .scene > .wrap{ grid-template-columns:1fr; }
  .col-wide-l,.col-wide-r,.col-7-l,.col-7-r,.col-6-l,.col-6-r,
  .col-5-l,.col-5-r,.col-4-l,.col-4-r,.col-inset,.col-full{ grid-column:1 / -1; }
  .drop-1,.drop-2{ margin-top:var(--flow-default); }
}

/* ANCHOR LAW: never two adjacent scenes anchor the same side. Default left.
   Centered text only on the cover and the one climax (threshold). One focal
   element per viewport; secondary objects drop to their own row by --rest. */

/* ---- PER-SCENE CINEMATIC BEATS (kept from v2) ---- */
.scene-acquire{ position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none; z-index:2;
  background:linear-gradient(90deg,transparent,var(--instr),transparent);
  opacity:0; transform:scaleX(0); transform-origin:left; }
.scene.is-live .scene-acquire{ animation:acquire 900ms var(--ease-act) forwards; }
@keyframes acquire{ 0%{opacity:0;transform:scaleX(0)} 18%{opacity:1} 60%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(1);opacity:0} }
.scene .chips{ opacity:0; transform:translateY(8px); }
.scene.is-live .chips{ opacity:1; transform:none;
  transition:opacity 700ms var(--ease-stone) 320ms, transform 700ms var(--ease-stone) 320ms; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .scene:not(.threat) .inscription{ animation:depart linear both; animation-timeline:view();
      animation-range:exit-crossing 0% exit-crossing 100%; }
    @keyframes depart{ to{ transform:translateY(-28px); opacity:.55; } }
  }
}

/* ---- CHIPS (telemetry; replaces prose) ---- */
.chips{ display:flex; flex-wrap:wrap; gap:1px; margin-top:var(--flow-default); background:var(--edge); border:1px solid var(--edge); }
.chips.two{ max-width:640px; } .chips.three{ max-width:none; }
.chip{ flex:1 1 220px; display:flex; flex-direction:column; gap:6px; padding:var(--s-3) var(--s-4);
  background:var(--travertine-hi);
  font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.04em; color:var(--ink-soft); line-height:1.5; }
.chip i{ font-style:normal; font-family:var(--f-hud); font-variation-settings:var(--vf-hud-wide);
  font-weight:700; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gilt-deep); }
[data-state="terminal"] .chip{ color:var(--bone); background:color-mix(in oklab,var(--obsidian-raised),#000 20%); }
[data-state="terminal"] .chip i{ color:var(--phosphor); }

/* ============================================================
   ATMOSPHERIC BACKDROPS — large, low-contrast graphite environment.
   STATIC layers; per-frame change = ONE transform + ONE opacity, both off --egress.
   ============================================================ */
.scene-art{
  position:absolute; top:-24%; bottom:-24%; left:0; right:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  filter:saturate(0.6) contrast(0.95) brightness(1.0);
  mix-blend-mode:multiply;
  transform:translate3d(0, var(--py,0px), 0);      /* per-scene parallax, written by scene.js */
  opacity:clamp(0.2, calc(0.42 - var(--egress) * 0.16), 0.42);
}
.scene-art--ruins    { background-image:url(/assets/art/ruins.png);     background-position:50% 42%; }
.scene-art--oracle   { background-image:url(/assets/art/oracle.png);    background-position:62% 38%; }
.scene-art--undercity{ background-image:url(/assets/art/undercity.png); background-position:50% 50%; }
.scene-art::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(239,233,221,0.55) 0%, rgba(239,233,221,0.16) 36%,
    rgba(239,233,221,0.16) 62%, rgba(239,233,221,0.60) 100%); }
#the-word .scene-art::after{
  background:
    linear-gradient(90deg, rgba(239,233,221,0.66) 0%, rgba(239,233,221,0.34) 60%, rgba(239,233,221,0.50) 100%),
    linear-gradient(180deg, rgba(239,233,221,0.40), rgba(239,233,221,0.40)); }
[data-state="terminal"] .scene-art{ mix-blend-mode:screen; filter:saturate(0.45) contrast(1.05) brightness(0.95);
  opacity:clamp(0.16, calc(0.14 + var(--egress) * 0.14), 0.32); }
[data-state="terminal"] .scene-art::after{
  background:linear-gradient(180deg,
    rgba(12,11,10,0.70) 0%, rgba(12,11,10,0.42) 38%, rgba(12,11,10,0.42) 62%, rgba(12,11,10,0.74) 100%); }
@media (max-width:760px){
  .scene-art--ruins{ background-position:48% 50%; }
  .scene-art--oracle{ background-position:55% 42%; } .scene-art--undercity{ background-position:50% 48%; }
  .scene-art{ opacity:0.5; }                          /* phones: backdrops were barely legible at 0.26 */
  [data-state="terminal"] .scene-art{ opacity:0.4; }  /* dark sections: lift the screen-blend art too */
  .scene-art::after{ background:linear-gradient(180deg, rgba(239,233,221,0.58) 0%, rgba(239,233,221,0.3) 50%, rgba(239,233,221,0.62) 100%); }
  [data-state="terminal"] .scene-art::after{ background:linear-gradient(180deg, rgba(12,11,10,0.68) 0%, rgba(12,11,10,0.42) 50%, rgba(12,11,10,0.72) 100%); }
}
@media (prefers-reduced-motion:reduce){ .scene-art{ transform:none !important; } }

/* ============================================================
   COVER — cinematic product unveil. Tall section + sticky stage,
   scroll-choreographed by scene.js: --cov-scale (image zoom-out),
   --cov-img (image opacity), --cov-title (title fade in/out), --cov-cue.
   The city image is fully static in position; it only scales.
   ============================================================ */
.cover-intro{ position:relative; height:170vh; }
.cover-stage{ position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

.cover-sky{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* The image element is sized EXACTLY to the contained image box (--cov-w/--cov-h from scene.js),
   centred, and scaled cover->contain. The mask rides on THIS element, so the left/right fade tracks
   the image's real edges at every zoom: invisible zoomed-in (edges off-screen, image fills), and
   dissolving the sides into the marble once zoomed-out (edges on-screen, whole image shown). */
.cover-sky .sky-img{ position:absolute; top:50%; left:50%;
  width:var(--cov-w,100%); height:var(--cov-h,100%);
  background:url(/assets/art/city.png) center center / cover no-repeat;
  filter:saturate(0.5) contrast(0.95) brightness(1.02);
  transform-origin:50% 50%; transform:translate(-50%,-50%) scale(var(--cov-scale,1.2));
  /* The mask scales WITH this element, so a fixed 13% band would show even at the full-bleed cover
     state. Drive the stops from --cov-edge (0 at cover, 1 at contain): the fade collapses to nothing
     when zoomed-in (true full-bleed) and opens to the full 13% only as the whole image is revealed. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0,
    #000 calc(13% * var(--cov-edge,1)), #000 calc(100% - 13% * var(--cov-edge,1)), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0,
    #000 calc(13% * var(--cov-edge,1)), #000 calc(100% - 13% * var(--cov-edge,1)), transparent 100%);
  opacity:var(--cov-img,0.6); }
.cover-sky .sky-scrim{ position:absolute; inset:0;
  background:radial-gradient(135% 110% at 50% 45%, transparent 55%, rgba(239,233,221,0.4) 100%);
  opacity:calc(var(--cov-img,0.6) * 0.55); }

.cover-block{ position:relative; z-index:1; max-width:62ch; margin-inline:auto; padding-inline:var(--grid-margin);
  display:flex; flex-direction:column; align-items:center; text-align:center; }
/* SCROLL-MAPPED unveil: each line's reveal is a pure function of scroll (--cov-e1/2/3), and the whole
   card despawns via --cov-d. No transitions -> the unveil scrubs forward AND backward with the scroll,
   and stops wherever you stop. Fallbacks are 1/0 so the title is fully shown without JS. */
.cover-kicker{
  font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:var(--track-telemetry);
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:var(--flow-default);
  opacity:calc(var(--cov-e1,1) * (1 - var(--cov-d,0)));
  transform:translateY(calc((1 - var(--cov-e1,1)) * 26px - var(--cov-d,0) * 18px));
  clip-path:inset(0 0 calc((1 - var(--cov-e1,1)) * 118%) 0); }
.cover-title{
  font-family:var(--f-civic); font-weight:800; font-size:clamp(2.8rem, 8vw, 6.5rem);
  line-height:0.94; letter-spacing:-0.015em; color:#0A0A0B; text-shadow:none;
  opacity:calc(var(--cov-e2,1) * (1 - var(--cov-d,0)));
  transform:translateY(calc((1 - var(--cov-e2,1)) * 36px - var(--cov-d,0) * 18px));
  clip-path:inset(0 0 calc((1 - var(--cov-e2,1)) * 118%) 0); }
.cover-sentence{
  font-family:var(--f-prose); font-weight:500; font-size:var(--t-lead);
  line-height:var(--lh-lead); color:var(--ink-soft); max-width:var(--measure-lead); text-wrap:pretty; margin-top:var(--flow-default);
  opacity:calc(var(--cov-e3,1) * (1 - var(--cov-d,0)));
  transform:translateY(calc((1 - var(--cov-e3,1)) * 26px - var(--cov-d,0) * 18px));
  clip-path:inset(0 0 calc((1 - var(--cov-e3,1)) * 118%) 0); }
.cover-intro .scroll-cue{ left:50%; transform:translateX(-50%); align-items:center; text-align:center;
  gap:var(--s-2); opacity:var(--cov-cue,1); bottom:max(var(--s-4), env(safe-area-inset-bottom)); }
/* instrument-style scroll prompt: a label + a hairline rail with a marker that glides DOWN during the
   idle auto-peek (--cue-mark-y written by scene.js), in the same vocabulary as the side egress gauge. */
.cover-cue .cue-label{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:var(--track-telemetry);
  text-transform:uppercase; color:var(--ink-mute); }
.cover-cue .cue-rail{ position:relative; width:1px; height:46px; background:linear-gradient(var(--instr), transparent); }
.cover-cue .cue-mark{ position:absolute; left:50%; top:0; width:6px; height:6px; margin-left:-3px;
  border:1px solid var(--instr); background:var(--travertine);
  transform:translateY(calc(var(--cue-mark-y,0) * 38px)); }
@media (prefers-reduced-motion:reduce){
  /* keep the scroll instruction VISIBLE under reduced motion (it was display:none, which hid the only
     signal that the page scrolls); just no animated marker glide. */
  .cover-intro .scroll-cue{ opacity:1; }
  .cover-cue .cue-mark{ transform:none; }
}
/* mobile: the landscape image is tiny when contained on a portrait screen, so fill the
   display (cover) instead. It bleeds to the edges, so drop the left/right edge mask. */
@media (max-width:760px){
  /* phones: --cov-w/--cov-h are 100% (full-stage), background already covers; no side fade (it bleeds
     to the edges by design on a portrait screen) */
  .cover-sky .sky-img{ -webkit-mask-image:none; mask-image:none; }
  /* taller cover -> the pinned sequence (and the title's hold + fade) spans ~2x the scroll, so the
     title persists much longer before it disappears (was 170vh / 70vh of pin -> now 140vh of pin) */
  .cover-intro{ height:240vh; }
}

/* ---- DESCENT / HERO (left, top-third) ---- */
.descent{ min-height:100vh; display:block; padding-block:var(--scene-pad-y); }
.descent > .wrap{ align-content:center; min-height:100vh; }
/* the story fades in after the cover sequence clears (default visible if unsupported) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .descent{ animation:sceneFadeIn linear both; animation-timeline:view(); animation-range:entry 0% entry 38%; }
    @keyframes sceneFadeIn{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
  }
}
.descent .kicker{ margin-bottom:var(--flow-tight); }
.descent .monument{ margin:0; text-align:left; max-width:none; }
.descent .lead{ max-width:var(--measure-lead); margin:0; text-align:left; }
.descent-audio{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-1); margin-top:var(--flow-default); }
/* hero inline capture (left-aligned, compact) */
.enlist--inline{ margin-top:var(--flow-loose); margin-inline:0; max-width:480px; gap:var(--s-2); }
.enlist--inline .enlist-field label{ color:var(--ink-soft); }
.scroll-cue{ position:absolute; bottom:var(--s-4); left:var(--grid-margin);
  font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:var(--track-telemetry);
  color:var(--ink-mute); text-transform:uppercase; display:flex; flex-direction:column; align-items:flex-start; gap:8px; z-index:1; }
.scroll-cue .line{ width:1px; height:42px; background:linear-gradient(var(--gilt-deep),transparent); animation:cueDrop 2.6s var(--ease-stone) infinite; }
@keyframes cueDrop{ 0%{transform:scaleY(.2);transform-origin:top;opacity:.3} 50%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(.2);transform-origin:bottom;opacity:.3} }
@media (prefers-reduced-motion:reduce){ .scroll-cue .line{ animation:none; } }

/* ---- RING INDEX (type + hairline ticks, NO map) ---- */
.ring-index{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.08em; border-top:1px solid var(--edge); margin-top:var(--flow-default); }
.ring-index .ring{ display:grid; grid-template-columns:2.2ch auto 1fr auto; gap:var(--s-2); align-items:center;
  padding:var(--s-2) 0; border-bottom:1px solid var(--edge); color:var(--ink-mute); }
.ring-index .ring .no{ color:var(--gilt-deep); }
.ring-index .ring .name{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-weight:650;
  color:var(--ink); letter-spacing:.1em; text-transform:uppercase; }
.ring-index .ring .tick{ height:1px; background:var(--ink-faint); }
.ring-index .ring .note{ color:var(--ink-mute); }
.ring-index .ring.is-out .no{ color:var(--gilt); }

/* ---- RESOURCE LEDGER ---- */
.ledger{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--edge); border:1px solid var(--edge); margin-top:var(--flow-default); }
.ledger .cell{ background:var(--travertine-hi); padding:var(--s-4) var(--s-2); text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; }
.ledger .glyph{ font-family:var(--f-display); font-size:2.4rem; line-height:1; color:var(--ink); text-shadow:var(--carve-text); }
.ledger .lab{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.ledger .kind{ font-family:var(--f-mono); font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--gilt-deep); }

/* ---- FLOATING TABLET internal readout ---- */
.readout{ display:flex; flex-direction:column; gap:0; margin-top:var(--s-3); }
.readout .r{ display:flex; justify-content:space-between; gap:var(--s-3); align-items:baseline;
  padding:var(--s-2) 0; border-top:1px solid var(--edge); font-family:var(--f-mono); font-size:var(--t-telemetry); }
.readout .r .k{ letter-spacing:var(--track-telemetry); text-transform:uppercase; color:var(--gilt-deep); }
.readout .r .v{ color:var(--ink-mute); }

/* ---- ABSTRACT HAIRLINE MOTIFS ---- */
.motif-svg{ width:100%; max-width:340px; height:auto; }
.motif-svg .ln{ stroke:var(--ink-faint); fill:none; }
.motif-svg .ln-g{ stroke:var(--instr); fill:none; }
.motif-svg .sweep{ transform-origin:center; animation:sweep 16s linear infinite; }
@keyframes sweep{ to{ transform:rotate(360deg); } }
.motif-svg .dot-g{ fill:var(--instr); }
[data-state="terminal"] .motif-svg .ln-g{ stroke:var(--phosphor); }
[data-state="terminal"] .motif-svg .dot-g{ fill:var(--phosphor); }
@media (prefers-reduced-motion:reduce){ .motif-svg .sweep{ animation:none; } }

/* ---- THREAT (centered alert on obsidian; short clean top fade; amber targeting frame) ---- */
.threat{ background:linear-gradient(180deg, #E8E1D2 0%, #0A0A0B 15%, #0A0A0B 100%); }
.threat > .wrap{ min-height:78vh; align-content:center; }
.threat-card{ position:relative; max-width:54ch; margin-inline:auto;
  padding:var(--s-8) var(--s-7); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--flow-default); }
.threat-card .kicker{ color:var(--amber); justify-content:center; }
.threat-card .inscription{ text-align:center; max-width:none; }
.threat-card .lead{ text-align:center; }
.threat-frame{ position:absolute; inset:0; pointer-events:none; opacity:0; transform:scale(1.12); }
.threat-frame .lk{ position:absolute; width:34px; height:34px; border:1.5px solid var(--amber); }
.threat-frame .t{ top:0; left:0; border-right:0; border-bottom:0; }
.threat-frame .r{ top:0; right:0; border-left:0; border-bottom:0; }
.threat-frame .b{ bottom:0; right:0; border-left:0; border-top:0; }
.threat-frame .l{ bottom:0; left:0; border-right:0; border-top:0; }
.threat.is-hot .threat-frame{ animation:lockOn 800ms var(--ease-act) forwards; }
@keyframes lockOn{ 0%{opacity:0;transform:scale(1.12)} 55%{opacity:1} 100%{opacity:1;transform:scale(1)} }
.threat.is-hot .threat-card{ box-shadow:0 0 90px rgba(232,162,60,.09); }
.threat.is-hot .inscription{ animation:threatGlitch 240ms steps(2) 3; }
@keyframes threatGlitch{ 0%{transform:translate(0,0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,0)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-motion:reduce){ .threat-frame{ opacity:1; transform:none; } .threat.is-hot .inscription{ animation:none; } }

/* ---- FRAMED CONCEPT ART (a real, captioned art plate) ---- */
.art-figure{ margin:0; background:var(--travertine-hi); border:1px solid var(--travertine-edge);
  box-shadow:var(--elev-rest); padding:10px; }
.art-figure img{ width:100%; height:auto; display:block; }
.art-figure figcaption{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.06em;
  color:var(--ink-mute); margin-top:10px; padding:0 2px; }

/* ---- CORDON-OPENING CLIMAX ---- */
.cordon-open{ position:relative; overflow:hidden; }
.cordon-open .shaft{ position:absolute; top:0; bottom:0; left:0; right:0; pointer-events:none; z-index:0; --bloom:0;
  background:linear-gradient(90deg,
    transparent 26%,
    rgba(231,225,211, calc(.02 + var(--bloom)*.04)) 50%,
    transparent 74%);
  filter:blur(calc(12px + var(--bloom)*16px)); opacity:calc(.5 + var(--bloom)*.4);
  transition:--bloom 1400ms var(--ease-stone), opacity 1400ms var(--ease-stone), filter 1400ms var(--ease-stone); }
.cordon-open.is-open .shaft{ --bloom:1; }
.cordon-open.committed .shaft{ --bloom:1.6; }
@media (prefers-reduced-motion:reduce){ .cordon-open .shaft{ --bloom:1; transition:none; } }

/* ---- DARK THRESHOLD (enlistment) ---- */
.threshold{ background:var(--obsidian); color:var(--bone); padding-block:var(--s-9); }
.threshold .inscription,.threshold .lead{ color:var(--bone); }
.threshold .enlist-wrap{ margin-top:var(--flow-default); position:relative; z-index:1; }

/* ============================================================
   COLOPHON / FOOTER — de-centered two columns; provenance folded in.
   ============================================================ */
.colophon{ background:var(--obsidian); color:var(--bone); padding-block:var(--s-8);
  min-height:100vh; display:flex; align-items:center; }   /* fully cover the final screen */
.colophon > .wrap{ display:grid; grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));
  column-gap:var(--grid-gutter); align-items:start; width:100%; }
.colophon .valediction{ grid-column:1 / 7; text-align:left; }
.colophon .provenance{ grid-column:8 / 13; text-align:left; }
.colophon .inscription{ color:var(--bone); text-align:left; margin:0 0 var(--flow-default); max-width:none; }
.colophon .signoff{ font-family:var(--f-display); font-style:italic; font-size:var(--t-quote); color:rgba(231,225,211,.9); max-width:32ch; }
.plate{ width:100%; max-width:none; border-top:1px solid var(--obsidian-edge); border-bottom:1px solid var(--obsidian-edge); padding:var(--s-4) 0; }
.plate-line{ font-family:var(--f-prose); font-style:italic; font-size:var(--t-caption); color:rgba(231,225,211,.6); margin-bottom:var(--s-2); }
.plate-mono{ font-family:var(--f-mono); font-size:11px; line-height:2; letter-spacing:.03em; color:rgba(231,225,211,.78);
  white-space:pre-wrap; text-align:left; font-feature-settings:var(--feat-mono); }
.colophon .disclosure{ font-family:var(--f-prose); font-size:var(--t-caption); color:rgba(231,225,211,.6); max-width:none; line-height:1.7; margin-top:var(--flow-default); }
.press{ font-family:var(--f-mono); font-size:9px; letter-spacing:.16em; color:rgba(231,225,211,.5); text-transform:uppercase; margin-top:var(--s-3); }
.press-contact{ font-family:var(--f-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--phosphor);
  background:none; border:0; border-bottom:1px solid var(--phosphor-dim); padding:0 0 2px; cursor:pointer; }
.colophon .carrier{ font-family:var(--f-mono); font-size:9px; letter-spacing:.18em; color:var(--phosphor-dim); text-transform:uppercase; margin-top:var(--s-3); }
.colophon .copyline{ font-family:var(--f-mono); font-size:9px; letter-spacing:.18em; color:rgba(231,225,211,.45); text-transform:uppercase; margin-top:var(--s-2); }
.colophon .powerdown{ grid-column:1 / -1; font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--phosphor);
  text-shadow:0 0 10px var(--phosphor-dim); margin-top:var(--flow-loose); }
@media (max-width:760px){
  .colophon .valediction,.colophon .provenance{ grid-column:1 / -1; }
  .colophon .provenance{ margin-top:var(--flow-loose); }
}

/* ---- responsive rhythm ---- */
@media (max-width:760px){
  .section{ padding:var(--s-7) 0; }
  .descent,.cover{ min-height:92vh; }
  .ledger{ grid-template-columns:repeat(2,1fr); }
  .scroll-cue{ left:var(--s-3); }
}

/* ============================================================
   REDESIGN COMPONENTS — the unit briefing. Text-forward; no
   fabricated UI (the Director is described, never drawn).
   ============================================================ */

/* small framed advisory/section label */
.frame-label{ display:inline-block; font-family:var(--f-mono); font-size:var(--t-telemetry);
  letter-spacing:var(--track-telemetry); text-transform:uppercase; color:var(--gilt-deep);
  border:1px solid var(--edge); padding:6px 12px; }
[data-state="terminal"] .frame-label{ color:var(--amber); border-color:var(--obsidian-edge); }

/* full-bleed concept-art plate caption (sits quietly in a corner) */
.plate-caption{ position:absolute; right:var(--grid-margin); bottom:var(--s-4); z-index:1;
  font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.06em; color:var(--ink-mute); }
[data-state="terminal"] .plate-caption{ color:rgba(231,225,211,.55); }

/* —— HOW YOU PLAY: two panels —— */
.panel-label{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-wide); font-weight:700;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gilt-deep); display:block;
  margin-bottom:var(--flow-tight); }
[data-state="terminal"] .panel-label{ color:var(--phosphor); }

/* route designer wireframe PLACEHOLDER — deliberately a dormant tool, no real map drawn */
.wireframe{ position:relative; border:1px solid var(--edge);
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(26,23,20,.045) 25px 26px),
    repeating-linear-gradient(90deg, transparent 0 25px, rgba(26,23,20,.045) 25px 26px),
    var(--travertine-hi);
  min-height:248px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-2); text-align:center; padding:var(--s-6); margin-top:var(--flow-tight); }
.wireframe .brk{ position:absolute; width:16px; height:16px; border:1.5px solid var(--gilt-deep); }
.wireframe .b1{ top:8px; left:8px; border-right:0; border-bottom:0; }
.wireframe .b2{ top:8px; right:8px; border-left:0; border-bottom:0; }
.wireframe .b3{ bottom:8px; left:8px; border-right:0; border-top:0; }
.wireframe .b4{ bottom:8px; right:8px; border-left:0; border-top:0; }
.wireframe .wf-title{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-weight:650;
  font-size:var(--t-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }
.wireframe .wf-note{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.06em; color:var(--ink-mute); max-width:34ch; }

/* phases (PLAN / RUN / RETURN) */
.phases{ display:flex; flex-direction:column; border-top:1px solid var(--edge); margin-top:var(--flow-default); }
.phase{ display:grid; grid-template-columns:7ch 1fr; gap:var(--s-3); align-items:baseline;
  padding:var(--s-3) 0; border-bottom:1px solid var(--edge); }
.phase .pk{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-weight:700;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gilt-deep); }
.phase .pv{ font-family:var(--f-prose); font-size:var(--t-body); color:var(--ink-soft); line-height:1.5; }

/* the haul ladder (resource tiers, low -> high) */
.haul{ display:flex; flex-direction:column; border:1px solid var(--edge); margin-top:var(--flow-default); }
.haul .tier{ display:grid; grid-template-columns:2.4ch 10ch 1fr; gap:var(--s-3); align-items:baseline;
  padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--edge); background:var(--travertine-hi); }
.haul .tier:last-child{ border-bottom:0; }
.haul .tier .no{ font-family:var(--f-mono); color:var(--gilt-deep); font-size:var(--t-telemetry); }
.haul .tier .nm{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-weight:650;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.haul .tier .ds{ font-family:var(--f-mono); font-size:var(--t-telemetry); color:var(--ink-mute); }
.haul-note{ margin-top:var(--flow-tight); }

/* THE DIRECTOR — text-only engine panel, darker, set apart. NO UI by design. */
.director{ background:var(--obsidian); color:var(--bone); border:1px solid var(--obsidian-edge);
  padding:clamp(var(--s-5), 3vw, var(--s-6)); position:relative; align-self:start; }
.director .panel-label{ color:var(--phosphor); }
.director .director-mark{ font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; color:var(--phosphor-dim);
  text-transform:uppercase; margin-bottom:var(--s-3); }
.director .prose{ color:rgba(231,225,211,.82); max-width:none; }

/* —— THE RECORDS: recovered files on a thin timeline —— */
.records{ position:relative; margin-top:var(--flow-loose); display:flex; flex-direction:column; gap:var(--rest); }
.records::before{ content:""; position:absolute; left:3px; top:8px; bottom:8px; width:1px; background:var(--edge); }
.record{ position:relative; padding-left:var(--s-6); }
.record::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px;
  border:1px solid var(--gilt-deep); background:var(--travertine); }
.record .rec-no{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.18em; color:var(--gilt-deep); }
.record .rec-title{ font-family:var(--f-display); font-weight:500; font-size:var(--t-title); line-height:1.04; color:var(--ink);
  margin:var(--s-1) 0 var(--flow-tight); text-shadow:var(--carve-text); }
.record .prose{ max-width:62ch; }
.record .art-figure{ margin-top:var(--flow-default); max-width:440px; }

/* archive call-to-action link */
.cta-link{ display:inline-flex; align-items:center; gap:var(--s-2); margin-top:var(--flow-loose);
  font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-weight:650;
  font-size:var(--t-ui); letter-spacing:var(--track-ui); text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--gilt-deep); padding-bottom:3px; width:max-content;
  transition:color var(--t-act), border-color var(--t-act); }
.cta-link::after{ content:"\2192"; }
.cta-link:hover{ color:var(--gilt-deep); border-color:var(--gilt); }

/* mid widths: stack the two HOW-YOU-PLAY panels before the Director's column gets too narrow to read */
@media (max-width:1024px){
  #play .play-panel{ grid-column:1 / -1; }
  #play .director{ grid-column:1 / -1; margin-top:var(--flow-loose); }
}

@media (max-width:760px){
  .haul .tier{ grid-template-columns:2.4ch 1fr; }
  .haul .tier .ds{ grid-column:1 / -1; }
  .director{ margin-top:var(--flow-default); }
  .plate-caption{ position:static; display:block; margin-top:var(--s-3); }
}