/* ============================================================
   BASE — reset, type roles, layout primitives, motion CSS.
   Depends on tokens.css. The carved Word is the hero.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:4.5rem; }
body{
  background:var(--ground); color:var(--on-ground);
  font-family:var(--f-prose); font-size:var(--t-body); line-height:var(--lh-body);
  font-feature-settings:var(--feat-prose);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; position:relative;
  transition:background var(--t-stage) var(--ease-stone), color var(--t-stage) var(--ease-stone);
}
body.booting{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--gilt); color:var(--travertine-hi); }
:focus-visible{ outline:var(--active) solid var(--lapis); outline-offset:3px; }
a{ color:inherit; text-decoration:none; }
/* visually hidden but announced by screen readers (NOT aria-hidden) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* —— LAYOUT —— */
.wrap{ width:100%; max-width:var(--content-max); margin:0 auto; padding-inline:var(--grid-margin); }
.section{ position:relative; padding:var(--s-9) 0; border-top:1px solid var(--edge); }
.section:first-of-type{ border-top:0; }
.center{ text-align:center; }

/* —— TYPE ROLES —— */
.kicker{
  font-family:var(--f-mono); font-size:var(--t-telemetry); font-weight:500;
  letter-spacing:var(--track-telemetry); text-transform:uppercase; color:var(--ink-mute);
  display:inline-flex; align-items:center; gap:var(--s-2);
  flex-wrap:wrap; min-width:0; max-width:100%;
}
.kicker::before{ content:""; width:28px; height:1px; background:var(--gilt-deep); flex:none; }
/* kickers may wrap (long designations in narrow cards); the av-clock stays nowrap */
.kicker.decrypt{ white-space:normal; word-break:break-word; }
.lead{
  font-family:var(--f-prose); font-weight:500; font-size:var(--t-lead);
  line-height:var(--lh-lead); color:var(--ink-soft); text-wrap:pretty; max-width:var(--measure-lead);
}
[data-state="terminal"] .lead{ color:var(--bone); }
.prose{ font-size:var(--t-body); line-height:var(--lh-body); color:var(--ink-soft); text-align:left; max-width:var(--measure-prose); text-wrap:pretty; }
[data-state="terminal"] .prose{ color:rgba(231,225,211,.82); }
.prose + .prose{ margin-top:var(--s-3); text-indent:1.6em; }
.caption{ font-family:var(--f-civic); font-size:var(--t-caption); font-weight:500; color:var(--ink-mute); letter-spacing:.01em; }
.mono{ font-family:var(--f-mono); font-feature-settings:var(--feat-mono); font-size:var(--t-telemetry); letter-spacing:.04em; color:var(--ink-mute); }

/* ============================================================
   3.1 SIGNATURE — redaction-retraction reveal + raking sheen
   ============================================================ */
.inscription{
  font-family:var(--f-display); font-weight:500;
  font-size:var(--t-display); line-height:var(--lh-display);
  letter-spacing:var(--track-display); text-align:inherit; color:var(--ink);
  max-width:none; margin:0; position:relative; text-wrap:balance;
}
.inscription.monument{ font-size:var(--t-monument); font-weight:400; line-height:var(--lh-monument);
  letter-spacing:var(--track-monument); max-width:none; }
.ins-line{ display:block; position:relative; overflow:hidden; padding:.04em .08em; }
.ins-line .ins-text{
  display:inline-block; opacity:0; transform:translateY(.14em);
  text-shadow:var(--carve-text);
  transition:opacity calc(var(--t-stage)*.7) var(--ease-stone) 140ms,
             transform calc(var(--t-stage)*.7) var(--ease-stone) 140ms;
}
.ins-line::after{                       /* the basalt censor's bar */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--basalt) 0%,var(--basalt-edge) 50%,var(--basalt) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.5);
  transform:translateX(0); transform-origin:right center;
}
.ins-line.is-revealed .ins-text{ opacity:1; transform:none; }
.ins-line.is-revealed::after{
  transform:translateX(102%);
  transition:transform var(--t-stage) var(--ease-stone);
}
/* a word lit in gilt — the one unconcealed word */
.ins-text .lit{ color:var(--gilt-deep); }
/* dark-state inversion: bar reads as bone over obsidian */
[data-state="terminal"] .ins-line::after{ background:var(--bone); }
[data-state="terminal"] .ins-line .ins-text{ color:var(--bone); text-shadow:none; }
[data-state="terminal"] .ins-text .lit{ color:var(--gilt-hi); }

/* (the old raking sheen was replaced by a per-letter scramble-on-hover/touch; see motion.js)
   carved header letters are split into .gl spans (width-locked so scrambling never reflows the line),
   grouped into .word spans that never break mid-word — without this the inline-block letters wrap at
   any letter on narrow/mobile screens, which looked broken. */
.inscription .word{ white-space:nowrap; }
.inscription .gl{ display:inline-block; text-align:center; }

/* ============================================================
   3.2 BOOT / power-on
   ============================================================ */
.boot{ position:fixed; inset:0; z-index:9999; background:var(--obsidian);
  display:flex; flex-direction:column; justify-content:center; padding:8vh 8vw;
  transition:opacity 900ms var(--ease-stone); }
.boot.is-down{ opacity:0; pointer-events:none; }
.boot-log{ font-family:var(--f-mono); font-size:13px; line-height:2.1; letter-spacing:.04em;
  color:var(--phosphor); text-shadow:0 0 8px var(--phosphor-dim); max-width:62ch; white-space:pre-wrap;
  font-feature-settings:var(--feat-mono); }
.boot-log .ln{ opacity:0; transform:translateY(2px); }
.boot-log .ln.in{ opacity:1; transform:none; transition:opacity 160ms linear, transform 160ms var(--ease-act); }
.boot-log .ok{ color:var(--bone); }
.boot-log .cur{ color:var(--lapis-hi); animation:bootcur 1s steps(2) infinite; }
@keyframes bootcur{ 50%{opacity:0} }
.boot-crt{ position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.5) 2px 3px);
  opacity:.16; animation:bootsettle var(--t-stage) var(--ease-stone) forwards; }
@keyframes bootsettle{ from{opacity:.30} to{opacity:.1} }
/* BEGIN button: hidden while the log prints, revealed once the unit is ready */
.boot-skip{ position:absolute; bottom:11vh; left:50%; transform:translateX(-50%) translateY(10px);
  font-family:var(--f-hud); font-variation-settings:var(--vf-hud-wide); font-weight:700;
  font-size:13px; letter-spacing:.34em; color:var(--phosphor);
  background:none; border:1px solid var(--phosphor); border-radius:var(--radius);
  padding:17px 46px; cursor:pointer; opacity:0; pointer-events:none;
  box-shadow:0 0 0 rgba(111,227,176,0); text-transform:uppercase;
  transition:opacity 600ms var(--ease-stone), transform 600ms var(--ease-stone),
             background var(--t-act), color var(--t-act), box-shadow var(--t-act); }
.boot.ready .boot-skip{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;
  box-shadow:0 0 26px rgba(111,227,176,.22); }
.boot-skip:hover{ background:var(--phosphor); color:var(--obsidian); box-shadow:0 0 34px rgba(111,227,176,.4); }

/* ============================================================
   3.3 WORLD — one graded atmosphere, pure function of --egress.
   The environment rides BEHIND content (z-0); content rides above (z-1).
   ============================================================ */
.world{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
main,.rail,.egress{ position:relative; z-index:1; }
/* NOTE: .boot intentionally excluded here. It must keep its fixed full-screen
   overlay (position:fixed; z-index:9999 below) and cover everything until BEGIN. */

/* LIGHT WASH — static bright marble base (rasterized once) */
.world-ground{ position:absolute; inset:0;
  background:radial-gradient(140% 120% at 50% 18%, #F6F1E7 0%, #E3DBCB 46%, #C9BEA8 100%); }

/* THE NIGHT CLOSING IN — a cheap opacity-only crossfade to obsidian.
   Static gradient, rasterized once; only opacity changes per frame (compositor). */
/* The dark belongs to the dark SECTIONS. This global wash stays at 0 through every
   lit scene (so nothing greys), and only ramps in at the very end as insurance behind
   the solid-obsidian dark scenes. The real light-to-dark turn is the lead-in on .threat. */
.world-dark{ position:absolute; inset:0;
  background:#0A0A0B;
  opacity:clamp(0, calc((var(--egress) - 0.72) / 0.18), 1); }

/* VIGNETTE — also held off the lit scenes; only closes in near the end */
.world-vignette{ position:absolute; inset:0;
  opacity:clamp(0, calc((var(--egress) - 0.6) / 0.4), 1);
  background:radial-gradient(120% 120% at 50% 42%, transparent 42%, rgba(8,7,6,0.92) 100%); }

/* SCANLINE — static CRT lines (no per-frame paint); intensity by opacity only */
.world-scan{ position:absolute; inset:0; opacity:calc(0.05 + var(--grade-scan)*0.22);
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(12,11,10,.5) 2px 3px); background-size:100% 3px; }

/* GRAIN — static film grain, rasterized once; intensity by opacity only */
.world-grain{ position:absolute; inset:0; opacity:calc(0.04 + var(--egress)*0.05);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size:160px 160px; }

/* STRUCTURAL FAILURE — hairline fractures, appear past midpoint */
.world-fail{ position:absolute; inset:0; opacity:var(--grade-fail); mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200' viewBox='0 0 1600 1200'><g stroke='rgba(231,225,211,0.10)' stroke-width='1' fill='none'><path d='M0,300 L420,318 L520,260 L900,300'/><path d='M1600,520 L1180,500 L1080,560 L640,540'/><path d='M200,0 L240,260 L180,360 L260,720'/><path d='M1380,1200 L1340,940 L1420,840 L1360,520'/><path d='M0,900 L380,880 L500,940 L920,910 L1600,940'/></g></svg>");
  background-size:cover; background-position:center; }

/* PARALLAX DEPTH — three layers, transform-only, written by scene.js */
.world-deep{ position:absolute; left:50%; top:0; width:100vmax; height:100vmax; margin-left:-50vmax;
  transform:translate3d(0,var(--par-deep,0px),0); opacity:calc(0.5 - var(--egress)*0.32);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200'><g fill='none' stroke='rgba(124,96,32,0.14)' stroke-width='1'><circle cx='600' cy='600' r='120'/><circle cx='600' cy='600' r='240'/><circle cx='600' cy='600' r='380'/><circle cx='600' cy='600' r='520'/><circle cx='600' cy='600' r='560' stroke-dasharray='2 10'/></g></svg>") center/contain no-repeat; }
.world-mid{ position:absolute; inset:-20% 0; transform:translate3d(0,var(--par-mid,0px),0);
  opacity:calc(0.22 + var(--egress)*0.10);
  background:
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(231,225,211,0.05) 78px 79px),
    repeating-linear-gradient(0deg, transparent 0 78px,rgba(231,225,211,0.05) 78px 79px); }
.world-dust{ position:absolute; inset:-40% -10%; transform:translate3d(0,var(--par-dust,0px),0);
  opacity:calc(var(--grade-dust)*0.5);
  background-image:
    radial-gradient(circle at 20% 30%,rgba(231,225,211,0.7) 0 1px,transparent 1.5px),
    radial-gradient(circle at 70% 60%,rgba(231,225,211,0.5) 0 1px,transparent 1.5px),
    radial-gradient(circle at 45% 85%,rgba(231,225,211,0.6) 0 1px,transparent 1.5px);
  background-size:340px 340px,220px 220px,480px 480px; }

@media (max-width:760px){ .world-deep,.world-mid{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .world-scan,.world-grain{ animation:none; }
  .world-deep,.world-mid,.world-dust{ transform:none; }
}

/* ============================================================
   HUD DISPLAY VOICE — Archivo wide, the machine names the operation.
   Cormorant is the soul (the carved Word); Archivo is the instrument.
   ============================================================ */
/* ============================================================
   3.4 DECRYPT reveal for mono telemetry
   ============================================================ */
.decrypt{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.06em;
  color:var(--ink-soft); font-feature-settings:var(--feat-mono); white-space:nowrap; }
[data-state="terminal"] .decrypt{ color:var(--phosphor); text-shadow:0 0 10px var(--phosphor-dim); }

/* ============================================================
   3.5 TILT + BREATHE on floating panels
   ============================================================ */
.tablet{ perspective:1400px; --rx:0deg; --ry:0deg; }
.tablet-inner{ background:linear-gradient(180deg,var(--travertine-hi),var(--travertine-lo));
  border:1px solid var(--travertine-edge); box-shadow:var(--elev-rest);
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d;
  transition:transform 600ms var(--ease-stone); animation:breathe 7s ease-in-out infinite;
  padding:var(--s-5); }
.tablet[data-tilting] .tablet-inner{ transition:transform 90ms linear; will-change:transform; }
@keyframes breathe{ 0%,100%{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) scale(1)}
  50%{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px) scale(1.004)} }
[data-state="terminal"] .tablet-inner{ background:linear-gradient(180deg,var(--obsidian-raised),var(--obsidian));
  border-color:var(--obsidian-edge); box-shadow:0 30px 70px rgba(0,0,0,.6); }

/* —— RETICLE BRACKETS (open corners, never closed boxes) —— */
.reticle{ position:relative; }
.reticle .brk{ position:absolute; width:14px; height:14px; border:var(--rule) solid var(--gilt-deep); pointer-events:none; }
.reticle .b1{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.reticle .b2{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.reticle .b3{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.reticle .b4{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
[data-state="terminal"] .reticle .brk{ border-color:var(--phosphor-dim); }

/* ============================================================
   3.6 MAGNETIC GILT "SEAL" CTA + foil sweep
   ============================================================ */
.seal{ position:relative; overflow:hidden; font-family:var(--f-mono); font-weight:600; font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
  background:linear-gradient(180deg,#F1ECE1,var(--travertine-lo)); border:1.5px solid var(--gilt-deep);
  border-radius:var(--radius); padding:18px 38px; cursor:pointer; --mx:0px; --my:0px;
  transform:translate(var(--mx),var(--my)); box-shadow:0 10px 26px -14px rgba(26,23,20,.5);
  transition:transform var(--t-act) var(--ease-act), box-shadow var(--t-act) var(--ease-act), border-color var(--t-act); }
.seal-foil{ position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen; opacity:.6;
  background:linear-gradient(105deg,transparent 30%,rgba(214,184,120,0) 40%,rgba(214,184,120,.85) 50%,
    rgba(255,243,214,.95) 53%,rgba(214,184,120,.85) 56%,transparent 70%);
  background-size:260% 100%; background-repeat:no-repeat; background-position:160% 0;
  animation:foilDrift 5.5s linear infinite; }
@keyframes foilDrift{ from{background-position:160% 0} to{background-position:-60% 0} }
.seal-label{ position:relative; z-index:2; display:inline-block; transform:translate(calc(var(--mx)*.4),calc(var(--my)*.4)); }
.seal:hover{ border-color:var(--gilt); box-shadow:0 16px 34px -14px rgba(176,138,62,.55); }
.seal:hover .seal-foil{ animation-duration:1.6s; opacity:.95; }
.seal:active{ transform:translate(var(--mx),var(--my)) scale(.985); transition-duration:90ms; }
.seal:disabled{ cursor:default; opacity:.6; }
[data-state="terminal"] .seal{ color:var(--bone); background:linear-gradient(180deg,#1c1915,#100e0c); border-color:var(--gilt); }

/* —— AUDIO TOGGLE (off by default; honest) —— */
.audio-toggle{ display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:var(--track-telemetry);
  text-transform:uppercase; color:var(--ink-mute); background:none; border:1px solid var(--edge);
  padding:10px 16px; cursor:pointer; transition:border-color var(--t-act), color var(--t-act); }
.audio-toggle:hover{ border-color:var(--gilt-deep); color:var(--ink-soft); }
.audio-toggle .dot{ width:7px; height:7px; border:1px solid currentColor; border-radius:var(--radius-seal); }
.audio-toggle[aria-pressed="true"]{ color:var(--verdigris-deep); border-color:var(--verdigris); }
.audio-toggle[aria-pressed="true"] .dot{ background:var(--verdigris); border-color:var(--verdigris); }
[data-state="terminal"] .audio-toggle{ color:var(--bone); }
[data-state="terminal"] .audio-toggle[aria-pressed="true"]{ color:var(--phosphor); border-color:var(--phosphor); }
[data-state="terminal"] .audio-toggle[aria-pressed="true"] .dot{ background:var(--phosphor); border-color:var(--phosphor); }

/* ============================================================
   ENLIST PANEL — the capture (diegetic)
   ============================================================ */
.enlist{ display:flex; flex-direction:column; gap:var(--s-3); max-width:540px; margin-inline:auto; }
/* honeypot: kept in the DOM and off-screen (not display:none, which naive bots skip) */
.hp-field{ position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
/* Turnstile slot (only populated when a site key is configured) */
.enlist-ts{ margin-top:var(--s-2); }
.enlist-ts:empty{ display:none; }
/* align to the bottom so the seal matches the INPUT height, not label+input (no giant button) */
.enlist-row{ display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:flex-end; }
.enlist-row .seal{ padding-block:14px; }
.enlist-field{ flex:1 1 280px; display:flex; flex-direction:column; gap:var(--s-1); text-align:left; }
.enlist-field label{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:var(--track-telemetry);
  text-transform:uppercase; color:var(--ink-mute); }
[data-state="terminal"] .enlist-field label{ color:var(--bone); }
.enlist-field input{ font-family:var(--f-mono); font-size:14px; letter-spacing:.02em; color:var(--on-ground);
  background:var(--travertine-lo); border:1px solid var(--edge); border-radius:var(--radius);
  padding:15px 16px; transition:border-color var(--t-act); }
.enlist-field input::placeholder{ color:var(--ink-mute); opacity:.7; }
.enlist-field input:focus{ outline:none; border-color:var(--gilt); }
[data-state="terminal"] .enlist-field input{ background:#100e0c; border-color:var(--obsidian-edge); color:var(--bone); }
[data-state="terminal"] .enlist-field input:focus{ border-color:var(--phosphor); }
.enlist-status{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.08em;
  min-height:1.4em; text-align:left; }
.enlist-status[data-tone="ok"]{ color:var(--verdigris-deep); }
.enlist-status[data-tone="err"]{ color:var(--gilt-deep); }
.enlist-status[data-tone="pending"]{ color:var(--ink-mute); }
[data-state="terminal"] .enlist-status[data-tone="ok"]{ color:var(--phosphor); }
[data-state="terminal"] .enlist-status[data-tone="err"]{ color:var(--amber); }
.enlist-note{ font-family:var(--f-prose); font-style:italic; font-size:var(--t-caption); color:var(--ink-mute); text-align:left; }
[data-state="terminal"] .enlist-note{ color:rgba(231,225,211,.6); }
.enlist-confirm{ font-family:var(--f-display); font-size:var(--t-title); color:var(--gilt-deep); text-align:center; }
[data-state="terminal"] .enlist-confirm{ color:var(--phosphor); }

/* —— NARROW SCREENS: let mono kickers wrap rather than clip —— */
@media (max-width:760px){
  .kicker{ white-space:normal; }
  .kicker.decrypt{ white-space:normal; word-break:break-word; }
  .kicker::before{ display:none; }
  .wrap{ padding:0 var(--s-3); }
}

/* —— REDUCED MOTION: ensure inscriptions present, atmosphere static —— */
@media (prefers-reduced-motion: reduce){
  .ins-line .ins-text{ opacity:1; transform:none; }
  .ins-line::after{ display:none; }
  .tablet-inner{ animation:none; transform:none; }
  .seal-foil{ animation:none; background-position:50% 0; }
}