/* =====================================================================
   STARBOOK · starbook.space
   A living, cinematic atlas of everywhere humanity has reached.
   Design system + layout. Deep-space monochrome, one amber accent.
   ===================================================================== */

/* ---------- 1. Design variables ---------- */
:root {
  /* surfaces */
  --bg:        #05070A;
  --bg-1:      #080B11;
  --bg-2:      #0B0F16;
  --panel:     rgba(255, 255, 255, 0.022);
  --panel-2:   rgba(255, 255, 255, 0.04);

  /* ink */
  --ink:       #EAEEF4;
  --ink-soft:  #AEB7C4;
  --muted:     #788494;
  --faint:     #4A5360;

  /* lines */
  --line:      rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.045);

  /* WARM — alive / here / now. beacon-amber, used sparingly.
     amber always means "something alive is happening here". */
  --accent:        #FF9E2C;            /* live beacon */
  --accent-bright: #FFE9CC;            /* white-hot core of the most active points */
  --accent-deep:   #C9812F;
  --accent-glow:   rgba(255, 158, 44, 0.55);
  --accent-wash:   rgba(255, 158, 44, 0.11);
  --accent-line:   rgba(255, 158, 44, 0.38);

  /* COOL — cold / far / empty / frontier. Now a richer cosmic blue→indigo. */
  --cool:        #5B8AB5;              /* near cool */
  --cool-far:    #2A2E78;              /* far dark, indigo-leaning */
  --cool-bright: #8CB4D7;              /* a cool light, e.g. a ship's marker */
  --cool-glow:   rgba(91, 138, 181, 0.45);
  --cool-wash:   rgba(91, 138, 181, 0.10);

  /* NEBULA — cinematic deep-space colours, sampled from real Hubble/Chandra imagery.
     Amber still owns "alive / here"; these paint the cold cosmos and deep scales. */
  --neb-blue:    #3B6BFF;              /* electric blue */
  --neb-indigo:  #5B3BE0;
  --neb-violet:  #8A45E6;
  --neb-magenta: #C84BD6;
  --neb-pink:    #E85AA8;
  --neb-cyan:    #5FD0E6;
  --neb-glow:    rgba(138, 69, 230, 0.42);
  --neb-wash:    rgba(124, 77, 230, 0.12);

  /* type */
  --font-display: "Space Grotesk", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* motion — weight & inertia */
  --ease:    cubic-bezier(.16, .84, .26, 1);
  --ease-io: cubic-bezier(.62, .05, .2, 1);
  --t-slow:  900ms;
  --t-med:   620ms;
  --t-fast:  320ms;

  /* layout */
  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 64px);

  /* fluid type scale */
  --fs-mono:  clamp(.66rem, .62rem + .2vw, .76rem);
  --fs-body:  clamp(1rem, .96rem + .3vw, 1.18rem);
  --fs-lede:  clamp(1.15rem, 1rem + .9vw, 1.6rem);
  --fs-h3:    clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-h2:    clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem);
  --fs-hero:  clamp(3.4rem, 1.6rem + 8vw, 9rem);
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--accent-wash); color: var(--accent-bright); }

/* ---------- 3. Utilities ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.visually-hidden, .skip-link {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 14px; left: 14px;
  width: auto; height: auto;
  clip: auto; margin: 0;
  padding: 10px 16px;
  background: var(--accent);
  color: #0a0a0a;
  font-family: var(--font-mono);
  font-size: .8rem;
  border-radius: 6px;
  z-index: 200;
}

.eyebrow, .section-index, .mono-tag, .panel__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-index { display: block; margin-bottom: clamp(20px, 4vw, 40px); color: var(--faint); }

.mono-tag { letter-spacing: .14em; color: var(--ink-soft); }
.mono-tag--muted { color: var(--muted); }

.accent-text { color: var(--accent-bright); }

/* buttons */
.btn {
  --pad-y: .9em;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: var(--pad-y) 1.5em;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--accent-line);
  border-radius: 100px;
  background: linear-gradient(180deg, var(--accent-wash), transparent);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  will-change: transform;
}
.btn:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-wash), rgba(255,158,44,.04));
  box-shadow: 0 0 0 1px rgba(255,158,44,.08), 0 10px 40px -16px var(--accent-glow);
  transform: translateY(-2px);
}
.btn__arrow { width: 18px; height: 18px; color: var(--accent); transition: transform var(--t-med) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--lg { --pad-y: 1.05em; font-size: .9rem; padding-inline: 1.9em; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); }
.btn--ghost:hover { border-color: var(--accent-line); color: var(--ink); box-shadow: none; transform: none; }
.btn--sm { padding: .6em 1em; font-size: .72rem; }

/* focus visibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 4. Background field ---------- */
#starfield {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -3;
  background: radial-gradient(135% 120% at 70% -10%, #0a1018 0%, #06080d 42%, var(--bg) 100%);
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%),
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,.6), transparent 60%);
}

/* ---------- 5. Header / nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(5, 7, 10, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--line-soft);
}
.site-nav {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(14px, 2.4vw, 22px) var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark { display: inline-flex; align-items: center; gap: .6em; }
.wordmark__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.18rem;
  letter-spacing: .02em;
  color: var(--ink);
}
.wordmark__beacon {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--accent-bright), var(--accent) 45%, transparent 72%);
  box-shadow: 0 0 14px 1px var(--accent-glow);
  flex: none;
  animation: beaconPulse 4.5s var(--ease-io) infinite;
}
.wordmark--sm .wordmark__text { font-size: 1.05rem; }

.nav-links { list-style: none; display: flex; gap: clamp(18px, 3vw, 40px); padding: 0; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding: 6px 0;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after { transform: scaleX(1); }

@media (max-width: 620px) { .nav-links { display: none; } }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px, 18vh, 220px) 0 132px;
}
.hero__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); width: 100%; }
.hero .eyebrow { color: var(--accent); margin-bottom: clamp(20px, 4vh, 38px); }
.hero .eyebrow::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; margin-right: 12px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px 1px var(--accent-glow);
  vertical-align: middle;
  animation: beaconPulse 3s var(--ease-io) infinite;
}
.hero__title { display: block; }
.hero__logotype {
  display: block;
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: .94;
  background: linear-gradient(176deg, #ffffff 18%, #c6cdd8 78%, #9aa3b0);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__tagline {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, .9rem + 2.4vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  margin-top: clamp(10px, 1.6vw, 20px);
}
.hero__statement {
  max-width: 46ch;
  margin-top: clamp(26px, 4vh, 44px);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-soft);
}
.hero__cta-row { margin-top: clamp(34px, 5vh, 52px); }

/* telemetry */
.telemetry {
  position: absolute;
  left: 0; right: 0; bottom: 64px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
}
.telemetry b { color: var(--ink-soft); font-weight: 500; margin-right: 7px; }
.telemetry i { font-style: normal; color: var(--accent); }
.telemetry__sep { color: var(--faint); }
@media (max-width: 620px) { .telemetry__sep { display: none; } .telemetry { gap: 6px 14px; } }

.scroll-cue {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .34em;
  color: var(--faint);
}
.scroll-cue__line { width: 1px; height: 42px; background: linear-gradient(var(--accent), transparent); animation: cue 2.4s var(--ease-io) infinite; transform-origin: top; }
@media (max-width: 620px) { .scroll-cue { display: none; } }

/* ---------- 7. Generic section rhythm ---------- */
.idea, .experiences, .witness, .reach, .vision {
  position: relative;
  padding-block: clamp(96px, 16vh, 200px);
}

/* ---------- 8. The idea / manifesto ---------- */
.idea__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  max-width: 18ch;
}
.idea__body {
  margin-top: clamp(28px, 4vw, 48px);
  max-width: 58ch;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- 9. The living atlas ---------- */
.atlas { position: relative; height: 280vh; }
.atlas__sticky {
  position: sticky;
  top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: stretch;
}
#atlas-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas__ui {
  position: relative;
  z-index: 2;
  height: 100%;
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-block: clamp(86px, 13vh, 150px) clamp(40px, 7vh, 86px);
}
.atlas__head { align-self: start; }
.atlas__title { font-size: var(--fs-h2); font-weight: 400; margin-top: 4px; }
.atlas__lede { margin-top: 18px; max-width: 38ch; color: var(--ink-soft); font-size: clamp(1rem, .95rem + .4vw, 1.2rem); }
.atlas__cta { margin-top: clamp(22px, 3vw, 32px); pointer-events: auto; }

.atlas__readout {
  align-self: end;
  max-width: var(--wrap);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--gut);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.atlas__scale { color: var(--accent); }
.atlas__stat { color: var(--ink-soft); }
.atlas__coord { color: var(--muted); }

.atlas__progress {
  margin: 20px var(--gut) 0;
  max-width: var(--wrap);
  margin-inline: auto;
  width: calc(100% - 0px);
  padding-inline: var(--gut);
}
.atlas__progress::before {
  content: ""; display: block; height: 1px; background: var(--line);
  position: relative;
}
.atlas__progress-fill {
  display: block; height: 1px; margin-top: -1px;
  width: var(--p, 0%);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width 80ms linear;
}

/* ---------- 10. Experiences (bento) ---------- */
.exp__title { font-size: var(--fs-h2); font-weight: 400; }
.exp__lede { margin-top: 18px; max-width: 44ch; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.45; }

.bento {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
}

.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel)),
    rgba(8, 11, 17, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.panel::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, var(--accent-wash), transparent 55%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  z-index: -1;
}
.panel:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.panel:hover::after { opacity: 1; }

.panel__kicker { color: var(--accent); }
.panel__name { font-size: var(--fs-h3); font-weight: 500; line-height: 1.08; }
.panel__text { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; max-width: 42ch; }
.panel__body { display: flex; flex-direction: column; gap: 12px; }
.panel .mono-tag { margin-top: auto; padding-top: 6px; }

/* micro-mockups */
.panel__mock {
  position: relative;
  border-radius: 12px;
  background: rgba(3, 5, 9, 0.5);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  min-height: 0;
}
.mock { width: 100%; height: auto; color: var(--faint); }
.mock .ring { stroke-width: 1; }
.ring--3 { opacity: .35; } .ring--2 { opacity: .55; } .ring--1 { opacity: .8; }
.beacon-dot { fill: var(--accent); }
.mock .beacon-dot { filter: drop-shadow(0 0 6px var(--accent-glow)); }
.beacon-halo { fill: var(--accent); opacity: .16; }
.trail { stroke: var(--accent-line); stroke-width: 1.4; stroke-dasharray: 2 4; stroke-linecap: round; }
.dot-dim { fill: var(--ink-soft); opacity: .6; }

/* vista mock */
.mock--vista { display: block; }
.panel--vistas .panel__mock { aspect-ratio: 16 / 10; }
.vista-ring { stroke: var(--accent-line); stroke-width: 1.2; opacity: .7; }
.panel__frame {
  position: absolute; inset: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  pointer-events: none;
}
.panel__frame::before, .panel__frame::after {
  content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--accent-line);
}
.panel__frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel__frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* expedition mock */
.exped-path { stroke: var(--line); stroke-width: 1.4; }
.exped-way circle { fill: var(--ink-soft); opacity: .7; }
.exped-marker { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow)); }
.exped-marker-halo { fill: var(--accent); opacity: .15; }

/* proximity mock */
.prox-sweep { stroke: var(--accent); stroke-width: 1.2; opacity: .8; transform-origin: 160px 104px; animation: sweep 6s linear infinite; }
.prox-dots circle { fill: var(--ink-soft); }
.prox-dots circle:nth-child(odd) { fill: var(--accent); opacity: .9; }

/* signals (interactive) */
.signals { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.signals__dests { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  padding: .5em .85em;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--line); }
.chip.is-active { color: #120d04; background: var(--accent); border-color: var(--accent); font-weight: 500; }

.signals__wire { display: flex; align-items: center; gap: 12px; }
.signals__node {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em;
  color: var(--ink-soft); white-space: nowrap;
}
.signals__node--b { color: var(--accent); }
.signals__track {
  position: relative; flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--line), var(--accent-line));
  border-radius: 2px;
}
.signals__pulse {
  position: absolute; top: 50%; left: 0;
  width: 8px; height: 8px; margin-top: -4px; margin-left: -4px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 10px 2px var(--accent-glow);
  opacity: 0;
}
.signals__pulse.is-travelling { opacity: 1; }

.signals__readout { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.signals__delay {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
  color: var(--ink); text-transform: uppercase;
}
.signals__delay b { color: var(--accent); font-weight: 500; }

/* bento placement — tablet */
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .panel--beacon  { grid-column: span 2; }
  .panel--signals { grid-column: span 2; }
  .panel--proximity { grid-column: span 2; }
}
/* bento placement — desktop */
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); }
  .panel--beacon  { grid-column: span 3; grid-row: span 2; }
  .panel--signals { grid-column: span 3; grid-row: span 2; }
  .panel--vistas     { grid-column: span 2; }
  .panel--expeditions{ grid-column: span 2; }
  .panel--proximity  { grid-column: span 2; }
  .panel--beacon .panel__mock { flex: 1; display: grid; place-items: center; }
  .panel--beacon .mock--beacon { max-height: 280px; }
}

/* ---------- 11. Witness ---------- */
.witness::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 80% 30%, rgba(255,158,44,.05), transparent 60%);
  pointer-events: none;
}
.witness__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 920px) { .witness__grid { grid-template-columns: 1fr 1.05fr; } }
.witness__title { font-size: var(--fs-h2); font-weight: 400; }
.witness__body { margin-top: 24px; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.5; max-width: 50ch; }

.moment {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(8, 11, 17, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.moment__scene {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 140% at 20% 120%, #101a26 0%, #070a10 55%, #05070a 100%);
  overflow: hidden;
}
.moment__world {
  position: absolute; left: -18%; bottom: -62%;
  width: 86%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #2a3a4b, #0c1622 62%, #070b11);
  box-shadow: inset -30px -20px 60px rgba(0,0,0,.6);
}
.moment__ship-arc {
  position: absolute; top: 18%; left: 8%;
  width: 84%; height: 64%;
  border-top: 1.5px solid var(--cool);
  border-right: 1.5px solid transparent;
  border-radius: 50%;
  transform: rotate(-14deg);
  opacity: .55;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.moment__ship-arc::after {
  content: ""; position: absolute; right: 6%; top: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cool);
  box-shadow: 0 0 12px 2px rgba(91,138,181,.7);
}
.moment__caption { padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 14px; }
.live-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: liveDot 2.2s var(--ease-io) infinite; }
.moment__name { font-size: var(--fs-h3); font-weight: 500; line-height: 1.12; }
.moment__name em { font-style: italic; color: var(--ink); }
.moment__stats { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 4px; }
.moment__stats div { display: flex; flex-direction: column; gap: 3px; }
.moment__stats dt { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.moment__stats dd { font-family: var(--font-mono); font-size: 1.05rem; color: var(--ink); }
.moment__stats dd[data-witness-count] { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- 12. Reach ---------- */
.reach__title { font-size: var(--fs-h2); font-weight: 400; }
.reach__body { margin-top: 24px; max-width: 56ch; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.5; }
.reach__ladder { list-style: none; padding: 0; margin: clamp(40px, 6vw, 64px) 0 0; display: flex; flex-direction: column; gap: 14px; }
.rung {
  display: grid;
  grid-template-columns: minmax(96px, 0.5fr) 1fr minmax(96px, 0.55fr);
  align-items: center;
  gap: 16px;
  padding-block: 6px;
}
.rung__label { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; color: var(--ink); }
.rung__bar { position: relative; height: 2px; background: var(--line); border-radius: 2px; }
.rung__bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--fill, 0%);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  border-radius: 2px;
  box-shadow: 0 0 10px -1px var(--accent-glow);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease);
}
.is-revealed .rung__bar::after { transform: scaleX(1); }
.rung__val { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted); text-align: right; }
.rung--peak .rung__label { color: var(--accent-bright); }
.rung--peak .rung__val { color: var(--ink-soft); }
@media (max-width: 560px) {
  .rung { grid-template-columns: 1fr; gap: 6px; }
  .rung__val { text-align: left; }
}

/* ---------- 13. Vision / closing ---------- */
.vision { text-align: center; padding-block: clamp(120px, 22vh, 260px); }
.vision__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 4vw, 40px); }
.vision__title { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 5.4rem); font-weight: 400; }
.vision__body { max-width: 50ch; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.5; }

/* ---------- 14. Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 80px); position: relative; }
.footer__grid {
  display: grid; gap: 28px 40px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: auto 1fr auto; } }
.footer__line { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; color: var(--muted); margin-top: 10px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: flex-start; }
@media (min-width: 760px) { .footer__nav { justify-content: center; } }
.footer__nav a { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.footer__nav a:hover { color: var(--accent); }
.footer__flavor { line-height: 1.7; max-width: 30ch; }
@media (min-width: 760px) { .footer__flavor { text-align: right; justify-self: end; } }

/* ---------- 15. Sound toggle ---------- */
.sound-toggle {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(5, 7, 10, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--muted);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sound-toggle:hover { color: var(--ink); border-color: var(--accent-line); }
.sound-toggle__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-toggle__bars i { width: 2px; height: 4px; background: currentColor; border-radius: 1px; }
.sound-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i { animation: eq 1.1s var(--ease-io) infinite; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(2){ animation-delay: .18s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(3){ animation-delay: .36s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(4){ animation-delay: .12s; }

/* ---------- 16. Reveal system ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- 17. Keyframes ---------- */
@keyframes beaconPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 14px 1px var(--accent-glow); }
  50%      { opacity: .72; box-shadow: 0 0 7px 0 var(--accent-glow); }
}
@keyframes liveDot {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 10px rgba(255,158,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,158,44,0); }
}
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 14px; } }

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .rung__bar::after { transform: scaleX(1); }
  .atlas { height: auto; }
  .atlas__sticky { position: relative; height: auto; min-height: 88vh; }
  .scroll-cue__line { animation: none; opacity: .5; }
}