:root {
  --ink: #070708;
  --ink-soft: #0b0b0c;
  --surface: #101011;
  --ivory: #ebe2d3;
  --paper: #cbc0ae;
  --muted: #91897e;
  --dim: #5f5a52;
  --gold: #b89f70;
  --gold-bright: #e0c895;
  --gold-hot: #f2d9a4;
  --line: rgba(210, 190, 151, 0.2);
  --line-soft: rgba(210, 190, 151, 0.09);
  --glass: rgba(8, 8, 9, 0.72);
  --serif: Baskerville, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --rail: 72px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 900;
  height: 10px;
  content: "";
  pointer-events: none;
  background: #030304;
}

body::before { top: 0; }
body::after { bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
}

button,
summary {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 1px solid var(--gold-bright);
  outline-offset: 4px;
}

em {
  color: var(--gold-bright);
  font-style: normal;
}

.system-field,
.film-grain,
.film-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.system-field {
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0.42;
  mix-blend-mode: screen;
}

.film-grain {
  z-index: 800;
  opacity: 0.055;
  background-image:
    repeating-radial-gradient(circle at 15% 35%, rgba(255,255,255,0.8) 0 0.5px, transparent 0.5px 3px),
    repeating-radial-gradient(circle at 82% 63%, rgba(255,255,255,0.4) 0 0.4px, transparent 0.4px 4px);
  background-size: 7px 7px, 11px 11px;
  animation: grain 0.24s steps(2) infinite;
}

.film-vignette {
  z-index: 799;
  box-shadow: inset 0 0 190px 30px rgba(0, 0, 0, 0.88);
}

.prelude {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #050506;
  transition: opacity 1s ease, visibility 1s ease;
}

.prelude-glyph {
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: clamp(6rem, 17vw, 14rem);
  line-height: 1;
  filter: drop-shadow(0 0 42px rgba(224, 200, 149, 0.25));
  animation: preludePulse 2.2s ease-in-out infinite;
}

.prelude i {
  position: absolute;
  right: 18%;
  bottom: 18%;
  left: 18%;
  height: 1px;
  overflow: hidden;
  background: rgba(224, 200, 149, 0.16);
}

.prelude i::after {
  display: block;
  width: 42%;
  height: 100%;
  content: "";
  background: var(--gold-bright);
  box-shadow: 0 0 18px var(--gold-bright);
  animation: preload 2.1s ease-in-out infinite;
}

body.ready .prelude {
  visibility: hidden;
  opacity: 0;
}

.command-rail {
  position: fixed;
  top: 10px;
  right: 0;
  left: 0;
  z-index: 850;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--rail);
  padding: 0 clamp(22px, 4vw, 72px);
  border-bottom: 1px solid rgba(210, 190, 151, 0.15);
  background: linear-gradient(to bottom, rgba(5, 5, 6, 0.92), rgba(5, 5, 6, 0.64));
  backdrop-filter: blur(18px);
}

.brand,
.source-brand {
  display: inline-flex;
  gap: 13px;
  align-items: center;
  width: max-content;
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0.18em;
}

.brand-glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(224, 200, 149, 0.7);
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1;
  transform: rotate(0.001deg);
  box-shadow: inset 0 0 18px rgba(224, 200, 149, 0.08);
}

.rail-state {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.rail-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 14px rgba(224, 200, 149, 0.9);
  animation: breathe 3.2s ease-in-out infinite;
}

.command-rail nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(14px, 2vw, 30px);
}

.command-rail nav a {
  position: relative;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.command-rail nav a::after {
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.command-rail nav a:hover,
.command-rail nav a:focus-visible { color: var(--ivory); }
.command-rail nav a:hover::after,
.command-rail nav a:focus-visible::after { transform: scaleX(1); }

.chapter-meter {
  position: fixed;
  top: 50%;
  right: 20px;
  z-index: 840;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
}

.chapter-meter a {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chapter-meter i {
  width: 17px;
  height: 1px;
  background: rgba(224, 200, 149, 0.26);
  transition: width 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

.chapter-meter span {
  opacity: 0;
  transform: translateX(5px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.chapter-meter a:hover span,
.chapter-meter a:focus-visible span,
.chapter-meter a.active span {
  opacity: 1;
  transform: translateX(0);
}

.chapter-meter a.active { color: var(--gold-bright); }
.chapter-meter a.active i {
  width: 34px;
  background: var(--gold-bright);
  box-shadow: 0 0 12px rgba(224, 200, 149, 0.68);
}

main,
.sources {
  position: relative;
  z-index: 10;
}

.chapter {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink);
  isolation: isolate;
}

.sticky-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.motion-picture {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  perspective: 1500px;
  transform-style: preserve-3d;
}

.motion-picture img {
  position: absolute;
  inset: -5%;
  display: block;
  width: 110%;
  height: 110%;
  object-fit: cover;
  will-change: transform, opacity, filter;
}

.picture-main {
  opacity: 0.92;
  filter: saturate(0.72) contrast(1.08) brightness(0.78);
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--scale, 1.06));
}

.picture-depth {
  opacity: 0.24;
  filter: brightness(1.16) contrast(1.2) saturate(0.6);
  mix-blend-mode: screen;
  clip-path: circle(29% at var(--focus-x, 50%) var(--focus-y, 48%));
  transform: translate3d(var(--depth-tx, 0px), var(--depth-ty, 0px), 40px) scale(var(--depth-scale, 1.12));
}

.picture-shadow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,5,6,0.76), transparent 38%, transparent 72%, rgba(5,5,6,0.36)),
    linear-gradient(to bottom, rgba(5,5,6,0.2), transparent 30%, rgba(5,5,6,0.74));
}

.picture-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25%;
  width: 20%;
  opacity: 0.22;
  background: linear-gradient(90deg, transparent, rgba(239, 216, 169, 0.32), transparent);
  transform: skewX(-13deg);
  animation: sweep 10s ease-in-out infinite;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.chapter-title h2,
.access-intro h2,
.foundation-copy h2,
.capital-command h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 7.2vw, 8.4rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.91;
  text-wrap: balance;
}

/* Origin */

.origin {
  min-height: 100svh;
  padding-top: calc(var(--rail) + 10px);
}

.hero-picture img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-picture .picture-main {
  object-position: center top;
  filter: saturate(0.72) contrast(1.06) brightness(0.9);
}

.hero-picture .picture-depth {
  object-position: center top;
  clip-path: polygon(0 0, 62% 0, 55% 100%, 0 100%);
  opacity: 0.18;
}

.hero-picture .picture-shadow {
  background:
    linear-gradient(90deg, rgba(6,6,7,0.15), transparent 35%, transparent 70%, rgba(6,6,7,0.28)),
    linear-gradient(to bottom, rgba(6,6,7,0.02) 45%, rgba(7,7,8,0.94) 100%);
}

.origin-coordinates {
  position: absolute;
  top: clamp(145px, 19vh, 230px);
  right: clamp(38px, 6vw, 108px);
  left: clamp(38px, 6vw, 108px);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.origin-coordinates > div {
  position: relative;
  display: grid;
  width: max-content;
  max-width: 100%;
  padding: 10px 14px 10px 17px;
  border-left: 1px solid var(--gold-bright);
  background: rgba(7,7,8,0.45);
  backdrop-filter: blur(8px);
}

.origin-coordinates > div:nth-child(2) { justify-self: center; }
.origin-coordinates > div:nth-child(3) { justify-self: end; }

.origin-coordinates span {
  position: absolute;
  top: 7px;
  right: 9px;
  color: rgba(224, 200, 149, 0.62);
  font-family: var(--serif);
  font-size: 0.9rem;
}

.origin-coordinates strong,
.origin-coordinates small {
  padding-right: 24px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.origin-coordinates strong { color: var(--gold-bright); }
.origin-coordinates small { margin-top: 3px; color: var(--paper); }

.origin-copy {
  position: absolute;
  z-index: 5;
  right: clamp(36px, 6vw, 110px);
  bottom: clamp(58px, 9vh, 110px);
  left: clamp(36px, 6vw, 110px);
}

.origin-copy h1 {
  max-width: 15ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 8vw, 9.5rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.88;
}

.origin-copy h1 em {
  text-shadow: 0 0 45px rgba(224, 200, 149, 0.12);
}

.origin-sequence {
  display: flex;
  gap: 13px;
  align-items: center;
  width: min(840px, 100%);
  margin-top: 30px;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
}

.origin-sequence i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(224,200,149,0.15), rgba(224,200,149,0.75));
  transform-origin: left;
  animation: lineCurrent 3.8s ease-in-out infinite;
}

.scroll-cue {
  position: absolute;
  right: clamp(35px, 6vw, 110px);
  bottom: clamp(62px, 9vh, 110px);
  z-index: 6;
  display: grid;
  gap: 10px;
  justify-items: end;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}

.scroll-cue i {
  position: relative;
  width: 112px;
  height: 1px;
  overflow: hidden;
  background: rgba(224,200,149,0.2);
}

.scroll-cue i::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36%;
  content: "";
  background: var(--gold-bright);
  animation: cue 2.7s ease-in-out infinite;
}

/* Founder mind */

.mind { height: 190svh; }
.mind-stage { background: #060607; }

.mind-picture .picture-main {
  object-position: center;
  filter: saturate(0.68) contrast(1.12) brightness(0.67);
}

.mind-picture .picture-depth {
  clip-path: circle(38% at 39% 44%);
  opacity: 0.34;
}

.mind-picture .picture-shadow {
  background:
    radial-gradient(circle at 41% 44%, transparent 0 28%, rgba(5,5,6,0.2) 50%, rgba(5,5,6,0.68) 100%),
    linear-gradient(to bottom, rgba(5,5,6,0.18), transparent 55%, rgba(5,5,6,0.78));
}

.brain-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: pan-y;
}

.mind-title {
  position: absolute;
  top: clamp(110px, 14vh, 150px);
  left: clamp(30px, 5vw, 90px);
  z-index: 6;
  pointer-events: none;
}

.mind-title h2 {
  max-width: 8.5ch;
  font-size: clamp(3rem, 6vw, 7.4rem);
}

.brain-mode {
  position: absolute;
  top: clamp(118px, 15vh, 160px);
  right: clamp(34px, 5vw, 92px);
  z-index: 7;
  display: flex;
  padding: 4px;
  border: 1px solid var(--line);
  background: rgba(7,7,8,0.62);
  backdrop-filter: blur(12px);
}

.brain-mode button {
  min-width: 78px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.brain-mode button.active {
  background: rgba(224,200,149,0.12);
  color: var(--gold-bright);
  box-shadow: inset 0 0 18px rgba(224,200,149,0.08);
}

.brain-readout {
  position: absolute;
  bottom: 118px;
  left: clamp(30px, 5vw, 90px);
  z-index: 7;
  display: grid;
  max-width: 410px;
  padding: 20px 24px;
  border-left: 1px solid var(--gold-bright);
  background: linear-gradient(90deg, rgba(6,6,7,0.86), rgba(6,6,7,0.28));
  backdrop-filter: blur(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.brain-readout.changing {
  opacity: 0;
  transform: translateY(8px);
}

.brain-readout span,
.brain-readout p {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.brain-readout strong {
  margin-top: 8px;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.1vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.brain-readout p { margin: 6px 0 0; color: var(--paper); }

.brain-index {
  position: absolute;
  right: clamp(30px, 5vw, 90px);
  bottom: 34px;
  left: clamp(30px, 5vw, 90px);
  z-index: 7;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.brain-index button {
  padding: 8px 9px;
  border: 0;
  border-bottom: 1px solid rgba(224,200,149,0.18);
  background: rgba(6,6,7,0.46);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.brain-index button:hover,
.brain-index button.active {
  border-color: var(--gold-bright);
  background: rgba(224,200,149,0.08);
  color: var(--gold-bright);
}

/* Access problem */

.access {
  min-height: 180svh;
  padding-top: var(--rail);
  background:
    radial-gradient(circle at 50% 10%, rgba(184,159,112,0.055), transparent 28rem),
    #080809;
}

.access-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 54svh;
  padding: clamp(90px, 12vw, 170px) clamp(32px, 7vw, 130px);
}

.access-intro h2 { max-width: 11ch; }

.access-cinema {
  position: relative;
  min-height: 112svh;
  margin: 0 clamp(20px, 3vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(224,200,149,0.15);
  background: #070708;
  box-shadow: 0 50px 120px rgba(0,0,0,0.52);
}

.fracture-picture .picture-main { filter: saturate(0.58) contrast(1.14) brightness(0.66); }
.fracture-picture .picture-depth { clip-path: circle(34% at 50% 55%); opacity: 0.3; }
.fracture-picture .picture-shadow {
  background:
    linear-gradient(90deg, rgba(5,5,6,0.72), transparent 34%, transparent 70%, rgba(5,5,6,0.45)),
    linear-gradient(to bottom, rgba(5,5,6,0.18), transparent 48%, rgba(5,5,6,0.78));
}

.stat-marker {
  position: absolute;
  z-index: 5;
  width: min(260px, 24vw);
  padding: 16px 18px;
  border-left: 1px solid var(--gold-bright);
  background: linear-gradient(90deg, rgba(5,5,6,0.88), rgba(5,5,6,0.28));
  backdrop-filter: blur(10px);
  transform: translateY(var(--stat-y, 0));
  transition: transform 500ms ease;
}

.stat-marker::after {
  position: absolute;
  bottom: -18px;
  left: -1px;
  width: 70px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--gold-bright), transparent);
}

.stat-marker strong {
  display: block;
  color: var(--gold-hot);
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.stat-marker p {
  margin: 10px 0 8px;
  color: var(--paper);
  font-size: 0.82rem;
  line-height: 1.4;
}

.stat-marker a,
.case-signal a {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding-block: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  pointer-events: auto;
  touch-action: manipulation;
}

.stat-marker a:hover,
.case-signal a:hover { color: var(--gold-bright); }

.stat-one { top: 13%; left: 5%; }
.stat-two { top: 16%; right: 6%; }
.stat-three { bottom: 24%; left: 7%; }
.stat-four { right: 9%; bottom: 18%; }

.case-signal {
  position: absolute;
  right: 27%;
  bottom: 5%;
  left: 27%;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 17px 20px;
  border-block: 1px solid rgba(224,200,149,0.28);
  background: rgba(6,6,7,0.78);
  backdrop-filter: blur(14px);
}

.case-signal span {
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.case-signal p {
  margin: 0;
  color: var(--paper);
  font-size: 0.82rem;
  line-height: 1.4;
}

.founder-signal {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(280px, 2fr) auto;
  gap: 28px;
  align-items: center;
  margin: clamp(50px, 7vw, 100px) clamp(32px, 7vw, 130px);
  padding: 28px 0;
  border-block: 1px solid var(--line);
}

.founder-signal span,
.founder-signal i {
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.11em;
}

.founder-signal blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Mobile bridge */

.bridge { height: 340svh; }
.bridge-stage { background: #050506; }

.bridge-frames,
.bridge-frame,
.bridge-frame img,
.bridge-shade {
  position: absolute;
  inset: 0;
}

.bridge-frame {
  margin: 0;
  opacity: var(--frame-opacity, 0);
  overflow: hidden;
  will-change: opacity;
}

.bridge-frame.active { --frame-opacity: 1; }

.bridge-frame img {
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.68) contrast(1.08) brightness(0.7);
  transform: translate3d(var(--bridge-x, -1.5%), var(--bridge-y, -1.5%), 0) scale(var(--bridge-scale, 1.04));
  will-change: transform;
}

.bridge-shade {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(5,5,6,0.82), transparent 37%, transparent 72%, rgba(5,5,6,0.34)),
    linear-gradient(to bottom, rgba(5,5,6,0.35), transparent 43%, rgba(5,5,6,0.76));
}

.bridge-trace {
  position: absolute;
  inset: 18% 4% 19%;
  z-index: 5;
  width: 92%;
  height: 63%;
  overflow: visible;
  opacity: var(--trace-opacity, 0);
  filter: drop-shadow(0 0 9px rgba(224,200,149,0.68));
}

.bridge-trace path {
  fill: none;
  stroke: rgba(237,214,169,0.88);
  stroke-dasharray: 1300;
  stroke-dashoffset: var(--trace-offset, 1300);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.bridge-title {
  position: absolute;
  top: clamp(108px, 14vh, 150px);
  left: clamp(30px, 6vw, 108px);
  z-index: 7;
}

.bridge-title h2 {
  max-width: 9ch;
  font-size: clamp(3rem, 6.5vw, 7.8rem);
}

.bridge-sequence {
  position: absolute;
  right: clamp(35px, 6vw, 110px);
  bottom: 205px;
  z-index: 7;
  display: grid;
  width: min(430px, 36vw);
  padding: 18px 20px;
  border-right: 1px solid var(--gold-bright);
  background: linear-gradient(270deg, rgba(5,5,6,0.85), rgba(5,5,6,0.2));
  text-align: right;
  backdrop-filter: blur(12px);
  transition: opacity 170ms ease, transform 170ms ease;
}

.bridge-sequence.changing { opacity: 0; transform: translateX(10px); }

.bridge-sequence span,
.bridge-sequence p {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.bridge-sequence strong {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.5vw, 3rem);
  font-weight: 400;
}

.bridge-sequence p { margin: 5px 0 0; color: var(--paper); }

.bridge-progress {
  position: absolute;
  right: clamp(30px, 6vw, 108px);
  bottom: 142px;
  left: clamp(30px, 6vw, 108px);
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.bridge-progress button {
  display: grid;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-align: left;
  cursor: pointer;
}

.bridge-progress button i {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(224,200,149,0.2);
}

.bridge-progress button i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--gold-bright);
  transform: scaleX(var(--step-fill, 0));
  transform-origin: left;
}

.bridge-progress button.active { color: var(--gold-bright); }

.bridge-specs {
  position: absolute;
  right: clamp(30px, 6vw, 108px);
  bottom: 33px;
  left: clamp(30px, 6vw, 108px);
  z-index: 7;
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 0.55fr);
  border-block: 1px solid var(--line);
  background: rgba(5,5,6,0.56);
  backdrop-filter: blur(10px);
}

.bridge-specs > span,
.bridge-specs > div {
  display: grid;
  align-content: center;
  min-height: 70px;
  padding: 11px 16px;
  border-right: 1px solid var(--line-soft);
}

.bridge-specs > span {
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.11em;
}

.bridge-specs strong {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
}

.bridge-specs small {
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

/* Piling execution */

.foundation {
  padding-bottom: clamp(90px, 12vw, 180px);
  background:
    linear-gradient(90deg, rgba(224,200,149,0.025) 1px, transparent 1px),
    linear-gradient(rgba(224,200,149,0.02) 1px, transparent 1px),
    #09090a;
  background-size: 72px 72px;
}

.foundation-cinema {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.execution-picture .picture-main { filter: saturate(0.68) contrast(1.08) brightness(0.7); }
.execution-picture .picture-depth { clip-path: circle(28% at 66% 43%); opacity: 0.32; }
.execution-picture .picture-shadow {
  background:
    linear-gradient(90deg, rgba(6,6,7,0.86), rgba(6,6,7,0.28) 43%, transparent 73%, rgba(6,6,7,0.3)),
    linear-gradient(to bottom, rgba(6,6,7,0.18), transparent 46%, #09090a 100%);
}

.foundation-copy {
  position: absolute;
  top: 50%;
  left: clamp(32px, 7vw, 130px);
  z-index: 5;
  width: min(720px, 78vw);
  transform: translateY(-50%);
}

.foundation-copy h2 { max-width: 11ch; }

.foundation-copy > p:last-child {
  max-width: 590px;
  margin: 28px 0 0;
  color: var(--paper);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
}

.machine-console {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.23fr);
  width: min(1500px, calc(100% - 64px));
  margin: -6svh auto 0;
  border: 1px solid var(--line);
  background: rgba(8,8,9,0.9);
  box-shadow: 0 40px 120px rgba(0,0,0,0.58);
  backdrop-filter: blur(16px);
}

.machine-window { min-width: 0; }

.machine-register {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

.machine-images {
  --machine-focus-x: 15%;
  --machine-focus-y: 57%;
  --machine-scale: 1.08;
  position: relative;
  min-height: clamp(460px, 48vw, 740px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(184,159,112,0.09), transparent 33%),
    #0c0c0d;
  isolation: isolate;
}

.machine-images::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(224,200,149,0.035) 1px, transparent 1px),
    linear-gradient(rgba(224,200,149,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(4,4,5,0.04), rgba(4,4,5,0.38));
  background-size: 46px 46px, 46px 46px, auto;
  mask-image: radial-gradient(circle, black, transparent 80%);
}

.machine-images .foundation-film {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: var(--machine-focus-x) var(--machine-focus-y);
  opacity: 0.94;
  filter: saturate(0.72) contrast(1.12) brightness(0.74);
  transform: perspective(1200px) translate3d(var(--machine-x, 8px), var(--machine-y, 4px), 0) rotateX(var(--machine-rx, 0.6deg)) rotateY(var(--machine-ry, -1.2deg)) scale(var(--machine-scale));
  transform-origin: var(--machine-focus-x) var(--machine-focus-y);
  transition: object-position 1050ms cubic-bezier(.22,.78,.22,1), transform 1050ms cubic-bezier(.22,.78,.22,1), filter 620ms ease;
  will-change: transform, object-position;
}

.machine-images::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at var(--machine-focus-x) var(--machine-focus-y), transparent 0 12%, rgba(5,5,6,0.12) 27%, rgba(5,5,6,0.58) 78%),
    linear-gradient(to right, rgba(5,5,6,0.18), transparent 50%, rgba(5,5,6,0.15));
  transition: background 850ms ease;
}

.machine-flow {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.machine-flow path {
  fill: none;
  stroke: rgba(242,217,164,0.54);
  stroke-width: 1.1;
  stroke-dasharray: 5 15;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(224,200,149,0.62));
  animation: dashFlow 8s linear infinite;
}

.machine-node {
  position: absolute;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(224,200,149,0.42);
  border-radius: 50%;
  background: rgba(5,5,6,0.78);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.61rem;
  transform: translate(-50%, -50%);
  transition: border-color 320ms ease, background 320ms ease, color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
  backdrop-filter: blur(8px);
}

.machine-node i {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(224,200,149,0.14);
  border-radius: 50%;
  opacity: 0;
}

.machine-node b { font-weight: 400; }
.machine-node.active {
  border-color: var(--gold-hot);
  background: rgba(224,200,149,0.18);
  color: var(--gold-hot);
  box-shadow: 0 0 28px rgba(224,200,149,0.42);
  transform: translate(-50%, -50%) scale(1.14);
}
.machine-node.active i { opacity: 1; animation: nodeSignal 2.4s ease-out infinite; }
.node-align { top: 66%; left: 13%; }
.node-engage { top: 28%; left: 34%; }
.node-erect { top: 39%; left: 69%; }
.node-release { top: 24%; left: 92%; }

.machine-scan {
  position: absolute;
  z-index: 4;
  top: -15%;
  right: 0;
  left: 0;
  height: 14%;
  opacity: 0.22;
  background: linear-gradient(to bottom, transparent, rgba(239,216,169,0.24), transparent);
  animation: machineScan 5.8s linear infinite;
}

.machine-reticle {
  position: absolute;
  z-index: 4;
  top: var(--machine-focus-y);
  left: var(--machine-focus-x);
  width: min(25vw, 350px);
  aspect-ratio: 1;
  border: 1px solid rgba(224,200,149,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: top 1050ms cubic-bezier(.22,.78,.22,1), left 1050ms cubic-bezier(.22,.78,.22,1);
  animation: reticleSpin 26s linear infinite;
}

.machine-reticle::before,
.machine-reticle::after {
  position: absolute;
  content: "";
  background: rgba(224,200,149,0.18);
}

.machine-reticle::before { top: 50%; right: -12%; left: -12%; height: 1px; }
.machine-reticle::after { top: -12%; bottom: -12%; left: 50%; width: 1px; }

.machine-readout {
  display: grid;
  grid-template-columns: minmax(120px, 0.28fr) minmax(210px, 0.7fr) minmax(240px, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 102px;
  padding: 17px 20px;
  border-top: 1px solid var(--line);
  transition: opacity 170ms ease, transform 170ms ease;
}

.machine-readout.changing { opacity: 0; transform: translateY(7px); }

.machine-readout span,
.machine-readout p {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.machine-readout strong {
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 400;
}

.machine-readout p { margin: 0; color: var(--paper); line-height: 1.45; }

.machine-steps {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  border-left: 1px solid var(--line);
}

.machine-steps button {
  position: relative;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 20px 24px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.machine-steps button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 1px;
  content: "";
  background: var(--gold-bright);
  transform: scaleY(0);
  transition: transform 180ms ease;
}

.machine-steps button span,
.machine-steps button small {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.machine-steps button strong {
  color: var(--paper);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
}

.machine-steps button.active {
  background: linear-gradient(90deg, rgba(224,200,149,0.12), transparent);
  color: var(--gold-bright);
}

.machine-steps button.active::before { transform: scaleY(1); }

.foundation-envelope {
  display: grid;
  grid-template-columns: 1.45fr repeat(4, 1fr);
  width: min(1500px, calc(100% - 64px));
  margin: clamp(42px, 6vw, 86px) auto 0;
  border-block: 1px solid var(--line);
  background: rgba(7,7,8,0.4);
}

.foundation-envelope > span,
.foundation-envelope > div {
  display: grid;
  align-content: center;
  min-height: 94px;
  padding: 16px 20px;
  border-right: 1px solid var(--line-soft);
}

.foundation-envelope > span {
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
}

.foundation-envelope strong {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.7vw, 3rem);
  font-weight: 400;
  line-height: 1;
}

.foundation-envelope small {
  margin-top: 7px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.frontier-law {
  display: grid;
  grid-template-columns: 0.5fr 1.4fr 1fr;
  gap: 28px;
  align-items: center;
  width: min(1500px, calc(100% - 64px));
  margin: clamp(45px, 6vw, 90px) auto 0;
  padding: 28px 0;
  border-block: 1px solid var(--line);
}

.frontier-law > span {
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.frontier-law > p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.1vw, 3.8rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.frontier-law > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.frontier-law i {
  padding: 7px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

/* XObviously */

.xobviously {
  min-height: 132svh;
  background: #060607;
  --intelligence-step: 0;
}

.xobviously-picture .picture-main { filter: saturate(0.5) contrast(1.16) brightness(0.4); }
.xobviously-picture .picture-depth { clip-path: circle(37% at 68% 46%); opacity: 0.24; }
.xobviously-picture .picture-shadow {
  background:
    radial-gradient(circle at 68% 51%, transparent 0 17%, rgba(5,5,6,0.2) 38%, rgba(5,5,6,0.8) 82%),
    linear-gradient(90deg, rgba(5,5,6,0.84), transparent 55%, rgba(5,5,6,0.2));
}

.xobviously-title {
  position: absolute;
  top: 43%;
  left: clamp(32px, 7vw, 130px);
  z-index: 5;
  transform: translateY(-50%);
}

.xobviously-title h2 { max-width: 9ch; }
.xobviously-title > p:last-child {
  max-width: 520px;
  margin: 24px 0 0;
  color: var(--paper);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.55;
}

.intelligence-engine {
  position: absolute;
  top: 46%;
  right: clamp(35px, 7vw, 130px);
  z-index: 6;
  width: min(46vw, 680px);
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.intelligence-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: orbitTurn 48s linear infinite;
}

.intelligence-orbit circle,
.intelligence-orbit path {
  fill: none;
  stroke: rgba(224,200,149,0.3);
  stroke-width: 1;
  stroke-dasharray: 4 11;
  vector-effect: non-scaling-stroke;
}

.intelligence-orbit path {
  stroke: rgba(239,216,169,0.68);
  stroke-dasharray: 3 17;
  filter: drop-shadow(0 0 8px rgba(224,200,149,0.45));
  animation: dashFlow 9s linear infinite;
}

.intelligence-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 37%;
  aspect-ratio: 1;
  border: 1px solid rgba(224,200,149,0.38);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,200,149,0.15), rgba(5,5,6,0.76) 64%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 70px rgba(224,200,149,0.12), inset 0 0 35px rgba(224,200,149,0.07);
}

.intelligence-core span {
  position: absolute;
  color: rgba(224,200,149,0.19);
  font-family: var(--serif);
  font-size: clamp(5rem, 11vw, 10rem);
  line-height: 1;
}

.intelligence-core strong,
.intelligence-core small {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  letter-spacing: 0.13em;
}

.intelligence-core strong { margin-top: 18%; color: var(--gold-bright); font-size: clamp(0.76rem, 1.3vw, 1.08rem); }
.intelligence-core small { max-width: 18ch; margin-top: -24%; color: var(--muted); font-size: 0.58rem; text-align: center; }

.intelligence-nodes {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.intelligence-nodes li {
  position: absolute;
  display: grid;
  gap: 3px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  background: rgba(5,5,6,0.7);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 22px rgba(224,200,149,0.05);
  transition: color 250ms ease, border-color 250ms ease, background 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}

.intelligence-nodes li b { color: var(--dim); font-size: 0.52rem; font-weight: 400; }
.intelligence-nodes li span { color: inherit; }
.intelligence-nodes li.active {
  border-color: rgba(242,217,164,0.72);
  background: rgba(224,200,149,0.12);
  color: var(--gold-hot);
  box-shadow: 0 0 32px rgba(224,200,149,0.18);
  transform: scale(1.06);
}
.intelligence-nodes li:nth-child(1) { top: 5%; left: 42%; }
.intelligence-nodes li:nth-child(2) { top: 19%; right: 4%; }
.intelligence-nodes li:nth-child(3) { top: 47%; right: -2%; }
.intelligence-nodes li:nth-child(4) { right: 12%; bottom: 8%; }
.intelligence-nodes li:nth-child(5) { bottom: 0; left: 42%; }
.intelligence-nodes li:nth-child(6) { bottom: 12%; left: 4%; }
.intelligence-nodes li:nth-child(7) { top: 39%; left: -3%; }

.intelligence-readout {
  position: absolute;
  right: clamp(35px, 7vw, 130px);
  bottom: 132px;
  z-index: 7;
  display: grid;
  width: min(46vw, 680px);
  grid-template-columns: 0.45fr 0.85fr 1.2fr;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-block: 1px solid var(--line);
  background: rgba(5,5,6,0.7);
  backdrop-filter: blur(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.intelligence-readout.changing { opacity: 0.32; transform: translateY(3px); }
.intelligence-readout span,
.intelligence-readout strong,
.intelligence-readout p {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.intelligence-readout span { color: var(--gold-bright); }
.intelligence-readout strong { color: var(--paper); font-weight: 500; }
.intelligence-readout p { margin: 0; color: var(--muted); line-height: 1.45; }

.intelligence-chain {
  position: absolute;
  right: clamp(32px, 6vw, 112px);
  bottom: 48px;
  left: clamp(32px, 6vw, 112px);
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-block: 1px solid var(--line);
}

.intelligence-chain button {
  min-height: 54px;
  padding: 10px 7px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  background: rgba(5,5,6,0.58);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}
.intelligence-chain button:last-child { border-right: 0; }
.intelligence-chain button:hover,
.intelligence-chain button.active { background: rgba(224,200,149,0.1); color: var(--gold-hot); }

/* Foundation demand */

.foundation-scale {
  min-height: 178svh;
  background: #050506;
  --demand-progress: 0;
}

.foundation-scale-picture .picture-main {
  filter: saturate(0.7) contrast(1.12) brightness(0.6);
}

.foundation-scale-picture .picture-depth {
  clip-path: polygon(0 43%, 100% 43%, 100% 100%, 0 100%);
  opacity: 0.24;
  filter: brightness(1.22) contrast(1.18) saturate(0.64);
}

.foundation-scale-picture .picture-shadow {
  background:
    linear-gradient(90deg, rgba(5,5,6,0.86), rgba(5,5,6,0.18) 44%, transparent 74%, rgba(5,5,6,0.2)),
    linear-gradient(to bottom, rgba(5,5,6,0.2), transparent 34%, rgba(5,5,6,0.28) 55%, rgba(5,5,6,0.8));
}

.foundation-scale-title {
  position: absolute;
  top: clamp(105px, 14vh, 165px);
  left: clamp(32px, 7vw, 130px);
  z-index: 6;
}

.foundation-scale-title h2 {
  max-width: 10ch;
  font-size: clamp(3.2rem, 6.6vw, 8rem);
}

.foundation-scale-title > p:last-child {
  margin: 24px 0 0;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.foundation-demand {
  position: absolute;
  right: clamp(32px, 6vw, 112px);
  bottom: 112px;
  left: clamp(32px, 6vw, 112px);
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid rgba(224,200,149,0.24);
  background: linear-gradient(to right, rgba(5,5,6,0.76), rgba(5,5,6,0.38));
  backdrop-filter: blur(13px);
}

.demand-stat {
  position: relative;
  display: grid;
  align-content: end;
  min-height: clamp(180px, 21vh, 245px);
  padding: 24px clamp(15px, 2vw, 28px);
  overflow: hidden;
  border-right: 1px solid var(--line-soft);
  opacity: var(--demand-opacity, 0.38);
  transform: translateY(var(--demand-y, 0px));
  transition: background 240ms ease, transform 160ms linear, opacity 450ms ease;
  pointer-events: auto;
  touch-action: manipulation;
}

.demand-stat::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  content: "";
  background: var(--gold-hot);
  transform: scaleY(var(--demand-progress));
  transform-origin: bottom;
}

.demand-stat:hover { background: rgba(224,200,149,0.07); }

.demand-stat > span,
.demand-stat p,
.demand-stat i {
  font-family: var(--mono);
  letter-spacing: 0.09em;
}

.demand-stat > span {
  color: var(--muted);
  font-size: 0.75rem;
}

.demand-stat strong {
  display: block;
  margin: 10px 0 7px;
  color: var(--gold-hot);
  font-family: var(--serif);
  font-size: clamp(2.35rem, 4.4vw, 5.7rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.86;
  text-shadow: 0 0 38px rgba(224,200,149,0.22);
}

.demand-two strong { font-size: clamp(1.85rem, 3.25vw, 4.1rem); }

.demand-stat p {
  margin: 0;
  color: var(--ivory);
  font-size: 0.75rem;
}

.demand-stat i {
  margin-top: 10px;
  color: var(--dim);
  font-size: 0.75rem;
  font-style: normal;
}

.demand-axis {
  position: absolute;
  right: clamp(32px, 6vw, 112px);
  bottom: 56px;
  left: clamp(32px, 6vw, 112px);
  z-index: 7;
  display: flex;
  gap: 14px;
  align-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
}

.demand-axis i {
  position: relative;
  flex: 1;
  height: 1px;
  overflow: hidden;
  background: rgba(224,200,149,0.16);
}

.demand-axis i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transform: scaleX(var(--demand-progress));
  transform-origin: left;
}

.demand-axis i:last-of-type::after { transform-origin: right; }

.demand-axis b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(224,200,149,0.44);
  color: var(--gold-hot);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  box-shadow: 0 0 24px rgba(224,200,149,0.12);
}

.demand-note {
  position: absolute;
  right: clamp(32px, 6vw, 112px);
  bottom: 24px;
  z-index: 7;
  margin: 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
}

/* Capital */

.capital {
  min-height: 175svh;
  background: #050506;
}

.world-picture {
  position: sticky;
  top: 0;
  z-index: -2;
  height: 100svh;
}

.world-picture .picture-main { filter: saturate(0.64) contrast(1.08) brightness(0.52); }
.world-picture .picture-depth { clip-path: circle(36% at 50% 46%); opacity: 0.26; }
.world-picture .picture-shadow {
  background:
    linear-gradient(90deg, rgba(5,5,6,0.84), transparent 42%, rgba(5,5,6,0.28)),
    linear-gradient(to bottom, rgba(5,5,6,0.28), transparent 32%, rgba(5,5,6,0.88));
}

.capital-content {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  gap: clamp(50px, 8vw, 150px);
  align-content: center;
  min-height: 175svh;
  margin-top: -100svh;
  padding: calc(var(--rail) + 90px) clamp(34px, 7vw, 130px) 100px;
}

.capital-command { align-self: start; position: sticky; top: 23vh; }

.round-figure {
  display: grid;
  width: max-content;
  margin: 22px 0 32px;
  padding-left: 18px;
  border-left: 1px solid var(--gold-bright);
}

.round-figure span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.round-figure strong {
  color: var(--gold-hot);
  font-family: var(--serif);
  font-size: clamp(5rem, 10vw, 11rem);
  font-weight: 400;
  letter-spacing: -0.08em;
  line-height: 0.85;
  text-shadow: 0 0 60px rgba(224,200,149,0.18);
}

.capital-command h2 {
  max-width: 11ch;
  font-size: clamp(2.55rem, 4.6vw, 6rem);
}

.capital-gates {
  display: grid;
  align-self: center;
  border-top: 1px solid var(--line);
}

.capital-gates article {
  position: relative;
  display: grid;
  grid-template-columns: 0.25fr 0.55fr 1fr;
  gap: 20px;
  align-items: center;
  min-height: 150px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.capital-gates article::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  width: 1px;
  content: "";
  background: var(--gold-bright);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 500ms ease;
}

.capital-gates article.in-view::before { transform: scaleY(1); }

.capital-gates span,
.capital-gates p {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.capital-gates strong {
  color: var(--gold-bright);
  font-size: 0.77rem;
  letter-spacing: 0.12em;
}

.capital-gates p {
  margin: 0;
  color: var(--paper);
  line-height: 1.55;
}

.capital-output {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  align-items: stretch;
  border-block: 1px solid var(--line);
  background: rgba(5,5,6,0.55);
  backdrop-filter: blur(11px);
}

.capital-output > span,
.capital-output > div {
  display: grid;
  align-content: center;
  min-height: 88px;
  padding: 14px;
  border-right: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
}

.capital-output > span { color: var(--gold-bright); }
.capital-output > div { color: var(--paper); }
.capital-output b { margin-bottom: 5px; color: var(--gold-bright); font-weight: 400; }

.dialogue-link {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 27px;
  border: 1px solid rgba(224,200,149,0.42);
  background: rgba(224,200,149,0.08);
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  transition: background 180ms ease, color 180ms ease;
}

.dialogue-link i { font-size: 1.15rem; font-style: normal; }
.dialogue-link:hover { background: var(--gold-bright); color: #080809; }

/* Finale and sources */

.finale {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(224,200,149,0.11), transparent 29%),
    linear-gradient(90deg, rgba(224,200,149,0.025) 1px, transparent 1px),
    linear-gradient(rgba(224,200,149,0.02) 1px, transparent 1px),
    #070708;
  background-size: auto, 72px 72px, 72px 72px, auto;
  text-align: center;
}

.finale-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(224,200,149,0.07);
  font-family: var(--serif);
  font-size: min(72vw, 72vh);
  line-height: 0.7;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 75px rgba(224,200,149,0.09));
  animation: finalePulse 7s ease-in-out infinite;
}

.finale > p {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 8rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.finale > p strong { color: var(--gold-bright); font-weight: 400; }

.finale > div:last-child {
  position: absolute;
  right: clamp(34px, 7vw, 130px);
  bottom: 72px;
  left: clamp(34px, 7vw, 130px);
  z-index: 2;
  display: flex;
  gap: 18px;
  align-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
}

.finale > div:last-child i { flex: 1; height: 1px; background: var(--line); }

.sources {
  display: grid;
  grid-template-columns: 1fr 0.6fr;
  gap: 38px;
  padding: 70px clamp(32px, 6vw, 110px) 52px;
  border-top: 1px solid var(--line);
  background: #050506;
}

.source-brand div { display: grid; }
.source-brand p { margin: 3px 0 0; color: var(--muted); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; }

.sources details { justify-self: end; width: min(100%, 430px); }

.sources summary {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.source-list { display: grid; }
.source-direction { margin: 12px 0 2px; color: var(--dim); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.05em; line-height: 1.5; }
.source-list a { position: relative; z-index: 2; padding: 14px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.06em; pointer-events: auto; touch-action: manipulation; }
.source-list a:hover { color: var(--gold-bright); }

.status-note,
.copyright {
  margin: 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
}

.status-note { max-width: 800px; border-top: 1px solid var(--line-soft); padding-top: 20px; }
.copyright { align-self: end; justify-self: end; text-align: right; }

.noscript {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  margin: 0;
  background: #070708;
  color: var(--gold-bright);
  font-family: var(--mono);
  letter-spacing: 0.16em;
}

@keyframes grain {
  0% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-1%,1%,0); }
  50% { transform: translate3d(1%,-1%,0); }
  75% { transform: translate3d(0.5%,1%,0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes preludePulse {
  0%, 100% { opacity: 0.45; transform: scale(0.985); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes preload {
  0% { transform: translateX(-110%); }
  60%, 100% { transform: translateX(340%); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes sweep {
  0%, 15% { transform: translateX(0) skewX(-13deg); }
  70%, 100% { transform: translateX(770%) skewX(-13deg); }
}

@keyframes lineCurrent {
  0%, 100% { transform: scaleX(0.2); opacity: 0.25; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes cue {
  0% { left: -40%; }
  100% { left: 110%; }
}

@keyframes machineScan {
  from { transform: translateY(0); }
  to { transform: translateY(820%); }
}

@keyframes reticleSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes nodeSignal {
  0% { opacity: 0.72; transform: scale(0.68); }
  70%, 100% { opacity: 0; transform: scale(1.42); }
}

@keyframes orbitTurn {
  to { transform: rotate(360deg); }
}

@keyframes dashFlow {
  to { stroke-dashoffset: -240; }
}

@keyframes finalePulse {
  0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.98); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.035); }
}

@media (max-width: 1100px) {
  .command-rail { grid-template-columns: 1fr auto; }
  .rail-state { display: none; }
  .brain-index { justify-content: flex-start; overflow-x: auto; padding-bottom: 5px; }
  .case-signal { right: 16%; left: 16%; }
  .capital-content { grid-template-columns: 1fr; gap: 70px; }
  .capital-command { position: relative; top: auto; }
  .capital-output,
  .dialogue-link { grid-column: 1; }
  .capital-output { grid-template-columns: repeat(4, 1fr); }
  .capital-output > span { grid-column: 1 / -1; min-height: 52px; border-bottom: 1px solid var(--line-soft); }
  .xobviously-title h2 { font-size: clamp(2.8rem, 6.5vw, 6rem); }
  .foundation-envelope { grid-template-columns: 1.2fr repeat(2, 1fr); }
  .foundation-envelope > span { grid-row: 1 / 3; }
  .foundation-demand { grid-template-columns: repeat(2, 1fr); }
  .demand-stat { min-height: 128px; }
  .demand-stat strong { font-size: clamp(2.1rem, 5vw, 4.6rem); }
  .demand-two strong { font-size: clamp(1.7rem, 4vw, 3.5rem); }
}

@media (max-width: 780px) {
  :root { --rail: 62px; }
  body::before,
  body::after { height: 6px; }
  .film-vignette { box-shadow: inset 0 0 100px 10px rgba(0,0,0,0.75); }
  .command-rail { top: 6px; padding-inline: 18px; }
  .command-rail nav { gap: 14px; }
  .command-rail nav a:nth-child(1),
  .command-rail nav a:nth-child(2) { display: none; }
  .brand { font-size: 0.7rem; }
  .brand-glyph { width: 29px; height: 29px; }
  .chapter-meter { right: 8px; }
  .chapter-meter span { display: none; }
  .chapter-meter a.active i { width: 24px; }
  .origin-coordinates { top: 120px; right: 24px; left: 24px; }
  .origin-coordinates > div:nth-child(1),
  .origin-coordinates > div:nth-child(3) { display: none; }
  .origin-coordinates { display: block; }
  .origin-coordinates > div:nth-child(2) { justify-self: auto; }
  .origin-copy { right: 24px; bottom: 92px; left: 24px; }
  .origin-copy h1 { font-size: clamp(3.3rem, 16vw, 5.8rem); }
  .origin-sequence { flex-wrap: wrap; gap: 8px; font-size: 0.62rem; }
  .origin-sequence i { flex: 0 0 20px; }
  .scroll-cue { right: 24px; bottom: 34px; }
  .mind-title { top: 100px; left: 24px; }
  .mind-title h2 { max-width: 9ch; font-size: clamp(2.6rem, 12vw, 5rem); }
  .brain-mode { top: auto; right: 24px; bottom: 150px; }
  .brain-mode button { min-width: 68px; padding: 8px; }
  .brain-readout { bottom: 82px; left: 24px; max-width: calc(100% - 48px); padding: 14px 16px; }
  .brain-index { right: 24px; bottom: 20px; left: 24px; }
  .brain-index button { padding: 7px 8px; }
  .mind-picture .picture-main { object-position: 56% center; }
  .access { min-height: 210svh; }
  .access-intro { padding-inline: 24px; }
  .access-intro h2 { font-size: clamp(3rem, 15vw, 5.5rem); }
  .access-cinema { min-height: 140svh; margin-inline: 12px; }
  .fracture-picture .picture-main { object-position: 46% center; }
  .stat-marker { width: min(235px, 72vw); }
  .stat-one { top: 7%; left: 5%; }
  .stat-two { top: 29%; right: 5%; }
  .stat-three { bottom: 31%; left: 5%; }
  .stat-four { right: 5%; bottom: 12%; }
  .stat-marker strong { font-size: 3rem; }
  .case-signal { right: 5%; bottom: 2%; left: 5%; grid-template-columns: 1fr; gap: 7px; }
  .founder-signal { grid-template-columns: 1fr; margin-inline: 24px; gap: 15px; }
  .founder-signal blockquote { font-size: 2rem; }
  .bridge-title { top: 96px; left: 24px; }
  .bridge-title h2 { font-size: clamp(2.7rem, 12vw, 5rem); }
  .bridge-sequence { right: 24px; bottom: 250px; width: calc(100% - 48px); }
  .bridge-progress { right: 24px; bottom: 200px; left: 24px; }
  .bridge-specs { right: 24px; bottom: 24px; left: 24px; grid-template-columns: repeat(2, 1fr); }
  .bridge-specs > span { grid-column: 1 / -1; min-height: 48px; }
  .bridge-specs > div { min-height: 55px; }
  .bridge-frame img { object-position: 52% center; }
  .foundation-copy { left: 24px; width: calc(100% - 48px); }
  .foundation-copy h2 { font-size: clamp(3rem, 13vw, 5.4rem); }
  .machine-console { grid-template-columns: 1fr; width: calc(100% - 24px); }
  .machine-steps { grid-template-rows: none; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 0; }
  .machine-steps button { min-width: 0; padding: 14px 8px; }
  .machine-steps button small { display: none; }
  .machine-readout { grid-template-columns: 1fr; gap: 7px; }
  .machine-images { min-height: 430px; }
  .machine-images .foundation-film { inset: -2%; width: 104%; height: 104%; }
  .machine-node { width: 28px; height: 28px; }
  .machine-reticle { width: 38vw; }
  .foundation-envelope { grid-template-columns: repeat(2, 1fr); width: calc(100% - 48px); }
  .foundation-envelope > span { grid-row: auto; grid-column: 1 / -1; min-height: 58px; }
  .foundation-envelope > div { min-height: 76px; padding: 13px 14px; }
  .frontier-law { grid-template-columns: 1fr; width: calc(100% - 48px); }
  .xobviously { min-height: 148svh; }
  .xobviously-title { top: 13%; left: 24px; width: calc(100% - 48px); transform: none; }
  .xobviously-title h2 { font-size: clamp(2.8rem, 12vw, 5rem); }
  .xobviously-title > p:last-child { max-width: 36ch; font-size: 0.95rem; }
  .intelligence-engine { top: 60%; right: 50%; width: min(88vw, 610px); transform: translate(50%, -50%); }
  .xobviously-picture .picture-main { object-position: 68% center; }
  .intelligence-readout { right: 24px; bottom: 128px; left: 24px; width: auto; grid-template-columns: 0.7fr 1.3fr; }
  .intelligence-readout p { grid-column: 1 / -1; }
  .intelligence-chain { right: 24px; bottom: 34px; left: 24px; grid-template-columns: repeat(4, 1fr); }
  .intelligence-chain button { min-height: 40px; font-size: 0.56rem; }
  .foundation-scale { min-height: 190svh; }
  .foundation-scale-title { top: 94px; left: 24px; }
  .foundation-scale-title h2 { max-width: 8ch; font-size: clamp(3rem, 12vw, 5.2rem); }
  .foundation-scale-title > p:last-child { max-width: 25ch; line-height: 1.8; }
  .foundation-scale-picture .picture-main { object-position: 52% center; }
  .foundation-demand { right: 24px; bottom: 102px; left: 24px; }
  .demand-stat { min-height: 118px; padding: 16px; }
  .demand-stat strong { margin-block: 7px 5px; font-size: clamp(2rem, 8vw, 3.4rem); }
  .demand-two strong { font-size: clamp(1.5rem, 6vw, 2.5rem); }
  .demand-stat i { display: none; }
  .demand-axis { right: 24px; bottom: 51px; left: 24px; }
  .demand-axis span { display: none; }
  .demand-note { right: 24px; bottom: 20px; left: 24px; text-align: right; }
  .capital-content { padding: 110px 24px 80px; }
  .capital-gates article { grid-template-columns: 0.3fr 0.7fr; gap: 12px; }
  .capital-gates article p { grid-column: 2; }
  .capital-output { grid-template-columns: repeat(2, 1fr); }
  .capital-output > span { grid-column: 1 / -1; }
  .finale > p { font-size: clamp(2.8rem, 13vw, 5.7rem); }
  .sources { grid-template-columns: 1fr; padding-inline: 24px; }
  .sources details { justify-self: stretch; width: 100%; }
  .copyright { justify-self: start; text-align: left; }
}

@media (max-width: 480px) {
  .command-rail nav a:nth-child(3) { display: none; }
  .origin-copy h1 { font-size: 3.45rem; }
  .origin-sequence span:nth-of-type(2),
  .origin-sequence span:nth-of-type(4),
  .origin-sequence i:nth-of-type(2),
  .origin-sequence i:nth-of-type(4) { display: none; }
  .brain-canvas { opacity: 0.78; }
  .brain-readout strong { font-size: 1.25rem; }
  .machine-images { min-height: 350px; }
  .machine-node { width: 24px; height: 24px; font-size: 0.52rem; }
  .foundation-envelope { width: calc(100% - 24px); }
  .foundation-envelope strong { font-size: 1.35rem; }
  .bridge-specs strong { font-size: 1.15rem; }
  .foundation-demand { right: 12px; left: 12px; }
  .demand-stat { min-height: 112px; padding: 13px 11px; }
  .demand-stat > span { font-size: 0.75rem; letter-spacing: 0.04em; }
  .demand-stat p { font-size: 0.75rem; }
  .demand-axis { right: 14px; left: 14px; }
  .capital-gates article { min-height: 130px; }
}

@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;
  }
  .system-field,
  .picture-depth { display: none; }
  .picture-main,
  .bridge-frame img,
  .machine-images img { transform: none !important; }
}