:root {
  /* DESIGN typography tokens: IBM Plex Sans” for explanatory copy; Space Mono” for coordinates. */
  --archive-black: #080807;
  --bone-ledger: #F2EBDD;
  --graphite: #2A2925;
  --fog-gray: #A7A39A;
  --aurora-green: #A8FFD6;
  --polar-white: #FCFCF7;
  --deep-teal: #10231F;
  --rail-x: 21vw;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--archive-black);
  color: var(--bone-ledger);
  font-family: "IBM Plex Sans", sans-serif;
  overflow-x: hidden;
}

#aurora-canvas, .grain, .scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#aurora-canvas { z-index: 0; opacity: .72; }

.grain {
  z-index: 5;
  opacity: .18;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(252,252,247,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 64%, rgba(167,163,154,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 43% 83%, rgba(242,235,221,.12) 0 1px, transparent 1.5px);
  background-size: 77px 77px, 113px 113px, 151px 151px;
  mix-blend-mode: screen;
}

.scanlines {
  z-index: 4;
  opacity: .18;
  background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(252,252,247,.045) 8px, transparent 10px);
}

.accession-tag {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 20;
  padding: 10px 13px;
  border: 1px solid rgba(242,235,221,.28);
  border-radius: 16px 16px 16px 3px;
  background: rgba(42,41,37,.62);
  backdrop-filter: blur(16px);
  font-family: "Space Mono", monospace;
  color: var(--fog-gray);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.accession-tag strong { display: block; color: var(--bone-ledger); font-size: 11px; margin-top: 3px; }

.timeline {
  position: fixed;
  z-index: 12;
  left: var(--rail-x);
  top: 0;
  bottom: 0;
  width: 170px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 13vh 0 9vh;
}

.timeline-rail {
  position: absolute;
  left: 50%;
  top: 6vh;
  bottom: -12vh;
  width: 2px;
  background: linear-gradient(var(--graphite), var(--fog-gray), var(--graphite), transparent);
  box-shadow: 0 0 0 1px rgba(8,8,7,.95), 0 0 28px rgba(168,255,214,.16);
}

.timeline-node {
  position: relative;
  width: 170px;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--fog-gray);
  cursor: pointer;
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
  filter: blur(1.8px);
  opacity: .55;
  transition: opacity .55s ease, filter .55s ease, color .55s ease;
}

.timeline-node::before {
  content: attr(data-index);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: radial-gradient(circle, var(--graphite), var(--archive-black) 68%);
  border: 1px solid rgba(242,235,221,.28);
  color: var(--fog-gray);
  font-family: "Bungee", sans-serif;
  font-size: 10px;
}

.timeline-node::after {
  content: "";
  position: absolute;
  left: calc(50% + 21px);
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--aurora-green);
  box-shadow: 0 0 15px var(--aurora-green);
  transition: width .7s ease;
}

.timeline-node span { display: block; margin-left: 102px; width: 120px; }

.timeline-node.active { filter: blur(0); opacity: 1; color: var(--bone-ledger); }
.timeline-node.active::before { background: radial-gradient(circle, var(--polar-white) 0 19%, var(--aurora-green) 21% 31%, var(--graphite) 34% 66%, var(--archive-black)); border-color: var(--aurora-green); box-shadow: 0 0 28px rgba(168,255,214,.78); color: var(--archive-black); }
.timeline-node.active::after { width: 21vw; }

.archive-scroll { position: relative; z-index: 2; }

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 32vw) 1fr;
  gap: 4vw;
  align-items: center;
  padding: 8vh 7vw 8vh 31vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 22%, rgba(168,255,214,.08), transparent 32%),
    linear-gradient(115deg, rgba(8,8,7,.95), rgba(16,35,31,.25) 48%, rgba(42,41,37,.52));
}

.chapter:nth-child(even) { background: linear-gradient(95deg, var(--archive-black), rgba(42,41,37,.82) 54%, rgba(8,8,7,.96)); }
.chapter.blackout { background: radial-gradient(circle at 70% 50%, rgba(168,255,214,.12), transparent 28%), var(--archive-black); }

.chapter::before {
  content: attr(data-step);
  position: absolute;
  left: 5vw;
  top: 12vh;
  font-family: "Bungee", sans-serif;
  font-size: clamp(72px, 14vw, 210px);
  color: rgba(242,235,221,.035);
}

.chapter-copy, .evidence-stage {
  transition: filter .85s ease, opacity .85s ease, transform .85s ease;
  filter: blur(6px);
  opacity: .34;
  transform: translateY(26px);
}

.chapter.active .chapter-copy, .chapter.active .evidence-stage { filter: blur(0); opacity: 1; transform: translateY(0); }

.eyebrow {
  margin: 0 0 18px;
  color: var(--aurora-green);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: "Bungee", sans-serif;
  color: var(--bone-ledger);
  line-height: .93;
  letter-spacing: .02em;
  text-transform: uppercase;
}

h1 { font-size: clamp(58px, 9vw, 138px); text-shadow: 0 0 26px rgba(168,255,214,.18); }
h2 { font-size: clamp(38px, 5vw, 82px); }

.summary, .chapter-copy p:not(.eyebrow) {
  max-width: 520px;
  color: var(--fog-gray);
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.55;
}

.evidence-stage {
  min-height: 58vh;
  position: relative;
  border: 1px solid rgba(242,235,221,.16);
  border-radius: 36px 36px 36px 8px;
  background: rgba(8,8,7,.42);
  box-shadow: inset 0 0 0 1px rgba(252,252,247,.045), 0 30px 80px rgba(0,0,0,.36);
  backdrop-filter: blur(5px);
}

.museum-label, .part-number, .micro-label {
  position: absolute;
  font-family: "Space Mono", monospace;
  color: var(--fog-gray);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
}
.museum-label { top: 26px; left: 28px; }
.part-number { right: 36px; bottom: 32px; color: var(--aurora-green); }
.micro-label { left: 38px; bottom: 34px; }

.waveform, .dependency-map { position: absolute; inset: 12% 8%; width: 84%; height: 76%; overflow: visible; }
.draw-svg path, .draw-svg circle { fill: none; stroke: var(--polar-white); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .86; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.5s ease, opacity .7s ease; }
.draw-svg .ghost { stroke: var(--aurora-green); opacity: .45; }
.chapter.active .draw-svg path, .chapter.active .draw-svg circle { stroke-dashoffset: 0; }

.serial-card {
  position: absolute;
  width: 42%;
  min-height: 115px;
  padding: 18px;
  border: 1px solid rgba(242,235,221,.24);
  border-radius: 20px 20px 20px 4px;
  background: var(--bone-ledger);
  color: var(--archive-black);
  box-shadow: 14px 18px 0 rgba(42,41,37,.9);
}
.serial-card.wide { left: 9%; top: 12%; width: 56%; }
.serial-card:not(.wide) { right: 9%; bottom: 14%; }
.serial-card span { font-family: "Space Mono", monospace; font-size: 12px; }
.serial-card b { display: block; margin-top: 15px; font-family: "Bungee", sans-serif; font-weight: 400; line-height: 1.05; }
.serial-card i { display: block; height: 14px; margin-top: 20px; background: repeating-linear-gradient(90deg, var(--archive-black) 0 18px, transparent 18px 28px); }

.bar-stack { position: absolute; left: 12%; bottom: 13%; width: 42%; display: grid; gap: 12px; }
.bar-stack span { height: 15px; width: var(--w); background: linear-gradient(90deg, var(--aurora-green), var(--fog-gray)); box-shadow: 0 0 18px rgba(168,255,214,.32); }
.punch-card { position: absolute; right: 13%; top: 16%; display: flex; gap: 12px; transform: rotate(-3deg); }
.punch-card em { width: 18px; height: 82px; border-radius: 12px; background: var(--graphite); box-shadow: inset 0 0 0 1px rgba(242,235,221,.15); }

.dependency-map circle { fill: rgba(8,8,7,.9); stroke: var(--aurora-green); }

.anomaly-stage { display: grid; place-items: center; }
.bloom-core { position: relative; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--polar-white), var(--aurora-green) 12%, rgba(168,255,214,.16) 28%, transparent 62%); filter: drop-shadow(0 0 52px rgba(168,255,214,.72)); }
.bloom-core span { position: absolute; inset: -24px; border: 1px solid rgba(168,255,214,.34); border-radius: 50%; animation: pulse 5s infinite ease-in-out; }
.bloom-core span:nth-child(2) { inset: -62px; animation-delay: .8s; }
.bloom-core span:nth-child(3) { inset: -104px; animation-delay: 1.6s; }
.radial-gauge { position: absolute; right: 12%; bottom: 16%; width: 190px; height: 190px; border: 1px solid rgba(242,235,221,.28); border-radius: 50%; }
.radial-gauge i { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(242,235,221,.16); transform-origin: 50% 95px; }
.radial-gauge i:nth-child(2) { transform: rotate(45deg); } .radial-gauge i:nth-child(3) { transform: rotate(90deg); } .radial-gauge i:nth-child(4) { transform: rotate(135deg); }
.radial-gauge b { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Space Mono", monospace; color: var(--aurora-green); }

.redaction-stage { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 8%; }
.redacted-card { width: min(560px, 90%); padding: 20px 22px; border: 1px solid rgba(242,235,221,.2); border-radius: 18px 18px 18px 4px; background: rgba(242,235,221,.86); color: var(--archive-black); transform: translateX(12%); }
.redacted-card:nth-child(2) { margin-left: auto; transform: translateX(-8%); }
.redacted-card span { font-family: "Space Mono", monospace; font-size: 12px; }
.redacted-card h3 { font-family: "Bungee", sans-serif; font-size: 18px; font-weight: 400; margin: 10px 0; }
.redacted-card p { height: 13px; width: 84%; background: var(--archive-black); margin: 11px 0 0; }
.redacted-card p.short { width: 48%; }

.wiki-map { position: absolute; inset: 12%; }
.wiki-map a { position: absolute; padding: 10px 13px; border: 1px solid rgba(168,255,214,.45); border-radius: 999px; background: rgba(16,35,31,.82); color: var(--bone-ledger); font-family: "Space Mono", monospace; font-size: 12px; text-transform: uppercase; box-shadow: 0 0 24px rgba(168,255,214,.12); }
.wiki-map a::before { content: ""; position: absolute; left: -90px; top: 50%; width: 90px; height: 1px; background: rgba(242,235,221,.24); }
.wiki-map a:nth-child(1) { left: 38%; top: 42%; color: var(--aurora-green); }
.wiki-map a:nth-child(2) { left: 12%; top: 14%; } .wiki-map a:nth-child(3) { left: 58%; top: 13%; } .wiki-map a:nth-child(4) { left: 74%; top: 38%; }
.wiki-map a:nth-child(5) { left: 9%; top: 62%; } .wiki-map a:nth-child(6) { left: 52%; top: 70%; } .wiki-map a:nth-child(7) { left: 27%; top: 78%; } .wiki-map a:nth-child(8) { left: 67%; top: 58%; }

.open-stage { display: grid; place-items: center; }
.reel { width: 300px; height: 300px; border: 22px solid var(--graphite); border-radius: 50%; background: radial-gradient(circle, var(--archive-black) 0 14%, var(--bone-ledger) 15% 18%, var(--graphite) 19% 100%); box-shadow: inset 0 0 0 2px rgba(242,235,221,.18), 0 0 60px rgba(168,255,214,.12); animation: rotateReel 32s linear infinite; }
.reel span, .reel::before, .reel::after { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; background: var(--archive-black); }
.reel span { transform: translate(110px, 24px); } .reel::before { transform: translate(34px, 172px); } .reel::after { transform: translate(184px, 172px); }
.continuation { position: absolute; left: 12%; bottom: -18%; display: grid; gap: 24px; }
.continuation i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--fog-gray); background: var(--archive-black); }
.drawer-link { display: inline-block; margin-top: 20px; color: var(--aurora-green); font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; border-bottom: 1px solid var(--aurora-green); }

@keyframes pulse { 0%,100% { opacity: .18; transform: scale(.92); } 50% { opacity: .72; transform: scale(1.05); } }
@keyframes rotateReel { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  :root { --rail-x: 45px; }
  .accession-tag { display: none; }
  .timeline { width: 86px; padding: 10vh 0 7vh; }
  .timeline-node { width: 86px; }
  .timeline-node span { display: none; }
  .timeline-node.active::after { width: 38vw; }
  .chapter { grid-template-columns: 1fr; padding: 13vh 6vw 9vh 88px; gap: 20px; }
  .evidence-stage { min-height: 45vh; }
  .serial-card { width: 72%; }
  .serial-card:not(.wide) { right: 5%; }
  .wiki-map a { font-size: 10px; }
}