/* ARC — the letter to the community.

   This is the partner deck's stylesheet (docs/partner-deck/deck.css) with the
   letter's parts in place of the deck's slides. The stage, the palette, the
   type, the reveals, the buttons and the chrome are the deck's own lines, so
   the letter is the same object: a 1920 × 1080 stage measured in rem (1rem is
   16px at that size and scales with the window), black ground, one accent
   (#FA6F43), Satoshi for words, JetBrains Mono for what a machine measured and
   Doto, a dot-matrix face (OFL), for display. Below a portrait or phone-width
   window the parts stack and flow instead. */

@font-face { font-family: "Doto"; src: url(assets/fonts/Doto-var.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Satoshi"; src: url(assets/fonts/Satoshi-var.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/JetBrainsMono-var.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --black: #000; --s0: #0A0A0A; --s1: #141414; --s2: #1A1A1A; --s3: #242424;
  --white: #F5F5F5; --wh: #EDEDEA;
  --arc: #FA6F43; --arc-ink: #1A0B05; --arc-hi: #FFA726;
  --up: #22C55E; --neg: #EF4444; --gold: #FFD700;
  --bone: #EAE7E2; --bone-2: #F1EFEB; --bone-3: #FAF9F7; --ink: #0B0B0B;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --doto: "Doto", "JetBrains Mono", ui-monospace, monospace;
  --sans: "Satoshi", "Plus Jakarta Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad-x: 5rem; --pad-t: 8rem; --pad-b: 5.25rem;
  color-scheme: dark;            /* one look on purpose: the deck is not themed by the viewer's OS */
}
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); background: #000; scroll-behavior: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-x: none; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { margin: 0; background: #000; color: var(--white); font-family: var(--mono); font-size: 1rem; line-height: 1.5; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, canvas, svg { display: block; }
button, input { font: inherit; color: inherit; }
output { display: inline; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: var(--arc); color: var(--arc-ink); }

/* ───────────────────────────── slides and themes ───────────────────────── */
.slide { position: relative; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; display: grid; place-items: center; isolation: isolate;
  --fg: #F5F5F5; --fg2: rgba(245, 245, 245, .72); --fg3: rgba(245, 245, 245, .54); --fg4: rgba(245, 245, 245, .44);
  --line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .16); --card: #0E0E0E; --card2: #151515;
  background: #000; color: var(--fg); }
.slide[data-theme="light"] {
  --fg: var(--ink); --fg2: rgba(11, 11, 11, .74); --fg3: rgba(11, 11, 11, .58); --fg4: rgba(11, 11, 11, .5);
  --line: rgba(0, 0, 0, .1); --line2: rgba(0, 0, 0, .18); --card: var(--bone-2); --card2: var(--bone-3);
  background: var(--bone); }
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.stage { position: relative; z-index: 1; width: 120rem; height: 67.5rem; padding: var(--pad-t) var(--pad-x) var(--pad-b); }
.scene-wrap { position: absolute; inset: 0; }
.scene-wrap > canvas, .scene-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-wrap > img { object-fit: cover; }
.shade { position: absolute; inset: 0; }

/* the dot field every dark slide stands on, and the pointer's light across it */
.tex { position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(255, 255, 255, .1) .06rem, transparent .075rem); background-size: 1.5rem 1.5rem; -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 42%, #000 15%, transparent 76%); mask-image: radial-gradient(ellipse 95% 85% at 50% 42%, #000 15%, transparent 76%); }
.tex::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(250, 111, 67, .95) .075rem, transparent .095rem); background-size: 1.5rem 1.5rem; -webkit-mask-image: radial-gradient(circle 17rem at var(--mx, 50%) var(--my, -40%), #000, transparent); mask-image: radial-gradient(circle 17rem at var(--mx, 50%) var(--my, -40%), #000, transparent); }

/* ─────────────────────────────── type ──────────────────────────────────── */
.doto { font-family: var(--doto); font-weight: 900; font-variation-settings: "ROND" 100; letter-spacing: -.03em; line-height: .95; font-feature-settings: "tnum"; }
.num, .doto output, .life-x .doto, .bignums b { white-space: nowrap; }
.arc { color: var(--arc); }
.dim { color: var(--fg4); }
.up { color: var(--up); } .neg, .dn { color: var(--neg); }
.eb { display: flex; align-items: center; gap: .9em; font: 500 .8125rem/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--fg3); white-space: nowrap; }
.eb b { font-weight: 500; color: var(--fg4); }
.eb-c { justify-content: center; }
.dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--arc); animation: beat 2.2s ease-in-out infinite; }
@keyframes beat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.h { font: 700 4.25rem/1.02 var(--sans); letter-spacing: -.035em; margin-top: 1.5rem; max-width: 66rem; text-wrap: balance; }
.h-xl { font-size: 4.5rem; max-width: 88rem; }
.h-s { font-size: 3rem; line-height: 1.05; max-width: 44rem; margin-top: 1.1rem; }
.hd-n .h { max-width: 44rem; }
h3 { font: 700 1.375rem/1.2 var(--sans); letter-spacing: -.015em; }
.body { font: 400 1.0625rem/1.65 var(--mono); color: var(--fg2); max-width: 38rem; }
.k { font: 500 .72rem/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fg3); }
.src { font: 400 max(.7rem, 9px)/1.4 var(--mono); color: var(--fg4); letter-spacing: .02em; }
.src a, .ticker a, .cap a, .proof a { color: var(--fg3); border-bottom: 1px dotted currentColor; }
.cap { font: 400 .7rem/1.5 var(--mono); color: var(--fg4); max-width: 30rem; }
.punch { font: 700 2.25rem/1.15 var(--sans); letter-spacing: -.025em; color: var(--fg3); }
.punch b { color: var(--fg); font-weight: 700; }
.lede { font: 400 1rem/1.7 var(--mono); color: var(--fg2); }

/* ─────────────────────────────── reveals ───────────────────────────────── */
/* On the film every reveal is scrubbed. deck.js gives each slide its build --b
   (0 → 1 as the slide arrives, from the scroll) and each revealing element its
   own start --o, so scrolling back un-builds a slide, step for step. In the
   column (phones) an element reveals once, as it comes into view. Static and
   the PDF show everything settled. --t0 keeps an element's own transform. */
.film [data-r] { --r: clamp(0, calc((var(--b, 1) - var(--o, 0)) * 4), 1); opacity: var(--r); }
.film [data-r]:not([data-r="in"]):not([data-r="scale"]) { transform: var(--t0,) translateY(calc((1 - var(--r)) * 2.2rem)); }
.film [data-r="scale"] { transform: var(--t0,) scale(calc(.95 + .05 * var(--r))); }
.flow [data-r] { opacity: 0; transform: var(--t0,) translateY(1.8rem); transition: opacity .9s var(--ease) var(--dd, 0s), transform .9s var(--ease) var(--dd, 0s); }
.flow [data-r="in"] { transform: var(--t0, none); }
.flow [data-r="scale"] { transform: var(--t0,) scale(.95); }
.flow [data-r].on { opacity: 1; transform: var(--t0, none); }
/* the dot face powers on: each letter's dots grow from pinpoints */
[data-dots] { opacity: 0; }
[data-dots].split { opacity: 1; }
[data-dots] .w { display: inline-block; white-space: nowrap; }
[data-dots] .ch { display: inline-block; }
.film [data-dots] .ch { --r: clamp(0, calc((var(--b, 1) - var(--o, 0) - var(--i) * .011) * 5), 1); opacity: var(--r); font-weight: calc(100 + 800 * var(--r)); }
.flow [data-dots] .ch { opacity: 0; font-weight: 100; transition: opacity .5s ease calc(var(--i) * 30ms), font-weight 1s var(--ease) calc(var(--i) * 30ms); }
.flow [data-dots].on .ch { opacity: 1; font-weight: 900; }
/* The face's own full stop is a five-dot cross; a decimal point should be one dot.
   And a unit beside a dot-matrix figure reads better small, in the sans. */
.dp { display: inline-block; width: .1em; height: .1em; margin: 0 .05em 0 .03em; border-radius: 50%; background: currentColor; opacity: inherit;
  overflow: hidden; line-height: 0; font-style: normal; }
/* The "." itself is still there — one pixel high, in the dot's own colour, on the dot — so the figure copies, searches and prints as 7.9, not 79. */
.dp > span { display: block; font: 1px/1px var(--mono); text-align: center; }
[data-dots] .dp { margin: 0 0 0 .1em; }
.doto .u { font: 700 .4em/1 var(--sans); font-variation-settings: normal; letter-spacing: -.01em; margin-left: .04em; }
.doto .u-pre { margin: 0 .1em 0 0; position: relative; top: -1.02em; }

/* ─────────────────────────────── buttons ───────────────────────────────── */
.btn { display: inline-flex; align-items: center; background: #0C0C0C; border-radius: .75rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.btn:hover { transform: translateY(-.1rem); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn-sq, .sq { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; margin: .125rem; border-radius: .5rem; background: var(--arc); color: var(--arc-ink); }
.btn-sq svg, .sq svg { width: 1.25rem; height: 1.25rem; transition: transform .4s var(--ease); }
.btn:hover .btn-sq svg, a:hover > .sq svg, a:hover .b-bar .sq svg { transform: translateX(.15rem); }
.btn-l { padding: .875rem 1.25rem; font: 500 1rem/1 var(--mono); color: #fff; }
.lnk { font: 500 .875rem/1 var(--mono); color: var(--fg2); border-bottom: 1px dotted currentColor; padding-bottom: .25rem; transition: color .3s; }
.lnk:hover { color: var(--fg); }
.sq { background: #000; color: #fff; }
.sq-arc { background: var(--arc); color: var(--arc-ink); }

/* ───────────────────────────── fixed chrome ────────────────────────────── */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem max(2.5rem, env(safe-area-inset-right)) 1.5rem max(2.5rem, env(safe-area-inset-left)); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav-logo svg { width: 2.2rem; height: 2.075rem; fill: var(--arc); transition: fill .3s; }
.nav-pill { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; background: #fff; border-radius: .625rem; padding: .2rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 .5rem 1.5rem -.75rem rgba(0, 0, 0, .5); }
.nav-pill a { position: relative; z-index: 1; padding: .7rem 1.3rem; font: 500 .875rem/1 var(--mono); color: rgba(0, 0, 0, .66); border-radius: .5rem; transition: color .35s; }
.nav-pill a:hover { color: #000; }
.nav-pill a.on { color: #fff; }
.nav-key { position: absolute; z-index: 0; top: .2rem; bottom: .2rem; left: 0; width: 0; border-radius: .5rem; background: #000; opacity: 0; transition: left .6s var(--ease), width .6s var(--ease), opacity .3s; }
.nav-cta { display: flex; align-items: center; background: #0C0C0C; border-radius: .625rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: box-shadow .3s; }
.nav-cta:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.nav-cta-sq { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: .125rem; border-radius: .4rem; background: rgba(255, 255, 255, .1); color: #fff; }
.nav-cta-sq svg { width: 1rem; height: 1rem; }
.nav-cta-l { padding: .65rem 1rem; font: 500 .875rem/1 var(--mono); color: #fff; }
.nav-burger { display: none; position: relative; width: 2.5rem; height: 2.5rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; }
.nav-burger svg { position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem; color: #fff; transition: all .3s ease-out; }
.nav-burger .b-x { opacity: 0; transform: rotate(-90deg) scale(.75); }
.nav[data-open] .b-menu { opacity: 0; transform: rotate(90deg) scale(.75); }
.nav[data-open] .b-x { opacity: 1; transform: none; }
.nav[data-on="light"] .nav-burger { border-color: rgba(0, 0, 0, .14); background: rgba(0, 0, 0, .06); }
.nav[data-on="light"] .nav-burger svg { color: #000; }
.nav[data-open] .nav-burger svg { color: #fff; }

.mmenu { position: fixed; inset: 0; z-index: 40; visibility: hidden; opacity: 0; transition: opacity .7s var(--ease), visibility 0s .7s; }
.mmenu[data-open] { visibility: visible; opacity: 1; transition: opacity .7s var(--ease); }
.mmenu-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .95); }
.mmenu-in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 6rem 1.5rem 2.5rem; }
.mmenu-links a { display: flex; align-items: center; justify-content: space-between; padding: 1rem; font: 500 1.5rem/1 var(--mono); color: rgba(255, 255, 255, .6); border-radius: .75rem; opacity: 0; transform: translateY(2rem); transition: all .7s var(--ease); }
.mmenu-links a svg { width: 1.25rem; height: 1.25rem; opacity: 0; }
.mmenu-links a.on { color: #fff; background: rgba(255, 255, 255, .1); }
.mmenu-links a.on svg { opacity: 1; }
.mmenu[data-open] .mmenu-links a { opacity: 1; transform: none; transition-delay: calc(150ms + var(--i, 0) * 70ms); }
.mmenu-foot { opacity: 0; transform: translateY(2rem); transition: all .7s var(--ease); }
.mmenu[data-open] .mmenu-foot { opacity: 1; transform: none; transition-delay: 550ms; }
.mmenu-cta { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: 1rem; border-radius: .75rem; background: #fff; color: #000; font: 500 1.125rem/1 var(--mono); }
.mmenu-cta svg { width: 1.1rem; height: 1.1rem; }
.mmenu-cta:active { transform: scale(.98); }
.mmenu-foot p { margin-top: 1rem; text-align: center; font-size: .75rem; color: rgba(255, 255, 255, .3); }

.hud { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: 3.4rem; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem .35rem; pointer-events: none; font: 500 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); transition: color .3s; }
.hud[data-on="light"] { color: rgba(0, 0, 0, .42); }
.hud-keys { position: absolute; left: 50%; transform: translateX(-50%); letter-spacing: .12em; transition: opacity .6s; }
.hud-keys kbd { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; margin: 0 .15rem; padding: 0 .25rem; border-radius: .25rem; border: 1px solid currentColor; font: inherit; letter-spacing: 0; opacity: .8; }
.hud.moved .hud-keys { opacity: 0; }
.hud-n { display: flex; align-items: baseline; gap: .35rem; font-size: 1.25rem; letter-spacing: 0; color: rgba(255, 255, 255, .5); }
.hud-n b { font-weight: 900; color: #fff; }
.hud-n i { font-style: normal; opacity: .5; }
.hud[data-on="light"] .hud-n { color: rgba(0, 0, 0, .5); }
.hud[data-on="light"] .hud-n b { color: #000; }
.hud-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .08); }
.hud[data-on="light"] .hud-bar { background: rgba(0, 0, 0, .08); }
.hud-bar i { display: block; height: 100%; width: 0; background: var(--arc); transition: width .7s var(--ease); }

/* a slide's own note: a disclaimer on screen, a full footer on the page */
.pf { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 120rem; max-width: 100%; transform: translateX(-50%); padding: 0 var(--pad-x) 3.55rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; font: 400 max(.68rem, 9px)/1.45 var(--mono); color: var(--fg4); pointer-events: none; }
.pf > span:first-child { display: none; }
.pf-n { max-width: 76rem; }

/* film grain over everything on screen; never on paper */
.grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
html.static .grain { display: none; }

/* a slide that is off screen rests: nothing on it animates */
.scrub .slide:not(.vis) *, .scrub .slide:not(.vis) *::before, .scrub .slide:not(.vis) *::after { animation-play-state: paused !important; }

/* ─────────────────────────────── splash ────────────────────────────────── */
.splash { position: fixed; inset: 0; z-index: 9999; transition: opacity .4s; background: #000; }
.splash canvas { width: 100%; height: 100%; }
.splash.live { background: transparent; }
.splash.fading { opacity: 0; pointer-events: none; }
.splash.gone { display: none; }

/* ═════════════════════════════ the opening and the close (the deck's hero) ═ */
.hero-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 55%, rgba(0, 0, 0, .6) 100%), linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 22%), linear-gradient(to top, rgba(0, 0, 0, .82) 4%, transparent 30%); pointer-events: none; }
.s-hero .stage { display: flex; flex-direction: column; align-items: center; }
.hero-top { margin-top: 5.5rem; text-align: center; }
.hero-h { margin-top: 3.2rem; font-size: 9.6rem; letter-spacing: -.045em; line-height: .9; }
.hero-bot { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 6.4rem; display: flex; align-items: flex-end; justify-content: flex-end; gap: 3rem; }
.hero-bot .lede { max-width: 31rem; }
.hero-cta { display: flex; align-items: center; gap: 2rem; }
.hero-data { margin-top: 1.1rem; max-width: 31rem; font: 400 .68rem/1.5 var(--mono); color: rgba(255, 255, 255, .36); }

/* ═════════════════════════════ the real UI, huge (the deck's desk slide) ═══ */
.shot3d { position: absolute; top: 50%; left: 50%; width: 120rem; height: 67.5rem; transform: translate(-50%, -50%); perspective: 110rem; perspective-origin: 30% 50%; }
.shot { position: absolute; left: 49rem; top: 5.5rem; width: 100rem; height: 62.5rem; background-size: cover; background-position: 0 0; border-radius: 1rem; transform-origin: 0 50%; transform: rotateY(-24deg) rotateX(7deg) rotateZ(-1.2deg); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.shot-blur { filter: blur(.45rem) brightness(.72); -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); }
.shot-sharp { -webkit-mask-image: radial-gradient(ellipse 46% 60% at 22% 42%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 46% 60% at 22% 42%, #000 45%, transparent 100%); box-shadow: none; }
.shot { transform: rotateY(calc(-24deg + var(--ry, 0deg))) rotateX(calc(7deg + var(--rx, 0deg))) rotateZ(-1.2deg); transition: transform 1.2s var(--ease); }
.scrub .shot { transform: rotateY(calc(-26deg + var(--ry, 0deg) + var(--p, .5) * 6deg)) rotateX(calc(8deg + var(--rx, 0deg) - var(--p, .5) * 2.5deg)) rotateZ(-1.2deg); transition: none; }
.shade-l { background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .92) 30%, rgba(0, 0, 0, 0) 56%), linear-gradient(to top, #000 2%, transparent 26%); }
.punch-l { position: absolute; left: var(--pad-x); bottom: 6.6rem; }
.cap-r { position: absolute; right: var(--pad-x); bottom: 6.6rem; text-align: right; max-width: 24rem; }
.shot3d-desk { perspective-origin: 60% 40%; }
.shot3d-desk .shot { left: 45rem; top: 12rem; width: 104rem; height: 65rem; transform: rotateY(calc(-20deg + var(--ry, 0deg))) rotateX(calc(10deg + var(--rx, 0deg))) rotateZ(-2deg); }
.scrub .shot3d-desk .shot { transform: rotateY(calc(-23deg + var(--ry, 0deg) + var(--p, .5) * 7deg)) rotateX(calc(11deg + var(--rx, 0deg) - var(--p, .5) * 3deg)) rotateZ(calc(-2.4deg + var(--p, .5) * .8deg)); }
.shot3d-desk .shot-sharp { -webkit-mask-image: radial-gradient(ellipse 52% 58% at 30% 36%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 52% 58% at 30% 36%, #000 45%, transparent 100%); }
.shade-desk { background: linear-gradient(to right, #000 0%, #000 33%, rgba(0, 0, 0, 0) 60%), linear-gradient(to top, #000 4%, transparent 30%); }
.facts { margin-top: 2.4rem; width: 38rem; display: grid; gap: .95rem; }
.facts li { padding-top: 1rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 13rem 1fr; gap: 1.5rem; }
.facts h3 { font-size: 1.1rem; }
.facts p { font: 400 .86rem/1.55 var(--mono); color: var(--fg3); }
.facts a { color: var(--fg3); border-bottom: 1px dotted currentColor; }

/* ═════════════════════════════ the close (the deck's) ══════════════════════ */
/* ═════════════════════════════ 20 · close ══════════════════════════════════ */
.s-close .stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.close-mark { margin-top: 4.4rem; width: 4.4rem; height: 4.15rem; fill: var(--arc); }
.close-h { margin-top: 2.6rem; font-size: 7.6rem; letter-spacing: -.045em; line-height: .92; }
.close-row { margin-top: 3.2rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.close-url { font: 700 2rem/1 var(--sans); letter-spacing: -.02em; border-bottom: 2px solid var(--arc); padding-bottom: .4rem; }
.close-who { font: 400 1rem/1.5 var(--mono); color: var(--fg2); }
.close-who:empty { display: none; }
.close-cta { margin-top: 2.4rem; display: flex; align-items: center; gap: 2rem; }
.legal { position: absolute; left: 50%; bottom: 5.4rem; transform: translateX(-50%); width: 68rem; font: 400 max(.68rem, 9px)/1.6 var(--mono); color: rgba(255, 255, 255, .55); }
/* over the terrain the small print sits on a plate of dark glass, so the land never runs through it */
html.gl .legal { padding: .9rem 1.4rem; border-radius: .75rem; background: rgba(0, 0, 0, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .6); }
html.gl .legal { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.film .legal { width: 72rem; }

/* a canvas or a film, once it has been turned into a still (the PDF, reduced motion) */
.cvs, .vid { position: absolute; inset: 0; width: 100%; height: 100%; }
.vid { object-fit: cover; }

/* the head of the price line on the horizon: its light, and the number it stands for */
.h-glow { position: absolute; left: 0; top: 0; width: 46rem; height: 46rem; margin: -23rem 0 0 -23rem; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(255, 226, 206, .95) 0, rgba(250, 111, 67, .6) 1.6%, rgba(250, 111, 67, .2) 9%, rgba(250, 111, 67, .07) 26%, transparent 58%);
  transform: translate(var(--hx, 50vw), var(--hy, 50vh)) scale(var(--hs, 1)); opacity: var(--ho, 0); }
.h-tag { position: absolute; left: 0; top: 0; pointer-events: none; opacity: var(--to, 0); transform: translate(var(--tx, 0px), calc(var(--hy, 0px) - 3.2rem)); padding-left: .8rem; border-left: 1px solid rgba(250, 111, 67, .7); white-space: nowrap; }
.h-tag.flip { padding: 0 .8rem 0 0; border-left: 0; border-right: 1px solid rgba(250, 111, 67, .7); text-align: right; }
.h-tag b { display: block; font: 600 .82rem/1 var(--mono); letter-spacing: .1em; color: #fff; }
.h-tag span { display: block; margin-top: .4rem; font: 500 .6rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--arc); }

.nav[data-on="light"] .nav-pill { box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 .5rem 1.5rem -.9rem rgba(0, 0, 0, .25); }

/* ═════════════════════════════ the field, the film, the column ═════════════
   The field is one canvas behind every slide (scenes/field.js). Where it runs
   (html.gl) a dark slide is glass over it; a light slide stays paper.
   The film (landscape): every slide is fixed on one stage and the scroll is the
   running time. deck.js gives each slide --e (arriving, 0 → 1), --x (leaving,
   0 → 1), --p (its own story, 0 → 1) and --b (its build), and the stage --so
   (opacity), --ty (rise, in vh) and --sc (scale). A light slide arrives and
   leaves as a sheet of paper, by --ly (vh). The column (portrait, phones): the
   slides flow, and the same --p comes from where each one stands in the window. */
#fieldWrap { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#deck { position: relative; z-index: 1; }
html.gl .slide:not([data-theme="light"]) { background: transparent; }
html.gl .tex { display: none; }
.nogl-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.gl .nogl-still { display: none; }
html:not(.gl) #fieldWrap { display: none; }

.film .slide { position: fixed; inset: 0; width: 100%; height: 100vh; visibility: hidden; contain: layout paint; z-index: 2; }
.film .slide.vis { visibility: visible; }
.film .slide[data-theme="light"] { z-index: 3; transform: translate3d(0, calc(var(--ly, 0) * 1vh), 0); box-shadow: 0 -1.5rem 4rem -1rem rgba(0, 0, 0, .6), 0 1.5rem 4rem -1rem rgba(0, 0, 0, .6); }
.film .slide > .stage { opacity: var(--so, 1); transform: translate3d(0, calc(var(--ty, 0) * 1vh), 0) scale(var(--sc, 1)); }
.film .slide > .bg, .film .slide > .pf { opacity: var(--so, 1); }
.film .slide:not(.here) { pointer-events: none; }
.film .slide.vis > .stage { will-change: opacity, transform; }
#track { pointer-events: none; }

/* the price's head and its tag ride above the field, below the slides */
#fieldWrap .h-glow { mix-blend-mode: screen; }

/* ═════════════════════════════ reduced motion / static ═════════════════════ */
html.static [data-r], html.static [data-dots], html.static [data-dots] .ch { opacity: 1 !important; animation: none !important; }
html.static .dot { animation: none; }
/* a deck whose script never started (index.html's fallback): every slide shown, settled */
html.nojs .splash { display: none !important; }
html.nojs [data-r], html.nojs [data-dots], html.nojs [data-dots] .ch { opacity: 1 !important; animation: none !important; }
/* ═════════════════════════════════════════════════════════════════════════════
   The letter's own parts. Everything above this line is the partner deck's
   stylesheet, taken as it is; everything below is new, and only lays out the
   letter's twelve parts on the same stage with the same type.
   ═════════════════════════════════════════════════════════════════════════ */
.col-l { position: absolute; left: var(--pad-x); top: var(--pad-t); width: 58rem; }
.col-l .h { margin-top: 0; }
.col-l .body { margin-top: 2.2rem; max-width: 47rem; font-size: 1.2rem; }
.col-l .body + .body { margin-top: 1.4rem; }
.body b, .lede b { color: var(--fg); font-weight: 500; }
.punch-xl { font-size: 3.4rem; line-height: 1.08; letter-spacing: -.03em; color: var(--fg); }
.note { font: 400 .78rem/1.5 var(--mono); color: var(--fg4); }
.shade-read { background: linear-gradient(to right, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, 0) 68%); }
.shade-all { background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0, 0, 0, .62) 30%, rgba(0, 0, 0, .25) 100%); }

/* 00 · the opening */
.hero-k { font: 500 1rem/1.5 var(--mono); color: var(--fg3); }
.ph { display: none; }
.hero-h .q { color: var(--fg3); }
.hero-sub { margin: 2.6rem auto 0; max-width: 50rem; font: 400 1.15rem/1.6 var(--mono); color: var(--fg2); text-align: center; }
.cue { position: absolute; left: 50%; bottom: 6.2rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .9rem; font: 500 .8rem/1 var(--mono); color: var(--fg3); }
.film .cue { --t0: translateX(-50%); }
.cue svg { width: 1.3rem; height: 1.3rem; transform: rotate(90deg); color: var(--arc); animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: rotate(90deg) translateX(0); opacity: 1; } 50% { transform: rotate(90deg) translateX(.35rem); opacity: .45; } }

/* 01 · the silence: a dot a day, across the whole stage */
.days { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 29.5rem; height: 18.4rem; }
.days canvas, .band canvas, .days .cvs, .band .cvs { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-k { position: absolute; left: var(--pad-x); right: var(--pad-x); display: flex; align-items: baseline; justify-content: space-between; gap: 3rem; font: 400 1rem/1.5 var(--mono); color: var(--fg3); }
.band-k .fig { display: flex; align-items: baseline; gap: .9rem; white-space: nowrap; }
.band-k .fig b { font-size: 3.4rem; color: var(--fg); }
.s-sil .band-k { top: 49.6rem; }

/* 02 · what happened */
.s-lost .punch-l { bottom: 7.2rem; }

/* 03 · the rebuild: the mark stands in its slot, and the three futures arrive one at a time */
.mark-slot { position: absolute; right: 8.5rem; top: 10.5rem; width: 42rem; height: 43rem; pointer-events: none; }
.nogl-mark { position: absolute; inset: 12% 10%; width: 80%; height: 76%; fill: var(--arc); }
html.gl .nogl-mark { display: none; }
.futures { position: absolute; left: var(--pad-x); bottom: 7rem; display: grid; gap: .5rem; }
.futures li { font: 700 3.4rem/1.08 var(--sans); letter-spacing: -.03em; color: var(--fg); }
.futures .arc { color: var(--arc); }
.scrub .futures li { opacity: clamp(.16, calc((var(--p, 1) * 6 - 1.5 - var(--k, 0)) * 1.5), 1); }

/* 04 · the terminal */
.s-term .body { margin-top: 2rem; max-width: 36rem; font-size: 1.15rem; }
.facts-w { width: 46rem; margin-top: 2.6rem; }
.facts-w li { grid-template-columns: 14rem 1fr; padding-top: 1.2rem; }
.facts-w h3 { font-size: 1.3rem; }
.facts-w p { font-size: 1rem; color: var(--fg2); }
.s-term .facts-w { width: 39rem; }
.s-term .facts-w li { grid-template-columns: 12.5rem 1fr; }

/* 05 · the facility: twenty-five dots and the loop they travel */
.s-fac .col-l { width: 60rem; }
.s-fac .facts-w { width: 56rem; }
.loop { position: absolute; right: 10.5rem; top: 12.5rem; width: 40rem; height: 40rem; }
.loop canvas, .loop .cvs { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop span { position: absolute; left: 50%; top: 50%; width: 9rem; margin: -.6rem 0 0 -4.5rem; text-align: center; font: 600 .9rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); transform: rotate(var(--a)) translateX(var(--rr, 18.2rem)) rotate(calc(-1 * var(--a))); }
.loop .side { --rr: 20.9rem; }
.scrub .loop span { opacity: clamp(.32, calc((var(--p, 1) * 5.4 - .9 - var(--k, 0)) * 1.4 + .32), 1); }
.loop-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 4.6rem); display: grid; justify-items: center; gap: .45rem; white-space: nowrap; }
.loop-c b { font-size: 2.3rem; color: var(--fg); }
.loop-c i { font: 500 .8rem/1 var(--mono); font-style: normal; color: var(--fg3); }

/* 06 · the points: the count, and every hundred accounts a dot */
.count { position: absolute; left: var(--pad-x); top: 15.2rem; display: flex; align-items: baseline; gap: 1.6rem; white-space: nowrap; }
.count b { font-size: 11.6rem; letter-spacing: -.05em; color: var(--arc); }
.count span { font: 700 1.6rem/1.2 var(--sans); letter-spacing: -.02em; color: var(--fg2); }
.band { position: absolute; left: var(--pad-x); right: var(--pad-x); height: 10rem; }
.s-pts .band { top: 30.4rem; }
.s-pts .band-k { top: 41.6rem; }
.s-pts .body-b { position: absolute; left: var(--pad-x); top: 49rem; max-width: 62rem; font-size: 1.2rem; }

/* 07 · what they unlock: five things, each with its nine dots */
.five { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 24.5rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.6rem; }
.five li { padding-top: 2rem; border-top: 1px solid var(--line2); }
.five h3 { margin-top: 2.4rem; font-size: 1.9rem; }
.five p { margin-top: 1rem; font: 400 1.1rem/1.6 var(--mono); color: var(--fg2); }
.nine { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; width: 7.4rem; height: 7.4rem; }
.nine i { border-radius: 50%; background: var(--fg); opacity: .14; transform: scale(.55); }
.nine i.on { opacity: 1; transform: scale(1); }
.scrub .five li { --c: clamp(0, calc((var(--p, 1) * 7 - 1.1 - var(--k, 0)) * 1.6), 1); }
.scrub .nine i.on { opacity: calc(.14 + .86 * var(--c)); transform: scale(calc(.55 + .45 * var(--c))); }
.scrub .five li:last-child .nine i.on { background: color-mix(in srgb, var(--arc) calc(var(--c) * 100%), var(--fg)); }
.five li:last-child .nine i.on { background: var(--arc); }
.s-unl .note { position: absolute; left: var(--pad-x); top: 50.5rem; max-width: 60rem; }

/* 08 · people, not bots: the same dots, sorted */
.s-ppl .lead { position: absolute; left: var(--pad-x); top: 14.4rem; max-width: 66rem; font-size: 1.2rem; }
.s-ppl .band { top: 23.4rem; }
.s-ppl .band-k { top: 34.8rem; }
.ppl-b { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 42rem; display: grid; grid-template-columns: 50rem 1fr; gap: 6rem; }
.ppl-b .lede { font-size: 1.2rem; color: var(--fg2); }
.ppl-b .lede + .lede { margin-top: 1.2rem; }
.two { counter-reset: s; margin-top: 1.2rem; }
.two li { counter-increment: s; display: grid; grid-template-columns: 3.6rem 1fr; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid var(--line); }
.two li::before { content: counter(s); font: 900 2.1rem/1 var(--doto); font-variation-settings: "ROND" 100; color: var(--arc); }
.two strong { font: 700 1.5rem/1.3 var(--sans); letter-spacing: -.015em; color: var(--fg); }
.two span { margin-left: .9rem; font: 400 1rem/1.5 var(--mono); color: var(--fg3); }

/* 09 · right now: where the rollout stands, and four things under it */
.rollout { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 24rem; height: 7rem; }
.rollout::before { content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: .3rem; background-image: radial-gradient(circle at center, rgba(255, 255, 255, .3) .1rem, transparent .12rem); background-size: 1.1rem .3rem; }
.rollout li { position: absolute; top: 0; display: grid; gap: 1.1rem; }
.rollout li:nth-child(1) { left: 0; } .rollout li:nth-child(2) { left: 50%; transform: translateX(-50%); justify-items: center; text-align: center; } .rollout li:nth-child(3) { right: 0; justify-items: end; text-align: right; }
.rollout i { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 2px var(--fg3); }
.rollout .now i { background: var(--arc); box-shadow: 0 0 0 .45rem rgba(250, 111, 67, .16); animation: beat 2.2s ease-in-out infinite; }
.rollout b { font: 700 1.5rem/1.1 var(--sans); letter-spacing: -.02em; color: var(--fg3); }
.rollout span { font: 400 .9rem/1 var(--mono); color: var(--fg4); margin-top: -.5rem; }
.rollout .now b { color: var(--fg); } .rollout .now span { color: var(--arc); }
.rollout .done i { background: var(--arc); box-shadow: inset 0 0 0 2px var(--arc); } .rollout .done b { color: var(--fg); } .rollout .done span { color: var(--fg3); }
.four { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 37.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; }
.four li { padding-top: 1.3rem; border-top: 1px solid var(--line2); }
.four h3 { font-size: 1.6rem; }
.four p { margin-top: .9rem; font: 400 1.08rem/1.6 var(--mono); color: var(--fg2); }
.weeks { display: grid; grid-template-columns: repeat(7, .7rem); gap: .42rem; margin-top: 1.3rem; }
.weeks i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--fg); opacity: .16; }
.scrub .weeks i { opacity: clamp(.16, calc((var(--p, 1) * 44 - 9 - var(--i)) * .6), 1); }

/* 10 · the roadmap: the words stand over the horizon */
.s-road .stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s-road .h { margin-top: 3.4rem; max-width: 70rem; }
.s-road .body { margin-top: 2rem; max-width: 52rem; font-size: 1.2rem; text-align: center; }

/* 11 · the close */
.s-close .close-mark { margin-top: 1.2rem; }
.s-close .close-h { font-size: 6.6rem; margin-top: 2.2rem; }
.close-p { margin-top: 2.2rem; max-width: 60rem; font: 400 1.15rem/1.65 var(--mono); color: var(--fg2); }
.close-cta .btn small { display: block; margin-top: .45rem; font: 400 .72rem/1 var(--mono); color: var(--fg3); }
.close-cta .btn-l { padding: .8rem 1.4rem .8rem 1.1rem; text-align: left; }
.sign { margin-top: 2.2rem; font: 400 1.05rem/1.6 var(--mono); color: var(--fg2); }
.sign b { display: block; font: 700 1.6rem/1.3 var(--sans); letter-spacing: -.02em; color: var(--fg); }
.s-close .legal { bottom: 4.6rem; }
.film .s-close .legal { --t0: translateX(-50%); }

/* reduced motion, and a page whose script never started */
html.static .cue svg, html.static .rollout .now i { animation: none; }
html.static .slide, html.nojs .slide { height: auto; min-height: 100vh; }

/* ═════════════════════════════ phones and portrait windows ═════════════════
   The deck's own column rules, then the letter's parts laid out in it. */
@media (max-aspect-ratio: 1/1), (max-width: 760px), (max-height: 500px) {
  html { font-size: clamp(14px, calc(100vw / 27), 20px); }
  :root { --pad-x: 1.25rem; --pad-t: 6rem; --pad-b: 4rem; }
  .slide { height: auto; min-height: 100svh; display: block; }
  .stage { width: 100%; height: auto; min-height: 100svh; padding: var(--pad-t) var(--pad-x) var(--pad-b); display: flex; flex-direction: column; gap: 1.6rem; --pad-t: 6rem; }
  .nav { padding: max(1rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) 1rem max(1.25rem, env(safe-area-inset-left)); } .nav-pill, .nav-cta { display: none; } .nav-burger { display: block; width: 2.9rem; height: 2.9rem; }
  .ph { display: inline; }
  .grain { display: none; }
  .hud { display: none; }
  .pf { position: static; transform: none; width: auto; padding: 0 var(--pad-x) 2rem; margin-top: -2rem; font-size: .76rem; }
  .h, .h-xl { font-size: 2.3rem; max-width: none; }
  .punch { font-size: 1.5rem; }
  .slide :is(.stage > *, .hero-bot, .col-l, .days, .band, .band-k, .mark-slot, .futures, .loop, .count, .five, .ppl-b, .rollout, .four, .legal, .body-b, .lead, .note, .punch-l)
    { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; transform: none; }
  .s-hero .stage, .s-close .stage { justify-content: center; }
  .s-road .stage { justify-content: flex-start; padding-top: 8rem; }
  /* the land runs behind these words here, so it is held further back */
  .s-road .hero-vig, .s-close .hero-vig { background: rgba(0, 0, 0, .58); }
  .hero-top { margin-top: 2rem; } .hero-h { font-size: 2.95rem; margin-top: 1.6rem; line-height: 1; }
  .hero-sub { font-size: 1rem; margin-top: 1.6rem; }
  .cue { display: none; }
  .col-l .body, .s-term .body, .s-pts .body-b, .s-ppl .lead, .s-road .body { font-size: 1.05rem; max-width: none; margin-top: 1.4rem; }
  .punch-xl { font-size: 2rem; }
  .slide .days { height: 17rem; }
  .band-k { flex-direction: column; align-items: flex-start; gap: .7rem; font-size: .9rem; }
  .band-k .fig b { font-size: 2.4rem; }
  .slide .band { height: 22rem; }
  /* the mark cannot be aimed at a slot on a column, so it is drawn in it instead */
  .slide .mark-slot { height: 18rem; order: -1; }
  html.gl .nogl-mark { display: block; inset: 4% 22%; width: 56%; height: 92%; }
  .futures li { font-size: 1.9rem; }
  /* the tilted desk needs width it does not have here: it shows its screen, flat */
  .s-term { display: flex; flex-direction: column; }
  .s-term .bg { position: relative; order: 2; width: 100%; align-self: stretch; padding: 0 var(--pad-x) 3rem; }
  .s-term .stage { order: 1; min-height: 0; padding-bottom: 2rem; }
  .s-term .pf { order: 3; margin-top: 0; }
  .shot3d, .shot3d-desk { position: relative; top: auto; left: auto; transform: none; width: 100%; height: auto; perspective: none; }
  .shot, .shot3d-desk .shot, .slide .shot3d .shot { position: relative; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1600 / 1000; transform: none; border-radius: .6rem; }
  .slide .shot3d .shot-blur { position: absolute; }
  .shot-blur, .shade-desk { display: none; }
  .shot-sharp, .shot3d-desk .shot-sharp { -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 0 1px var(--line2); }
  .facts, .slide .facts-w { width: auto; margin-top: 0; } .facts li, .slide .facts-w li { grid-template-columns: 1fr; gap: .4rem; }
  .slide .loop { width: 20rem; height: 20rem; margin: 2.8rem auto 3.2rem; }
  .loop span { --rr: 9.5rem; font-size: .66rem; width: 7rem; margin-left: -3.5rem; }
  .loop .side { --rr: 10.1rem; width: 4.6rem; margin-left: -2.3rem; }
  .loop-c { transform: translate(-50%, 2.5rem); } .loop-c b { font-size: 1.4rem; } .loop-c i { font-size: .7rem; }
  .count { flex-direction: column; align-items: flex-start; gap: .6rem; } .count b { font-size: 3.05rem; } .count span { font-size: 1.1rem; } .count span br { display: none; }
  .five, .four, .ppl-b { grid-template-columns: 1fr; gap: 1.6rem; }
  .five h3 { margin-top: 1.1rem; } .nine { width: 3.6rem; height: 3.6rem; gap: .35rem; }
  .two span { display: block; margin: .2rem 0 0; }
  .slide .rollout { height: auto; display: grid; gap: 1.4rem; }
  .rollout::before { display: none; }
  .slide .rollout li { position: static; transform: none; display: grid; grid-template-columns: 1.4rem 1fr auto; align-items: center; justify-items: start; text-align: left; gap: 1rem; }
  .rollout span { margin: 0; } .rollout b { font-size: 1.25rem; }
  .s-close .close-h { font-size: 2.5rem; line-height: 1; margin-top: 1.6rem; }
  .close-h br { display: none; }
  .close-mark { margin-top: 0; } .close-p { font-size: 1rem; } .close-cta { flex-direction: column; gap: 1rem; margin-top: 1.6rem; }
  .legal { width: auto; margin-top: 2rem; font-size: .76rem; }
  .hov { display: none; }
}

/* a second button is quiet: one orange square to a row */
.btn-sq-q { background: rgba(255, 255, 255, .1); color: #fff; }
.col-w { width: 100rem; }
@media (hover: none) { .hov { display: none; } }

/* ═════════════════════════════ the film on a phone ══════════════════════════
   An upright phone gets the film as well (html.port): every part is pinned and
   scrubbed on a tall stage, laid out by the column rules above. A part with
   more to read than the window holds is scrolled through where it stands
   (--pan, in pixels, from letter.js) before the next one comes. */
html.port .slide { height: 100vh; height: 100lvh; min-height: 0; }
html.port .slide > .stage, html.port .slide > .pf, html.port .s-term > .bg { transform: translate3d(0, calc(var(--ty, 0) * 1vh - var(--pan, 0) * 1px), 0); }
html.port .s-term > .bg, html.port .slide > .pf { opacity: var(--so, 1); }
/* words scrolled up under the mark and the menu fade out there, and never run behind them */
html.port .nav::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 6.2rem; background: linear-gradient(to bottom, #000 40%, rgba(0, 0, 0, .8) 64%, transparent); pointer-events: none; }
html.port .hud { display: block; height: 3px; padding: 0; }
html.port .hud > :not(.hud-bar) { display: none; }
html.port .cue { display: grid; position: absolute; left: 50%; top: auto; bottom: 2.6rem; }
html.gl.port .nogl-mark { display: none; }
/* the apology stands at the foot of its screen */
html.port .s-lost .punch-l { margin-top: auto; }
/* the real desk sits under its three rows, flat, and the part is as tall as both together */
html.port .s-term > * { flex-shrink: 0; }
html.port .s-close .hero-vig { background: rgba(0, 0, 0, .68); }

/* ═════════════════════════════ the film ═════════════════════════════════════
   `?film` is the letter played for a screen nobody is scrolling: the same
   stage, parts, field and scenes, with the chrome gone, the paragraphs put
   away and one line said large in their place, because a film is watched small
   and once. letter.js gives each part its time on screen (data-cine, seconds)
   and scripts/render-community-letter-film.mjs steps it into an mp4. */
.cine-l, .cine-s, .cine-url { display: none; }
html.cine, html.cine body { overflow: hidden; cursor: none; }
html.cine .nav, html.cine .mmenu, html.cine .hud, html.cine .cue, html.cine .splash, html.cine #track { display: none !important; }
html.cine .col-l .body, html.cine .s-term .body, html.cine .body-b, html.cine .lead, html.cine .facts p, html.cine .five p, html.cine .four p, html.cine .ppl-b .lede,
html.cine .two span, html.cine .close-p, html.cine .close-cta, html.cine .band-k > span:not(.fig), html.cine .s-road .body { display: none; }
html.cine .cine-l { display: block; margin-top: 2.6rem; max-width: 66rem; font: 500 3rem/1.22 var(--sans); letter-spacing: -.022em; color: var(--fg2); text-wrap: balance; }
html.cine .cine-l b { color: var(--fg); font-weight: 700; }
html.cine .cine-s { display: block; font: 500 2.1rem/1.25 var(--sans); letter-spacing: -.018em; color: var(--fg2); }
html.cine .h { font-size: 5.6rem; line-height: 1; max-width: 74rem; }
html.cine .h-xl { font-size: 5.4rem; max-width: 104rem; }
html.cine .col-l { top: 7rem; width: 76rem; }
html.cine .col-w { width: 106rem; }
html.cine .pf { padding-bottom: 2.4rem; font-size: 1.05rem; }
.veil { position: fixed; inset: 0; z-index: 9998; background: #000; pointer-events: none; }
.film-bar { position: fixed; z-index: 9999; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .1); }
.film-bar i { display: block; height: 100%; width: 0; background: var(--arc); }
/* 00 */
html.cine .hero-top { margin-top: 6.4rem; }
html.cine .hero-k { font-size: 1.7rem; }
html.cine .hero-h { font-size: 11.4rem; margin-top: 3.8rem; }
html.cine .hero-sub { max-width: 76rem; margin-top: 3.6rem; font: 500 2.5rem/1.3 var(--sans); letter-spacing: -.02em; }
/* 01 */
html.cine .days { top: 31.5rem; height: 20rem; }
html.cine .band-k { justify-content: flex-end; }
html.cine .s-sil .band-k { top: 53.4rem; }
html.cine .band-k .fig { gap: 1.4rem; font: 500 2rem/1 var(--sans); letter-spacing: -.015em; color: var(--fg2); }
html.cine .band-k .fig b { font-size: 6rem; }
/* 02 */
html.cine .s-lost .cine-l { max-width: 62rem; }
html.cine .punch-xl { font-size: 5.6rem; }
html.cine .s-lost .punch-l { bottom: 7rem; }
/* 03 */
html.cine .s-reb .col-l { width: 58rem; }
html.cine .s-reb .cine-l { max-width: 54rem; }
html.cine .futures { bottom: 6rem; gap: .3rem; }
html.cine .futures li { font-size: 4.2rem; }
html.cine .mark-slot { right: 6rem; top: 8rem; width: 46rem; height: 50rem; }
/* 04 */
html.cine .s-term .stage { padding-top: 7rem; }
html.cine .hd-n .h { max-width: 46rem; }
html.cine .s-term .cine-l { max-width: 41rem; margin-top: 2.2rem; font-size: 2.6rem; }
html.cine .s-term .facts-w { width: 44rem; margin-top: 2.8rem; }
html.cine .s-term .facts-w li { grid-template-columns: 1fr; gap: .5rem; padding-top: 1.4rem; }
html.cine .facts-w h3 { font-size: 2.3rem; }
html.cine .shade-desk { background: linear-gradient(to right, #000 0%, #000 37%, rgba(0, 0, 0, 0) 62%), linear-gradient(to top, #000 4%, transparent 30%); }
/* 05 */
html.cine .s-fac .col-l { width: 60rem; }
html.cine .s-fac .facts-w { width: 54rem; margin-top: 3.4rem; }
html.cine .s-fac .facts-w li { grid-template-columns: 16rem 1fr; gap: 2rem; padding-top: 1.6rem; align-items: baseline; }
html.cine .loop { right: 9rem; top: 11rem; width: 44rem; height: 44rem; }
html.cine .loop span { --rr: 19.4rem; width: 12rem; margin-left: -6rem; font-size: 1.15rem; }
html.cine .loop .side { --rr: 21rem; width: 8rem; margin-left: -4rem; }
html.cine .loop-c { transform: translate(-50%, 5.2rem); } html.cine .loop-c b { font-size: 3rem; } html.cine .loop-c i { font-size: 1.1rem; }
/* 06 */
html.cine .count { top: 15.5rem; } html.cine .count b { font-size: 13rem; } html.cine .count span { font-size: 2.2rem; }
html.cine .s-pts .band { top: 33.5rem; }
html.cine .s-pts .band-k { top: 45.4rem; justify-content: flex-start; }
html.cine .cine-b { position: absolute; left: var(--pad-x); top: 53.6rem; margin-top: 0; font-size: 3.4rem; color: var(--fg); }
/* 07 */
html.cine .five { top: 23.5rem; gap: 2.4rem; }
html.cine .five li { padding-top: 2.6rem; }
html.cine .nine { width: 11rem; height: 11rem; gap: 1.05rem; }
html.cine .five h3 { margin-top: 3rem; font-size: 2.9rem; }
html.cine .five .cine-s { margin-top: 1rem; font-size: 1.9rem; }
/* 08 */
html.cine .cine-a { position: absolute; left: var(--pad-x); top: 14.8rem; margin-top: 0; max-width: 102rem; font-size: 2.8rem; }
html.cine .s-ppl .band { top: 25.5rem; }
html.cine .s-ppl .band-k { top: 37.2rem; }
html.cine .ppl-b { top: 46.5rem; grid-template-columns: 56rem 1fr; gap: 4rem; align-items: start; }
html.cine .two { margin-top: 0; } html.cine .two li { grid-template-columns: 5rem 1fr; padding: 1.2rem 0; } html.cine .two li::before { font-size: 3.2rem; } html.cine .two strong { font-size: 2.6rem; }
html.cine .ppl-b .cine-l { max-width: 44rem; margin-top: 1rem; font-size: 3.2rem; }
/* 09 */
html.cine .rollout { top: 24rem; height: 10rem; }
html.cine .rollout::before { top: .9rem; }
html.cine .rollout i { width: 2.1rem; height: 2.1rem; }
html.cine .rollout b { font-size: 2.6rem; } html.cine .rollout span { margin-top: -.3rem; font-size: 1.6rem; }
html.cine .four { top: 43rem; } html.cine .four li { padding-top: 1.8rem; } html.cine .four h3 { font-size: 2.4rem; }
html.cine .weeks { grid-template-columns: repeat(7, 1.3rem); gap: .7rem; margin-top: 2rem; } html.cine .weeks i { width: 1.3rem; height: 1.3rem; }
/* 10 */
html.cine .s-road .h { margin-top: 2rem; font-size: 6.4rem; }
html.cine .s-road .cine-l { max-width: 62rem; text-align: center; }
/* 11 */
html.cine .s-close .close-mark { margin-top: 0; width: 5.4rem; height: 5.1rem; }
html.cine .s-close .close-h { margin-top: 2.6rem; font-size: 7.6rem; }
html.cine .sign { margin-top: 3.2rem; font: 500 2rem/1.4 var(--sans); letter-spacing: -.015em; } html.cine .sign b { font-size: 3.6rem; }
html.cine .cine-url { display: block; margin-top: 2.4rem; padding-bottom: .5rem; font: 700 3rem/1 var(--sans); letter-spacing: -.02em; border-bottom: 3px solid var(--arc); }
html.cine .s-close .legal { bottom: 2.6rem; width: 92rem; font-size: .95rem; }
/* the film's last card: the thanks and the signature step back as the voice begins its last lines, and
   each of those lines arrives when it is spoken (--q-<cue>: 0 → 1, and --t-<cue>: seconds since, from letter.js) */
.cine-end { display: none; }
html.cine .cine-end { display: grid; justify-items: center; position: absolute; left: 0; right: 0; top: 17rem; pointer-events: none; }
html.cine .cine-end li { font: 700 4.4rem/1.14 var(--sans); letter-spacing: -.03em; color: var(--fg); text-align: center; opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 1.4rem)); }
html.cine .cine-end .arc { color: var(--arc); }
html.cine .cine-back { margin-top: 3.4rem; font-size: 10.4rem; letter-spacing: -.045em; }
html.cine .cine-back .ch { --r: clamp(0, calc((var(--t-back, 0) - var(--i) * .045) * 4.5), 1); opacity: var(--r); font-weight: calc(100 + 800 * var(--r)); }
html.cine .cine-end-url { margin-top: 2.8rem; padding-bottom: .5rem; font: 700 2.8rem/1 var(--sans); letter-spacing: -.02em; border-bottom: 3px solid var(--arc); opacity: clamp(0, calc((var(--t-back, 0) - .7) * 2.5), 1); }
html.cine .s-close .close-h { opacity: calc(1 - var(--q-out, 0)); }
html.cine .s-close .sign { --o: .1 !important; opacity: calc(var(--r, 1) * (1 - var(--q-out, 0))); }   /* signed before the last lines begin */
html.cine .s-close .cine-url { display: none; }                                                             /* the address is on the last card */
/* The film's words are the narration's (data-film in index.html), and a line marked .spoken waits until the voice
   reaches it: letter.js gives its part --q-<cue> (0 → 1) and the line takes it as --qq. With no voice it is simply there. */
html.cine .spoken { opacity: var(--qq, 1); }
html.cine .spoken:not([data-r]) { transform: translateY(calc((1 - var(--qq, 1)) * 1rem)); }
html.cine .spoken-dim { opacity: calc(.3 + .7 * var(--qq, 1)); }
html.cine .hero-h { font-size: 7.4rem; line-height: 1.02; margin-top: 4.6rem; }
html.cine .hero-sub, html.cine .futures { display: none; }
html.cine .s-reb .cine-l { max-width: 56rem; font-size: 3.4rem; }
html.cine .s-sil .cine-l, html.cine .s-lost .cine-l, html.cine .s-road .cine-l { font-size: 3.6rem; }
.cine-anima { display: none; }
html.cine .s-term .facts { display: none; }
html.cine .cine-anima { display: block; width: 42rem; margin-top: 2.8rem; padding-top: 1.8rem; border-top: 1px solid var(--line2); }
html.cine .cine-anima h3 { font-size: 3.4rem; letter-spacing: -.028em; }
html.cine .cine-anima li { margin-top: .8rem; font: 500 2.6rem/1.22 var(--sans); letter-spacing: -.02em; color: var(--fg2); }
html.cine .cine-anima li:last-child { color: var(--fg); font-weight: 700; }
html.cine .cine-b { color: var(--fg2); }
html.cine .five li { --c: var(--qq, clamp(0, calc((var(--p, 1) * 7 - 1.1 - var(--k, 0)) * 1.6), 1)); }
html.cine .five h3 { font-size: 2.6rem; }
html.cine .cine-b { max-width: none; white-space: nowrap; }
html.cine .s-reb .cine-l { max-width: 60rem; font-size: 4rem; }
html.cine .rollout .spoken-dim b { color: var(--fg); }
/* The film's facts: each part's own, there (dim) from the moment the part arrives and lit as the voice reaches them.
   A film is watched once, so nothing a part has to say is ever off the screen while it is being said. */
.cine-rows, .cine-mission, .cine-two, .cine-note, .cine-sub { display: none; }
html.cine .cine-rows { display: grid; gap: .5rem; margin-top: 2.6rem; }
html.cine .cine-rows li { font: 700 3.3rem/1.2 var(--sans); letter-spacing: -.028em; color: var(--fg); }
html.cine .cine-rows-s { gap: .7rem; margin-top: 2.2rem; }
html.cine .cine-rows-s li { font-size: 2.3rem; font-weight: 500; letter-spacing: -.02em; }
html.cine .s-lost .cine-l { margin-top: 3rem; font-size: 3.3rem; }
html.cine .cine-mission { display: block; position: absolute; left: var(--pad-x); bottom: 6.4rem; max-width: 60rem; font: 700 4.9rem/1.06 var(--sans); letter-spacing: -.035em; color: var(--fg); text-wrap: balance; }
html.cine .s-term .hd-n .h { max-width: 44rem; font-size: 5.2rem; }
html.cine .cine-anima { margin-top: 2.4rem; padding-top: 1.6rem; }
html.cine .s-fac .cine-s { color: var(--fg); }
html.cine .five .cine-s { color: var(--fg2); }
html.cine .cine-a { font-size: 2.7rem; }
html.cine .cine-a b { color: var(--fg); }
html.cine .ppl-b .cine-l { margin-top: .4rem; font-size: 3.4rem; }
html.cine .cine-note { display: block; margin-top: 1.4rem; max-width: 40rem; font: 400 1.5rem/1.45 var(--mono); color: var(--fg3); }
html.cine .four { display: none; }
html.cine .cine-two { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; position: absolute; left: var(--pad-x); right: var(--pad-x); top: 43.5rem; }
html.cine .cine-two > div { padding-top: 2rem; border-top: 1px solid var(--line2); }
html.cine .cine-two h3 { font-size: 3.2rem; letter-spacing: -.028em; }
html.cine .cine-two p { margin-top: 1rem; max-width: 44rem; font: 500 2.4rem/1.3 var(--sans); letter-spacing: -.02em; color: var(--fg2); }
html.cine .nine { width: 12.5rem; height: 12.5rem; gap: 1.2rem; }
html.cine .five h3 { margin-top: 3.2rem; font-size: 2.8rem; }
html.cine .cine-road { margin-top: 1.2rem; font-size: 3.6rem; }
html.cine .cine-sub { display: block; margin-top: 1.6rem; font: 400 1.5rem/1.4 var(--mono); color: var(--fg3); text-align: center; }
/* The film never stands still: every part pushes slowly in for as long as it is on screen (--kb, 0 → 1, from
   letter.js), and the real desk keeps turning to the end of its part instead of settling. */
html.cine .slide > .stage { transform-origin: 46% 42%; transform: translate3d(0, calc(var(--ty, 0) * 1vh), 0) scale(calc(var(--sc, 1) * (1 + .034 * var(--kb, 0)))); }
html.cine .shot3d-desk .shot { transform: translateX(calc(var(--kb, .5) * -7rem)) rotateY(calc(-27deg + var(--kb, .5) * 15deg)) rotateX(calc(12deg - var(--kb, .5) * 5deg)) rotateZ(calc(-2.8deg + var(--kb, .5) * 1.4deg)) scale(calc(1 + .09 * var(--kb, .5))); }
html.cine #fieldWrap .h-glow { width: 30rem; height: 30rem; margin: -15rem 0 0 -15rem; }
/* In the film the points draw the screen first (scenes/field.js, f_terminal) and the real desk resolves on it a
   moment later (--since: seconds since the part began, from letter.js). The desk fades at its own edges there
   instead of under a shade, so the field carries on behind the words. */
html.cine .shade-desk { display: none; }
html.cine .shot3d-desk { opacity: min(clamp(0, calc((var(--since, 9) - 2) / 1.5), 1), clamp(0, calc((var(--left, 9) - .45) / 1), 1)); }   /* (and it gives the screen back to the points before the part ends: --left, seconds to go) */
html.cine .shot3d-desk .shot-blur { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 55%, transparent 100%), linear-gradient(to top, transparent 4%, #000 30%); mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 55%, transparent 100%), linear-gradient(to top, transparent 4%, #000 30%); -webkit-mask-composite: source-in; mask-composite: intersect; }
html.cine .shot3d-desk .shot-sharp { -webkit-mask-image: radial-gradient(ellipse 52% 58% at 30% 36%, #000 45%, transparent 100%), linear-gradient(to right, transparent 0%, #000 32%); mask-image: radial-gradient(ellipse 52% 58% at 30% 36%, #000 45%, transparent 100%), linear-gradient(to right, transparent 0%, #000 32%); -webkit-mask-composite: source-in; mask-composite: intersect; }
/* A film is drawn a frame at a time, however long each frame takes: nothing in it may keep its own clock. The one
   thing on the page that does (the "now" stage's pulse) is told the film's time instead. */
html.cine .rollout .now i { animation-play-state: paused; animation-delay: calc(var(--since, 0) * -1s); }

/* ═══════════════ the launch film's shots, played by the scroll ══════════════
   His rule (12 Oct 2026): the promo film and the dot grid are one design
   language. A shot is laid into the field, its own dot floor running into ours
   at the edges, and the words over it are the posts' type: Satoshi 900 in
   capitals, two sizes, orange on the word that matters, the dot face for the
   step's number. scenes/clip.js plays each shot by the scroll. */
.clip { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 6%, #000 46%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 6%, #000 46%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%); mask-composite: intersect; }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: 0; }

.post-h { display: flex; flex-direction: column; align-items: flex-start; margin: 0; font-family: var(--sans); font-weight: 900; text-transform: uppercase; letter-spacing: -.05em; }
.post-h .ld { display: block; font-size: 7rem; line-height: .92; color: var(--fg); white-space: nowrap; }
.post-h .pn { display: block; font-size: 15rem; line-height: .86; margin-top: .02em; color: var(--arc); white-space: nowrap; }
.post-h3 .ld, .post-h3 .pn { font-size: 9.4rem; }
.stp { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.2rem; font: 900 3.75rem/1 var(--sans); letter-spacing: -.03em; color: var(--arc); }
.stp b { font-size: 9.4rem; line-height: .66; letter-spacing: 0; color: var(--arc); font-variation-settings: "wght" 900, "ROND" 100; }
.post-s { margin: 2.1rem 0 0; max-width: 46rem; font: 700 2.4rem/1.18 var(--sans); letter-spacing: -.012em; color: var(--fg2); }

/* the three steps: one on screen at a time, handed over as its shot is */
.s-steps .steps-k { position: absolute; left: var(--pad-x); top: 8.2rem; max-width: 56rem; font: 500 1.3rem/1.4 var(--sans); color: var(--fg2); }
.s-steps .steps-k b { color: var(--fg); font-weight: 700; }
.beats { position: absolute; left: var(--pad-x); top: 15rem; width: 64rem; height: 38rem; }
.beat { position: absolute; inset: 0; opacity: var(--kk); transform: translate3d(0, calc((1 - var(--kk)) * 1.6rem), 0); }
.chips { position: absolute; left: var(--pad-x); bottom: 5.4rem; display: flex; gap: 2.6rem; margin: 0; padding: 0; list-style: none; }
.chips li { display: flex; align-items: center; gap: .8rem; font: 900 1.25rem/1 var(--sans); letter-spacing: -.01em; text-transform: uppercase; color: var(--fg); opacity: calc(.32 + .68 * var(--kk)); }
.chips b { font-size: 2.2rem; line-height: .7; color: var(--arc); }

/* the film's last shot, on its own orange (sampled from the shot, not the brand's) */
.slide.s-idea[data-theme="light"] { background: #F37A48; --fg: #0B0B0C; --fg2: rgba(11, 11, 12, .74); }
.clip-o { -webkit-mask-image: linear-gradient(to right, transparent 16%, #000 50%); mask-image: linear-gradient(to right, transparent 16%, #000 50%); }
.clip-o video { object-position: 72% 50%; }
.s-idea .post-h { position: absolute; left: var(--pad-x); top: 50%; transform: translateY(-50%); }
.s-idea .post-h .ld { font-size: 6rem; color: #0B0B0C; }
.s-idea .post-h .pn { font-size: 10.5rem; color: #0B0B0C; }
.s-idea .post-h i { font-style: normal; color: #F2F2F0; }

@media (max-aspect-ratio: 1/1), (max-width: 760px), (max-height: 500px) {
  .clip { -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 60%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 34%, #000 60%, #000 90%, transparent 100%); }
  .clip video { object-position: 64% 50%; }
  .s-steps .steps-k { font-size: 1rem; max-width: none; }
  .beats { height: 15rem; }
  .post-h .ld { font-size: 2.5rem; } .post-h .pn { font-size: 5rem; }
  .post-h3 .ld, .post-h3 .pn { font-size: 3.3rem; }
  .stp { font-size: 1.5rem; gap: .6rem; margin-bottom: .8rem; } .stp b { font-size: 3.4rem; }
  .post-s { font-size: 1.1rem; margin-top: .9rem; max-width: 20rem; }
  .chips { gap: 1rem; flex-wrap: wrap; margin-top: auto; } .chips li { font-size: .78rem; gap: .45rem; } .chips b { font-size: 1.3rem; }
  .clip-o { -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 56%); mask-image: linear-gradient(to bottom, transparent 30%, #000 56%); }
  .s-idea .post-h { position: relative; top: auto; transform: none; margin-top: 1rem; }
  .s-idea .post-h .ld { font-size: 2rem; } .s-idea .post-h .pn { font-size: 3.6rem; }
}

/* ── text breaks: a new ANIMA shot a section, ADDED to the field, never over it ──────────
   His correction (12 Oct): full-bleed shots had covered the dot field and its animation.
   A shot is a framed plate, like a post card, standing in the field beside its title; the
   field keeps moving round it, and a break holds the field of the part before it, so the
   field's own changes from part to part play exactly as they did. */
.clip-brk { position: absolute; inset: auto; top: 14rem; width: 64rem; height: 36rem; border-radius: 1.6rem; overflow: hidden;
  -webkit-mask-image: none; mask-image: none; background: #0B0B0C;
  box-shadow: 0 2.6rem 6rem -1.8rem rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .09);
  transform: perspective(120rem) rotateY(var(--fry, -10deg)) rotateX(calc(3deg - var(--p, .5) * 3deg)) translate3d(0, calc((.5 - var(--p, .5)) * 2rem), 0); }
.clip-brk video { opacity: 1; object-position: 50% 50%; }
.clip-brk.fr-r { right: var(--pad-x); --fry: calc(-13deg + var(--p, .5) * 7deg); transform-origin: 100% 50%; }
.clip-brk.fr-l { left: var(--pad-x); --fry: calc(13deg - var(--p, .5) * 7deg); transform-origin: 0% 50%; }
.post-h .ld, .post-h .pn { width: max-content; }
.post-h .pn.doto { font-family: var(--doto); font-variation-settings: "wght" 900, "ROND" 100; letter-spacing: 0; line-height: .8; }
.brk-h { position: absolute; top: 15rem; width: 44rem; }
.brk-h.at-tl { left: var(--pad-x); }
.brk-h.at-tr { right: var(--pad-x); align-items: flex-end; text-align: right; }
.t-k .ld { color: #F2F2F0; } .t-k .pn { color: var(--arc); } .t-k { text-shadow: 0 2px 26px rgba(6, 6, 7, .5); }
/* the hero's opening is untouched: its shot rises in below the headline once the reader scrolls */
.clip-heroframe { position: absolute; left: 50%; top: auto; bottom: 4rem; width: 46rem; height: 25.9rem; right: auto;
  opacity: clamp(0, calc((var(--p, 0) - .06) * 5), 1); transform: translate3d(-50%, calc((1 - clamp(0, calc((var(--p, 0) - .06) * 4), 1)) * 6rem), 0); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

@media (max-aspect-ratio: 1/1), (max-width: 760px), (max-height: 500px) {
  .s-brk .stage { justify-content: flex-start; }
  .clip-brk { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 1rem; transform: none; order: 2; margin-top: 1.4rem; }
  .brk-h { margin-top: .5rem; order: 1; }
  .brk-h.at-tr { align-items: flex-start; text-align: left; }
  .post-h .ld { font-size: 2.3rem; } .post-h .pn { font-size: 4.6rem; }
  .s-hero .stage > .clip-heroframe { width: 82%; align-self: center; height: auto; aspect-ratio: 16 / 9; transform: none; margin-top: 1.6rem; }
  /* a title keeps a margin at both edges, and a right-hand one stands at the left here like the rest */
  .s-brk .stage > .brk-h { max-width: 94%; }
  .s-brk .stage > .brk-h.at-tr { right: auto; }
  .s-brk .stage > .clip-brk { left: auto; right: auto; }
}

/* the terminal is not linked until staging is cut over to production: its keys say so and do nothing */
.soon { opacity: .55; cursor: default; pointer-events: none; }
.btn.soon .btn-l small { color: var(--arc); opacity: 1; }