/* ============================================================
   CLEAR — PRELUDE TO CATHARSIS
   Cinematic 2.5D scroll experience · dystopian archive terminal
   ============================================================ */

:root{
  --bg:        #04060c;
  --bg-2:      #080c16;
  --ink:       #e8ecf4;
  --ink-dim:   #93a0b4;
  --gold:      #d8b45a;
  --gold-hi:   #f3dc9a;
  --gold-lo:   #8a6a2f;
  --cyan:      #6ee7ff;
  --alert:     #ff5d5d;
  --line:      rgba(190,205,235,.14);
  --line-soft: rgba(190,205,235,.07);
  --accent:    var(--gold);
  --accent-soft: rgba(216,180,90,.14);
  --font-disp: "Cinzel", "Times New Roman", serif;
  --font-tech: "Michroma", "Arial Black", sans-serif;
  --font-mono: "Share Tech Mono", "Consolas", monospace;
  --font-body: "Rajdhani", "Segoe UI", sans-serif;
  --nav-h: 64px;
  --pad: clamp(18px, 4vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scrollbar-width:thin; scrollbar-color: rgba(216,180,90,.5) #06080f; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body[data-booting="true"]{ overflow:hidden; }

::selection{ background:rgba(216,180,90,.85); color:#120d02; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ background:none; border:0; color:inherit; cursor:pointer; font:inherit; }

.mono{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ============================ PRELOADER ============================ */
#preloader{
  position:fixed; inset:0; z-index:1000;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(216,180,90,.07), transparent 60%),
    var(--bg);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(20px,4vw,48px);
  overflow:hidden;
}
.pre-grid{
  position:absolute; inset:-2px; pointer-events:none; opacity:.5;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0/100% 72px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0/72px 100%;
  mask-image:radial-gradient(85% 85% at 50% 50%, #000 30%, transparent 100%);
}
.pre-corners i{ position:absolute; width:26px; height:26px; border:1px solid rgba(216,180,90,.6); }
.pre-corners i:nth-child(1){ top:14px; left:14px; border-right:0; border-bottom:0; }
.pre-corners i:nth-child(2){ top:14px; right:14px; border-left:0; border-bottom:0; }
.pre-corners i:nth-child(3){ bottom:14px; left:14px; border-right:0; border-top:0; }
.pre-corners i:nth-child(4){ bottom:14px; right:14px; border-left:0; border-top:0; }

.pre-boot{ color:var(--ink-dim); display:grid; gap:.45em; max-width:640px; }
.pre-boot p{ opacity:0; transform:translateY(6px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pre-boot .ok{ color:#7ce7a2; }
.pre-boot .warn{ color:var(--gold); }

.pre-center{ text-align:center; padding:0 var(--pad); }
.pre-title{
  font-family:var(--font-tech);
  font-size:clamp(1.15rem, 3.4vw, 2.6rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-hi);
  text-shadow:0 0 34px rgba(216,180,90,.45);
  min-height:1.4em;
}
.pre-barwrap{
  margin:clamp(22px,4vh,40px) auto 0;
  width:min(560px, 82vw);
  display:flex; align-items:center; gap:16px;
}
.pre-bar{
  flex:1; height:2px; background:rgba(190,205,235,.15); position:relative; overflow:visible;
}
.pre-bar span{
  position:absolute; inset:0; width:0%;
  background:linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  box-shadow:0 0 18px rgba(216,180,90,.8);
}
.pre-nums{ color:var(--gold); font-size:.9rem; min-width:4.2ch; text-align:right; }

.pre-foot{ display:flex; justify-content:space-between; color:var(--ink-dim); }
#preStatus{ color:var(--gold); }

/* ============================ FIXED HUD ============================ */
.hud{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0; }
.hud-corner{ position:absolute; width:20px; height:20px; border:1px solid rgba(216,180,90,.5); }
.hud-corner.tl{ top:12px; left:12px; border-right:0; border-bottom:0; }
.hud-corner.tr{ top:12px; right:12px; border-left:0; border-bottom:0; }
.hud-corner.bl{ bottom:12px; left:12px; border-right:0; border-top:0; }
.hud-corner.br{ bottom:12px; right:12px; border-left:0; border-top:0; }
.hud-top,.hud-bottom{
  position:absolute; left:44px; right:44px;
  display:flex; justify-content:space-between; align-items:center;
  color:rgba(147,160,180,.85);
}
.hud-top{ top:calc(var(--nav-h) + 6px); }
.hud-bottom{ bottom:16px; }
.hud-path{ color:var(--gold); text-shadow:0 0 12px rgba(216,180,90,.35); }
.hud-rec{ display:flex; align-items:center; gap:8px; }
.rec-dot{ width:7px; height:7px; border-radius:50%; background:var(--alert); box-shadow:0 0 10px var(--alert); animation:blink 1.6s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.25; } }
.hud-log{ max-width:60vw; overflow:hidden; text-overflow:ellipsis; }
/* the sticky HUD bars never break their text onto a second line */
.hud-top span, .hud-bottom span{ white-space:nowrap; }

/* ============================ NAV ============================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,3vw,44px);
  opacity:0; transform:translateY(-12px);
  background:linear-gradient(180deg, rgba(4,6,12,.72), rgba(4,6,12,0));
}
.nav::after{
  content:""; position:absolute; left:44px; right:44px; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.nav a{ white-space:nowrap; } /* the sticky header never breaks its labels */
.nav-left{ display:flex; align-items:center; gap:clamp(14px, 2vw, 30px); }
.nav-brand{ display:flex; align-items:center; gap:10px; color:var(--gold); }
.nav-pages{ display:flex; gap:clamp(10px, 1.4vw, 22px); padding-left:clamp(12px, 1.6vw, 24px); position:relative; }
.nav-pages::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:var(--line);
}
.nav-pages a{
  position:relative;
  font-family:var(--font-body); font-weight:600;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); padding:8px 2px;
  transition:color .35s ease;
}
.nav-pages a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px;
  background:var(--gold); box-shadow:0 0 8px rgba(216,180,90,.7);
  transition:right .4s cubic-bezier(.7,0,.2,1);
}
.nav-pages a:hover{ color:var(--gold-hi); }
.nav-pages a:hover::after{ right:0; }
.brand-sigil{ width:24px; height:24px; animation:sigilspin 26s linear infinite; }
@keyframes sigilspin{ to{ transform:rotate(360deg); } }
.nav-brand .mono{ font-size:.68rem; letter-spacing:.2em; }

.nav-links{ display:flex; gap:clamp(10px, 2vw, 30px); margin-left:clamp(28px, 4vw, 72px); }
.nav-links a{
  position:relative;
  font-family:var(--font-body); font-weight:600;
  font-size:.86rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim);
  padding:8px 2px;
  transition:color .35s ease;
}
.nl-num{ font-size:.58rem; color:var(--gold); margin-right:.55em; opacity:.75; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px;
  background:var(--gold); box-shadow:0 0 8px rgba(216,180,90,.7);
  transition:right .4s cubic-bezier(.7,0,.2,1);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ right:0; }
.nav-links a.active{ color:var(--gold-hi); }
.nav-links a.active::after{ right:0; }

.nav-burger{ display:none; width:40px; height:40px; position:relative; z-index:95; }
.nav-burger i{
  position:absolute; left:8px; right:8px; height:2px; background:var(--gold);
  transition:transform .4s ease, top .4s ease, bottom .4s ease;
}
.nav-burger i:first-child{ top:14px; }
.nav-burger i:last-child{ bottom:14px; }
.nav-burger[aria-expanded="true"] i:first-child{ top:19px; transform:rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-child{ bottom:19px; transform:rotate(-45deg); }

.menu-overlay{
  position:fixed; inset:0; z-index:90;
  background:rgba(4,6,12,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .45s ease;
}
.menu-overlay.open{ opacity:1; pointer-events:auto; }
.menu-list{ display:grid; gap:4vh; text-align:center; }
.menu-list a{
  font-family:var(--font-disp); font-weight:700;
  font-size:clamp(1.6rem, 7vw, 3rem);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s ease;
}
.menu-list a:hover, .menu-list a.active{ color:var(--gold-hi); }
.menu-list .mono{ display:block; font-size:.7rem; color:var(--gold); margin-bottom:.2em; }

/* progress rail */
.rail{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:70; display:grid; gap:18px; opacity:0;
}
.rail a{ display:grid; place-items:center; width:18px; height:18px; }
.rail i{
  width:6px; height:6px; transform:rotate(45deg);
  background:transparent; border:1px solid var(--ink-dim);
  transition:all .4s ease;
}
.rail a.active i{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 12px rgba(216,180,90,.9); }

/* ============================ HERO ============================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
  padding:calc(var(--nav-h) + 6vh) var(--pad) 12vh;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-layer{ position:absolute; inset:-6%; }
.hero-img img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.06) contrast(1.04);
}
.hero-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,12,.62) 0%, rgba(4,6,12,.18) 34%, rgba(4,6,12,.26) 62%, rgba(4,6,12,.94) 100%);
}
.hero-glow{
  background:radial-gradient(46% 34% at 50% 58%, rgba(240,205,120,.30), transparent 70%);
  mix-blend-mode:screen;
}
.hero-haze{
  background:
    radial-gradient(70% 40% at 18% 30%, rgba(90,140,255,.12), transparent 70%),
    radial-gradient(60% 40% at 84% 26%, rgba(255,90,60,.10), transparent 70%);
  mix-blend-mode:screen;
}
.hero-vignette{ position:absolute; inset:0; box-shadow:inset 0 0 24vmin 6vmin rgba(2,3,8,.85); }

.hero-content{ position:relative; z-index:2; text-align:center; }
.hero-eyebrow{ color:var(--gold); margin-bottom:3.2vh; opacity:.9; }

.wordmark{ position:relative; width:min(880px, 88vw); margin:0 auto; }
.wordmark::before{
  content:""; position:absolute; inset:-24% -8%;
  background:radial-gradient(50% 55% at 50% 50%, rgba(216,180,90,.20), transparent 70%);
  pointer-events:none;
}
.wordmark-img{
  position:relative; width:100%; height:auto; display:block;
  /* the PNG itself carries alpha — the black plate is gone */
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.55));
}

.hero-underline{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:3.4vh auto 2.6vh; width:min(560px, 70vw); color:var(--gold);
}
.hero-underline i{ height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--gold)); }
.hero-underline i:last-child{ background:linear-gradient(90deg, var(--gold), transparent); }
.compass{ width:26px; height:26px; flex:none; opacity:.9; }

.hero-subtitle{
  font-family:var(--font-disp); font-weight:700;
  font-size:clamp(1rem, 2.6vw, 1.7rem);
  letter-spacing:.5em; text-indent:.5em;
  color:var(--gold-hi);
}
.hero-byline{
  margin-top:1.6vh; color:var(--ink-dim);
  font-size:clamp(1.02rem, 1.85vw, 1.22rem); letter-spacing:.24em; text-transform:uppercase;
}
.hero-byline span{ color:var(--ink); font-weight:600; }

.hero-dossier{ position:relative; z-index:2; margin-top:6vh; width:min(720px, 92vw); }
.tray-frame{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(8,12,22,.92), rgba(8,12,22,.78));
  padding:clamp(16px,2.6vw,28px) clamp(18px,3vw,34px);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.tray-frame::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(216,180,90,.05), transparent 30%);
}
.tray-head{
  display:flex; justify-content:space-between; align-items:center;
  color:var(--gold); margin-bottom:1em;
}
.tray-stamp{
  border:1px solid rgba(216,180,90,.55); padding:.25em .7em;
  color:var(--gold-hi); letter-spacing:.3em;
}
.tray-body{
  color:var(--ink);
  font-size:clamp(.98rem, 1.9vw, 1.18rem);
  font-weight:500; line-height:1.62; letter-spacing:.02em;
}
.tray-body + .tray-body{ margin-top:.7em; }
.tray-em{ color:var(--gold-hi); font-style:italic; }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--ink-dim);
}
.cue-line{ width:1px; height:52px; background:linear-gradient(180deg, var(--gold), transparent); position:relative; overflow:hidden; }
.cue-line::after{
  content:""; position:absolute; top:-40%; left:0; width:100%; height:40%;
  background:var(--gold-hi); animation:cuedrop 1.8s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes cuedrop{ to{ top:120%; } }

/* ============================ INTERLUDE / CREED ============================ */
.interlude{ position:relative; }
.interlude-stage{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:1.2em; padding:0 var(--pad);
  background:
    radial-gradient(60% 45% at 50% 50%, rgba(20,28,48,.5), transparent 75%),
    var(--bg);
}
/* the doctrine tray runs 20% larger than it did on the hero */
.interlude-dossier{ margin-top:0; width:min(864px, 94vw); }
.interlude-dossier .tray-body{ font-size:clamp(1.18rem, 2.3vw, 1.42rem); }
.interlude-dossier .tray-head{ font-size:.82rem; }

/* ============================ REALM SECTIONS ============================ */
.realm{ position:relative; }
.realm-stage{
  position:relative; height:100svh; overflow:hidden;
  display:grid; place-items:center;
  background:var(--bg);
}

/* full-bleed image, revealed through expanding dossier frame */
.realm-hero{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; }
.realm-frame{
  position:relative;
  width:100%; height:100%;
  will-change:clip-path;
}
.realm-imgwrap{ position:absolute; inset:0; overflow:hidden; }
.realm-imgwrap img{
  width:100%; height:100%; object-fit:cover;
  will-change:transform;
  transform:scale(1.35);
  filter:saturate(1.05) contrast(1.03);
}
.realm-imgwrap::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,12,.55) 0%, rgba(4,6,12,.05) 30%, rgba(4,6,12,.1) 55%, rgba(4,6,12,.9) 100%);
}
.frame-ui{ position:absolute; inset:0; z-index:3; pointer-events:none; color:var(--accent); }
.frame-ui span{ position:absolute; text-shadow:0 0 12px var(--accent-soft); white-space:nowrap; }
.fu-tl{ top:-1.9em; left:0; }
.fu-tr{ top:-1.9em; right:0; }
.fu-bl{ bottom:-1.9em; left:0; }
.fu-br{ bottom:-1.9em; right:0; }
.ft{ position:absolute; width:16px; height:16px; border:1px solid var(--accent); opacity:.9; }
.ft.tl{ top:-6px; left:-6px; border-right:0; border-bottom:0; }
.ft.tr{ top:-6px; right:-6px; border-left:0; border-bottom:0; }
.ft.bl{ bottom:-6px; left:-6px; border-right:0; border-top:0; }
.ft.br{ bottom:-6px; right:-6px; border-left:0; border-top:0; }

/* giant title */
.realm-titlewrap{
  position:absolute; z-index:4; inset:auto 0 10vh 0;
  text-align:center; padding:0 var(--pad);
  pointer-events:none;
}
.realm-eyebrow{ color:var(--accent); margin-bottom:1.6vh; }
.realm-title{
  font-family:var(--font-disp); font-weight:900;
  font-size:clamp(2.6rem, 11.5vw, 10.5rem);
  line-height:.95; letter-spacing:.04em;
  color:var(--ink);
  text-shadow:
    0 0 50px rgba(0,0,0,.65),
    0 0 90px var(--accent-soft);
}
.realm-title .ch{ display:inline-block; will-change:transform; }
.realm-sub{
  margin:2.2vh auto 0; max-width:640px;
  color:var(--ink-dim);
  font-size:clamp(.95rem, 1.8vw, 1.15rem); font-weight:500; letter-spacing:.06em;
}

/* dossier cards */
.dossier{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center;
  gap:clamp(16px, 3vw, 44px);
  padding:0 var(--pad);
  pointer-events:none;
}
.card{
  pointer-events:auto; cursor:pointer;
  position:relative; flex:none;
  width:min(500px, 82vw);
  background:linear-gradient(180deg, rgba(7,10,19,.92), rgba(7,10,19,.78));
  border:1px solid var(--line);
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  will-change:transform;
  transition:border-color .4s ease;
}
.card:hover{ border-color:var(--accent); }
.card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, var(--accent-soft), transparent 40%);
  opacity:.6;
}
.card-imgwrap{
  position:relative; overflow:hidden; aspect-ratio:16/9;
  border-bottom:1px solid var(--line);
}
.card-imgwrap img{
  width:100%; height:110%; object-fit:cover; will-change:transform;
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}
.card:hover .card-imgwrap img{ transform:scale(1.06); }
.card-meta{ padding:clamp(14px,2vw,22px) clamp(16px,2.2vw,26px) clamp(16px,2.2vw,24px); }
.card-code{ color:var(--accent); margin-bottom:.5em; }
.card-name{
  font-family:var(--font-disp); font-weight:700;
  font-size:clamp(1.25rem, 2.4vw, 1.8rem);
  letter-spacing:.06em; color:var(--ink);
}
.card-copy{
  margin-top:.5em; color:var(--ink-dim); font-size:.98rem;
  /* every teaser occupies the same three lines — all cards share one size */
  line-height:1.5; height:4.5em; overflow:hidden;
}
.card-meter{ margin-top:1.1em; display:flex; align-items:center; gap:12px; }
.card-meter i{
  position:relative; flex:1; height:2px; background:rgba(190,205,235,.14); display:block;
}
.card-meter i::after{
  content:""; position:absolute; inset:0; right:calc(100% - var(--v) * 100%);
  background:var(--accent); box-shadow:0 0 10px var(--accent-soft);
}
.card-meter .mono{ color:var(--accent); font-size:.62rem; }

/* world-card zoom — enlarged, glowing, full record */
.card-zoom{
  position:fixed; inset:0; z-index:110;
  display:none; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 60px);
}
.card-zoom.open{ display:flex; }
.card-zoom-backdrop{
  position:absolute; inset:0;
  background:rgba(2,3,8,.82);
  backdrop-filter:blur(6px);
}
.card-zoom-panel{
  position:relative; z-index:1;
  width:min(680px, 94vw); max-height:min(82svh, 900px);
  overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(180deg, rgba(7,10,19,.97), rgba(7,10,19,.9));
  border:1px solid var(--accent, var(--gold));
  box-shadow:0 0 60px var(--accent-soft, rgba(216,180,90,.14)), 0 0 18px var(--accent-soft, rgba(216,180,90,.14));
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  padding:clamp(22px, 3.4vw, 40px) clamp(22px, 3.6vw, 44px);
}
.card-zoom-panel .card-code{ color:var(--accent, var(--gold)); margin-bottom:.5em; }
.card-zoom-close{
  position:sticky; top:0; float:right;
  color:var(--ink-dim); font-size:.66rem; letter-spacing:.2em;
  transition:color .3s ease;
}
.card-zoom-close:hover{ color:var(--accent, var(--gold)); }
.card-zoom-copy{ margin-top:1em; color:var(--ink-dim); font-size:1rem; line-height:1.7; }
.card-zoom-copy p{ margin-top:.9em; }
.card-zoom-copy .cf-head{
  margin-top:0; font-family:var(--font-disp); font-weight:700;
  font-size:1.15rem; letter-spacing:.08em; color:var(--ink); text-transform:uppercase;
}
.card-zoom-copy .cf-subhead{
  margin-top:.2em; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent, var(--gold));
}
.card-zoom-copy .cf-note{ color:var(--ink); font-style:italic; }

/* ============================ BRIDGES ============================ */
.bridge{
  position:relative;
  min-height:72svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3vh; padding:14vh var(--pad);
  background:
    radial-gradient(50% 40% at 50% 50%, rgba(14,20,36,.6), transparent 80%),
    var(--bg);
  text-align:center;
}
.bridge::before, .bridge::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:1px; height:9vh;
  background:linear-gradient(180deg, transparent, rgba(216,180,90,.5), transparent);
}
.bridge::before{ top:0; }
.bridge::after{ bottom:0; }
.bridge-line{ color:var(--ink-dim); }
.bridge-big{
  font-family:var(--font-tech);
  font-size:clamp(1.2rem, 4.4vw, 3.2rem);
  letter-spacing:.22em;
  color:var(--gold-hi);
  text-shadow:0 0 40px rgba(216,180,90,.3);
}

/* ============================ FINALE / BOOK 2 ============================ */
.finale{
  position:relative;
  padding:18vh var(--pad) 0;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(18,24,44,.55), transparent 75%),
    var(--bg);
  text-align:center;
  overflow:hidden;
}
.finale-eyebrow{ color:var(--ink-dim); }
.finale-title{
  margin-top:4vh;
  font-family:var(--font-disp); font-weight:900;
  font-size:clamp(2.1rem, 7.6vw, 7rem);
  line-height:1.02; letter-spacing:.05em;
  color:var(--ink);
  text-shadow:0 0 70px rgba(120,150,230,.18);
}
.finale-soon{
  margin-top:2.4vh;
  font-family:var(--font-tech);
  font-size:clamp(1rem, 2.6vw, 1.7rem);
  letter-spacing:.5em; text-indent:.5em; text-transform:uppercase;
  color:var(--gold-hi);
  text-shadow:0 0 30px rgba(216,180,90,.45);
}

.panels{
  margin:9vh auto 0; max-width:1500px;
  display:flex; gap:10px; height:min(64vh, 640px);
}
.panel{
  --accent:#d8b45a;
  position:relative; flex:1; overflow:hidden;
  border:1px solid var(--line);
  filter:saturate(.82);
  transition:flex 0.9s cubic-bezier(.7,0,.2,1), filter .6s ease;
  will-change:flex;
}
.panel:hover{ flex:2.4; filter:saturate(1.08); }
.panel-imgwrap{ position:absolute; inset:0; }
.panel-imgwrap img{ width:100%; height:100%; object-fit:cover; }
.panel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,12,.24), transparent 40%, rgba(4,6,12,.86) 92%);
}
.panel-label{
  position:absolute; z-index:2; left:0; right:0; bottom:18px;
  display:flex; flex-direction:column; gap:6px; align-items:center;
}
.panel-name{
  font-family:var(--font-disp); font-weight:700;
  font-size:clamp(.95rem, 1.9vw, 1.5rem); letter-spacing:.2em;
  color:var(--gold-hi);
  writing-mode:initial;
}
.panel-realm{ color:var(--accent); font-size:.6rem; opacity:0; transform:translateY(8px); transition:all .5s ease .1s; }
.panel:hover .panel-realm{ opacity:1; transform:none; }
.panel::before{
  content:""; position:absolute; z-index:2; top:0; left:0; right:0; height:2px;
  background:var(--accent); opacity:0; transition:opacity .5s ease;
  box-shadow:0 0 16px var(--accent);
}
.panel:hover::before{ opacity:1; }

.finale-more{ margin-top:5vh; color:var(--gold); }

.footer{
  margin-top:12vh; padding:10vh var(--pad) 12vh;
  border-top:1px solid var(--line-soft);
  position:relative;
}
.footer-rule{
  display:flex; align-items:center; justify-content:center; gap:18px;
  width:min(520px, 76vw); margin:0 auto 4vh; color:var(--gold);
}
.footer-rule i{ height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--gold)); }
.footer-rule i:last-child{ background:linear-gradient(90deg, var(--gold), transparent); }
.footer-title{
  font-family:var(--font-disp); font-weight:700;
  font-size:clamp(1.1rem, 2.6vw, 1.7rem); letter-spacing:.28em;
  color:var(--ink);
}
.footer-by{ margin-top:1.4vh; color:var(--ink-dim); letter-spacing:.22em; text-transform:uppercase; font-size:.85rem; }
.footer-by span{ color:var(--gold-hi); }
.footer-creed{ margin-top:4vh; color:var(--gold); letter-spacing:.5em; }
.footer-studio{
  margin-top:6vh;
  display:inline-flex; align-items:center; gap:12px;
  color:var(--ink-dim); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:.75; transition:opacity .35s ease, color .35s ease;
}
.footer-studio img{ width:34px; height:34px; display:block; }
.footer-studio:hover{ opacity:1; color:var(--ink); }

/* ============================ FX OVERLAYS ============================ */
.fx-grain{
  position:fixed; inset:-50%; z-index:96; pointer-events:none; opacity:.05;
  will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(9) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); } 12%{ transform:translate(-6%,3%); }
  25%{ transform:translate(4%,-7%); } 37%{ transform:translate(-3%,6%); }
  50%{ transform:translate(7%,2%); } 62%{ transform:translate(-6%,-4%); }
  75%{ transform:translate(3%,7%); } 87%{ transform:translate(-4%,-3%); }
}
.fx-scan{
  position:fixed; inset:0; z-index:95; pointer-events:none; opacity:.4;
  background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.12) 3px 4px);
}

/* custom cursor */
.cursor{ position:fixed; z-index:120; top:0; left:0; pointer-events:none; opacity:0; }
.cursor i{
  position:absolute; top:-14px; left:-14px; width:28px; height:28px;
  border:1px solid rgba(216,180,90,.85); border-radius:50%;
  display:grid; place-items:center;
  transition:transform .25s ease, border-color .25s ease;
}
.cursor i::after{ content:""; width:3px; height:3px; border-radius:50%; background:var(--gold-hi); }
.cursor.on-link i{ transform:scale(1.8); border-color:rgba(216,180,90,.4); }
@media (pointer:coarse){ .cursor{ display:none; } }

/* decrypt scramble glyph color */
[data-decrypt] .scr, [data-type] .scr{ color:var(--accent, var(--gold)); opacity:.85; }

/* ============================ TECH FILES (SOCHI · AUTONIMA) ============================ */
.techfile{
  position:relative;
  padding:16vh var(--pad) 14vh;
  background:
    radial-gradient(60% 45% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--bg);
}
.tech-grid{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns: minmax(300px, 460px) 1fr;
  gap:clamp(28px, 5vw, 72px);
  align-items:center;
}
.tech-frame{
  position:relative;
  border:1px solid var(--line);
  background:#070a13;
  padding:10px;
}
.tech-frame img, .tech-frame video, .tech-frame canvas{
  display:block; width:100%; height:auto;
}
.tech-frame .ft{ z-index:2; }
.sochi-stage{ cursor:pointer; user-select:none; }
.sochi-stage .tech-frame{ transition:box-shadow .4s ease; }
.sochi-stage:hover .tech-frame{ box-shadow:0 0 44px var(--accent-soft); }
/* beats the `.tech-frame img` width:100%/height:auto rule */
.tech-frame img.sochi-fade{
  position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px);
  opacity:0; transition:opacity .55s ease; will-change:opacity;
}
/* popup accents glide to the active channel colour */
.techpop .chroma-ui, .techpop .tech-log, .techpop .tech-log p:first-child,
.techpop .chroma-count, .techpop .card-code{
  transition:color .55s ease, border-color .55s ease;
}
.techpop .techpop-panel{ transition:border-color .55s ease, box-shadow .55s ease; }

/* ============================ TECH POPUPS (SOCHI · AUTONIMA) ============================ */
.techpop{
  position:fixed; inset:0; z-index:105;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px, 3vw, 48px);
  visibility:hidden; pointer-events:none;
}
.techpop.on{ visibility:visible; pointer-events:auto; }
.techpop-backdrop{
  position:absolute; inset:0;
  background:rgba(2,3,8,.78); backdrop-filter:blur(7px);
  opacity:0;
}
.techpop-panel{
  position:relative; z-index:1;
  width:min(640px, 94vw); max-height:94svh;
  display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg, rgba(7,10,19,.97), rgba(7,10,19,.9));
  border:1px solid var(--accent, var(--gold));
  box-shadow:0 0 60px var(--accent-soft, rgba(216,180,90,.14)), 0 0 18px var(--accent-soft, rgba(216,180,90,.14));
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  padding:clamp(16px, 2.4vw, 28px) clamp(18px, 2.8vw, 36px);
  opacity:0; will-change:transform, opacity;
}
.techpop .card-code{ color:var(--accent, var(--gold)); }
.tz-title{
  font-family:var(--font-disp); font-weight:900;
  font-size:clamp(1.5rem, 3.2vw, 2.2rem);
  letter-spacing:.06em; color:var(--ink); line-height:1.05;
}
.tz-sub{ color:var(--ink-dim); font-size:.95rem; }
.techpop .sochi-stage{ margin:0 auto; width:fit-content; max-width:100%; }
.techpop .sochi-stage .tech-frame{ width:fit-content; margin:0 auto; }
.techpop img#sochiImg{ max-height:82svh; width:auto; max-width:92vw; }
.techpop .chroma-ui{ margin-top:10px; }

/* bare popups — no panel chrome, just the artwork in its corner frame */
.techpop-panel.tz-bare{
  background:none; border:0; box-shadow:none; clip-path:none;
  padding:0; width:auto; max-height:none; overflow:visible;
}

/* AUTONIMA — the full sheet sized to fit the view, no scrolling needed */
.tz-scroll{ height:auto; overflow:visible; border:0; margin:0; }
.tz-scroll figure{ margin:0; }
.tz-scroll .tech-frame{ width:fit-content; margin:0 auto; }
.tz-scroll img{ width:auto; max-width:92vw; max-height:86svh; display:block; }
.tz-scroll .cathedra{ margin-top:14px; }

/* soft-hold cue floats at the bottom of the view */
.techpop .tz-cue{
  position:absolute; left:50%; bottom:clamp(14px, 3.2vh, 34px);
  transform:translateX(-50%); z-index:2; margin:0;
}
.tz-cue{
  margin-top:8px; text-align:center;
  color:var(--gold-hi); letter-spacing:.3em; font-size:.68rem;
  opacity:0; transition:opacity .35s ease;
}
.tz-cue.show{ opacity:1; animation:tzpulse 1.3s ease-in-out infinite; }
@keyframes tzpulse{ 50%{ opacity:.3; } }

.chroma-ui{
  margin-top:14px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  color:var(--accent);
}
.chroma-hint{ animation:chromapulse 2.6s ease-in-out infinite; }
@keyframes chromapulse{ 50%{ opacity:.45; } }
.chroma-dots{ display:flex; gap:8px; }
.chroma-dots i{
  width:9px; height:9px; border-radius:50%;
  background:var(--dot, #c79bff); opacity:.35;
  border:1px solid rgba(255,255,255,.25);
  transition:opacity .3s ease, transform .3s ease;
}
.chroma-dots i.active{ opacity:1; transform:scale(1.25); box-shadow:0 0 10px var(--dot, #c79bff); }
.chroma-count{ color:var(--ink-dim); }

.tech-copy .realm-title{ text-align:left; }
.tech-title{
  font-size:clamp(2.4rem, 7.5vw, 6.5rem);
  margin-top:1.2vh;
}
.tech-copy .realm-sub{ margin:2vh 0 0; max-width:520px; }
.tech-log{
  margin-top:3.4vh; display:grid; gap:.5em;
  color:var(--ink-dim);
  border-left:1px solid var(--accent);
  padding-left:16px;
}
.tech-log p:first-child{ color:var(--accent); }

.autonima-head{ text-align:center; max-width:900px; margin:0 auto; }
.autonima-head .realm-sub{ margin-inline:auto; }
.autonima-sheet{
  width:min(880px, 94vw); margin:7vh auto 0;
}
.cathedra{
  width:min(880px, 94vw); margin:6vh auto 0;
}
.cathedra figcaption{
  margin-top:12px; text-align:center; color:var(--accent);
}

/* ============================ ARCHIVE PAGES (Article 23 · Directors) ============================ */
.page-body{
  min-height:100svh;
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(20,28,48,.5), transparent 75%),
    var(--bg);
  overflow-x:hidden;
}
.page-top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px, 3vw, 44px);
  background:linear-gradient(180deg, rgba(4,6,12,.92), rgba(4,6,12,.65));
  border-bottom:1px solid var(--line-soft);
}
.page-top a.back{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  color:var(--gold); text-transform:uppercase;
}
.page-top a.back:hover{ color:var(--gold-hi); }
.page-top .mono{ color:var(--ink-dim); }

.doc-wrap{
  max-width:860px; margin:0 auto;
  padding:8vh var(--pad) 14vh;
}
.doc-head{ text-align:center; margin-bottom:6vh; }
.doc-head .mono{ color:var(--gold); }
.doc-title{
  margin-top:2vh;
  font-family:var(--font-disp); font-weight:900;
  font-size:clamp(1.8rem, 5vw, 3.4rem);
  letter-spacing:.05em; color:var(--ink);
}
.doc-sub{
  margin-top:1vh;
  font-family:var(--font-legal, serif); font-style:italic;
  color:var(--ink-dim); font-size:1.05rem;
}

/* the legal instrument itself */
.legal{
  --font-legal:"EB Garamond", "Georgia", "Times New Roman", serif;
  font-family:var(--font-legal);
  background:linear-gradient(180deg, #0a0e1a, #080b14);
  border:1px solid rgba(216,180,90,.28);
  outline:1px solid rgba(216,180,90,.08);
  outline-offset:6px;
  padding:clamp(26px, 5vw, 64px);
  color:#d9dde8;
  font-size:1.06rem; line-height:1.72;
  position:relative;
}
.legal::before{
  content:"XANOSPHERE // DEPARTMENT OF LAW";
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--bg); padding:0 14px;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.3em;
  color:var(--gold);
}
.legal h1{
  font-family:var(--font-legal); font-weight:600;
  font-size:clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing:.02em; text-align:center; color:#f0e6c8;
}
.legal h2{
  margin-top:2.2em;
  font-size:1.18rem; font-weight:700; color:#eadfbe;
  letter-spacing:.02em;
}
.legal p{ margin-top:1em; }
.legal .center{ text-align:center; }
.legal .clause{ margin-top:1em; }
.legal .rule{
  border:0; height:1px; margin:2.4em auto;
  background:linear-gradient(90deg, transparent, rgba(216,180,90,.45), transparent);
}
.legal .amendment{
  margin-top:2.6em; display:flex; justify-content:space-between; gap:20px;
  font-weight:600; color:#eadfbe;
}
.legal ul{ margin-top:1em; padding-left:1.4em; }
.legal li{ margin-top:.5em; }
.legal .stamp{
  position:absolute; top:clamp(18px,3vw,40px); right:clamp(18px,3vw,40px);
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.28em;
  color:rgba(255,93,93,.75); border:1px solid rgba(255,93,93,.55);
  padding:.5em .9em; transform:rotate(6deg);
}

/* directors gallery — the three records sit side by side */
.sheets{
  max-width:1560px; margin:0 auto;
  padding:6vh var(--pad) 14vh;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.6vw, 40px);
  align-items:start;
}
.sheet{ text-align:center; }
.sheet .tech-frame{
  display:inline-block; max-width:100%;
  transition:transform .5s cubic-bezier(.2,.6,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.sheet:hover .tech-frame{
  transform:translateY(-12px);
  border-color:var(--gold);
  box-shadow:0 0 44px rgba(216,180,90,.22), 0 18px 40px rgba(0,0,0,.5);
}
.sheet img{ width:100%; height:auto; }
.sheet{ cursor:pointer; }

/* raised full-view record */
.sheet-zoom-backdrop{
  position:fixed; inset:0; z-index:60;
  background:rgba(2,3,8,.85); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .45s ease;
}
.sheet-zoom-backdrop.on{ opacity:1; pointer-events:auto; }
.sheet-fly{
  position:fixed; z-index:61;
  padding:10px; background:#070a13;
  border:1px solid var(--gold);
  box-shadow:0 0 60px rgba(216,180,90,.25), 0 30px 80px rgba(0,0,0,.6);
  cursor:zoom-out;
  transition:
    top .55s cubic-bezier(.2,.7,.2,1), left .55s cubic-bezier(.2,.7,.2,1),
    width .55s cubic-bezier(.2,.7,.2,1), height .55s cubic-bezier(.2,.7,.2,1);
}
.sheet-fly img{ width:100%; height:100%; object-fit:contain; display:block; }

.sheet figcaption{
  margin-top:16px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--gold); text-transform:uppercase;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1400px){
  .nl-num{ display:none; }
  .nav-links{ gap:clamp(8px, 1.4vw, 20px); }
  .nav-links a, .nav-pages a{ font-size:.78rem; letter-spacing:.14em; }
}
@media (max-width: 1080px){
  .nav-pages{ display:none; }
}
@media (max-width: 900px){
  .sheets{ grid-template-columns:1fr; gap:8vh; }
  .sheet .tech-frame{ max-width:min(560px, 94vw); }
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .rail{ display:none; }
  .tech-grid{ grid-template-columns:1fr; }
  .sochi-stage{ max-width:460px; margin:0 auto; }
  .tech-copy .realm-title, .tech-copy .realm-sub{ text-align:center; }
  .tech-copy .realm-sub{ margin-inline:auto; }
  .tech-log{ max-width:420px; margin-inline:auto; }
  .menu-page{ opacity:.85; }
  .hud-top, .hud-bottom{ left:20px; right:20px; }
  .hud-log{ max-width:46vw; }
  .dossier{ padding:0 6vw; }
  .card{ width:min(420px, 84vw); }
  .panels{
    flex-direction:column; height:auto; gap:12px;
  }
  .panel{ min-height:120px; flex:none; }
  .panel:hover{ flex:none; }
  .panel-imgwrap img{ object-position:center 30%; }
}

@media (max-width: 560px){
  .hud-top{ display:none; }
  .hero-dossier{ margin-top:4.5vh; }
  .realm-titlewrap{ inset:auto 0 8vh 0; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .fx-grain{ animation:none; }
}