@font-face {
  font-family: Archivo;
  src: url(fonts/archivo.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* The page is one drawing, made at 1600 by 900. --u is 16 px there and grows with the window, so browser zoom changes
   nothing but the sharpness: type, gaps and the WebGL stage all keep their shares of the screen. Reading text uses rem,
   which never drops under 14 px. */
:root {
  --ground: #0b0d12;
  --ink: #f5f6f8;
  --soft: #aab1bf;
  --gold: #e3a93c;
  --line: rgba(245, 246, 248, 0.14);
  --mint: #6fe3c2;
  --red: #ff7a66;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --u: min(1vw, 1.7778vh);
  --gut: max(1rem, calc(var(--u) * 3.5));
  --bar: 3.75rem;
  --shot: calc((100vw - var(--gut) * 1.5) * 0.5625 + var(--bar) + 0.5rem);
  --h1: max(2.5rem, calc(var(--u) * 6.4));
  --h2: max(2rem, calc(var(--u) * 4.6));
  --h3: max(1.5rem, calc(var(--u) * 2.9));
  --giant: max(2.8rem, calc(var(--u) * 10.5));
}

* { box-sizing: border-box; }
html { background: var(--ground); font-size: max(14px, var(--u)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
.calm { scroll-behavior: auto; }
body { margin: 0; color: var(--ink); background: transparent; font: 400 1.12rem/1.55 Archivo, "Segoe UI", system-ui, sans-serif; font-stretch: 100%; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
code, pre { font-family: "Cascadia Code", ui-monospace, Consolas, monospace; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 0.2rem; }
::selection { background: var(--gold); color: #0b0d12; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 50; padding: 0.5rem 0.875rem; background: var(--ink); color: #0b0d12; transform: translateY(-200%); }
.skip:focus { transform: none; }

#gl { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; display: block; }
main, .end { position: relative; z-index: 2; }

/* ---------- header ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 0.125rem; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; z-index: 41; }
.bar { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 1.5rem; height: var(--bar); padding: 0 var(--gut); background: rgba(11, 13, 18, 0.86); transition: opacity 0.8s var(--ease); }
.mark { display: block; color: var(--ink); flex: none; }
.mark svg { display: block; height: 1.375rem; width: auto; }
.bar nav { display: flex; gap: max(0.6rem, calc(var(--u) * 1.5)); margin-left: auto; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.bar nav a { text-decoration: none; color: var(--soft); transition: color 0.2s; padding: 0.375rem 0; position: relative; }
.bar nav a:hover { color: var(--ink); }
.bar nav a.now { color: var(--ink); }
.bar nav a.now::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.125rem; background: var(--gold); }
.motion { font-size: 0.8125rem; color: var(--soft); border: 1px solid var(--line); border-radius: 99rem; padding: 0.375rem 0.75rem; flex: none; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
.motion:hover { color: var(--ink); border-color: var(--soft); }
.btn { text-shadow: none; display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.75rem; border-radius: 0.625rem; background: var(--ink); color: #0b0d12; font-weight: 650; text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s, transform 0.5s var(--ease); }
.btn:hover { background: var(--gold); transform: translateY(-0.125rem); }
.btn.ghost { background: rgba(34, 38, 46, 0.86); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { background: rgba(58, 63, 74, 0.92); }
.btn.small { min-height: 2.375rem; padding: 0 1rem; font-size: 0.875rem; flex: none; }
.btn.big { min-height: 4rem; padding: 0 2.375rem; font-size: 1.25rem; }

/* ---------- rising words ---------- */
.kin { font-weight: 640; font-stretch: 104%; letter-spacing: -0.028em; line-height: 1.02; text-wrap: balance; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.w > span { display: inline-block; }
.js .kin .w > span { transform: translateY(112%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 42ms); }
.js .kin.in .w > span { transform: none; }
.js .rise { opacity: 0; transform: translateY(1.125rem); transition: opacity 0.9s var(--ease) 0.22s, transform 0.9s var(--ease) 0.22s; }
.js .rise.in { opacity: 1; transform: none; }
.js.calm .kin .w > span, .js.calm .rise { transform: none; opacity: 1; transition: none; }
.js.intro .hero .kin .w > span { transform: translateY(112%); }
.js.intro .hero .rise, .intro .bar { opacity: 0; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 112vh; padding: max(5.25rem, 13vh) var(--gut) 0; text-align: center; }
.hero h1 { font-size: var(--h1); font-weight: 680; }
.hero .lead { max-width: 46rem; margin: max(1rem, 2.6vh) auto 0; font-size: 1.34rem; line-height: 1.45; color: #d8dce4; }
.hero .lead strong { font-weight: 640; color: var(--ink); }
.hero .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: max(1.125rem, 3vh); }
.still { display: none; }
.no-gl .still, html:not(.js) .still { display: block; width: 100%; border-radius: 0.75rem; }
.no-gl .hero-still { margin: 3rem auto 0; max-width: 68.75rem; }

/* ---------- numbers ---------- */
.numbers { position: relative; height: 135vh; padding: 0 var(--gut); }
.stats { position: sticky; top: calc(100vh - 13.125rem); display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.125rem; width: 100%; padding: 0.875rem 1.125rem 0.75rem; background: rgba(11, 13, 18, 0.88); border-radius: 0.875rem; }
.stats li { font-size: 0.95rem; line-height: 1.25; color: #d8dce4; }
.stats strong { display: block; font-size: 3.9rem; font-weight: 620; font-stretch: 104%; letter-spacing: -0.03em; line-height: 1; color: var(--ink); margin-bottom: 0.375rem; font-variant-numeric: tabular-nums; }
.js .stats li { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .stats li.in { opacity: 1; transform: none; }
.stats li:nth-child(2) { transition-delay: 70ms; }
.stats li:nth-child(3) { transition-delay: 140ms; }
.stats li:nth-child(4) { transition-delay: 210ms; }
.stats li:nth-child(5) { transition-delay: 280ms; }

/* ---------- the film ---------- */
.film { padding: max(5.6rem, 15vh) var(--gut) max(3.75rem, 10vh); }
.film-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: end; margin-bottom: 2rem; }
.film h2 { font-size: var(--h2); }
.film-head p { color: #d8dce4; max-width: 38.75rem; }
.film-box { display: grid; grid-template-columns: minmax(0, 1fr) 15.625rem; gap: 1rem; align-items: stretch; }
.film-box video { width: 100%; height: auto; border-radius: 0.75rem; background: #000; box-shadow: 0 0 0 1px var(--line), 0 2.5rem 7.5rem rgba(0, 0, 0, 0.6); }
/* The list is as tall as the video, and it scrolls when it needs more room. */
.chapters { display: flex; flex-direction: column; gap: 0; height: 0; min-height: 100%; font-size: 0.875rem; overflow: auto; }
.chapters button { display: flex; justify-content: space-between; gap: 0.625rem; width: 100%; padding: 0.4rem 0.625rem; text-align: left; border-radius: 0.375rem; color: var(--soft); transition: background 0.15s, color 0.15s; }
.chapters button:hover { background: rgba(245, 246, 248, 0.08); color: var(--ink); }
.chapters button.now { background: rgba(227, 169, 60, 0.16); color: var(--ink); }
.chapters time { font-variant-numeric: tabular-nums; opacity: 0.7; }

/* ---------- why build with it ---------- */
.index { min-height: 118vh; display: flex; align-items: center; padding: 5.6rem var(--gut); }
.index-copy { width: max(21rem, calc(var(--u) * 34)); }
.index h2 { font-size: var(--h2); margin-bottom: 1.375rem; }
.lines { border-top: 1px solid var(--line); }
.lines a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.125rem; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 1.3rem; font-weight: 520; line-height: 1.2; transition: color 0.2s, padding 0.5s var(--ease); }
.lines a::after { content: "\2192"; opacity: 0; transform: translateX(-0.5rem); transition: opacity 0.2s, transform 0.5s var(--ease); color: var(--gold); }
.lines a:hover, .lines a:focus-visible { color: var(--gold); padding-left: 0.625rem; }
.lines a:hover::after, .lines a:focus-visible::after { opacity: 1; transform: none; }

/* ---------- the beats ---------- */
.beat { position: relative; display: flex; align-items: flex-start; height: 122vh; padding: 0 var(--gut); }
.beat.tall { height: 150vh; }
.beat.graphic { height: 135vh; }
.beat .copy { position: sticky; top: 26vh; width: max(15rem, calc(var(--u) * 29)); }
.beat[data-at="left"], .beat[data-at="tall-left"] { justify-content: flex-end; }
.beat[data-at^="tall"] .copy { width: max(20rem, calc(var(--u) * 38)); }
.beat .copy, .hero-copy, .index-copy, .trust-box, .opener .giant, .close-box { text-shadow: 0 0.06rem 1rem rgba(11, 13, 18, 0.9), 0 0 0.125rem rgba(11, 13, 18, 0.6); }
.beat h3, .beat h2 { margin-bottom: 1.125rem; }
.beat h3 { font-size: var(--h3); }
.beat h2 { font-size: var(--h2); }
.beat .copy p { color: #dfe2e8; }
.beat .copy.wide { width: max(20rem, calc(var(--u) * 42)); }
.beat .copy.over-top { width: max(24rem, calc(var(--u) * 70)); top: 12vh; }
.copy.over-top p { max-width: 47.5rem; }
.beat .copy.caption { top: calc(100vh - 9.4rem); width: max(24rem, calc(var(--u) * 62)); background: rgba(11, 13, 18, 0.88); padding: 0.75rem 1.125rem; border-radius: 0.75rem; }
.copy.caption h3 { font-size: 1.6rem; margin-bottom: 0.125rem; }
.copy.caption p { font-size: 0.94rem; line-height: 1.35; }
.opener { min-height: 118vh; display: flex; align-items: flex-start; justify-content: center; text-align: center; padding: 0 var(--gut); }
.opener .giant { position: sticky; top: 30vh; }
.giant { font-size: var(--giant); font-weight: 660; line-height: 0.96; }
.close .giant { font-size: max(2.75rem, calc(var(--u) * 7)); }
.facts { display: grid; gap: 1.125rem; }
.facts li { padding-top: 0.75rem; border-top: 1px solid var(--line); color: #dfe2e8; }
.facts strong { display: block; font-size: 1.5rem; font-weight: 620; color: var(--ink); line-height: 1.15; margin-bottom: 0.25rem; letter-spacing: -0.012em; }
.beat .copy.facts-wide { width: 100%; margin: 0 auto; top: 22vh; }
.facts.two { grid-template-columns: repeat(3, 1fr); gap: 1.625rem 2rem; background: rgba(11, 13, 18, 0.7); padding: 1.625rem; border-radius: 0.875rem; }
.plain li { padding: 0.5rem 0; border-top: 1px solid var(--line); color: #dfe2e8; line-height: 1.3; }

/* ---------- universe ---------- */
.universe { position: relative; display: flex; align-items: flex-start; height: 170vh; padding: 0 var(--gut); touch-action: pan-y; cursor: grab; }
.universe .copy { position: sticky; top: 13vh; width: max(21rem, calc(var(--u) * 34)); cursor: auto; }
.universe h2 { font-size: var(--h2); margin-bottom: 1rem; }
.universe p { color: #dfe2e8; }
.ask { display: block; width: 100%; margin-top: 1.125rem; padding: 0.625rem 0; font-size: 2.6rem; font-weight: 620; letter-spacing: -0.02em; background: transparent; border: 0; border-bottom: 0.125rem solid var(--gold); outline: none; caret-color: var(--gold); }
.ask::placeholder { color: rgba(245, 246, 248, 0.35); }
.examples { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.875rem; }
.examples button { padding: 0.3rem 0.75rem; border-radius: 99rem; box-shadow: inset 0 0 0 1px var(--line); color: var(--soft); transition: color 0.2s, box-shadow 0.2s; }
.examples button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--soft); }
.answers { margin-top: 0.875rem; display: grid; gap: 0.44rem; font-size: 0.9rem; line-height: 1.25; }
.answers strong { display: block; font-weight: 640; color: var(--gold); }
.answers span { color: var(--soft); font-family: "Cascadia Code", ui-monospace, Consolas, monospace; font-size: 0.78rem; overflow-wrap: anywhere; }
#labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.5s; }
#labels.on { opacity: 1; }
#laneLabels { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.6s; }
#laneLabels.on { opacity: 1; }
#laneLabels span { position: absolute; top: 0; left: 0; font-size: 1rem; font-weight: 620; color: var(--ink); white-space: nowrap; text-shadow: 0 0.06rem 0.625rem #000; will-change: transform; }
#laneLabels span.big { color: var(--gold); font-size: 1.3rem; }
#labels span { position: absolute; top: 0; left: 0; font-size: 0.78rem; font-weight: 560; letter-spacing: 0.01em; color: #fff; text-shadow: 0 0.06rem 0.5rem #000, 0 0 0.125rem #000; white-space: nowrap; will-change: transform; margin: 0.5rem 0 0 0.5rem; }
#labels span.big { font-size: 1rem; font-weight: 700; color: var(--gold); }
#labels span.hit { color: #0b0d12; background: var(--gold); padding: 0.125rem 0.44rem; border-radius: 0.3rem; font-weight: 640; text-shadow: none; }
.node-card { position: fixed; right: var(--gut); top: 12vh; z-index: 5; width: min(20rem, 80vw); max-height: 70vh; overflow: auto; padding: 1rem 1.125rem; background: rgba(14, 17, 22, 0.95); border-radius: 0.75rem; box-shadow: 0 0 0 1px var(--line); font-size: 0.875rem; }
.node-card[hidden] { display: none; }
.node-card h4 { font-size: 1.25rem; font-weight: 640; }
.node-card p { color: var(--soft); font-family: "Cascadia Code", ui-monospace, Consolas, monospace; font-size: 0.78rem; word-break: break-all; margin-bottom: 0.5rem; }
.node-card h5 { font-size: 0.8rem; color: var(--gold); margin: 0.625rem 0 0.2rem; font-weight: 640; }
.node-card li { line-height: 1.5; }

/* ---------- orbit ---------- */
#orbit { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.7s; }
#orbit.on { opacity: 1; }
#orbit img { position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; padding: 0.44rem; background: #f5f6f8; border-radius: 0.7rem; box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.55), 0 0 1.375rem rgba(227, 169, 60, 0.28); will-change: transform; object-fit: contain; }
.names { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 1rem; font-size: 0.875rem; color: var(--soft); }
.names li::after { content: ","; }
.names li:last-child::after { content: ""; }

/* ---------- trust ---------- */
.trust { position: relative; min-height: 118vh; padding: 5.75rem var(--gut) 3.75rem; }
.trust-box { position: sticky; top: 4.875rem; width: max(24rem, calc(var(--u) * 46)); }
.trust h2 { font-size: var(--h2); margin-bottom: 0.875rem; }
.trust p { color: #dfe2e8; }
.modes { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 1rem 0 0.75rem; }
.modes button { padding: 0.56rem 0.94rem; border-radius: 0.56rem; font-weight: 600; font-size: 0.94rem; box-shadow: inset 0 0 0 1px var(--line); color: var(--soft); background: rgba(11, 13, 18, 0.5); transition: background 0.2s, color 0.2s; }
.modes button:hover { color: var(--ink); }
.modes button[aria-pressed="true"] { background: var(--gold); color: #0b0d12; box-shadow: none; }
.matrix { width: 100%; border-collapse: collapse; font-size: 0.94rem; background: rgba(11, 13, 18, 0.76); }
.matrix th { text-align: left; font-weight: 450; padding: 0.44rem 0.625rem; color: #dfe2e8; border-top: 1px solid var(--line); }
.matrix td { text-align: right; padding: 0.44rem 0.625rem; font-weight: 640; border-top: 1px solid var(--line); white-space: nowrap; transition: color 0.3s; }
.matrix td.runs { color: var(--mint); }
.matrix td.asks { color: var(--gold); }
.matrix td.held { color: #c9b8ff; }
.matrix td.review { color: #9ec9ff; }
.note { margin-top: 0.625rem; min-height: 3em; font-size: 0.94rem; color: var(--soft) !important; }

/* ---------- connectors ---------- */
.wall-of-logos { min-height: 80vh; display: flex; align-items: center; overflow: hidden; }
.marquee { width: 100%; display: grid; gap: 1.125rem; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mrow { display: flex; gap: 1.125rem; width: max-content; animation: slide 70s linear infinite; }
.mrow.r1 { animation-direction: reverse; animation-duration: 90s; }
.mrow.r2 { animation-duration: 110s; }
.mrow img { width: 3.75rem; height: 3.75rem; padding: 0.75rem; border-radius: 0.875rem; background: #f5f6f8; object-fit: contain; flex: none; }
.calm .mrow { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- cli ---------- */
.cli { min-height: 110vh; padding: 12vh var(--gut); display: flex; align-items: center; }
.cli-box { width: 100%; max-width: 68.75rem; margin: 0 auto; }
.cli h2 { font-size: var(--h2); margin-bottom: 1.375rem; }
.term { margin-bottom: 0.75rem; border-radius: 0.75rem; background: rgba(7, 9, 12, 0.86); box-shadow: 0 0 0 1px var(--line); overflow: auto; }
.term pre { margin: 0; padding: 1.125rem 1.25rem; font-size: 1rem; line-height: 1.55; color: #e6e9ef; }
.cli p { color: #dfe2e8; max-width: 47.5rem; }

/* ---------- everything ---------- */
.everything { padding: max(5rem, 14vh) var(--gut); background: linear-gradient(rgba(11, 13, 18, 0), rgba(11, 13, 18, 0.88) 12%, rgba(11, 13, 18, 0.88) 88%, rgba(11, 13, 18, 0)); }
.every-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem 2rem; margin-bottom: 2.125rem; }
.everything h2 { font-size: var(--h2); flex: 1 1 100%; }
.find { flex: 1 1 21.25rem; max-width: 38.75rem; min-width: 0; padding: 0.75rem 1rem; font-size: 1.125rem; background: rgba(245, 246, 248, 0.07); border: 0; border-radius: 0.625rem; box-shadow: inset 0 0 0 1px var(--line); outline: none; }
.find:focus { box-shadow: inset 0 0 0 0.125rem var(--gold); }
.count { color: var(--soft); font-variant-numeric: tabular-nums; }
.groups { columns: 3; column-gap: 2.5rem; }
.groups > section { break-inside: avoid; margin-bottom: 2.125rem; }
.groups > section[hidden] { display: none; }
.groups h3 { font-size: 1.5rem; font-weight: 640; letter-spacing: -0.012em; padding-bottom: 0.5rem; border-bottom: 0.125rem solid var(--gold); margin-bottom: 0.25rem; }
.groups li { padding: 0.375rem 0; border-bottom: 1px solid var(--line); font-size: 0.97rem; line-height: 1.35; color: #dfe2e8; }
.groups li[hidden] { display: none; }

/* ---------- close ---------- */
.close { position: relative; min-height: 100vh; display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: 34vh var(--gut) 7vh; }
.close-box { max-width: 75rem; }
.close p { margin: 1.25rem auto 0; max-width: 38.75rem; color: #dfe2e8; }
.close .btn { margin-top: 1.875rem; }
.end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding: 1.375rem var(--gut) 1.75rem; font-size: 0.84rem; color: var(--soft); border-top: 1px solid var(--line); background: rgba(11, 13, 18, 0.9); }

/* ---------- a small landscape window: a tablet, a phone on its side, or a big browser zoom ---------- */
@media (max-width: 1099px) {
  .bar nav a:nth-child(n + 6) { display: none; }
  .groups { columns: 2; }
  .facts.two { grid-template-columns: repeat(2, 1fr); }
  .film-box { grid-template-columns: minmax(0, 1fr) 13rem; }
  .bar { gap: 0.875rem; }
}
@media (max-width: 899px) {
  .bar nav { display: none; }
  .motion { margin-left: auto; }
  .stats { grid-template-columns: repeat(3, 1fr); top: calc(100vh - 16rem); }
  .stats strong { font-size: 2.6rem; }
  .film-head { grid-template-columns: 1fr; gap: 0.875rem; }
  .film-box { grid-template-columns: 1fr; }
  .chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); height: auto; min-height: 0; }
}
@media (max-height: 560px) and (min-aspect-ratio: 21/20) {
  .hero { padding-top: 4.5rem; }
  .hero .lead { font-size: 1.1rem; margin-top: 0.625rem; }
  .hero .row { margin-top: 0.75rem; }
  .btn { min-height: 2.625rem; padding: 0 1.25rem; }
  .beat .copy { top: 4.5rem; }
  .beat .copy.over-top { top: 4.25rem; }
  .beat .copy.wide { width: max(20rem, calc(var(--u) * 50)); }
  .universe .copy { top: 4.25rem; }
  .ask { font-size: 1.6rem; }
  .opener .giant { top: 22vh; }
  .stats { top: calc(100vh - 8.5rem); padding: 0.5rem 0.875rem; }
  .stats li { font-size: 0.8rem; }
  .stats strong { font-size: 1.75rem; margin-bottom: 0.125rem; }
  .beat .copy.facts-wide { top: 4.25rem; }
  .facts.two { padding: 0.75rem; gap: 0.5rem 1rem; }
  .facts li { font-size: 0.88rem; line-height: 1.3; padding-top: 0.375rem; }
  .facts strong { font-size: 1.05rem; }
  .beat .copy.caption { top: calc(100vh - 7rem); }
  .copy.caption p { display: none; }
}

/* ---------- portrait: a phone or an upright tablet. The screen sits at the top of the window, and the words go under it ---------- */
@media (max-aspect-ratio: 21/20) {
  :root {
    --gut: max(1rem, 4.1vw);
    --bar: 3.4rem;
    --h1: 8.4vw;
    --h2: 8.2vw;
    --h3: 6.2vw;
    --giant: 13.5vw;
  }
  html { font-size: clamp(14px, calc(12.6px + 0.87vw), 60px); }
  body { font-size: 1rem; }
  .bar { gap: 0.625rem; }
  .bar nav { display: none; }
  .motion { margin-left: auto; padding: 0.3rem 0.625rem; font-size: 0.75rem; }
  .btn.small { min-height: 2.125rem; padding: 0 0.75rem; font-size: 0.8125rem; }
  .hero { min-height: 118vh; padding-top: calc(var(--bar) + 1.375rem); }
  .hero .lead { font-size: 1.03rem; }
  .numbers { height: auto; min-height: 110vh; padding-top: 60vh; }
  .stats { position: relative; top: 0; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; padding: 0.875rem; }
  .stats strong { font-size: 2.4rem; }
  .film-head { grid-template-columns: 1fr; gap: 0.875rem; }
  .film-box { grid-template-columns: 1fr; }
  .chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); height: auto; min-height: 0; }
  .index { display: block; min-height: 0; padding: calc(var(--shot) + 1.25rem) var(--gut) 3.75rem; }
  .index-copy { width: 100%; }
  .lines a { font-size: 1.12rem; }
  .beat { height: 132vh; }
  .beat[data-at="left"], .beat[data-at="tall-left"] { justify-content: flex-start; }
  .beat .copy, .beat .copy.wide, .beat .copy.over-top, .beat .copy.caption, .beat[data-at^="tall"] .copy { width: 100%; top: calc(var(--shot) + 0.875rem); }
  .beat.graphic { height: auto; min-height: 130vh; padding-bottom: 12vh; }
  .beat.graphic .copy { position: relative; top: 0; width: 100%; padding: calc(var(--bar) + 1.25rem) 0 1.375rem; background: linear-gradient(rgba(11, 13, 18, 0.72), rgba(11, 13, 18, 0.72) 88%, transparent); }
  .beat.graphic .copy.facts-wide { padding-top: calc(var(--bar) + 1.25rem); }
  .beat h3, .beat h2 { margin-bottom: 0.625rem; }
  .beat .copy p { font-size: 1rem; line-height: 1.45; }
  .beat .copy.caption { background: none; padding: 0; }
  .copy.caption h3 { font-size: var(--h3); }
  .copy.caption p { font-size: 1rem; }
  .facts { gap: 0.625rem; }
  .facts li { font-size: 0.94rem; line-height: 1.35; }
  .facts strong { font-size: 1.125rem; }
  .facts.two { grid-template-columns: repeat(2, 1fr); padding: 0.75rem; gap: 0.75rem 1rem; background: rgba(11, 13, 18, 0.72); }
  .universe { display: block; height: auto; min-height: 150vh; padding-top: calc(var(--bar) + 1.125rem); }
  .universe .copy { position: relative; top: 0; width: 100%; background: linear-gradient(rgba(11, 13, 18, 0.74), rgba(11, 13, 18, 0.74) 92%, transparent); padding-bottom: 1.25rem; }
  .ask { font-size: 1.625rem; }
  .trust { padding-top: calc(var(--bar) + 1rem); }
  .trust-box { position: relative; top: 0; width: 100%; background: rgba(11, 13, 18, 0.62); padding: 0.375rem; border-radius: 0.625rem; }
  .matrix { font-size: 0.875rem; }
  .matrix th, .matrix td { padding: 0.375rem 0.25rem; }
  .matrix td { white-space: normal; }
  .opener { min-height: 120vh; }
  .groups { columns: 2; }
  .close { min-height: 110vh; }
  .close .giant { font-size: 11vw; }
  .btn.big { min-height: 3.625rem; padding: 0 1.625rem; font-size: 1.125rem; }
  #orbit img { width: 2rem; height: 2rem; padding: 0.3rem; }
  .cli { padding: 8vh var(--gut); }
  .term pre { font-size: 0.8rem; padding: 0.875rem; }
}
@media (max-aspect-ratio: 21/20) and (max-width: 599px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats li:last-child { grid-column: 1 / -1; }
  .facts.two { grid-template-columns: 1fr; }
  .groups { columns: 1; }
}