:root {
  --void: #090a09;
  --void-soft: #101210;
  --ink: #f1eee7;
  --muted: #adb8b3;
  --dim: #8f9d97;
  --line: rgba(218, 231, 224, 0.18);
  --line-strong: rgba(218, 231, 224, 0.34);
  --aqua: #74d8ce;
  --aqua-soft: #b7f0e8;
  --oxide: #ed6a38;
  --blood: #bd1238;
  --green: #6fd08b;
  --warm: #f2c78f;
  --sans: "Segoe UI Variable", "Aptos", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --gutter: clamp(20px, 4.4vw, 76px);
  --top: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --after: 0;
  --after-chrome: 0.22;
  --after-tea: 1;
  --after-name: 0;
  --after-wall: 0;
  --after-face: 0;
  --after-circle: 0;
  --after-eye-left: 0;
  --after-eye-right: 0;
  --after-smile: 0;
  --after-drips: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--void);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

::selection {
  background: var(--aqua);
  color: #06100e;
}

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

button,
summary {
  font: inherit;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: -100vw;
  z-index: 100;
  padding: 10px 14px;
  border: 1px solid var(--aqua);
  background: var(--void);
  color: var(--ink);
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.skip-link:focus {
  left: 12px;
}

/* The poster remains authoritative until the second WebGL pass completes. */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--void);
}

#void,
#poster,
.stage-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#void {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}

.gl-ready #void {
  visibility: visible;
  opacity: 1;
}

#poster {
  background:
    linear-gradient(90deg, rgba(9, 10, 9, 0.1), rgba(9, 10, 9, 0.62)),
    url("assets/poster.jpg") center / cover no-repeat,
    var(--void);
  filter: saturate(0.92) contrast(1.04);
  opacity: 1;
  transition: opacity 900ms var(--ease-out);
}

.gl-ready #poster {
  opacity: 0;
}

.stage-wash {
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9, 10, 9, 0.48), transparent 19%, transparent 72%, rgba(9, 10, 9, 0.68)),
    radial-gradient(90% 80% at 52% 42%, transparent 20%, rgba(9, 10, 9, 0.28) 75%, rgba(9, 10, 9, 0.7) 100%);
}

/* One restrained header and one chapter rail. Instrumentation is opt-in. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--top);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}

.topbar::after {
  content: "";
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  left: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent 68%);
}

.topbar > * {
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  width: max-content;
  align-items: baseline;
  gap: 11px;
  border: 0;
}

.brand strong {
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.24em;
}

.brand span,
.top-note,
.top-link {
  color: var(--dim);
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.top-note {
  margin: 0;
  justify-self: center;
}

.top-link {
  justify-self: end;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.top-link:hover {
  color: var(--ink);
  border-color: var(--aqua);
}

.chapter-rail {
  position: fixed;
  top: 50%;
  right: max(14px, calc(var(--gutter) * 0.42));
  z-index: 42;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  transform: translateY(-50%);
  font-family: var(--mono);
}

.chapter-number {
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.chapter-rail ol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail-tick {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 32px;
  min-height: 14px;
  border: 0;
}

.rail-tick::after {
  content: "";
  width: 13px;
  height: 1px;
  background: var(--dim);
  transition: width 260ms var(--ease-out), height 260ms var(--ease-out), background 260ms ease;
}

.rail-tick span {
  position: absolute;
  right: 28px;
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 180ms ease, transform 260ms var(--ease-out);
}

.rail-tick:hover span,
.rail-tick:focus-visible span {
  opacity: 1;
  transform: none;
}

.rail-tick[aria-current="true"]::after {
  width: 32px;
  height: 2px;
  background: var(--aqua);
}

.chapter-name {
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

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

.station {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(14px, 2vw, 30px);
  padding-right: max(54px, var(--gutter));
  padding-left: var(--gutter);
}

/* Every authored layer occupies the same narrative row. Without this explicit
 * placement the sticky background consumes row one and pushes the story below
 * the first viewport—the opposite of a deliberate opening composition. */
.station > * {
  grid-row: 1;
  align-self: start;
}

.station-arrival { min-height: 175vh; }
.station-measurement { min-height: 215vh; }
.station-split { min-height: 275vh; }
.station-upstream { min-height: 190vh; }
.station-works { min-height: 235vh; }
.station-proof { min-height: 160vh; }

.station::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: -1;
  grid-row: 1;
  grid-column: 1 / -1;
  height: 100vh;
  /* Mobile browsers resize the viewport as their chrome hides, which makes
     100vh jump mid-scroll and re-triggers a canvas realloc. svh is the
     stable small viewport; the vh above stays as the fallback. */
  height: 100svh;
  pointer-events: none;
}

.station:nth-child(odd)::before {
  background: linear-gradient(90deg, rgba(9, 10, 9, 0.72), transparent 52%);
}

.station:nth-child(even)::before {
  background: linear-gradient(270deg, rgba(9, 10, 9, 0.72), transparent 52%);
}

.story {
  position: sticky;
  z-index: 4;
  max-width: 630px;
  align-self: start;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.74);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--aqua-soft);
  font: 600 10px/1.2 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--aqua);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 24px;
  max-width: 10ch;
  font-size: clamp(52px, 8vw, 124px);
  font-weight: 690;
  line-height: 0.82;
  letter-spacing: -0.078em;
  text-wrap: balance;
}

h1 em {
  color: var(--aqua-soft);
  font-style: normal;
  font-weight: 430;
}

h2 {
  margin-bottom: 22px;
  max-width: 12ch;
  color: var(--ink);
  font-size: clamp(37px, 5.2vw, 76px);
  font-weight: 560;
  line-height: 0.96;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

h3 {
  margin-bottom: 10px;
  font-size: clamp(23px, 2.3vw, 34px);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.045em;
}

.story > p:not(.eyebrow),
.distribution > p {
  max-width: 56ch;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: clamp(15px, 1.25vw, 18px);
}

.story strong {
  color: var(--ink);
}

code {
  color: var(--aqua-soft);
  font: 0.88em/1.3 var(--mono);
}

/* 00 — the engine output is allowed to keep its source colour. */
.story-arrival {
  top: 24vh;
  grid-column: 1 / span 8;
}

.hero-lede {
  max-width: 44ch !important;
  color: var(--ink) !important;
  font-size: clamp(17px, 1.6vw, 22px) !important;
}

.proof-line {
  display: flex;
  max-width: 620px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 30px;
  color: var(--dim);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.proof-line a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(111, 208, 139, 0.5);
  background: rgba(9, 10, 9, 0.46);
  transition: background 180ms ease, border-color 180ms ease;
}

.proof-line a:hover {
  border-color: var(--green);
  background: rgba(111, 208, 139, 0.1);
}

.proof-line a strong {
  color: var(--green);
  font-size: 11px;
}

.engine-stamp {
  position: sticky;
  top: calc(var(--top) + 26px);
  z-index: 5;
  grid-column: 9 / -1;
  justify-self: end;
  height: max-content;
  display: grid;
  justify-items: end;
  gap: 4px;
  color: var(--dim);
  font: 500 9px/1.3 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.engine-stamp strong {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.24em;
}

.lens-cue {
  position: fixed;
  z-index: 44;
  right: clamp(54px, 8vw, 126px);
  bottom: 78px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 500 9px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 420ms var(--ease-out);
}

html[data-station="0"]:not(.lens-used) .lens-cue {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.lens-cue strong {
  display: block;
  color: var(--ink);
  font-weight: 650;
}

.cue-ring {
  width: 34px;
  height: 34px;
  border: 1px solid var(--aqua);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(116, 216, 206, 0.25);
  animation: cue-pulse 2s ease-out infinite;
}

@keyframes cue-pulse {
  60% { box-shadow: 0 0 0 14px rgba(116, 216, 206, 0); }
  100% { box-shadow: 0 0 0 14px rgba(116, 216, 206, 0); }
}

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--dim);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scroll-cue i {
  position: relative;
  width: 64px;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--aqua);
  transform: translateX(-100%);
  animation: scroll-line 2s var(--ease-out) infinite;
}

@keyframes scroll-line {
  55%, 100% { transform: translateX(100%); }
}

/* 01 — exact buckets in the page, weighted reconstruction in the world. */
.story-measurement {
  top: 18vh;
  grid-column: 7 / -1;
  justify-self: end;
}

.distribution {
  position: sticky;
  top: 63vh;
  z-index: 5;
  grid-column: 2 / 12;
  margin: 0;
  align-self: start;
}

.distribution figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  color: var(--dim);
  font: 500 9px/1.3 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.distribution figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

.distribution ol {
  display: grid;
  grid-template-columns: 2.6fr 1.3fr 1.1fr 1.15fr 0.86fr 0.86fr;
  gap: 3px;
  min-height: 118px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.distribution li {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 13px 10px;
  overflow: hidden;
  border-top: 1px solid var(--aqua);
  background: linear-gradient(180deg, rgba(116, 216, 206, 0.05), rgba(116, 216, 206, 0.14));
  color: var(--aqua-soft);
  font: 500 9px/1.1 var(--mono);
}

.distribution li::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: max(5px, var(--share));
  background: rgba(116, 216, 206, 0.08);
}

.distribution li.spill {
  border-color: var(--oxide);
  background: linear-gradient(180deg, rgba(237, 106, 56, 0.05), rgba(237, 106, 56, 0.16));
  color: #ffc2a8;
}

.distribution li.spill::before {
  background: rgba(237, 106, 56, 0.1);
}

.distribution li span,
.distribution li strong {
  position: relative;
  z-index: 1;
}

.distribution li strong {
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(11px, 1vw, 14px);
  text-overflow: ellipsis;
}

.distribution > p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font: 500 9px/1.4 var(--mono) !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.distribution > p i {
  width: 18px;
  height: 2px;
  background: var(--oxide);
}

/* 02 — the fault line gets the most time and the largest type. */
.fault-title {
  position: sticky;
  top: 12vh;
  z-index: 3;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: baseline;
  gap: 0 0.12em;
  color: var(--ink);
  font-size: clamp(92px, 18vw, 286px);
  font-weight: 680;
  line-height: 0.72;
  letter-spacing: -0.09em;
  text-shadow: 0 4px 42px rgba(0, 0, 0, 0.66);
}

.fault-title span:first-child {
  color: var(--oxide);
}

.fault-title span:nth-of-type(2) {
  color: var(--aqua-soft);
}

.fault-title i {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.3em;
  font-style: normal;
  font-weight: 400;
}

.fault-title small {
  grid-column: 1 / -1;
  margin-top: 0.8em;
  padding-left: 0.5em;
  color: var(--dim);
  font: 500 clamp(9px, 0.8vw, 12px)/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-split {
  top: 49vh;
  grid-column: 7 / -1;
  justify-self: end;
}

.case-link {
  display: grid;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin-top: 26px;
  padding: 12px 14px;
  border-left: 2px solid var(--green);
  background: rgba(9, 10, 9, 0.48);
  font: 500 9px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 180ms ease;
}

.case-link:hover {
  background: rgba(111, 208, 139, 0.1);
}

.case-link span {
  color: var(--dim);
}

.case-link strong {
  color: var(--green);
}

.rune-proof {
  position: sticky;
  top: 60vh;
  z-index: 4;
  grid-column: 1 / 5;
  display: grid;
  width: max-content;
  max-width: 100%;
  gap: 3px;
  padding-left: 15px;
  border-left: 2px solid var(--aqua);
  font-family: var(--mono);
  text-transform: uppercase;
}

.rune-proof span,
.rune-proof i,
.rune-proof b {
  color: var(--dim);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.rune-proof strong {
  color: var(--ink);
  font-size: clamp(25px, 3vw, 44px);
  line-height: 1;
}

.rune-proof b {
  width: max-content;
  margin-top: 5px;
  padding: 3px 6px;
  border: 1px solid var(--aqua);
  color: var(--aqua-soft);
}

.impact-strip {
  position: sticky;
  top: 78vh;
  z-index: 5;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--line);
}

.impact-strip div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  padding: 14px 16px;
  background: rgba(9, 10, 9, 0.86);
}

.impact-strip dt,
.impact-strip small {
  color: var(--dim);
  font: 500 9px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.impact-strip dd {
  grid-row: 1 / span 2;
  grid-column: 2;
  margin: 0;
  color: var(--aqua-soft);
  font: 600 clamp(23px, 2.5vw, 38px)/0.95 var(--mono);
  letter-spacing: -0.08em;
}

/* 03 — evidence branches, not decorative cards. */
.story-upstream {
  top: 20vh;
  grid-column: 1 / span 5;
}

.upstream-list {
  position: sticky;
  top: 18vh;
  z-index: 5;
  grid-column: 7 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.upstream-list li {
  border-top: 1px solid var(--line);
}

.upstream-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.upstream-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 18px;
  padding: 18px 0;
  transition: padding 220ms var(--ease-out), color 180ms ease;
}

.upstream-list a:hover,
.upstream-list a:focus-visible {
  padding-right: 10px;
  padding-left: 10px;
  color: var(--aqua-soft);
}

.upstream-list span,
.upstream-list em {
  color: var(--dim);
  font: 500 9px/1.2 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.upstream-list strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--oxide);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.08em;
}

.upstream-list em {
  font-style: normal;
}

.upstream-list .is-merged {
  border-top-color: rgba(111, 208, 139, 0.55);
}

.upstream-list .is-merged strong,
.upstream-list .is-merged em {
  color: var(--green);
}

/* 04 — each project owns a mechanism in the field. */
.story-works {
  top: 15vh;
  grid-column: 1 / span 5;
}

.project-grid {
  position: sticky;
  top: 13vh;
  z-index: 5;
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 58px) clamp(24px, 3vw, 44px);
  align-self: start;
}

.project {
  position: relative;
  min-height: 0;
  padding: 0 0 18px 20px;
  border-left: 1px solid var(--line-strong);
  background: transparent;
  transition: border-color 180ms ease, transform 280ms var(--ease-out);
}

.project::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -3px;
  width: 5px;
  height: 5px;
  background: var(--aqua);
  box-shadow: 0 0 16px rgba(116, 216, 206, 0.5);
}

.project:hover,
.project:focus-visible {
  z-index: 1;
  border-color: var(--aqua);
  transform: translateX(8px);
}

.project-index {
  display: block;
  margin-bottom: 16px;
  color: var(--aqua);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project p {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 14px;
}

.project > strong {
  display: block;
  color: var(--dim);
  font: 500 9px/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 05 — proof resolves into a human next step. */
.final-mark {
  position: sticky;
  top: 14vh;
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  color: var(--dim);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.final-mark strong {
  margin-top: 6px;
  color: var(--dim);
  font-size: clamp(18px, 1.6vw, 25px);
  letter-spacing: 0.16em;
}

.story-proof {
  top: 31vh;
  grid-column: 3 / 11;
  justify-self: center;
  max-width: 780px;
  text-align: center;
}

.story-proof .eyebrow {
  justify-content: center;
}

.story-proof h2 {
  max-width: none;
  margin-bottom: 14px;
  font-size: clamp(62px, 12vw, 176px);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.07em;
}

.story-proof h2 a {
  color: var(--green);
  text-decoration: none;
}

.story-proof > p {
  max-width: 50ch !important;
  margin-right: auto;
  margin-left: auto;
  color: var(--ink) !important;
}

.final-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 28px 0;
}

.final-links a {
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 180ms ease, background 180ms ease;
}

.final-links a:hover {
  border-color: var(--aqua);
  background: rgba(116, 216, 206, 0.08);
}

details {
  max-width: 630px;
  margin: 26px auto 0;
  border-top: 1px solid var(--line);
  text-align: left;
}

summary {
  padding: 13px 0;
  color: var(--dim);
  cursor: pointer;
  font: 500 10px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

details p {
  color: var(--muted) !important;
  font-size: 14px !important;
}

.site-footer {
  position: absolute;
  right: var(--gutter);
  bottom: 30px;
  left: var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font: 500 9px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The public story genuinely ends at the footer. This section is one clipped
 * pixel until a fresh gesture keeps pressing down at that exact boundary.
 * Arming expands normal document flow; neither wheel nor touch is cancelled. */
.afterimage {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 1px;
  min-height: 1px;
  overflow: clip;
  pointer-events: none;
  contain: layout style;
}

.afterimage:focus { outline: 0; }

[data-ritual="armed"] .afterimage {
  height: 112vh;
  height: 112svh;
  min-height: 112vh;
  min-height: 112svh;
  overflow: visible;
  pointer-events: auto;
}

[data-ritual="unlocked"] .afterimage {
  height: 370vh;
  height: 370svh;
  min-height: 370vh;
  min-height: 370svh;
  overflow: visible;
  pointer-events: auto;
}

.afterimage-scene {
  position: sticky;
  top: 0;
  display: grid;
  width: 100%;
  height: 100vh;
  height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  visibility: hidden;
  opacity: 0;
  background: rgba(8, 10, 9, 0.18);
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}

[data-ritual="armed"] .afterimage-scene,
[data-ritual="unlocked"] .afterimage-scene {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.afterimage-scene::before,
.afterimage-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.afterimage-scene::before {
  background:
    radial-gradient(48% 46% at 50% 48%, rgba(67, 167, 163, 0.10), transparent 72%),
    linear-gradient(180deg, rgba(7, 9, 8, 0.12), rgba(7, 9, 8, 0.82));
  opacity: var(--after-tea);
}

.afterimage-scene::after {
  background:
    radial-gradient(58% 58% at 50% 50%, rgba(120, 12, 34, 0.09), transparent 68%),
    linear-gradient(180deg, rgba(225, 218, 201, 0.02), rgba(75, 6, 20, 0.22));
  opacity: var(--after-wall);
}

.ritual-room {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  grid-template-columns: minmax(170px, 230px) minmax(220px, 310px);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  width: min(78vw, 660px);
  opacity: var(--after-tea);
  transform: translate(-50%, -47%) scale(calc(0.975 + var(--after-tea) * 0.025));
  transition: transform 700ms var(--ease-out);
}

.ritual-cup {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--aqua-soft);
  cursor: pointer;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.46));
  justify-self: end;
  width: min(17vw, 220px);
}

.ritual-cup::before {
  content: "";
  position: absolute;
  inset: 25% 12% 8%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(67, 178, 174, 0.13);
  filter: blur(34px);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 420ms ease, transform 620ms var(--ease-out);
}

.ritual-cup:hover::before,
.ritual-cup:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.ritual-cup:focus-visible {
  outline: 1px solid rgba(183, 240, 232, 0.58);
  outline-offset: 8px;
}

.ritual-cup svg {
  display: block;
  width: 100%;
  overflow: visible;
  transform: rotate(-1.2deg);
}

.gl-ready .ritual-cup svg {
  opacity: 0.08;
  mix-blend-mode: screen;
}

.tea-shadow { fill: rgba(0, 0, 0, 0.46); }
.tea-saucer { fill: url("#porcelain"); opacity: 0.78; }
.tea-saucer-rim { fill: rgba(31, 86, 87, 0.38); }
.tea-handle,
.tea-cup-body { fill: url("#porcelain"); }
.tea-rim { fill: #d8fbf4; }
.tea-liquid { fill: url("#tea"); }
.tea-glint {
  fill: none;
  stroke: rgba(233, 255, 251, 0.56);
  stroke-width: 8;
  stroke-linecap: round;
}

.tea-steam path {
  fill: none;
  stroke: rgba(221, 247, 241, 0.46);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 8 11;
  animation: tea-steam 3.8s linear infinite;
}

.tea-steam path:nth-child(2) { animation-delay: -1.3s; }
.tea-steam path:nth-child(3) { animation-delay: -2.4s; }

@keyframes tea-steam {
  0% { stroke-dashoffset: 0; opacity: 0.18; transform: translateY(5px); }
  45% { opacity: 0.72; }
  100% { stroke-dashoffset: -38; opacity: 0.08; transform: translateY(-5px); }
}

.ritual-cup-label {
  justify-self: center;
  margin-top: -14px;
  color: rgba(183, 240, 232, 0.46);
  font: 500 8px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 360ms var(--ease-out);
}

.ritual-cup:hover .ritual-cup-label,
.ritual-cup:focus-visible .ritual-cup-label {
  opacity: 1;
  transform: translateY(0);
}

.ritual-copy {
  align-self: center;
  padding-left: clamp(18px, 3vw, 44px);
  border-left: 1px solid rgba(183, 240, 232, 0.18);
}

.ritual-eyebrow {
  margin: 0 0 17px;
  color: rgba(183, 240, 232, 0.50);
  font: 500 8px/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

#ritual-clue {
  margin: 0 0 26px;
  color: rgba(241, 238, 231, 0.78);
  font: 430 clamp(17px, 1.8vw, 22px)/1.35 var(--sans);
  letter-spacing: -0.02em;
}

.ritual-slots {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 10px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ritual-slots li {
  position: relative;
  height: 34px;
  border-bottom: 1px solid rgba(183, 240, 232, 0.28);
}

.ritual-slots li::before {
  content: "";
  position: absolute;
  inset: 7px 9px;
  border-radius: 50%;
  background: var(--aqua-soft);
  box-shadow: 0 0 18px rgba(116, 216, 206, 0.54);
  opacity: 0;
  transform: scale(0.45);
  transition: opacity 180ms ease, transform 320ms var(--ease-out);
}

.ritual-slots li.is-filled::before {
  opacity: 0.82;
  transform: scale(1);
}

.ritual-slots li.is-error {
  border-color: rgba(237, 106, 56, 0.72);
  animation: ritual-error 260ms ease;
}

@keyframes ritual-error {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-4px); }
  70% { transform: translateX(4px); }
}

.ritual-hint {
  margin: 18px 0 0;
  color: rgba(173, 184, 179, 0.40);
  font: 500 8px/1.4 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.touch-hint { display: none; }

.afterimage-name {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(92vw, 1120px);
  margin: 0;
  opacity: var(--after-name);
  text-align: center;
  transform: translate(-50%, -46%) scale(calc(0.985 + var(--after-name) * 0.015));
}

.afterimage-name span {
  display: block;
  margin-bottom: 18px;
  color: rgba(241, 238, 231, 0.48);
  font: 500 8px/1 var(--mono);
  letter-spacing: 0.30em;
  text-transform: uppercase;
}

.afterimage-word {
  max-width: none;
  margin: 0;
  color: transparent;
  font: 680 clamp(104px, 25vw, 360px)/0.72 var(--mono);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  -webkit-text-stroke: 1px rgba(241, 238, 231, 0.72);
  text-shadow: 0 0 34px rgba(241, 238, 231, 0.10), 0 18px 80px rgba(0, 0, 0, 0.84);
}

.afterimage-name > p:last-child {
  margin: 24px 0 0;
  color: rgba(241, 238, 231, 0.46);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gl-ready .afterimage-name { opacity: calc(var(--after-name) * 0.46); }

.afterimage-signature {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  opacity: var(--after-wall);
  background:
    linear-gradient(91deg, transparent 0 61%, rgba(55, 46, 38, 0.10) 61.4%, transparent 62.1%),
    radial-gradient(ellipse at 28% 20%, rgba(224, 217, 205, 0.16), transparent 43%),
    radial-gradient(ellipse at 78% 72%, rgba(67, 54, 44, 0.20), transparent 52%),
    linear-gradient(180deg, #958c80, #80776d);
  box-shadow: inset 0 0 150px rgba(39, 28, 21, 0.30);
  transform: scale(calc(1.015 - var(--after-wall) * 0.015));
  transform-origin: center;
}

.afterimage-signature::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 17%, rgba(46, 34, 27, 0.055) 18%, transparent 18.8%, transparent 83%, rgba(54, 41, 32, 0.045) 84%, transparent 85%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.075), transparent 43%, rgba(51, 37, 28, 0.12));
  mix-blend-mode: multiply;
}

.afterimage-signature svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(50, 3, 12, 0.20));
}

.afterimage-signature path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* A slight overrun closes the final sub-pixel of the normalized path. At
     exactly 1 some SVG rasterizers leave a visible seam where the circle's
     start and end meet. */
  stroke-dasharray: 1.025 1;
  vector-effect: non-scaling-stroke;
}

.signature-shadow path {
  stroke: rgba(67, 3, 17, 0.18);
  stroke-width: 15;
  filter: blur(2px);
}
.signature-shadow { opacity: var(--after-circle); }

.signature-ink path {
  stroke: #7a0a21;
  stroke-width: 7;
}

.signature-circle path {
  /* All three lanes travel clockwise from the same broken upper-left start,
     so the reveal reads as one hand gesture rather than three icons fading in. */
  stroke-dasharray: 1.025 1;
  stroke-dashoffset: calc(1 - var(--after-circle));
  opacity: var(--after-circle);
}

.signature-circle path:first-child { stroke: #8d0d29; stroke-width: 11px; }
.signature-circle path:nth-child(2) { stroke: rgba(101, 8, 26, 0.62); stroke-width: 6px; }
.signature-circle path:nth-child(3) { stroke: rgba(154, 18, 48, 0.74); stroke-width: 4px; }
.signature-eye-left { stroke-dashoffset: calc(1 - var(--after-eye-left)); }
.signature-eye-right { stroke-dashoffset: calc(1 - var(--after-eye-right)); }
.signature-eye-left,
.signature-eye-right { stroke-width: 8.5px !important; }
.signature-smile { stroke-width: 8.5 !important; stroke-dashoffset: calc(1 - var(--after-smile)); }
.signature-smile-faint { stroke: rgba(101, 8, 26, 0.58) !important; stroke-width: 3.5px !important; }
.signature-smile-fray { stroke: rgba(154, 18, 48, 0.68) !important; stroke-width: 2.5px !important; }
.signature-drip { stroke-width: 3.5px !important; stroke-dashoffset: calc(1 - var(--after-drips)); }
.signature-drip.is-heavy { stroke-width: 5px !important; }
.signature-drip.is-thin { stroke-width: 2.2px !important; }

.signature-eye-left { opacity: var(--after-eye-left); }
.signature-eye-right { opacity: var(--after-eye-right); }
.signature-smile { opacity: var(--after-smile); }
.signature-drip { opacity: var(--after-drips); }

.afterimage-return {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 2;
  padding: 10px 0;
  border-bottom: 1px solid rgba(156, 10, 43, 0.56);
  color: rgba(241, 238, 231, 0.72);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 260ms ease, transform 360ms var(--ease-out), visibility 0s linear 360ms;
}

[data-after="found"] .afterimage-return,
.afterimage-return:focus-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.ritual-dialog {
  width: min(92vw, 470px);
  padding: 0;
  border: 1px solid rgba(183, 240, 232, 0.24);
  border-radius: 0;
  background: rgba(10, 14, 13, 0.98);
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.72);
}

.ritual-dialog::backdrop {
  background: rgba(3, 5, 4, 0.82);
  backdrop-filter: blur(8px);
}

.ritual-dialog-card { padding: clamp(25px, 6vw, 44px); }
.ritual-dialog h2 { margin: 0 0 28px; font-size: clamp(28px, 7vw, 42px); }
.ritual-dialog label {
  display: block;
  margin-bottom: 9px;
  color: var(--dim);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ritual-dialog input {
  width: 100%;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid rgba(183, 240, 232, 0.38);
  outline: 0;
  background: transparent;
  color: var(--aqua-soft);
  font: 600 30px/1 var(--mono);
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.ritual-dialog input:focus { border-color: var(--aqua-soft); }
.ritual-dialog-status { min-height: 1.5em; margin: 10px 0 0; color: var(--oxide); font: 500 9px/1.5 var(--mono); }
.ritual-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 26px; }
.ritual-dialog-actions button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.ritual-dialog-actions button:last-child { border-color: rgba(116, 216, 206, 0.52); color: var(--aqua-soft); }
.ritual-dialog-actions button:focus-visible { outline: 1px solid var(--aqua-soft); outline-offset: 2px; }

.topbar,
.chapter-rail,
.controls {
  transition: opacity 420ms ease, transform 420ms var(--ease-out);
}

html:not([data-ritual="sealed"]) .topbar:not(:focus-within),
html:not([data-ritual="sealed"]) .chapter-rail:not(:focus-within),
html:not([data-ritual="sealed"]) .controls:not(:focus-within) {
  opacity: 0.22;
}

html[data-ritual="unlocked"] .topbar:not(:focus-within),
html[data-ritual="unlocked"] .chapter-rail:not(:focus-within),
html[data-ritual="unlocked"] .controls:not(:focus-within) {
  opacity: var(--after-chrome);
}

html:not([data-ritual="sealed"]) .topbar:not(:focus-within) {
  transform: translateY(-5px);
}

.controls {
  position: fixed;
  right: clamp(18px, 3vw, 48px);
  bottom: 22px;
  z-index: 45;
  display: flex;
  gap: 7px;
}

.controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(9, 10, 9, 0.68);
  color: var(--dim);
  cursor: pointer;
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.controls button:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.controls button[aria-pressed="true"] {
  border-color: var(--aqua);
  background: rgba(116, 216, 206, 0.09);
  color: var(--aqua-soft);
}

.no-gl .controls,
.gl-failed .controls {
  display: none;
}

/* The fallback poster belongs to arrival, not the hidden ending. Let it fall
 * away with the same pressure signal so a failed or unavailable GL context
 * still resolves into the intended void rather than a stale first scene. */
.no-gl #poster,
.gl-failed #poster {
  opacity: 1;
}

.no-gl:not([data-ritual="sealed"]) #poster,
.gl-failed:not([data-ritual="sealed"]) #poster,
.no-gl:not([data-ritual="sealed"]) .chapter-rail,
.gl-failed:not([data-ritual="sealed"]) .chapter-rail {
  opacity: 0;
  visibility: hidden;
}

.debug-hud {
  position: fixed;
  bottom: 24px;
  left: var(--gutter);
  z-index: 46;
  display: none;
  gap: 14px;
  color: var(--dim);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debug .debug-hud {
  display: flex;
}

@media (max-width: 1000px) {
  :root { --gutter: clamp(18px, 4vw, 36px); }

  .top-note { display: none; }
  .topbar { grid-template-columns: 1fr auto; }
  .top-link { grid-column: 2; }
  .chapter-rail { right: 13px; }
  .chapter-rail span:not(.chapter-number),
  .rail-tick span { display: none; }
  .station { padding-right: 48px; }

  .story-arrival { grid-column: 1 / span 10; }
  .story-measurement,
  .story-split,
  .story-upstream,
  .story-works { grid-column: 5 / -1; }
  .distribution { grid-column: 1 / 12; }
  .rune-proof { grid-column: 1 / 5; }
  .upstream-list,
  .project-grid { grid-column: 6 / -1; }
}

@media (max-width: 720px), (max-height: 560px) {
  :root {
    --top: 60px;
    --gutter: 17px;
  }

  body { font-size: 15px; }
  .brand span { display: none; }
  .topbar::after { right: 17px; left: 17px; }
  .chapter-rail { right: 8px; }
  .chapter-number { font-size: 16px; }
  .rail-tick { min-width: 21px; }
  .rail-tick[aria-current="true"]::after { width: 21px; }

  /* The layered composition is a wide-viewport idea. It reads because
     grid-column separates the layers horizontally while sticky offsets
     stagger them vertically; drop the grid and only the sticky offsets are
     left holding them apart, each one a hand-picked vh that assumed a
     particular block height. Phone text wraps to more lines than any of those
     numbers assumed, so the layers ride over each other. Put them back in
     normal flow and let content height decide. */
  .station {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-height: 0;
    padding: calc(var(--top) + 34px) var(--gutter) 46vh;
  }

  .station > * {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
  }

  .station::before { display: none; }

  /* Trailing space per station is what the 3D still gets to animate through,
     now that the text no longer reserves it by being tall. */
  .station-arrival  { padding-bottom: 58vh; }
  .station-measurement { padding-bottom: 62vh; }
  .station-split    { padding-bottom: 78vh; }
  .station-upstream { padding-bottom: 52vh; }
  .station-works    { padding-bottom: 52vh; }
  .station-proof    { padding-bottom: 34vh; }

  /* Text sits over a live scene, so it carries its own ground rather than
     relying on the shader staying dark behind any particular paragraph. */
  .story {
    padding: 20px 16px;
    border-radius: 3px;
    background: linear-gradient(180deg,
      rgba(9, 10, 9, 0.93), rgba(9, 10, 9, 0.86));
    text-shadow: none;
  }

  .story-proof { text-align: left; }
  .story-proof .eyebrow,
  .final-links { justify-content: flex-start; }
  .story-proof > p { margin-left: 0; }

  h1 { font-size: clamp(34px, 9.5vw, 46px); }
  h2 { font-size: clamp(27px, 7.5vw, 38px); }
  .story-proof h2 { font-size: clamp(40px, 13vw, 62px); }
  .hero-lede { font-size: 16px; }

  .engine-stamp,
  .lens-cue,
  .scroll-cue { display: none; }

  .distribution { width: 100%; }
  .distribution figcaption { display: grid; gap: 4px; }
  .distribution ol { grid-template-columns: 1fr; min-height: 0; }
  .distribution li { min-height: 0; padding: 12px 13px; }

  /* 28vw type was 112px on a 400px screen — three lines of headline colliding
     with everything beneath it. */
  .fault-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: clamp(38px, 12vw, 60px);
  }
  .fault-title small { padding-left: 0; }

  .rune-proof { width: auto; }
  .impact-strip { grid-template-columns: 1fr; }
  .impact-strip div:nth-child(n + 2) { display: none; }

  .upstream-list a { padding: 15px 0; }
  .project-grid { grid-template-columns: 1fr; }
  .project { min-height: 0; }
  .project-index { margin-bottom: 22px; }

  .site-footer {
    position: relative;
    right: auto;
    left: auto;
    flex-direction: column;
    gap: 10px;
    padding: 0 var(--gutter) 40px;
  }

  .controls { right: 9px; bottom: 9px; }
  .controls button { padding: 8px; }

  .ritual-room {
    inset: 0;
    display: block;
    width: 100%;
    transform: none;
    pointer-events: none;
  }

  .ritual-cup {
    position: absolute;
    top: 35%;
    left: 50%;
    width: min(30vw, 132px);
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }

  .ritual-copy {
    position: absolute;
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 82px));
    left: 50%;
    width: min(calc(100vw - 42px), 360px);
    padding: 17px 19px 19px;
    border-top: 1px solid rgba(183, 240, 232, 0.26);
    border-left: 0;
    background:
      linear-gradient(90deg, rgba(76, 174, 167, 0.08), transparent 58%),
      rgba(7, 10, 9, 0.92);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.44);
    text-align: left;
    transform: translateX(-50%);
    pointer-events: auto;
  }

  .ritual-copy::after {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    width: 38px;
    height: 1px;
    background: var(--aqua-soft);
    box-shadow: 0 0 14px rgba(116, 216, 206, 0.42);
  }

  .ritual-eyebrow { margin-bottom: 12px; }
  #ritual-clue { margin-bottom: 15px; }
  .ritual-slots {
    grid-template-columns: repeat(4, 30px);
    gap: 9px;
    margin: 0;
  }
  .ritual-slots li { height: 30px; }
  .ritual-hint { margin-top: 13px; }
  .desktop-hint { display: none; }
  .touch-hint { display: inline; }
  .ritual-hint { color: rgba(173, 184, 179, 0.72); }
  .ritual-cup-label {
    opacity: 0.62;
    transform: translateY(2px);
  }
  .afterimage-name { width: 100vw; }

  .afterimage-word {
    font-size: clamp(86px, 27vw, 170px);
    letter-spacing: 0.07em;
    text-indent: 0.07em;
  }

  .afterimage-return {
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 70px));
  }
}

@media (hover: none), (pointer: coarse) {
  .desktop-hint { display: none; }
  .touch-hint { display: inline; }
  .ritual-cup-label {
    opacity: 0.62;
    transform: translateY(0);
  }
}

@media (max-width: 380px) {
  .top-link { font-size: 9px; }
  .engine-stamp span { display: none; }
  .engine-stamp strong {
    font-size: 11px;
    letter-spacing: 0.18em;
  }
  .hero-lede { font-size: 16px !important; }
  .proof-line { gap: 8px; }
  .proof-line > span { display: none; }
  .distribution li { padding: 10px 7px; }
  .rune-proof strong { font-size: 23px; }
}

@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;
  }

  .afterimage-name,
  .afterimage-signature,
  .ritual-room,
  .ritual-cup::before,
  .afterimage-return,
  .topbar,
  .chapter-rail,
  .controls {
    transition: none !important;
  }

  .afterimage-signature svg {
    filter: none;
  }

  .tea-steam path { animation: none !important; }
}

.no-motion .cue-ring,
.no-motion .scroll-cue i::after {
  animation: none;
}

.no-motion .afterimage-name,
.no-motion .afterimage-signature,
.no-motion .ritual-room,
.no-motion .ritual-cup::before,
.no-motion .afterimage-return,
.no-motion .topbar,
.no-motion .chapter-rail,
.no-motion .controls {
  transition: none;
}

.no-motion .afterimage-signature svg {
  filter: none;
}

.no-motion .tea-steam path { animation: none; }


/* Orientation hint. A suggestion, never a gate: the page works in portrait,
   it is simply composed for a wide frame. It removes itself the moment the
   phone turns, and once dismissed it stays gone for the session. */
.rotate-hint {
  position: fixed;
  z-index: 60;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #28302f);
  border-radius: 3px;
  background: rgba(9, 10, 9, 0.93);
  backdrop-filter: blur(10px);
  color: var(--muted, #8fa3a3);
  font: 500 10px/1.45 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  animation: rotate-in 420ms ease-out both;
}

.rotate-hint[hidden] { display: none; }
.rotate-hint p { margin: 0; flex: 1; }
.rotate-hint strong { color: var(--shine, #f8ecd8); font-weight: 600; }

.rotate-hint button {
  flex: none;
  padding: 6px 10px;
  border: 1px solid var(--line, #28302f);
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.rotate-hint button:hover,
.rotate-hint button:focus-visible {
  border-color: var(--aqua, #40a0a8);
  color: var(--shine, #f8ecd8);
  outline: none;
}

/* A phone turning, drawn rather than shipped as an asset. */
.rotate-glyph {
  flex: none;
  width: 15px;
  height: 24px;
  border: 1.5px solid var(--aqua, #40a0a8);
  border-radius: 3px;
  transform-origin: 50% 50%;
  animation: rotate-tip 2.6s cubic-bezier(.65,0,.35,1) infinite;
}

@keyframes rotate-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rotate-tip {
  0%, 22%   { transform: rotate(0deg); }
  46%, 74%  { transform: rotate(-90deg); }
  100%      { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-hint { animation: none; }
  .rotate-glyph { animation: none; transform: rotate(-90deg); }
}

/* A phone on its side: ~844x390. Width is no longer the constraint, height is.
   The flow layout above already applies (its trigger includes max-height), so
   this only has to spend the horizontal room well and buy back vertical space
   everywhere it can. */
@media (max-height: 560px) and (min-width: 721px) {
  :root { --top: 44px; }

  body { font-size: 14px; }

  .station {
    gap: 20px;
    padding-top: calc(var(--top) + 16px);
  }

  /* Hold the text to a readable measure instead of letting it run the full
     844px, which leaves the world visible beside it rather than behind it. */
  .story,
  .distribution,
  .rune-proof,
  .upstream-list,
  .project-grid {
    max-width: 56ch;
  }

  .story { padding: 15px 17px; }

  h1 { font-size: clamp(26px, 4.4vw, 36px); }
  h2 { font-size: clamp(21px, 3.4vw, 28px); }
  .story-proof h2 { font-size: clamp(34px, 6vw, 48px); }
  .fault-title { font-size: clamp(30px, 5vw, 44px); }
  .hero-lede { font-size: 15px; }

  /* Scroll room is proportional to viewport height, and there is little of it,
     so give each station a touch more than the portrait share. */
  .station-arrival     { padding-bottom: 72vh; }
  .station-measurement { padding-bottom: 76vh; }
  .station-split       { padding-bottom: 96vh; }
  .station-upstream    { padding-bottom: 66vh; }
  .station-works       { padding-bottom: 66vh; }
  .station-proof       { padding-bottom: 40vh; }

  .topbar { padding-top: 8px; padding-bottom: 8px; }
  .chapter-rail { right: 10px; }
  .site-footer { padding-bottom: 26px; }
  .controls button { padding: 6px 8px; }

  /* The armed room inherits the portrait stack when height is scarce. On a
     phone held sideways that put its catcher panel directly over the cup,
     hiding the tell it asks the visitor to inspect. Spend the available width
     instead: the cup and its hit target stay centred on the WebGL form while
     the prompt occupies the quiet right-hand third. */
  .ritual-copy {
    top: 50%;
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    width: min(40vw, 360px);
    transform: translateY(-50%);
  }

  /* The public chapter readout sits in the same right-edge lane as the
     landscape catcher. Once the hidden room opens it no longer describes the
     current scene, so retire it instead of letting "05" cut through the
     panel's illuminated edge. */
  html:not([data-ritual="sealed"]) .chapter-rail {
    visibility: hidden;
    opacity: 0;
  }
}