/* Klangraum, Stimmtraining. Tokens with their derivations, then the score system. */

:root {
  /* Colour world: the treated recording room (cool grey felt, blue-black quiet) and the voice (warm signal). */
  --color-canvas: oklch(0.955 0.008 230);   /* the room's grey felt walls, cooled toward the ink; deliberately not paper or cream */
  --color-ink: oklch(0.21 0.03 240);        /* blue-black of a quiet room, body ink */
  --color-muted: oklch(0.46 0.025 240);     /* ink lifted for secondary text, 6.2:1 on canvas */
  --color-rule: oklch(0.74 0.02 235);       /* stave rules on the canvas, non-text, visible at a glance */
  --color-rule-faint: oklch(0.86 0.012 235);/* the second stave rule */
  --color-rule-strong: oklch(0.56 0.03 240);/* interactive boundaries on canvas, above 3:1 */
  --color-room: oklch(0.21 0.03 240);       /* the dark room as a whole surface (problems, booking, footer) */
  --color-room-rule: oklch(0.42 0.03 240);  /* stave rules on the room surface */
  --color-room-rule-faint: oklch(0.30 0.03 240);
  --color-room-muted: oklch(0.78 0.02 235); /* secondary text on the room surface, 8.9:1 */
  --color-signal: oklch(0.74 0.16 62);      /* the voice: warm amber light; the line on dark, the primary action, one surface */
  --color-on-signal: oklch(0.21 0.03 240);  /* ink on the amber surface */
  --color-signal-rule: oklch(0.60 0.14 62); /* rules on the amber surface */
  --color-signal-deep: oklch(0.58 0.15 58); /* the same amber, deepened for lines and marks on the pale canvas (3:1 non-text) */

  --color-text: var(--color-ink);
  --color-bg: var(--color-canvas);
  --color-accent: var(--color-signal);
  --color-selection-bg: var(--color-signal);
  --color-selection-fg: var(--color-ink);
  --line: var(--color-signal-deep);
  --rule: var(--color-rule);
  --rule-faint: var(--color-rule-faint);

  --font-score: "Geologica", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  --space-tight: 0.5rem;
  --space-section: clamp(3rem, 6vw, 5rem);
  --space-air: clamp(5rem, 12vw, 9rem);
  --gutter: clamp(1rem, 4vw, 3.5rem);        /* 57 px at 1440, inside the measured 0 to 72 px */
  --gap: clamp(1rem, 2vw, 2rem);
  --radius-control: 0.25rem;                  /* a bar end, not a pill */
  --scroll-offset: 5rem;
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-wipe: cubic-bezier(0.76, 0, 0.24, 1);
  --word-ms: 320ms;

  /* Score voices: weight is stress, SHRP is articulation, margin is tempo. */
  --v-recorded: "wght" 260, "SHRP" 0;
  --v-plain: "wght" 450, "SHRP" 100;
  --v-stress2: "wght" 640, "SHRP" 100;
  --v-stress1: "wght" 820, "SHRP" 100;
  --v-mono: "wght" 500, "SHRP" 100;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: 112.5%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  font-optical-sizing: auto;
  font-kerning: normal;
}

body { margin: 0; background: var(--color-canvas); color: var(--color-ink); overflow-x: clip; }

h1, h2, h3, h4 { text-wrap: balance; margin: 0; font-family: var(--font-score); font-variation-settings: "wght" 640, "SHRP" 100; line-height: 1.05; letter-spacing: -0.015em; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
p { margin: 0; }
dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-inline-size: 0; }
ul[role="list"], ol[role="list"], nav ul, nav ol { list-style: none; padding-inline-start: 0; margin: 0; }
svg { display: block; }
button { font: inherit; color: inherit; }

::selection { background: var(--color-selection-bg); color: var(--color-selection-fg); }
:focus-visible { outline: var(--focus-ring-width) solid var(--color-signal-deep); outline-offset: var(--focus-ring-offset); }
.room :focus-visible, .foot :focus-visible { outline-color: var(--color-signal); }
.signal :focus-visible { outline-color: var(--color-ink); }
[id] { scroll-margin-top: var(--scroll-offset); }

a { color: inherit; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; }
.link { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 0.1em; }
@media (hover: hover) {
  .link { background-size: 0 1px; transition: background-size 450ms var(--ease-out); }
  .link:hover, .link:focus-visible { background-size: 100% 1px; transition-duration: 125ms; }
}

.skip-link { position: absolute; inset-block-start: 0; inset-inline-start: 0; translate: 0 -200%; transition: translate 120ms ease-out; background: var(--color-ink); color: var(--color-canvas); padding: 0.5rem 1rem; z-index: 1000; }
.skip-link:focus-visible { translate: 0 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* Header */
.site-head { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.5rem; padding-block: 0.85rem; background: color-mix(in oklch, var(--color-canvas) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-rule); }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-family: var(--font-score); font-variation-settings: "wght" 700, "SHRP" 100; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand__mark { width: 0.32em; height: 1.1em; background: var(--color-signal-deep); border-radius: 1px; }
.room .brand__mark, .foot .brand__mark { background: var(--color-signal); }
.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: 1.4rem; align-items: center; }
.site-nav a { text-decoration: none; font-size: 0.95rem; }
.site-nav li:last-child { margin-inline-start: 0.5rem; }
@media (max-width: 760px) { .site-nav li:not(:last-child) { display: none; } }

/* Buttons: a bar end. The primary action is the one amber thing a visitor can press. */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.25rem; border: 2px solid var(--color-ink); border-radius: var(--radius-control); background: transparent; color: var(--color-ink); font-family: var(--font-score); font-variation-settings: "wght" 600, "SHRP" 100; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 120ms ease-out, background-color 125ms ease-out, color 125ms ease-out, border-color 125ms ease-out; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-on-signal); }
.btn--primary:hover { background: color-mix(in oklch, var(--color-signal) 86%, white); border-color: color-mix(in oklch, var(--color-signal) 86%, white); }
.btn__short { display: none; }
@media (max-width: 480px) {
  .btn--head { padding: 0.55rem 0.75rem; font-size: 0.92rem; white-space: nowrap; gap: 0.45rem; }
  .btn--head .btn__long { display: none; }
  .btn--head .btn__short { display: inline; }
  .site-head { gap: 0.75rem; }
  .brand { font-size: 1.1rem; }
}
.btn--ghost { border-color: var(--color-rule-strong); }
.btn--ghost:hover { border-color: var(--color-ink); }
.room .btn--ghost { color: var(--color-canvas); border-color: var(--color-room-muted); }
.room .btn--ghost:hover { border-color: var(--color-canvas); }
.signal .btn { border-color: var(--color-ink); color: var(--color-ink); }
.signal .btn--primary { background: var(--color-ink); color: var(--color-canvas); }
.signal .btn--primary:hover { background: color-mix(in oklch, var(--color-ink) 85%, black); }
.btn[aria-pressed="true"] { background: var(--color-ink); color: var(--color-canvas); border-color: var(--color-ink); }
.signal .btn[aria-pressed="true"] { background: var(--color-canvas); color: var(--color-ink); border-color: var(--color-canvas); }

/* The start mark: the control that sits at the head of a stave. */
.mark-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem 0.55rem 0.7rem; border: 0; border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-canvas); font-family: var(--font-score); font-variation-settings: "wght" 640, "SHRP" 100; font-size: 1rem; line-height: 1.2; cursor: pointer; transition: transform 120ms ease-out, background-color 125ms ease-out; }
.mark-btn svg { width: 1.3em; height: 1.3em; color: var(--color-signal); }
.mark-btn:hover { background: color-mix(in oklch, var(--color-ink) 85%, black); }
.mark-btn:active { transform: scale(0.97); }
.mark-btn[aria-pressed="true"] { background: var(--color-signal-deep); color: var(--color-canvas); }
.mark-btn[aria-pressed="true"] svg { color: var(--color-canvas); }

/* The score. Text on drawn staves, with notation marks. Two rules per line: a faint cap line and the baseline rule. */
.score {
  position: relative;
  --lh: 1.08;
  --base: 0.84lh;   /* where the baseline rule sits inside each line box (Geologica ascent 0.95, descent 0.25) */
  --cap: 0.2lh;     /* the faint cap-height rule */
  padding-block: 0.2em 0.3em;
  font-family: var(--font-score);
  line-height: var(--lh);
  letter-spacing: -0.02em;
  font-variation-settings: var(--v-plain);
}
.room .score { --rule: var(--color-room-rule); --rule-faint: var(--color-room-rule-faint); }
.signal .score { --rule: var(--color-signal-rule); --rule-faint: color-mix(in oklch, var(--color-signal-rule) 45%, var(--color-signal)); }
/* The rules are drawn on the text line itself, one period per line box, so every baseline sits on a rule. */
.score__line {
  margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-wrap: initial;
  background-image: linear-gradient(to bottom,
    transparent 0 var(--cap), var(--rule-faint) var(--cap) calc(var(--cap) + 1px),
    transparent calc(var(--cap) + 1px) calc(var(--base) - 1px), var(--rule) calc(var(--base) - 1px) var(--base),
    transparent var(--base) 100%);
  background-size: 100% 1lh;
  background-repeat: repeat-y;
}
.score--week .score__line, .score--answer .score__line, .fault .score__line { text-wrap: balance; }
.score .w {
  display: inline-block;
  font-variation-settings: var(--v-plain);
  margin-inline-end: 0.14em;
  transform: translateY(0);
  text-decoration: none;
  transition: font-variation-settings var(--word-ms) var(--ease-out), margin var(--word-ms) var(--ease-out), letter-spacing var(--word-ms) var(--ease-out), transform var(--word-ms) var(--ease-out), color var(--word-ms) ease-out, filter var(--word-ms) ease-out, opacity var(--word-ms) ease-out, background-size var(--word-ms) var(--ease-out);
  /* stress stroke, drawn below the descender line as a background so it never breaks at a g */
  background-image: linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-size: 0 0.07em;
  background-position: 0 calc(100% - 0.02em);
  padding-bottom: 0.1em;
}
.score .w[data-stress="2"] { font-variation-settings: var(--v-stress2); transform: translateY(-0.035em); }
.score .w[data-stress="1"] { font-variation-settings: var(--v-stress1); transform: translateY(-0.07em); }
.score .w[data-stress] { background-size: 100% 0.07em; }
/* The breath mark: a tick that opens a rest, with a bar line at the breath. */
.score .b { display: inline-block; width: 0.74em; height: 0.8em; vertical-align: -0.08em; margin-inline-start: 0.1em; margin-inline-end: 0.12em; color: var(--line); overflow: hidden; transition: width var(--word-ms) var(--ease-out), opacity var(--word-ms) ease-out, margin var(--word-ms) var(--ease-out); }
.score .b svg { width: 0.62em; height: 0.8em; }
/* The pause mark: a double bar at the sentence end. */
.score .pz { display: inline-block; width: 0.5em; height: 0.8em; vertical-align: -0.08em; margin-inline-start: 0.06em; color: var(--line); transition: opacity var(--word-ms) ease-out; }
.score .pz svg { width: 0.5em; height: 0.8em; }

/* Recorded state (set by JavaScript before the line has read the word): flat, soft, tight. */
.score.is-recorded .w:not(.is-read), .score.is-recorded .w:not(.is-read)[data-stress] { font-variation-settings: var(--v-recorded); letter-spacing: -0.05em; margin-inline-end: -0.02em; transform: translateY(0); color: var(--color-muted); background-size: 0 0.07em; }
.room .score.is-recorded .w:not(.is-read) { color: var(--color-room-muted); }
.signal .score.is-recorded .w:not(.is-read) { color: color-mix(in oklch, var(--color-ink) 60%, var(--color-signal)); }
.score.is-recorded .b:not(.is-read) { width: 0; margin: 0; opacity: 0; }
.score.is-recorded .pz:not(.is-read) { opacity: 0; }
/* Fault variants: one fault per fragment. */
.score.is-recorded[data-fault="nuscheln"] .w:not(.is-read) { font-variation-settings: "wght" 280, "SHRP" 0; letter-spacing: -0.075em; filter: blur(0.7px); margin-inline-end: 0.1em; }
.score.is-recorded[data-fault="monotonie"] .w:not(.is-read) { font-variation-settings: var(--v-mono); letter-spacing: -0.02em; margin-inline-end: 0.14em; }
.score.is-recorded[data-fault="schnell"] .w:not(.is-read) { font-variation-settings: "wght" 470, "SHRP" 100; letter-spacing: -0.03em; margin-inline-end: -0.12em; }
.score.is-recorded[data-fault="flat"] .w:not(.is-read) { font-variation-settings: "wght" 380, "SHRP" 30; letter-spacing: -0.03em; margin-inline-end: 0.12em; }
/* The hero keeps every word box at its trained width (set by JavaScript), so nothing reflows while the line reads. */
.score--hero.is-recorded .w:not(.is-read) { margin-inline-end: 0.14em; letter-spacing: -0.045em; }
.score--hero .w { text-align: left; }
.score.is-measuring .b, .score.is-measuring .pz { display: none; }
/* No transition while JavaScript sets the initial recorded state. */
.score.is-settling .w, .score.is-settling .b, .score.is-settling .pz { transition: none; }

/* The pacing line: a stave-height bar with a short amber wash trailing behind it. */
.score .line { position: absolute; left: 0; top: 0; width: 5px; height: 1em; background: var(--line); border-radius: 2px; opacity: 0; pointer-events: none; }
.score .line::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 1.6em; background: linear-gradient(to left, color-mix(in oklch, var(--line) 28%, transparent), transparent); opacity: 0; transition: opacity 300ms ease-out; }
.score.is-recorded .line, .score.is-playing .line { opacity: 1; }
.score.is-playing .line::before { opacity: 1; }
.score.is-done .line { opacity: 1; animation: linefade 700ms ease-out 900ms forwards; }
@keyframes linefade { to { opacity: 0; } }

/* Hero: the score is the viewport. */
.hero { padding-block: clamp(1rem, 2.5vw, 1.75rem) var(--space-section); overflow: clip; }
.hero .score--hero { font-size: clamp(2.5rem, 8.9vw, 9.2rem); --lh: 1.0; --base: 0.86lh; --cap: 0.18lh; }
.hero .score .score__line { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.hero .score--hero .score__line { padding-top: 0.08em; }
.hero .score br { display: none; }
@media (min-width: 700px) { .hero .score br { display: inline; } }
.score__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; font-size: 1rem; font-family: var(--font-text); letter-spacing: 0; line-height: 1.4; margin-bottom: 0.2em; }
.tempo-mark { font-family: var(--font-score); font-variation-settings: "wght" 600, "SHRP" 100; font-size: 0.95rem; color: var(--color-ink); display: inline-flex; align-items: baseline; gap: 0.3rem; padding-left: 0.9rem; border-left: 3px solid var(--line); }
.tempo-mark strong { font-size: 1.35rem; font-variation-settings: "wght" 820, "SHRP" 100; line-height: 1; }
.score-caption { font-size: 0.95rem; color: var(--color-muted); }
.score__head output { font-family: var(--font-score); font-variation-settings: "wght" 600, "SHRP" 100; font-size: 0.95rem; }
.score__head output:empty { display: none; }

.hero__answer { margin-top: clamp(0.75rem, 1.5vw, 1.25rem); }
.answer-caption { display: block; font-size: 0.95rem; color: var(--color-muted); margin-bottom: 0.25rem; }
.score--answer { font-size: clamp(1.6rem, 4vw, 4.2rem); }
.score--answer .score__line { font-variation-settings: inherit; }

.hero__row { margin-top: clamp(1rem, 2vw, 1.5rem); row-gap: 2rem; align-items: start; }
.hero__answer { margin-top: clamp(0.5rem, 1vw, 0.75rem); }
.score-caption, .answer-caption { text-wrap: balance; }
.hero__text { grid-column: 1 / span 12; }
.hero__legend { grid-column: 1 / span 12; }
@media (min-width: 900px) {
  .hero__text { grid-column: 1 / span 6; }
  .hero__legend { grid-column: 7 / span 6; }
}
.lede { font-size: clamp(1.1rem, 1.4vw, 1.3rem); max-width: 44ch; color: var(--color-ink); }
.hero__text { display: grid; }
.hero__text .actions { order: -1; margin-top: 0; margin-bottom: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1.25rem; }
.trust { margin-top: 0.8rem; color: var(--color-muted); font-size: 0.95rem; max-width: 50ch; }

@media (max-width: 699px) {
  .hero { padding-top: 0.75rem; }
  .hero .score--hero { font-size: clamp(2rem, 10vw, 2.6rem); }
  .score__head { gap: 0.5rem 0.9rem; margin-bottom: 0.3em; }
  .score__head .score-caption { order: -1; flex-basis: 100%; }
  .hero__answer { margin-top: 0.6rem; }
  .score--answer { font-size: clamp(1.35rem, 6.2vw, 1.8rem); }
  .hero__row { margin-top: 1rem; row-gap: 1.5rem; }
  .hero__text { display: grid; }
  .hero__text .actions { order: -1; margin-top: 0; margin-bottom: 1rem; }
  .lede { font-size: 1.05rem; }
}

/* Legend: the notation, explained once. */
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.legend > div { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 0.6rem; align-items: start; }
.legend > div.legend__title { display: block; grid-column: 1 / -1; font-size: 0.85rem; color: var(--color-muted); }
.legend svg { width: 2.2rem; height: 2.2rem; color: var(--color-signal-deep); }
.legend dt { font-family: var(--font-score); font-variation-settings: "wght" 640, "SHRP" 100; line-height: 1.2; }
.legend dd { grid-column: 2; font-size: 0.88rem; color: var(--color-muted); line-height: 1.4; }
@media (max-width: 479px) {
  .legend { grid-template-columns: 1fr; gap: 0.9rem; }
  .legend > div { grid-template-columns: 1.6rem 1fr; column-gap: 0.5rem; align-items: center; }
  .legend svg { width: 1.6rem; height: 1.6rem; }
  .legend dd { grid-column: 1 / -1; }
}

/* Section rhythm */
.section { padding-block: var(--space-section); }
.section--air { padding-block: var(--space-air); }
.section-head { margin-bottom: clamp(2rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(2rem, 5vw, 5rem); letter-spacing: -0.025em; line-height: 0.98; max-width: 14ch; }
.section-head p { margin-top: 1rem; max-width: 52ch; font-size: 1.1rem; }

/* Pictograms */
.pict { width: 24px; height: 24px; }
.pict--display { width: clamp(3rem, 4.5vw, 4rem); height: clamp(3rem, 4.5vw, 4rem); }

/* The dark room. Material: the felt wall (grain, motive: acoustic felt) and a light fall-off from the top. */
.room { background: var(--color-room); color: var(--color-canvas); position: relative; --line: var(--color-signal); }
.room::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in oklch, var(--color-room) 80%, white) 0, var(--color-room) 28rem); pointer-events: none; }
.room::after { content: ""; position: absolute; inset: 0; background: url("grain.svg"); opacity: 0.07; mix-blend-mode: screen; pointer-events: none; }
.room > * { position: relative; z-index: 1; }
.room .section-head p { color: var(--color-room-muted); }

/* Problems: the reel. Three faulty sentences on one stave, read by a fixed line as the visitor scrolls. */
.problems { padding-bottom: 0; }
.reel__stage { position: relative; }
.reel__line { display: none; }
.reel__track { display: grid; row-gap: clamp(2rem, 5vw, 3.5rem); padding-inline: var(--gutter); padding-bottom: var(--space-section); }
.fault { position: relative; border-top: 1px solid var(--color-room-rule); padding-top: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1rem; }
.fault__head { display: flex; align-items: center; gap: 1rem; }
.fault__head svg { color: var(--color-signal); flex: none; }
.fault__head h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.fault .score { font-size: clamp(2rem, 6vw, 6.2rem); }
.fault__notes { display: grid; gap: 0.75rem 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.pnote { font-size: 0.95rem; color: var(--color-room-muted); max-width: 36ch; line-height: 1.45; }
.pnote strong { display: block; color: var(--color-canvas); font-weight: 600; font-family: var(--font-score); font-variation-settings: "wght" 640, "SHRP" 100; }
.fault__play { justify-self: start; }

/* Reel mode (JavaScript, wide viewports): the stage pins, the track slides sideways under the line. */
.reel--on { height: 280vh; }
.reel--on .reel__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.reel--on .reel__line { display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2px; background: var(--color-signal); z-index: 2; box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-signal) 30%, transparent); }
.reel--on .reel__line::after { content: "130 Wörter/min"; position: absolute; top: calc(var(--scroll-offset) + 1.25rem); left: 1rem; font-family: var(--font-score); font-variation-settings: "wght" 640, "SHRP" 100; font-size: 0.9rem; color: var(--color-signal); white-space: nowrap; }
.reel--on .reel__track { display: flex; align-items: flex-start; gap: 14vw; padding: 0 0 0 50vw; width: max-content; will-change: transform; }
.reel--on .fault { border-top: 0; padding-top: 0; flex: none; display: block; width: max-content; padding-bottom: 7rem; }
.reel--on .fault__head { margin-bottom: 1rem; }
.reel--on .fault .score { font-size: clamp(5rem, 9vw, 9.5rem); white-space: nowrap; }
.reel--on .fault .score .line { display: none; }
.reel--on .fault__notes { display: none; }
.reel--on .fault__play { display: none; }
/* The caption slot: fixed left of the line, cross-fades per sentence, never passes under the line. */
.reel__caption { display: none; }
.reel--on .reel__caption { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; position: absolute; left: var(--gutter); right: calc(50% + 2.5rem); bottom: clamp(2rem, 8vh, 5rem); z-index: 3; transition: opacity 350ms ease-out; }
.reel--on .reel__caption.is-fading { opacity: 0; transition-duration: 150ms; }
.reel--on .reel__caption .pnote { max-width: 30ch; }

/* Programme: six staves, each carrying a practice phrase; the line descends through them. */
.bars { position: relative; }
.thread { position: absolute; top: 0; width: 3px; height: 100%; background: var(--color-signal-deep); transform-origin: top; border-radius: 1px; left: 0; z-index: 1; }
.bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem var(--gap); padding: clamp(1.25rem, 3vw, 2rem) 0; border-top: 1px solid var(--color-rule); }
.bar:last-child { border-bottom: 1px solid var(--color-rule); }
.bar__num { font-family: var(--font-score); font-variation-settings: "wght" 820, "SHRP" 100; font-size: clamp(3rem, 7vw, 7rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--color-signal-deep); font-variant-numeric: tabular-nums; transition: color 450ms ease-out; padding-left: 1rem; }
.bar.is-waiting .bar__num { color: transparent; -webkit-text-stroke: 1.5px var(--color-rule-strong); }
.bar__title { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.bar__meta { font-size: 0.9rem; color: var(--color-muted); font-family: var(--font-score); font-variation-settings: "wght" 560, "SHRP" 100; margin-top: 0.25rem; }
.bar__desc { max-width: 40ch; color: var(--color-muted); margin-top: 0.5rem; font-size: 0.98rem; }
.bar__score { position: relative; padding-left: 1rem; }
.bar__mark { display: block; font-size: 0.85rem; color: var(--color-muted); margin-bottom: 0.2rem; }
.score--week { font-size: clamp(1.5rem, 3.1vw, 3.2rem); }
@media (min-width: 900px) {
  .bar { grid-template-columns: minmax(4rem, 1fr) 3fr 7fr; align-items: start; }
  .bars { --thread-x: calc((100% - 2 * var(--gap)) * 4 / 11 + 2 * var(--gap)); }
  .thread { left: var(--thread-x); }
  .bar__score::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 1px; background: var(--color-rule); }
  .bar__num { padding-left: 0; }
}
@media (max-width: 899px) {
  .thread { left: 0; }
  .bar { padding-left: 1rem; }
  .bar__num { padding-left: 0; }
  .bar__score { padding-left: 0; }
}

/* Tempo test: the amber surface. */
.signal { background: var(--color-signal); color: var(--color-ink); --line: var(--color-ink); }
.signal .section-head p { color: var(--color-ink); }
.tempo__layout { row-gap: 2rem; }
.tempo__passage { grid-column: 1 / span 12; }
.tempo__panel { grid-column: 1 / span 12; }
@media (min-width: 1000px) {
  .tempo__passage { grid-column: 1 / span 8; }
  .tempo__panel { grid-column: 9 / span 4; position: sticky; top: calc(var(--scroll-offset) + 1rem); }
}
.tempo .score { font-size: clamp(1.4rem, 2.5vw, 2.5rem); --lh: 1.32; --base: 0.78lh; --cap: 0.25lh; letter-spacing: -0.015em; }
.tempo .score .w { margin-inline-end: 0.16em; }
.tempo .score .w.is-current { color: var(--color-canvas); background-color: var(--color-ink); box-decoration-break: clone; }
.tempo__panel { border: 2px solid var(--color-ink); padding: clamp(1rem, 2vw, 1.5rem); display: grid; gap: 1rem; background: color-mix(in oklch, var(--color-signal) 70%, white); box-shadow: 10px 10px 0 var(--color-ink); }
.tempo__panel h3 { font-size: 1.15rem; }
.tempo__controls { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.clock { font-family: var(--font-score); font-variation-settings: "wght" 820, "SHRP" 100; font-size: clamp(3.5rem, 7vw, 6rem); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.clock small { display: block; font-family: var(--font-text); font-size: 0.95rem; letter-spacing: 0; font-variation-settings: normal; font-weight: 400; margin-top: 0.5rem; }
.result { display: grid; gap: 0.35rem; }
.result:empty { display: none; }
.result strong { font-family: var(--font-score); font-variation-settings: "wght" 700, "SHRP" 100; font-size: 1.2rem; }
.bands { display: grid; gap: 0.25rem; font-size: 0.95rem; }
.bands div { display: grid; grid-template-columns: minmax(7.5ch, auto) 1fr; gap: 0.5rem; padding: 0.25rem 0; border-top: 1px solid var(--color-signal-rule); }
.bands div[data-active="true"] { font-weight: 700; }
.bands dt { font-variant-numeric: tabular-nums; font-family: var(--font-score); font-variation-settings: "wght" 600, "SHRP" 100; white-space: nowrap; }
.bands dd { margin: 0; }
.bands__note { font-size: 0.85rem; margin-top: 0.25rem; }

/* Packages: comparison staves. One row per package, six bars for the weeks, the price as the closing double bar. */
.rows { position: relative; border-top: 1px solid var(--color-ink); overflow: clip; }
.sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--color-signal-deep); border-radius: 2px; opacity: 0; pointer-events: none; }
.rows.is-swept .sweep { animation: sweep 1600ms var(--ease-wipe) both; }
@keyframes sweep { 0% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(100vw - 2 * var(--gutter))); } }
.pack { align-items: center; padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--color-rule); row-gap: 1.25rem; }
.pack__lead { grid-column: 1 / span 12; }
.pack__name { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.pack__what { color: var(--color-muted); max-width: 40ch; margin-top: 0.5rem; font-size: 0.98rem; }
.pack__cta { margin-top: 1rem; }
.pack__stave { grid-column: 1 / span 12; display: grid; grid-template-columns: 5rem repeat(6, minmax(0, 1fr)) 0.5rem; height: clamp(3rem, 5vw, 4.5rem); border-block: 1px solid var(--color-rule); position: relative; }
.pack__stave .cell { position: relative; border-right: 1px solid var(--color-rule); display: flex; align-items: flex-end; padding: 0 0 0.3rem 0.4rem; font-family: var(--font-score); font-variation-settings: "wght" 600, "SHRP" 100; font-size: 0.85rem; color: var(--color-muted); }
.pack__stave .cell.is-on { background: linear-gradient(to top, var(--color-signal) 0 62%, transparent 62%); color: var(--color-ink); }
.pack__stave .cell--head { border-right: 2px solid var(--color-ink); }
.pack__stave .cell--end { border-right: 0; border-left: 2px solid var(--color-ink); margin-left: -1px; }
.pack__stave .tick { position: absolute; right: -2px; top: 0.25rem; width: 3px; height: 0.9em; background: var(--color-signal-deep); border-radius: 1px; z-index: 1; }
.pack__price { grid-column: 1 / span 12; font-family: var(--font-score); font-variation-settings: "wght" 820, "SHRP" 100; font-size: clamp(2.2rem, 4.5vw, 4.2rem); letter-spacing: -0.035em; line-height: 0.95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pack__price small { display: block; font-family: var(--font-text); font-size: 0.85rem; letter-spacing: 0; font-variation-settings: normal; font-weight: 400; color: var(--color-muted); margin-top: 0.4rem; white-space: normal; }
@media (min-width: 900px) {
  .pack__lead { grid-column: 1 / span 4; }
  .pack__stave { grid-column: 5 / span 5; }
  .pack__price { grid-column: 10 / span 3; text-align: right; }
  .pack__price small { text-align: right; }
}
.packages__note { margin-top: 1rem; color: var(--color-muted); font-size: 0.95rem; max-width: 60ch; }
.trainer { margin-top: var(--space-section); row-gap: 1rem; }
.trainer h3 { grid-column: 1 / span 12; font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.trainer p { grid-column: 1 / span 12; max-width: 56ch; font-size: 1.1rem; }
@media (min-width: 900px) { .trainer h3 { grid-column: 1 / span 4; } .trainer p { grid-column: 5 / span 7; } }

/* Booking: the last staves. */
.booking__head { margin-bottom: clamp(2rem, 5vw, 4rem); row-gap: 2rem; align-items: end; }
.booking__intro { grid-column: 1 / span 12; }
.booking__intro h2 { font-size: clamp(2rem, 5vw, 5rem); letter-spacing: -0.025em; line-height: 0.98; max-width: 14ch; color: var(--color-canvas); }
.booking__intro p { margin-top: 1rem; max-width: 52ch; font-size: 1.1rem; color: var(--color-room-muted); }
.booking__fact { grid-column: 1 / span 12; display: flex; align-items: baseline; gap: 1rem; }
.booking__num { font-family: var(--font-score); font-variation-settings: "wght" 820, "SHRP" 100; font-size: clamp(5rem, 12vw, 12rem); line-height: 0.8; letter-spacing: -0.05em; color: var(--color-signal); }
.booking__unit { font-family: var(--font-score); font-variation-settings: "wght" 600, "SHRP" 100; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.25; color: var(--color-canvas); }
@media (min-width: 900px) { .booking__intro { grid-column: 1 / span 7; } .booking__fact { grid-column: 8 / span 5; justify-content: flex-end; } }
.form { row-gap: 1.5rem; align-items: start; }
.field { grid-column: 1 / span 12; display: grid; gap: 0.4rem; align-content: start; }
.trainer__facts { grid-column: 5 / span 7; font-size: 0.95rem; color: var(--color-muted); }
@media (max-width: 899px) { .trainer__facts { grid-column: 1 / span 12; } }
.field--half { grid-column: 1 / span 12; }
@media (min-width: 760px) { .field--half { grid-column: span 6; } }
.field label, .field legend { font-family: var(--font-score); font-variation-settings: "wght" 600, "SHRP" 100; font-size: 1rem; }
.field input[type="text"], .field input[type="email"] { font: inherit; color: var(--color-canvas); background: color-mix(in oklch, var(--color-canvas) 7%, transparent); border: 0; border-bottom: 2px solid var(--color-room-muted); padding: 0.6rem 0.75rem; border-radius: var(--radius-control) var(--radius-control) 0 0; width: 100%; height: 3.1rem; caret-color: var(--color-signal); }
.field input:focus-visible { outline: none; border-bottom-color: var(--color-signal); box-shadow: 0 2px 0 0 var(--color-signal); }
.field .hint { font-size: 0.9rem; color: var(--color-room-muted); }
.choices { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.25rem; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border: 2px solid var(--color-room-muted); border-radius: var(--radius-control); font-size: 0.95rem; transition: border-color 125ms ease-out, background-color 125ms ease-out, color 125ms ease-out; }
.choice input:checked + span { border-color: var(--color-signal); background: var(--color-signal); color: var(--color-on-signal); }
.choice input:focus-visible + span { outline: 3px solid var(--color-signal); outline-offset: 3px; }
.form__submit { grid-column: 1 / span 12; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; position: relative; padding-top: 1.5rem; border-top: 1px solid var(--color-room-rule); overflow: clip; }
.form__bar { color: var(--color-signal); }
.form__note { font-size: 0.95rem; color: var(--color-room-muted); max-width: 40ch; }
.form__line { position: absolute; top: 1.5rem; bottom: 0; left: 0; width: 5px; background: var(--color-signal); border-radius: 2px; opacity: 0; pointer-events: none; }
.form.is-sent .form__line { animation: formline 900ms var(--ease-wipe) both; }
@keyframes formline { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(min(60vw, 40rem)); } }
.demo-note { grid-column: 1 / span 12; display: none; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border: 2px solid var(--color-signal); color: var(--color-canvas); font-family: var(--font-score); font-variation-settings: "wght" 600, "SHRP" 100; box-shadow: 6px 6px 0 var(--color-signal-deep); }
.demo-note::before { content: ""; width: 3px; height: 1.2em; background: var(--color-signal); flex: none; }
.demo-note.is-shown { display: flex; animation: land 450ms var(--ease-out) 500ms both; }
@keyframes land { from { opacity: 0; translate: -0.75rem 0; } to { opacity: 1; translate: 0 0; } }
.field input:user-invalid { border-bottom-color: oklch(0.72 0.17 25); }
.field .error { display: none; font-size: 0.9rem; color: oklch(0.85 0.1 25); }
.field.is-invalid .error { display: block; }

/* Footer */
.foot { background: var(--color-room); color: var(--color-canvas); border-top: 1px solid var(--color-room-rule); padding-block: var(--space-section) 2rem; }
.foot__grid { row-gap: 1.5rem; }
.foot__brand { grid-column: 1 / span 12; }
.foot__contact { grid-column: 1 / span 12; color: var(--color-room-muted); font-size: 0.95rem; }
.foot__links { grid-column: 1 / span 12; }
@media (min-width: 760px) { .foot__brand { grid-column: 1 / span 4; } .foot__contact { grid-column: 5 / span 4; } .foot__links { grid-column: 9 / span 4; } }
.foot__links ul { display: flex; flex-wrap: wrap; gap: 1rem; }
.foot__links a { color: var(--color-canvas); }
.foot__line { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--color-room-rule); font-size: 0.8rem; color: var(--color-room-muted); }
.ph { color: var(--color-room-muted); font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after,
  .score .w, .score .w[data-stress], .score .b, .score .pz, .bar__num, .btn, .mark-btn, .link, .choice span, .choice span::before, .skip-link, .score .line, .score .line::before
  { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
  html { scroll-behavior: auto; }
  .thread { transform: none; }
  .score.is-done .line { opacity: 0; }
}

@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; }
  .score .line, .thread, .brand__mark, .reel__line, .sweep, .form__line { background: CanvasText; forced-color-adjust: none; }
}

@media print {
  * { background: transparent; color: var(--color-text); box-shadow: none; text-shadow: none; }
  .site-head, .score__head, .tempo__panel, .skip-link, .fault__play { display: none; }
  .reel--on { height: auto; }
  .reel--on .reel__stage { position: static; height: auto; overflow: visible; }
  a[href]::after { content: " (" attr(href) ")"; font-weight: normal; }
  a[href^="#"]::after { content: ""; }
  @page { margin: 2cm; }
}