/* clubdrills.com home page, English and Hebrew (marketing/site/index.html, he/index.html).
   Plain CSS, no build step. The page wears the club color a visitor picks (home.js sets the variables).
   Built to the readability spec (research_notes/AI design tooling 2026 deep dive/readability_science.md,
   Part B; rule numbers in brackets).

   The logo is the CLU-177 mark, inlined in the HTML from its SVG masters: geometry untouched, scaled
   only, colored through currentColor. The solid one stands before the wordmark in the bar and footer and
   sits in the woven shield on the shirt's chest.

   Fixed tokens [B2]                      Club tokens [B3], set by home.js on a pick (clubTokens);
     --paper  #F4F4F1  --ink #141414        the fallbacks are the page's default, deep navy #1F2F4A,
                                            as home.js's clubTokens computes it [12]
     --on-ink #EDEDE8 (Lc 95) body on ink     --cg / --cg-text  --club-ground + its text (Lc 75, 4.5:1)
     --disp-ink #E6E6E1 (Lc 91) display       --c-mark   --club-on-ink-mark (Lc 45 on ink: the underline)
                                              --cgd      --club-ground-display (Lc 60): the shirt numbers
                                              --c-paper  --club-on-paper (Lc 75 on paper)
                                              --c-raw    the pick as given: only the shirt cloth [13]
   The shirt uses three colors: the cloth (--c-raw), a tonal stripe (--stripe: OKLCH L 0.05 away) and the
   trim (--metal: the ground text color, white or ink), which the shield on the chest is cut from; the mark
   and the stitched line on the shield are the ground (--cg), so they hold Lc 75 against it. home.js also
   gives --cd-fill/--cd-on-fill (the filled button on a club band [40]), --cd-inside (the inside of the shirt,
   seen through the collar), and the plate text and mark.

   Direction: the Hebrew page is the same page with dir="rtl". Layout uses grid and logical properties, so
   it mirrors by itself; the few physical things (a gradient, a clip, an arrow) have [dir="rtl"] rules at
   the end. Hebrew display type is Noto Sans Hebrew at its narrowest width (62.5), set under :lang(he).

   Type [15-22], in rem so a reader text size carries through [30]:
     display 1  XC caps: hero 38px to 100px; close and value words 48 to 112px; 850 on color and ink,
                900 on paper, lh .95, +.02em
     display 2  XC caps 36 to 60px, lh 1: every section heading, on ink and on paper alike
     quote      Rubik 500 26 to 36px, sentence case, lh 1.3 [35]; lead Rubik 400 20 to 24px, lh 1.4
     body       Rubik 400 18px, lh 1.5 [16, 17]; label Rubik 600 or 700, 15 to 16px */

/* ── base */
*{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:inherit}
nav a:not(.btn){text-decoration:none}
nav a:not(.btn):hover{text-decoration:underline}
img,svg{max-width:100%}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.cd-skip{position:absolute;inset-inline-start:16px;top:-100px;z-index:100;padding:12px 16px;background:#141414;color:#EDEDE8;font:600 1rem/1.2 "Rubik",system-ui,sans-serif}
.cd-skip:focus{top:12px}

/* ── the club color picker (home.js builds it). Neutral here; the page dresses it further down (.cd .kp) */
.kp{position:relative;display:inline-flex;vertical-align:middle;
  --kp-bg:#FFFFFF;--kp-ink:#151515;--kp-muted:#5F5B57;--kp-line:rgba(21,21,21,.12);
  --kp-radius:10px;--kp-sw-radius:50%;--kp-font:inherit;
  --kp-shadow:0 16px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08)}
.kp-trigger{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding-block:6px;padding-inline:8px 12px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 28%,transparent);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:1;cursor:pointer;white-space:nowrap}
.kp-trigger:hover{border-color:currentColor}
.kp-trigger:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.kp-dot{--kp-cur:var(--kit,var(--kp-default,#D81E2C));flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle,var(--kp-cur) 0 52%,transparent 54%),conic-gradient(from 0deg,#E5484D,#F2A93B,#F5D90A,#46A758,#12A594,#3E8EF7,#6E56CF,#D6409F,#E5484D)}
.kp-panel{position:absolute;z-index:60;top:calc(100% + 10px);inset-inline-end:0;width:328px;max-width:calc(100vw - 32px);padding:16px;
  background:var(--kp-bg);color:var(--kp-ink);border:1px solid var(--kp-line);border-radius:var(--kp-radius);box-shadow:var(--kp-shadow);
  font-family:var(--kp-font);font-size:14px;line-height:1.4;text-align:start;text-transform:none;letter-spacing:normal;font-style:normal}
.kp[data-kit-align="start"] .kp-panel{inset-inline-end:auto;inset-inline-start:0}
.kp-panel[hidden]{display:none}
.kp-title{margin:0;font-weight:700;font-size:15px}
.kp-note{margin:2px 0 14px;color:var(--kp-muted);font-size:13px}
.kp-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.kp-sw{appearance:none;position:relative;margin:0;padding:0;border:0;aspect-ratio:1;min-height:0;border-radius:var(--kp-sw-radius);background:var(--sw);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .15s ease}
.kp-sw:hover{transform:scale(1.06)}
.kp-sw:focus-visible{outline:2px solid var(--kp-ink);outline-offset:3px}
.kp-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--kp-bg),0 0 0 4px var(--kp-ink)}
.kp-sw[aria-pressed="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:12px;height:7px;border:solid var(--sw-on);border-width:0 0 2.5px 2.5px;transform:translateY(-2px) rotate(-45deg)}
.kp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kp-name{margin:12px 0 0;min-height:20px;font-weight:600}
.kp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--kp-line)}
.kp-custom{display:inline-flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;font-weight:600}
.kp-wheel{position:relative;flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:conic-gradient(from 0deg,#E5484D,#F2A93B,#F5D90A,#46A758,#12A594,#3E8EF7,#6E56CF,#D6409F,#E5484D)}
.kp-custom[data-active] .kp-wheel{box-shadow:0 0 0 2px var(--kp-bg),0 0 0 4px var(--kp-ink)}
.kp-wheel input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.kp-custom:focus-within .kp-wheel{outline:2px solid var(--kp-ink);outline-offset:3px}
.kp-actions{display:inline-flex;gap:14px}
.kp-reset,.kp-done{appearance:none;margin:0;padding:8px 0;border:0;background:none;color:var(--kp-muted);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kp-reset:disabled{opacity:.45;cursor:default;text-decoration:none}
.kp-done{display:none;color:var(--kp-ink)}
@media (max-width:560px){
  .kp-panel,.kp[data-kit-align] .kp-panel{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-width:none;padding:18px 16px 12px}
  .kp-done{display:inline}
  .kp-trigger{padding:8px}
  .kp-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* a pick fades across the page, not a hard cut */
html.kit-anim body,html.kit-anim body *{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease,outline-color .45s ease,box-shadow .45s ease,text-decoration-color .45s ease!important}
@media (prefers-reduced-motion:reduce){ html.kit-anim body,html.kit-anim body *{transition:none!important} .kp-sw{transition:none} }

.cd{
  --paper:#F4F4F1; --ink:#141414; --on-ink:#EDEDE8; --disp-ink:#E6E6E1;
  --rule:#CFCFCC; --ink-rule:#5E5E59;   /* hairlines: Lc 19 on paper and on ink, above the Lc 15 a divider needs */
  --cg:var(--club-ground,#1F2F4A); --cg-text:var(--club-ground-text,#FFFFFF);
  --cgd:var(--club-ground-display,#1F2F4A); --cgd-text:var(--club-ground-display-text,#FFFFFF);
  --c-mark:var(--club-on-ink-mark,#8498B8); --c-paper:var(--club-on-paper,#1F2F4A); --c-raw:var(--kit,#1F2F4A);
  --metal:var(--cg-text); --stripe:var(--cd-stripe,#2B3C58); --inside:var(--cd-inside,#08162F);
  --fill:var(--cd-fill,#FFFFFF); --on-fill:var(--cd-on-fill,#1F2F4A);
  --plate-text:var(--cd-plate-text,#141414); --plate-mark:var(--cd-plate-mark,#1F2F4A);
  --disp:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif; --text:'Rubik',system-ui,sans-serif;
  --fs-d1:clamp(3rem,1.6rem + 6vw,7rem); --fs-d2:clamp(2.25rem,1.35rem + 3.5vw,3.75rem);
  --fs-lead:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  --fs-body:1.125rem; --fs-label:1rem;
  --gut:clamp(16px,4vw,40px); --bar-h:76px; --word-em:3.1;
  /* the page grid, full bleed: a gutter track each side of twelve columns of at most 68px [the .wrap's 1080] */
  --grid:minmax(calc(var(--gut) - 24px),1fr) repeat(12,minmax(0,68px)) minmax(calc(var(--gut) - 24px),1fr);
  background:var(--paper); color:var(--ink); font:400 var(--fs-body)/1.5 var(--text);
  -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip;}
.cd a{color:inherit}
.cd :focus-visible{outline:2px solid var(--focus,currentColor);outline-offset:2px}
.cd .cd-audio,.cd .cd-pilot{scroll-margin-top:var(--bar-h)}
.cd section a,.cd section button,.cd footer a{scroll-margin-top:calc(var(--bar-h) + 24px)}

/* ── the grounds, and what a button and a focus ring wear on each [40, 42, 7] */
.cd .cd-bar,.cd .cd-hero,.cd .cd-pilot{background:var(--cg);color:var(--cg-text);--focus:var(--cg-text);
  --b-solid:var(--fill);--b-on-solid:var(--on-fill);--b-line:var(--cg-text);--b-line-edge:var(--cg-text)}
.cd .cd-more,.cd .cd-audio-say,.cd .cd-value{color:var(--ink);--focus:var(--ink);--b-line:var(--ink);--b-line-edge:var(--ink)}
.cd .cd-audio-head,.cd .cd-foot{background:var(--ink);color:var(--on-ink);--focus:var(--on-ink);--b-line:var(--on-ink);--b-line-edge:var(--on-ink)}
/* text that would inherit a pick-driven color takes the variable itself: home.js fades a pick on every
   element, and an inherited color would chase its parent's fade and land late */
.cd .cd-bar .cd-brand,.cd .cd-bar .cd-brand span,.cd .cd-bar .cd-logo,.cd .cd-lang,.cd .cd-bar .kp-trigger,
.cd .cd-hero .cd-label,.cd .cd-hero .cd-h1,.cd .cd-hero .cd-h1 span,.cd .cd-hero .cd-link,.cd .kr-label,.cd .kr-reset,
.cd .cd-hero-lead,
.cd .cd-pilot .cd-h1,.cd .cd-pilot .cd-h1 span,.cd .cd-pilot .cd-lead,.cd .cd-pilot .cd-buyer{color:var(--cg-text)}
/* short paragraphs and the quote break evenly, never leaving one word alone on the last line */
.cd p,.cd h3{text-wrap:pretty}

/* ── type roles */
.cd .cd-h1,.cd .cd-h2,.cd .cd-word,.cd .cd-no{text-transform:uppercase;font-family:var(--disp)}
.cd .cd-h1{font-size:var(--fs-d1);font-weight:850;line-height:.95;letter-spacing:.02em}
.cd .cd-h2{font-size:var(--fs-d2);font-weight:900;line-height:1;letter-spacing:.01em}
.cd .cd-h1 span,.cd .cd-h2 span{display:block}
.cd .cd-lead{font-size:var(--fs-lead);line-height:1.4;max-width:32em}
.cd .cd-brand{display:inline-flex;align-items:center;gap:.3em;min-height:44px;font:850 2.25rem/1 var(--disp);letter-spacing:.02em;text-decoration:none}
/* the solid mark before the wordmark: .72em is 26px beside the 36px wordmark, its cap height */
.cd .cd-logo{flex:none;display:block;height:.72em;width:auto;max-width:none;overflow:visible}
.cd .cd-label{display:flex;align-items:center;gap:12px;font:700 var(--fs-label)/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase}
.cd .cd-label::before{content:"";flex:none;width:2em;height:.1875em;background:currentColor}

/* ── buttons: Rubik 600 18px, sentence case, 2px edges, 56px tall [38, 39]; one filled per screen [41] */
.cd .cd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:3.5rem;padding:.25em 1.33em;
  border:2px solid;border-radius:2px;font:600 var(--fs-body)/1.2 var(--text);letter-spacing:0;text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color .15s ease,color .15s ease}
.cd .cd-btn-solid{background:var(--b-solid);color:var(--b-on-solid);border-color:var(--b-solid)}
.cd .cd-btn-solid:hover{background:transparent;color:var(--b-line)}
.cd .cd-btn-line{background:transparent;color:var(--b-line);border-color:var(--b-line-edge)}
.cd .cd-btn-line:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cd .cd-signin svg{width:1.15em;height:1.15em;flex:none;margin-inline-start:-2px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square}
.cd .cd-ctas{display:flex;flex-wrap:wrap;gap:12px}
.cd .cd-link{display:inline-flex;align-items:center;gap:8px;min-height:3rem;font:600 var(--fs-body)/1.2 var(--text);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.cd .cd-link svg{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square}
.cd .cd-link:hover{text-decoration-thickness:3px}

/* ── the club color picker in the bar: a swatch alone, opening the panel */
.cd .kp{--kp-default:#1F2F4A;--kp-bg:#141414;--kp-ink:#EDEDE8;--kp-muted:#D6D6D0;--kp-line:rgba(237,237,232,.2);
  --kp-radius:2px;--kp-sw-radius:2px;--kp-font:'Rubik',system-ui,sans-serif;--kp-shadow:0 24px 48px rgba(0,0,0,.34)}
.cd .cd-bar .kp-trigger{min-height:3rem;min-width:3rem;justify-content:center;padding:0;border:0;border-radius:2px;font:600 var(--fs-label)/1 var(--text)}
.cd .cd-bar .kp-trigger:hover{background:color-mix(in srgb,var(--cg-text) 12%,transparent)}
.cd .cd-bar .kp-dot{width:28px;height:28px;box-shadow:0 0 0 2px var(--cg-text)}
.cd .cd-bar .kp-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ── the hero's club colors (home.js builds the row): the eight kit colors and the exact-color wheel, on show
   and tapped directly. Every swatch wears a 2px inset ring in the trim (the ground's text color), so a swatch in
   the ground's own color still shows on it; the one picked adds a check and a bar under it, never color alone */
.cd .kr-head{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;min-height:2rem}
.cd .kr-label{font:600 var(--fs-label)/1.3 var(--text)}
.cd .kr-reset{appearance:none;min-height:2rem;margin:0;padding:0;border:0;background:none;font:600 var(--fs-label)/1.3 var(--text);
  cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cd .kr-row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin-top:8px}
.cd .kr-sw,.cd .kr-wheel{position:relative;display:block;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:2px;cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--cg-text);transition:transform .15s ease}
.cd .kr-sw{appearance:none;background:var(--sw)}
.cd .kr-wheel{background:conic-gradient(from 0deg,#E5484D,#F2A93B,#F5D90A,#46A758,#12A594,#3E8EF7,#6E56CF,#D6409F,#E5484D)}
.cd .kr-wheel[data-active]{background:radial-gradient(circle,var(--c-raw) 0 34%,var(--cg-text) 36% 44%,transparent 46%),conic-gradient(from 0deg,#E5484D,#F2A93B,#F5D90A,#46A758,#12A594,#3E8EF7,#6E56CF,#D6409F,#E5484D)}
.cd .kr-wheel input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.cd .kr-sw:hover,.cd .kr-wheel:hover{transform:translateY(-2px)}
.cd .kr-sw:focus-visible,.cd .kr-wheel:has(input:focus-visible){outline:2px solid var(--cg-text);outline-offset:3px}
.cd .kr-sw[aria-pressed="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:40%;height:22%;border:solid var(--sw-on);border-width:0 0 3px 3px;transform:translateY(-15%) rotate(-45deg)}
.cd .kr-sw[aria-pressed="true"]::before,.cd .kr-wheel[data-active]::before{content:"";position:absolute;inset-inline:0;bottom:-9px;height:4px;background:var(--cg-text)}
/* nine at 32px or more: 6px gaps where the row is narrow (a 375px phone, a 1024px screen's plate column) */
@media (max-width:1099px){ .cd .kr-row{gap:6px} }
@media (prefers-reduced-motion:reduce){ .cd .kr-sw,.cd .kr-wheel{transition:none} .cd .kr-sw:hover,.cd .kr-wheel:hover{transform:none} }

/* ── the top bar: sticks the whole way down. Coach sign-in is its right-most control at every width [43];
   Request a pilot shows beside it only while no other filled button is on screen (.cd-ask, home.js) [41] */
.cd .cd-bar{position:sticky;top:0;z-index:40;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--cg-text) 24%,transparent)}
.cd .cd-bar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;min-height:var(--bar-h);padding-block:8px}
.cd .cd-bar-id{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px}
.cd .cd-lang{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:48px;padding-inline:4px;font:500 var(--fs-label)/1 var(--text);text-decoration:none}
.cd .cd-lang:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.cd .cd-bar-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-inline-start:auto}
.cd .cd-bar .cd-btn{min-height:3rem;padding:.25em 1.25em;font-size:var(--fs-label)}
.cd .cd-bar-pilot{visibility:hidden;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s}
.cd .cd-bar.cd-ask .cd-bar-pilot{visibility:visible;opacity:1;transition:opacity .2s ease}

/* ── the shirt: flat geometry in the cloth, the stripe and the trim. The badge on the wearer's left chest is a
   woven shield: cut from the trim, a stitched line and the solid mark in the ground color, so it reads as a
   badge on every club color (white on dark kits, ink on light ones) */
.cd .cd-fab{fill:var(--c-raw)}
.cd .cd-str{fill:var(--stripe)}
.cd .cd-inside{fill:var(--inside)}
.cd .cd-met{fill:var(--metal)}
.cd .cd-badge-patch{fill:var(--metal)}
.cd .cd-badge-line{fill:none;stroke:var(--cg);stroke-width:2.5;stroke-dasharray:7 4}
.cd .cd-chest{color:var(--cg)}
.cd .cd-shirt{display:block;width:100%;height:100%;max-width:none}

/* ── the hero: one grid over the full bleed. The text runs down columns 1 to 8; the shirt takes 9 to 12 and
   runs off the right edge, up under the bar and down to the hero's foot */
.cd .cd-hero-in{display:grid;grid-template-columns:var(--grid);column-gap:24px;
  grid-template-rows:64px auto auto auto auto auto minmax(72px,1fr)}
.cd .cd-hero-label{grid-column:2/10;grid-row:2}
.cd .cd-h1-box{grid-column:2/10;grid-row:3;margin-top:24px;container-type:inline-size}
/* the widest line, BETWEEN SESSIONS, is 7.1em: the headline is as large as its column allows, at most 100px */
.cd .cd-hero .cd-h1{font-size:clamp(2.25rem,14cqw,6.25rem)}
.cd .cd-hero-lead{grid-column:2/10;grid-row:4;margin-top:32px;max-width:30em}
.cd .cd-doors{grid-column:2/10;grid-row:5;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:40px}
/* the club colors: under the plate, on the doors' row, their swatches level with the buttons, so they are in
   the first screen with the doors. The row starts at the plate's edge and stops at least 16px short of the
   page's. It sits on the shirt, so it wears a plain panel of the ground (drawn by the shadow, so the swatches
   keep their full width) and its words never stand on the stripes */
.cd .cd-kits{grid-column:10/15;grid-row:5;align-self:end;justify-self:start;position:relative;z-index:1;margin-inline-start:-24px;width:min(calc(100% + 8px),26rem);
  background:var(--cg);box-shadow:0 0 0 14px var(--cg)}
/* the shirt: from the bar to the hero's foot, the plate pinned on it at the lead's line, the club colors below.
   The kit is a subgrid over columns 9 to 12 and the gutter past them, and over every row of the hero. The
   shirt's box is columns 9 to 12, so its chest (the middle of the drawing) stays centered on them at every
   width instead of drifting right with the screen; the cloth and its stripes run on past the box to the page's
   edge (shown, clipped at the left). contain:size keeps the tall drawing out of the rows' sizing */
.cd .cd-kit{grid-column:10/15;grid-row:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
.cd .cd-kit .cd-shirt{grid-column:1/5;grid-row:1/-1;width:100%;height:100%;contain:size;
  overflow:visible;clip-path:inset(0 -100vw 0 0)}
.cd .cd-voice{grid-column:1/-1;grid-row:2/5;align-self:end;justify-self:start;position:relative;margin:0 0 20px;margin-inline-start:-24px;width:min(calc(100% + 8px),28rem);
  display:grid;grid-template-columns:3.5rem minmax(0,1fr);column-gap:16px;padding-block:24px;padding-inline:20px 28px;
  background:var(--metal);color:var(--plate-text)}
.cd .cd-sound{grid-row:1/3;display:flex;align-items:flex-start;justify-content:center;width:3.5rem;height:3.5rem}
.cd .cd-sound svg{width:2.5rem;height:2.5rem;margin-top:.2rem;fill:none;stroke:var(--plate-mark);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.cd .cd-sound .cd-cone{fill:var(--plate-mark)}
/* the quote keeps two lines on the plate from 1024px up: it grows with the column the plate sits in, to 32px,
   and breaks balanced, so no word is left alone on a line */
.cd .cd-cue{font:500 clamp(1.625rem,.5rem + 2.2vw,2rem)/1.3 var(--text);color:var(--plate-text);text-wrap:balance}
.cd .cd-cue q{quotes:"\201C" "\201D"}
.cd .cd-who{margin-top:8px;font:600 var(--fs-label)/1.3 var(--text);color:var(--plate-text)}

/* ── why audio: one band split at the page's center line, which is also the middle of the gap between
   columns 6 and 7. The heading takes columns 1 to 5 on ink and the claim columns 8 to 12 on paper: both keep
   the outer edges of the bands above and below, each stands one column and a gap and a half (104px from
   1160px up) off the seam, and the two center on the band's middle line [8]. The heading is display 2, the
   same size as every section heading [18]; where a sentence is wider than the five columns it wraps,
   balanced, inside them [47] */
.cd .cd-audio{background:linear-gradient(90deg,var(--ink) 50%,var(--paper) 50%)}
.cd .cd-audio-in{display:grid;grid-template-columns:var(--grid);column-gap:24px;align-items:center;padding-block:112px}
.cd .cd-audio-head{grid-column:2/7}
.cd .cd-audio-head .cd-h2{margin-top:28px;color:var(--disp-ink);font-weight:850;letter-spacing:.02em;text-wrap:balance}
/* the club’s color as a mark under the second sentence, never as its letters on ink [14, 28, 33] */
.cd .cd-accent{text-decoration:underline;text-decoration-color:var(--c-mark);text-decoration-thickness:.1em;text-underline-offset:.14em;text-decoration-skip-ink:none}
.cd .cd-audio-say{grid-column:9/14;background:var(--paper)}
.cd .cd-audio-say .cd-lead{text-wrap:pretty}

/* ── the added value: the team sheet. Each line wears a shirt number, a patch of the club's ground */
.cd .cd-value{padding:120px 0 128px}
.cd .cd-value-head .cd-h2{margin-top:24px}
.cd .cd-value-head .cd-lead{margin-top:28px;max-width:26em}
.cd .cd-sheet{list-style:none;margin:72px 0 0;padding:0;border-top:6px solid var(--ink);container-type:inline-size}
.cd .cd-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:28px 0;border-bottom:2px solid var(--ink)}
.cd .cd-row:last-child{border-bottom-width:6px}
.cd .cd-no{grid-column:1/3;display:flex;align-items:center;justify-content:center;aspect-ratio:5/6;
  padding-top:.12em;background:var(--cgd);color:var(--cgd-text);font-size:clamp(3.5rem,2rem + 5vw,8rem);font-weight:850;line-height:1;letter-spacing:0;
  clip-path:polygon(0 0,34% 0,50% 13%,66% 0,100% 0,100% 100%,0 100%)}
/* a value word is as large as display 1 allows, and never wider than its four columns: --word-em is the widest
   word of the page's language (CULTURE 3.03em; Hebrew אכפתיות 3.38em, set under :lang(he)), so a
   reader’s larger text size shrinks it instead of clipping it [47] */
.cd .cd-word{grid-column:3/7;margin:0;font-size:min(var(--fs-d1),calc(((100cqw - 264px) / 12 * 4 + 72px) / var(--word-em)));font-weight:900;line-height:1;letter-spacing:.01em;color:var(--ink)}
.cd .cd-say{grid-column:7/13}
.cd .cd-say h3{margin:0;font:700 var(--fs-lead)/1.3 var(--text)}
.cd .cd-say p{margin-top:8px;max-width:32em}

/* ── the pilot: the club's color. The headline carries the close across seven columns; the ask stands beside
   it on the last five, under a rule, their feet on one line */
.cd .cd-pilot{padding:120px 0 128px}
.cd .cd-pilot-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;container-type:inline-size}
/* AT YOUR CLUB. is 5.0em wide and the Hebrew line 5.5em: the headline is display 1, and never wider than its seven columns */
.cd .cd-pilot .cd-h1{grid-column:1/8;grid-row:1;font-size:min(var(--fs-d1),calc(((100cqw - 264px) / 12 * 7 + 144px) / 5.6))}
.cd .cd-pilot-foot{grid-column:8/13;grid-row:1;padding-top:32px;border-top:3px solid var(--cg-text)}
.cd .cd-pilot-foot .cd-lead{max-width:30em}
.cd .cd-pilot-act{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* ── footer: ink. Coach sign-in once more, as a button, so it is found here too [43] */
.cd .cd-foot{padding:56px 0}
.cd .cd-foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.cd .cd-foot .cd-brand{margin-inline-end:auto;color:var(--disp-ink)}
.cd .cd-foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.cd .cd-foot-links a:not(.cd-btn){display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font:500 var(--fs-label)/1.3 var(--text);text-decoration:none}
.cd .cd-foot-links a:not(.cd-btn):hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cd .cd-foot .cd-btn{min-height:3rem;padding:.25em 1.25em}
.cd .cd-copy{width:100%;padding-top:16px;border-top:1px solid var(--ink-rule);font-size:var(--fs-label)}
.cd .cd-copy a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}


/* ── tablet, 700 to 1199px: between the phone's one column and the desktop's twelve. The content keeps the
   bar's edges (the gutter, or the .wrap's 1080 centered). The hero is two columns, the words and the doors on
   the reading side, never narrower than 20em of the lead [23], and the shirt on the other running off the
   page's edge, its badge on top and the coach's line pinned at its foot, level with the club colors. Upright,
   the headline first crosses both columns as a four-line poster; on its side, where the screen is short, the
   headline stays in the words' column and the shirt runs from the bar to the hero's foot, as on a desktop.
   Why audio stacks: the heading across a full ink band, a sentence a line, then the claim on paper [8]. The
   team sheet keeps number, word and description side by side. Section headings reach 60px from 834px [18] */
@media (min-width:700px) and (max-width:1199px){
  /* --edge is where the .wrap's content starts: measured on main, so it is the same in every band */
  .cd{--fs-d2:clamp(2.25rem,.6rem + 6vw,3.75rem);--edge:max(var(--gut),calc((100cqw - 1080px) / 2))}
  .cd main{container-type:inline-size}
  .cd .cd-hero-in{grid-template-columns:var(--edge) minmax(25rem,1.25fr) 32px minmax(0,1fr) var(--edge);column-gap:0;
    grid-template-rows:48px auto auto auto auto auto 56px}
  .cd .cd-hero-label{grid-column:2/5;grid-row:2}
  .cd .cd-h1-box{grid-column:2/5;grid-row:3;margin-top:24px}
  /* four lines, one span each: BETWEEN SESSIONS, (7.1em) sets the size, at most 96px */
  .cd .cd-hero .cd-h1{font-size:clamp(2.25rem,13.5cqw,6rem)}
  .cd .cd-hero-lead{grid-column:2;grid-row:4;margin-top:36px;max-width:32em;font-size:1.25rem}
  .cd .cd-doors{grid-column:2;grid-row:5;flex-direction:column;align-items:flex-start;gap:12px;margin-top:32px}
  /* the two doors side by side, sharing the column; where they cannot fit, each takes the full column */
  .cd .cd-doors .cd-ctas{align-self:stretch}
  .cd .cd-doors .cd-ctas .cd-btn{flex:1 1 auto}
  .cd .cd-kits{grid-column:2;grid-row:6;align-self:end;justify-self:stretch;margin:28px 0 0;width:auto;max-width:26rem;box-shadow:none}
  .cd .cd-kit{grid-column:4/6;grid-row:4/-1;margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr) var(--edge);
    grid-template-rows:minmax(0,1fr) auto 56px;container-type:inline-size}
  /* the shirt's box is the shirt's column, so the chest and its badge stay centered on it; the cloth runs on past
     the box to the page's edge, clipped on the reading side */
  .cd .cd-kit .cd-shirt{grid-column:1;grid-row:1/-1;width:100%;height:100%;contain:size;overflow:visible;clip-path:inset(0 -100vw 0 0)}
  [dir="rtl"] .cd .cd-kit .cd-shirt{clip-path:inset(0 0 0 -100vw)}
  /* the coach's line keeps clear of the collar and the badge, which end 300 down the drawing's 520 wide */
  .cd .cd-voice{grid-column:1;grid-row:2;align-self:end;justify-self:stretch;width:auto;margin:calc(58cqw + 16px) 0 0;
    grid-template-columns:minmax(0,1fr);padding:20px 20px 24px}
  .cd .cd-sound{grid-row:auto;justify-content:flex-start;width:auto;height:auto;margin-bottom:8px}
  .cd .cd-sound svg{width:2.25rem;height:2.25rem;margin-top:0}
  .cd .cd-cue{font-size:1.625rem}
  /* why audio */
  .cd .cd-audio{background:var(--paper)}
  .cd .cd-audio-in{display:block;padding:0}
  .cd .cd-audio-head{padding:88px var(--edge) 152px}
  /* the claim stands on a step of paper cut up into the ink from the far side, to the page's edge */
  .cd .cd-audio-say{display:flow-root;padding:0 var(--edge)}
  .cd .cd-audio-say .cd-lead{position:relative;margin-top:-96px;margin-inline:auto calc(-1 * var(--edge));
    padding-block-start:44px;padding-inline:48px var(--edge);max-width:min(calc(32em + var(--edge)),82%);background:var(--paper)}
  /* the team sheet: number, word and description on one line. The word takes three eighths of what the
     number leaves, and is as large as display 1 allows there (--word-em, as on the desktop) */
  .cd .cd-value{padding:104px 0 112px}
  .cd .cd-sheet{margin-top:56px}
  .cd .cd-row{--no-w:clamp(5rem,11cqw,7.5rem);grid-template-columns:var(--no-w) minmax(0,.75fr) minmax(0,1.25fr);column-gap:28px}
  .cd .cd-no{grid-column:1;font-size:calc(var(--no-w) * .7)}
  .cd .cd-word{grid-column:2;font-size:min(var(--fs-d1),calc((100cqw - var(--no-w) - 56px) * .375 / var(--word-em)))}
  .cd .cd-say{grid-column:3}
}
/* upright tablets show the shirt beside the words only; on its side the shirt rises to the bar */
@media (min-width:700px) and (max-width:1199px) and (orientation:landscape){
  .cd .cd-hero-label,.cd .cd-h1-box{grid-column:2}
  .cd .cd-hero .cd-h1{font-size:clamp(2.25rem,14cqw,6.25rem)}
  .cd .cd-kit{grid-row:1/-1;margin-top:0}
}
/* tablet, upright or under 1100px: the close stacks, the headline over the ask, the doors side by side (the
   ask's five columns are too narrow for both doors there) */
@media (min-width:700px) and (max-width:1099px),(min-width:700px) and (max-width:1199px) and (orientation:portrait){
  .cd .cd-pilot{padding:104px 0 112px}
  .cd .cd-pilot-in{grid-template-columns:minmax(0,1fr)}
  .cd .cd-pilot .cd-h1{grid-column:1;grid-row:1;font-size:var(--fs-d1)}
  .cd .cd-pilot-foot{grid-column:1;grid-row:2;margin-top:48px}
}

/* ── phone: one column. The hero reads headline, lead, doors and club colors (all in the first screen),
   then the shirt, a supporting picture no taller than about a third of a phone screen */
@media (max-width:699px){
  .cd .cd-hero-in{display:flex;flex-direction:column;padding:48px var(--gut) 56px}
  .cd .cd-h1-box{margin-top:20px}
  .cd .cd-hero .cd-h1 span{display:inline}
  /* three lines at 375px: MORE PRACTICE BETWEEN is 9em wide [20]; never under 36px on color [19] */
  .cd .cd-hero .cd-h1{font-size:clamp(2.25rem,11.1cqw,4.5rem)}
  .cd .cd-hero-lead{margin-top:20px;max-width:32em}
  .cd .cd-doors{margin-top:28px;flex-direction:column;align-items:stretch;gap:8px}
  .cd .cd-doors .cd-ctas{flex-direction:column;align-items:stretch;max-width:420px}
  .cd .cd-doors .cd-link{align-self:flex-start}
  /* the club colors come straight after the doors, still in the first screen, before the shirt */
  .cd .cd-kits{align-self:stretch;margin:20px 0 0;width:auto;max-width:26rem;box-shadow:none}
  /* the shirt: centered, at most 26rem wide and 520:370, the cloth running on to both edges of the screen */
  .cd .cd-kit{display:flex;flex-direction:column;align-items:center;margin:36px calc(-1 * var(--gut)) 0;overflow:clip}
  .cd .cd-kit .cd-shirt{flex:none;contain:none;width:min(100%,26rem);height:auto;aspect-ratio:520/370;overflow:visible;clip-path:inset(0 -100vw)}
  .cd .cd-voice{align-self:stretch;margin:-2.5rem var(--gut) 0;width:auto;max-width:26rem}
  /* why audio stacks: the heading on a full-width ink band, the claim below it on paper, both at the gutter */
  .cd .cd-audio{background:var(--paper)}
  .cd .cd-audio-in{display:block;padding:0}
  .cd .cd-audio-head{padding:72px var(--gut) 64px}
  .cd .cd-audio-say{padding:56px var(--gut) 8px}
  .cd .cd-value{padding:88px 0 96px}
  .cd .cd-row{grid-template-columns:min(5.5rem,26cqw) minmax(0,1fr);column-gap:20px;row-gap:16px}
  .cd .cd-no{grid-column:1;font-size:min(4rem,18cqw)}
  .cd .cd-word{grid-column:2;font-size:min(var(--fs-d1),calc((100cqw - min(5.5rem,26cqw) - 20px) / var(--word-em)))}
  .cd .cd-say{grid-column:1/-1}
  .cd .cd-pilot-in{grid-template-columns:minmax(0,1fr)}
  .cd .cd-pilot .cd-h1{grid-column:1;grid-row:1;font-size:var(--fs-d1)}
  .cd .cd-pilot-foot{grid-column:1;grid-row:2;margin-top:48px}
  .cd .cd-pilot-act{flex-direction:column;align-items:stretch;gap:12px}
  .cd .cd-pilot-act .cd-ctas{flex-direction:column;align-items:stretch;max-width:420px}
}
/* ── phone: body stays 18px [16]; the bar is one row, the brand and the sign-in, and past the hero the
   two doors [43] */
@media (max-width:599px){
  .cd{--fs-label:.9375rem;--bar-h:64px}
  .cd .cd-bar-in{gap:8px;min-height:var(--bar-h)}
  .cd .cd-bar-id{gap:4px 12px;min-width:0}
  .cd .cd-bar-kp{display:none}
  .cd .cd-bar-act{gap:6px}
  .cd .cd-bar .cd-btn{padding:.25em .5em;font-size:.9375rem}
  .cd .cd-bar-pilot{display:none}
  /* two doors beside the brand: the language link moves to the footer, the icon goes, the buttons tighten */
  .cd .cd-bar .cd-lang{display:none}
  .cd .cd-bar .cd-signin svg{display:none}
  .cd .cd-bar.cd-ask .cd-bar-id{display:none}
  .cd .cd-bar.cd-ask .cd-bar-act{flex:1;display:grid;grid-template-columns:1.2fr 1fr 1.2fr;margin-inline-start:0}
  .cd .cd-bar.cd-ask .cd-bar-pilot{display:inline-flex}
  .cd .cd-hero-in{padding-top:36px}
  .cd .cd-cue{font-size:1.625rem}
  /* a narrower speaker column, so TEN MORE SECONDS. holds one line on a 375px phone */
  .cd .cd-voice{grid-template-columns:2.75rem minmax(0,1fr);padding-block:20px;padding-inline:12px 20px;column-gap:12px}
  .cd .cd-sound{width:2.75rem}
  .cd .cd-sound svg{width:2.25rem;height:2.25rem}
  .cd .cd-pilot{padding:72px 0 88px}
  .cd .cd-foot-in{gap:8px 24px}
  .cd .cd-foot .cd-brand{width:100%;margin-bottom:8px}
}
/* the narrowest phones: the bar keeps one row (mark, wordmark, Hebrew, Coach sign-in), so the wordmark steps
   down to 30px and the mark holds at 24px, the floor of its small size */
@media (max-width:419px){
  .cd .cd-bar .cd-signin svg{display:none}
  .cd .cd-bar-id{gap:4px 8px}
  .cd .cd-bar .cd-brand{font-size:1.875rem}
  .cd .cd-bar .cd-logo{height:1.5rem}
}

/* ── Hebrew (he/index.html, dir="rtl"). Sofia Sans Extra Condensed has no Hebrew, so Hebrew display text
   falls through to Noto Sans Hebrew at its narrowest width (62.5), 800 to 900; the Latin wordmark and the
   shirt numbers stay in Sofia. Hebrew has no capitals, so tracking goes to zero */
:lang(he) .cd,.cd:lang(he){--disp:'Sofia Sans Extra Condensed','Noto Sans Hebrew','Arial Narrow',sans-serif}
.cd:lang(he) .cd-h1,.cd:lang(he) .cd-h2,.cd:lang(he) .cd-word{font-stretch:62.5%;letter-spacing:0;line-height:1.05}
.cd:lang(he) .cd-label{letter-spacing:0}
.cd:lang(he){--word-em:3.45}
.cd:lang(he) .cd-cue q{quotes:"\05F4" "\05F4"}
/* the enter arrow of Coach sign-in points into the page's reading direction */
[dir="rtl"] .cd .cd-signin svg{transform:scaleX(-1)}
@media (min-width:1200px){
  /* the ink half of Why audio sits under the heading, which is on the right in Hebrew */
  [dir="rtl"] .cd .cd-audio{background:linear-gradient(270deg,var(--ink) 50%,var(--paper) 50%)}
  /* the cloth runs on past the shirt's box to the page edge, which is the left in Hebrew */
  [dir="rtl"] .cd .cd-kit .cd-shirt{clip-path:inset(0 0 0 -100vw)}
}

@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }
/* 375px phones: the wordmark steps down once more so the brand and both doors keep one row */
@media (max-width:389px){
  .cd .cd-bar .cd-brand{font-size:1.625rem}
}