:root {
  /* Typography compliance terms: IBM Plex Sans Condensed for HUD labels; Roboto Flex changes width and weight as the “first signal” resolves from urban noise into mission language. Roboto Flex for the main variable headline system. Use its width and weight axes through CSS variables so the title subtly compresses. Roboto Flex should shift from wide/blurred to condensed/precise. */
  --concrete-black: #07090D;
  --wet-asphalt: #151A22;
  --cool-slate: #2D3746;
  --fog-gray: #A7B0BC;
  --paper-ash: #D8DCE2;
  --signal-cyan: #39D6E8;
  --bruised-violet: #5B4B8A;
  --warning-paint: #F04D5E;
  --title-wdth: 128;
  --title-wght: 760;
  --scroll-shift: 0px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(91, 75, 138, 0.25), transparent 30vw),
    radial-gradient(circle at 82% 45%, rgba(57, 214, 232, 0.11), transparent 24vw),
    linear-gradient(135deg, #07090D 0%, #151A22 42%, #0b0f15 100%);
  color: var(--paper-ash);
  font-family: "Newsreader", serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(216, 220, 226, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(216, 220, 226, 0.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 45%), black 0, black 15%, transparent 55%);
  opacity: 0.45;
  z-index: 4;
}

.atmosphere,
.fixed-hud,
.grain,
.inspection-light {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.atmosphere { z-index: 1; overflow: hidden; }

.grain {
  opacity: 0.22;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(216, 220, 226, 0.12) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(216, 220, 226, 0.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

.inspection-light {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(57, 214, 232, 0.16), transparent 18rem);
  mix-blend-mode: screen;
}

.fixed-hud { width: 100%; height: 100%; opacity: 0.34; }
.fixed-hud path, .fixed-hud circle { fill: none; stroke: var(--signal-cyan); stroke-width: 0.12; vector-effect: non-scaling-stroke; }
.fixed-hud .route-line { stroke: var(--warning-paint); stroke-width: 0.28; stroke-dasharray: 3 2; transform: translateY(var(--scroll-shift)); }
.fixed-hud .route-ghost { stroke: var(--bruised-violet); opacity: 0.55; }
.hud-grid { opacity: 0.18; }

.chapter-rail {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.chapter-rail a {
  color: var(--fog-gray);
  text-decoration: none;
  writing-mode: vertical-rl;
  font-size: 0.72rem;
  padding: 0.7rem 0.35rem;
  border-left: 1px solid rgba(57, 214, 232, 0.35);
  background: rgba(7, 9, 13, 0.58);
}

.chapter-rail a.active { color: var(--signal-cyan); border-color: var(--warning-paint); }

main { position: relative; z-index: 5; }

.spread {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 5.5rem);
  overflow: hidden;
  border-bottom: 1px solid rgba(216, 220, 226, 0.11);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(216, 220, 226, 0.18) calc(50% - 1px), rgba(216, 220, 226, 0.18) calc(50% + 1px), transparent calc(50% + 1px));
}

.fold-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 48%;
  width: 1px;
  background: linear-gradient(transparent, var(--fog-gray), transparent);
  opacity: 0.5;
}

.hud-label {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  color: var(--signal-cyan);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(0.68rem, 1.2vw, 0.9rem);
}

.cover-spread {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: end;
  background-color: rgba(7, 9, 13, 0.58);
}

.cover-meta { position: absolute; top: 2rem; left: 2rem; }

.mega-title {
  grid-column: 1 / -1;
  position: relative;
  z-index: 4;
  margin: 0 0 4vh;
  font-family: "Roboto Flex", sans-serif;
  font-size: clamp(4rem, 15vw, 15rem);
  line-height: 0.72;
  letter-spacing: -0.09em;
  color: var(--paper-ash);
  font-variation-settings: "wdth" var(--title-wdth), "wght" var(--title-wght), "opsz" 144;
  text-transform: uppercase;
  text-shadow: 0.04em 0.02em 0 var(--bruised-violet), -0.018em 0 0 var(--signal-cyan);
}

.mega-title span { display: block; clip-path: polygon(0 0, 100% 0, 96% 88%, 2% 100%); }

.cover-note {
  position: absolute;
  right: 8vw;
  bottom: 8vh;
  max-width: 29rem;
  font-size: clamp(1.3rem, 2.5vw, 2.5rem);
  line-height: 1;
  color: var(--fog-gray);
  transform: rotate(-2deg);
}

.photo-panel {
  position: relative;
  min-height: 40vh;
  border: 1px solid rgba(216, 220, 226, 0.18);
  background: var(--cool-slate);
  overflow: hidden;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.55);
}

.cover-photo {
  position: absolute;
  top: 13vh;
  right: 6vw;
  width: min(42vw, 40rem);
  height: 52vh;
  transform: rotate(2.2deg);
}

.photo-texture {
  position: absolute;
  inset: 0;
  filter: contrast(1.45) grayscale(1);
  background-blend-mode: hard-light, multiply, normal;
}

.photo-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(91, 75, 138, 0.65), rgba(57, 214, 232, 0.2)), repeating-linear-gradient(0deg, rgba(216, 220, 226, 0.1) 0 1px, transparent 1px 5px);
  mix-blend-mode: color-dodge;
}

.tunnel {
  background-image:
    radial-gradient(ellipse at center, transparent 0 17%, rgba(7, 9, 13, 0.5) 18% 25%, transparent 26%),
    linear-gradient(110deg, transparent 0 46%, rgba(216, 220, 226, 0.28) 47% 49%, transparent 50%),
    repeating-linear-gradient(90deg, #07090D 0 18px, #2D3746 18px 32px, #151A22 32px 54px);
}

.launch {
  background-image:
    linear-gradient(90deg, rgba(7, 9, 13, 0.7), transparent 24%, rgba(7, 9, 13, 0.35)),
    repeating-linear-gradient(90deg, #151A22 0 12px, #A7B0BC 12px 14px, #2D3746 14px 42px),
    linear-gradient(#5B4B8A, #07090D);
}

.road {
  background-image:
    radial-gradient(ellipse at 52% 40%, rgba(216, 220, 226, 0.24), transparent 16%),
    linear-gradient(82deg, transparent 0 44%, rgba(216, 220, 226, 0.34) 45% 46%, transparent 47%),
    linear-gradient(160deg, #07090D, #2D3746 44%, #5B4B8A 100%);
}

.photo-caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.35rem 0.55rem;
  background: rgba(7, 9, 13, 0.75);
}

.title-brackets {
  position: absolute;
  inset: 6vh 4vw;
  width: 92vw;
  height: 82vh;
  stroke: var(--signal-cyan);
  fill: none;
  stroke-width: 0.45;
  opacity: 0.62;
}

.spray-tag, .margin-note, .red-arrow {
  font-family: "Permanent Marker", cursive;
  color: var(--warning-paint);
}

.tag-one {
  position: absolute;
  left: 6vw;
  bottom: 12vh;
  font-size: clamp(1.3rem, 3vw, 3rem);
  transform: rotate(-8deg);
  opacity: 0.9;
}

.incident-spread {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}

.vertical-tab {
  position: absolute;
  left: 1rem;
  top: 18vh;
  writing-mode: vertical-rl;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  text-transform: uppercase;
  color: var(--fog-gray);
  border-right: 2px solid var(--warning-paint);
  padding: 1rem 0.3rem;
}

.narrative-column { max-width: 42rem; }

h2 {
  margin: 0;
  font-family: "Roboto Flex", sans-serif;
  font-variation-settings: "wdth" 78, "wght" 820, "opsz" 96;
  font-size: clamp(2.7rem, 7vw, 8rem);
  line-height: 0.86;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

p {
  color: var(--fog-gray);
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  line-height: 1.45;
}

blockquote {
  margin: 2rem 0 0 -2vw;
  color: var(--paper-ash);
  font-size: clamp(2rem, 4.8vw, 5.7rem);
  line-height: 0.9;
  border-left: 0.6rem solid var(--warning-paint);
  padding-left: 1rem;
  transform: rotate(-2deg);
}

.incident-photo { min-height: 68vh; transform: rotate(-1.2deg); }
.photo-hud { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--signal-cyan); fill: none; stroke-width: 0.45; opacity: 0.75; }
.photo-hud .wave { stroke: var(--warning-paint); stroke-width: 0.8; }
.photo-tag { position: absolute; top: 18%; left: 12%; font-size: clamp(1.5rem, 3vw, 3.7rem); transform: rotate(-11deg); }

.signal-spread { display: flex; align-items: center; padding-inline: 0; }
.map-foldout { width: 100%; min-height: 72vh; padding: 2rem clamp(2rem, 6vw, 7rem); background: rgba(45, 55, 70, 0.42); border-block: 1px solid rgba(57, 214, 232, 0.35); transform: skewY(-1deg); }
.coordinate-strip { border-bottom: 1px dashed rgba(57, 214, 232, 0.45); padding-bottom: 0.75rem; }
.signal-map { width: 100%; height: min(46vh, 520px); margin: 2rem 0; overflow: visible; }
.morph-blob { fill: rgba(7, 9, 13, 0.86); stroke: var(--bruised-violet); stroke-width: 5; transition: d 0.4s ease; }
.scan-rings circle { fill: none; stroke: var(--signal-cyan); stroke-width: 2; opacity: 0.55; transform-origin: center; animation: rotateScan 12s linear infinite; }
.paint-route { fill: none; stroke: var(--warning-paint); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 24 18; animation: routeDraw 5s linear infinite; }
.ticks path { stroke: var(--paper-ash); stroke-width: 2; opacity: 0.5; }

.witness-spread { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.witness-photo { position: absolute; inset: 14vh auto auto 8vw; width: 36vw; height: 58vh; transform: rotate(4deg); opacity: 0.72; }
.witness-spread h2, .witness-core { grid-column: 2; position: relative; z-index: 3; }
.witness-core { max-width: 37rem; }
.margin-note { position: absolute; max-width: 18rem; font-size: clamp(1rem, 2.2vw, 2.4rem); line-height: 1; color: var(--paper-ash); text-shadow: 0.08em 0.04em 0 var(--warning-paint); }
.note-a { top: 10vh; left: 6vw; transform: rotate(-7deg); }
.note-b { bottom: 18vh; left: 18vw; transform: rotate(5deg); }
.note-c { top: 18vh; right: 12vw; transform: rotate(8deg); }
.note-d { bottom: 12vh; right: 7vw; transform: rotate(-5deg); color: var(--signal-cyan); }
.spray-glyphs { position: absolute; left: 10vw; bottom: 7vh; font-family: "Permanent Marker", cursive; font-size: clamp(2rem, 7vw, 8rem); color: rgba(240, 77, 94, 0.25); }

.threshold-spread { display: grid; place-items: center; background-color: rgba(7, 9, 13, 0.82); }
.poster-field { position: relative; width: min(92vw, 75rem); min-height: 82vh; border: 1px solid rgba(216, 220, 226, 0.16); background: radial-gradient(circle at 50% 46%, rgba(91, 75, 138, 0.25), transparent 31%), #07090D; overflow: hidden; }
.portal-svg { position: absolute; inset: 50% auto auto 50%; width: min(70vw, 48rem); transform: translate(-50%, -50%); }
.portal-shape { fill: #07090D; stroke: var(--bruised-violet); stroke-width: 10; filter: drop-shadow(0 0 2rem rgba(57, 214, 232, 0.18)); }
.portal-ring { fill: none; stroke: var(--signal-cyan); stroke-width: 3; stroke-dasharray: 12 18; animation: routeDraw 6s linear infinite reverse; }
.threshold-copy { position: absolute; left: clamp(1.5rem, 5vw, 5rem); bottom: clamp(1.5rem, 5vw, 5rem); max-width: 44rem; }
.threshold-copy h2 { color: var(--paper-ash); }
.red-arrow { position: absolute; right: 10vw; top: 17vh; font-size: clamp(4rem, 13vw, 14rem); color: var(--warning-paint); transform: rotate(18deg); }

@keyframes rotateScan { to { transform: rotate(360deg); } }
@keyframes routeDraw { to { stroke-dashoffset: -180; } }

@media (max-width: 800px) {
  .chapter-rail { display: none; }
  .cover-spread, .incident-spread, .witness-spread { grid-template-columns: 1fr; }
  .cover-photo, .witness-photo { position: relative; inset: auto; width: 100%; height: 42vh; margin-top: 5rem; }
  .mega-title { font-size: clamp(4rem, 23vw, 8rem); }
  .witness-spread h2, .witness-core { grid-column: 1; }
  .margin-note { position: relative; inset: auto; margin: 1rem 0; }
}