/* home.css — compositions used only on the homepage (The Workout).
   Everything else comes from the shared system (tokens, base, layout,
   shell, ui, hero, hero-film, film, training). Surfaces follow content: Ink
   for the opening, the challenges, adaptation, the people and the closing;
   Chalk for reading, practical detail and the feedback.
   H07 adjustable challenge (#edge, the Level trace) and H08 feedback
   (#feedback, the Workout Summary device) have their own files:
   home-edge.css / home-edge.js and home-feedback.css / home-feedback.js.
   Behaviour: assets/js/home.js (rail, voices) and the shared arrival
   primitives (motion.js). Everything is complete and static under reduced
   motion or without JS. */

/* ---- H02/H04 the workout in practice: the headline arrives like reps ---- */
/* sizes (12 Oct 2026; Alessandro approved after the mobile/desktop size
   checks): an H2, never larger than the page's H1. Phones 36 px (was 44,
   over the 40 px H1); from 640 px the H2 token, 35–56 px (was 54–96, up to
   1.5 × the H1). Below 1024 px the measure is 9em (was 16ch): "Your next
   rep takes" over "more than muscle." from 360 px (three lines before at
   360–414 px), where 16ch let the balanced break pull "takes" down to the
   italic (414–699 px) */
.practice__title { margin: 0; max-width: 9em; font-size: 2.25rem; line-height: 1.02; letter-spacing: var(--tracking-h1); }
@media (min-width: 640px) { .practice__title { font-size: var(--text-h2); } }
.rep__w { display: inline-block; }
/* the italic phrase reps in as one inline-block: where it has to wrap it needs
   its own line pitch (headings set .ed to line-height 0), otherwise its two
   lines print on top of each other. em query: follows the reader's text size */
@media (max-width: 29.9375em) { .practice__title .rep__w--last { line-height: 0.98; } }   /* 0.98 × the 1.04 italic = the title's 1.02 */
/* Standfirst: one shared top rule; the copy left, the facts as a 2 × 2 right */
.practice__base { margin-top: clamp(var(--space-6), 0.5rem + 4.4vw, var(--space-8)); row-gap: 0; }
.practice__lede { position: relative; padding-top: var(--space-5); border-top: 1px solid var(--on-line); }
.practice__rule { position: absolute; left: 0; top: -2px; width: 40%; height: 3px; background: var(--color-action-bg); transform-origin: left center; }
.practice__lede p { margin: 0; max-width: 24ch; font-size: var(--text-h3); line-height: 1.3; }
.practice__facts .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.practice__facts .facts__value { font-size: var(--text-lead); line-height: 1.3; text-wrap: balance; }
@media (max-width: 1023px) {
  .practice__lede { padding-bottom: var(--space-6); }
}
@media (min-width: 1024px) {
  .practice__title { max-width: none; }
}
@media (max-width: 479px) {
  .practice__facts .facts { grid-template-columns: minmax(0, 1fr); }
}
/* narrow phones (under 375 px): the headline follows the width, so "more
   than muscle." keeps one line instead of leaving "muscle." on its own;
   never above the phones' 36 px (12 Oct 2026) */
@media (max-width: 374.98px) {
  .practice__title { font-size: min(2.25rem, 11.6vw); }
}
@media (prefers-reduced-motion: no-preference) {
  /* after the headline: the rule draws in, then the facts arrive one by one */
  .motion-ready .practice__base:not(.is-in) .practice__rule.arrive-item { opacity: 1; transform: scaleX(0); }
  .motion-ready .practice__base.is-in .practice__rule.arrive-item { transition: transform 700ms cubic-bezier(0.2, 0.75, 0.1, 1) 450ms; }
  /* the facts are their own group, so they arrive as they come into view
     (in the stacked layout they sit well below the copy) */
  .motion-ready .practice__facts:not(.is-in) .facts__item { opacity: 0; transform: translateY(var(--travel-expressive)); }
  .motion-ready .practice__facts.is-in .facts__item { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
  .motion-ready .practice__facts.is-in .facts__item:nth-child(1) { transition-delay: 600ms; }
  .motion-ready .practice__facts.is-in .facts__item:nth-child(2) { transition-delay: 720ms; }
  .motion-ready .practice__facts.is-in .facts__item:nth-child(3) { transition-delay: 840ms; }
  .motion-ready .practice__facts.is-in .facts__item:nth-child(4) { transition-delay: 960ms; }
  .motion-ready .practice__facts.is-instant .facts__item, .motion-ready .practice__base.is-instant .practice__rule.arrive-item { transition: none; }

  /* override the shared travel with a rep: up past the line, then settle */
  .motion-ready .rep:not(.is-in) .rep__w { opacity: 0; transform: translateY(0.45em); }
  .motion-ready .rep.is-in:not(.is-instant) .rep__w {
    animation: rep-in 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 90ms);
    transition: none;
  }
  .motion-ready .rep.is-in:not(.is-instant) .rep__w--last { animation-duration: 820ms; }
}
@keyframes rep-in {
  0% { opacity: 0; transform: translateY(0.45em); }
  55% { opacity: 1; transform: translateY(-0.08em); }
  100% { opacity: 1; transform: none; }
}

/* ---- H05/H09 inside the class ---- */
/* the live site's #open-lab, now an alias inside #programme (10 Oct 2026),
   sits on the section's top edge, where the old id was, so old links land
   exactly as before (.section is position: relative) */
#programme > #open-lab { position: absolute; top: 0; }
.class-grid { row-gap: var(--space-7); }
.class-grid h2 + .t-lead { max-width: var(--measure); }

/* ---- the class format: a scroll rail. Every word stays visible; the rail
   only marks how far the reader has come. Static under reduced motion. */
.fmt__n { font-size: var(--text-caption); letter-spacing: var(--tracking-label); color: var(--on-muted); }
.fmt h3 { margin: 0 0 var(--space-2); }
.fmt p { margin: 0; max-width: var(--measure); }
@media (min-width: 1024px) {
  .class-grid { align-items: start; }
  .class-grid__head { position: sticky; top: calc(var(--header-h) + var(--space-7)); }
}

/* B · scroll rail: a line runs down the three steps as you scroll; each
   number fills Vermilion when the line reaches it */
.fmt-b__steps { position: relative; margin: 0; padding: 0 0 0 calc(56px + var(--space-5)); list-style: none; }
/* the line runs from the centre of node 01 to the centre of node 03
   (--rail-h, measured in home.js) */
.fmt-b__steps::before, .fmt-b__steps::after { content: ""; position: absolute; left: 27px; top: calc(var(--space-2) + 28px); height: var(--rail-h, calc(100% - 56px)); width: 2px; background: var(--on-line); }
.fmt-b__steps::after { background: var(--color-action-bg); height: calc(var(--rail-h, calc(100% - 56px)) * var(--fill, 1)); }
.fmt--b:not(.is-live) .fmt-b__steps::after { display: none; }   /* static: a neutral line with neutral numbers */
/* without JS (no --rail-h): the neutral line drawn per step, node centre to the next node centre */
html:not(.js) .fmt-b__steps::before { display: none; }
html:not(.js) .fmt-b__step:not(:last-child)::before { content: ""; position: absolute; left: calc(-56px - var(--space-5) + 27px); top: calc(var(--space-2) + 28px); bottom: calc(-1 * (var(--space-2) + 28px)); width: 2px; background: var(--on-line); }
.fmt-b__step { position: relative; padding: var(--space-4) 0 var(--space-7); }
.fmt-b__node { position: absolute; left: calc(-56px - var(--space-5)); top: var(--space-2); z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--on-bg); box-shadow: inset 0 0 0 2px var(--on-control); font-weight: var(--weight-strong); transition: background-color var(--duration-expressive) var(--ease-out), color var(--duration-expressive) var(--ease-out); }
.fmt--b.is-live .fmt-b__step.is-on .fmt-b__node { background: var(--color-action-bg); color: var(--color-action-text); box-shadow: none; }
.fmt-b__step h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: var(--leading-h2); font-variation-settings: var(--type-display-axes); }   /* between H3 and the section H2 */
/* phones (mobile check, 12 Oct 2026; Alessandro approved after the
   mobile/desktop size checks): the step names at the H3 token (22 px; 28
   had matched the 30 px section H2) and 44 px number discs, the rail and
   its offsets centred on them (the no-JS line too) */
@media (max-width: 639.98px) {
  .fmt-b__step h3 { font-size: var(--text-h3); }
  .fmt-b__steps { padding-left: calc(44px + var(--space-5)); }
  .fmt-b__steps::before, .fmt-b__steps::after { left: 21px; top: calc(var(--space-2) + 22px); }
  .fmt-b__steps::before { height: var(--rail-h, calc(100% - 44px)); }
  .fmt-b__steps::after { height: calc(var(--rail-h, calc(100% - 44px)) * var(--fill, 1)); }
  .fmt-b__node { left: calc(-44px - var(--space-5)); width: 44px; height: 44px; font-size: var(--text-ui); }
  html:not(.js) .fmt-b__step:not(:last-child)::before { left: calc(-44px - var(--space-5) + 21px); top: calc(var(--space-2) + 22px); bottom: calc(-1 * (var(--space-2) + 22px)); }
}

/* one class in numbers: the sentence arrives count by count, each line at
   headline scale (static and complete under reduced motion or without JS) */
.totals { margin-top: calc(var(--space-7) + var(--space-4)); }   /* its own grid, so the sticky heading lets go at the end of the rail */
.tb { margin: 0; font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); line-height: 1.1; letter-spacing: var(--tracking-h2); }
.tb__lead { display: block; margin-bottom: var(--space-3); font-size: var(--text-h3); color: var(--on-muted); }
.tb__line { display: block; text-wrap: balance; }   /* a count that wraps (phones) splits evenly, never leaving one word */
@media (max-width: 374.98px) { .tb { font-size: min(2rem, 8.8vw); } }   /* "eight challenge rounds" on one line down to 320 px */
/* desktop (12 Oct 2026; Alessandro approved after the mobile/desktop size
   checks): 48 px at most (was 60), nearer its section H2 */
@media (min-width: 1024px) { .tb { font-size: clamp(2rem, 1.2rem + 3vw, 3rem); } }
.tb strong { font-weight: var(--weight-strong); font-variation-settings: var(--type-text-axes); }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .totals--b .arrive-item { transition-duration: 520ms; }
  .motion-ready .totals--b.is-in .arrive-item { transition-delay: calc(var(--i, 0) * 260ms); }
  .motion-ready .totals--b:not(.is-in) .arrive-item { transform: translateY(0.6em); }
}

/* ---- H10 participant experience: the live site's accordion ------------ */
.voices-section { border-top: 1px solid var(--on-line); }
.voices__title { margin: 0 0 var(--space-7); }
.tg { display: grid; gap: var(--space-5); }
.tg__bg, .tg__tab, .tg__face { display: none; }
.tg__open { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-6); align-items: center; }
.tg__media { aspect-ratio: 4 / 5; }
.tg__media > img { object-position: 50% 0%; }   /* the face first */
.tg__body { margin: 0; }
.tg__body blockquote { margin: 0 0 var(--space-4); }
.tg__body blockquote p { margin: 0; font-size: var(--text-h3); line-height: 1.3; max-width: 30ch; }
.voice__who { margin: 0; font-size: var(--text-ui); }
/* live: a horizontal accordion, one panel open, the others narrow */
@media (min-width: 1024px) {
  .tg.is-live { display: flex; gap: var(--space-3); height: clamp(420px, 38vw, 520px); }
  .tg.is-live .tg__panel {
    position: relative;
    flex: 1 1 0;
    min-width: 64px;
    overflow: hidden;
    border-radius: var(--radius-card);
    transition: flex-basis var(--duration-expressive) var(--ease-out), flex-grow var(--duration-expressive) var(--ease-out);
  }
  .tg.is-live .tg__panel.is-open { flex: 0 1 min(760px, 62%); box-shadow: inset 0 0 0 1px var(--on-line); }
  .tg.is-live .tg__bg { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 136%; object-fit: cover; object-position: 50% 0%; }   /* taller than the panel: the burned-in captions stay below */
  .tg.is-live .tg__panel:not(.is-open)::after { content: ""; position: absolute; inset: 0; background: var(--color-ink-panel); }
  .tg.is-live .tg__tab {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-5) 0;
    border: 0;
    background: transparent;
    color: var(--on-text);   /* the section's role (Chalk on Ink), so print turns it Ink (10 Oct 2026) */
    font: inherit;
    cursor: pointer;
  }
  .tg.is-live .tg__tab:focus-visible { outline: var(--focus-width) solid var(--on-focus); outline-offset: calc(-1 * var(--focus-width) - 2px); border-radius: var(--radius-card); }
  .tg.is-live .tg__name { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: var(--weight-strong); font-size: var(--text-lead); }
  .tg.is-live .tg__panel.is-open .tg__tab, .tg.is-live .tg__panel.is-open .tg__bg { display: none; }
  .tg.is-live .tg__open { height: 100%; padding: var(--space-5); grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .tg.is-live .tg__panel:not(.is-open) .tg__open { visibility: hidden; }
  .tg.is-live .tg__media { height: 100%; width: auto; min-height: 0; aspect-ratio: 9 / 16; }
  .tg.is-live .tg__media > img { position: absolute; left: 0; top: 0; width: 100%; height: 136%; object-position: 50% 0%; }   /* the subtitle burned into the poster stays below the frame */
  .tg.is-live .tg__media.is-playing { aspect-ratio: 9 / 16; max-height: none; }
}
@media (max-width: 599px) {
  .tg__open { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
/* print (10 Oct 2026): the voices and the class film each stay on one
   page (a page break cut the accordion's fixed-height panel and the film
   from its title). On a page wide enough for the accordion (landscape)
   the narrow panels print as their names alone, Ink on paper: no
   background still and no Ink veil, which would print under Ink text when
   backgrounds print */
@media print {
  .tg, .class-film { break-inside: avoid; }
  .tg.is-live .tg__bg { display: none; }
  .tg.is-live .tg__panel:not(.is-open)::after { content: none; }
}
@media (max-width: 1023px) {
  .tg.is-live { gap: var(--space-2); }
  .tg.is-live .tg__face { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
  .tg.is-live .tg__tab {
    display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px;
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border: 0; border-radius: var(--radius-control);
    background: transparent; box-shadow: inset 0 0 0 1px var(--on-control); color: var(--on-text); font: inherit; font-weight: var(--weight-strong); text-align: left; cursor: pointer;
  }
  .tg.is-live .tg__tab::after { content: "+"; content: "+" / ""; margin-left: auto; font-size: var(--text-lead); }   /* not read out */
  .tg.is-live .tg__panel.is-open .tg__tab { display: none; }
  .tg.is-live .tg__panel:not(.is-open) .tg__open { display: none; }
}
/* the class film, Centred stage: title and note centred above a centred
   frame (title and frame within one laptop screen), one large play control
   in the middle of the picture */
.class-film { margin-top: var(--space-9); display: grid; justify-items: center; text-align: center; }
.class-film h3 { margin: 0 0 var(--space-2); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: var(--leading-h2); font-variation-settings: var(--type-display-axes); }
.class-film__note { margin: 0 0 var(--space-6); font-size: var(--text-body); line-height: 1.45; text-wrap: balance; }
.class-film .media { width: 100%; max-width: 56rem; aspect-ratio: 16 / 9; }
/* the play control exactly as on the clips (the Chalk tab, the Ink mark and
   "Play"), centred on the frame */
.class-film .play { left: 50%; top: 50%; bottom: auto; translate: -50% -50%; white-space: nowrap; }
/* a film that cannot load (10 Oct 2026): its line stays centred and wraps
   within the frame */
.class-film .media.is-failed .play { width: max-content; white-space: normal; text-align: center; text-wrap: balance; }
/* the block arrives with the page's shared arrival; on hover or focus the
   play tab grows a little and the picture leans in (no colour, glow or shadow) */
@media (prefers-reduced-motion: no-preference) {
  .class-film .media > picture > img { transition: transform 600ms var(--ease-out); }
  .class-film .media:has(.play:focus-visible) > picture > img { transform: scale(1.03); }
  .class-film .play { transition: background-color var(--duration-fast) var(--ease-out), scale var(--duration-expressive) var(--ease-out); }
  .class-film .play:focus-visible { scale: 1.08; }
}
/* hover only where there is a pointer that hovers: on touch a tap would
   leave the picture leaning in */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .class-film .media:has(.play:hover) > picture > img { transform: scale(1.03); }
  .class-film .play:hover { scale: 1.08; }
}

#science + #faq { padding-top: 0; }
#science + #faq .container { padding-top: var(--space-8); }
#science + #faq .container::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--on-line); margin-bottom: var(--space-2); }
#faq h2 { margin-bottom: var(--space-5); }

/* ---- H13 next steps: the participant route leads at Display scale; the
   club route follows on a Chalk card ---- */
.next-steps { align-items: stretch; }
.next { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.next h2 { margin: 0; }
.next p { margin: 0; max-width: 40ch; }
.next--lead { justify-content: center; }
.next--lead p { max-width: var(--measure); }
.card.next { height: 100%; }
.card.next h2 { font-size: var(--text-h3); line-height: var(--leading-h3); } /* H2 role (Display axes) at H3 size */
.card.next .btn { margin-top: auto; }

/* ---- phones and tablets (mobile check, 9 Oct 2026): at these measures a
   paragraph, quote or question often ended on one word ("way.",
   "thinking.”", "training?"); the browser now carries a second word down.
   Headings already balance (base.css). Desktop is unchanged. ---- */
@media (max-width: 1023px) {
  main p, main summary { text-wrap: pretty; }
}

/* ---- phones (mobile check, second pass, 9 Oct 2026) ----------------------
   H01: the italic phrase stays whole on its own line ("Train your body /
   and brain / in one workout."), never "in" left at the end of the roman
   line; the same three lines, so the actions do not move. Scoped to #h01:
   hero-film.css is shared with another page.
   Short blocks (six lines or fewer) balance, so none ends on one word
   ("coordination.", "circuit-ready.", "stretching.", "performance.").
   Rhythm: the gaps inside a section stay below the 80 px between sections
   (the rail's last step no longer adds its bottom padding to the gap). */
@media (max-width: 639px) {
  #h01 { text-wrap: wrap; }
  #h01 .ed { white-space: nowrap; }
  .fmt-b__step p, .tr__body .tr__text, .practice__lede p { text-wrap: balance; }
  .fmt-b__step:last-child { padding-bottom: 0; }
  .totals { margin-top: var(--space-7); }
  .class-film { margin-top: var(--space-8); }
}
/* larger text (mobile check, 12 Oct 2026; Alessandro approved after the
   mobile/desktop size checks): the homepage parts of base.css's page query
   (text set larger than a 320 px phone shows it); nothing changes at the
   default size. Scoped to #h01, as above */
@container page (width < 20rem) {
  /* H01: the italic phrase still starts its own line, and wraps inside
     itself on the heading's own line pitch where it is wider than the
     panel ("in one / workout."), instead of running out of the hero */
  #h01 .ed { white-space: normal; }
  #h01 .ed::before { content: "\A"; content: "\A" / ""; white-space: pre; }
  /* the film's note takes two or three lines at this size: it joins the
     flow above the panel, so the panel starts under it instead of
     covering its last line */
  .hero-film:has(#h01) { --clear-top: var(--space-4); }
  .hero-film:has(#h01) .hero-film__note { position: relative; top: auto; right: auto; order: -1; align-self: flex-end; margin: var(--space-4) var(--page-margin) 0; }
}
/* the voice rows answer a tap themselves (the panel opens): no grey flash */
.tg__tab { -webkit-tap-highlight-color: transparent; }
/* a small phone on its side (under 600 px wide): the clip beside its
   quote, as from 600 px, instead of a 4:5 frame twice the screen's height */
@media (max-width: 599px) and (orientation: landscape) and (max-height: 500px) {
  .tg__open { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); }
}