/* ============================================================
   CASTRALIS // SYSTEM DOSSIER
   Style: Blueprint Dossier / Tactical HUD (OLED dark)
   ============================================================ */

:root{
  /* ---- CANON PALETTE (brand-canon §4.1) ----
     Deep Navy #13294B · Slate #26303F · Ice Blue #C9D7EC · Amber-Bronze #B5660A · White
     Base is deepened navy (not pure black) so the blueprint depth reads as institutional
     navy; the kept glow layer still lifts off it. */
  /* founder pref: near-black base (darker than canon's Deep Navy) so the glow layer reads;
     canon navy/slate live in the elevated panels + accents above it */
  --void:#03060d;
  --bg:#060912;        /* near-black navy — page ground */
  --bg-2:#0a1424;      /* deep navy — structural fields, section alternation */
  --panel:#0c1322;     /* panel */
  --panel-2:#101d33;   /* elevated navy panel */
  --elev:#13233d;

  /* lines / grid — Ice Blue biased */
  --grid:rgba(201,215,236,.07);
  --grid-strong:rgba(201,215,236,.14);
  --border:rgba(201,215,236,.18);
  --border-soft:rgba(201,215,236,.11);

  /* text */
  --ink:#FFFFFF;       /* White — technical readability */
  --ink-2:#C9D7EC;     /* Ice Blue — body/secondary, schematic notation */
  --muted:#8ea3c2;     /* lightened to hold contrast at small sizes */
  --faint:#5b6f90;     /* decoration only — never readable body text */

  /* accent — the exclusive amber-bronze energy point */
  --gold:#B5660A;
  --gold-hi:#e39433;
  --gold-deep:#7c4406;
  --gold-glow:rgba(181,102,10,.45);

  /* status — canon allows amber + white only (no red/green) */
  --cyan:#C9D7EC;      /* canon has no cyan → schematic/thermal is Ice Blue */
  --alert:#B5660A;     /* validation errors render in amber-bronze */
  --ok:#C9D7EC;        /* success/live renders in ice-blue/white */

  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --f-disp:"Inter", system-ui, sans-serif;              /* titles / display headings only */
  --f-body:"JetBrains Mono", ui-monospace, monospace;   /* body — reverted to original mono */
  --f-mono:"JetBrains Mono", ui-monospace, monospace;   /* labels / data / metrics */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html[data-state="boot"]{overflow:hidden}

body{
  font-family:var(--f-mono);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* subtle global scanline + vignette (top overlay, very faint) */
body::before{
  content:"";position:fixed;inset:0;z-index:40;pointer-events:none;
  background:
    radial-gradient(130% 130% at 50% 50%, transparent 58%, rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.035) 2px 3px);
}

::selection{background:var(--gold);color:#0a0a0a}

/* living blueprint grid — data-packet canvas overlay (subtle, recedes behind content) */
#gridfx{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.5}

/* CTA scan-sweep on hover (gold buttons) */
.nav__key{overflow:hidden}
.nav__key::before,.submit::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-130%)}
.nav__key:hover::before,.submit:hover::before{animation:ctaScan .7s var(--ease)}
@keyframes ctaScan{to{transform:translateX(130%)}}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
img{max-width:100%;display:block}

/* narrative prose — institutional serif (canon §4.2); HUD labels/data stay mono */
.hero__abstract,.doctrine__lede,.doctrine__body,.capital__lede,
.mod__lede,.aud p,.xcap__txt p,.gateway__copy,.schem__note{
  font-family:var(--f-body);
  letter-spacing:0;
}

/* ---------- shared atoms ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
.ok{color:var(--ok)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold-glow);display:inline-block;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.grid-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 30%, #000 30%, transparent 85%);
          mask-image:radial-gradient(120% 100% at 50% 30%, #000 30%, transparent 85%);
}
.grid-bg--stage{background-size:64px 64px;opacity:.7}

/* ============================================================
   BOOT / DECRYPT OVERLAY
   ============================================================ */
.boot{
  position:fixed;inset:0;z-index:1000;background:var(--void);
  display:grid;place-items:center;transition:opacity .7s var(--ease), visibility .7s;
}
.boot.is-done{opacity:0;visibility:hidden;pointer-events:none}
.boot__frame{width:min(560px,86vw);padding:30px;border:1px solid var(--border);background:linear-gradient(180deg,var(--panel),var(--bg))}
.boot__brand{display:flex;align-items:center;gap:14px;font-family:var(--f-disp);font-weight:700;letter-spacing:.34em;font-size:18px;color:var(--ink)}
.boot__mark{width:18px;height:18px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 16px var(--gold-glow)}
.boot__log{margin:22px 0 18px;font-size:12px;line-height:1.9;color:var(--ink-2);white-space:pre-wrap;min-height:122px}
.boot__log .g{color:var(--ok)}
.boot__log .a{color:var(--gold)}
.boot__bar{height:3px;background:rgba(255,255,255,.06);overflow:hidden}
.boot__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));box-shadow:0 0 14px var(--gold-glow)}
.boot__meta{display:flex;justify-content:space-between;margin-top:12px;font-size:11px;letter-spacing:.14em;color:var(--muted)}

/* ============================================================
   PERSISTENT HUD CHROME
   ============================================================ */
.chrome{
  position:fixed;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);
  transition:background .4s var(--ease), border-color .4s, padding .4s;
}
.chrome--top{top:0}
.chrome.is-stuck{
  background:linear-gradient(180deg, rgba(6,9,18,.92), rgba(6,9,18,.55));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  padding-top:12px;padding-bottom:12px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand__mark{color:var(--ink-2);display:grid;place-items:center;transition:transform .6s var(--ease)}
.brand:hover .brand__mark{transform:rotate(90deg)}
.brand__type{font-family:var(--f-disp);font-weight:700;letter-spacing:.32em;font-size:16px}
.nav{display:flex;gap:26px;font-size:11px;letter-spacing:.18em;color:var(--muted)}
.nav a{position:relative;padding:6px 0;transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{width:100%}
.nav__key{color:var(--gold);border:1px solid var(--border);padding:7px 14px!important;transition:background .25s,color .25s,border-color .25s}
.nav__key::after{display:none}
.nav__key:hover{background:var(--gold);color:#0a0a0a;border-color:var(--gold)}

/* side progress rail */
/* thin, edge-hugging rail: numbers only (the section NAME is shown in the bottom status bar),
   pinned into the page gutter so it never reaches into content. Hover reveals the label as an
   overlay that does NOT take layout width, so it still can't push into the cards. */
.rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:55;display:flex;gap:10px;align-items:stretch;pointer-events:none}
.rail__line{width:1px;background:linear-gradient(var(--border),transparent);align-self:stretch}
.rail__ticks{list-style:none;display:flex;flex-direction:column;gap:22px;pointer-events:auto}
.rail__ticks li{position:relative;display:flex;align-items:center;font-size:9px;letter-spacing:.1em;color:var(--faint);transition:color .3s;cursor:default}
.rail__ticks li b{font-family:var(--f-disp);font-weight:600;color:inherit;font-variant-numeric:tabular-nums}
/* label as a hover/active overlay — absolute so it adds no width to the rail */
.rail__ticks li span{position:absolute;left:calc(100% + 10px);white-space:nowrap;padding:2px 8px;
  background:var(--panel);border:1px solid var(--border-soft);color:var(--ink-2);
  opacity:0;transform:translateX(-4px);pointer-events:none;transition:opacity .25s,transform .25s}
.rail__ticks li:hover span{opacity:1;transform:none}
.rail__ticks li.is-active{color:var(--gold)}

/* top-right ident */
.ident{position:fixed;right:clamp(20px,5vw,64px);top:74px;z-index:50;display:flex;flex-direction:column;gap:3px;text-align:right;font-size:10px;letter-spacing:.14em;color:var(--muted)}
.ident__state b{color:var(--gold)}

/* ============================================================
   ACTS / SECTIONS
   ============================================================ */
.act{position:relative;z-index:2}

/* ---------- ACT 01 HERO ---------- */
.act--hero{min-height:100vh;min-height:100dvh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(120% 80% at 80% 10%, rgba(20,32,58,.5), transparent 60%)}
.hero{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;padding:140px clamp(20px,5vw,64px) 80px;width:100%}
.hero__tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.22em;color:var(--ink-2);border:1px solid var(--border-soft);padding:8px 14px;margin-bottom:38px;background:rgba(12,19,34,.5)}
.hero__title{font-family:var(--f-disp);font-weight:600;line-height:.96;letter-spacing:.01em;font-size:clamp(46px,9vw,150px);margin-bottom:40px}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .line__in{display:block}
/* CSS-driven entrance (deterministic; gated on .js so no-JS still shows content) */
.js .hero__title .line__in{transform:translateY(116%);transition:transform .95s var(--ease)}
.js .hero__tag,.js .hero__abstract,.js .hero__cue{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hero.is-revealed .line__in{transform:none}
.hero.is-revealed .line:nth-child(2) .line__in{transition-delay:.12s}
.hero.is-revealed .hero__tag{opacity:1;transform:none;transition-delay:.05s}
.hero.is-revealed .hero__abstract{opacity:1;transform:none;transition-delay:.32s}
.hero.is-revealed .hero__abstract--accent{transition-delay:.44s}
.hero.is-revealed .hero__cue{opacity:1;transform:none;transition-delay:.6s}
.hero__title em{font-style:normal;color:var(--gold);text-shadow:0 0 40px var(--gold-glow)}
.hero__abstract{max-width:62ch;font-size:clamp(14px,1.45vw,17px);color:var(--ink-2);margin-bottom:20px}
.hero__abstract--accent{color:var(--ink)}
.hero__abstract--accent strong{color:var(--gold)}
.hero__cue{display:flex;align-items:center;gap:14px;margin-top:48px;font-size:10px;letter-spacing:.24em;color:var(--muted)}
.hero__cue-line{height:1px;width:120px;background:linear-gradient(90deg,var(--gold),transparent);position:relative;overflow:hidden}
.hero__cue-line::after{content:"";position:absolute;inset:0;width:30%;background:var(--gold-hi);animation:sweepX 2.2s var(--ease) infinite}
@keyframes sweepX{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}

/* ============================================================
   ACT 02 — PINNED STAGE (the signature)
   ============================================================ */
.act--stage{background:linear-gradient(180deg, var(--bg), var(--void) 50%, var(--bg))}
.stage{position:relative}
.stage__sticky{
  position:sticky;top:0;height:100vh;height:100dvh;
  display:grid;place-items:center;overflow:hidden;
}
.stage__steps{position:relative;z-index:-1}
.stage__step{height:100vh}

/* the rig holds the node perfectly still */
.rig{position:relative;z-index:3;width:min(46vh,440px);aspect-ratio:1;display:grid;place-items:center;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.7))}
.rig__halo{position:absolute;inset:-22%;border-radius:50%;
  background:radial-gradient(circle, var(--gold-glow), transparent 62%);
  opacity:.5;filter:blur(20px);animation:breathe 6s var(--ease) infinite}
@keyframes breathe{0%,100%{opacity:.32;transform:scale(.96)}50%{opacity:.6;transform:scale(1.04)}}

.node{position:relative;width:100%;height:100%;display:grid;place-items:center;
  transform:rotateX(8deg) rotateZ(0deg);transform-style:preserve-3d;
  transition:transform .2s linear}
.node__svg{width:100%;height:100%;overflow:visible}
.node__photo{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;z-index:4;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.node__scan{position:absolute;left:14%;right:14%;top:14%;height:2px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);opacity:.7;
  animation:scanY 4.5s var(--ease) infinite}
@keyframes scanY{0%{transform:translateY(0);opacity:0}10%{opacity:.8}50%{transform:translateY(2400%);opacity:.8}60%,100%{opacity:0;transform:translateY(2600%)}}

/* HUD leader lines + telemetry corners */
.hud{position:absolute;inset:0;z-index:2;pointer-events:none}
.hud__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hud__lines .lead{fill:none;stroke:var(--border);stroke-width:1;stroke-dasharray:4 5;opacity:.35;transition:stroke .4s,opacity .4s,stroke-width .4s}
.hud__lines .lead.is-hot{stroke:var(--gold);opacity:.9;stroke-width:1.4;stroke-dasharray:none}
.hud__corner{position:absolute;display:flex;flex-direction:column;gap:2px;font-size:10px;letter-spacing:.12em;color:var(--muted);transition:color .4s,transform .4s}
.hud__corner b{font-family:var(--f-disp);font-weight:600;font-size:15px;color:var(--ink);transition:color .4s,text-shadow .4s}
.hud__corner.is-hot b{color:var(--gold);text-shadow:0 0 18px var(--gold-glow)}
.hud__corner--tl{left:2%;top:6%;text-align:left}
.hud__corner--tr{right:2%;top:6%;text-align:right;align-items:flex-end}
.hud__corner--bl{left:2%;bottom:6%;text-align:left}
.hud__corner--br{right:2%;bottom:6%;text-align:right;align-items:flex-end}

/* streaming readout */
.readout{position:absolute;z-index:4;right:clamp(20px,6vw,90px);top:50%;transform:translateY(-50%);
  width:min(46ch,42vw);pointer-events:none}
.readout__head{margin-bottom:30px}
.readout__sub{font-size:10px;letter-spacing:.2em;color:var(--muted)}
.readout__h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(20px,2.6vw,34px);line-height:1.04;margin-top:10px;letter-spacing:0}
.panel{position:absolute;left:0;right:0;top:96px;opacity:0;transform:translateY(26px);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.panel.is-active{opacity:1;transform:none}
.panel__idx{font-family:var(--f-disp);font-weight:700;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--border);opacity:.7;margin-bottom:6px}
.panel__kicker{font-size:10px;letter-spacing:.22em;color:var(--gold)}
.panel__title{font-family:var(--f-disp);font-weight:700;font-size:clamp(34px,5vw,60px);line-height:1;margin:6px 0 18px;letter-spacing:0}
.panel__body{font-size:13.5px;color:var(--ink-2);margin-bottom:16px}
.panel__mandate{font-size:13px;color:var(--ink);border-left:2px solid var(--gold);padding-left:14px}
.panel__mandate span{color:var(--gold);font-weight:700;letter-spacing:.1em}

.stage__meter{position:absolute;left:0;bottom:0;width:100%;height:2px;background:rgba(255,255,255,.05);z-index:6}
.stage__meter-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));box-shadow:0 0 12px var(--gold-glow)}

/* ============================================================
   ACT 03 — PRAESIDIUM EXPLODED SCHEMATIC (pinned)
   ============================================================ */
.schem{position:relative}
.schem__sticky{position:sticky;top:0;height:100vh;height:100dvh;display:grid;place-items:center;overflow:hidden}
.schem__steps{position:relative;z-index:-1}
.schem__steps > div{height:100vh}
.schem__stage{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,64px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center}
.schem__diagram{position:relative;display:grid;place-items:center}
.schem__svg{width:100%;max-width:560px;height:auto;overflow:visible;filter:drop-shadow(0 40px 70px rgba(0,0,0,.6))}
.schem__hint{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.24em;color:var(--muted);opacity:.7;white-space:nowrap;transition:opacity .4s}
.schem__hint.is-hidden{opacity:0}

/* schematic line-art tokens (controlled from JS via classes) */
.schem__svg .face-top{fill:rgba(90,120,160,.10);stroke:#46618a;stroke-width:1.1}
.schem__svg .face-r{fill:rgba(8,13,24,.66);stroke:#33486b;stroke-width:1.1}
.schem__svg .face-l{fill:rgba(18,28,46,.5);stroke:#33486b;stroke-width:1.1}
.schem__svg .detail{fill:none;stroke:#5a7398;stroke-width:.8;opacity:.75;stroke-linecap:round}
.schem__svg .port{fill:rgba(201,215,236,.14);stroke:#C9D7EC;stroke-width:.7}
.schem__svg .axis{stroke:#3a4d6e;stroke-width:.8;stroke-dasharray:3 5;opacity:.5}
.schem__svg .tag{fill:var(--muted);font-family:var(--f-mono);font-size:12px;letter-spacing:.1em}
.schem__svg .tick{stroke:#46618a;stroke-width:1}
.schem__svg .lyr{transition:none}
.schem__svg .lyr.is-on .face-top{fill:rgba(181,102,10,.14);stroke:var(--gold)}
.schem__svg .lyr.is-on .face-r,.schem__svg .lyr.is-on .face-l{stroke:var(--gold-deep)}
.schem__svg .lyr.is-on .detail{stroke:var(--gold-hi);opacity:.95}
.schem__svg .lyr.is-on .tag{fill:var(--gold)}
.schem__svg .lyr.is-on .tick{stroke:var(--gold)}
.schem__svg .gem{fill:url(#schemGem);stroke:#ffe6ad;stroke-width:1}

.schem__panel{position:relative;z-index:4}
.schem__title{font-family:var(--f-disp);font-weight:600;font-size:clamp(26px,3.4vw,44px);line-height:1.02;margin:12px 0 16px;letter-spacing:0}
.schem__note{font-size:13.5px;color:var(--ink-2);max-width:42ch;margin-bottom:26px}
.schem__calls{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border-soft)}
.call{display:flex;gap:16px;padding:16px 4px;border-bottom:1px solid var(--border-soft);opacity:.4;transform:translateX(-6px);transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .45s}
.call.is-on{opacity:1;transform:none;border-color:var(--border)}
.call__no{font-family:var(--f-disp);font-weight:700;font-size:14px;color:var(--muted);border:1px solid var(--border-soft);width:32px;height:32px;display:grid;place-items:center;flex:none;transition:color .4s,border-color .4s}
.call.is-on .call__no{color:var(--gold);border-color:var(--gold)}
.call h4{font-family:var(--f-disp);font-weight:600;font-size:15px;letter-spacing:.04em;margin-bottom:5px;color:var(--ink)}
.call p{font-size:12.5px;color:var(--ink-2)}
.schem__dims{display:flex;justify-content:space-between;margin-top:22px;font-size:10px;letter-spacing:.16em;color:var(--faint)}

/* smooth highlight transitions on the shared iso SVG */
.schem__svg .face-top,.schem__svg .face-r,.schem__svg .face-l,.schem__svg .detail,.schem__svg .tag,.schem__svg .tick{transition:fill .4s var(--ease),stroke .4s var(--ease),opacity .4s var(--ease)}

/* ============================================================
   DOCTRINE — meaning of the name (Roman castra)
   ============================================================ */
.act--doctrine{padding:clamp(80px,12vh,150px) 0;background:linear-gradient(180deg,var(--bg-2),var(--bg));overflow:hidden}
.doctrine{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,6vw,80px);align-items:center;position:relative;z-index:2}
.doctrine__plan{position:relative;display:grid;place-items:center}
.doctrine__plan svg{width:100%;max-width:290px;height:auto}
.doctrine__plan-cap{display:block;text-align:center;margin-top:14px;font-size:9px;letter-spacing:.2em;color:var(--faint)}
.doctrine__h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(26px,4vw,46px);line-height:1.04;letter-spacing:0;margin:12px 0 22px}
.doctrine__lede{font-size:clamp(15px,1.7vw,18px);color:var(--ink);margin-bottom:18px;max-width:60ch;line-height:1.7}
.doctrine__lede em,.doctrine__body strong{color:var(--gold);font-style:normal;font-weight:700}
.doctrine__body{font-size:14px;color:var(--ink-2);max-width:62ch;margin-bottom:30px}
.lexicon{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--border-soft);background:var(--border-soft)}
.lex{display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--panel)}
.lex dt{font-family:var(--f-disp);font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--gold)}
.lex dd{font-size:12.5px;color:var(--ink)}
.lex dd span{display:block;color:var(--muted);font-size:11px;margin-top:2px}

/* castrum plan line-art */
#castrumSvg .wall{fill:none;stroke:#46618a;stroke-width:1.4}
#castrumSvg .wall2{fill:none;stroke:#2f4458;stroke-width:1;opacity:.6}
#castrumSvg .road{stroke:#C9D7EC;stroke-width:1;opacity:.5}
#castrumSvg .blk{fill:rgba(90,120,160,.08);stroke:#46618a;stroke-width:1}
#castrumSvg .tower{fill:rgba(8,13,24,.6);stroke:#46618a;stroke-width:1}
#castrumSvg .lbl{fill:var(--faint);font-family:var(--f-mono);font-size:8px;letter-spacing:.12em}
#castrumSvg .ctr{fill:var(--gold)}
/* draw-on + term-to-fort highlight */
#castrumSvg .wall,#castrumSvg .wall2,#castrumSvg .road,#castrumSvg .blk,#castrumSvg .tower{transition:stroke .25s,fill .25s}
#castrumSvg .cx-hot{stroke:var(--gold);stroke-opacity:1;opacity:1}
#castrumSvg .blk.cx-hot{fill:rgba(181,102,10,.16)}
#castrumSvg .cx-pulse{stroke:rgba(201,215,236,.95);stroke-width:2;stroke-linecap:round;pointer-events:none}
.lex{transition:background .25s,border-color .25s}
.lex.is-linked{background:var(--panel-2)}
.lex.is-linked dt{color:var(--gold-hi)}

/* ============================================================
   ACT 02 — EXPLODED TRIAD (horizontal, piece-by-piece)
   ============================================================ */
.act--xtriad{background:linear-gradient(180deg,var(--bg),var(--void) 50%,var(--bg))}
.xtriad{position:relative}
.xtriad__steps{position:relative;z-index:-1}
.xtriad__steps > div{height:100vh}
.xstage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:auto 1fr;
  align-content:center;align-items:center;justify-items:center;
  padding:52px clamp(20px,5vw,64px) clamp(66px,10vh,130px);
  gap:clamp(8px,1.6vh,18px) clamp(24px,4vw,60px)}
.xstage__head{grid-column:1/-1;text-align:center;z-index:3}
.xstage__h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(22px,3.4vw,40px);letter-spacing:0;margin-top:10px}
.xstage__hint{display:inline-block;margin-top:14px;font-size:10px;letter-spacing:.24em;color:var(--muted);transition:opacity .4s}
.xstage__hint.is-hidden{opacity:0}
.xbox{grid-column:1;grid-row:2;position:relative;z-index:2;width:100%;display:grid;place-items:center;perspective:1400px;transform:translateX(var(--x,0))}
/* WebGL stage */
.xbox__stage{width:100%;max-width:920px;height:clamp(230px,40vh,500px);position:relative;overflow:hidden}
.xbox__stage canvas{display:block;width:100%!important;height:100%!important;animation:holoFlicker 5.5s linear infinite}
/* hologram scan sweep over the node */
.xbox__stage::after{content:"";position:absolute;left:10%;right:10%;top:0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(201,215,236,.5),transparent);animation:holoScan 6s ease-in-out infinite}
@keyframes holoFlicker{0%,100%{opacity:1}46%{opacity:1}48%{opacity:.95}50%{opacity:1}88%{opacity:1}90%{opacity:.92}92%{opacity:1}}
@keyframes holoScan{0%{top:8%;opacity:0}12%{opacity:.7}88%{opacity:.7}100%{top:88%;opacity:0}}
/* SVG fallback (shown only if WebGL unavailable) */
.xbox__svg{width:100%;max-width:860px;height:auto;max-height:42vh;overflow:visible;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.6));transform-origin:50% 56%;
  animation:xidle 11s ease-in-out infinite}
.xbox__svg.is-fallback{display:none}
.xbox.show-svg .xbox__stage{display:none}
.xbox.show-svg .xbox__svg.is-fallback{display:block}
@keyframes xidle{
  0%,100%{transform:translateY(0) rotateZ(-.9deg) rotateY(-5deg)}
  50%{transform:translateY(-9px) rotateZ(.9deg) rotateY(5deg)}
}
.xcaption{grid-column:2;grid-row:2;justify-self:start;align-self:center;position:relative;z-index:3;width:100%;max-width:560px;min-height:172px}
.xcap{position:absolute;inset:0;display:flex;gap:22px;align-items:flex-start;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.xcap.is-on{opacity:1;transform:none}
.xcap__no{font-family:var(--f-disp);font-weight:700;font-size:clamp(34px,5vw,58px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--gold);flex:none}
.xcap__kicker{font-size:10px;letter-spacing:.22em;color:var(--gold)}
.xcap__title{font-family:var(--f-disp);font-weight:700;font-size:clamp(26px,4vw,44px);line-height:1;margin:4px 0 12px;letter-spacing:0}
.xcap__txt p{font-size:14px;color:var(--ink-2);max-width:62ch;line-height:1.65}
.xcap__txt p b{color:var(--gold);font-weight:700}

/* ============================================================
   ACT 03 — MODULES

/* ============================================================
   ACT 03 — MODULES
   ============================================================ */
.act--modules{padding:clamp(90px,14vh,180px) 0;background:var(--bg)}
.sec-head{margin-bottom:64px;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
.sec-head__sub{font-size:11px;letter-spacing:.2em;color:var(--gold)}
.sec-head__h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(26px,4vw,48px);line-height:1.04;margin-top:12px;letter-spacing:0;max-width:24ch}

.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mod{position:relative;border:1px solid var(--border-soft);background:linear-gradient(180deg,var(--panel),rgba(8,12,22,.6));padding:30px 26px 34px;overflow:hidden;transition:border-color .4s,transform .4s,box-shadow .4s}
.mod::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.mod:hover{border-color:var(--border);transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.mod:hover::before{transform:scaleX(1)}
.mod__head{padding-bottom:18px;border-bottom:1px solid var(--border-soft);margin-bottom:18px}
.mod__spec{font-size:10px;letter-spacing:.2em;color:var(--muted)}
.mod__name{font-family:var(--f-disp);font-weight:700;font-size:clamp(28px,3.2vw,40px);letter-spacing:.04em;margin:8px 0 6px;color:var(--ink)}
.mod__class{font-size:11px;letter-spacing:.04em;color:var(--gold)}
.mod__lede{font-size:13.5px;color:var(--ink-2);margin-bottom:20px}
.spec{display:flex;flex-direction:column;gap:14px}
.spec div{display:flex;flex-direction:column;gap:4px}
.spec dt{font-size:10px;letter-spacing:.16em;color:var(--gold);opacity:.85}
.spec dd{font-size:12.5px;color:var(--ink-2)}

.mesh{height:96px;margin-top:22px;border:1px solid var(--border-soft);background:var(--void);position:relative;overflow:hidden}
.telem{margin-top:22px;display:flex;flex-direction:column;gap:1px;border:1px solid var(--border-soft);background:var(--void)}
.telem__row{display:flex;justify-content:space-between;padding:9px 12px;font-size:11px;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--border-soft)}
.telem__row:last-child{border-bottom:0}
.telem__row b{font-family:var(--f-disp);color:var(--ink)}

/* ============================================================
   ACT 04 — CAPITAL
   ============================================================ */
.act--capital{padding:clamp(90px,14vh,180px) 0;background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.capital__lede{max-width:74ch;font-size:clamp(15px,1.7vw,19px);color:var(--ink);margin:0 auto 56px;text-align:center;line-height:1.7}
.ledger{max-width:920px;margin:0 auto 70px;display:grid;gap:14px;border:1px solid var(--border-soft);padding:clamp(22px,4vw,44px);background:var(--panel);position:relative}
.ledger::after{content:"CONSORTIUM RETURN LOGIC";position:absolute;top:12px;right:16px;font-size:9px;letter-spacing:.2em;color:var(--faint)}
.ledger__path{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.ledger__node{font-size:12px;letter-spacing:.08em;padding:12px 16px;border:1px solid var(--border-soft);color:var(--ink-2);flex:1;text-align:center;min-width:200px}
.ledger__node--fail{border-color:var(--border-soft);color:var(--faint)}
.ledger__node--win{border-color:var(--gold);color:var(--gold-hi)}
.ledger__arrow{color:var(--muted)}
.ledger__path--new .ledger__arrow{color:var(--gold)}
.ledger__vs{text-align:center;font-family:var(--f-disp);font-weight:700;letter-spacing:.3em;color:var(--gold);font-size:13px;margin:2px 0}

.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
.aud{border:1px solid var(--border-soft);padding:30px 26px;background:linear-gradient(180deg,var(--panel),transparent);position:relative;transition:border-color .4s,transform .4s}
.aud:hover{border-color:var(--border);transform:translateY(-4px)}
.aud__no{font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--gold);border:1px solid var(--border);width:34px;height:34px;display:grid;place-items:center;margin-bottom:20px}
.aud h3{font-family:var(--f-disp);font-weight:600;font-size:19px;margin-bottom:12px;color:var(--ink)}
.aud p{font-size:13px;color:var(--ink-2)}

/* ============================================================
   ACT 05 — GATEWAY
   ============================================================ */
.act--gateway{padding:clamp(90px,14vh,180px) 0;background:radial-gradient(120% 80% at 20% 20%, rgba(20,32,58,.45), transparent 55%), var(--bg);overflow:hidden}
.gateway{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.gateway__intro{position:relative;z-index:2}
.gateway__h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(28px,4vw,52px);line-height:1.02;margin:14px 0 24px;letter-spacing:0}
.gateway__copy{font-size:14.5px;color:var(--ink-2);max-width:46ch;margin-bottom:26px}
.gateway__assure{list-style:none;display:flex;flex-direction:column;gap:10px}
.gateway__assure li{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.06em;color:var(--ink-2)}
.gateway__assure li::before{content:"";width:14px;height:14px;border:1px solid var(--gold);position:relative;flex:none}
.gateway__assure li::after{content:"";position:absolute;width:6px;height:6px;background:var(--gold);transform:translateX(4px);box-shadow:0 0 8px var(--gold-glow)}

.form{position:relative;z-index:2;border:1px solid var(--border);background:linear-gradient(180deg,var(--panel),rgba(8,12,22,.7));padding:clamp(24px,3vw,38px)}
.form__scanbar{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.18em;color:var(--ok);padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--border-soft)}
.form__scanbar span{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px rgba(99,201,138,.6);animation:pulse 1.8s infinite}
.field{margin-bottom:20px}
.field label{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted);margin-bottom:8px}
.field input,.field select{
  width:100%;background:var(--void);border:1px solid var(--border-soft);color:var(--ink);
  font-family:var(--f-mono);font-size:14px;padding:13px 14px;transition:border-color .25s,box-shadow .25s;
}
.field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.field input:focus-visible,.field select:focus-visible{outline:none}
.field.is-invalid input,.field.is-invalid select{border-color:var(--alert)}
.field__err{display:block;min-height:14px;font-size:10px;letter-spacing:.08em;color:var(--alert);margin-top:6px}
.submit{position:relative;width:100%;border:1px solid var(--gold);background:var(--gold);color:#0a0a0a;font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.12em;padding:16px;cursor:pointer;overflow:hidden;transition:background .3s,color .3s}
.submit:hover{background:transparent;color:var(--gold)}
.submit:disabled{cursor:wait;opacity:.85}
.submit__spin{position:absolute;right:16px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid rgba(0,0,0,.3);border-top-color:#0a0a0a;border-radius:50%;opacity:0}
.submit.is-loading .submit__spin{opacity:1;animation:spin .7s linear infinite}
.submit.is-loading .submit__label{opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
.form__status{margin-top:16px;font-size:11px;letter-spacing:.1em;min-height:16px}
.form__status.is-ok{color:var(--ok)}
.form__status.is-err{color:var(--alert)}

/* ============================================================
   FOOTER + STATUS BAR
   ============================================================ */
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px clamp(20px,5vw,64px) 70px;font-size:10px;letter-spacing:.1em;color:var(--muted);border-top:1px solid var(--border-soft);background:var(--void)}
.foot b{color:var(--ink-2)}
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:24px;align-items:center;padding:8px clamp(20px,5vw,64px);font-size:10px;letter-spacing:.14em;color:var(--muted);background:linear-gradient(0deg,rgba(3,6,13,.96),rgba(3,6,13,.6));backdrop-filter:blur(8px);border-top:1px solid var(--border-soft)}
.statusbar__live{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(99,201,138,.7);display:inline-block;animation:pulse 1.6s infinite;margin-right:6px}
.statusbar span:first-child{color:var(--ok)}

/* ============================================================
   REVEAL + SCROLL ANIM HELPERS
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .rail{display:none}
  .ident{display:none}
  .modules,.audience{grid-template-columns:1fr 1fr}
  .gateway{grid-template-columns:1fr;gap:40px}
  .readout{width:min(40ch,46vw)}
  .schem__stage{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center}
  .schem__panel{max-width:560px}
  .schem__calls{text-align:left}
  .schem__note{margin-inline:auto}
  .schem__svg{max-width:420px}
  .doctrine{grid-template-columns:1fr;gap:36px}
  .doctrine__plan{max-width:320px;margin-inline:auto;order:-1}
}
@media (max-width:820px){
  .nav a:not(.nav__key){display:none}
  .modules,.audience{grid-template-columns:1fr}
  /* on small screens the stage stops pinning; node + readout stack */
  .stage__sticky{position:relative;height:auto;padding:80px 0 40px;gap:10px;grid-auto-flow:row}
  .stage__step{height:0}
  .rig{width:min(70vw,320px)}
  .readout{position:relative;right:auto;top:auto;transform:none;width:100%;padding:0 clamp(20px,5vw,40px);margin-top:30px}
  .panel{position:relative;opacity:1;transform:none;top:auto;margin-bottom:40px;pointer-events:auto}
  .readout__head{padding:0 clamp(20px,5vw,40px)}
  .hud__corner b{font-size:12px}
  .statusbar{gap:14px;overflow-x:auto}
  /* un-pin schematic: show it exploded + all callouts */
  .schem__sticky{position:relative;height:auto;padding:64px 0 30px}
  .schem__steps > div{height:0}
  .call{opacity:1;transform:none}
  /* un-pin exploded triad: single column, box exploded, all captions stacked */
  .xstage{position:relative;height:auto;padding:60px 0 24px;grid-template-columns:1fr}
  .xtriad__steps > div{height:0}
  .xbox{grid-column:1;transform:none}
  .xcap{position:relative;opacity:1;transform:none;margin-bottom:24px}
  .xcaption{grid-column:1;justify-self:stretch;min-height:0;max-width:none}
  .lexicon{grid-template-columns:1fr}
}
@media (max-width:520px){
  .hero{padding-top:120px}
  .hero__cue-line{width:70px}
  .ledger__node{min-width:100%}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .node__scan,.rig__halo,.hero__cue-line::after{display:none}
  .panel{position:relative;opacity:1;transform:none;top:auto;margin-bottom:34px}
  [data-reveal]{opacity:1;transform:none}
  .call{opacity:1;transform:none}
  .xcap{position:relative;opacity:1;transform:none;margin-bottom:24px}
  .xcaption{min-height:0}
  .schem__hint,.xstage__hint{display:none}
}

/* ============================================================
   ANIMATION UPGRADES
   ============================================================ */

/* plotter draw-on cursor (replaces decrypt-cipher) */
.dz-cursor{color:var(--gold);margin-left:1px;animation:dzBlink .7s steps(1) infinite}
@keyframes dzBlink{50%{opacity:0}}

/* Principia telemetry honesty tag */
.telem__tag{display:block;padding:7px 12px;font-size:9px;letter-spacing:.18em;color:var(--faint);border-bottom:1px solid var(--border-soft)}

/* ledger: the argument is kinetic — old path stalls in the queue, new path flows through */
.ledger__path{position:relative;overflow:hidden}
.ledger__path::after{content:"";position:absolute;top:50%;width:18px;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);pointer-events:none}
.ledger__path--old::after{animation:pktStall 5.5s var(--ease) infinite}
.ledger__path--new::after{animation:pktFlow 3.4s linear infinite}
@keyframes pktStall{0%{left:-4%;opacity:0}10%{opacity:.9}40%{left:42%}64%{left:44%}72%{left:44%;opacity:.4}100%{left:45%;opacity:0}}
@keyframes pktFlow{0%{left:-6%;opacity:0}12%{opacity:.9}88%{opacity:.9}100%{left:104%;opacity:0}}

/* drawing title block (footer) */
.titleblock{display:flex;flex-wrap:wrap;width:100%;margin-bottom:20px;border:1px solid var(--border-soft);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted)}
.titleblock span{padding:8px 16px;border-right:1px solid var(--border-soft)}
.titleblock span:last-child{border-right:0}
.titleblock b{color:var(--ink-2);font-weight:700}