@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@1,6..72,300;1,6..72,400&display=swap");

/* ─────────────────────────────────────────────────────────────
   Editorial system. Paper ground, hard grid, one accent.
   Type and rules do the work; there are no effects.
   ───────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;
  --paper: #f4f2ed;
  --panel: #eae7e0;
  --ink: #14130f;
  --ink-2: #55524a;
  --ink-3: #85806f;
  --rule: #d5d1c8;
  --rule-2: #b9b4a8;
  --accent: #c8321b;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --pad: clamp(20px, 5vw, 76px);
  --gap: clamp(28px, 4vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[id] { scroll-margin-top: 92px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 90; top: 10px; left: 10px;
  background: var(--ink); color: var(--paper); padding: 11px 15px;
  font: 500 .72rem var(--mono); transform: translateY(-180%); transition: transform .2s;
}
.skip:focus { transform: none; }

/* Small uppercase mono — the connective tissue of the whole page. */
.meta {
  font: 400 .688rem/1.45 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Masthead ───────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding: 18px var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead__name { font-weight: 600; font-size: .95rem; letter-spacing: -.015em; }
.masthead__nav { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.masthead__nav a {
  font: 400 .688rem var(--mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2); padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.masthead__nav a:hover { color: var(--accent); border-color: var(--accent); }
.masthead__nav span { margin-left: 3px; }

/* ── Lede ───────────────────────────────────────────────── */
.lede { padding: clamp(56px, 9vw, 130px) var(--pad) clamp(40px, 6vw, 78px); }
.lede__meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: clamp(26px, 4vw, 48px); }
.lede__meta span { position: relative; }
.lede__meta span + span::before {
  content: ""; position: absolute; left: -14px; top: .52em;
  width: 5px; height: 1px; background: var(--rule-2);
}
.lede__title {
  font-size: clamp(2.7rem, 8.2vw, 7.4rem);
  line-height: .94;
  letter-spacing: -.045em;
  font-weight: 600;
  max-width: 15ch;
  text-wrap: balance;
}
.lede__body {
  margin-top: clamp(30px, 4vw, 54px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  max-width: 62ch;
}
.lede__body p { font-size: clamp(1.02rem, 1.35vw, 1.28rem); line-height: 1.62; color: var(--ink-2); }

/* ── Figure block ───────────────────────────────────────── */
.figure-block { padding: clamp(44px, 6vw, 90px) var(--pad); background: var(--panel); border-block: 1px solid var(--rule); }
.figure-head { max-width: 60ch; }
.figure-title {
  margin-top: 12px;
  font-size: clamp(1.35rem, 2.5vw, 2.2rem);
  font-weight: 500; letter-spacing: -.028em; line-height: 1.18;
}
.chart { margin-top: clamp(28px, 4vw, 48px); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .ax { stroke: var(--rule-2); stroke-width: 1; }
.chart .tick line { stroke: var(--rule-2); stroke-width: 1; }
.chart .tick text { font: 400 15px var(--mono); fill: var(--ink-3); text-anchor: middle; }
.chart .bar { stroke: var(--rule-2); stroke-width: 2; }
.chart .mark circle { stroke: var(--panel); stroke-width: 2; }
.chart .mark--before circle { fill: #8a857a; }
.chart .mark--after circle { fill: var(--accent); }
.chart .lbl { font: 500 30px var(--sans); fill: var(--ink); letter-spacing: -.02em; }
.chart .mark--after .lbl { fill: var(--accent); }
.chart .sub { font: 400 13px var(--mono); fill: var(--ink-3); letter-spacing: .1em; }
.chart .delta { font: 400 14px var(--mono); fill: var(--ink-2); letter-spacing: .09em; }
.chart__cap { margin-top: 20px; text-transform: none; letter-spacing: .01em; max-width: 60ch; }

/* A trace, not a chart: the queue physically collapses as the system optimises. */
.trace-proof {
  position: relative; overflow: hidden;
  padding: clamp(24px, 3.4vw, 48px);
  color: var(--paper); background: #11100e;
  border: 1px solid rgba(20,19,15,.35);
  box-shadow: 0 24px 70px rgba(20,19,15,.12);
}
.trace-proof::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(244,242,237,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,242,237,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, #000, transparent 88%);
}
.trace-proof__values {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(18px, 4vw, 64px);
  align-items: end;
}
.trace-proof__values > div:last-child { text-align: right; }
.trace-proof__values .meta { color: #77736c; }
.trace-proof__number {
  margin-top: 7px; font: 500 clamp(2.15rem, 6vw, 6rem)/.92 var(--mono);
  letter-spacing: -.07em; white-space: nowrap; color: #a6a096;
  opacity: calc(1 - var(--optimise, 0) * .45);
}
.trace-proof__number span { font-size: .36em; letter-spacing: -.02em; color: #625e58; }
.trace-proof__number--after { color: #ff4a2d; opacity: calc(.5 + var(--optimise, 0) * .5); }
.trace-proof__number--after span { color: #ff765f; }
.trace-proof__arrow { padding-bottom: .12em; font: 300 clamp(1.6rem, 4vw, 4rem)/1 var(--sans); color: #4f4b45; }
.trace-proof__lanes {
  position: relative; z-index: 1; height: clamp(92px, 12vw, 150px);
  margin-top: clamp(26px, 4vw, 50px); padding-top: 10px;
  border-top: 1px solid rgba(244,242,237,.12);
}
.trace-proof__lanes i {
  position: relative; display: block; height: 1px; margin-top: 16px;
  width: var(--trace-width, 100%); transform-origin: left;
  background: linear-gradient(90deg, rgba(244,242,237,.16), rgba(244,242,237,.6) 74%, #ff4a2d);
  transition: width .12s linear, transform .12s linear;
}
.trace-proof__lanes i::after {
  content: ""; position: absolute; right: -3px; top: -3px;
  width: 7px; height: 7px; background: #ff4a2d;
  box-shadow: 0 0 16px rgba(255,74,45,.72);
}
.trace-proof__lanes i:nth-child(1), .trace-proof__lanes i:nth-child(5) { transform: translateY(var(--trace-jitter, 11px)); }
.trace-proof__lanes i:nth-child(2), .trace-proof__lanes i:nth-child(6) { transform: translateY(var(--trace-jitter-neg, -11px)); width: calc(var(--trace-width, 100%) - 5%); }
.trace-proof__lanes i:nth-child(3) { transform: translateY(calc(var(--trace-jitter, 11px) / 2)); width: calc(var(--trace-width, 100%) - 11%); }
.trace-proof__lanes i:nth-child(4) { transform: translateY(calc(var(--trace-jitter-neg, -11px) / 2)); width: calc(var(--trace-width, 100%) - 2%); }
.trace-proof__footer {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto auto auto;
  gap: clamp(12px, 3vw, 42px); padding-top: 13px;
  border-top: 1px solid rgba(244,242,237,.12); color: #6f6a63;
}
.trace-proof__footer strong { color: #ff4a2d; font-weight: 500; }
.trace-proof .chart__cap { position: relative; z-index: 1; color: #77736c; }

.figures {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; margin-top: clamp(34px, 4vw, 56px);
  background: var(--rule); border: 1px solid var(--rule);
}
.figures > div { background: var(--panel); padding: 20px; }
.figures dt { font: 400 .688rem var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.figures dd { margin-top: 10px; font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -.04em; }

/* ── Rule heads ─────────────────────────────────────────── */
.rule-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.rule-head h2 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 600; letter-spacing: -.015em; }

/* ── Entries ────────────────────────────────────────────── */
.entries { padding: clamp(56px, 8vw, 118px) var(--pad); }
.entry {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--gap);
  padding: clamp(30px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--rule);
}
.entry__no { padding-top: .45em; }
.entry h3 { font-size: clamp(1.6rem, 3.4vw, 2.9rem); font-weight: 500; letter-spacing: -.038em; line-height: 1.06; }
.entry__org { margin-top: 12px; }
.entry__lede { margin-top: 18px; max-width: 54ch; color: var(--ink-2); font-size: clamp(.97rem, 1.15vw, 1.09rem); line-height: 1.6; }

.spec { align-self: start; border-top: 1px solid var(--ink); }
.spec::before {
  content: ""; display: block; height: 86px; border-bottom: 1px solid var(--rule);
  opacity: .78; transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.entry:hover .spec::before { opacity: 1; transform: translateY(-3px); }
.entry:nth-of-type(1) .spec::before {
  background:
    radial-gradient(circle at 8% 50%, var(--accent) 0 3px, transparent 4px),
    radial-gradient(circle at 38% 50%, var(--ink) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 50%, var(--ink) 0 3px, transparent 4px),
    radial-gradient(circle at 96% 50%, var(--accent) 0 3px, transparent 4px),
    linear-gradient(var(--rule-2), var(--rule-2)) center / 88% 1px no-repeat;
}
.entry:nth-of-type(2) .spec::before {
  background:
    linear-gradient(90deg, var(--accent) 0 1px, transparent 1px) 8% 20% / 9% 12px repeat-x,
    linear-gradient(90deg, var(--ink) 0 52%, transparent 52%) left 50% / 17px 1px repeat-x,
    linear-gradient(90deg, transparent, var(--accent), transparent) center 74% / 100% 1px no-repeat;
}
.entry:nth-of-type(3) .spec::before {
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 3px, transparent 4px 15px, var(--rule-2) 16px 17px, transparent 18px 29px, var(--rule-2) 30px 31px, transparent 32px),
    linear-gradient(90deg, transparent 49.8%, var(--rule-2) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, var(--rule-2) 50%, transparent 50.2%);
}
.spec > div {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.spec dt { font: 400 .688rem var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.spec dd { font: 500 .875rem var(--mono); text-align: right; }
.spec .hi { color: var(--accent); }

/* ── Statement ──────────────────────────────────────────── */
.statement { padding: clamp(50px, 7vw, 105px) var(--pad); border-block: 1px solid var(--rule); background: var(--panel); }
.statement blockquote { max-width: clamp(300px, 64vw, 940px); }
.statement p {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 1.16; letter-spacing: -.02em;
  text-wrap: balance;
}

/* ── Record ─────────────────────────────────────────────── */
.record { padding: clamp(56px, 8vw, 118px) var(--pad); }
.roles { list-style: none; margin-top: 8px; }
.roles li {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap); align-items: baseline;
  padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--rule);
}
.roles__org { font-size: clamp(1.25rem, 2.3vw, 1.85rem); font-weight: 500; letter-spacing: -.03em; }
.roles__title { color: var(--ink-2); }
.roles__note { margin-top: 8px; }

.stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: clamp(44px, 6vw, 78px); }
.stack > div { border-top: 1px solid var(--ink); padding-top: 14px; }
.stack > div p:last-child { margin-top: 10px; font-size: clamp(1rem, 1.4vw, 1.2rem); }

/* ── Contact ────────────────────────────────────────────── */
.contact {
  padding: clamp(66px, 10vw, 150px) var(--pad);
  border-top: 1px solid var(--rule); background: var(--panel);
  display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 70px); justify-content: space-between; align-items: end;
}
.contact__h { font-size: clamp(2.1rem, 5.6vw, 4.6rem); font-weight: 600; letter-spacing: -.045em; line-height: .98; }
.contact__ack { margin-bottom: 22px; color: var(--accent); }
.contact__ack i {
  display: inline-block; width: 6px; height: 6px; margin: 0 9px 1px 1px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(200,50,27,.1);
}
.contact__mail {
  display: inline-block; font: 500 clamp(.9rem, 1.5vw, 1.15rem) var(--mono);
  color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 4px;
}
.contact__rest { display: flex; gap: 22px; margin-top: 26px; }
.contact__rest a { border-bottom: 1px solid var(--rule-2); padding-bottom: 2px; transition: color .15s, border-color .15s; }
.contact__rest a:hover { color: var(--accent); border-color: var(--accent); }
.contact__rest span { margin-left: 3px; }

/* ── Colophon ───────────────────────────────────────────── */
.colophon {
  display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between;
  padding: 22px var(--pad); border-top: 1px solid var(--rule);
}

/* ── 404 ────────────────────────────────────────────────── */
.error { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 60px var(--pad); }
.error h1 { font-size: clamp(3.4rem, 12vw, 9rem); font-weight: 600; letter-spacing: -.055em; line-height: .9; }
.error h1 span { color: var(--accent); }
.error p { margin-top: 22px; max-width: 44ch; color: var(--ink-2); font-size: 1.05rem; }
.error a.back { align-self: flex-start; margin-top: 30px; font: 500 .875rem var(--mono); color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 4px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .entry { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .entry .spec { grid-column: 2; margin-top: 6px; }
  .roles li { grid-template-columns: 1fr; gap: 4px; }
  .roles__when { margin-bottom: 6px; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures > div:last-child { grid-column: span 2; }
  .stack { grid-template-columns: 1fr; gap: 26px; }
  .chart .lbl { font-size: 38px; }
  .chart .sub, .chart .delta, .chart .tick text { font-size: 18px; }
}
@media (max-width: 560px) {
  .masthead { flex-direction: column; align-items: flex-start; gap: 10px; }
  .masthead__nav { gap: 16px; }
  .lede__title { max-width: none; }
  .contact { align-items: flex-start; }
  .chart .lbl { font-size: 46px; }
  .chart .sub, .chart .delta, .chart .tick text { font-size: 22px; }
  .trace-proof { padding: 22px 18px; }
  .trace-proof__values { grid-template-columns: 1fr; gap: 20px; }
  .trace-proof__values > div:last-child { text-align: left; }
  .trace-proof__arrow { display: none; }
  .trace-proof__number { font-size: clamp(2.35rem, 14vw, 4.4rem); }
  .trace-proof__lanes { height: 110px; margin-top: 28px; }
  .trace-proof__lanes i { margin-top: 13px; }
  .trace-proof__footer { grid-template-columns: 1fr auto; }
  .trace-proof__footer span:nth-child(2) { display: none; }
  .spec::before { height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}
@media print {
  .masthead, .skip, .colophon a { display: none; }
  body { background: #fff; }
  .figure-block, .statement, .contact { background: none; }
}

/* ── Live system scene ──────────────────────────────────── */
:root {
  --scene-ink: #1b1a16;
  --scene-signal: #ed3d21;
}

html { background: var(--paper); }
body { position: relative; background: transparent; overflow-x: clip; }
main, .masthead, .colophon { position: relative; z-index: 2; }

#world {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: 0; filter: saturate(.92) contrast(1.04);
  background: radial-gradient(circle at 75% 43%, #2b1510 0%, #11100e 31%, #090908 70%);
  transition: opacity 1.1s cubic-bezier(.2,.8,.2,1);
}
.scene-ready #world { opacity: 1; }
.no-scene #world { display: none; }
.no-scene .lede { background: #090908; }

.signal-noise {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .18; mix-blend-mode: soft-light;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(20,19,15,.045) 4px),
    radial-gradient(circle at 77% 34%, transparent 0 17%, rgba(20,19,15,.035) 52%, transparent 73%);
}

.scroll-meter {
  position: fixed; z-index: 45; right: 18px; top: 50%;
  width: 1px; height: min(28vh, 210px); transform: translateY(-50%);
  background: rgba(20,19,15,.15); pointer-events: none;
}
.scroll-meter::before,
.scroll-meter::after {
  content: ""; position: absolute; left: -2px; width: 5px; height: 1px;
  background: var(--ink-3);
}
.scroll-meter::before { top: 0; }
.scroll-meter::after { bottom: 0; }
.scroll-meter span {
  position: absolute; left: -2px; top: var(--meter-y, 0%); width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(200,50,27,.12);
}

.masthead {
  color: var(--paper);
  background: rgba(9,9,8,.84);
  border-bottom-color: rgba(244,242,237,.15);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.masthead__nav a { color: #aaa49a; }
.masthead__nav a:hover { color: #ff4a2d; border-color: #ff4a2d; }

.lede {
  min-height: calc(100svh - 58px);
  padding-block: clamp(80px, 12vw, 158px) clamp(82px, 9vw, 124px);
  display: flex; align-items: center; position: relative;
  border-bottom: 1px solid rgba(20,19,15,.14);
  color: var(--paper);
}
.lede::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg, rgba(9,9,8,.98) 0%, rgba(9,9,8,.92) 36%, rgba(9,9,8,.2) 60%, transparent 78%);
  pointer-events: none;
}
.lede__text { position: relative; width: min(58vw, 850px); max-width: 74ch; }
.lede__title { text-shadow: 0 1px rgba(0,0,0,.3); }
.lede__title span { color: #ff4a2d; }
.lede .meta { color: #8f8b83; }
.lede__meta span + span::before { background: rgba(244,242,237,.28); }
.lede__body { border-top-color: rgba(244,242,237,.22); }
.lede__body p { color: #b8b3aa; }

.system-hud {
  position: absolute; right: max(var(--pad), 5vw); bottom: clamp(70px, 10vh, 116px);
  width: clamp(246px, 24vw, 340px); color: var(--paper);
  border-top: 1px solid rgba(244,242,237,.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.system-hud__head {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 9px 0; border-bottom: 1px solid rgba(244,242,237,.16);
  color: #979188;
}
.system-hud__head span:first-child { color: var(--accent); }
.system-hud__head i {
  display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 1px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(200,50,27,.12);
  animation: hud-pulse 1.8s ease-in-out infinite;
}
.system-hud__metrics { padding-top: 7px; }
.system-hud__metrics p {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; font: 400 .63rem var(--mono); text-transform: uppercase;
  letter-spacing: .065em; color: #827d75;
}
.system-hud__metrics strong { color: var(--paper); font-weight: 500; }
.system-hud__metrics p:nth-child(2) strong { color: var(--accent); }

.scroll-cue {
  position: absolute; left: var(--pad); bottom: 27px;
  display: flex; align-items: center; gap: 10px; color: #77736d;
}
.scroll-cue span { position: relative; display: block; width: 38px; height: 1px; background: rgba(244,242,237,.22); overflow: hidden; }
.scroll-cue span::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: translateX(-100%); animation: scan 2.4s cubic-bezier(.65,0,.35,1) infinite;
}

.figure-block, .statement, .contact {
  background: rgba(234,231,224,.985);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.figures > div { background: rgba(234,231,224,.82); }
.chart .mark circle { stroke: #eeebe4; }
.entries, .record, .colophon { background: rgba(244,242,237,.99); }
.entry {
  transition: padding .35s cubic-bezier(.2,.8,.2,1), border-color .25s;
}
.entry:hover { padding-inline: 12px; border-color: var(--ink); }
.entry h3 { transition: color .2s; }
.entry:hover h3 { color: var(--accent); }

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes scan { 0% { transform: translateX(-100%); } 50%, 100% { transform: translateX(100%); } }
@keyframes hud-pulse { 50% { opacity: .35; box-shadow: 0 0 0 7px rgba(200,50,27,0); } }

@media (max-width: 900px) {
  .lede { align-items: flex-start; min-height: 860px; }
  .lede::after { background: linear-gradient(180deg, rgba(9,9,8,.99) 0 44%, rgba(9,9,8,.38) 65%, transparent 91%); }
  .lede__text { width: 100%; }
  .system-hud { right: var(--pad); bottom: 70px; width: min(47vw, 330px); }
}

@media (max-width: 560px) {
  .lede { min-height: 800px; padding-top: 62px; }
  .lede::after { background: linear-gradient(180deg, rgba(9,9,8,1) 0 51%, rgba(9,9,8,.42) 70%, transparent 94%); }
  .system-hud { left: var(--pad); right: auto; bottom: 65px; width: calc(100% - var(--pad) * 2); }
  .scroll-cue { display: none; }
  .scroll-meter { right: 8px; }
  .signal-noise { opacity: .09; }
}

@media (prefers-reduced-motion: reduce) {
  #world { transition: none; }
  .system-hud__head i, .scroll-cue span::after { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* Interactive pipeline and portfolio archive navigation */
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:32px; }
.hero-button { padding:13px 19px; background:#ff4a2d; color:#090908; font-weight:600; border:1px solid #ff4a2d; transition:background .2s, transform .2s; }
.hero-button:hover { background:#ff765e; transform:translateY(-2px); }
.hero-button span { margin-left:20px; }
.hero-link { font:400 .75rem var(--mono); color:#d0cbc2; border-bottom:1px solid #77736d; padding-bottom:5px; }
.scene-controls { position:absolute; right:var(--pad); bottom:25px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; max-width:440px; }
.scene-controls button { font:400 .65rem var(--mono); color:#d0cbc2; background:rgba(15,14,12,.8); border:1px solid #5c554c; padding:9px 12px; cursor:pointer; transition:border-color .2s, color .2s; }
.scene-controls button:hover, .scene-controls button[aria-pressed="true"] { border-color:#ff4a2d; color:#ff765e; }
.scene-controls button:disabled { opacity:.4; cursor:default; }
.scene-controls .meta { flex-basis:100%; font-size:.56rem; text-align:right; color:#aaa49a; }
.masthead__nav { flex-wrap:wrap; }
@media (max-width:900px) { .lede { min-height:960px; } .system-hud { bottom:118px; } .scene-controls { bottom:28px; } }
@media (max-width:560px) { .lede { min-height:930px; } .scene-controls { left:var(--pad); right:var(--pad); } .scene-controls .meta { text-align:left; } .hero-actions { gap:18px; } .masthead__nav { gap:14px; } }
@media print { #world, .signal-noise, .scroll-meter, .scene-controls, .system-hud { display:none; } .lede { color:#14130f; min-height:auto; } .lede::after { display:none; } .reveal { opacity:1; transform:none; } }
.system-hud { background:rgba(9,9,8,.88); padding:12px 16px; border:1px solid rgba(244,242,237,.24); }
.system-hud__head { color:#b8b3aa; }
.system-hud__metrics p { color:#aaa49a; }