/* Layout: a fixed full-screen glowing realm; each subject is a station with one monumental light-drawn form, ordered from first steps to advanced. Minimal HUD on top. Single dark look by design. */
:root {
  --void: #030306;
  --ink: #FFFFFF;
  --mist: #9097A8;
  --blue: #4C82FF;   /* OpenCurve's one accent color besides black and white */
  --line: rgba(220, 225, 240, 0.14);
  --accent: #E4E8F0;
  --display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --hud: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
html, body { background: var(--void); color: var(--ink); }
html { scroll-snap-type: y mandatory; }
html.menu-open { overflow: hidden; }   /* the page behind the open Index stays put */
.menu { overscroll-behavior: contain; }
body { font-family: var(--display); font-weight: 300; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: none; } /* no focus boxes: keyboard focus shows as a color change instead */
a:focus-visible, button:focus-visible { color: var(--accent); }
.stepper button:focus-visible { border-color: var(--accent); }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 55% 45%, transparent 50%, rgba(0,0,0,0.7) 100%); }

.hud { position: fixed; z-index: 5; font-family: var(--hud); font-size: 11px; letter-spacing: 0.04em; color: var(--mist); pointer-events: none; }
.hud a, .hud button { pointer-events: auto; }
.hud-top {
  top: env(safe-area-inset-top, 0px); left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding-block: 24px;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.picker { display: inline-flex; align-items: center; gap: 10px; font: inherit; letter-spacing: inherit; color: var(--ink); background: rgba(0,0,0,0.35); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; min-height: 44px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s; }
.picker:hover { border-color: var(--accent); }
.picker svg { transition: transform .3s; }
.picker[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu { position: fixed; inset: 0; z-index: 20; background: rgba(3,3,6,0.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow-y: auto; box-sizing: border-box;
  padding-block: calc(env(safe-area-inset-top, 0px) + 28px) 64px;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.menu-inner { max-width: 1420px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.menu-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--hud); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist); margin-bottom: 56px; }
.menu-close { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); background: none; border: 0; padding: 12px 0; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.menu-close::after { content: '\00d7'; font-size: 18px; letter-spacing: 0; line-height: 1; transition: transform .4s; }
.menu-close:hover::after { transform: rotate(90deg); }
/* Index: one editorial list, a full-width row per subject. Each row: number, the name set large, and its one-line description in its own column, which only lights up
   on hover so nothing shifts. Hovering washes the row in the subject's colour from the left. About sits at the end. */
.menu-head { margin-bottom: 28px; }
.ix-list { list-style: none; margin: 0; padding: 0; }
.ix-list li { position: relative; border-top: 1px solid var(--line); }
.ix-list li:last-child { border-bottom: 1px solid var(--line); }
.ix-list button { --c: var(--ink); position: relative; width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 1fr) 110px; align-items: center; column-gap: 16px;
  padding: 12px 0; background: none; border: 0; text-align: left; cursor: pointer; color: rgba(240,243,250,0.84); overflow: hidden; }
.ix-list button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); opacity: 0; transform: scaleX(0.6); transform-origin: left; transition: opacity .45s, transform .6s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.ix-list button:hover::before, .ix-list button:focus-visible::before { opacity: 1; transform: none; }
.ix-list .n { font-family: var(--hud); font-weight: 400; font-size: 11px; line-height: 1.4; letter-spacing: 0.04em; color: var(--mist); font-variant-numeric: tabular-nums; transition: color .3s; }
.ix-list .nm { font-family: var(--display); font-weight: 200; font-size: clamp(28px, 2.7vw, 46px); line-height: 1.05; letter-spacing: -0.04em; white-space: nowrap; transition: color .3s, transform .5s cubic-bezier(.16,1,.3,1); }
.ix-list .ds { font-size: 14px; line-height: 1.45; color: var(--mist); opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .5s cubic-bezier(.16,1,.3,1); }
.ix-list .tg { justify-self: end; white-space: nowrap; font-family: var(--hud); font-weight: 400; font-size: 9px; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); }
.ix-list button:hover .nm, .ix-list button:focus-visible .nm { color: var(--c); transform: translateX(10px); }
.ix-list button:hover .ds, .ix-list button:focus-visible .ds { opacity: 1; transform: none; color: rgba(240,243,250,0.78); }
.ix-list button:hover .n, .ix-list button:focus-visible .n, .ix-list button[aria-current="true"] .n { color: var(--c); }
.ix-list button[aria-current="true"] .nm { color: var(--c); }
.ix-list button[aria-current="true"] .tg::before { content: 'You are here'; color: var(--c); }
.ix-about { margin-top: 72px; display: grid; grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 16px; font-size: 13px; line-height: 1.55; color: var(--mist); }
.ix-lede { grid-column: 2 / 3; margin: 0; max-width: 22ch; font-family: var(--display); font-weight: 200; font-size: clamp(26px, 2.2vw, 38px); line-height: 1.15; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.ix-cols { grid-column: 3 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-self: start; }
.ix-about h4 { margin: 0 0 10px; font-family: var(--hud); font-weight: 400; font-size: 10px; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); }
.ix-about p { margin: 0; }
.ix-about .who { color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.ix-about .handle { font-family: var(--hud); font-size: 11px; letter-spacing: 0.04em; color: var(--mist); }
.ix-about a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; }
.ix-about a::after { content: '\2197'; font-size: 11px; color: var(--mist); transition: transform .3s; }
.ix-about a:hover::after { transform: translate(2px, -2px); color: var(--ink); }
.menu:not([hidden]) .ix-list li, .menu:not([hidden]) .ix-about { animation: ixIn .7s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 26ms + 60ms); }
@keyframes ixIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .ix-list button { grid-template-columns: 36px minmax(0, 1fr) auto; } .ix-list .ds { display: none; } .ix-about { grid-template-columns: 1fr; row-gap: 32px; } .ix-lede, .ix-cols { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .ix-list button::before, .ix-list .nm, .ix-list .ds, .menu-close::after { transition: none; } .menu:not([hidden]) .ix-list li, .menu:not([hidden]) .ix-about { animation: none; } }

.hud-bottom {
  bottom: env(safe-area-inset-bottom, 0px); left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;   /* the label sits on the same centre line as the counter */
  padding-block: 24px;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.eq { color: var(--accent); font-size: 12px; transition: color .8s; }
.count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,0,0,0.35); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; display: grid; place-items: center; transition: border-color .3s; }
.stepper button:hover { border-color: var(--accent); }

main { position: relative; z-index: 2; }
.chapter {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: 120px 140px;
  scroll-snap-align: start; scroll-snap-stop: always;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}
.chapter-inner { max-width: 1280px; width: 100%; margin: 0 auto; display: grid; gap: 28px; }
h1, h2 { margin: 0; font-weight: 200; letter-spacing: -0.055em; line-height: 0.86; text-wrap: balance; text-shadow: 0 0 40px rgba(0,0,0,0.6); }
h1 { font-size: clamp(72px, 15vw, 232px); }
h2 { font-size: clamp(52px, 9.5vw, 156px); }
.sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--mist); max-width: 34ch; }
@media (min-width: 721px) { .chapter:not(#intro) .sub { max-width: none; white-space: nowrap; } } /* course descriptions stay on one line on laptops */
.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
/* View topics: a quiet text link — small caps, an accent arrow, and a hairline underline that draws across on hover */
.cta { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-family: var(--hud); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); text-decoration: none; pointer-events: auto; }
.cta::before { content: ''; position: absolute; left: 0; right: 30px; bottom: 10px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.6,0,.2,1); }
.cta::after { content: '\2192'; font-size: 14px; letter-spacing: 0; color: var(--accent); transition: transform .4s cubic-bezier(.6,0,.2,1); }
.cta:hover::before { transform: scaleX(1); }
.cta:hover::after { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .cta::before, .cta::after { transition: none; } }
.next { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; min-height: 44px; font-family: var(--hud); font-size: 11px; letter-spacing: 0.06em; color: var(--mist); text-decoration: none; pointer-events: auto; }
.next-n { color: var(--ink); font-size: 13px; }
.next svg { color: var(--accent); animation: nudge 2.4s ease-in-out infinite; }
.next:hover .next-n { color: var(--accent); }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .next svg { animation: none; } }

@media (max-width: 720px) {
  .hud-top { grid-template-columns: 1fr auto; }
  .picker { justify-self: end; }
  .chapter { padding-block: 150px 120px; }
}
@media (prefers-reduced-motion: reduce) { .cta, .eq { transition: none; } }

/* Custom cursor: dashed axis lines across the screen through the pointer (x and y read off the edges),
   plus a trailing polar reading (r, θ). Fixed neutral color. Mouse and trackpad only. */
.cur-svg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 49; pointer-events: none; opacity: 0; transition: opacity .3s; overflow: visible; }
.cur-svg .ax { stroke: #D6DAE3; stroke-width: 1; stroke-dasharray: 4 6; opacity: 0.38; }
.cur-svg .pt { fill: #FFFFFF; }
.cur-ax, .cur-ay, .cur-xy { position: fixed; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .3s; font-family: var(--hud); font-size: 10px; letter-spacing: 0.04em; color: #D6DAE3; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 3px 6px; border-radius: 4px; background: rgba(3,3,6,0.62); }
.cur-ax { top: 78px; left: 0; transform: translateX(-50%); }
.cur-ay { right: 14px; top: 0; transform: translateY(-50%); }
.cur-xy { left: 0; top: 0; margin: 18px 0 0 18px; color: #9097A8; will-change: transform; }
html.has-cur, html.has-cur a, html.has-cur button { cursor: none; }
html.has-cur .cur-svg, html.has-cur .cur-ax, html.has-cur .cur-ay, html.has-cur .cur-xy { opacity: 1; }
html.cur-off .cur-svg, html.cur-off .cur-ax, html.cur-off .cur-ay, html.cur-off .cur-xy { opacity: 0; }

/* Scroll cue: super minimal — a tiny word and a hairline that slowly breathes */
.scroll-cue { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; padding: 10px 16px; color: var(--mist); text-decoration: none; pointer-events: auto; opacity: 0.45; transition: opacity .4s; }
.scroll-cue .lbl { font-family: var(--hud); font-size: 9px; letter-spacing: 0.3em; text-transform: lowercase; margin-right: -0.3em; }
.scroll-cue .hair { width: 1px; height: 28px; background: linear-gradient(to bottom, transparent, currentColor); transform-origin: top; animation: breathe 3.2s ease-in-out infinite; }
.scroll-cue:hover { opacity: 0.9; }
@keyframes breathe { 0%, 100% { transform: scaleY(0.35); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }
#intro { position: relative; }
#intro .scroll-cue { position: absolute; left: 50%; bottom: calc(24px + 20px - 10px - 6.5px); transform: translateX(-50%); }   /* the word sits on the same centre line as the bottom label and counter; its breathing line points down at it */
@media (max-width: 720px) { #intro .scroll-cue { bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue .hair { animation: none; } }

/* Loading screen: a sine curve draws itself while the count runs to 100, then the curtain lifts */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--void); display: grid; grid-template-rows: 1fr auto; padding: max(28px, env(safe-area-inset-top)) clamp(20px, 4vw, 48px) max(28px, env(safe-area-inset-bottom)); box-sizing: border-box; transition: opacity .9s cubic-bezier(.7,0,.2,1), transform 1.1s cubic-bezier(.7,0,.2,1); }
.loader.done { opacity: 0; transform: translateY(-3%); pointer-events: none; }
.loader-plot { align-self: center; justify-self: center; width: min(720px, 86vw); }
.loader-plot svg { width: 100%; height: auto; overflow: visible; display: block; }
.loader-plot .axis { stroke: rgba(220,225,240,0.16); stroke-width: 1; }
.loader-plot .tick { stroke: rgba(220,225,240,0.22); stroke-width: 1; }
.loader-plot .curve { fill: none; stroke: #E4E8F0; stroke-width: 1.4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(228,232,240,0.55)); }
.loader-plot .dot { fill: #fff; filter: drop-shadow(0 0 8px #fff); }
.loader-plot .fx { font-family: var(--hud); font-size: 11px; letter-spacing: 0.06em; fill: var(--mist); }
.loader-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.loader-num { font-family: var(--display); font-weight: 200; font-size: clamp(64px, 11vw, 148px); line-height: 0.82; letter-spacing: -0.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.loader-side { text-align: right; font-family: var(--hud); font-size: 11px; letter-spacing: 0.06em; color: var(--mist); line-height: 1.8; }
.loader-side b { display: block; font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .loader { transition: opacity .3s; } .loader.done { transform: none; } }

.cta.soon { color: var(--mist); pointer-events: none; }
.cta.soon::before, .cta.soon::after { display: none; }

/* ---------- Type system pass: one set of sizes, tracking and rhythm for every piece of text ----------
   Mono labels (mixed case): 11px, 0.04em.  Mono caps labels: 10px, 0.18em (trailing space trimmed so they line up at edges).
   Display headings get a small negative indent so their thin first letter lines up with the text under it. */
.hud, .next, .loader-side, .loader-plot .fx, .count, .picker, .menu li button .n { font-size: 11px; letter-spacing: 0.04em; line-height: 1.4; }
.eq { font-size: 11px; letter-spacing: 0.04em; }
.cta, .menu-head, .menu-close, .menu aside h3, .scroll-cue .lbl, .menu-foot { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.cta, .menu-close { margin-right: -0.18em; }
.menu li button .tbd { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
/* Type audit fixes:
   - Geist Mono is loaded in one weight (400), so every mono label declares 400 instead of asking for lighter weights that don't exist
   - the 13px subject name in "Next up" gets its own tracking instead of inheriting the 11px label's (it was 0.034em by accident)
   - a centered heading skips the left-edge optical nudge, which only makes sense for left-aligned headings */
.hud, .next, .count, .picker, .eq, .cta, .menu-head, .menu-close, .menu-foot, .menu li button .n, .menu li button .tbd, .menu aside .handle,
.scroll-cue .lbl, .beat .beat-k, .beat-list, .beat .meta-line, .cur-ax, .cur-ay, .cur-xy, .loader-side, .loader-plot .fx { font-weight: 400; }
.next-n { letter-spacing: 0.02em; }
.beat .beat-k, .beat-list, .beat .meta-line, .menu-foot, .menu-head { line-height: 1.4; }   /* every one-line mono label shares one line height */
.beat.words.mid h2 { margin-left: 0; }
.scroll-cue .lbl { text-transform: lowercase; margin-right: -0.18em; line-height: 13px; }
.menu-foot { letter-spacing: 0.04em; text-transform: none; font-size: 11px; }
.cur-ax, .cur-ay, .cur-xy { font-size: 10px; letter-spacing: 0.04em; }
h1, h2, .loader-num { margin-left: -0.045em; }
.chapter-inner { gap: 24px; }
.row { align-items: baseline; }
.next { margin-top: 12px; align-items: center; }
body { margin: 0; } /* the browser's default 8px margin was pushing all page text right of the top bar */
/* nothing on the page can be highlighted or dragged out; it reads like a picture, not a document */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* no visible scrollbar; scrolling works the same */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
a, img, svg { -webkit-user-drag: none; }
.sub { font-size: 17px; line-height: 1.5; }
.menu aside .who { line-height: 1.2; }
.menu aside .handle { margin: 2px 0 12px; font-family: var(--hud); font-size: 11px; letter-spacing: 0.04em; color: var(--mist); }
.menu aside h3 { margin-bottom: 12px; }
.menu li button { padding-block: 12px; }

/* Top bar: a little more room above, and every item centered on one line */
.hud-top { padding-block: 32px 24px; align-items: center; }

/* Pre-cover: two text-only screens before the cover, played slowly by scrolling.
   1. "Some math only clicks once you see it." fades in.
   2. Scroll: it fades out, and "Introducing" with "Open Curve" (side by side) fades in.
   3. Scroll: "Open" and "Curve" glide into the one-line cover title while the 3D scene and the bars fade in.
   One scroll per step: the two empty sections are snap stops, and each step plays out smoothly on its own. */
.pre-veil { position: fixed; inset: 0; z-index: 1; background: var(--void); pointer-events: none; }   /* covers the 3D scene on the pre-cover; fades away on the way to the cover */
.prelude { position: relative; z-index: 2; height: 100svh; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; }   /* one scroll = one step: each screen is a snap stop */
.prelude .scroll-cue { position: fixed; z-index: 3; left: 50%; bottom: calc(24px + 20px - 10px - 6.5px); transform: translateX(-50%); }
.pre-fx { position: fixed; z-index: 3; left: 0; right: 0; top: 50%; width: max-content; max-width: 92vw; margin: 0 auto; text-align: center; pointer-events: none; opacity: 0; }   /* centred by layout, on whole pixels, never by a half-pixel shift that would soften the text */
.pre-quote { width: min(14ch, 92vw); max-width: none; text-wrap: balance; font-size: clamp(52px, 6vw, 112px); font-weight: 200; line-height: 1; letter-spacing: -0.045em; color: var(--ink); }
/* the traveling title: a copy pinned to the screen, set exactly like the cover title. Being pinned, the page's own
   scrolling never moves it, so it glides without the one-frame wobble a scrolling element gets; on arrival it hands
   over to the real cover title in the same spot */
.pre-title { position: fixed; z-index: 3; left: 0; top: 0; pointer-events: none; font-size: clamp(80px, 17.4vw, 300px); font-weight: 200; letter-spacing: -0.02em; line-height: 0.84; color: var(--ink); }
.pre-title > span { position: absolute; left: 0; top: 0; display: block; white-space: nowrap; transform-origin: 0 0; visibility: hidden; text-shadow: none; }   /* moved with a transform so it glides smoothly between pixels; no will-change, so the browser redraws it sharp at every size */
.pre-title .l2 { font-weight: 400; letter-spacing: -0.01em; }
.pre-intro { font-size: clamp(20px, 1.6vw, 28px); font-weight: 300; letter-spacing: -0.01em; color: var(--mist); white-space: nowrap; }
#intro h1 > span { position: relative; justify-self: start; transform-origin: 0 0; white-space: nowrap; }
/* The title's soft dark glow sits on its own layer behind the words (a shadow-only copy of each word), so the
   letters themselves stay plain crisp text: no filter turning them into a picture, and no letter shading its neighbour */
#intro h1 > span, .pre-title > span > * { text-shadow: none; }
#intro h1 > span::before, .pre-title > span::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: transparent; text-shadow: 0 0 40px rgba(0,0,0,0.6); pointer-events: none; }
   /* each word measures to its own width, so it can travel on its own */

/* Cover type: one line, "Open" thin beside a bolder "Curve", flush left */
#intro h1 { font-size: clamp(80px, 17.4vw, 300px); display: grid; grid-auto-flow: column; column-gap: 0.03em; width: max-content; line-height: 0.84; letter-spacing: -0.02em; transform-origin: 0 0; transition: opacity 1.4s cubic-bezier(.2,.7,.2,1) .1s; }
html:not(.pre-ready) #intro h1 { opacity: 0; }   /* the title fades up as the loader lifts */ /* cover title: "Open" thin, "Curve" bolder, side by side */
#intro h1 .l1 { font-weight: 200; }
#intro h1 .l2 { font-weight: 400; letter-spacing: -0.01em; }   /* "Curve" sits right after "Open" on the same line */
.kr { margin: 0 -0.012em 0 -0.042em; }   /* the "r" in Curve: Geist leaves too much air after the u and too little before the v at this size */
#intro .chapter-inner { gap: 36px; }
#intro .chapter-inner { max-width: none; }   /* the big one-line title is wider than the usual 1280px column, so the cover uses the full width */
#intro h1 { justify-self: center; margin-left: 0; position: relative; left: -0.007em; }   /* left nudge: the "O" has more empty space before it than the "e" has after it, so this centers the visible letters, not the text box (measured in Chrome: equal gap on both sides) */   /* cover title centered across the screen (the "Introducing" glide lands on it, since it measures where the title sits) */
@media (max-width: 720px) { #intro .scroll-cue { display: none; } }

/* Intro: short screens between the cover and Pre-Algebra. Six show only the model; the text screens all share one build:
   a numbered label, one heading with a single serif accent word, a short line, then the extras. Words sit on the left,
   the model on the right, same as the subjects. They fade up, one line after another, when their screen arrives. */
.beat { position: relative; }
.beat .chapter-inner { gap: 0; justify-items: start; }
.beat .beat-k { margin: 0 0 26px; display: flex; align-items: center; gap: 14px; font-family: var(--hud); font-size: 11px; letter-spacing: 0.04em; color: var(--mist); }
.beat .beat-k b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.beat .beat-k b::after { content: ''; display: inline-block; width: 28px; height: 1px; margin-left: 14px; vertical-align: middle; background: var(--mist); opacity: 0.5; }
.beat h2 { font-size: clamp(44px, 4.9vw, 92px); font-weight: 200; line-height: 1; letter-spacing: -0.045em; max-width: 12ch; }
/* the one accent word per heading: Instrument Serif italic, a touch larger so it sits level with the thin sans */
.ser { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -0.015em; line-height: 0; }
.beat .sub { margin-top: 28px; max-width: 40ch; }
@media (min-width: 721px) { .chapter.beat .sub { white-space: normal; max-width: 40ch; } }
.beat .beat-list { margin-top: 30px; }
.beat .next { margin-top: 34px; }
.beat .meta-line { margin-top: 22px; }
/* words only: centered in the screen, a step larger */
.beat.words { justify-content: center; }
.beat.words h2 { font-size: clamp(52px, 6vw, 112px); max-width: 15ch; }
.beat.words.mid .chapter-inner { justify-items: center; text-align: center; }
#project .chapter-inner { margin-top: -15vh; }   /* sits a little high, leaving the bottom of the screen to the long wave */
/* model only: nothing to read, just the quiet scroll cue from the cover */
.beat.model .scroll-cue { position: absolute; left: 50%; bottom: calc(24px + 20px - 10px - 6.5px); transform: translateX(-50%); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.beat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: min(400px, 100%); font-family: var(--hud); font-size: 11px; letter-spacing: 0.04em; color: var(--mist); text-align: left; }
.beat-list li { display: flex; align-items: baseline; gap: 12px; }
.beat-list li::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted rgba(220,225,240,0.18); transform: translateY(-3px); }
.beat-list .k { color: var(--ink); min-width: 12ch; }
.beat-list .v { order: 2; }
.beat .meta-line { font-family: var(--hud); font-size: 11px; letter-spacing: 0.04em; color: var(--mist); }
.beat .meta-line span + span::before { content: '\00b7'; margin: 0 10px; opacity: 0.6; }
.beat .chapter-inner > * { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .55s ease, transform .7s cubic-bezier(.3,0,.2,1), filter .55s ease; }
.beat.on .chapter-inner > * { opacity: 1; transform: none; filter: none; transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.2,.7,.2,1); }
.beat.on .chapter-inner > :nth-child(1) { transition-delay: .15s; }
.beat.on .chapter-inner > :nth-child(2) { transition-delay: .27s; }
.beat.on .chapter-inner > :nth-child(3) { transition-delay: .42s; }
.beat.on .chapter-inner > :nth-child(4) { transition-delay: .57s; }
.beat.on .chapter-inner > :nth-child(5) { transition-delay: .72s; }
@media (prefers-reduced-motion: reduce) { .beat .chapter-inner > * { opacity: 1; transform: none; filter: none; transition: none; } }

/* Top center: a minimal index bar — number, subject name, a two-line menu icon, and a hairline showing how far through the subjects you are */
.picker { position: relative; gap: 14px; background: none; border: 0; border-radius: 0; padding: 12px 4px 14px; backdrop-filter: none; -webkit-backdrop-filter: none; font-family: var(--hud); font-size: 11px; letter-spacing: 0.04em; }
.picker .pk-n { color: var(--accent); font-variant-numeric: tabular-nums; transition: color .8s; }
.picker .pk-name { color: var(--ink); min-width: 9ch; text-align: center; }
.picker .pk-ic { display: grid; gap: 4px; width: 14px; }
.picker .pk-ic i { display: block; height: 1px; background: var(--ink); transition: transform .35s cubic-bezier(.6,0,.2,1); }
.picker .pk-ic i + i { width: 9px; justify-self: end; }
.picker:hover .pk-ic i + i { transform: scaleX(1.55); transform-origin: right; }
.picker[aria-expanded="true"] .pk-ic i:first-child { transform: translateY(2.5px) rotate(45deg); }
.picker[aria-expanded="true"] .pk-ic i + i { width: 14px; transform: translateY(-2.5px) rotate(-45deg); }
.picker .pk-bar { position: absolute; left: 4px; right: 4px; bottom: 6px; height: 1px; background: rgba(220,225,240,0.14); overflow: hidden; }
.picker .pk-bar b { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: background .8s; }
.picker:hover { border: 0; }
@media (prefers-reduced-motion: reduce) { .picker .pk-ic i { transition: none; } }