/* =====================================================================
   TODD PRATER — site design system
   Thesis: every page is one string of the same guitar, played in light.
     Home E · Music A · Live D · Lessons G · About B · Booking e

   Light roles (the same meaning everywhere):
     amber  = the string, the sound itself
     red    = Todd: the guitar in his illustration, the player's moment
     cream  = the paper and ink of that illustration; the highlight
   ===================================================================== */
:root {
  --stage: oklch(12.5% .012 45);          /* warm stage black */
  --stage-2: oklch(15.5% .016 40);
  --stage-3: oklch(19% .02 38);
  --night: oklch(20% .05 268);            /* the cool haze behind the lights */
  --amber: oklch(81% .15 72);
  --amber-glow: oklch(74% .17 62);
  --amber-deep: oklch(58% .15 52);
  --red: oklch(62% .215 27);
  --red-glow: oklch(58% .22 25);
  --red-btn: oklch(54% .2 27);            /* button fill: cream text on it is 4.99:1 (on --red it was 3.6:1) */
  --red-text: oklch(74% .15 35);          /* small red words over the scenes: 5:1 or better on their dark pill */
  --cream: oklch(95% .03 85);
  --paper: oklch(90% .03 85);

  --color-paper: var(--stage);
  --color-ink: oklch(95% .022 85);
  --color-ink-soft: oklch(80% .025 75);
  --color-ink-faint: oklch(64% .02 65);
  --line: oklch(95% .02 85 / .12);

  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-xs: .74rem; --text-sm: .88rem; --text-md: 1rem; --text-lg: 1.14rem; --text-xl: 1.5rem;
  --space-xs: .35rem; --space-sm: .6rem; --space-md: 1rem; --space-lg: 1.6rem; --space-xl: 2.6rem; --space-2xl: 4.5rem;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .2s;
  --wrap: 72rem;
  --head-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--stage); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  margin: 0; background: var(--stage); color: var(--color-ink);
  font: 400 var(--text-md)/1.6 var(--font-body); font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: var(--amber); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--cream); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--red); color: var(--cream); }
h1, h2, h3 { margin: 0 0 var(--space-md); font-weight: 800; }
p { margin: 0 0 var(--space-md); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--amber); color: var(--stage); font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }

/* ----------------------------------------------------------- type */
.display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: .86; }
.serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: .8em; margin: 0 0 var(--space-md); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.eyebrow.red { color: var(--red); }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--color-ink-soft); max-width: 40rem; line-height: 1.55; }
.cap { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-faint); }

/* the "to supply" marker: every missing fact on the site wears this */
.supply {
  display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 6px; border: 1px dashed oklch(81% .15 72 / .55); color: var(--amber); background: oklch(81% .15 72 / .07);
  white-space: nowrap; vertical-align: .1em;
}
.supply-block { border: 1px dashed oklch(81% .15 72 / .4); border-radius: var(--radius-md); padding: var(--space-lg); background: oklch(81% .15 72 / .035); color: var(--color-ink-soft); }
.supply-block .supply { margin-bottom: var(--space-sm); }

/* ---------------------------------------------------------- header */
.head {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 max(20px, calc((100vw - var(--wrap)) / 2));
  background: linear-gradient(180deg, oklch(10% .01 45 / .82), oklch(10% .01 45 / .35) 70%, transparent);
  transition: background .4s, backdrop-filter .4s;
}
.head.solid { background: oklch(11% .012 45 / .78); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.brand { display: block; flex: 0 0 auto; line-height: 0; border-radius: 6px; }
.brand img { height: 38px; width: auto; filter: drop-shadow(0 0 10px oklch(81% .15 72 / .35)); transition: filter .5s; }
.brand:hover img { filter: drop-shadow(0 0 14px oklch(81% .15 72 / .8)) drop-shadow(0 0 2px var(--cream)); }

.strings { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.strings a {
  position: relative; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 7px; padding: 12px 12px 16px; text-decoration: none;
  color: var(--color-ink-soft); font-size: .86rem; font-weight: 500; letter-spacing: .01em; border-radius: 8px; transition: color .3s;
}
.strings a b { font: 500 .62rem var(--font-mono); letter-spacing: .06em; color: var(--color-ink-faint); transition: color .3s, text-shadow .3s; }
.strings a:hover, .strings a:focus-visible, .strings a[aria-current="page"] { color: var(--cream); }
.strings a:hover b, .strings a[aria-current="page"] b { color: var(--amber); text-shadow: 0 0 10px var(--amber-glow); }
/* each link sits on its own string; the thickness follows the real gauge order, low E thickest */
.strings svg { position: absolute; left: 6px; right: 6px; bottom: 6px; width: calc(100% - 12px); height: 10px; overflow: visible; pointer-events: none; }
.strings path { fill: none; stroke: oklch(90% .03 80 / .28); stroke-width: var(--gauge, 1); stroke-linecap: round; transition: stroke .3s; }
.strings a:hover path, .strings a:focus-visible path { stroke: var(--amber); filter: drop-shadow(0 0 4px var(--amber-glow)); }
.strings a[aria-current="page"] path { stroke: var(--amber); filter: drop-shadow(0 0 5px var(--amber-glow)); }

.head-tools { display: flex; align-items: center; gap: 8px; }
.sound {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  font: 500 .66rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-soft);
  background: oklch(20% .02 40 / .55); border: 1px solid var(--line); transition: color .3s, border-color .3s, box-shadow .3s;
}
.sound:hover { color: var(--cream); border-color: oklch(81% .15 72 / .5); }
.sound[aria-pressed="true"] { color: var(--amber); border-color: oklch(81% .15 72 / .6); box-shadow: 0 0 22px -6px var(--amber-glow); }
.sound i { display: inline-flex; gap: 2px; align-items: center; height: 12px; }
.sound i span { width: 2px; height: 3px; border-radius: 2px; background: currentColor; transition: height .3s; }
.sound[aria-pressed="true"] i span { animation: eq 1.1s ease-in-out infinite; }
.sound i span:nth-child(2) { animation-delay: -.3s; } .sound i span:nth-child(3) { animation-delay: -.6s; } .sound i span:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.menu-btn { display: none; }

/* ---------------------------------------------------------- buttons */
.btn {
  --b: var(--amber); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; cursor: pointer;
  font: 600 .95rem var(--font-body); letter-spacing: .01em; text-decoration: none; color: var(--stage); background: var(--b); border: 1px solid var(--b);
}
.btn:hover { color: var(--stage); }
.btn.red { --b: var(--red-btn); color: var(--cream); }
.btn.red:hover { color: var(--cream); box-shadow: 0 0 34px -6px var(--red-glow); }
.btn.ghost { background: oklch(16% .015 40 / .55); color: var(--color-ink); border-color: oklch(95% .02 85 / .28); backdrop-filter: blur(6px); }
.btn.ghost:hover { color: var(--cream); border-color: var(--amber); }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---------------------------------------------------------- sections */
main { display: block; }
.sec { position: relative; padding: clamp(4rem, 9vw, 8rem) 0; }
.sec.tight { padding: clamp(3rem, 6vw, 5rem) 0; }
/* a divider already separates two sections: the space either side of it can be tighter */
.sec:has(+ .wrap > .lp-divider) { padding-bottom: clamp(3rem, 6vw, 5rem); }
.wrap:has(> .lp-divider) + .sec { padding-top: clamp(3rem, 6vw, 5rem); }
.sec-head { max-width: 44rem; margin-bottom: var(--space-xl); }
.sec-head h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .88; letter-spacing: .005em; }
.sec-head h2 em { font-family: var(--font-serif); font-weight: 400; text-transform: none; color: var(--amber); letter-spacing: 0; }
.grid-2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.glass {
  position: relative; border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, oklch(21% .02 45 / .72), oklch(14% .014 40 / .72)); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .05), 0 30px 80px -40px #000;
}

/* page head (non-film heroes place their words here too) */
.page-intro { padding-top: calc(var(--head-h) + 3rem); }

/* the six strings as a page index (home) */
.index { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.index li { border-bottom: 1px solid var(--line); }
.index a {
  position: relative; display: grid; grid-template-columns: 5.2rem 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(.4rem, 1vw, 1rem); text-decoration: none; color: var(--color-ink); overflow: hidden; isolation: isolate;
}
.index .note { font: 900 clamp(2.4rem, 5vw, 3.6rem)/1 var(--font-display); color: oklch(95% .02 85 / .16); transition: color .5s, text-shadow .5s; }
.index .note small { display: block; font: 500 .6rem var(--font-mono); letter-spacing: .12em; color: var(--color-ink-faint); margin-top: 6px; }
.index h3 { margin: 0; font: 900 clamp(1.8rem, 4.2vw, 3.2rem)/.95 var(--font-display); text-transform: uppercase; }
.index p { margin: .35rem 0 0; color: var(--color-ink-soft); font-size: .95rem; max-width: 36rem; }
.index .go { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: all .4s var(--ease-out); }
.index .go svg { width: 18px; stroke: var(--color-ink); fill: none; stroke-width: 1.6; }
.index .wire { position: absolute; left: 0; right: 0; top: 50%; height: 24px; margin-top: -12px; z-index: -1; pointer-events: none; opacity: .0; transition: opacity .5s; }
.index a:hover .note, .index a:focus-visible .note { color: var(--amber); text-shadow: 0 0 24px var(--amber-glow); }
.index a:hover .go, .index a:focus-visible .go { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 30px -4px var(--amber-glow); }
.index a:hover .go svg { stroke: var(--stage); }
.index a:hover .wire, .index a:focus-visible .wire { opacity: 1; }
.index .wire path { fill: none; stroke: var(--amber); stroke-width: 1.2; filter: drop-shadow(0 0 6px var(--amber-glow)); }

/* figure frames */
.figure { margin: 0; }
.figure img { border-radius: var(--radius-lg); width: 100%; height: auto; }
.figure figcaption { margin-top: .7rem; }
.sketch-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 40px 120px -40px oklch(58% .22 25 / .45), 0 0 0 1px oklch(95% .03 85 / .1); }
.sketch-frame img { border-radius: 0; }
.sketch-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, oklch(12% .012 45 / .55)); }

/* ---------------------------------------------------------- forms */
.form { display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font: 500 .7rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 15px; border-radius: 12px; font: 400 1rem var(--font-body); color: var(--color-ink);
  background: oklch(10% .01 45 / .7); border: 1px solid oklch(95% .02 85 / .16); transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px oklch(81% .15 72 / .18), 0 0 30px -10px var(--amber-glow); }
.field [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px oklch(62% .215 27 / .2); }
.field .err { font-size: .8rem; color: oklch(75% .16 27); min-height: 1em; }
.field .hint { font-size: .8rem; color: var(--color-ink-faint); }
.form-status { border-radius: 12px; padding: 14px 16px; border: 1px solid var(--line); background: oklch(18% .02 45 / .6); display: none; }
.form-status.show { display: block; }

/* ---------------------------------------------------------- footer */
.foot { position: relative; padding: clamp(3.5rem, 7vw, 6rem) 0 2.5rem; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--stage), oklch(9% .01 45)); overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.4rem; align-items: end; }
.foot .brand img { height: 56px; }
.foot nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 8px 26px; justify-content: end; }
.foot nav a { color: var(--color-ink-soft); text-decoration: none; font-size: .92rem; }
.foot nav a b { font: 500 .6rem var(--font-mono); color: var(--color-ink-faint); margin-right: 6px; }
.foot nav a:hover { color: var(--amber); }
.foot-base { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--color-ink-faint); }
.foot-base a { color: var(--color-ink-soft); }

/* ---------------------------------------------------------- mobile */
@media (max-width: 980px) {
  .strings a { padding: 12px 8px 16px; font-size: .8rem; }
  .strings a b { display: none; }
}
@media (max-width: 820px) {
  :root { --head-h: 64px; }
  .brand img { height: 30px; }
  .head nav { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    background: oklch(20% .02 40 / .6); border: 1px solid var(--line); color: var(--color-ink);
  }
  .menu-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; fill: none; }
  .sound { padding: 0 11px; height: 44px; }
  .grid-2 { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot nav ul { justify-content: start; grid-template-columns: repeat(2, auto); }
  .index a { grid-template-columns: 3.4rem 1fr auto; }
  .index .go { width: 40px; height: 40px; }
  .wrap { width: calc(100% - 40px); }
}

/* the phone menu: six real strings, tap one to go */
.menu {
  position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr auto; padding: 18px 20px 28px;
  background: radial-gradient(90% 60% at 80% 10%, oklch(30% .08 40 / .55), transparent 70%), oklch(10% .01 45 / .97); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.menu.open { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }   /* visible at once so focus can move in */
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-top img { height: 30px; width: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; gap: 0; }
.menu li a { position: relative; display: flex; align-items: baseline; gap: 16px; padding: 14px 4px; text-decoration: none; color: var(--color-ink); }
.menu li a b { font: 500 .8rem var(--font-mono); color: var(--amber); width: 1.4rem; }
.menu li a span { font: 900 2.5rem/1 var(--font-display); text-transform: uppercase; }
.menu li svg { position: absolute; left: 0; right: 0; bottom: 4px; width: 100%; height: 14px; overflow: visible; }
.menu li path { fill: none; stroke: oklch(90% .03 80 / .3); stroke-width: var(--gauge, 1); }
.menu li a[aria-current="page"] path { stroke: var(--amber); filter: drop-shadow(0 0 5px var(--amber-glow)); }
.menu .cap { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------ film words (over the kit) */
.lp-beat h1, .lp-beat h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; }
.lp-beat h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: .9; text-wrap: balance; }
.lp-beat h1.mega { font-size: clamp(4.2rem, 13vw, 12.5rem); line-height: .8; margin-bottom: .1em; text-shadow: 0 0 60px oklch(12% .012 45 / .9); }
.lp-beat h1.mega span { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--cream); text-shadow: none; }
.lp-beat .serif-line { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.35rem, 2.2vw, 2rem); color: var(--cream); line-height: 1.2; }
.lp-beat .lp-num { color: var(--amber); }
.title-beat { width: min(62rem, calc(100% - 48px)); }
.title-beat::before { inset: -10% -8% -10% -12%; }
.cta-beat::before { inset: -40% -10%; }
.cta-beat .lp-cta { justify-content: center; }
@media (max-width: 720px) {
  .lp-beat h1.mega { font-size: clamp(3.6rem, 21vw, 6rem); }
  .lp-beat h1.mega span { -webkit-text-stroke-width: 1px; }
  .lp-beat h2 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .title-beat { top: calc(var(--head-h) + 5svh) !important; bottom: auto !important; }
  .cta-beat .lp-cta { justify-content: flex-start; }
}
@media (min-width: 721px) and (max-width: 1180px) { .lp-credit { max-width: calc(50vw - 130px); } }   /* clear of the centred skip button */
@media (max-width: 720px) {
  .lp-beat.pos-center.pos-low, .lp-beat.pos-center.pos-high { translate: 0 0; }
  .lp-credit { top: auto !important; bottom: 66px !important; }
  .lp.live:not(.short) .lp-credit { top: calc(var(--head-h) + 10px) !important; bottom: auto !important; }
  .lp.live.short .lp-credit { bottom: 14px !important; }   /* short heroes have no skip button; 66px landed on the words */
  .lp .lp-beat.pos-low { bottom: calc(12svh + 34px); }
}
@media (max-width: 820px) { .sound .lbl { display: inline !important; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* ------------------------------------------------ page heroes & parts */
.lp-beat h1.big { font-size: clamp(4rem, 10vw, 9rem); line-height: .82; margin-bottom: .12em; }
.lp.live .lp-beat { top: 56%; }
.lp.live.short { --lp-len: 62; }
.lp.live.short .lp-pin { min-height: 520px; }
.lp.live.short .lp-beat.pos-high { top: calc(var(--head-h) + 8svh); }
.grid-2.top { align-items: start; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: .82rem; }

/* music */
.player-mini { display: flex; gap: 10px; flex-wrap: wrap; margin: 1.3rem 0 .6rem; }
.player-mini .file { cursor: pointer; }
.player-mini .btn[disabled] { opacity: .45; cursor: not-allowed; }
.lp-beat .read { max-width: 30rem; line-height: 1.5; color: var(--color-ink-soft); text-shadow: 0 1px 10px #000; }
#song:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 3px; }   /* the hidden input sits right before its visible label */
.tracks { list-style: none; margin: 0; padding: 0; counter-reset: tr; }
.tracks li.empty { border: 1px dashed oklch(81% .15 72 / .35); border-radius: var(--radius-md); padding: 1.3rem; color: var(--color-ink-soft); }
.tracks li.empty p { margin: .6rem 0 0; }
.platforms { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.platforms li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem .2rem; border-bottom: 1px solid var(--line); font-weight: 500; }

/* live */
.shows { display: grid; gap: 14px; }
.show { display: grid; grid-template-columns: 6rem 1fr; gap: 1.4rem; align-items: center; padding: 1.3rem 1.4rem; border-radius: var(--radius-md); border: 1px dashed oklch(81% .15 72 / .35); background: oklch(81% .15 72 / .03); }
.show .when { display: grid; justify-items: center; font-family: var(--font-display); text-transform: uppercase; line-height: .9; color: var(--color-ink-faint); }
.show .when .d { font-size: 2.8rem; font-weight: 900; }
.show .when .m { font: 500 .66rem var(--font-mono); letter-spacing: .16em; }
.show p { margin: .5rem 0 0; color: var(--color-ink-soft); }

/* lessons: the explorer */
.fb { padding: clamp(1rem, 2.4vw, 1.8rem); }
.fb-controls { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: end; margin-bottom: 1.2rem; }
.fb-controls .field { min-width: 11rem; }
.fb-chords { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fb-lbl { font: 500 .7rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-soft); width: 100%; margin-bottom: 1px; }
.fb-chords button:not(.btn) { min-width: 44px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid oklch(95% .02 85 / .16); background: oklch(10% .01 45 / .7); color: var(--color-ink); font: 600 .9rem var(--font-body); cursor: pointer; transition: all .25s; }
.fb-chords button:not(.btn):hover { border-color: var(--amber); }
.fb-chords button[aria-pressed="true"] { background: var(--amber); color: var(--stage); border-color: var(--amber); box-shadow: 0 0 24px -6px var(--amber-glow); }
.fb-scroll { overflow-x: auto; margin: 0 -.4rem; padding: .4rem; }
.fb-swipe { display: none; margin: 0 0 .6rem; }
@media (max-width: 900px) {
  .fb-swipe { display: block; }
  .fb-scroll { padding-right: 2.5rem; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}
.fb-board { min-width: 760px; display: grid; gap: 0; position: relative; padding: 6px 0; border-radius: 10px;
  background: linear-gradient(180deg, oklch(20% .03 45), oklch(16% .025 40)); box-shadow: inset 0 0 0 1px oklch(95% .02 85 / .08), 0 20px 60px -30px #000; }
.fb-row { display: grid; grid-template-columns: 2rem 2.4rem repeat(15, 1fr); align-items: center; height: 40px; position: relative; }
.fb-row:not(.fb-nums)::before { content: ""; position: absolute; left: 2rem; right: 0; top: 50%; height: calc(1px + var(--sw, 0px)); background: linear-gradient(180deg, oklch(88% .04 80), oklch(62% .04 70)); opacity: .55; }
.fb-row[data-string="0"] { --sw: 2px; } .fb-row[data-string="1"] { --sw: 1.6px; } .fb-row[data-string="2"] { --sw: 1.2px; } .fb-row[data-string="3"] { --sw: .8px; } .fb-row[data-string="4"] { --sw: .4px; }
.fb-sn { font: 500 .72rem var(--font-mono); color: var(--color-ink-faint); text-align: center; z-index: 1; }
.fb-cell { position: relative; height: 100%; display: grid; place-items: center; border-right: 2px solid oklch(78% .02 80 / .35); }
.fb-cell.open { border-right: 5px solid oklch(90% .03 85 / .7); }
.fb-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; font: 600 .72rem var(--font-body); color: oklch(18% .03 50);
  background: radial-gradient(circle at 40% 35%, oklch(92% .12 80), var(--amber) 55%, var(--amber-deep)); box-shadow: 0 0 16px -2px var(--amber-glow); transition: transform .2s; }
.fb-dot.root { color: var(--cream); background: radial-gradient(circle at 40% 35%, oklch(75% .19 30), var(--red) 55%, oklch(45% .18 25)); box-shadow: 0 0 18px -2px var(--red-glow); }
.fb-dot:hover { transform: scale(1.12); }
.fb-dot.ring { animation: ring .7s var(--ease-out); }
@keyframes ring { 0% { box-shadow: 0 0 0 0 oklch(81% .15 72 / .9); } 100% { box-shadow: 0 0 0 16px oklch(81% .15 72 / 0); } }
.fb-nums { height: 26px; }
.fb-nums span { font: 500 .66rem var(--font-mono); color: var(--color-ink-faint); text-align: center; }
.fb-read { margin: 1rem 0 0; font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; color: var(--cream); }

/* labels drawn on the neck film: note beads */
.lp-label.note > span { transform: translate(-50%, -50%); padding: 0; font: 600 .6rem var(--font-body); letter-spacing: 0; text-transform: none; color: oklch(16% .03 50); text-shadow: none; }
.lp-label.note > span::after { display: none; }
/* roots: the bloom turns a lit red dot white-gold, so the A sits on its own red disc */
.lp-label.note.root > span { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; color: var(--cream); font-weight: 800; background: radial-gradient(circle at 40% 35%, oklch(68% .2 30), var(--red) 60%, oklch(42% .17 25)); box-shadow: 0 0 10px -1px var(--red-glow); }

/* about */
.facts-list { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.facts-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem .1rem; border-bottom: 1px solid var(--line); }
.facts-list li > span:first-child { font: 500 .7rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-faint); }
.facts-list b { font-weight: 600; }
.figure.photo img { border-radius: var(--radius-lg); box-shadow: 0 40px 100px -40px #000, 0 0 0 1px var(--line); }
.chain-steps { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius-md); overflow: hidden; counter-reset: ch; }
.chain-steps li { background: var(--stage); padding: 1.2rem 1.3rem; counter-increment: ch; }
.chain-steps li b { display: block; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.4rem; line-height: 1; margin-bottom: .45rem; }
.chain-steps li b::before { content: counter(ch, decimal-leading-zero); display: block; font: 500 .64rem var(--font-mono); color: var(--amber); letter-spacing: .14em; margin-bottom: .5rem; }
.chain-steps li p { margin: 0; color: var(--color-ink-soft); font-size: .94rem; }

/* booking */
.book-sec { padding-top: 2rem; }
.form-status.ok { border-color: oklch(81% .15 72 / .5); color: var(--cream); box-shadow: 0 0 30px -12px var(--amber-glow); }
.fx-cap { margin-top: -1.8rem; }

@media (max-width: 820px) {
  .chain-steps { grid-template-columns: 1fr; }
  .show { grid-template-columns: 4rem 1fr; }
  .lp.live .lp-beat { top: auto; bottom: 7%; }
}
@media (max-width: 720px) {
  .lp-beat h1.big { font-size: clamp(3.4rem, 17vw, 5.2rem); }
  .lp.live.short .lp-beat.pos-high { top: auto; bottom: 10%; }
  .lp.live.short, .lp.live.short.static { height: 70svh; min-height: 480px; }
}
.lp-beat p.read { font: 400 .86rem/1.5 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--color-ink-soft); }

/* learning graph on phones: three topics share a row about 100 px apart, so long names wrap to two short lines */
@media (max-width: 720px) {
  .fx[data-fx="graph"] .fx-label { white-space: normal; width: max-content; max-width: 6.6rem; text-align: center; line-height: 1.3; }
}

/* ------------------------------------------------ readability over the scenes
   Measured, not eyeballed: tools/contrast.mjs + contrast.py (2026-09-29) found 23 desktop and 34 phone text runs
   under WCAG AA over the brightest frame behind them. Small words get their own dark backing, the pool behind
   each beat is deeper, and phones get a dark band under the words at the foot of every film. */
.lp-beat .lp-num, .lp-beat .lp-eyebrow { width: fit-content; padding: .42em .8em; border-radius: 6px; background: oklch(9% .01 45 / .84); text-shadow: none; }
.lp-beat .lp-eyebrow { color: var(--red-text); }
.lp-beat.pos-center .lp-eyebrow, .lp-beat.pos-center .lp-num { margin-left: auto; margin-right: auto; }
.lp-beat::before { background: radial-gradient(closest-side, oklch(9% .012 45 / .84), oklch(9% .012 45 / .62) 58%, oklch(9% .012 45 / .24) 84%, transparent); }
.lp-credit { width: fit-content; padding: 3px 8px; border-radius: 5px; background: oklch(9% .01 45 / .74); color: oklch(84% .02 70); font-size: .68rem; }
/* wide screens only: words in the top band while the scene holds its subject low (phones keep words at the foot) */
@media (min-width: 721px) { .lp-beat.wide-high { top: calc(var(--head-h) + 7svh); translate: 0 0; } }
@media (max-width: 720px) {
  .lp-beat.pos-center .lp-eyebrow, .lp-beat.pos-center .lp-num { margin-left: 0; }   /* phones set every beat flush left */
  .lp-credit { font-size: .62rem; right: auto; max-width: calc(100% - 40px); color: oklch(84% .02 70); text-shadow: none; }
  .lp:not(.static) .lp-beats::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: -1; pointer-events: none;
    background: linear-gradient(0deg, oklch(8% .01 45 / .9), oklch(8% .01 45 / .76) 55%, transparent); }
}