/* training.css — homepage H06 "What you train", "one sentence, two halves"
   (13 Oct 2026, option A2 as approved by Alessandro; it replaced the live
   site's layout: the capacities on a timer beside a montage card, and a
   sideways row of challenge films).
   The section's sentence is its structure: "Push your body." heads the body
   half (the movement montage and its sentence); "Elevate your" heads the
   brain half, whose endings "focus." "memory." "reasoning." head the three
   families (sentence and challenge films). One Vermilion line runs on from
   each phrase on its row, and a joining stretch (.tr__join, placed by JS)
   carries it from "Push your body." down to the brain half: on desktop
   into the end of memory's stretch, in the gap beside the montage; on
   phones and tablets down the right edge into the end of focus's.
   The intro line is the films' caption: Soft Line, at reading size, in
   the place beside Surge Brake, under a bracket over the films' row.
   The five films share one card (13 Oct 2026, second pass: Alessandro
   wanted the family labels visible in every card and Surge Brake like
   the others): the name and family label as text over the film's framed
   opening, its title loop with the baked title band cut off.
   Behaviour: assets/js/training.js. The moving states are custom
   properties JS sets only where motion is allowed (--f on each stretch,
   --a on the montage); their defaults are the finished state, so without
   JS or with reduced motion every line is drawn, the montage sits settled
   and the films are stills. */

.tr-section { padding-block: clamp(3rem, 1rem + 5vw, 6rem); overflow-x: clip; }
.tr {
  --tr-gap: clamp(24px, 3vw, 48px);                 /* desktop: between the three families */
  --tr-lane: var(--space-4);                         /* stacked: kept clear for the joining line */
  --tr-in: var(--space-3);                           /* between the two places of a family's films */
  --tr-bleed: max(var(--page-margin), calc((100vw - var(--content-max)) / 2));
  position: relative;
}

/* ---- the sentence: its parts at the H2 size (the h2 itself, with the whole
   sentence, is for screen readers); the three endings in Newsreader -------- */
.tr__head, .tr__say { font-size: var(--text-h2); line-height: var(--leading-h2); }
.tr__say {
  margin: 0;
  font-weight: var(--weight-strong);
  font-variation-settings: var(--type-display-axes);
  letter-spacing: var(--tracking-h2);
}
.tr__word { margin: 0; flex: none; }
.tr__word .ed { padding-right: 0.06em; }
/* a head: the phrase, then its stretch of the line on the same row, at the
   middle of the lower-case letters */
.tr__head { display: flex; align-items: baseline; align-items: last baseline; gap: 0.32em; }
.tr__head > .tr__say { flex: 0 1 auto; min-width: 0; }
.tr__head > .tr__line { flex: 1 1 auto; min-width: 1.5em; margin-bottom: 0.27em; }

/* ---- the line: a Muted Plum track, filled Vermilion by scroll (JS sets
   --f, 0–1); fully drawn otherwise ----------------------------------------- */
.tr__line, .tr__join { position: relative; display: block; border-radius: 2px; background: var(--on-line); overflow: hidden; }
.tr__line { height: 3px; }
.tr__line i, .tr__join i { display: block; width: 100%; height: 100%; background: var(--color-action-bg); }
.tr__line i { transform: scaleX(var(--f, 1)); transform-origin: left center; }
/* the stretch the joining line runs into fills back from it */
.tr__line.is-from-end i { transform-origin: right center; }
.tr__join { position: absolute; left: 0; top: 0; width: 3px; height: 0; pointer-events: none; display: none; }
.tr.has-join .tr__join { display: block; }
.tr__join i { transform: scaleY(var(--f, 1)); transform-origin: center top; }

.tr__text { margin: var(--space-2) 0 0; max-width: 40ch; }

/* ---- the body half: the montage, whole at 4:5 (heads and feet stay in
   every move). Its arrival (JS sets --a, 0–1, as it comes up the screen):
   it opens out to the screen's edge and its zoom settles; settled (--a 1)
   without JS or motion ---------------------------------------------------- */
.tr__montage {
  --a: 1;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-brand-ink);
}
.tr__montage-in { position: absolute; inset: 0; transform: scale(calc(1 + (1 - var(--a)) * 0.08)); transform-origin: 50% 45%; }
.tr__montage img, .tr__montage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tr__montage video { opacity: 0; transition: opacity 600ms var(--ease-out); }
.tr__montage video.is-playing { opacity: 1; }
/* without JS there is no loop, and browsers give a script-less <video> its
   own controls: an empty grey player would cover the still */
html:not(.js) .tr__montage video { display: none; }

/* phones and tablets: the montage runs off the left edge, beside the words,
   and the joining line runs down the right edge (its lane kept clear) */
@media (max-width: 1023px) {
  .tr__body { display: grid; column-gap: var(--space-4); }
  .tr__montage {
    margin-left: calc(-1 * var(--page-margin));
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    clip-path: inset(0 0 0 calc((1 - var(--a)) * var(--page-margin)) round calc((1 - var(--a)) * var(--radius-card)) var(--radius-card) var(--radius-card) calc((1 - var(--a)) * var(--radius-card)));
  }
  .tr__body > .tr__text { margin-right: var(--tr-lane); }
}
/* phones: "Push your body." across the top, then the film beside its
   sentence (a short body half: Alessandro, 13 Oct) */
@media (max-width: 639px) {
  .tr { --tr-lane: var(--space-3); }
  .tr__body { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); align-items: center; }
  .tr__body > .tr__head { grid-column: 1 / -1; }
  .tr__montage { grid-column: 1; grid-row: 2; margin-top: var(--space-4); }
  .tr__body > .tr__text { grid-column: 2; grid-row: 2; margin-top: var(--space-4); }   /* balanced in home.css */
}
/* tablets: the film on the left, "Push your body." and its sentence beside it */
@media (min-width: 640px) and (max-width: 1023px) {
  .tr__body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--space-6); }
  .tr__montage { grid-column: 1; grid-row: 1 / -1; }
  .tr__body > .tr__head, .tr__body > .tr__text { grid-column: 2; }
  .tr__body > .tr__head { grid-row: 2; }
  .tr__body > .tr__text { grid-row: 3; margin-top: var(--space-4); }
}

/* larger text (base.css, 12 Oct 2026): where the text is set larger than a
   320 px phone shows it, the film stands above its sentence, and an ending
   wider than the column breaks inside itself instead of running out */
@container page (width < 20rem) {
  .tr__body { grid-template-columns: minmax(0, 1fr); }
  .tr__montage { grid-column: 1; grid-row: 2; width: 75%; }
  .tr__body > .tr__text { grid-column: 1; grid-row: 3; }
  .tr__say, .tr__word { min-width: 0; overflow-wrap: break-word; }
  .tr__word { flex: 0 1 auto; }
}

/* ---- the brain half ---------------------------------------------------------
   The families have no box of their own (display: contents): their parts
   sit on one grid with the caption, which comes first in the source (read
   before the families). Every family's films stand under it, on cards of
   one size, two places to a family; the caption takes the place beside
   Surge Brake, the one Focus film (Alessandro, 13 Oct 2026: the same card
   for all five, each under its own family) */
.tr__mind { margin-top: var(--space-7); }
.tr__fams { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--space-2); }
.tr__fam { display: contents; }
.tr__fams::before, .tr__intro, .tr__fam > * { grid-column: 1; }

/* the films' caption: Soft Line at reading size, in the first place of the
   films' row, under a bracket over that row whose ends turn down to it */
.tr__intro {
  justify-self: start;
  width: calc(50% - var(--tr-in) / 2);
  margin: 0;
  font-size: var(--text-ui);
  line-height: 1.45;
  color: var(--on-muted);
  overflow-wrap: break-word;
  scroll-margin-top: calc(var(--space-4) + var(--space-1));   /* /#challenges lands with the bracket in view */
}
.tr__fam > .reels--one { justify-self: end; width: calc(50% - var(--tr-in) / 2); }
.tr__fams::before {
  content: "";
  align-self: start;
  height: var(--space-4);
  margin-top: var(--space-5);
  border: 1px solid var(--on-muted);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
/* the films' row starts just under the bracket's ends */
.tr__intro, .tr__fam[data-fam="0"] > .reels { margin-top: calc(var(--space-5) + var(--space-4) + var(--space-1)); }

/* phones: one column, each family's head, sentence and films in turn; the
   caption beside focus's film */
@media (max-width: 639px) {
  .tr__mind { margin-top: var(--space-6); }
  .tr__fam[data-fam="0"] > .tr__head { grid-row: 1; }
  .tr__fam[data-fam="0"] > .tr__text { grid-row: 2; }
  .tr__fams::before, .tr__intro, .tr__fam[data-fam="0"] > .reels { grid-row: 3; }
  .tr__fam[data-fam="1"] > .tr__head { grid-row: 4; }
  .tr__fam[data-fam="1"] > .tr__text { grid-row: 5; }
  .tr__fam[data-fam="1"] > .reels { grid-row: 6; }
  .tr__fam[data-fam="2"] > .tr__head { grid-row: 7; }
  .tr__fam[data-fam="2"] > .tr__text { grid-row: 8; }
  .tr__fam[data-fam="2"] > .reels { grid-row: 9; }
  .tr__fam:not([data-fam="0"]) > .tr__head { margin-top: var(--space-7); }
  .tr__fam:not([data-fam="0"]) > .reels { margin-top: var(--space-4); }
}
/* tablets: each family's head across, its sentence on the left and its
   films on the right; the caption beside focus's film */
@media (min-width: 640px) and (max-width: 1023px) {
  .tr__fams { grid-template-columns: minmax(0, 1fr) 344px; column-gap: var(--space-6); }
  .tr__fam > .tr__head { grid-column: 1 / -1; }
  .tr__fam > .tr__text { grid-column: 1; align-self: start; margin-top: var(--space-4); }
  .tr__fam > .reels, .tr__intro, .tr__fams::before { grid-column: 2; }
  .tr__fams::before { margin-top: var(--space-4); }
  .tr__intro, .tr__fam[data-fam="0"] > .reels { margin-top: calc(2 * var(--space-4) + var(--space-1)); }
  .tr__fam[data-fam="0"] > .tr__head { grid-row: 1; }
  .tr__fam[data-fam="0"] > .tr__text, .tr__fams::before, .tr__intro, .tr__fam[data-fam="0"] > .reels { grid-row: 2; }
  .tr__fam[data-fam="1"] > .tr__head { grid-row: 3; }
  .tr__fam[data-fam="1"] > :is(.tr__text, .reels) { grid-row: 4; margin-top: var(--space-4); }
  .tr__fam[data-fam="2"] > .tr__head { grid-row: 5; }
  .tr__fam[data-fam="2"] > :is(.tr__text, .reels) { grid-row: 6; margin-top: var(--space-4); }
  .tr__fam:not([data-fam="0"]) > .tr__head { margin-top: var(--space-8); }
}

/* ---- desktop ---------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* the body half on the families' three columns: its words on the first
     two, centred on the film, which takes the third and runs off the right
     edge; the line runs on from "Push your body." to 16 px short of the
     film, where the joining line turns down beside it */
  .tr__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--tr-gap);
  }
  .tr__body > .tr__head { grid-column: 1 / 3; grid-row: 2; margin-right: calc(var(--space-4) - var(--tr-gap)); }
  .tr__body > .tr__text { grid-column: 1 / 3; grid-row: 3; margin-top: var(--space-5); }
  .tr__montage {
    grid-column: 3;
    grid-row: 1 / -1;
    margin-right: calc(-1 * var(--tr-bleed));
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    clip-path: inset(0 calc((1 - var(--a)) * var(--tr-bleed)) 0 0 round var(--radius-card) calc((1 - var(--a)) * var(--radius-card)) calc((1 - var(--a)) * var(--radius-card)) var(--radius-card));
  }

  /* the brain half: "Elevate your", then the three families on one shared
     set of rows (head, sentence, then the films' row: the caption and
     focus's film under focus, two films under memory and two under
     reasoning, the bracket over all six places); each family's stretch
     runs to 16 px short of the next ending, memory's into the joining line */
  .tr { --tr-in: var(--space-4); }
  .tr__mind { margin-top: clamp(40px, 5vw, 64px); }
  .tr__fams { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--tr-gap); }
  .tr__fam[data-fam="0"] > *, .tr__intro { grid-column: 1; }
  .tr__fam[data-fam="1"] > * { grid-column: 2; }
  .tr__fam[data-fam="2"] > * { grid-column: 3; }
  .tr__fam > .tr__head { grid-row: 1; }
  .tr__fam > .tr__text { grid-row: 2; margin-top: var(--space-4); }
  .tr__fams::before { grid-row: 3; grid-column: 1 / -1; }
  .tr__intro { grid-row: 3; }
  .tr__fam > .reels { grid-row: 3; margin-top: calc(var(--space-5) + var(--space-4) + var(--space-1)); }
  .tr__fam:not(:last-child) > .tr__head { margin-right: calc(var(--space-4) - var(--tr-gap)); }
}
/* wide screens: where the margin is wider than 120 px the montage keeps to
   the column (a 4:5 film the width of the margin as well would stand taller
   than the screen) */
@media (min-width: 1521px) {
  .tr__montage { margin-right: 0; border-radius: var(--radius-card); clip-path: none; }
}

/* ---- the challenge films: one card for all five (13 Oct 2026, second
   pass), the film's own title card: its name and family label as text (the
   label in Soft Line caps, as the film sets it, at caption size: the films'
   own label is 5-9 px at card size), over its framed opening, which loops
   silently while its family is lit (stacked, the family the line has
   reached; desktop, each in turn as the films pass up the screen:
   training.js). The clip is the title loop with its baked title band cut
   off (the top 240 of its 960 px; the label ends at 228, the frame starts
   at 250): a 3:4 window on the frame and the Ink band under it, where the
   Watch tab sits. Cards side by side take one height (their row's), each
   clip at the foot of its card, so the clips line up even where a title
   wraps (larger text) ------------------------------------------------------ */
.reels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tr-in); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.reels--one { grid-template-columns: minmax(0, 1fr); }
.reel { display: flex; min-width: 0; }
.reel__media {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  overflow: clip;   /* clips the same, rounded corners too, but is no scroll container: nothing inside (the Watch tab's hidden words at larger text, a find in page) can scroll the card's content off its edge */
  border-radius: var(--radius-card);
  background: var(--color-brand-ink);
  color: var(--on-text);
  text-decoration: none;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;   /* the card answers a tap itself (the viewer opens) */
}
.reel__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--on-line); pointer-events: none; }
/* the title: the name in Display 650, the label under it in Text 650 caps,
   Soft Line, tracked as a label; both centred, as on the film's card */
.reel__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 auto;
  padding: clamp(var(--space-4), 9cqw, var(--space-6)) var(--space-1) var(--space-1);
  text-align: center;
}
.reel__name {
  max-width: 100%;
  font-size: clamp(1rem, 13.5cqw, 1.5rem);
  font-weight: var(--weight-strong);
  font-variation-settings: var(--type-display-axes);
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.reel__fam {
  max-width: 100%;
  margin-top: 2px;
  font-size: var(--text-caption);
  font-weight: var(--weight-strong);
  font-variation-settings: var(--type-text-axes);
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-muted);
  overflow-wrap: break-word;
}
/* a card too narrow for REASONING AGILITY on one line with room either
   side (151 px at 14 px, in a card under 176 px): every label takes two
   lines, a word to a line, so the five stay alike */
@container (width < 11rem) { .reel__fam { width: min-content; } }
.reel__frame { position: relative; display: block; flex: none; aspect-ratio: 3 / 4; overflow: hidden; }
.reel__poster, .reel__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
.reel__poster { transition: opacity 450ms var(--ease-out), transform 600ms var(--ease-out); }
.reel__preview { transition: transform 600ms var(--ease-out); }
.reel.is-previewing .reel__poster { opacity: 0; }
html:not(.js) .reel__preview { display: none; }
/* the loop grows with its still, so the clip never jumps when it starts */
@media (hover: hover) { .reel__media:hover .reel__poster, .reel__media:hover .reel__preview { transform: scale(1.03); } }

/* the Watch tab: in the Ink band under the clip's frame, flush with the
   frame's left edge (70/1080 of the card's width) and clear of the film
   (13 Oct 2026). The band is 123/540 of the card's width high; the tab
   takes all but 5 px above and below it (24 to 40 px); on a card under
   150 px wide it is the play mark alone */
.reel__play {
  --tab: clamp(24px, calc(22.78cqw - 10px), 40px);
  left: 6.48%;
  bottom: calc((22.78cqw - var(--tab)) / 2);
  min-height: 0;
  height: var(--tab);
  gap: var(--space-2);
  padding: 0 var(--space-3) 0 4px;
}
.reel__play .play__icon { width: calc(var(--tab) - 8px); height: calc(var(--tab) - 8px); border-radius: 5px; }
@container (width < 150px) {
  .reel__play { width: var(--tab); padding: 0; justify-content: center; }
  .reel__play .play__icon { width: calc(var(--tab) - 6px); height: calc(var(--tab) - 6px); border-radius: 4px; }
  .reel__word { display: none; }
}

/* larger text on a phone (base.css, 12 Oct 2026): where the page is under
   14 rem (a 390 px phone at twice the text size) two cards across would
   break words inside themselves: the films go one to a row, and the
   caption stands over focus's film */
@media (max-width: 639px) {
  @container page (width < 14rem) {
    .tr__intro, .tr__fam > .reels--one { justify-self: stretch; width: auto; }
    .reels { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
    .tr__fams::before { grid-row: 3 / span 2; }
    .tr__fam[data-fam="0"] > .reels { grid-row: 4; margin-top: var(--space-4); }
    .tr__fam[data-fam="1"] > .tr__head { grid-row: 5; }
    .tr__fam[data-fam="1"] > .tr__text { grid-row: 6; }
    .tr__fam[data-fam="1"] > .reels { grid-row: 7; }
    .tr__fam[data-fam="2"] > .tr__head { grid-row: 8; }
    .tr__fam[data-fam="2"] > .tr__text { grid-row: 9; }
    .tr__fam[data-fam="2"] > .reels { grid-row: 10; }
  }
}

/* ---- the viewer: full screen, like reels -------------------------------- */
.viewer { width: 100vw; height: 100svh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-ink-panel); color: var(--color-text); }   /* dvh: opened with the browser's bars hidden it still fills the screen */
.viewer::backdrop { background: var(--color-brand-ink); }
.viewer[open] { display: grid; place-items: center; }
.viewer__shell { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.viewer__bar { display: flex; align-items: center; gap: var(--space-3); width: 100%; }
.viewer__progress { flex: 1; display: flex; gap: 4px; }
.viewer__seg { flex: 1; height: 3px; border-radius: 3px; background: var(--color-line); overflow: hidden; }
.viewer__seg i { display: block; width: 0; height: 100%; background: var(--color-text); }
.viewer__tools { display: flex; gap: var(--space-2); flex: none; }
.viewer__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-line); color: var(--color-text); cursor: pointer; }
@media (hover: hover) { .viewer__btn:hover { background: var(--color-text); color: var(--color-brand-ink); } }
.viewer__ico--close { position: relative; width: 16px; height: 16px; }
.viewer__ico--close::before, .viewer__ico--close::after { content: ""; position: absolute; left: 7px; top: -2px; width: 2px; height: 20px; background: currentColor; transform: rotate(45deg); }
.viewer__ico--close::after { transform: rotate(-45deg); }
.viewer__frame { position: relative; height: min(calc(100svh - 120px), 960px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius-card); background: var(--color-brand-ink); }
.viewer__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewer__tap { position: absolute; inset: 0 0 48px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* the tap zone fills the clipped frame: its ring is drawn inside, Chalk over an Ink band, so it shows on light and dark film */
.viewer__tap:focus-visible { outline-offset: calc(-1 * var(--focus-width)); box-shadow: inset 0 0 0 calc(var(--focus-width) + var(--focus-gap)) var(--on-focus-gap); border-radius: inherit; }
.viewer__paused { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--color-ink-panel); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); pointer-events: none; }
.viewer__paused::after { content: ""; position: absolute; left: 29px; top: 24px; border-left: 20px solid var(--color-text); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.viewer.is-paused .viewer__paused { opacity: 1; }
.viewer__seek { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: flex-end; padding: 0 var(--space-4) var(--space-3); cursor: pointer; }
.viewer__seek-track { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--color-line); overflow: hidden; transition: height var(--duration-fast) var(--ease-out); }
.viewer__seek:focus-visible .viewer__seek-track { height: 6px; }
@media (hover: hover) { .viewer__seek:hover .viewer__seek-track { height: 6px; } }
.viewer__seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--color-action-bg); }
.viewer__end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); background: var(--color-brand-ink); text-align: center; }
.viewer__end[hidden] { display: none; }
.viewer__replay { min-height: 44px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--color-text); font: inherit; text-decoration: underline; cursor: pointer; }
.viewer__credit { margin: var(--space-4) 0 0; font-size: var(--text-caption); color: var(--on-muted); text-wrap: balance; }
.viewer__credit a { color: inherit; white-space: nowrap; }   /* "CC BY 3.0" never splits */
.viewer.is-ended .viewer__seek { display: none; }
/* a film that starts after its title card (10 Oct 2026): hidden until the
   seek to its start is done, its poster in the frame meanwhile, cropped as
   the film is (training.js sets the picture) */
.viewer__frame { background-size: cover; background-position: 50% 50%; }
.viewer.is-cueing .viewer__video { opacity: 0; }
/* a film that cannot load (10 Oct 2026): one short line in the empty Ink
   frame, in the credit's muted colour at reading size; the paused mark
   and the seek line step aside. Empty, the line has no box (it stays in
   place as the polite live region) */
.viewer__msg { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max-content; max-width: calc(100% - 2 * var(--space-5)); margin: 0; color: var(--on-muted); font-size: var(--text-ui); line-height: 1.45; text-align: center; text-wrap: balance; pointer-events: none; }
.viewer.is-failed .viewer__video, .viewer.is-failed .viewer__paused, .viewer.is-failed .viewer__seek { visibility: hidden; }
.viewer__arrow {
  position: absolute; top: 50%; margin-top: -24px;
  display: grid; place-items: center;
  width: var(--target-preferred); height: var(--target-preferred);
  padding: 0; border: 1px solid var(--color-text); border-radius: 50%;
  background: transparent; color: var(--color-text); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .viewer__arrow:hover:not(:disabled) { background: var(--color-text); color: var(--color-brand-ink); } }   /* no sticky fill after a tap */
.viewer__arrow:disabled { opacity: 0.3; cursor: default; }
.viewer__arrow--prev { left: -80px; }
.viewer__arrow--next { right: -80px; }
.viewer__chev { width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-2px) rotate(45deg); }
.viewer__chev--prev { transform: translateX(2px) rotate(-135deg); }
@media (max-width: 767px) {
  .viewer__shell { width: 100vw; height: 100svh; height: 100dvh; gap: 0; }
  .viewer__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: var(--space-3); }
  .viewer__frame { height: 100svh; height: 100dvh; width: 100vw; aspect-ratio: auto; border-radius: 0; }
  /* the whole 9:16 film on a tall phone, Ink above and below (12 Oct 2026):
     the Forward Play films sit on an Ink canvas and end on a wide end card
     that cover cropped at both sides */
  .viewer__video { object-fit: contain; }
  .viewer__arrow { display: none; }
}
/* a phone on its side (under 500 px tall): the 9:16 film the full height
   of the screen, its progress and close over its top, the arrows beside it
   (full width it was cropped to a band; above 767 px it shrank to a card) */
@media (max-height: 500px) and (orientation: landscape) {
  .viewer__shell { width: auto; height: 100svh; height: 100dvh; gap: 0; }
  .viewer__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: var(--space-3); }
  .viewer__frame { height: 100svh; height: 100dvh; width: auto; aspect-ratio: 9 / 16; border-radius: 0; }
  .viewer__arrow { display: grid; }
  .viewer__arrow--prev { left: calc(-1 * var(--target-preferred) - var(--space-5)); }
  .viewer__arrow--next { right: calc(-1 * var(--target-preferred) - var(--space-5)); }
  .viewer__end { gap: var(--space-3); padding: calc(2 * var(--space-3) + 44px) var(--space-4) var(--space-4); }   /* centred below the bar */
  /* the end card is not a film: it takes the width between the arrows
     (at most 30 rem), so the routes and the credit keep one line each;
     "Watch again" returns the 9:16 frame */
  .viewer.is-ended .viewer__frame { aspect-ratio: auto; width: min(calc(100vw - 2 * (var(--target-preferred) + var(--space-5)) - 2 * var(--space-4)), 30rem); }
}
/* the bar and the seek line keep clear of a notch or home indicator where
   the page runs under them (env() is 0 otherwise) */
@media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
  .viewer__bar { padding-top: max(var(--space-3), env(safe-area-inset-top)); }
  .viewer__seek { height: calc(44px + env(safe-area-inset-bottom)); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
  /* the progress lies over the film here: a 1 px Ink rim round each
     segment, so the Chalk of the part already seen still reads where the
     film is light (the challenges' cream card, a pale wall) */
  .viewer__seg { box-shadow: 0 0 0 1px var(--color-ink-panel); }
}
html.viewer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tr__montage video, .reel__poster, .reel__preview { transition: none; }
}