/* OpenEXA · the overture (Home): own sheet since r2, linked where drawn. */
/* v2:overture:start */
/* ---------- the overture: one instrument, five scenes (story.js) — copy on the left, the instrument on the right, the scene index below;
   portrait screens stack the instrument above the copy and move the index under the nav ---------- */
/* the stage's text keeps clear of a phone's notch or island held sideways (viewport-fit=cover); registered, so story.js
   can read the inset in px for its callouts (r2 mobile) */
@property --story-in-l { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --story-in-r { syntax: "<length>"; inherits: true; initial-value: 0px; }
.story { --story-in-l: max(var(--gutter), env(safe-area-inset-left)); --story-in-r: max(var(--gutter), env(safe-area-inset-right)); --story-bar-h: 64px; position: relative; height: calc(100vh + 322vh); height: calc(100svh + 322svh); background: #0B110F; color: var(--paper); }
.story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; outline: none;
  background: radial-gradient(42% 46% at 60% 24%, rgba(30, 122, 90, .11), transparent 72%), radial-gradient(85% 75% at 70% 50%, #111915 0%, #0B110F 64%, #080D0B 100%); }
.story-stage:focus-visible { outline: 1px solid rgba(79, 203, 147, .55); outline-offset: -8px; }
.story-stage.is-pointing { cursor: pointer; }
.story-gl, .story-2d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* the copy */
.story-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.story-ui .container { position: relative; height: 100%; }
.beat { position: absolute; left: var(--story-in-l); right: var(--story-in-r); bottom: calc(var(--story-bar-h) + clamp(18px, 3.6vh, 40px)); opacity: 0; pointer-events: none; will-change: opacity, transform; }
.beat-0 { opacity: 1; } /* the opening scene holds from the first paint; story.js takes over every beat's opacity */
.beat.is-active .beat-text, .beat.is-active .hero-stats { pointer-events: auto; }
/* the copy relay (story.js): each part of a beat follows the scroll position. --eo the eyebrow */
.beat .eyebrow, .beat-0 .hero-kicker { opacity: var(--eo, 1); }
.beat .body-lg, .beat-0 .hero-sub, .beat .hero-cta, .beat .story-legend, .beat-0 .hero-stats { opacity: var(--bo, 1); }
/* at 0 the paragraph, buttons, key and figures are not there at all */
.beat.is-bo0 .body-lg, .beat.is-bo0 .hero-sub, .beat.is-bo0 .hero-cta, .beat.is-bo0 .story-legend, .beat.is-bo0 .hero-stats { visibility: hidden; }
.story-ready .beat:not(.beat-0) [data-split] .wi, .story-ready .beat-0.is-relay [data-split] .wi { transform: translateY(calc((1 - clamp(0, var(--w, 1) * 1.5 - var(--i, 0) * .05, 1)) * 112%)); transition: none; }
.beat-text { max-width: min(44%, 560px); }
.beat-0 .beat-text { max-width: min(50%, 660px); }
.beat-0 .display-1 { font-size: clamp(3rem, 5.6vw, 5.6rem); }
.beat-0 .hero-sub { max-width: 44ch; }
.beat .eyebrow { margin-bottom: 18px; color: rgba(245, 242, 236, .62); }
.beat h2 { max-width: 15ch; text-wrap: balance; }
.beat h2 .nb { white-space: nowrap; } /* 'One autonomous' stays on one line */
.beat .body-lg { margin-top: 22px; max-width: 46ch; font-size: 1.04rem; line-height: 1.62; }
.beat .hero-cta { margin-top: 30px; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr .8fr 1.45fr; gap: 20px; margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(245, 242, 236, .14); max-width: min(52%, 640px); }
.hero-stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.1vw, 2.05rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.hero-stats b em { font-style: normal; color: var(--signal-bright); }
.hero-stats span { display: block; margin-top: 9px; font-family: var(--mono); font-size: var(--mono-tick); letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 242, 236, .58); line-height: 1.4; }
/* Lifecycle 01: a numeral like its neighbours, with the live dot */
.hero-stats .live { display: inline-block; width: 6px; height: 6px; margin-left: 9px; border-radius: 50%; background: var(--signal-bright); vertical-align: .62em; animation: pulse 2s var(--ease-move) 3; } /* three beats, then still, as .badge i (WCAG 2.2.2; award a1: it was the one CSS animation on the site that never stopped) */
/* the chapter mark: absent at rest; inside a hand-over the incoming scene's numeral rises above the copy column and rolls over */
.story-num { position: absolute; left: var(--story-in-l); top: calc(var(--nav-h) + clamp(16px, 4.5vh, 48px)); opacity: 0; pointer-events: none; color: var(--paper); will-change: opacity, transform; }
.story-num b, .story-num span { display: block; overflow: hidden; transform-origin: 0 0; }
.story-num i { display: block; font-style: normal; transform: translate3d(0, calc(var(--roll, 0) * -100%), 0); transition: transform .6s var(--ease-move); } /* two lines, rolled like a counter */
.story-num b { height: 1em; font: 400 clamp(6rem, 12vw, 10.5rem)/1 var(--serif); letter-spacing: -0.045em; color: rgba(245, 242, 236, .16); font-variant-numeric: tabular-nums; }
.story-num b i { height: 1em; }
.story-num span { height: 1.4em; margin-top: 4px; font: var(--mono-tick)/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 242, 236, .62); }
.story-num span i { height: 1.4em; }
/* portrait and short landscape screens: the proof's derived summary over the floor while the paper takes the copy's place */
.story-coda { position: absolute; left: var(--story-in-l); right: var(--story-in-r); top: 0; display: none; opacity: 0; pointer-events: none; will-change: opacity, transform; }
.story-coda-t { font: 400 clamp(1.9rem, 7.6vw, 3.1rem)/1.04 var(--serif); letter-spacing: -0.02em; color: var(--paper); text-wrap: balance; }
.story-coda-s { margin-top: 12px; font: var(--mono-tick)/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 242, 236, .66); }
/* the role-coded vocabulary, as a key */
.story-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; font: var(--mono-tick)/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: rgba(245, 242, 236, .66); }
.story-legend li { display: inline-flex; align-items: center; gap: 8px; }
.story-legend li::before, .story-lab i.lg-r, .story-lab i.lg-b { content: ""; display: inline-block; flex: none; width: 9px; height: 9px; box-sizing: border-box; }
.story-legend .lg-p::before { border: 1.5px solid var(--signal-bright); border-radius: 50%; }
.story-legend .lg-s::before { background: var(--signal-bright); border-radius: 1.5px; }
.story-legend .lg-r::before, .story-lab i.lg-r { width: 7px; height: 7px; background: var(--reject-bright); border-radius: 50%; }
.story-legend .lg-b::before, .story-lab i.lg-b { width: 14px; height: 6px; background: rgba(245, 242, 236, .92); border-radius: 1px; }

/* callouts: DOM text projected from the instrument, with leader lines */
.story-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.story-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* callouts, leaders and nodes take their opacity from story.js */
.story-leader { fill: none; stroke: rgba(245, 242, 236, .3); stroke-width: 1; opacity: 0; transition: stroke .25s var(--ease-out); }
.story-leader.is-live, .story-leader.is-council, .story-leader.bound { stroke: rgba(79, 203, 147, .5); }
.story-leader.is-hot { stroke: rgba(245, 242, 236, .75); }
.story-node { fill: rgba(245, 242, 236, .86); opacity: 0; } /* where a leader meets its own ring */
.story-node.is-live { fill: var(--signal-bright); }
.story-lab { position: absolute; left: 0; top: 0; font: 400 var(--mono-tick)/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 242, 236, .66); white-space: nowrap; opacity: 0; transition: color .25s var(--ease-out); user-select: text; pointer-events: none; }
.story-lab.is-on { pointer-events: auto; }
button.story-lab { cursor: pointer; text-align: left; }
button.story-lab:focus-visible { outline: 1px solid var(--signal-bright); outline-offset: 3px; }
.story-lab b { font-weight: 500; color: rgba(245, 242, 236, .86); }
.story-lab .k { color: rgba(245, 242, 236, .92); font-variant-numeric: tabular-nums; }
.story-lab .n { color: rgba(245, 242, 236, .6); transition: color .25s var(--ease-out); }
.story-lab .dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* read by screen readers; shown in the inspector */
.story-lab.ring, .story-lab.layer, .story-lab.gate, .story-lab.note, .story-lab.bound { display: flex; align-items: center; gap: 10px; min-height: 22px; padding: 2px 0; }
.story-lab .st { padding: 3px 6px 2px; border: 1px solid rgba(245, 242, 236, .24); border-radius: 2px; font-size: var(--mono-tick); letter-spacing: .12em; color: rgba(245, 242, 236, .7); }
.story-lab .st-live { color: var(--signal-bright); border-color: rgba(79, 203, 147, .55); }
.story-lab .st-roadmap { color: var(--khaki); border-color: rgba(172, 166, 142, .34); border-style: dotted; }
.story-lab .st-next { border-style: dashed; }
.story-lab.is-live .k, .story-lab.is-council .k, .story-lab.is-council .n, .story-lab.bound .n { color: var(--signal-bright); }
.story-lab.is-hot .k, .story-lab.is-hot .n { color: var(--paper); }
.story-lab.is-hot::before { content: ""; position: absolute; left: -14px; top: 50%; width: 8px; height: 1px; background: var(--paper); }
.story-lab.day.is-hot::before { display: none; }
.story-lab.note .n { color: rgba(245, 242, 236, .52); }
.story-lab.is-terse .n { display: none; } /* short landscape, where names would crowd the structure: code and status (the inspector names it) */
/* a plate's caption leads with what kind of picture it is, and wraps rather than leave the screen */
.story-lab.cap { white-space: normal; max-width: calc(100% - 2 * var(--gutter)); line-height: 1.5; letter-spacing: .12em; color: rgba(245, 242, 236, .6); } /* AA on the ground */
.story-lab.cap b { color: rgba(245, 242, 236, .8); font-weight: 400; margin-right: .7em; }
.story-lab.day { display: grid; justify-items: center; gap: 2px; padding: 3px 4px; min-width: 26px; line-height: 1.25; }
.story-lab.day .rg { color: rgba(245, 242, 236, .7); } /* D and P read alike: regime is a label, not a rank */
.story-lab.day.is-hot .k { color: var(--paper); }
.story-lab.day.is-thin:not(:focus-visible), .story-ink .story-lab.is-thin { opacity: 0 !important; } /* columns too close for every tag: 01, 03 … 09 print */
.story-lab.floor { color: rgba(245, 242, 236, .74); text-align: right; }
.story-lab.navtag { color: rgba(245, 242, 236, .5); }
.story-lab.sum { text-align: right; line-height: 1.8; color: rgba(245, 242, 236, .62); }
.story-lab.sum b { color: var(--paper); }
.story-lab.sum .sep { display: block; }
.story-lab.sum .lg-t::after { content: ""; display: inline-block; width: 8px; height: 4px; margin-left: 8px; border: solid var(--signal-bright); border-width: 0 0 1.5px 1.5px; transform: translateY(-3px) rotate(-45deg); }
.story-insp { position: absolute; left: 0; top: 0; z-index: 2; max-width: 260px; padding: 9px 12px 10px; border-left: 1px solid var(--signal-bright); background: rgba(11, 17, 15, .96); font: var(--mono-tick)/1.55 var(--mono); letter-spacing: .07em; color: rgba(245, 242, 236, .8); opacity: 0; pointer-events: none; white-space: normal; }
.story-insp.is-on { opacity: 1; transition: opacity .2s var(--ease); } /* it comes up softly and goes at once */
.story-insp b { display: block; margin-bottom: 3px; color: var(--paper); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.story-insp em { font-style: normal; color: var(--signal-bright); }
/* while the inspector is up, the caption and the summary give way to it (classes only: no :has()) */
.story-labels.has-insp .story-lab.cap, .story-labels.has-insp .story-lab.sum { opacity: 0 !important; }

/* the scene index, the key hint, the motion control */
.story-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--story-bar-h); pointer-events: none; }
.story-bar .container { height: 100%; display: flex; align-items: center; gap: 22px; }
.story-idx { pointer-events: auto; margin-right: auto; }
.story-idx ol { display: flex; gap: 6px; }
.story-idx button { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 4px 0; font: var(--mono-tick)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 242, 236, .54); transition: color .3s var(--ease-out); }
.story-idx button .n { font-variant-numeric: tabular-nums; }
.story-idx button::before, .story-idx button i { content: ""; position: absolute; left: 0; right: 14px; bottom: 9px; height: 1px; background: rgba(245, 242, 236, .16); }
.story-idx button i { background: rgba(245, 242, 236, .8); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.story-idx button.is-on { color: var(--paper); }
@media (hover: hover) { .story-idx button:hover { color: var(--paper); } .story-motion:hover { color: var(--signal-bright); } } /* a tap leaves no lit button behind */
.story-idx button:focus-visible { outline: 1px solid var(--signal-bright); outline-offset: 2px; }
.story-keys { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.story-stage:focus-visible .story-keys { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font: var(--mono-tick)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-bright); }
.story-motion { pointer-events: auto; min-height: 44px; padding: 0 2px; font: var(--fs-small)/1 var(--sans); letter-spacing: 0; color: rgba(245, 242, 236, .66); transition: opacity .2s var(--ease); } /* a control, in Inter (1 Nov) */
.story-labels.has-insp ~ .story-bar .story-motion { opacity: .35; } /* the inspector is up: the control steps back */
.story-motion[hidden] { display: none; }
.story.is-scrolled .hero-stats .live, .story.is-paused .hero-stats .live { animation-play-state: paused; } /* its loop (transform, opacity) stops once S0 has gone, and with Pause motion */
/* the hand-off: the columns drain into their records on the floor line */
.story-paper { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 0; overflow: hidden; visibility: hidden; background: var(--paper); color: var(--ink); pointer-events: none; }
.story-paper-in { position: absolute; left: 0; right: 0; bottom: 0; height: 100vh; height: 100svh; } /* the stage's frame: the paper uncovers what is here, it does not carry it */
.story-paper-in > .container { position: absolute; left: 0; right: 0; top: 0; }
.story-ink { position: absolute; inset: 0; }
.story-ink .story-lab { opacity: 1; transition: none; pointer-events: none; }
.story-ink .story-lab .k { color: var(--ink); }
.story-ink .story-lab .rg { color: rgba(14, 21, 18, .62); }
.story-ink-rec { position: absolute; left: 0; top: 0; width: 15px; height: 7px; border-radius: 1px; background: var(--ink); }
.story-ink-rec::after { content: ""; position: absolute; right: 2px; top: 2px; width: 3px; height: 3px; background: var(--paper); opacity: .55; } /* its hash slot */
.story-ink-link { position: absolute; left: 0; top: 0; height: 1px; background: rgba(14, 21, 18, .34); }
.story.is-leaving .story-lab { pointer-events: none; }
.story-next-target:focus { outline: none; } /* the chapter the keys stepped into from the last scene: focus moves there, no ring on the section */
.story-paper-cap { display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong); font: var(--fs-small)/1.5 var(--sans); letter-spacing: 0; color: var(--slate); } /* a caption, not data: the small step in Inter (1 Nov) */

/* the layout modes story.js measures. */
.story-compact .story-legend, .story-compact .beat-0 .hero-stats { display: none; }
.story-compact .beat h2 { font-size: clamp(1.55rem, 6.4vw, 2.1rem); }
.story-compact .beat-0 .display-1 { font-size: clamp(2.1rem, 8.8vw, 3.4rem); }
.story-compact .beat-0 .hero-kicker { margin-bottom: 8px; font-size: .95rem; }
.story-compact .beat .eyebrow { margin-bottom: 8px; }
.story-compact .beat .body-lg, .story-compact .beat-0 .hero-sub { margin-top: 10px; font-size: .86rem; line-height: 1.5; }
.story-compact .beat .hero-cta, .story-short .beat .hero-cta { flex-wrap: nowrap; gap: 10px; margin-top: 14px; }
.story-compact .beat .hero-cta .btn, .story-short .beat .hero-cta .btn { padding: .78em 1.05em; font-size: .86rem; }
/* a portrait phone is always compact: the same rules from the first paint */
@media (scripting: enabled) and (max-width: 599.98px) {
  html:not(.no-webgl) .story-legend, html:not(.no-webgl) .beat-0 .hero-stats { display: none; }
  html:not(.no-webgl) .beat h2 { font-size: clamp(1.55rem, 6.4vw, 2.1rem); }
  html:not(.no-webgl) .beat-0 .display-1 { font-size: clamp(2.1rem, 8.8vw, 3.4rem); }
  html:not(.no-webgl) .beat-0 .hero-kicker { margin-bottom: 8px; font-size: .95rem; }
  html:not(.no-webgl) .beat .eyebrow { margin-bottom: 8px; }
  html:not(.no-webgl) .beat .body-lg, html:not(.no-webgl) .beat-0 .hero-sub { margin-top: 10px; font-size: .86rem; line-height: 1.5; }
  html:not(.no-webgl) .beat .hero-cta { flex-wrap: nowrap; gap: 10px; margin-top: 14px; }
  html:not(.no-webgl) .beat .hero-cta .btn { padding: .78em 1.05em; font-size: .86rem; }
}
/* a landscape phone is short from the first paint too */
/* tall phones: the overture's type closer to the chapters that follow (body 15 px) */
@media (scripting: enabled) and (max-width: 599.98px) and (min-height: 740px) {
  html:not(.no-webgl) .beat .body-lg { font-size: .94rem; }
  html:not(.no-webgl) .beat h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  html:not(.no-webgl) .beat-0 .hero-stats { display: block; max-width: 100%; margin-top: 16px; padding-top: 12px; }
  html:not(.no-webgl) .beat-0 .hero-stats > div:not(:last-child) { display: none; }
  html:not(.no-webgl) .beat-0 .hero-stats > div:last-child { display: flex; align-items: baseline; gap: 10px; }
  html:not(.no-webgl) .beat-0 .hero-stats > div:last-child b { flex: none; font: 500 var(--mono-tick)/1.4 var(--mono); letter-spacing: .12em; color: var(--paper); }
  html:not(.no-webgl) .beat-0 .hero-stats > div:last-child .live { width: 5px; height: 5px; margin-left: 7px; vertical-align: .15em; }
  html:not(.no-webgl) .beat-0 .hero-stats > div:last-child span { margin-top: 0; }
}
@media (min-width: 600px) and (min-height: 740px) {
  html.story-compact:not(.no-webgl) .beat .body-lg { font-size: .94rem; }
  html.story-compact:not(.no-webgl) .beat h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
}
@media (scripting: enabled) and (max-height: 599.98px) and (min-aspect-ratio: 23/20) {
  html:not(.no-webgl) .beat .hero-cta { flex-wrap: nowrap; gap: 10px; margin-top: 14px; }
  html:not(.no-webgl) .beat .hero-cta .btn { padding: .78em 1.05em; font-size: .86rem; }
}
.story-short .beat-4 .body-lg { display: none; } /* its callouts and the paper's caption carry the record */
.beat.is-tight .body-lg, .beat-0.is-tight .hero-sub { display: none; }
.story-short .story-lab.floor span { display: block; } /* two short lines, left of column 01 */
.story-short .story-lab.floor { line-height: 1.3; }
.story-short .story-lab.day { padding: 2px 0; min-width: 0; }
.story-short .story-lab.layer, .story-short .story-lab.bound { min-height: 20px; } /* nine rows beside the stack from 360 px of height */

/* without JavaScript, and when WebGL is unavailable */
.story-static-mark { position: absolute; top: calc(var(--nav-h) + 64px); right: 9%; width: min(32%, 440px); opacity: .5; pointer-events: none; }
.story-ready .story-static-mark, .no-webgl .story-static-mark { display: none; }
.beat-fig { display: none; }
@media (scripting: none) {
  .story { height: auto; }
  .story-stage { position: relative; height: auto; min-height: 100svh; }
  .story-ui { position: relative; }
  .beat { position: relative; left: auto; right: auto; bottom: auto; opacity: 1; transform: none; pointer-events: auto; padding: clamp(56px, 9vh, 96px) 0; border-top: 1px solid rgba(245, 242, 236, .12); }
  .beat-0 { border-top: 0; padding-top: calc(var(--nav-h) + clamp(96px, 20vh, 220px)); }
  .beat .beat-text { pointer-events: auto; }
  .story-labels, .story-bar, .story-gl, .story-paper, .story-legend, .story-num, .story-coda { display: none; }
  .beat-fig { display: block; width: 100%; max-width: 440px; height: auto; margin-top: 34px; }
}
.no-webgl .story, .story-tiny .story { height: auto; }
.no-webgl .story-stage, .story-tiny .story-stage { position: relative; height: auto; min-height: 100svh; }
.no-webgl .story-ui, .story-tiny .story-ui { position: relative; }
.no-webgl .beat, .story-tiny .beat { position: relative; left: auto; right: auto; bottom: auto; opacity: 1; transform: none; pointer-events: auto; padding: clamp(56px, 9vh, 96px) 0; border-top: 1px solid rgba(245, 242, 236, .12); }
.no-webgl .beat-0, .story-tiny .beat-0 { border-top: 0; padding-top: calc(var(--nav-h) + clamp(96px, 20vh, 220px)); }
.no-webgl .beat .beat-text, .story-tiny .beat .beat-text { pointer-events: auto; }
.no-webgl .beat [data-split] .wi { transform: none; }
.no-webgl .story-labels, .no-webgl .story-bar, .no-webgl .story-gl, .no-webgl .story-paper, .no-webgl .story-legend, .no-webgl .story-num, .no-webgl .story-coda,
.story-tiny .story-labels, .story-tiny .story-bar, .story-tiny .story-gl, .story-tiny .story-paper, .story-tiny .story-legend, .story-tiny .story-num, .story-tiny .story-coda { display: none; }
.no-webgl .beat-fig, .story-tiny .beat-fig { display: block; width: 100%; max-width: 440px; height: auto; margin-top: 34px; }
.no-webgl .story-2d { height: 100vh; height: 100svh; }
@media (min-aspect-ratio: 23/20) and (min-width: 640px) {
  .no-webgl .beat-fig { position: absolute; right: 0; top: 50%; width: min(46vw, 560px); max-width: none; margin: 0; transform: translateY(-50%); } /* plates, not thumbnails */
}
@media (scripting: none) and (min-aspect-ratio: 23/20) and (min-width: 640px) {
  .beat-fig { position: absolute; right: 0; top: 50%; width: min(46vw, 560px); max-width: none; margin: 0; transform: translateY(-50%); }
}
/* wide screens: site.js's 2D globe gets a canvas of its own on the right */
@media (min-aspect-ratio: 23/20) and (min-width: 1200px) { .no-webgl .story-2d { left: auto; right: 0; width: max(960px, 56%); } }
/* the safety net, JavaScript on but story.js never ran: at once if it failed (site.js), 20 s while on its way (home.js), else 4 s */
@media (scripting: enabled) {
  html { --story-net: 4s; }
  html.story-wait { --story-net: 20s; }
  html.story-failed { --story-net: 0s; }
  html:not(.story-ready):not(.no-webgl) .story { animation: story-static-h 1ms var(--ease-out) var(--story-net) forwards; }
  html:not(.story-ready):not(.no-webgl) .story-stage { animation: story-static-stage 1ms var(--ease-out) var(--story-net) forwards; }
  html:not(.story-ready):not(.no-webgl) .story-ui { animation: story-static-ui 1ms var(--ease-out) var(--story-net) forwards; }
  html:not(.story-ready):not(.no-webgl) .beat { animation: story-static-beat 1ms var(--ease-out) var(--story-net) forwards; }
  html:not(.story-ready):not(.no-webgl) .beat [data-split] .wi { animation: story-static-wi 1ms var(--ease-out) var(--story-net) forwards; }
  html:not(.story-ready):not(.no-webgl) .story-bar, html:not(.story-ready):not(.no-webgl) .story-labels { animation: story-static-off 1ms var(--ease-out) var(--story-net) forwards; }
}
@keyframes story-static-h { to { height: auto; } }
@keyframes story-static-stage { to { position: relative; height: auto; min-height: 100svh; } }
@keyframes story-static-ui { to { position: relative; } }
@keyframes story-static-beat { to { position: relative; left: auto; right: auto; bottom: auto; opacity: 1; transform: none; pointer-events: auto; padding-top: clamp(56px, 9vh, 96px); padding-bottom: clamp(56px, 9vh, 96px); } }
@keyframes story-static-wi { to { transform: none; } }
@keyframes story-static-off { to { visibility: hidden; } }

/* short wide screens (a phone held sideways, 200% zoom): every beat fits between the nav and the index */
@media (max-height: 760px) and (min-aspect-ratio: 23/20) {
  .beat-0 .display-1 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
  .beat-0 .hero-sub { margin-top: 16px; }
  .beat .hero-cta { margin-top: 22px; }
  .hero-stats { margin-top: 22px; padding-top: 14px; }
}
@media (max-height: 600px) and (min-aspect-ratio: 23/20) {
  .story { --story-bar-h: 46px; }
  .beat .eyebrow { margin-bottom: 8px; }
  .beat-0 .hero-kicker, .beat-0 .hero-stats, .story-legend { display: none; }
  .beat-0 .display-1 { font-size: clamp(1.9rem, 10vh, 3.4rem); }
  .beat h2 { font-size: clamp(1.35rem, 3.4vw, 1.7rem); max-width: 24ch; } /* a smaller short scale: the paragraphs keep their place */
  .beat .body-lg, .beat-0 .hero-sub { margin-top: 10px; font-size: .86rem; line-height: 1.45; }
  .beat .body-lg { font-size: .8rem; line-height: 1.42; }
  .beat .hero-cta, .beat-0 .hero-cta { margin-top: 14px; }
  .story-idx button .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .story-coda { right: auto; width: min(44%, 520px); }
  .story-coda-t { font-size: clamp(1.5rem, 7vh, 2.2rem); }
  .story-ready:not(.no-webgl) .story-coda { display: block; }
}
@media (min-aspect-ratio: 23/20) and (max-width: 1100px) { .story-idx button .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .story-idx button.is-on .t { position: static; width: auto; height: auto; clip-path: none; } }

/* portrait: the instrument above, the copy below, the index under the nav */
@media (max-width: 639.98px), (max-aspect-ratio: 23/20) {
  .story { --story-bar-h: 46px; }
  .story-bar { top: var(--nav-h); bottom: auto; }
  .story-bar .container { gap: 10px; }
  .story-idx ol { gap: 0; }
  .story-idx button { padding-right: 10px; min-width: 34px; }
  .story-idx button::before, .story-idx button i { right: 10px; }
  .story-idx button .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .beat { bottom: clamp(16px, 3vh, 34px); }
  .beat-text, .beat-0 .beat-text { max-width: 100%; }
  .beat h2 { font-size: clamp(1.85rem, 7.2vw, 3rem); max-width: 18ch; }
  .beat .body-lg { margin-top: 12px; font-size: clamp(.9rem, 2.3vw, 1.02rem); line-height: 1.55; max-width: 60ch; }
  .beat .eyebrow { margin-bottom: 10px; }
  .beat-0 .display-1 { font-size: clamp(2.3rem, 9.6vw, 4.2rem); }
  .beat-0 .hero-kicker { margin-bottom: 10px; font-size: 1.02rem; }
  .beat-0 .hero-sub { margin-top: 12px; font-size: clamp(.98rem, 2.6vw, 1.15rem); }
  .beat-0 .hero-cta, .beat .hero-cta { margin-top: 18px; }
  .hero-stats { max-width: 100%; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 12px 14px; margin-top: 18px; padding-top: 14px; }
  .hero-stats b { font-size: clamp(1.15rem, 4.6vw, 1.6rem); }
  .hero-stats span { margin-top: 6px; }
  .story-legend { margin-top: 14px; gap: 8px 14px; }
  .story-lab.gate .k { display: none; }
  .story-lab.floor span { display: block; } /* two short lines, left of column 01 */
  .story-lab.floor { line-height: 1.3; }
  .story-lab.day { padding: 2px 1px; min-width: 22px; }
  .story-static-mark { width: 56%; top: calc(var(--nav-h) + 30px); right: 22%; }
  .story-num { display: none; } /* portrait: the index under the nav already marks the scene */
  .story-ready:not(.no-webgl) .story-coda { display: block; }
  .no-webgl .beat-0 { padding-top: calc(var(--nav-h) + 66vw + 48px); }
}
@media (scripting: none) and (max-width: 639.98px), (scripting: none) and (max-aspect-ratio: 23/20) { .beat-0 { padding-top: calc(var(--nav-h) + 66vw + 48px); } }
/* phones leave out the rings' and layers' names (the inspector has them) */
@media (max-width: 599.98px) {
  .story-lab.ring .n, .story-lab.layer .n { display: none; }
  .story-lab.ring { flex-direction: column; align-items: flex-start; gap: 3px; } /* code over status: a narrow column, so the rings can fill the width */
  .story-lab.ring.is-row { flex-direction: row; align-items: center; gap: 8px; } /* a short phone: code beside status, so all six fit above the copy */
  .story-lab.gate { min-height: 20px; } /* six gates above a short phone's copy (they take no pointer) */
  .story-lab.layer::after, .story-lab.day::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: max(100%, 24px); transform: translate(-50%, -50%); } /* a 24 px hit area */
}
@media (min-width: 600px) and (max-aspect-ratio: 23/20) { .story-lab { font-size: clamp(.625rem, .5rem + .4vw, .8rem); } }
@media (max-width: 400px) { .hero-stats { grid-template-columns: repeat(2, auto); justify-content: start; gap: 12px 26px; } .story-lab.day { padding: 2px 0; min-width: 0; } }
/* 400% zoom on a desktop */
html.story-tiny .story .beat-0 { padding-top: calc(var(--nav-h) + 28px); }
html.story-tiny .story .beat [data-split] .wi { transform: none; }
html.story-tiny .story .beat-0 .hero-kicker { display: block; }
html.story-tiny .story .beat-0 .hero-stats { display: grid; }
html.story-tiny .story .story-coda { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-stats .live { animation: none; } .story-lab, .story-leader, .story-node, .story-insp.is-on, .story-idx button, .story-num i { transition: none; } }
/* print: the overture prints as its static sequence, ink on white */
@media print {
  .story-bar, .story-paper, .story-insp, .story-leaders, .story-legend { display: none !important; }
  .story, .story-stage { height: auto !important; min-height: 0 !important; background: none !important; }
  .story-gl, .story-2d, .story-labels, .story-num, .story-coda, .story-static-mark, .beat-fig { display: none !important; }
  .story .beat { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; --eo: 1 !important; --w: 1 !important; --bo: 1 !important; }
  .story .beat .beat-text > *, .story .beat-0 .hero-stats { visibility: visible !important; }
  .story .beat .body-lg, .story .beat-0 .hero-sub { display: block !important; }
  .story .beat-0 .hero-stats { display: grid !important; }
  .story .beat [data-split] .wi { transform: none !important; }
  .story, .story * { color: #000 !important; }
}
/* v2:overture:end */
/* wide screens (award a1): above 1920 px the page grows with the window (site.css); the live dot grows with it */
@media (min-width: 1921px) { .hero-stats .live { width: .375rem; height: .375rem; margin-left: .5625rem; } }