/* clubs.css — compositions used only on For Clubs: C03 (the complete
   programme, Sticky showcase), C04 (less preparation, more coaching) and C07
   (operator questions, the closing action). The layouts Alessandro chose on
   8 Oct 2026 for the other groups have their own files: clubs-hero.css (C01
   the Turntable), clubs-c02.css (C02 Band and panel), clubs-c05.css (C05
   Case to floor) and clubs-c06.css (C06 Staircase); behaviour for all of
   them is in clubs.js. Everything else comes from the shared system
   (tokens, base, layout, shell, ui).

   Surfaces follow the content: Ink for the opening with the kit; Chalk for
   the member case (its band meets the hero); one dark stretch for
   the system and its delivery (C03 + C04, joined by a full-bleed rule);
   Chalk for the practical fit (the black cases read there); Ink for the
   introductory session; Chalk for the questions; the single Vermilion field
   for the closing action. Each group has its own form and moment; all of
   them are complete and static under reduced motion. */

/* ---- C03 the complete programme: a specification on the 12-column grid
   (number, name, what it does); each part's rule draws as it arrives */
.clubs-system__head { align-items: start; row-gap: var(--space-5); }
.clubs-system__head h2, .clubs-system__head p { margin: 0; }
/* the kit, Sticky showcase: floating cut-outs on the Ink (no panels); the
   stage on the left follows the list on the right (clubs.js). The
   equipment scene carries is-on in the HTML (10 Oct 2026), so without
   JavaScript, or if clubs.js fails, the stage shows the kit instead of an
   empty column; clubs.js takes over from there as before */
.kp { margin: 0; }
.kp img { display: block; width: 100%; height: auto; }
/* the summary screen in a phone-height window, its top (the ability scores);
   an Ink card on Ink keeps an edge */
.kp--screen { aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; outline: 1px solid var(--on-control); outline-offset: -1px; }
.ksh { margin-top: var(--space-7); row-gap: var(--space-6); align-items: start; }
.ksh__stage { display: none; }
.ksh__scene { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: var(--grid-gutter); }
.ksh__scene--gear .kp--tablet { grid-column: 1 / span 3; }
.ksh__scene--gear .kp--headset { grid-column: 4 / span 2; }
.ksh__scene--gear .kp--pod { grid-column: 6; }
/* the coach app's tablet screens (programme, coach interface): the full stage width */
.ksh__scene--tablet-screen { grid-template-columns: minmax(0, 1fr); }
.kp--tablet-screen { width: 100%; max-width: 620px; justify-self: center; }
.ksh__scene--screen .kp--screen { grid-column: 2 / span 4; width: 100%; max-width: 280px; justify-self: center; rotate: -3deg; }
.ksh__inline { margin: var(--space-5) 0 var(--space-6); }
.clubs-system--single { margin-top: 0; }
/* phones and tablets: the stage's column is empty (each visual sits in its
   part), so it takes no row; the list starts under the heading at the
   section's own gap (the list rule below would otherwise add 64 px: about
   170 px of Ink between the heading and part 01). The italic phrase starts
   its own line, as it does on wider screens, and the two short phrases
   before it keep together (no "The kit. The / programme. / The") */
@media (max-width: 1023px) {
  .ksh__visual { display: none; }
  .clubs-system.clubs-system--single { margin-top: 0; }
  .clubs-system__head .ed::before { content: "\A"; content: "\A" / ""; white-space: pre; }   /* a line break that keeps the heading's own line pitch */
}
/* tablets and landscape phones: the equipment scene at the width of the
   screens below it, centred, so the tablet and headset renders are not
   drawn larger than their files */
@media (min-width: 640px) and (max-width: 1023px) {
  .ksh__inline .ksh__scene--gear { max-width: 560px; margin-inline: auto; }
}
@media (min-width: 1024px) {
  .ksh__inline { display: none; }
  .ksh__visual { align-self: stretch; }   /* the column spans the list, so the stage stays in view */
  .ksh__stage { display: block; position: sticky; top: calc(var(--header-h) + var(--space-7)); height: min(62vh, 560px); }
  .ksh__stage .ksh__scene { position: absolute; inset: 0; align-content: center; opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease-out), transform 700ms cubic-bezier(0.2, 0.75, 0.1, 1); }
  .ksh__stage .ksh__scene.is-on { opacity: 1; transform: none; }
  /* doubled class: beats the 12-column list rule further down. Each part
     at most 360 px tall (12 Oct 2026, Alessandro approved after the
     mobile/desktop size checks): at 34vh a part was 490 px tall on a
     1440 px tall screen, mostly empty Ink; up to 1059 px of height it is
     34vh as before */
  .clubs-system.clubs-system--single > li { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; min-height: min(34vh, 360px); }
  .clubs-system.clubs-system--single > li::before, .clubs-system.clubs-system--single h3, .clubs-system.clubs-system--single p { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ksh__stage .ksh__scene { transition: none; }
}
/* print (10 Oct 2026): the sticky stage is a screen device (one scene at a
   time, a column held beside the list). On paper, at any page width, each
   part carries its own picture as on phones, the list takes the full
   width and the parts lose the scroll length they need on screen. A part
   keeps its words with its picture, and prints as plain blocks: laid out
   as a grid, Chrome let the summary screen run over the next part when a
   page break fell near it (the 8 px row gap becomes the margins) */
@media print {
  .ksh__visual { display: none; }
  .ksh__inline { display: block; }
  .grid.ksh > .ksh__list { grid-column: 1 / -1; }
  .clubs-system.clubs-system--single > li { display: block; min-height: 0; break-inside: avoid; }
  .clubs-system.clubs-system--single > li::before { display: block; margin-bottom: var(--space-2); }
  .clubs-system.clubs-system--single > li > p { padding-top: var(--space-2); }
  .ksh__inline .ksh__scene--gear { max-width: 560px; margin-inline: auto; }
}
.clubs-system { margin: var(--space-8) 0 0; padding: 0; list-style: none; counter-reset: part; }
.clubs-system > li {
  counter-increment: part;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2) var(--grid-gutter);
  padding: var(--space-5) 0;
}
.clubs-system > li::before {
  content: counter(part, decimal-leading-zero);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  color: var(--on-muted);
}
.clubs-system > li::after {            /* the rule, drawn left to right */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  border-top: 1px solid var(--on-line);
  transform-origin: left center;
}
.clubs-system h3 { margin: 0; }
.clubs-system p { margin: 0; max-width: var(--measure); }
/* phones and tablets: title to text 12 px, as in every other section (the
   row gap gives 8) */
@media (max-width: 1023px) { .clubs-system h3 { margin-bottom: var(--space-1); } }
@media (min-width: 1024px) {
  .clubs-system > li { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
  .clubs-system > li::before { grid-column: 1; }
  .clubs-system h3 { grid-column: 2 / span 5; }
  .clubs-system p { grid-column: 7 / span 6; }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .clubs-system:not(.is-in) > li::after { transform: scaleX(0); }
  .motion-ready .clubs-system > li::after {
    transition: transform calc(var(--duration-expressive) * 2) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger) * 2);
  }
}

/* ---- C03 the two app screens, whole (13 Oct 2026, Alessandro: "I want
   them to see the whole screen too … don't change the layout overall").
   The crops keep their files, sizes and places. Each crop (the stage's and
   the inline copy) is a link to the whole screen; clubs.js opens it in the
   viewer below, and without JavaScript the link opens the file itself.
   "See the whole screen" is a Chalk tab with an Ink icon tile, the form of
   the play tab over films (ui.css .play): it sits on the crop's lower left
   corner, 8 px over the picture and the rest below it, in the part's own
   space (the 32 px under an inline copy, the stage's room under its
   picture), so it hides none of the crop's content and moves nothing.
   An Ink edge keeps it apart where the crop is a Chalk card (the coach
   interface from 1280 px). The whole picture is the link too: zoom-in
   cursor where there is a mouse. Below 360 px, or with larger text, the
   label is "Whole screen". The stage's hidden scenes take no clicks (each
   lies over the one shown); their links stay in the Tab order, and
   focusing one brings its screen on (clubs.js; without JavaScript, the
   rule below) */
.kp-zoom { position: relative; display: block; border-radius: var(--radius-card); color: var(--color-text-reading); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.kp-zoom { scroll-margin-bottom: var(--space-7); }   /* Tab scrolls the tab into view too: 40 px under the picture, and its focus ring */
@media (hover: hover) and (pointer: fine) { .kp-zoom { cursor: zoom-in; } }
.kp-zoom__btn {
  position: absolute;
  left: var(--space-3);
  top: calc(100% - var(--space-2));
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-preferred);
  padding: 0 var(--space-4) 0 7px;   /* 8 px round the icon tile, with the 1 px border */
  border: 1px solid transparent;   /* drawn in forced colours, where the fill is not */
  border-radius: var(--radius-control);
  background: var(--color-bg-reading);
  color: var(--color-text-reading);
  box-shadow: 0 0 0 var(--focus-gap) var(--color-brand-ink);
  font-size: var(--text-ui);
  font-weight: var(--weight-strong);
  font-variation-settings: var(--type-text-axes);
  line-height: 1.25;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.kp-zoom__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 6px; background: var(--color-brand-ink); color: var(--color-text); forced-color-adjust: none; }
.kp-zoom__icon svg { width: 18px; height: 18px; }
.kp-zoom__short { display: none; }
@media (hover: hover) { .kp-zoom:hover .kp-zoom__btn { background: var(--color-surface-reading); } }
.kp-zoom:active .kp-zoom__btn { transform: translateY(1px); }
/* the focus ring goes round the tab: Chalk, with the tab's Ink edge as its gap */
.kp-zoom:focus-visible { outline: none; box-shadow: none; }
.kp-zoom:focus-visible .kp-zoom__btn { outline: var(--focus-width) solid var(--on-focus); outline-offset: var(--focus-gap); }
@media (max-width: 359px) {
  .kp-zoom__long { display: none; }
  .kp-zoom__short { display: inline; }
}
@container page (width < 20rem) {
  .kp-zoom__long { display: none; }
  .kp-zoom__short { display: inline; }
}
@media (min-width: 1024px) {
  .ksh__stage .ksh__scene:not(.is-on) { pointer-events: none; }
  /* without JavaScript the stage keeps the kit on: a screen whose link has
     focus shows in its place */
  html:not(.js) .ksh__stage .ksh__scene:focus-within { opacity: 1; transform: none; pointer-events: auto; }
  html:not(.js) .ksh__stage:has(.ksh__scene:focus-within) .ksh__scene:not(:focus-within) { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .kp-zoom:active .kp-zoom__btn { transform: none; } }
@media print { .kp-zoom__btn { display: none; } }

/* the viewer: the whole screen on Ink, fitted to the window (to its width on
   a phone held upright). A tap or click on it zooms in at that point (to
   about 1200 px wide on a phone, twice the fitted size on larger screens),
   and again zooms back out; two fingers pinch; one finger, the mouse or the
   wheel moves round it; the Zoom button and the keyboard (Enter, + and −,
   the arrow keys) do the same. Esc, Close or a tap on the Ink round the
   screen closes it. The page under it does not scroll. No zoom animation;
   the viewer fades in only where motion is allowed */
.shotview { width: 100vw; height: 100svh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--color-brand-ink); color: var(--on-text); touch-action: none; overscroll-behavior: contain; }
.shotview::backdrop { background: var(--color-brand-ink); }
.shotview[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
html.shotview-open { overflow: hidden; scrollbar-gutter: stable; }
.shotview__bar { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--page-margin); }
.shotview__name { flex: 1; min-width: 0; margin: 0; font-size: var(--text-ui); line-height: 1.3; }
.shotview__title { display: block; font-weight: var(--weight-strong); }
.shotview__sub { display: block; color: var(--on-muted); }
.shotview__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: none;
  min-width: var(--target-preferred);
  min-height: var(--target-preferred);
  padding: 0 var(--space-4);
  border: 1px solid var(--on-control);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--on-text);
  font-family: var(--font-primary);
  font-size: var(--text-ui);
  font-weight: var(--weight-strong);
  font-variation-settings: var(--type-text-axes);
  line-height: 1.25;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.shotview__close { width: var(--target-preferred); padding: 0; }
.shotview__ico { width: 20px; height: 20px; flex: none; }
.shotview.is-zoomed .shotview__ico-plus { display: none; }
@media (hover: hover) { .shotview__btn:hover { background: var(--on-text); border-color: var(--on-text); color: var(--color-brand-ink); } }
.shotview__stage { display: flex; overflow: auto; padding: var(--space-3); overscroll-behavior: contain; touch-action: none; -webkit-user-select: none; user-select: none; }   /* touch-action again: the stage scrolls, so the dialog's does not reach it */
.shotview__img { cursor: zoom-in; }
.shotview.is-zoomed .shotview__img { cursor: grab; }
.shotview.is-dragging .shotview__stage, .shotview.is-dragging .shotview__img { cursor: grabbing; }
/* zoomed, the screen fills the stage: a line keeps the bar and the hint apart from it */
.shotview.is-zoomed .shotview__bar { box-shadow: 0 1px 0 var(--on-line); }
.shotview.is-zoomed .shotview__hint { box-shadow: 0 -1px 0 var(--on-line); }
.shotview__stage:focus-visible { outline-offset: calc(-1 * var(--focus-width)); box-shadow: none; }
.shotview__img { flex: none; width: 100%; height: auto; max-width: none; margin: auto; touch-action: none; -webkit-user-drag: none; }
.shotview__hint { position: relative; z-index: 1; margin: 0; padding: var(--space-3) var(--page-margin) var(--space-4); color: var(--on-muted); font-size: var(--text-ui); line-height: 1.4; text-align: center; }
/* phones held upright: the zoom button shows its icon only (its name stays) */
@media (max-width: 479px) {
  .shotview__zoom { width: var(--target-preferred); padding: 0; }
  .shotview__zoom-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1024px) { .shotview__stage { padding: var(--space-5) var(--page-margin); } }
/* phones turned sideways: the bar and the hint closer, for a larger screen */
@media (orientation: landscape) and (max-height: 500px) {
  .shotview__bar { padding-block: var(--space-1); }
  .shotview__stage { padding-block: var(--space-2); }
  .shotview__hint { padding-block: var(--space-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .shotview[open] { animation: shotview-in var(--duration-enter) var(--ease-out); }
}
@keyframes shotview-in { from { opacity: 0; } }

/* ---- C04 less preparation, more coaching: a full-bleed rule continues the
   dark stretch; from 1024 px the photo holds the left (sticky) while the
   heading and the three points pass on the right */
.clubs-delivery { border-top: 1px solid var(--on-line); }
.clubs-coach { row-gap: var(--space-5); align-items: start; }
.clubs-coach > * { grid-column: 1 / -1; }
.clubs-coach__title { margin: 0; }
.clubs-coach__media { aspect-ratio: 4 / 5; width: 100%; max-width: 500px; margin-top: var(--space-4); }
.clubs-list { margin: 0; padding: 0; list-style: none; }
.clubs-list > li { padding-top: var(--space-5); margin-top: var(--space-5); border-top: 1px solid var(--on-line); }
.clubs-list h3 { margin: 0 0 var(--space-3); }
.clubs-list p { margin: 0; max-width: var(--measure); }
@media (min-width: 1024px) {
  .clubs-coach__title, .clubs-coach__list { grid-column: 7 / span 6; }
  .clubs-coach__media {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
    margin-top: 0;
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
}

/* ---- C07 operator questions and the closing action */
/* the questions break into even lines (no "take / part?" on phones) */
.faq summary { text-wrap: balance; }
.clubs-closing .grid { align-items: end; row-gap: var(--space-6); }
.clubs-closing h2, .clubs-closing p { margin-top: 0; }
.clubs-closing .t-lead { margin-bottom: 0; max-width: var(--measure); }
.clubs-closing__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.clubs-closing__contact { margin: 0; font-size: var(--text-ui); }
.clubs-closing__contact a { display: inline-flex; align-items: center; min-height: var(--target-preferred); }
@media (min-width: 1024px) { .clubs-closing__actions { align-items: flex-end; } }

/* ---- the whole page: body text never leaves its last word alone on a line
   ("format.", "reached.", "you."); the browser rebalances only the last
   lines, so a paragraph keeps its line count */
main p { text-wrap: pretty; }
/* narrow phones: where pretty still leaves one word alone (320–353 px:
   "…adapts to their / performance.", "…the connectivity / requirements."),
   the last two words keep together; from 400 px they would only move
   breaks that are already right */
@media (max-width: 399px) { .clubs-keep { white-space: nowrap; } }
/* larger text (12 Oct 2026, Alessandro approved after the mobile/desktop
   size checks): main is the size container "page", and under 20rem the
   reader's text is set larger than a 320 px phone shows it at the default
   size. Then a kept phrase stays one unit where it fits a line, and breaks
   inside itself where it is wider than the column, instead of pushing the
   page sideways. At the default text size this never applies */
@container page (width < 20rem) {
  .clubs-keep { display: inline-block; max-width: 100%; white-space: normal; }
}

/* ---- landscape phones (wide but short): each picture fits the screen
   under the header, so it is seen whole without scrolling through it; in
   C04 the photo holds the left while the heading and the points pass on
   the right, as on desktop */
@media (min-width: 640px) and (max-width: 1023px) and (max-height: 540px) {
  .ksh__inline .ksh__scene--gear { max-width: 440px; }
  .ksh__inline .kp--tablet-screen { max-width: min(620px, calc((100svh - var(--header-h) - var(--space-7)) * 4 / 3)); }
  .ksh__inline .kp--screen { max-width: min(280px, calc((100svh - var(--header-h) - var(--space-7)) * 9 / 16)); }
  .clubs-coach__media { max-width: min(500px, calc((100svh - var(--header-h) - var(--space-7)) * 4 / 5)); }
  .clubs-coach__title, .clubs-coach__list { grid-column: 4 / -1; }
  .clubs-coach__media {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
    margin-top: 0;
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}