/* ============================================================
   The Severed Foundation — stylesheet
   Extracted from inline. Changes from original:
   - Single static starfield layer (was two animated pseudo-layers)
   - backdrop-filter removed from .classification and .record-card
     (was stacking four GPU filters over the entire viewport)
   - .reveal replaces the JS-applied opacity hack; honors
     prefers-reduced-motion and has a CSS-only failsafe
   ============================================================ */

:root{
  --bg:#08090c;
  --bg-deep:#05060a;
  --ink:#e9e1cf;
  --ink-dim:#9a9586;
  --ink-faint:#5b5a52;
  --amber:#d89a3b;
  --amber-bright:#f0b753;
  --teal:#3a7c8c;
  --teal-dim:#1e3a42;
  --rust:#a24e2b;
  --rule:rgba(233,225,207,.12);
  --serif:"Cormorant Garamond",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg-deep)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:20px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;width:100%;height:auto}
a{color:var(--amber-bright);text-decoration:none;border-bottom:1px dotted var(--amber)}

/* ── reveal-on-scroll (CSS-driven, failsafe) ───────────────────
   Elements start hidden via .reveal. The JS observer adds .is-in
   to fade them in. If JS fails, @supports not(selector) shows them.
   prefers-reduced-motion skips the animation entirely. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease-out,transform .9s ease-out;will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}
/* Failsafe: if JS doesn't run, show everything after 1.2s */
html.no-js .reveal{opacity:1;transform:none}

/* ── fixed stardust backdrop (single static layer) ──
   Was: .stars::before/::after with 800px/1200px bg-sizes and two
   infinite animations. Heavy on fill-rate on long pages. Now: one
   static noise texture. Looks nearly identical, ~80% cheaper. */
.stars{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1200px 800px at 70% 20%, rgba(58,124,140,.12), transparent 70%),
    radial-gradient(900px 600px at 10% 80%, rgba(216,154,59,.08), transparent 70%),
    linear-gradient(180deg,#05060a 0%,#08090c 50%,#05060a 100%);
}
.stars::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%,#fff,transparent),
    radial-gradient(1px 1px at 40% 70%,#fff,transparent),
    radial-gradient(1px 1px at 60% 20%,#fff,transparent),
    radial-gradient(1px 1px at 80% 50%,#fff,transparent),
    radial-gradient(1px 1px at 15% 85%,#fff,transparent),
    radial-gradient(1px 1px at 75% 90%,#fff,transparent),
    radial-gradient(1px 1px at 35% 15%,#fff,transparent),
    radial-gradient(1px 1px at 92% 35%,#fff,transparent),
    radial-gradient(1px 1px at 5% 45%,#fff,transparent),
    radial-gradient(1px 1px at 50% 60%,#fff,transparent);
  background-size:800px 800px;
  opacity:.28;
}

/* ── progress rail ── */
.rail{
  position:fixed;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--amber) 0%,var(--amber-bright) 50%,var(--amber) 100%);
  transform-origin:0 50%;transform:scaleX(0);z-index:100;
  box-shadow:0 0 12px rgba(216,154,59,.5);
}

/* ── classification banner ── */
.classification{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(5,6,10,.92);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.25em;
  color:var(--amber);text-transform:uppercase;
  padding:10px 24px;display:flex;justify-content:space-between;align-items:center;
}
.classification .dot{width:6px;height:6px;background:var(--amber);border-radius:50%;display:inline-block;margin-right:8px;box-shadow:0 0 8px var(--amber);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.classification .right{color:var(--ink-faint)}

/* ── table of contents rail (left) ── */
.toc{
  position:fixed;top:50%;left:24px;transform:translateY(-50%);
  z-index:80;display:flex;flex-direction:column;gap:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;
}
.toc a{
  color:var(--ink-faint);border:none;padding:4px 0 4px 16px;
  position:relative;display:block;transition:color .3s;
}
.toc a::before{
  content:"";position:absolute;left:0;top:50%;width:8px;height:1px;
  background:var(--ink-faint);transition:width .3s,background .3s;
}
.toc a:hover,.toc a.current{color:var(--amber)}
.toc a:hover::before,.toc a.current::before{width:12px;background:var(--amber)}
@media (max-width:1100px){.toc{display:none}}

/* ── hero ── */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:0 24px;
}
.hero-bg{
  position:absolute;inset:0;
  background:url('images/cover-nexara-station.jpg') center/cover;
  opacity:.55;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,6,10,.3) 0%,rgba(5,6,10,.1) 40%,rgba(5,6,10,.9) 100%),
    radial-gradient(ellipse at center,transparent 30%,rgba(5,6,10,.6) 100%);
}
.hero-inner{
  position:relative;z-index:2;max-width:960px;text-align:center;padding:80px 0 40px;
}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.4em;
  color:var(--amber);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 18px;border:1px solid var(--amber);border-radius:2px;
  background:rgba(216,154,59,.05);
  margin-bottom:32px;
}
.eyebrow::before,.eyebrow::after{content:"";width:14px;height:1px;background:var(--amber)}
h1.title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(48px,9vw,120px);
  line-height:.95;letter-spacing:-.02em;
  margin:0 0 24px;
  text-shadow:0 4px 40px rgba(0,0,0,.8);
}
h1.title em{font-style:italic;color:var(--amber-bright);font-weight:400}
.subtitle{
  font-family:var(--mono);font-size:13px;letter-spacing:.3em;
  color:var(--ink-dim);text-transform:uppercase;
  margin-bottom:48px;
}
.record-card{
  display:inline-grid;grid-template-columns:auto auto;gap:8px 24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  color:var(--ink-dim);text-transform:uppercase;
  padding:20px 28px;border:1px solid var(--rule);
  background:rgba(8,9,12,.8);
  text-align:left;
}
.record-card dt{color:var(--ink-faint)}
.record-card dd{color:var(--amber)}
.scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;
  color:var(--ink-dim);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-hint .arrow{width:1px;height:40px;background:linear-gradient(180deg,var(--ink-dim),transparent);animation:descend 2.5s ease-in-out infinite}
@keyframes descend{0%,100%{transform:scaleY(1) translateY(0);opacity:1}50%{transform:scaleY(1.3) translateY(4px);opacity:.4}}

/* ── transmission preamble ── */
.transmission{
  max-width:720px;margin:120px auto;padding:48px;
  border:1px solid var(--rule);background:rgba(8,9,12,.75);
  font-family:var(--mono);font-size:13px;line-height:1.9;
  color:var(--ink-dim);
  position:relative;
}
.transmission::before{
  content:"INCOMING TRANSMISSION";
  position:absolute;top:-10px;left:24px;padding:0 12px;
  background:var(--bg);color:var(--amber);
  font-size:10px;letter-spacing:.3em;
}
.transmission > p{margin:0;padding:0;font-size:13px;font-family:var(--mono);color:var(--ink-dim);scroll-margin-top:100px;cursor:pointer}
.transmission .line{display:block;opacity:0;animation:type .6s ease-out forwards}
.transmission > p:nth-of-type(1) .line{animation-delay:.1s}
.transmission > p:nth-of-type(2) .line{animation-delay:.3s}
.transmission > p:nth-of-type(3) .line{animation-delay:.5s}
.transmission > p:nth-of-type(4) .line{animation-delay:.7s}
.transmission > p:nth-of-type(5) .line{animation-delay:.9s}
.transmission > p:nth-of-type(6) .line{animation-delay:1.1s}
.transmission > p:nth-of-type(7) .line{animation-delay:1.3s}
.transmission > p:nth-of-type(8) .line{animation-delay:1.5s}
.transmission > p.playing{position:relative}
.transmission > p.playing::before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:3px;background:var(--amber-bright);box-shadow:0 0 12px var(--amber-bright);animation:pulse 2.4s ease-in-out infinite}
@keyframes type{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.transmission .hl{color:var(--amber-bright)}
.transmission .dim{color:var(--ink-faint)}

/* ── chapters ── */
.chapter{
  max-width:720px;margin:0 auto;padding:80px 24px;
  position:relative;scroll-margin-top:80px;
}
.chapter-num{
  font-family:var(--mono);font-size:11px;letter-spacing:.4em;
  color:var(--amber);text-transform:uppercase;
  margin-bottom:12px;display:flex;align-items:center;gap:12px;
}
.chapter-num::before{content:"";width:40px;height:1px;background:var(--amber)}
h2.chapter-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-.01em;
  margin-bottom:40px;
}
h2.chapter-title em{font-style:italic;color:var(--amber-bright);font-weight:400}
.chapter p{
  margin-bottom:24px;font-size:21px;line-height:1.75;
  color:var(--ink);
  scroll-margin-top:100px;
}
.chapter p.dropcap::first-letter{
  font-family:var(--serif);font-weight:600;
  float:left;font-size:82px;line-height:.85;
  padding:6px 12px 0 0;color:var(--amber-bright);
}
/* Active-line highlight driven by audiobook player */
.chapter p.playing,.aside.playing,.pullquote.playing{
  position:relative;
}
.chapter p.playing::before,.aside.playing::before,.pullquote.playing::before{
  content:"";position:absolute;left:-24px;top:0;bottom:0;width:3px;
  background:var(--amber-bright);box-shadow:0 0 12px var(--amber-bright);
  animation:pulse 2.4s ease-in-out infinite;
}
.chapter .aside{
  font-family:var(--mono);font-size:13px;line-height:1.8;
  color:var(--ink-dim);
  border-left:2px solid var(--amber);
  padding:16px 24px;margin:32px 0;
  background:rgba(216,154,59,.04);
  scroll-margin-top:100px;
}
.chapter .aside .label{
  display:block;color:var(--amber);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;margin-bottom:8px;
}
.pullquote{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(28px,3.5vw,40px);line-height:1.3;
  color:var(--amber-bright);
  text-align:center;max-width:640px;margin:64px auto;
  padding:40px 24px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  position:relative;scroll-margin-top:120px;
}
.pullquote::before,.pullquote::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:6px;height:6px;background:var(--amber);border-radius:50%;
  box-shadow:0 0 12px var(--amber);
}
.pullquote::before{top:-3px}
.pullquote::after{bottom:-3px}

/* ── section break images ── */
.break{
  position:relative;width:100%;height:85vh;min-height:520px;
  overflow:hidden;margin:80px 0;
}
.break img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.break::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,10,.4) 0%,transparent 20%,transparent 80%,rgba(5,6,10,.8) 100%);
}
.break .caption{
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  color:var(--amber);text-transform:uppercase;z-index:3;
  text-align:center;padding:12px 24px;
  background:rgba(5,6,10,.85);
  border:1px solid var(--rule);
}

/* ── inline image ── */
.inline-figure{margin:56px 0;position:relative}
.inline-figure img{border:1px solid var(--rule)}
.inline-figure figcaption{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--ink-faint);text-transform:uppercase;
  text-align:center;margin-top:12px;
}

/* ── dossier card (characters) ── */
.dossier{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin:48px 0;
}
.dossier .card{
  border:1px solid var(--rule);padding:24px;
  background:rgba(8,9,12,.6);
  position:relative;
}
.dossier .card::before{
  content:"";position:absolute;top:0;left:0;width:3px;height:100%;
  background:var(--amber);
}
.dossier .name{
  font-family:var(--serif);font-size:22px;font-weight:500;
  color:var(--amber-bright);margin-bottom:4px;
}
.dossier .role{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--ink-dim);text-transform:uppercase;margin-bottom:14px;
}
.dossier .bio{font-size:15px;font-family:var(--sans);color:var(--ink-dim);line-height:1.6}
.dossier .status{
  display:inline-block;margin-top:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  padding:3px 8px;border:1px solid;text-transform:uppercase;
}
.status-alive{color:#7fb069;border-color:#7fb069}
.status-sealed{color:var(--amber);border-color:var(--amber)}
.status-resigned{color:var(--ink-dim);border-color:var(--ink-dim)}
.status-default{color:var(--rust);border-color:var(--rust)}

/* ── telemetry strip ── */
.telemetry{
  max-width:960px;margin:80px auto;padding:32px 24px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:24px;text-align:center;
  font-family:var(--mono);
}
.telemetry .stat{display:flex;flex-direction:column;gap:6px}
.telemetry .n{
  font-family:var(--serif);font-size:44px;font-weight:500;
  color:var(--amber-bright);line-height:1;
}
.telemetry .l{
  font-size:10px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── epilogue ── */
.epilogue{
  max-width:720px;margin:0 auto;padding:80px 24px 40px;text-align:center;
}
.epilogue h2{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(40px,6vw,64px);
  color:var(--amber-bright);margin-bottom:32px;
}
.epilogue p{font-size:20px;margin-bottom:24px;color:var(--ink-dim);scroll-margin-top:100px}
.sig{
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  color:var(--ink-faint);text-transform:uppercase;
  margin-top:48px;padding-top:32px;border-top:1px solid var(--rule);
}
.sig strong{color:var(--amber);font-weight:400}

/* ── footer ── */
footer{
  padding:64px 24px 140px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.25em;
  color:var(--ink-faint);text-transform:uppercase;
  border-top:1px solid var(--rule);margin-top:80px;
}
footer .seal{
  display:inline-block;width:60px;height:60px;border:1px solid var(--amber);
  border-radius:50%;margin-bottom:16px;position:relative;
}
footer .seal::before{
  content:"USF";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--amber);font-family:var(--serif);font-size:18px;font-weight:500;letter-spacing:.1em;
}
footer .seal::after{
  content:"";position:absolute;inset:6px;border:1px dashed rgba(216,154,59,.3);border-radius:50%;
}

/* ── audiobook player (fixed bottom) ── */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:rgba(5,6,10,.94);
  border-top:1px solid var(--rule);
  color:var(--ink);font-family:var(--mono);
  padding:14px 20px;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:18px;
  box-shadow:0 -12px 40px rgba(0,0,0,.6);
  transform:translateY(100%);transition:transform .4s ease-out;
}
.player.is-ready{transform:translateY(0)}
.player .play{
  width:44px;height:44px;border-radius:50%;
  background:var(--amber);color:var(--bg-deep);
  border:none;cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.player .play:hover{background:var(--amber-bright)}
.player .meta{min-width:0;overflow:hidden}
.player .chapter-label{font-size:9px;letter-spacing:.25em;color:var(--amber);text-transform:uppercase}
.player .now-line{font-family:var(--serif);font-size:14px;color:var(--ink);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-top:2px}
.player .progress{
  grid-column:1 / -1;
  height:3px;background:var(--rule);border-radius:2px;overflow:hidden;
  cursor:pointer;margin-top:10px;
}
.player .progress .bar{height:100%;background:var(--amber);width:0%;transition:width .1s linear}
.player .time{font-size:10px;color:var(--ink-faint);letter-spacing:.1em;white-space:nowrap}
.player .tools{display:flex;gap:8px;align-items:center}
.player .tools button{
  background:transparent;border:1px solid var(--rule);color:var(--ink-dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:6px 10px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.player .tools button:hover,.player .tools button.active{color:var(--amber);border-color:var(--amber)}
.player .chapter-nav{
  position:absolute;bottom:100%;left:0;right:0;
  background:rgba(5,6,10,.98);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  max-height:0;overflow:hidden;transition:max-height .3s ease-out;
}
.player .chapter-nav.open{max-height:320px;overflow-y:auto}
.player .chapter-nav button{
  display:block;width:100%;text-align:left;
  background:transparent;border:none;border-bottom:1px solid var(--rule);
  color:var(--ink-dim);padding:14px 24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;
}
.player .chapter-nav button:hover,.player .chapter-nav button.current{color:var(--amber);background:rgba(216,154,59,.06)}
.player .chapter-nav button .title{font-family:var(--serif);font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink);display:block;margin-top:4px}

@media (max-width:640px){
  body{font-size:18px}
  .chapter{padding:60px 20px}
  .chapter p{font-size:19px}
  .chapter p.dropcap::first-letter{font-size:64px}
  .classification{font-size:9px;padding:8px 16px}
  .classification .right{display:none}
  .transmission{padding:32px 24px;margin:80px 16px}
  .break{height:60vh;min-height:380px}
  .player{grid-template-columns:auto 1fr auto;padding:10px 14px}
  .player .tools{display:none}
}