/* ICM Tennis, the one stylesheet (W8). Design brief sections 2, 3, 7 to 13; spec 8.6.
   Order: tokens, fonts, base, the Hall light, type, layout vocabulary, buttons and pills,
   header, rail, line bar, thumb bar, sheets, footer, finder, hero, page skeletons, forms,
   motion, reduced motion, print. Colours come from the tokens only. */

/* ---------- 1. Tokens: direction D, "Academic" (client, 2026-10-06): about 70% white, 20% ICM red, 10% yellow #FBBE00 ---------- */
/* Written into assets/css/src/010-tokens.css by _dev/apply-direction.php --direction=c. Big colour fields of ICM red
   and a deep court green carrying white type, with warm cream and sand between them; no grey anywhere. Gold is for
   achievements only (rank 1 to 3 medals, the certificate frame, the Achievements menu, the certificate page), never
   text on light and never a CTA. Headings are upright Barlow Condensed 800: capitals for six words or fewer,
   sentence case above that. No monospace (CD1, Q-D2). Every pair in use: contrast.json. */
:root{
  /* surfaces */
  --chalk:#ffffff;             /* canvas: cream */
  --chalk-2:#f7f7f5;           /* alternating band: sand */
  --line:#ffffff;              /* cards and panels; all type on red and green */
  --ink:#111111;               /* text on light: espresso */
  --ink-2:#222222;             /* raised dark (the dark fields are night court) */
  --court:#c8161d;             /* court green fields, the old ink buttons, the rail (white on it 8.07:1) */
  --court-deep:#9f1117;        /* night court: footer, boards, thumb bar, header frost (white 12.51:1) */
  --court-2:var(--court-deep); /* raised green inside a green field */
  /* text */
  --text-2:#555555;            /* warm secondary text on cream, sand and white (used far less) */
  --text-2-inv:#fde3e3;        /* mint: secondary text on both greens */
  /* brand and action */
  --red:#ed1f24;               /* ICM logo red: every CTA fill, bars, the rank 1 leader bar */
  --red-press:#b3141a;         /* CTA hover; red small text on light (eyebrows, city labels) */
  --red-ink:#b3141a;           /* red as text on light */
  --red-field:#d71920;         /* red fields that carry text (white 5.10:1), selected tabs, caption chips */
  /* achievements only (JUDGE graft 2, from B) */
  --gold:#fbbe00;              /* fills, rules, medals, rings; never text on light */
  --gold-ink:#7a5600;          /* gold as text on light */
  --gold-hi:#fbbe00;           /* gold as text on dark */
  --gold-soft:#fff3cc;         /* quiet wash */
  /* function */
  --border-ui:#8a8a8a;         /* warm interactive edges, 3:1 or better on cream, sand and white */
  --hairline:#e6e6e6;          /* decorative rules only */
  --rule-dark:rgba(255,255,255,.22); /* decorative rules on dark */
  /* achievement finishes */
  --medal:radial-gradient(circle at 32% 28%,#fff1b3 0%,#ffd84d 36%,#fbbe00 70%,#d9a300 100%);
  --gold-rule:linear-gradient(90deg,#fbbe00 0%,#fbbe00 100%);
  --shadow-lift:0 2px 4px rgba(0,0,0,.08),0 24px 48px -20px rgba(0,0,0,.34);
  /* motion and legibility */
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-inout:cubic-bezier(.65,0,.35,1);--ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --tshadow:0 1px 2px rgba(0,0,0,.9),0 3px 12px rgba(0,0,0,.7),0 10px 44px rgba(0,0,0,.7);

  /* type: Barlow Condensed (display, labels, numbers) and Nunito (body, data); no monospace */
  --ff-display:"Barlow Condensed","Barlow Condensed Fallback","Barlow Condensed Fallback Arial",Arial,sans-serif;
  --ff-body:"Nunito","Nunito Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:var(--ff-body);    /* data (facts, dates, times, crumbs, pills) reads in Nunito */
  --ff-label:var(--ff-display);/* labels: Barlow Condensed 600 capitals, a size larger than the old mono */
  --ff-num:var(--ff-display);  /* numbers: Barlow Condensed with tabular figures (1111 and 8888 measure the same) */
  --mono-stretch:normal;--label-stretch:normal;--num-stretch:normal;
  --hd-style:normal;--hd-weight:800;--hd-stretch:normal;--hd-track:.005em; /* upright (JUDGE graft 1) */
  --hd-case:uppercase;         /* six words or fewer: capitals */
  --hd-case-long:none;         /* over six words: sentence case */

  /* layout and surface roles (not new colours) */
  --wrap:1200px;--gl:clamp(20px,5vw,48px);--gr:clamp(20px,5vw,48px);
  --notice-h:0px;--mast-h:72px;--bar-h:0px;--head-h:calc(var(--notice-h) + var(--mast-h) + var(--bar-h));
  --thumb-h:0px;--r:10px;--r-lg:18px;
  --fg:var(--ink);--muted:var(--text-2);--focus:var(--red);--link-line:var(--red);--edge:var(--border-ui);
  --pill-bg:var(--chalk-2);--pill-fg:var(--ink);--pill-edge:var(--border-ui);
  --hatch:rgba(200,22,29,.18);--hatch:color-mix(in srgb,var(--court) 20%,transparent);
  --shadow:0 1px 0 rgba(0,0,0,.05),0 18px 36px -18px rgba(0,0,0,.28);
  /* channel triplets: each matches its token */
  --ink-rgb:17,17,17;--ink-2-rgb:34,34,34;--line-rgb:255,255,255;--court-rgb:200,22,29;--court-deep-rgb:159,17,23;--text-2-inv-rgb:253,227,227;--yellow-rgb:251,190,0;
  --red-rgb:237,31,36;--red-field-rgb:215,25,32;
  --scrim:17,17,17;             /* hero chips and frosts: near black */
  --hall-glow-rgb:255,253,249;--mark-rgb:239,224,189;
  --hall-top:#ffffff;--hall-bottom:#ffffff;--yellow:#fbbe00;--yellow-press:#e0a800;--orange:#a34700;--orange-bg:#fff1e5;--red-bg:#fdeaea;--win:#1e7b3c;--win-bg:#e9f6ee;--low:#6b21a8;--low-bg:#f4ebfd;--film-bg:#141317;--white:#fff;--black:#000;
}
:root:has(.site-header .notice){--notice-h:40px}
@media (max-width:1099px),(max-height:560px){:root{--bar-h:28px}}
@media (max-width:1099px) and (pointer:coarse),(max-height:560px) and (pointer:coarse){:root{--bar-h:44px}}
@media (max-width:900px){:root{--mast-h:60px}}
@media (max-width:900px),(pointer:coarse){:root{--thumb-h:calc(64px + env(safe-area-inset-bottom))}}
@media (min-width:1100px) and (min-height:561px){:root{--gl:76px}}

/* ---------- 2. Fonts: direction C (self-hosted latin woff2, SIL OFL 1.1, licences in assets/fonts/licences/) ---------- */
/* Barlow Condensed 600, 800 and 800 italic (the italic is for the CTA label and the hero caption lines only) and
   Nunito variable 400 to 800. The fallback faces are size-adjusted local fonts, measured against the web fonts in
   Chrome (_dev/cdp/v2-design.ps1 -Mode fallback, then -Mode split), so a heading keeps its box when the web font
   swaps in. Arial Narrow first; Arial, tuned separately, where Arial Narrow is not installed. Each Barlow fallback
   is two faces of one family: the general face is tuned on lowercase, spaces and digits, and a face declared after
   it takes the capitals only (unicode-range A to Z and the accented capitals), tuned on capitals. Against Barlow,
   Arial's capitals run 8 to 13% wider than its lowercase, and C sets short headings, the menu, buttons and labels
   in capitals but long titles in sentence case: one size-adjust cannot fit both. The ascent and descent overrides
   are rescaled with each size-adjust, so every face keeps the same line box. font-synthesis:style stops faux
   bold (every weight in use maps to a real file) and keeps a slanted <em> in Nunito, which ships no italic file. */
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-800.v2.woff2") format("woff2");font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-800-italic.v2.woff2") format("woff2");font-style:italic;font-weight:800;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-600.v2.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-var.v2.woff2") format("woff2");font-style:normal;font-weight:400 800;font-display:swap}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");font-style:normal;font-weight:700 900;size-adjust:94.2%;ascent-override:106.1%;descent-override:21.2%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");font-style:normal;font-weight:700 900;unicode-range:U+0041-005A,U+00C0-00D6,U+00D8-00DE;size-adjust:84.4%;ascent-override:118.4%;descent-override:23.6%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Narrow"),local("ArialNarrow");font-style:normal;font-weight:100 699;size-adjust:96.2%;ascent-override:104%;descent-override:20.8%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Narrow"),local("ArialNarrow");font-style:normal;font-weight:100 699;unicode-range:U+0041-005A,U+00C0-00D6,U+00D8-00DE;size-adjust:81.9%;ascent-override:122.1%;descent-override:24.4%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Narrow Bold Italic"),local("ArialNarrow-BoldItalic");font-style:italic;font-weight:100 900;size-adjust:91.3%;ascent-override:109.5%;descent-override:21.9%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Narrow Bold Italic"),local("ArialNarrow-BoldItalic");font-style:italic;font-weight:100 900;unicode-range:U+0041-005A,U+00C0-00D6,U+00D8-00DE;size-adjust:82%;ascent-override:122%;descent-override:24.4%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback Arial";src:local("Arial Bold"),local("Arial-BoldMT");font-style:normal;font-weight:700 900;size-adjust:77.3%;ascent-override:129.4%;descent-override:25.8%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback Arial";src:local("Arial Bold"),local("Arial-BoldMT");font-style:normal;font-weight:700 900;unicode-range:U+0041-005A,U+00C0-00D6,U+00D8-00DE;size-adjust:69.3%;ascent-override:144.3%;descent-override:28.8%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback Arial";src:local("Arial Bold"),local("Arial-BoldMT");font-style:normal;font-weight:100 699;size-adjust:73.5%;ascent-override:136.1%;descent-override:27.2%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback Arial";src:local("Arial Bold"),local("Arial-BoldMT");font-style:normal;font-weight:100 699;unicode-range:U+0041-005A,U+00C0-00D6,U+00D8-00DE;size-adjust:66.4%;ascent-override:150.7%;descent-override:30.1%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback Arial";src:local("Arial Bold Italic"),local("Arial-BoldItalicMT");font-style:italic;font-weight:100 900;size-adjust:74.9%;ascent-override:133.5%;descent-override:26.7%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback Arial";src:local("Arial Bold Italic"),local("Arial-BoldItalicMT");font-style:italic;font-weight:100 900;unicode-range:U+0041-005A,U+00C0-00D6,U+00D8-00DE;size-adjust:67.1%;ascent-override:149%;descent-override:29.8%;line-gap-override:0%}
@font-face{font-family:"Nunito Fallback";src:local("Arial"),local("ArialMT");font-style:normal;font-weight:100 599;size-adjust:101%;ascent-override:100%;descent-override:34.7%;line-gap-override:0%}
@font-face{font-family:"Nunito Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-style:normal;font-weight:600 900;size-adjust:98%;ascent-override:103.1%;descent-override:35.7%;line-gap-override:0%}
html{font-synthesis:style}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--chalk);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0;min-height:100dvh;background:transparent;color:var(--fg);font:400 17px/1.6 var(--ff-body);overflow-x:hidden;overflow-x:clip;padding-top:var(--head-h);padding-bottom:var(--thumb-h);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.t-home:has(#hero){padding-top:0}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
main{display:block}
main:focus,[tabindex="-1"]:focus:not(:focus-visible){outline:none}
img{max-width:100%;height:auto}
picture{display:block}
svg:not(:root){overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
::selection{background:var(--court);color:var(--line)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:12px;top:12px;z-index:100;padding:14px 18px;border-radius:var(--r);background:var(--ink);color:var(--line);font:700 16px/1 var(--ff-display);text-decoration:none;transform:translateY(-200%);transition:transform .2s var(--ease-out);--focus:var(--line)}
.skip-link:focus{transform:none}
.preview-bar{position:fixed;left:50%;bottom:calc(var(--thumb-h) + 12px);z-index:95;transform:translateX(-50%);padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--line);font:600 12px/1.2 var(--ff-label);letter-spacing:.08em;text-transform:uppercase}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;flex:none;display:inline-block;vertical-align:middle}
.ico--chev{width:14px;height:14px;transition:transform .25s var(--ease-out)}

/* ---------- 4. The Hall light: one fixed environment layer behind every page (brief 13) ---------- */
.hall{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,var(--hall-top) 0%,var(--hall-bottom) 100%)}
.hall::after{content:"";position:absolute;inset:0;opacity:.03;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/256px 256px}
.hall i{position:absolute;left:50%;display:block;border-radius:50%;will-change:transform}
.hall i:nth-child(1){top:-38vh;width:1600px;height:960px;margin-left:-800px;background:radial-gradient(closest-side,rgba(var(--hall-glow-rgb),.55),rgba(var(--hall-glow-rgb),0));animation:hall-a 96s var(--ease-inout) -41s infinite alternate}
.hall i:nth-child(2){bottom:-44vh;width:1500px;height:760px;margin-left:-750px;background:radial-gradient(closest-side,rgba(var(--court-rgb),.03),rgba(var(--court-rgb),0));animation:hall-b 120s var(--ease-inout) -57s infinite alternate}
@keyframes hall-a{from{transform:translateX(-24vw)}to{transform:translateX(24vw)}}
@keyframes hall-b{from{transform:translateX(20vw)}to{transform:translateX(-20vw)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- 5. Type (brief 3) ---------- */
h1,h2,h3,h4{margin:0 0 .5em;color:inherit;font-family:var(--ff-display)}
/* round 2 (WP-E): the heading voice is tokens (010-tokens.css); site.js marks each h1 and h2 .hd-short (six words or
   fewer) or .hd-long, and a direction may set the short ones in capitals (--hd-case) */
h1,h2,.h1,.h2{font-style:var(--hd-style);font-weight:var(--hd-weight);font-stretch:var(--hd-stretch);letter-spacing:var(--hd-track);text-transform:var(--hd-case-long);text-wrap:balance}
:where(h1,h2,.h1,.h2).hd-short{text-transform:var(--hd-case)}
h1,.h1{font-size:clamp(40px,5.2vw,76px);line-height:1.02}
h2,.h2{font-size:clamp(30px,3.6vw,52px);line-height:1.06}
h3,.h3{font-style:normal;font-weight:700;font-stretch:100%;font-size:clamp(20px,1.7vw,24px);line-height:1.25}
h4{font-weight:700;font-size:18px;line-height:1.3}
p{margin:0 0 1em;max-width:64ch}
ul,ol{margin:0 0 1em;padding-left:1.2em}
li{margin:0 0 .35em}
strong,b{font-weight:600}
small,.small{font-size:14px;line-height:1.5}
.mono{font-family:var(--ff-mono);font-stretch:var(--mono-stretch)}
.lede{font-size:clamp(18px,1.45vw,20px);line-height:1.55;color:var(--muted);max-width:60ch}
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;max-width:none;color:var(--muted);font:600 12px/1.3 var(--ff-label);font-stretch:var(--label-stretch);letter-spacing:.08em;text-transform:uppercase}
.kicker::before{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) 50% 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 50% 0/2px 100% no-repeat}
a{color:inherit;text-decoration-line:underline;text-decoration-color:var(--link-line);text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .2s var(--ease-out)}
a:hover{text-decoration-thickness:2px;text-decoration-color:currentColor}
hr{border:0;border-top:1px solid var(--hairline);margin:2em 0}
mark{background:rgba(var(--mark-rgb),.45);color:inherit;padding:0 .1em;border-radius:2px}

/* ---------- 6. Layout vocabulary (CONTRACTS 14) ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gl) + var(--gr));margin-inline:auto;padding-inline:var(--gl) var(--gr)}
.wrap--narrow{--wrap:820px}
.band{position:relative;padding-block:clamp(64px,9vw,128px)}
.band--tight{padding-block:clamp(40px,6vw,72px)}
.band--chalk2{background:var(--chalk-2);--pill-bg:var(--line)}
.band--ink,.band--court,.band--court-deep,.on-dark{--fg:var(--line);--focus:var(--line);--link-line:rgba(var(--line-rgb),.5);--edge:rgba(var(--line-rgb),.5);--pill-bg:var(--ink-2);--pill-fg:var(--line);--pill-edge:rgba(var(--line-rgb),.42);--hatch:rgba(var(--line-rgb),.12);color:var(--fg)}
.band--ink,.on-ink{--muted:var(--text-2-inv);background:var(--ink);background:color-mix(in srgb,var(--ink) 94%,transparent)}
/* court green (post-build): white on court is 4.56:1 only when the band is opaque (4.1:1 at 94% over chalk);
   --text-2-inv on deep court is 4.17:1, so muted text on both court bands is --line */
.band--court{--muted:var(--line);background:var(--court)}
.band--court-deep{--muted:var(--line);background:var(--court-deep);background:color-mix(in srgb,var(--court-deep) 94%,transparent)}
.on-dark{--muted:var(--text-2-inv)}
.section-head{margin-bottom:clamp(28px,4vw,48px)}
.section-head--center,.center{text-align:center}
.section-head--center .kicker,.center .kicker{justify-content:center}
.section-head--center p,.center p{margin-inline:auto}
.grid{display:grid;gap:clamp(16px,2.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.stack>*+*{margin-top:var(--stack,1rem)}
.two-col{display:grid;gap:clamp(28px,5vw,64px)}
@media (min-width:900px){.two-col{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.two-col--even{grid-template-columns:1fr 1fr}}
.card{position:relative;padding:clamp(20px,2.4vw,28px);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--line);color:var(--ink);--fg:var(--ink);--muted:var(--text-2);--focus:var(--red);--link-line:var(--border-ui);box-shadow:var(--shadow)}
.card>:last-child{margin-bottom:0}
.band--ink .card,.band--court .card,.band--court-deep .card{--pill-bg:var(--chalk-2);--pill-fg:var(--ink);--pill-edge:var(--border-ui);--hatch:rgba(var(--court-deep-rgb),.18)}
.link-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:0 0 1em;padding:0;list-style:none}
.link-row>li{margin:0}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.5em;border:1px solid var(--hairline);border-radius:var(--r);background:var(--line)}
.table-wrap table{width:100%;border-collapse:collapse;min-width:520px;font-size:15px}
.table-wrap th,.table-wrap td{padding:10px 14px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top}
.table-wrap tbody th{font-weight:600}
.table-wrap thead th{font:600 12px/1.3 var(--ff-label);font-stretch:var(--label-stretch);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 1em;padding:0;list-style:none;font:400 13px/1.5 var(--ff-mono);font-stretch:var(--mono-stretch);color:var(--muted)}
.facts>li{margin:0}
.stamp{margin:.6em 0 0;font:600 11px/1.3 var(--ff-label);font-stretch:var(--label-stretch);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--dot,currentColor);box-shadow:0 0 0 1.5px var(--ink);vertical-align:middle}
.on-dark .dot,.band--ink .dot,.band--court .dot,.band--court-deep .dot,.chip-scrim .dot{box-shadow:none}
.chip-scrim{display:inline-flex;align-items:center;gap:.55em;padding:.4em .75em;border:1px solid rgba(var(--line-rgb),.16);border-radius:var(--r);background:rgba(var(--scrim),.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--line);text-shadow:0 1px 3px rgba(var(--scrim),.85);font:600 12px/1.3 var(--ff-label);font-stretch:var(--label-stretch);letter-spacing:.08em;text-transform:uppercase}

/* ---------- 7. Buttons (brief 2.3: red is the CTA and the finder confirm only) ---------- */
.btn{--btn-bg:var(--ink);--btn-fg:var(--line);display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.6em 1.25em;border:0;border-radius:var(--r);background:var(--btn-bg);color:var(--btn-fg);font:700 16px/1.2 var(--ff-display);text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .15s var(--ease-out)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--ink{--btn-bg:var(--ink);--btn-fg:var(--line)}
.btn--ink:hover{--btn-bg:var(--ink-2)}
.btn--line{--btn-bg:var(--line);--btn-fg:var(--ink);box-shadow:inset 0 0 0 1px var(--border-ui)}
.btn--line:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.band--ink .btn--ink,.band--court .btn--ink,.band--court-deep .btn--ink,.on-dark .btn--ink{--btn-bg:var(--line);--btn-fg:var(--ink)}
.band--ink .btn--line,.band--court-deep .btn--line,.on-dark .btn--line{--btn-bg:transparent;--btn-fg:var(--line);box-shadow:inset 0 0 0 1px rgba(var(--line-rgb),.6)}
.btn--cta,.btn--confirm{--btn-bg:var(--red);--btn-fg:var(--line);min-height:52px;padding:.55em 1.35em;font:italic 800 19px/1.1 var(--ff-display);font-stretch:112.5%;letter-spacing:.005em;white-space:nowrap}
.btn--cta{text-transform:uppercase}
.btn--cta:hover,.btn--cta:active,.btn--confirm:hover,.btn--confirm:active{--btn-bg:var(--red-press)}
.btn--edge,.band--court .btn--cta,.band--court-deep .btn--cta{box-shadow:0 0 0 2px var(--line)}
.btn--sm{min-height:40px;padding:.45em .95em;font-size:14px}
.btn--block{display:flex;width:100%}
.linkbtn{display:inline;padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:.2em;cursor:pointer}
.linkbtn:hover{text-decoration-thickness:2px;text-decoration-color:currentColor}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:background-color .2s}
.icon-btn:hover{background:rgba(var(--ink-rgb),.07)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:clamp(28px,4vw,44px) 0 0}
@media (pointer:coarse){
  .btn,.linkbtn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .link-row a,.site-footer__list a,.crumbs a{display:inline-flex;align-items:center;min-height:44px}
  /* stand-alone links read as buttons under a finger (brief 12.10): 44px tall, alignment kept */
  .age-card__find,.news-card__more,.site-footer__social a,.board-row__action,.fresult__small a,.cal-item__actions a,.cal-subscribe a,
  .rk-archive-link a,.embed__newtab,.course-card__formnote a,.card-waitlist summary,.slot-cal a,
  a.link-row,.link-more,.board-row__title,.status-board__col>h2 a,.venue-row__directions a,.venue__links a,.venue-map>summary,
  .contact-card__lines a,.site-footer__lower a,.tile__action,.program-tile__status a{display:inline-flex;align-items:center;min-height:44px}
  .cal-item__actions{display:flex;flex-wrap:wrap;gap:0 18px}
  .finder__aside a,.rk-panel__title a,.special h3 a,.news-card__title a,.rk-series__dir{display:inline-flex;align-items:center;min-height:44px}
  /* a tile's title link is a full-width 44px row (its ::after still stretches over the whole card) */
  .tile__title a,.program-tile h3 a,.program-tile__title a{display:flex;align-items:center;min-height:44px}
  /* short words keep a 44px-wide target (post-build fix: "Home" was 33px wide, "Jobs" and "News" 32 to 38px,
     "Terms" 39px) */
  .crumbs a{min-width:44px;justify-content:center}
  .site-footer__list a,.site-footer__lower a{min-width:44px}
  /* a link inside a chip ("Sign up by text") fills the chip's 44px height without making the chip taller */
  .chip a{display:inline-flex;align-items:center;min-height:44px;margin-block:-14px}
}

/* ---------- 8. Status by shape (brief 2.5) ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:3px 10px 3px 9px;border:1px solid var(--pill-edge);border-radius:999px;background-color:var(--pill-bg);color:var(--pill-fg);font:600 12px/1.2 var(--ff-mono);font-stretch:var(--mono-stretch);letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.pill__glyph{flex:none;display:inline-block;width:8px;height:8px}
.pill--open .pill__glyph{border-radius:50%;background:currentColor}
.pill--full{background-image:repeating-linear-gradient(115deg,var(--hatch) 0 2px,transparent 2px 6px)}
.pill--full .pill__glyph{border:1.5px solid currentColor;border-radius:50%}
.pill--closed{color:var(--muted)}
.pill--closed .pill__glyph{height:2px;border-radius:1px;background:currentColor}
.pill--opens .pill__glyph,.pill--approval .pill__glyph{width:10px;height:10px;background:currentColor;-webkit-mask:var(--glyph) center/contain no-repeat;mask:var(--glyph) center/contain no-repeat}
.pill--opens{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4.1' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M5 2.6V5l1.7 1.1' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")}
.pill--approval{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='3.2' cy='3.2' r='2.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M4.9 4.9 9 9M7 7l1.4-1.4M8 8l1-1' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ---------- 9. Announcement bar (brief 9.1) ---------- */
.notice{background:var(--ink);color:var(--line);--focus:var(--line);--link-line:rgba(var(--line-rgb),.6)}
.notice--red{background:var(--red-press)}
.notice__in{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:4px 8px 4px var(--gl)}
.notice__text{flex:1;margin:0;max-width:none;text-align:center;font:500 14px/1.4 var(--ff-body)}
@media (max-width:600px){.notice__text{font-size:13px;line-height:1.35}}
.notice__link{font-weight:600;white-space:nowrap}
.notice__close{width:36px;height:36px}
.notice__close .ico{width:16px;height:16px}
@media (pointer:coarse){.notice__close{width:44px;height:44px}}

/* ---------- 10. Header (brief 9.2, 9.3, 9.5) ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--ink);background:var(--chalk);background:color-mix(in srgb,var(--chalk) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .35s var(--ease-out),background-color .3s var(--ease-out),color .3s var(--ease-out)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.site-header{background:var(--chalk)}}
/* round 2 (JUDGE graft 6): once the page scrolls the header is opaque, so headings no longer ghost through the frost
   (020-header.js sets is-scrolled; the homepage header turns opaque once it is past the film). The :where() keeps each
   selector at the weight of .site-header, so a direction's own header background (235-direction.css) still wins. */
:where(.site-header).is-scrolled:where(:not(.site-header--home)),:where(.site-header--home).is-past{background:var(--chalk);-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header--home:not(.is-past){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--line);--focus:var(--line);--link-line:rgba(var(--line-rgb),.6)}
.site-header--home:not(.is-past) .btn--cta{box-shadow:0 0 0 2px var(--line)}
/* over the film the dome is bright white (white on it is 1.49:1): the header gets an ink frost (5:1 or better over white) */
html.hero-scrub .site-header--home:not(.is-past){background:rgba(var(--scrim),.62);background:linear-gradient(180deg,rgba(var(--scrim),.7),rgba(var(--scrim),.6));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-header.is-tucked{transform:translateY(calc(-1 * (var(--notice-h) + var(--mast-h))))}
.masthead{position:relative;height:var(--mast-h)}
.masthead__in{display:flex;align-items:center;gap:14px;height:100%;max-width:calc(var(--wrap) + var(--gl) + var(--gr));margin-inline:auto;padding-inline:var(--gl) var(--gr)}
.logo{flex:none;display:block;padding:2px 7px;border-radius:8px;background:var(--line);box-shadow:0 1px 2px rgba(var(--ink-rgb),.1);line-height:0}
.logo img{display:block;width:150px;height:auto}
.back-chev .ico{transform:rotate(90deg)}
/* auto margins centre the list when there is room and collapse to 0 when there is not,
   so the menu can never slide left under the logo plate (justify-content:center would) */
.mainnav{flex:1;display:flex;justify-content:flex-start;min-width:0}
.mainnav__list{display:flex;align-items:center;gap:2px;margin:0 auto;padding:0;list-style:none}
.mainnav__item{position:relative;margin:0}
.mainnav__item--mega{position:static}
.mainnav__btn,.mainnav__link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 9px;border:0;border-radius:var(--r);background:none;color:inherit;font:700 15px/1 var(--ff-display);white-space:nowrap;text-decoration:none;cursor:pointer}
.mainnav__btn:hover,.mainnav__link:hover,.mainnav__btn[aria-expanded="true"]{background:rgba(var(--ink-rgb),.06)}
.site-header--home:not(.is-past) .mainnav__btn:hover,.site-header--home:not(.is-past) .mainnav__link:hover{background:rgba(var(--line-rgb),.12)}
.mainnav__btn[aria-expanded="true"] .ico--chev{transform:rotate(180deg)}
.mainnav__link[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
/* --nudge: 020-header.js keeps an open panel 16px inside the window (a panel near either edge). The panel lives in the
   fixed header, so a page scroll never reaches its lower part: it is capped at the window's height under the header
   (16px clear at the bottom) and scrolls inside itself when a window is shorter still, so its last link and the CTA
   can always be reached and focused on screen (WCAG 2.4.11). */
.mainnav__panel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:5;min-width:280px;max-height:calc(100vh - var(--notice-h) - var(--mast-h) - 22px);max-height:calc(100dvh - var(--notice-h) - var(--mast-h) - 22px);overflow-y:auto;overscroll-behavior:contain;padding:14px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--line);color:var(--ink);--fg:var(--ink);--muted:var(--text-2);--focus:var(--red);--link-line:var(--border-ui);--pill-bg:var(--chalk-2);--pill-fg:var(--ink);--pill-edge:var(--border-ui);box-shadow:0 18px 50px rgba(var(--ink-rgb),.18);translate:var(--nudge,0px) 0}
.mainnav__panel.is-open{display:block;animation:panel-in .22s var(--ease-out)}
html:not(.js) .mainnav__item:hover>.mainnav__panel,html:not(.js) .mainnav__item:focus-within>.mainnav__panel{display:block}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega{left:50%;width:min(1100px,calc(100vw - 48px));padding:24px 24px 0;transform:translateX(-50%)}
.mega.is-open{animation:mega-in .24s var(--ease-out)}
@keyframes mega-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translateX(-50%)}}
.mega__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 24px}
.mega__title{margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--hairline);font:600 12px/1.3 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.mega__list,.panel__list{margin:0;padding:0;list-style:none}
.mega__list li,.panel__list li{margin:0}
/* round 2 (DESIGN-AUDIT 6.4): every menu row and the mega phone link are 44px tall */
.navlink{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px;padding:6px 8px;margin:0 -8px;border-radius:var(--r);font:500 15px/1.3 var(--ff-body);text-decoration:none}
.navlink:hover{background:var(--chalk)}
.navlink[aria-current="page"] .navlink__label{text-decoration:underline;text-underline-offset:.2em}
.navlink .pill{min-height:22px;padding:2px 8px;font-size:11px}
.mega__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:20px -24px 0;padding:16px 24px;border-top:1px solid var(--hairline);border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--chalk)}
.mega__ask{margin:0;font:700 16px/1.3 var(--ff-display)}
.mega__call{display:inline-flex;align-items:center;min-height:44px;font:600 13px/1.3 var(--ff-mono);font-stretch:87.5%}
.masthead__tools{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.masthead__phone{font:600 14px/1 var(--ff-mono);font-stretch:87.5%;letter-spacing:.02em;text-decoration:none;white-space:nowrap;padding:14px 6px}
.masthead__phone:hover{text-decoration:underline}
.masthead__menu{display:none}
.site-search{padding:10px 0 12px;border-top:1px solid rgba(var(--ink-rgb),.08)}
.site-header--home:not(.is-past) .site-search{background:var(--chalk);color:var(--ink);--focus:var(--red)}
.site-search__in{display:flex;gap:10px;max-width:calc(820px + var(--gl) + var(--gr));margin-inline:auto;padding-inline:var(--gl) var(--gr)}
.site-search input{flex:1;min-width:0;min-height:48px;padding:10px 14px;border:1px solid var(--border-ui);border-radius:var(--r);background:var(--line);font-size:16px}
/* the header CTA keeps the one CTA's 19px weight 800 label, which is large text, so white on ICM red (4.17:1)
   passes; only its padding is compact (post-build fix: at 17px and 15px the label was not large text and failed) */
.masthead__cta{min-height:44px;padding:.42em .78em;font-size:19px}
/* Six top items (CD5 gives Programs its own; gate W1 request B1). The full menu shows from 901px (brief 9.2). From
   1320px the masthead row may run to 1360px, wider than the 1200px content column; the phone number shows in the
   masthead from 1420px, where the row has room for it (it is always in the mega card and the footer). Narrower screens
   tighten the items, then the logo and the CTA's padding (never its 19px label). Checked every 20px from 920 to 1920px
   by _dev/cdp/v2-menu.ps1 -Mode sweep: no two controls overlap, none off screen. The Menu button in the masthead is
   never needed above 900px. */
@media (min-width:1320px){.masthead__in{max-width:calc(1360px + var(--gl) + var(--gr))}}
@media (max-width:1419px){.masthead__phone{display:none}}
@media (max-width:1319px) and (min-width:901px){
  .masthead__in{gap:10px}
  .logo img{width:136px}
  .mainnav__btn,.mainnav__link{padding:0 7px;gap:4px;font-size:14px}
  .mainnav__btn .ico--chev{width:12px;height:12px}
}
@media (max-width:1199px) and (min-width:901px){
  .masthead__in{gap:10px}
  .masthead__cta{text-transform:none;padding:.42em .7em}
  .logo img{width:124px}
}
@media (max-width:1139px) and (min-width:901px){
  .masthead__tools{gap:4px}
  .logo img{width:104px}
  .mainnav__list{gap:0}
  .mainnav__btn,.mainnav__link{padding:0 6px;font-size:13px}
  .mainnav__btn .ico--chev{display:none}
}
@media (max-width:979px) and (min-width:901px){
  .mainnav__btn,.mainnav__link{padding:0 5px;font-size:12.5px}
  .masthead__cta{padding:.42em .6em}
}
/* the fit guard (020-header.js) for labels longer than the defaults: each step only takes room away. The last step,
   fit-4, is for labels that still collide after fit-3: the six items give way to the Menu button, which opens the
   same menu in the phone sheet, so no label is ever drawn over another control. */
.masthead__in.fit-1 .masthead__phone{display:none}
.masthead__in.fit-2 .mainnav__list{gap:0}
.masthead__in.fit-2 .mainnav__btn,.masthead__in.fit-2 .mainnav__link{padding-inline:4px;gap:2px}
.masthead__in.fit-3 .mainnav__btn,.masthead__in.fit-3 .mainnav__link{font-size:12px;letter-spacing:0}
.masthead__in.fit-3 .mainnav__btn .ico--chev{display:none}
.masthead__in.fit-4 .mainnav{display:none}
.masthead__in.fit-4 .masthead__menu{display:inline-flex}
@media (max-width:900px){
  .masthead__in{gap:6px}
  .mainnav,.masthead__cta,.masthead__menu{display:none}
  .logo{padding:4px 6px}
  .logo img{width:104px}
}
@media (pointer:coarse){.masthead__menu{display:none}}

/* ---------- 10b. Image menus (round 2, WP-H: V2-PLAN 4 WP-H, DESIGN-AUDIT 6.2 to 6.5) ---------- */
/* Menu photos print data-src only: 025-menu-images.js loads a panel's photos on the first hover intent or focus of its
   item, and the phone sheet's when it first opens. Every photo box has a fixed shape, so nothing moves when a photo
   arrives, and shows the alternating band colour until then. Text never sits on a photo: titles and lines are on the
   panel, under or beside it. Without JavaScript the photo boxes are not drawn (the panels still open on hover and focus). */
html:not(.js) .mega__photo,html:not(.js) .mega__feature,html:not(.js) .mcard__media,html:not(.js) .navlink__thumb,html:not(.js) .menu-chip,html:not(.js) .menu-sheet__photo{display:none}
.mega__img,.mcard__img{display:block;width:100%;height:100%;object-fit:cover}

/* mega: the Whitby and Oshawa columns open on their city photo; the featured card (the top item's photo and
   description) replaces the grey strip and holds the one CTA and the phone link */
.mega__photo{display:block;margin:0 0 12px;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--chalk-2)}
.mega__pitch{flex:1 1 200px;display:grid;gap:4px;min-width:0}
.mega__desc{margin:0;max-width:52ch;font:500 14px/1.4 var(--ff-body);color:inherit}
.mega__foot--photo{padding-block:14px}
.mega__feature{flex:none;display:block;width:112px;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--chalk-2)}

/* photo card panels: Programs (up to three photo cards beside the other programs) and Achievements (the latest ranking
   table and the certificate). A card is one link covering the whole card (photo and title inside it); its short line is
   laid over the link's lower padding and lets clicks through, so the focus ring goes round the whole card. */
.mainnav__item--wide{position:static}
.mcards{padding:20px}
.mcards:not(.mcards--compact){left:50%;width:min(1000px,calc(100vw - 48px));transform:translateX(-50%)}
/* cards only (Achievements): anchored under its button inside the narrow li, so it takes its width from its cards
   (two or three 212px columns), never from the li; 020-header.js keeps it inside the window */
.mcards--compact{left:50%;width:max-content;min-width:280px;max-width:calc(100vw - 32px);transform:translateX(-50%)}
.mcards.is-open{animation:mega-in .24s var(--ease-out)}
.mcards__in{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 28px}
.mcards:not(.mcards--compact) .mcards__in{grid-template-columns:auto minmax(0,1fr);align-items:start}
/* one column per card, whatever their number (up to three) */
.mcards__grid{display:grid;grid-auto-flow:column;grid-auto-columns:212px;gap:14px}
.mcards__links{columns:2 200px;column-gap:24px}
.mcards__links li{break-inside:avoid}
@media (max-width:1100px){
  .mcards:not(.mcards--compact) .mcards__in{grid-template-columns:minmax(0,1fr)}
  .mcards:not(.mcards--compact) .mcards__grid{grid-auto-columns:minmax(0,212px)}
  .mcards__links{columns:3 180px}
}
/* short windows (a 1366x768 laptop shows about 657px): the column photos become a short strip and the panel's
   spacing tightens, so the whole mega panel, its CTA and the phone link stay in the window without scrolling
   (040-notice-header.css also caps every panel to the window and lets it scroll, for anything shorter still). Up to
   1000px wide the columns are narrower and their lists wrap, so the strip starts at 800px tall there. */
@media (max-height:760px),(max-height:800px) and (max-width:1000px){
  .mega{padding-top:18px}
  .mega__photo{aspect-ratio:4/1;margin-bottom:8px}
  .mega__foot{margin-top:14px}
  .mega__foot--photo{padding-block:10px}
}
.mcard{position:relative;display:grid;border-radius:var(--r-lg);background:var(--line);box-shadow:inset 0 0 0 1px var(--hairline)}
.mcard__link{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:44px;padding:8px 8px 14px;border-radius:inherit;color:var(--ink);text-decoration:none}
.mcard--line .mcard__link{padding-bottom:58px}
.mcard__link:hover{background:var(--chalk)}
.mcard__link:hover .navlink__label{text-decoration:underline;text-underline-offset:.2em}
.mcard__media{display:block;align-self:stretch;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:var(--chalk-2)}
.mcard__link .navlink__label{padding-inline:4px;font:700 16px/1.25 var(--ff-display)}
.mcard__link .pill{margin-inline:4px;min-height:22px;padding:2px 8px;font-size:11px}
.mcard__text{grid-area:1/1;align-self:end;margin:0 12px 14px;padding:0;font:500 14px/1.35 var(--ff-body);color:var(--muted);pointer-events:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mcard--certificate .mcard__media{background:var(--white);box-shadow:inset 0 0 0 2px var(--gold-rule)}

/* dropdowns: a link with a photo carries a 48px square thumbnail (the rows without one keep the space) */
.panel__list--thumbs{min-width:300px}
.panel__list--thumbs .navlink{flex-wrap:nowrap;gap:12px;min-height:56px}
.panel__list--thumbs .navlink__label{flex:1;min-width:0}
.navlink__thumb{flex:none;display:block;width:48px;height:48px;border-radius:var(--r);background:var(--chalk-2);object-fit:cover}

/* reduced motion: no panel slide and no photo zoom (DESIGN-AUDIT 6.4) */
@media (prefers-reduced-motion:reduce){.mainnav__panel.is-open,.mega.is-open,.mcards.is-open{animation:none}}
@media (prefers-reduced-motion:no-preference){
  .mcard__img{transition:transform .5s var(--ease-out)}
  .mcard__link:hover .mcard__img{transform:scale(1.03)}
}
/* ---------- 11. The rail (desktop, 1100px+ and taller than 560px; brief 9.4) ---------- */
.rail{display:none}
@media (min-width:1100px) and (min-height:561px){
  .rail{display:block;position:fixed;left:24px;top:calc(var(--head-h) + 12px);bottom:24px;z-index:40;width:12px}
}
.rail__ribbon{position:absolute;inset:0;border-radius:6px;background:var(--court)}
.rail__ribbon::after{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:var(--line)}
.rail__ticks{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.rail__ticks li{margin:0}
.rail__tick{position:absolute;left:-6px;width:24px;height:24px;margin-top:-12px;display:block;text-decoration:none}
.rail__tick::before{content:"";position:absolute;left:3px;right:3px;top:11px;height:2px;border-radius:1px;background:var(--line)}
.rail__tick.is-now::before{background:var(--line);box-shadow:0 0 0 1px var(--court)}
.rail__tip{position:absolute;left:30px;top:50%;transform:translate(-4px,-50%);opacity:0;pointer-events:none;white-space:nowrap;padding:5px 9px;border-radius:6px;background:var(--ink);color:var(--line);font:600 11px/1.2 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.rail__tick:hover .rail__tip,.rail__tick:focus-visible .rail__tip{opacity:1;transform:translate(0,-50%)}
.rail__tick:focus-visible{outline-offset:0}
.rail__ball{position:absolute;left:-1px;top:-7px;width:14px;height:14px;filter:drop-shadow(0 1px 2px rgba(var(--ink-rgb),.35));will-change:transform}
.rail__chip{position:absolute;left:20px;top:0;margin:0;display:flex;align-items:center;gap:8px;max-width:none;padding:6px 10px;border-radius:var(--r);background:var(--ink);color:var(--line);font:600 11px/1.2 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-4px);pointer-events:none;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.rail__dot{display:none;width:10px;height:10px;box-shadow:none}
.rail.has-dot .rail__dot{display:inline-block}
.rail:hover .rail__chip,.rail:focus-within .rail__chip,.rail.is-film .rail__chip{opacity:1;transform:none}
.rail.is-film .rail__chip{background:rgba(var(--scrim),.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(var(--line-rgb),.16)}
@media (max-height:560px){.rail__chip{display:none}}

/* ---------- 12. The line bar (under 1100px and on windows 560px tall or less; brief 9.4) ---------- */
.linebar{display:none}
@media (max-width:1099px),(max-height:560px){
  .linebar{position:relative;display:block;width:100%;height:var(--bar-h);padding:0 16px;border:0;border-top:1px solid rgba(var(--ink-rgb),.06);background:transparent;color:var(--text-2);cursor:pointer;text-align:left}
}
html:not(.js) .linebar{display:none}
.site-header--home:not(.is-past) .linebar{color:var(--line);border-top-color:rgba(var(--line-rgb),.14)}
.linebar__labels{position:absolute;left:16px;right:16px;top:4px;display:flex;justify-content:space-between;gap:12px;font:600 11px/1.2 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.linebar__now,.linebar__next{flex:0 1 auto;min-width:0;max-width:calc(50% - 6px);overflow:hidden;text-overflow:clip}
.linebar__next{text-align:right}
.linebar__ribbon{position:absolute;left:16px;right:16px;bottom:3px;height:6px;border-radius:3px;background:var(--court)}
.linebar__ribbon::after{content:"";position:absolute;left:0;right:0;top:2.5px;height:1px;background:var(--line)}
.linebar__ticks{position:absolute;inset:0}
.linebar__ticks i{position:absolute;top:0;width:1px;height:6px;background:var(--line)}
.linebar__ball{position:absolute;left:-6px;top:-3px;width:12px;height:12px;filter:drop-shadow(0 1px 1px rgba(var(--ink-rgb),.35));will-change:transform}
@media (pointer:coarse){.linebar__labels{top:10px}.linebar__ribbon{bottom:8px}}

/* ---------- 13. The thumb bar (coarse pointer or 900px and down; brief 9.7) ---------- */
.thumbbar{display:none}
@media (max-width:900px),(pointer:coarse){
  .thumbbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;gap:6px;height:var(--thumb-h);padding:7px max(10px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:var(--ink);background:color-mix(in srgb,var(--ink) 96%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--line);--focus:var(--line);transition:transform .3s var(--ease-out)}
  .thumbbar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--court)}
  .thumbbar::after{content:"";position:absolute;left:0;right:0;top:1px;height:1px;background:var(--line)}
}
body.kb-open .thumbbar,body.sheet-open .thumbbar{transform:translateY(110%)}
.thumbbar__cta{flex:1 1 auto;min-width:172px;min-height:48px;height:50px;padding:0 14px;border-radius:999px;text-transform:none;font-size:19px}
.thumbbar__item{position:relative;flex:0 0 48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:0;border:0;background:none;color:var(--line);text-decoration:none;cursor:pointer;border-radius:10px}
.thumbbar__item:hover{background:rgba(var(--line-rgb),.08)}
.thumbbar__icon{position:relative;line-height:0}
.thumbbar__icon .ico{width:22px;height:22px}
.ico--ball{--ball-fill:var(--line);--ball-seam:var(--court)}
.thumbbar__label{font:600 11px/1.1 var(--ff-body);white-space:nowrap}
.thumbbar__dot{position:absolute;right:-3px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--line)}
@media (max-width:359px){.thumbbar__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* Round 2 (WP-G): the bar holds 3 to 5 items from the admin (the thumb_bar menu) */
/* The CTA label wraps, balanced, rather than spill out of its pill when a narrow bar or a longer label from the admin
   leaves too little room (two lines of 19px fit the 50px pill); a label that fits stays on one line, as in round 1. */
.thumbbar__cta{white-space:normal;text-wrap:balance;overflow-wrap:anywhere}
.thumbbar--n3 .thumbbar__item{flex-basis:60px}
/* Five items: a smaller label, so it sits on ICM's darker red. White on --red passes only as large text (19px weight
   800; see the header CTA note in 040), white on --red-press passes at any size. */
.thumbbar--n5 .thumbbar__cta{min-width:0;padding:0 10px;font-size:17px;--btn-bg:var(--red-press)}
.thumbbar--n5 .thumbbar__cta:hover,.thumbbar--n5 .thumbbar__cta:active{--btn-bg:var(--red-ink)}
.thumbbar--n5 .thumbbar__item{flex-basis:46px}
.thumbbar--nocta{justify-content:space-around}
.thumbbar--nocta .thumbbar__item{flex:1 1 0}
@media (max-width:389px){.thumbbar--n5{gap:4px}.thumbbar--n5 .thumbbar__cta{font-size:15px;padding:0 8px}}
/* Under 360px (320px phones): the CTA gives up round 1's 172px minimum and shares the row, the items keep 44px
   targets (their labels are hidden here), and the gaps and side padding tighten, so every item stays on screen. */
@media (max-width:359px){
  .thumbbar{gap:4px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .thumbbar__cta{flex:1 1 0;min-width:0;padding:0 8px}
  .thumbbar__item,.thumbbar--n5 .thumbbar__item{flex-basis:44px}
}
/* No bar (fewer than three items): no room is kept for it at the bottom of the page */
:root:not(:has(#thumbbar)){--thumb-h:0px}
/* No menu opener in the bar (its Menu item hidden, or no bar printed): wherever the main menu is hidden (900px and
   down), the masthead's Menu button comes back, so a phone can always open the menu. Two rules on purpose: a browser
   without :has() drops the first, and 060-thumbbar.js sets .no-thumb-menu for it instead. */
@media (max-width:900px){
  :root:not(:has(#thumbbar [data-sheet-open="menu-sheet"])) .masthead__menu{display:inline-flex}
  .no-thumb-menu .masthead__menu{display:inline-flex}
}
/* ---------- 14. Sheets: native <dialog> as bottom or full-height sheets (brief 9.6, 12.11) ---------- */
.sheet{padding:0;border:0;margin:0;max-width:none;max-height:none;width:100%;background:transparent;color:var(--ink);overflow:visible}
.sheet::backdrop{background:rgba(var(--ink-rgb),.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sheet__in{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px max(20px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:var(--chalk);box-shadow:0 -10px 40px rgba(var(--ink-rgb),.22);overflow:auto;overscroll-behavior:contain}
.sheet[open] .sheet__in{animation:sheet-up .34s var(--ease-out)}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet--bottom{position:fixed;inset:auto 0 0 0}
.sheet--bottom .sheet__in{max-height:90dvh;border-radius:18px 18px 0 0;padding-top:28px}
.sheet--bottom .sheet__in::before{content:"";position:absolute;left:50%;top:10px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--hairline)}
.sheet--full{position:fixed;inset:0;height:100%;height:100dvh}
.sheet--full .sheet__in{height:100%;max-height:none;border-radius:0;padding-top:max(22px,env(safe-area-inset-top))}
.sheet__x{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));width:48px;height:48px;z-index:2;background:var(--chalk)}
.sheet__title{margin:0 56px 4px 0;font:700 20px/1.3 var(--ff-display)}
.sheet__btn{width:100%}
.sheet__close{align-self:center;min-width:120px;min-height:48px;margin-top:6px;padding:0 24px;border:1px solid var(--border-ui);border-radius:999px;background:var(--line);font:700 16px/1 var(--ff-display);cursor:pointer}
@media (min-width:721px){
  .sheet--bottom{inset:0;margin:auto;width:min(460px,calc(100% - 48px));height:fit-content}
  .sheet--bottom .sheet__in{border-radius:var(--r-lg);max-height:86vh;padding:28px}
  .sheet--bottom .sheet__in::before{display:none}
  .sheet--full{left:auto;width:min(440px,100%)}
  .sheet--full .sheet__in{box-shadow:-20px 0 60px rgba(var(--ink-rgb),.2)}
}
body.sheet-lock{position:fixed;left:0;right:0;overflow:hidden}
.toc-list{margin:0;padding:0;list-style:none;counter-reset:toc}
.toc-list li{margin:0;border-bottom:1px solid var(--hairline)}
.toc-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 2px;font:700 16px/1.3 var(--ff-display);text-decoration:none}
.toc-list .toc-mark{font:600 11px/1 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.toc-list .is-now a{color:var(--court-deep)}
/* the mobile menu */
/* round 2 (WP-H): the sheet opens on the phone menu's photo, edge to edge above the search (photo only, no text on it) */
.menu-sheet__photo{display:block;flex:none;align-self:stretch;width:auto;max-width:none;height:clamp(112px,18vh,160px);margin:calc(-1 * max(22px,env(safe-area-inset-top))) calc(-1 * max(20px,env(safe-area-inset-right))) 0 calc(-1 * max(20px,env(safe-area-inset-left)));object-fit:cover;object-position:center 40%;background:var(--chalk-2)}
/* the search: its label above, the field and the button on one row, both 48px (phone targets, DESIGN-AUDIT 6.4) */
.menu-search{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 8px;margin:4px 56px 6px 0}
.menu-search label{grid-column:1 / -1;font:600 15px/1.3 var(--ff-body)}
.menu-search input{min-width:0;min-height:48px;padding:10px 14px;border:1px solid var(--border-ui);border-radius:var(--r);background:var(--line);color:var(--ink);font-size:16px}
.menu-sheet__photo+.sheet__x+.menu-search{margin-right:0}
/* every button in the phone menu is 48px tall (the coarse-pointer .btn rule in 030-base.css allows 44) */
#menu-sheet .btn{min-height:48px}
.menu-groups{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.menu-group{border-bottom:1px solid var(--hairline)}
.menu-group__sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 4px;font:700 18px/1.2 var(--ff-display);list-style:none;cursor:pointer}
.menu-group__sum::-webkit-details-marker{display:none}
.menu-group__label{flex:1;min-width:0}
.menu-group[open] .ico--chev{transform:rotate(180deg)}
.menu-group__body{padding:0 4px 14px}
.menu-group__title{margin:10px 0 2px;font:600 11px/1.3 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.menu-group__list{margin:0;padding:0;list-style:none}
.menu-group__list li{margin:0}
.menu-link{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:48px;padding:6px 0;font:500 16px/1.3 var(--ff-body);text-decoration:none}
.menu-link--top{gap:12px;padding:6px 4px;border-bottom:1px solid var(--hairline);font:700 18px/1.2 var(--ff-display)}
/* round 2 (JUDGE graft 3): a 48px photo chip beside each group name, from its menu item's photo (decorative: alt="") */
.menu-chip{flex:none;display:block;width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--chalk-2)}
/* round 2: one row of three contact buttons (Call, Text, Email) instead of four stacked; the number and address under it */
.menu-contact{display:grid;gap:10px;margin-top:10px}
.menu-contact .btn{width:100%}
.menu-contact__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.menu-contact__row .btn{min-width:0;padding-inline:8px}
.menu-contact__line{margin:0;text-align:center;font:500 14px/1.4 var(--ff-body);color:var(--muted)}
.menu-contact__ios{display:flex;align-items:center;gap:8px;margin:0;font-size:15px}
.menu-contact__ios .ico{width:18px;height:18px}

/* ---------- 15. Consent card and install card (brief 11.20, 11.9; spec 9.3) ---------- */
.consent,.install-card{position:fixed;z-index:70;left:16px;bottom:calc(var(--thumb-h) + 16px);width:min(380px,calc(100% - 32px));padding:18px 18px 16px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--line);color:var(--ink);box-shadow:0 18px 50px rgba(var(--ink-rgb),.2);animation:sheet-up .4s var(--ease-out)}
.consent__text,.install-card__text{margin:0 0 12px;font:500 15px/1.5 var(--ff-body)}
.consent__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.consent__btns .btn{min-height:44px;font-size:15px;padding:.5em .6em}
.consent__link{display:inline-block;margin-top:10px;font-size:14px}
.install-card{padding-right:52px}
.install-card__ios{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px}
.install-card__x{position:absolute;right:6px;top:6px}
body.sheet-open .consent,body.sheet-open .install-card{display:none}
/* a phone held sideways (brief 12, tested at 844x390): the fixed chrome shrinks so the page shows.
   The notice becomes one 28px line, the logo row 48px, the thumb bar 56px (items stay 48px),
   and the consent card turns into one compact row above the thumb bar, on the right and clear of the still
   hero's copy column (x up to 42 percent; post-build fix: it covered half the H1). */
@media (orientation:landscape) and (max-height:500px){
  :root{--mast-h:48px}
  :root:has(.site-header .notice){--notice-h:28px}
  .notice__in{min-height:28px;padding-block:0}
  .notice__text{font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .notice__close{width:44px;height:28px}
  .logo img{width:84px}
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse),(orientation:landscape) and (max-height:500px) and (max-width:900px){
  :root{--thumb-h:calc(56px + env(safe-area-inset-bottom))}
  .thumbbar{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
  .thumbbar__cta{height:48px}
  .consent{left:auto;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--thumb-h) + 8px);width:min(560px,calc(57vw - 32px));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:10px 14px}
  .consent__text{margin:0;font-size:14px;line-height:1.35}
  .consent__btns{grid-template-columns:auto auto}
  .consent__link{grid-column:1;margin-top:0}
}
/* phones held upright (2026-09-15): a slim bar just above the thumb bar instead of a card over half the screen */
@media (max-width:720px) and (orientation:portrait){
  .consent{left:8px;right:8px;width:auto;bottom:calc(var(--thumb-h) + 8px);padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .consent__text{margin:0;font-size:13px;line-height:1.35}
  .consent__btns{grid-template-columns:1fr 1fr;gap:8px}
  .consent__btns .btn{font-size:14px;padding:.35em .6em}
  .consent__link{margin-top:0;font-size:13px}
}

/* ---------- 16. Footer (brief 10.11) ---------- */
.site-footer{position:relative;padding:clamp(56px,7vw,88px) 0 28px;background:var(--ink);background:color-mix(in srgb,var(--ink) 94%,transparent);color:var(--line);--fg:var(--line);--muted:var(--text-2-inv);--focus:var(--line);--link-line:rgba(var(--line-rgb),.4);--pill-bg:var(--ink-2);--pill-fg:var(--line);--pill-edge:rgba(var(--line-rgb),.42);--hatch:rgba(var(--line-rgb),.12)}
.site-footer__baseline{display:none}
@media (min-width:1100px) and (min-height:561px){
  .site-footer__baseline{display:block;position:absolute;left:12px;top:-1px;width:44px;height:2px;background:var(--line)}
  .site-footer__endball{position:absolute;left:16px;top:-14px;width:14px;height:14px;animation:endball 10s var(--ease-inout) -3s infinite}
  .site-footer__baseline::after{content:"";position:absolute;left:14px;top:-3px;width:18px;height:4px;border-radius:50%;background:rgba(var(--scrim),.35);filter:blur(1px);animation:endshadow 10s var(--ease-inout) -3s infinite}
}
@keyframes endball{0%,100%{transform:none}50%{transform:translateY(-1px)}}
@keyframes endshadow{0%,100%{opacity:.7;transform:scaleX(1)}50%{opacity:.4;transform:scaleX(.85)}}
.site-footer__grid{display:grid;gap:36px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
@media (min-width:1000px){.site-footer__grid{grid-template-columns:1.25fr 1fr 1fr 1.2fr}}
/* Round 2 (WP-G): the footer builder's 0, 1 or 3 menu columns (two is round 1's grid above) */
@media (min-width:1000px){
  .site-footer__grid--c0{grid-template-columns:1.25fr 1.2fr}
  .site-footer__grid--c1{grid-template-columns:1.25fr 1fr 1.2fr}
  .site-footer__grid--c3{grid-template-columns:1.2fr 1fr 1fr 1fr 1.15fr}
}
.site-footer__list .site-footer__group{flex-direction:column;align-items:flex-start}
.site-footer__sub{margin:6px 0 0;padding:0 0 0 12px;list-style:none;border-left:1px solid rgba(var(--line-rgb),.2)}
.site-footer__list .site-footer__sub li{margin:0 0 4px;font-size:14px}
.site-footer__list .linkbtn{color:inherit}
.site-footer__addr,.site-footer__hours{color:var(--text-2-inv);font-size:14px}
.site-footer__logo{display:block;width:220px;height:auto;margin-bottom:18px}
.site-footer__tag{margin:0 0 6px;font:italic 800 22px/1.2 var(--ff-display);font-stretch:112.5%}
.site-footer__tag2{margin:0 0 18px;color:var(--text-2-inv);font-size:15px}
.site-footer__h{margin:0 0 10px;font:600 12px/1.3 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2-inv)}
.site-footer__h:not(:first-child){margin-top:22px}
.site-footer__list,.site-footer__social{margin:0;padding:0;list-style:none}
.site-footer__list li,.site-footer__social li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 6px;font-size:15px}
.site-footer__list .pill{min-height:20px;padding:1px 7px;font-size:10.5px}
.site-footer__list--plain{margin-top:18px}
.site-footer__social{margin-top:6px}
.site-footer__contact p{font-size:15px;max-width:none}
.site-footer__who{font-weight:600}
.site-footer__pay{color:var(--text-2-inv);font-size:14px}
.site-footer__ai{margin:36px 0 0;padding-top:20px;border-top:1px solid rgba(var(--line-rgb),.14);max-width:none;color:var(--text-2-inv);font-size:12px;line-height:1.5}
.site-footer__lower{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:14px;font:400 12px/1.5 var(--ff-mono);font-stretch:87.5%;color:var(--text-2-inv)}
.site-footer__lower p{margin:0}
.site-footer__lower ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.site-footer__lower li{margin:0}
.site-footer__lower a,.site-footer__lower .linkbtn{color:var(--text-2-inv)}
.notice-off .notice{display:none}
:root:has(.site-header .notice[hidden]),:root.notice-off:has(.site-header .notice){--notice-h:0px}

/* ---------- 17. The level finder (brief 10.1, 12.3) ---------- */
.finder-band{background:var(--ink);isolation:isolate;overflow:hidden}
/* the band ends soon after the "how registration works" row: no empty strip before the next section */
main>.finder-band,.band.finder-band{padding-bottom:clamp(40px,5vw,64px)}
/* the finder's ground: a softly blurred frame of the approved film (t 3.0 s, the orange courts) under the ink band */
.finder-band::after{content:"";position:absolute;inset:0;z-index:-1;background:url("../img/icm-finder-bg.v1.jpg") center/cover no-repeat;background-image:image-set(url("../img/icm-finder-bg.v1.webp") type("image/webp"),url("../img/icm-finder-bg.v1.jpg") type("image/jpeg"));opacity:.3;pointer-events:none}
.finder{--cw:72px;position:relative;display:grid;grid-template-columns:var(--cw) minmax(0,1fr);max-width:760px;margin:0 auto;border:1px solid rgba(var(--line-rgb),.14);border-radius:18px;background:var(--ink-2);color:var(--line);--fg:var(--line);--muted:var(--text-2-inv);--focus:var(--line);--link-line:rgba(var(--line-rgb),.5);--edge:rgba(var(--line-rgb),.45);--pill-bg:var(--ink);--pill-fg:var(--line);--pill-edge:rgba(var(--line-rgb),.42);--hatch:rgba(var(--line-rgb),.12);box-shadow:0 30px 80px rgba(var(--scrim),.35);overflow:hidden}
.finder__court{position:relative;min-height:100%;background:var(--court)}
.finder__line{position:absolute;left:calc(var(--cw) / 2 - 1px);top:34px;bottom:26px;width:2px;background:var(--line);transform-origin:top}
.finder__group{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.finder__group[data-group="B"]{top:30%}
.finder__group[data-group="IN"]{top:52%}
.finder__group[data-group="HP"]{top:74%}
.finder__group i{display:block;width:18px;height:2px;border-radius:1px;background:var(--line);transition:background-color .3s var(--ease-out),transform .3s var(--ease-out)}
.finder__group b{position:absolute;left:5px;top:-3px;font:600 10px/1 var(--ff-mono);font-stretch:87.5%;letter-spacing:.02em;color:var(--line)}
.finder__group.is-lit i{background:var(--red);transform:scaleX(1.35)}
.finder__group.is-full i{background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 5px)}
.finder__ball{position:absolute;left:calc(var(--cw) / 2 - 9px);top:10px;width:18px;height:18px;line-height:0;transform:translateY(var(--rest-y,0px))}
.finder__ball .ico{width:18px;height:18px;--ball-fill:var(--line);--ball-seam:var(--court);filter:drop-shadow(0 2px 2px rgba(var(--scrim),.35))}
.finder.is-waiting .finder__ball .ico{animation:ball-wait 4s var(--ease-inout) -1.3s infinite}
@keyframes ball-wait{0%,70%,100%{transform:none}82%{transform:translateY(-3px)}}
.finder__ball.is-dropping{animation:ball-drop .7s var(--ease-bounce) both}
@keyframes ball-drop{0%{transform:translateY(0)}58%{transform:translateY(var(--drop-y)) scale(1.14,.82)}74%{transform:translateY(calc(var(--drop-y) - 9px)) scale(.97,1.03)}88%{transform:translateY(var(--drop-y)) scale(1.05,.95)}100%{transform:translateY(var(--drop-y))}}
.finder__ball.is-landed::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 2px var(--red);opacity:.9;animation:halo .9s var(--ease-out) both}
@keyframes halo{from{transform:scale(.4);opacity:0}to{transform:none;opacity:.9}}
.finder__main{min-width:0;padding:clamp(22px,4vw,40px) clamp(18px,4vw,40px) clamp(22px,3vw,32px)}
.finder__title{font-size:clamp(28px,3.4vw,44px);margin-bottom:.35em}
.finder__lede{color:var(--text-2-inv);font-size:17px;margin-bottom:1.3em}
.finder__nojs{display:grid;gap:14px;margin:0}
.finder__nojs .btn{justify-self:start}
.finder__progress{margin:0 0 10px;font:600 11px/1.2 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2-inv)}
.finder__step{min-width:0;margin:0;padding:0;border:0}
.finder__step.is-in{animation:step-in .36s var(--ease-out)}
@keyframes step-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.finder__legend{display:block;padding:0;margin:0 0 14px;font:700 20px/1.3 var(--ff-display);outline-offset:4px}
.finder__opts{display:grid;gap:10px}
@media (min-width:560px){.finder__opts{grid-template-columns:1fr 1fr}}
.finder__opt{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:56px;padding:12px 16px;border:1px solid rgba(var(--line-rgb),.3);border-radius:12px;background:rgba(var(--line-rgb),.04);cursor:pointer;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s}
.finder__opt:hover{border-color:var(--line);background:rgba(var(--line-rgb),.09)}
.finder__opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.finder__opt:has(input:checked){border-color:var(--line);background:var(--line);color:var(--ink)}
.finder__opt:has(input:focus-visible){outline:3px solid var(--line);outline-offset:2px}
.finder__opt-text{font:600 16px/1.3 var(--ff-body)}
.finder__count{font:600 11px/1.2 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2-inv)}
.finder__count:empty{display:none}
.finder__opt:has(input:checked) .finder__count{color:var(--text-2)}
.finder__note{margin:0;padding:14px 16px;border-radius:12px;background:rgba(var(--line-rgb),.08);font-weight:500}
.finder__aside{margin:14px 0 0;font-size:15px}
.finder__chosen{display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;border-radius:12px;background:var(--line);color:var(--ink);--link-line:var(--border-ui);--focus:var(--red);font-weight:600}
.finder__controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(var(--line-rgb),.12)}
.finder__controls .linkbtn{font-size:15px}
.finder__next{margin-left:auto}
.finder__result{margin:0}
.finder__result:not([hidden]){animation:step-in .4s var(--ease-out)}
.finder__result--server{margin-top:24px;padding-top:20px;border-top:1px solid rgba(var(--line-rgb),.14)}
.fresult>*{margin-top:0}
.fresult .kicker{margin-bottom:8px}
.fresult__title{margin:0 0 .45em;font-size:clamp(22px,2.4vw,28px)}
.fresult__rung{margin-bottom:.6em;font:500 13px/1.5 var(--ff-mono);font-stretch:87.5%}
.fresult__note{color:var(--text-2-inv)}
.fresult__facts{font:400 13px/1.6 var(--ff-mono);font-stretch:87.5%;color:var(--text-2-inv)}
.fresult__price{font:600 17px/1.4 var(--ff-body)}
.fresult__label{margin:1.2em 0 .6em;font:600 11px/1.2 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2-inv)}
.fresult__actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.2em 0 .6em}
.fresult__small{font-size:14px;color:var(--text-2-inv)}
.fresult .pill{margin-bottom:12px}
.fresult__rescue{margin:14px 0;padding:14px 16px;border-radius:12px;background:rgba(var(--line-rgb),.07)}
.fresult__rescue p{margin-bottom:10px}
.fresult__rows{margin:0;padding:0;list-style:none}
.fresult__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0;padding:12px 0;border-bottom:1px solid rgba(var(--line-rgb),.12)}
.fresult__city{flex:1 1 140px;font:700 17px/1.3 var(--ff-display)}
.fresult__form{margin-top:14px;padding:18px;border-radius:12px;background:var(--line);color:var(--ink);--fg:var(--ink);--muted:var(--text-2);--focus:var(--red);--link-line:var(--border-ui);--edge:var(--border-ui)}
.fresult--error p{margin:0;padding:14px 16px;border-radius:12px;background:rgba(var(--line-rgb),.08)}
.slot-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px;padding:0;list-style:none}
.slot{display:inline-flex;align-items:center;min-height:36px;margin:0;padding:6px 12px;border:1px solid var(--edge);border-radius:999px;background:transparent;color:inherit;font:500 12.5px/1.3 var(--ff-mono);font-stretch:87.5%}
.slot--full{opacity:.62;background-image:repeating-linear-gradient(115deg,var(--hatch) 0 2px,transparent 2px 6px)}
button.slot{cursor:pointer}
button.slot[aria-pressed="true"]{border-color:var(--fg);background:var(--fg);color:var(--line)}
.finder-how{display:grid;gap:12px 28px;max-width:760px;margin:26px auto 0;padding:0;list-style:none;counter-reset:none}
@media (min-width:760px){.finder-how{grid-template-columns:repeat(3,1fr)}}
.finder-how li{display:flex;gap:12px;margin:0;font-size:15px;line-height:1.45;color:var(--text-2-inv)}
.finder-how__n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid rgba(var(--line-rgb),.4);border-radius:50%;color:var(--line);font:600 12px/1 var(--ff-mono)}
/* the finder as a dialog: a bottom sheet on phones, a centred panel on wider screens */
.sheet--finder{position:fixed;inset:auto 0 0 0}
.sheet--finder .sheet__in{max-height:90dvh;padding:0;border-radius:18px 18px 0 0;background:var(--ink-2);color:var(--line)}
.sheet--finder .sheet__in::before{display:none}
.sheet--finder .sheet__x{background:rgba(var(--line-rgb),.1);color:var(--line);--focus:var(--line)}
.finder--dialog{--cw:40px;max-width:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.finder--dialog .finder__main{padding-right:64px}
.finder--dialog .finder__group b{left:2px;font-size:9px}
.sheet--finder .fresult__register{position:sticky;bottom:0;z-index:1;margin-bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,rgba(var(--ink-2-rgb),0),var(--ink-2) 28%)}
@media (min-width:721px){
  .sheet--finder{inset:0;margin:auto;width:min(820px,calc(100% - 48px));height:fit-content}
  .sheet--finder .sheet__in{max-height:90vh;border-radius:18px}
  .finder--dialog{--cw:72px}
  .finder--dialog .finder__group b{left:5px;font-size:10px}
}

/* ---------- 18. The homepage hero (brief 7, 8; the scrub standard) ---------- */
.hero{position:relative;background:var(--ink);color:var(--line);--fg:var(--line);--muted:var(--text-2-inv);--focus:var(--line);--link-line:rgba(var(--line-rgb),.6)}
.hero__static{position:relative;display:flex;min-height:calc(100svh - var(--thumb-h));overflow:hidden;background:var(--court-deep)}
.hero__still{position:absolute;inset:0;overflow:hidden}
/* the stills carry the ICM court logo below the line (post-build), so the whole settle frame shows: ball, line, logo */
.hero__still img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.hero__static::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--ink-rgb),.78) 0%,rgba(var(--ink-rgb),0) 60%);pointer-events:none}
/* phones and portrait screens: the still flows below an ink panel (the portrait block after the five gates) */
/* landscape screens with room (reduced motion, a failed film, landscape tablets): the copy keeps to the settle's
   column, x 6 to 40 percent, clear of the ball, over a left-side scrim */
@media (min-width:721px) and (orientation:landscape) and (min-height:561px){
  :root:not(.phone-film):not(.hero-scrub) .hero__static .hero__copy{max-width:none;margin:0;padding-left:6vw;padding-right:60vw}
  :root:not(.phone-film):not(.hero-scrub) .hero__static .hero__h1{max-width:none;font-size:clamp(34px,3.2vw,56px)}
  :root:not(.phone-film):not(.hero-scrub) .hero__static .hero__sub{max-width:none}
  :root:not(.phone-film):not(.hero-scrub) .hero__static::after{background:linear-gradient(90deg,rgba(var(--ink-rgb),.74) 0%,rgba(var(--ink-rgb),.6) 36%,rgba(var(--ink-rgb),0) 56%),linear-gradient(180deg,rgba(var(--ink-rgb),.5) 0%,rgba(var(--ink-rgb),0) 40%)}
}
.hero__copy{position:relative;z-index:1;width:100%;max-width:calc(var(--wrap) + var(--gl) + var(--gr));margin:0 auto;padding:calc(var(--head-h) + clamp(20px,5vh,56px)) var(--gr) 32px var(--gl);text-shadow:var(--tshadow)}
.hero__eyebrow{margin:0 0 14px;font:700 clamp(17px,1.5vw,20px)/1.3 var(--ff-display)}
.hero__h1{max-width:17ch;margin:0 0 .4em;font-size:clamp(40px,4.4vw,64px)}
@media (max-width:720px){.hero__h1{font-size:clamp(28px,8vw,36px)}.hero__sub{font-size:15px;line-height:1.5;margin-bottom:1em}.hero__eyebrow{font-size:15px;margin-bottom:8px}}
.hero__sub{max-width:46ch;margin:0 0 1.4em;font-size:clamp(17px,1.3vw,19px);color:var(--line)}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:0;max-width:none}
.hero__ctas .btn,.hband__ctas .btn{text-shadow:none}
.hero__more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:700 16px/1.2 var(--ff-display);text-decoration:none}
.hero__more:hover{text-decoration:underline}
@media (max-width:479px){.hero__ctas .btn--cta{width:100%}}
/* the scrub stage: hidden until hero.js arms it (html.hero-scrub); the five gates force the still */
/* band map: a 750vh scroll range (shortened 2026-09-15 so visitors reach the slider sooner), so 0.01 of progress is
   7.5vh and a 0.12 band holds a 60vh plateau */
.hero__scrub{display:none;position:relative;height:max(850vh,7650px)}
html.hero-scrub .hero__scrub{display:block}
html.hero-scrub .hero__static{display:block;min-height:0;background:none}
html.hero-scrub .hero__still,html.hero-scrub .hero__static::after,html.hero-scrub .hero__copy>:not(.hero__h1){display:none}
html.hero-scrub .hero__copy{position:absolute;padding:0}
html.hero-scrub .hero__h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.hero-scrub .film-stages{display:none}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  :root:not(.phone-film) .hero__scrub{display:none}
  :root:not(.phone-film) .hero__static{display:flex;min-height:calc(100svh - var(--thumb-h));background:var(--court-deep)}
  :root:not(.phone-film) .hero__still{display:block}
  :root:not(.phone-film) .hero__static::after{display:block}
  :root:not(.phone-film) .hero__copy{position:relative;padding:calc(var(--head-h) + clamp(20px,5vh,56px)) var(--gr) 32px var(--gl)}
  :root:not(.phone-film) .hero__copy>*{display:revert}
  :root:not(.phone-film) .hero__copy>.hero__ctas{display:flex}
  :root:not(.phone-film) .hero__h1{position:static;width:auto;height:auto;margin:0 0 .4em;overflow:visible;clip-path:none;white-space:normal}
  :root:not(.phone-film) .film-stages{display:block}
}
/* the still on phones and portrait screens (post-build fix; POST-BUILD-CHANGES 2: an ink chip behind every hero
   line, the copy never over the ball). The copy sits on an ink panel (--line text at 5:1 or better even over the
   white dome) and the still flows BELOW it: the frame's row at 40 percent meets the panel's bottom edge, so the ball
   (44 to 62 percent of the frame), the line and the baked court logo (70 to 79 percent) always fall under the panel,
   never behind the copy. The hero grows past the fold when the copy is taller than the screen (short phones). */
@media (orientation:portrait){
  :root:not(.hero-scrub) .hero__static{flex-direction:column;--sh:max(100vw,640px);--sw:calc(var(--sh) * 1.791)}
  :root:not(.hero-scrub) .hero__copy{order:1;flex:none;align-self:flex-start;width:auto;max-width:min(640px,calc(100% - 24px));margin:calc(var(--head-h) + 10px) 12px 0;padding:16px 16px 18px;border:1px solid rgba(var(--line-rgb),.12);border-radius:var(--r-lg);background:rgba(var(--scrim),.68);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:none}
  :root:not(.hero-scrub) .hero__still{position:relative;inset:auto;order:2;flex:1 0 auto;min-height:calc(var(--sh) * .42 + 12px);overflow:visible}
  :root:not(.hero-scrub) .hero__still img{left:50%;top:calc(12px - var(--sh) * .4);width:var(--sw);height:var(--sh);margin-left:calc(var(--sw) / -2);object-position:50% 50%;-webkit-mask-image:linear-gradient(180deg,transparent 0,var(--black) 16%);mask-image:linear-gradient(180deg,transparent 0,var(--black) 16%)}
}
@media (orientation:portrait) and (max-width:720px){
  :root:not(.hero-scrub) .hero__static{--sh:max(177.78vw,600px);--sw:calc(var(--sh) * .5625)}
  :root:not(.hero-scrub) .hero__copy{align-self:stretch;max-width:none}
}
/* a phone held sideways on the still (844x390; post-build fix): a compact ink panel in the settle's column, clear
   of the ball (x 44 percent), with the CTA row shown before the subline so it sits above the thumb bar. Visual order
   only: the subline holds no link, so the focus order is unchanged. */
@media (orientation:landscape) and (max-height:560px){
  :root:not(.hero-scrub) .hero__copy{display:flex;flex-direction:column;align-items:flex-start;width:calc(42vw - max(12px,env(safe-area-inset-left)));max-width:420px;margin:calc(var(--head-h) + 8px) 0 16px max(12px,env(safe-area-inset-left));padding:12px 14px 14px;border:1px solid rgba(var(--line-rgb),.12);border-radius:var(--r-lg);background:rgba(var(--scrim),.68);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:none}
  :root:not(.hero-scrub) .hero__eyebrow{margin-bottom:6px;font-size:14px}
  :root:not(.hero-scrub) .hero__h1{max-width:none;margin-bottom:10px;font-size:clamp(20px,6.2vh,26px)}
  :root:not(.hero-scrub) .hero__ctas{order:3;gap:8px 18px}
  :root:not(.hero-scrub) .hero__ctas .btn--cta{width:auto;padding-inline:.9em}
  :root:not(.hero-scrub) .hero__sub{order:4;margin:12px 0 0;font-size:14px;line-height:1.45}
}
.hero__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--film-bg);container-type:size}
.hero__poster{position:absolute;inset:0;background:center/cover no-repeat}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateZ(0);transition:opacity .7s var(--ease-out)}
/* the ICM court logo (mock B2), painted on the court at the settle. It follows the film's cover crop (16:9, centred):
   39.583% of the displayed film width (760px on a 1920 stage), centred, top edge at 69.86% of the displayed film
   height, where review/frames/09-settle-green-brand-mock.png has it. hero.js fades opacity only, p .86 to .90. */
.hero__logo{position:absolute;left:calc(50% - max(100vw,177.78vh) * .19792);top:calc(50% + max(56.25vw,100vh) * .1986);width:calc(max(100vw,177.78vh) * .39583);aspect-ratio:1520/298;background:center/100% 100% no-repeat;opacity:0;filter:blur(.5px);pointer-events:none;will-change:opacity}
@supports (width:1cqw){.hero__logo{left:calc(50cqw - max(100cqw,177.78cqh) * .19792);top:calc(50cqh + max(56.25cqw,100cqh) * .1986);width:calc(max(100cqw,177.78cqh) * .39583)}}
/* the phone cut is a centre 9:16 crop, too narrow for that size: the portrait still's bake (80.47% wide, top 70%) */
.phone-film .hero__logo{left:calc(50cqw - max(100cqw,56.25cqh) * .40235);top:calc(50cqh + max(177.78cqw,100cqh) * .2);width:calc(max(100cqw,56.25cqh) * .8047)}
.hero__stage.video-ready .hero__video{opacity:1}
.hero__stage.video-failed .hero__video{display:none}
.hero__scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(var(--scrim),0) 35%,rgba(var(--scrim),.62) 100%)}
/* the two small labels over the footage sit on ink chips like every hero line (post-build fix: a text shadow alone
   measured 1.37:1 over the white near-court line); both clear the thumb bar where there is one */
.hero__skip{position:absolute;left:6%;bottom:calc(var(--thumb-h) + 24px);z-index:3;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid rgba(var(--line-rgb),.16);border-radius:var(--r);background:rgba(var(--scrim),.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:600 12px/1.2 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;text-shadow:none;transition:opacity .3s var(--ease-out),visibility .3s}
.hero__cue{position:absolute;left:50%;bottom:calc(var(--thumb-h) + 24px);z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:8px 14px 6px;border:1px solid rgba(var(--line-rgb),.16);border-radius:var(--r);background:rgba(var(--scrim),.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateX(-50%);max-width:none;font:600 12px/1.2 var(--ff-mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;text-shadow:none;transition:opacity .4s var(--ease-out)}
/* a first visit's consent card (section 15) sits bottom left: the skip link rises above it (and the cue too where
   the screen is too narrow for both), so it can be seen and clicked (post-build fix). site.js sets --consent-h. */
:root:has(#consent:not([hidden])) .hero__skip{bottom:calc(var(--thumb-h) + 28px + var(--consent-h,150px))}
@media (max-width:1099px){:root:has(#consent:not([hidden])) .hero__cue{bottom:calc(var(--thumb-h) + 28px + var(--consent-h,150px))}}
.hero__cue .ico{width:12px;height:12px;animation:cue 4s var(--ease-inout) -1s infinite}
@keyframes cue{0%,60%,100%{transform:none;opacity:.7}75%{transform:translateY(5px);opacity:1}}
.hero__stage:not(.at-start) .hero__skip,.hero__stage:not(.at-start) .hero__cue{opacity:0;visibility:hidden}
.hero__ring{position:absolute;right:24px;bottom:calc(var(--thumb-h) + 24px);z-index:3;width:44px;height:44px;transition:opacity .5s var(--ease-out)}
.hero__ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.hero__ring circle{fill:none;stroke-width:3}
.hero__ring-track{stroke:rgba(var(--text-2-inv-rgb),.3)}
.hero__ring-arc{stroke:var(--line);stroke-dasharray:126;stroke-dashoffset:var(--ld,126);stroke-linecap:round}
.hero__ring.done{opacity:0;visibility:hidden}
@media (max-height:560px){.hero__cue,.hero__ring{display:none}}
/* the seven bands (post-build band map): placed in viewport percent in the dome's light above the courts. The dome is
   bright white (white text on it is 1.49:1), so every line sits on an ink chip and the settle block on an ink panel;
   the radial scrims stay as the second layer. Chips and panel ride --k (opacity only). */
.hband{--k:0;position:absolute;z-index:2;opacity:0;visibility:hidden;color:var(--line);text-shadow:var(--tshadow)}
.hband.on{visibility:visible}
.hband--left{left:6%;width:34%}
.hband--right{left:60%;width:34%}
.hband--1{top:17%;--sp:.72}
.hband--2{top:19%;--sp:.64}
.hband--3{top:19%;--sp:.72}
.hband--4{top:19%;--sp:.66}
.hband--5{top:19%;--sp:.72}
.hband--6{top:17%;width:36%;--sp:.64}
.hband--7{left:6%;top:calc(var(--head-h) + 14px);width:34%;padding:clamp(14px,1.2vw,24px) clamp(18px,1.6vw,28px) clamp(16px,1.3vw,26px)}
/* the rail's readout chip (section 11) docks at --head-h + 12px and is about 28px tall wherever the rail shows:
   the left-column bands and the settle panel start under it, never beneath it (the scrub standard: decorations
   never collide with content; post-build fix). Bands 2 and 4 sit in the right column, clear of it. */
@media (min-width:1100px) and (min-height:561px){
  .hband--1,.hband--6{top:max(17%,calc(var(--head-h) + 52px))}
  .hband--3,.hband--5{top:max(19%,calc(var(--head-h) + 52px))}
  .hband--7{top:calc(var(--head-h) + 52px)}
}
.hband::before{content:"";position:absolute;inset:-34% -26%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75 * var(--k));background:radial-gradient(ellipse 60% 58% at 50% 50%,rgba(var(--scrim),var(--sp)) 0%,rgba(var(--scrim),calc(var(--sp) * .66)) 46%,rgba(var(--scrim),0) 76%)}
.hband--settle::before{inset:0;border-radius:var(--r-lg);opacity:clamp(0,var(--k) * 2.5,1);background:rgba(var(--scrim),.66);box-shadow:0 18px 50px rgba(var(--scrim),.22)}
.hband .chip-scrim{background:rgba(var(--scrim),.66)}
.hband__kicker{margin:0 0 14px}
.hband__line{position:relative;display:block;width:fit-content;max-width:100%;margin:0 0 .16em;padding:.06em .38em .14em;font:italic 800 clamp(26px,2.7vw,44px)/1.12 var(--ff-display);font-stretch:112.5%;letter-spacing:-.005em}
.hband__line::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:10px;background:rgba(var(--scrim),.64);opacity:clamp(0,var(--k) * 3,1);pointer-events:none}
.hband__line.chip-scrim{display:block;width:fit-content;margin-bottom:10px;padding:.2em .45em .26em;font:italic 800 clamp(24px,2.6vw,42px)/1.12 var(--ff-display);font-stretch:112.5%;letter-spacing:-.005em;text-transform:none;text-shadow:0 1px 3px rgba(var(--scrim),.85)}
.hband__line.chip-scrim::before{display:none}
.hband .w{display:inline-block;white-space:nowrap}
.hband .c{display:inline-block}
/* 1. drift-down: words settle from 24px above */
.hband--drift .w{--kc:clamp(0,(var(--k) - var(--th,0)) * 2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * -24px))}
/* 2. layer pass: the rule scales in from the inner edge, lines rise from beneath it (round 2: --line by default) */
.hband__rule{display:block;width:100%;height:2px;margin:0 0 .7em;background:var(--stage,var(--line));transform-origin:left center;transform:scaleX(clamp(0,var(--k) * 2.2,1))}
.hband__mask{overflow:hidden;padding-bottom:.2em;margin-bottom:-.08em}
.hband__rise{display:block;--kl:clamp(0,(var(--k) - .3 - var(--i,0) * .15) * 3,1);opacity:var(--kl);transform:translateY(calc((1 - var(--kl)) * .6em))}
/* 3. haze through, 5. approach from depth, 6. blur to sharp: a static-blur soft copy under a sharp copy */
.hband__soft,.hband__sharp{display:block}
.hband__soft{position:absolute;inset:0;padding:inherit;filter:blur(10px);pointer-events:none}
.hband--haze .hband__line,.hband--approach .hband__line,.hband--blur .hband__line{--kl:clamp(0,(var(--k) - var(--i,0) * .18) * 2.4,1)}
.hband--haze .hband__sharp{opacity:var(--kl);transform:translateY(calc((1 - var(--kl)) * .4em))}
.hband--haze .hband__soft{opacity:calc((1 - var(--kl)) * .85);transform:translateY(calc(var(--kl) * -.9em))}
.hband--approach .hband__sharp,.hband--approach .hband__soft{transform-origin:left center;transform:scale(calc(.84 + .16 * var(--kl)))}
.hband--approach .hband__sharp{opacity:var(--kl)}
.hband--approach .hband__soft{opacity:calc((1 - var(--kl)) * .8)}
.hband--blur .hband__sharp{opacity:var(--kl)}
.hband--blur .hband__soft{opacity:calc(1 - var(--kl))}
/* 4. spread from centre: characters slide outward to their places, middle out */
.hband--spread .c{--kc:clamp(0,(var(--k) - var(--th,0)) * 2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc)) * var(--dx,0) * 1em))}
/* 7. the settle (post-build): an ink panel upper left, x 6 to 40 percent of the stage, ending above the ball and the
   line (about y 44 percent on 1440x900), never over the ball; eyebrow, words rise with one small overshoot,
   subline at k .66, CTA row at k .78 */
.hband__eyebrow{margin:0 0 .45em;max-width:none;font:700 clamp(15px,1.15vw,19px)/1.3 var(--ff-display);opacity:clamp(0,var(--k) * 3,1)}
.hband__headline{max-width:none;margin:0 0 .3em;font:italic 800 clamp(26px,2.1vw,44px)/1.05 var(--ff-display);font-stretch:112.5%;letter-spacing:-.01em}
.hband--settle .w{--kc:clamp(0,(var(--k) - var(--th,0)) * 3,1);--ks:clamp(0,(var(--k) - var(--th,0) - .12) * 3.2,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * .5em)) scale(calc(1 + .07 * var(--kc) - .07 * var(--ks)))}
.hband__sub{max-width:46ch;margin:0 0 1em;font-size:clamp(15px,1.05vw,18px);line-height:1.45;opacity:clamp(0,(var(--k) - .66) * 4,1)}
.hband__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;max-width:none;margin:0;--kb:clamp(0,(var(--k) - .78) * 5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 14px));visibility:hidden}
.hband--settle.ctas-on .hband__ctas{visibility:visible}
/* the phone cut band map (armed only by hero.js, brief 7 and 8.4). Post-build fixes: the spacer is the desktop's
   max(1100vh, 9900px), so a short phone (375x667) still holds every band for 5 flicks or more; the panels sit at the
   top under the header (at 64 percent a first visit's consent card covered them), moving up with the tucked header;
   the settle panel ends above the ball (44 percent of the frame): eyebrow, headline and the CTA, the subline kept
   for screen readers only, the eyebrow dropped on short screens. */
.phone-film .hband{left:20px;right:20px;width:auto;top:calc(var(--head-h) + 12px);padding:14px 16px;border-radius:12px;background:rgba(var(--scrim),.64);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:top .35s var(--ease-out)}
:root.phone-film:has(.site-header.is-tucked) .hband{top:calc(var(--bar-h) + 12px)}
.phone-film .hband::before,.phone-film .hband__line::before{display:none}
.phone-film .hband__line,.phone-film .hband__line.chip-scrim{font-size:clamp(22px,6.4vw,30px);background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.phone-film .hband--2 .hband__line+.hband__line,.phone-film .hband--3 .hband__line+.hband__line,.phone-film .hband--4 .hband__line+.hband__line,.phone-film .hband--5 .hband__line+.hband__line{display:none}
.phone-film .hband--7{padding:12px 14px 14px;background:rgba(var(--scrim),.66)}
.phone-film .hband__headline{font-size:clamp(22px,min(6.4vw,3.6svh),30px)}
.phone-film .hband--7 .hband__sub{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.phone-film .hband--7 .hero__more{display:none}
@media (max-height:740px){.phone-film .hband__eyebrow{display:none}}
.phone-film .hero__skip{left:20px;bottom:calc(var(--thumb-h) + 10px)}

/* ---------- Phones: the film drawn from a preloaded frame sequence on a canvas (hero.js, 2026-09-15) ----------
   Seeking a video on a phone lags, so phones draw the nearest loaded frame instead. The canvas takes the video's
   place (same box, same cover fit) and fades in once the first coarse pass of frames is in. */
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;opacity:0;transform:translateZ(0);transition:opacity .5s var(--ease-out)}
.hero__stage.canvas-mode .hero__canvas{display:block}
.hero__stage.canvas-mode.video-ready .hero__canvas{opacity:1}
.hero__stage.canvas-mode .hero__video{visibility:hidden}
/* Phones on the film: no backdrop blur over the moving picture. Every blur is recomputed on each new frame, which
   stutters on phones, so the panels, chips, header and thumb bar get solid backgrounds instead. */
html.phone-film .hband,html.phone-film .chip-scrim,html.phone-film .hero__skip,html.phone-film .rail.is-film .rail__chip,html.phone-film .thumbbar,html.hero-scrub.phone-film .site-header--home:not(.is-past){-webkit-backdrop-filter:none;backdrop-filter:none}
html.phone-film .hband{background:rgba(var(--court-deep-rgb),.9)}
html.phone-film .chip-scrim,html.phone-film .hero__skip,html.phone-film .rail.is-film .rail__chip{background:rgba(var(--scrim),.82)}
html.phone-film .thumbbar{background:var(--ink)}
html.hero-scrub.phone-film .site-header--home:not(.is-past){background:rgba(var(--scrim),.8)}
/* The portrait phone film: its own first frame under the canvas while the frames load, and the court logo laid onto
   the court below the ball at the landing (the line sits at about 55 percent of the frame; perspective lays the
   flat logo onto the low-angle court). */
.phone-film .hero__stage.canvas-mode .hero__poster{background-image:url("../hero/phone/hero-phone-f001.v3.webp") !important}
.phone-film .hero__stage.canvas-mode .hero__logo{left:calc(50cqw - max(100cqw,56.25cqh) * .31);top:calc(50cqh + max(177.78cqw,100cqh) * .15);width:calc(max(100cqw,56.25cqh) * .66);transform:perspective(520px) rotateX(58deg);transform-origin:50% 0}
/* ---------- 19. The four film frames, stacked (brief 8.3; static path only) ---------- */
.film-stages{padding-block:clamp(48px,8vw,96px);background:var(--ink);background:color-mix(in srgb,var(--ink) 94%,transparent);color:var(--line);--muted:var(--text-2-inv);--focus:var(--line)}
.stages__list{display:grid;gap:clamp(36px,6vw,64px);max-width:560px;margin:24px auto 0;padding:0;list-style:none}
.stage-frame{margin:0}
.stage-frame__media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--film-bg);aspect-ratio:4/5}
.stage-frame__media img{display:block;width:100%;height:100%;object-fit:cover}
.stage-frame__chip{position:absolute;left:14px;top:14px}
.stage-frame__line{margin:.55em 0 0;max-width:none;font:italic 800 clamp(22px,5.4vw,30px)/1.15 var(--ff-display);font-stretch:112.5%}
.stage-frame__line+.stage-frame__line{margin-top:.15em;font:500 17px/1.5 var(--ff-body);color:var(--text-2-inv)}
.stage-frame.reveal{opacity:1;transform:none}
.stage-frame .stage-frame__line{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.stage-frame .stage-frame__line+.stage-frame__line{transition-delay:90ms}
.stage-frame.in .stage-frame__line{opacity:1;transform:none}
.stage-frame.settled .stage-frame__line{transition-delay:0ms}
html:not(.js) .stage-frame .stage-frame__line{opacity:1;transform:none}
/* ---------- 19b. The certificate video (round 2, WP-A; NEW-COPY.md 6): ICM's ring of certificates in a white frame
   with a hairline (the video's own background is white, so it never sits full-bleed on a dark or court band), a 44px
   pause and play button, and the lookup page's layout. assets/js/src/135-media.js plays it only in view. ---------- */
.cert-video{width:100%;max-width:540px;margin:0}
.cert-video__frame{position:relative;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--white)}
.cert-video video,.cert-video__still{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:var(--white)}
.cert-video__caption{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--muted,var(--text-2))}
.cert-video--card{max-width:320px}
@media (min-width:900px){.cert-video--card{max-width:280px}}
.cert-video__toggle{position:absolute;right:10px;bottom:10px;z-index:1;display:inline-grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1px solid rgba(var(--line-rgb),.45);border-radius:50%;background:rgba(var(--ink-rgb),.8);color:var(--line);cursor:pointer}
.cert-video__toggle:hover{background:var(--ink)}
.cert-video__toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 2px var(--white)}
/* the glyph: two bars (pause) while it plays or will play; a triangle (play) once paused (data-state, set by 135-media.js) */
.cert-video__icon{display:block;box-sizing:border-box;width:14px;height:16px;border:0 solid currentColor;border-width:0 4px}
.cert-video__toggle[data-state="paused"] .cert-video__icon{width:0;height:0;margin-left:4px;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor}
/* the lookup page: the video under the H1 on phones, beside the form from 900px */
.cert-lookup{display:grid;gap:24px;align-items:start}
@media (min-width:900px){
  .cert-lookup{grid-template-columns:minmax(0,520px) minmax(240px,280px);justify-content:space-between;gap:40px}
  .cert-lookup>.cert-video{grid-column:2;grid-row:1}
  .cert-lookup>.cert-form{grid-column:1;grid-row:1}
}
@media (prefers-reduced-motion:reduce){.cert-video__toggle{transition:none}}
/* ---------- 20. Inner page frame: page head, breadcrumbs, closing band (brief 11) ---------- */
.page-head{position:relative;padding:clamp(40px,7vw,96px) 0 clamp(28px,4vw,48px)}
.page-head h1{max-width:20ch}
.page-head .lede{margin-bottom:0}
.page-head--ink{background:var(--ink);background:color-mix(in srgb,var(--ink) 94%,transparent);color:var(--line);--fg:var(--line);--muted:var(--text-2-inv);--focus:var(--line);--link-line:rgba(var(--line-rgb),.5)}
.page-head__strip{position:relative;height:6px;margin-top:clamp(24px,4vw,40px);border-radius:3px;background:var(--court)}
.page-head__strip::after{content:"";position:absolute;left:0;right:0;top:2.5px;height:1px;background:var(--line)}
.page-head__strip i{position:absolute;top:-4px;left:var(--at,18%);width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--line);box-shadow:inset 0 0 0 1.5px var(--court),0 1px 2px rgba(var(--ink-rgb),.3)}
.page-head__lion{float:right;width:auto;max-height:160px;margin:0 0 12px 18px}
/* round 2 (WP-E, DESIGN 4.7): the band right under a page head starts closer (it had its full 128px on top of
   the head's own 48px, an empty stretch before the first card row on the city hubs and under the hub H1).
   :where() keeps it at .band's weight, so it only trims the default band padding: a band that sets its own
   (the pathway overview, the status banner, the program strip) keeps it */
:where(.page-head)+.band{padding-top:clamp(36px,5vw,72px)}
.crumbs{margin:0 0 18px;font:500 12px/1.4 var(--ff-mono);font-stretch:var(--mono-stretch);letter-spacing:.03em;color:var(--muted)}
/* align-items (round 2, JUDGE 3): on touch screens the links are 44px tall, so "Home" used to sit a line lower
   than the current page's name beside it */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}
.crumbs li{margin:0}
.crumbs li+li::before{content:"/";margin:0 .55em;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--fg)}
.closing-band{padding:clamp(26px,4vw,40px) 0;background:var(--chalk-2)}
.closing-band .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.closing-band__ball{width:28px;height:28px;--ball-fill:var(--line);--ball-seam:var(--court);filter:drop-shadow(0 1px 1px rgba(var(--ink-rgb),.3))}
.closing-band p{flex:1 1 260px;margin:0;font:700 clamp(20px,2vw,26px)/1.25 var(--ff-display)}
.page-404 .search-form,.page-head--404 .search-form{max-width:520px;margin-top:22px}

/* ---------- 21. Rich text (sanitised HTML) ---------- */
.prose{font-size:17px;line-height:1.65}
.prose>*{max-width:64ch}
.prose h2{margin:1.6em 0 .5em;font-size:clamp(26px,2.8vw,36px)}
.prose h3{margin:1.4em 0 .4em}
.prose h4{margin:1.2em 0 .3em}
.prose img{border-radius:var(--r)}
.prose figure{margin:1.6em 0}
.prose figcaption{margin-top:.5em;font:400 13px/1.5 var(--ff-mono);font-stretch:var(--mono-stretch);color:var(--muted)}
.prose blockquote{margin:1.6em 0;padding:.1em 0 .1em 1.1em;border-left:3px solid var(--court);font:italic 800 clamp(20px,2vw,26px)/1.3 var(--ff-display);font-stretch:112.5%}
/* court-deep, not court: court on chalk is 4.11:1, under 4.5 for 17px list numbers; court-deep is 6.41:1 */
.prose ul li::marker,.prose ol li::marker{color:var(--court-deep)}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.4em 0;font-size:15px}
.prose th,.prose td{padding:8px 12px;border:1px solid var(--hairline);text-align:left;vertical-align:top}
.prose th{background:var(--chalk-2);font-weight:600}
.prose a{font-weight:500}

/* ---------- 22. Accordions (native <details>) and tabs ---------- */
.accordion{--rule:var(--hairline);border-top:1px solid var(--rule)}
.band--ink .accordion,.band--court .accordion,.band--court-deep .accordion,.on-dark .accordion{--rule:rgba(var(--line-rgb),.18)}
.accordion>details,.acc{border-bottom:1px solid var(--rule)}
.accordion>details>summary,.acc>summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 4px;font:700 18px/1.35 var(--ff-display);cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
.accordion>details>summary::after,.acc>summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease-out)}
.accordion>details[open]>summary::after,.acc[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.accordion>details>:not(summary),.acc__a{padding:0 4px 18px}
.accordion>details>:not(summary)>:last-child,.acc__a>:last-child{margin-bottom:0}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .accordion details::details-content{height:0;overflow:clip;transition:height .35s var(--ease-out),content-visibility .35s allow-discrete}
  .accordion details[open]::details-content{height:auto}
}
.tabs{display:flex;gap:6px;margin:0 0 16px;padding:2px 2px 6px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--edge);border-radius:999px;background:transparent;color:inherit;font:700 14px/1 var(--ff-display);cursor:pointer;scroll-snap-align:start;transition:background-color .2s,color .2s}
.tab[aria-selected="true"]{border-color:var(--fg);background:var(--fg);color:var(--chalk)}
.band--ink .tab[aria-selected="true"],.on-dark .tab[aria-selected="true"],.scoreboard .tab[aria-selected="true"]{color:var(--ink)}
@media (pointer:coarse){.tab{min-height:44px}}

/* ---------- 23. Shared components in W3, W4 and W5 markup (class names: CONTRACTS 16.5, W3b, W5.2) ---------- */
.split{display:grid;gap:clamp(28px,5vw,64px)}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .split--40{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
  .split--45{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
  .split--36{grid-template-columns:minmax(0,36fr) minmax(0,64fr)}
  .split--40>:first-child,.split--36>:first-child,.split__side{position:sticky;top:calc(var(--head-h) + 32px);align-self:start}
}
@media (max-height:720px){.split--36>:first-child,.split__side{position:static}}
.ball-glyph{display:inline-block;flex:none;width:28px;height:28px;vertical-align:middle;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fbfaf7' stroke='%237b767e' stroke-width='.5'/%3E%3Cpath d='M2.9 6.1c4.3 2.5 4.3 9.3 0 11.8M21.1 6.1c-4.3 2.5-4.3 9.3 0 11.8' fill='none' stroke='%23647956' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 1px rgba(var(--ink-rgb),.25))}
.ball-glyph--red{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ed1f24'/%3E%3Cpath d='M2.9 6.1c4.3 2.5 4.3 9.3 0 11.8M21.1 6.1c-4.3 2.5-4.3 9.3 0 11.8' fill='none' stroke='%23fbfaf7' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.line-list{position:relative;margin:0 0 20px;padding:0 0 0 24px;list-style:none;overflow:hidden}
.line-list::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--court)}
.line-list>li{position:relative;margin:0 0 8px}
.line-list>li::before{content:"";position:absolute;left:-18px;top:.72em;width:10px;height:2px;background:var(--court)}
.credentials::after{content:"";position:absolute;left:4px;top:0;width:6px;height:60px;background:linear-gradient(180deg,rgba(var(--line-rgb),0),rgba(var(--line-rgb),.15),rgba(var(--line-rgb),0));animation:shimmer 10s linear -3s infinite}
@keyframes shimmer{from{transform:translateY(-60px)}to{transform:translateY(420px)}}
/* chips: slot times with spots, level ranges, fact chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin:0;padding:6px 12px;border:1px solid var(--edge);border-radius:999px;background:var(--line);color:var(--ink);font:500 12.5px/1.3 var(--ff-mono);font-stretch:var(--mono-stretch)}
.chip__dot{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.chip--full{color:var(--text-2);background-image:repeating-linear-gradient(115deg,var(--hatch) 0 2px,transparent 2px 6px)}
.chip--full .chip__dot{background:none;border:1.5px solid currentColor}
.chip--range{min-height:26px;padding:2px 10px;border:0;border-radius:6px;background:var(--ink);color:var(--line);font-weight:600}
.chip__btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin:-6px -12px;padding:6px 12px;border:0;border-radius:999px;background:none;color:inherit;font:inherit;cursor:pointer}
.chip__btn[aria-expanded="true"]{background:var(--ink);color:var(--line)}
.slot-cal{margin:6px 0 0;font-size:14px}
.band--ink .chip,.band--court-deep .chip,.finder .chip,.rk-board .chip{border-color:rgba(var(--line-rgb),.45);background:transparent;color:var(--line)}
.band--ink .chip--range,.finder .chip--range{background:var(--line);color:var(--ink)}
.live .chip--open .chip__dot{animation:breathe-dot 6s var(--ease-inout) infinite}
.live li:nth-child(2n) .chip__dot{animation-delay:-2s}
@media (pointer:coarse){.chip__btn,.chip{min-height:44px}}
.pull,.pull-line{margin:1em 0;max-width:26ch;font:italic 800 clamp(22px,2.2vw,30px)/1.25 var(--ff-display);font-stretch:112.5%}
.small-print,.legal-note,.also,.also-row,.price-note{font-size:14px;line-height:1.5;color:var(--muted)}
.small-print,.legal-note{font-size:13px}
.empty,.empty-state{padding:16px 18px;border-radius:12px;background:var(--chalk-2);color:var(--ink)}
.band--ink .empty-state{background:var(--ink-2);color:var(--line)}
/* accordions outside .accordion (about, content blocks) */
details.accordion__item{border-bottom:1px solid var(--rule,var(--hairline))}
details.accordion__item:first-of-type{border-top:1px solid var(--rule,var(--hairline))}
details.accordion__item>summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 4px;font:700 18px/1.35 var(--ff-display);cursor:pointer;list-style:none}
details.accordion__item>summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease-out)}
details.accordion__item[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
details.accordion__item>:not(summary),.accordion__body{padding:0 4px 18px}
.accordion-section{margin-top:clamp(28px,4vw,48px)}
/* tabs made from W3's anchor lists [data-tabs] (site.js adds .tabs-on) */
.tabs-on>ul,.tabs-on>ol,.tabs-on [role="tablist"]{display:flex;flex-wrap:nowrap;gap:6px;margin:0 0 20px;padding:2px 2px 6px;overflow-x:auto;scrollbar-width:none;list-style:none}
.tabs-on [role="tablist"]::-webkit-scrollbar{display:none}
.tabs-on [role="tablist"]>li{margin:0}
.tabs-on [role="tab"]{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--edge);border-radius:999px;font:700 14px/1 var(--ff-display);text-decoration:none;white-space:nowrap}
.tabs-on [role="tab"][aria-selected="true"]{border-color:var(--fg);background:var(--fg);color:var(--chalk)}
.tabs-on .season-panel__title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[role="tabpanel"]:not([hidden]){animation:tabpanel .45s var(--ease-out)}
@keyframes tabpanel{from{opacity:0}to{opacity:1}}
@media (pointer:coarse){.tabs-on [role="tab"]{min-height:44px}}
.contact-box{margin:clamp(28px,4vw,48px) 0;padding:20px 22px;border-radius:var(--r-lg);background:var(--chalk-2)}
.contact-box>:last-child{margin-bottom:0}

/* ---------- 24. Homepage sections (W3's home template, brief 10) ---------- */
.programs{overflow:hidden}
.age-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end;margin:clamp(24px,4vw,40px) 0;padding:26px 0 0;list-style:none}
.age-card{position:relative;display:flex;flex-direction:column;gap:6px;margin:0}
.age-card:nth-child(2){margin-bottom:16px}.age-card:nth-child(3){margin-bottom:32px}.age-card:nth-child(4){margin-bottom:48px}
.age-card::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--court)}
.age-card::after{content:"";position:absolute;right:18px;top:-10px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fbfaf7' stroke='%237b767e' stroke-width='.5'/%3E%3Cpath d='M2.9 6.1c4.3 2.5 4.3 9.3 0 11.8M21.1 6.1c-4.3 2.5-4.3 9.3 0 11.8' fill='none' stroke='%23647956' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 1px rgba(var(--ink-rgb),.3));animation:lift 6s var(--ease-inout) -1.5s infinite}
.age-card:nth-child(2)::after{animation-delay:-3s}.age-card:nth-child(3)::after{animation-delay:-4.5s}.age-card:nth-child(4)::after{animation-delay:-6s}
@keyframes lift{0%,78%,100%{transform:none}88%{transform:translateY(-2px)}}
.age-card__age{margin:0;font:600 13px/1.2 var(--ff-mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.age-card__levels{margin:0;font:700 18px/1.3 var(--ff-display)}
.age-card p:not([class]){flex:1;margin:0;font-size:15px;color:var(--text-2)}
.age-card__price{margin:6px 0 0;font:600 15px/1.2 var(--ff-mono);font-stretch:87.5%}
.age-card__status{margin:4px 0 0;padding:0;list-style:none;font:500 12px/1.5 var(--ff-mono);font-stretch:87.5%;color:var(--text-2)}
.age-card__status li{margin:0}
.age-card__find{margin-top:6px;font-weight:600}
@media (max-width:899px){
  .age-cards{display:flex;align-items:stretch;gap:14px;padding:18px 2px 10px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .age-card{flex:0 0 86%;margin:0!important;scroll-snap-align:start}
}
.program-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 8px;padding:0;list-style:none}
@media (max-width:899px){.program-tiles{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.program-tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;gap:8px;margin:0;padding:0 0 20px;overflow:hidden}
.tile>:not(.tile__media){margin-left:18px;margin-right:18px}
.tile__media{aspect-ratio:16/10;overflow:hidden;margin-bottom:6px;background:var(--chalk-2)}
.tile__media picture,.tile__media img{display:block;width:100%;height:100%;object-fit:cover}
.tile__title{margin-top:10px;margin-bottom:0;font-size:20px}
.tile__title a,.program-tile h3 a{text-decoration:none}
.tile__title a:hover,.program-tile h3 a:hover,.tile:hover .tile__title a,.program-tile:hover h3 a{text-decoration:underline}
/* the whole card is the title's link (a stretched ::after), so a phone gets a card-sized target, not a 22px line of
   text (post-build fix); the waitlist link sits above it and keeps its own target */
.tile__title a::after,.program-tile h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.tile__action{position:relative;z-index:2}
.tile:has(.tile__title a:focus-visible),.program-tile:has(h3 a:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.tile__title a:focus-visible,.program-tile h3 a:focus-visible{outline:0}
.tile p{margin-top:0;margin-bottom:0;font-size:15px;color:var(--text-2)}
.tile .tile__price{font:600 14px/1.3 var(--ff-mono);font-stretch:87.5%;color:var(--ink)}
.tile__status{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.program-tiles .tile:first-child:not(:has(.tile__media)) .tile__title,.tile:not(:has(.tile__media)) .tile__title{margin-top:20px}
/* the Pickleball tile: a designed court card, no photo (post-build). Court green with the white line motif of a
   pickleball half court: the non-volley line, the baseline and the centre line between them. Decorative only. */
.tile__court{position:relative;display:block;background:var(--court);background-image:radial-gradient(ellipse 80% 70% at 50% 0%,rgba(var(--line-rgb),.1),rgba(var(--line-rgb),0) 70%)}
.tile__court::before,.tile__court::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--line)}
.tile__court::before{top:30%}
.tile__court::after{top:74%;height:3px}
.tile__court-line{position:absolute;left:50%;top:30%;height:44%;width:2px;margin-left:-1px;background:var(--line)}
/* the kids' group lesson over the age cards (homepage and /icm-tennis-programs/) */
.programs__photo{margin:clamp(20px,3vw,32px) 0 0;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:2/1;background:var(--chalk-2)}
.programs__photo picture,.programs__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@media (max-width:599px){.programs__photo{aspect-ratio:4/3}}
/* partials/registration/programs-grid: the photo or court card bleeds to the tile's rounded top */
.program-tile>picture,.program-tile>.tile__court{display:block;margin:-18px -18px 14px;aspect-ratio:16/10;overflow:hidden;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.program-tile>picture img{display:block;width:100%;height:100%;object-fit:cover}
/* ---------- Round 2 (WP-F): the program page, template "program" (/icm-tennis-programs/{slug}/) ---------- */
.program-page__intro{display:grid;gap:clamp(20px,3vw,40px);align-items:start}
.program-page__intro--photo{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.program-page__photo{margin:0;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:3/2;background:var(--chalk-2)}
.program-page__photo picture,.program-page__photo img{display:block;width:100%;height:100%;object-fit:cover}
.program-page__text{max-width:68ch}
.program-page__text>:first-child{margin-top:0}
.program-page__h2{margin:0 0 clamp(12px,2vw,20px)}
@media (max-width:899px){.program-page__intro--photo{grid-template-columns:1fr}}
/* the pathway (home): a deep court band, sticky 40/60, the ladder */
.pathway__ladder{position:relative}
ol.ladder{position:relative;margin:0;padding:0 0 0 48px;list-style:none}
ol.ladder::before{content:"";position:absolute;left:16px;top:0;bottom:0;width:2px;background:var(--line);transform-origin:top;transform:scaleY(var(--draw,1))}
ol.ladder::after{content:"";position:absolute;left:14px;top:0;width:6px;height:90px;border-radius:3px;background:linear-gradient(180deg,rgba(var(--line-rgb),0),rgba(var(--line-rgb),.12),rgba(var(--line-rgb),0));animation:glint 14s linear -4s infinite}
@keyframes glint{from{transform:translateY(-90px)}to{transform:translateY(var(--lh,600px))}}
.ladder__run{margin:0 0 26px}
.ladder__label{margin:0 0 6px;font:600 12px/1.3 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ladder__rungs{margin:0;padding:0;list-style:none}
.rung{position:relative;margin:0}
ol.ladder .rung::before{content:"";position:absolute;left:-40px;top:21px;width:20px;height:2px;background:var(--line);opacity:.45;transform:scaleX(.6);transform-origin:left;transition:transform .4s var(--ease-bounce),opacity .4s var(--ease-out)}
ol.ladder .rung.hit::before{opacity:1;transform:none}
.rung summary,.rung>p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:44px;margin:0;padding:10px 0;list-style:none;cursor:pointer}
.rung>p{cursor:default}
.rung summary::-webkit-details-marker{display:none}
.rung__code{min-width:3.2em;font:600 13px/1 var(--ff-mono);font-stretch:87.5%;letter-spacing:.04em}
.rung__name{flex:1;font:700 17px/1.3 var(--ff-display)}
.rung__dur,.rung__time{font:500 12px/1 var(--ff-mono);font-stretch:87.5%;color:var(--muted)}
.rung__focus{margin:0 0 12px;padding-left:1.1em;font-size:15px;color:var(--muted)}
.ladder-host .ladder__ball{position:absolute;left:9px;top:0;z-index:1;width:16px;height:16px;line-height:0;transform:translateY(calc(var(--ride,0) * (var(--lh,600px) - 16px)))}
.ladder-host .ladder__ball .ico{width:16px;height:16px;--ball-fill:var(--line);--ball-seam:var(--court-deep);animation:breathe 5s var(--ease-inout) -2s infinite}
/* round 2 (WP-A, NEW-COPY.md 4): the certificate card in the intro column (ICM's video in a white frame on the night
   court; the heading, line and link are its caption) and ICM's tier subtitle under each run's name */
.pathway-cert{margin-top:28px;max-width:320px}
.pathway-cert .cert-video__caption{color:var(--fg,var(--line))}
.pathway-cert__h{margin:14px 0 4px;font:700 19px/1.3 var(--ff-display);font-style:normal;font-stretch:100%}
.pathway-cert__line{margin:0 0 6px;font-size:15px;line-height:1.5;color:var(--muted)}
.pathway-cert__link{margin:0;font-weight:600}
.ladder__sub{display:block;margin-top:3px;font:500 12px/1.4 var(--ff-body);font-stretch:100%;letter-spacing:0;text-transform:none}
/* weekly ranking (home): a centred chalk section, W5's ink scoreboard, an inset photo */
.ranking-home{text-align:center}
.ranking-home .kicker{justify-content:center}
.ranking-home h2,.ranking-home .lede{margin-left:auto;margin-right:auto}
.ranking-home__board{position:relative;max-width:820px;margin:clamp(24px,4vw,40px) auto 0;text-align:left}
.ranking-home__photo{position:absolute;right:-26px;top:-44px;z-index:2;width:clamp(120px,17vw,184px);aspect-ratio:4/5;margin:0;overflow:hidden;border:3px solid var(--line);border-radius:12px;box-shadow:var(--shadow);transform:rotate(2deg)}
.ranking-home__photo picture,.ranking-home__photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:699px){.ranking-home__photo{position:relative;right:auto;top:auto;width:100%;aspect-ratio:16/10;margin:16px 0 0;transform:none}}
.ranking-home .chips{justify-content:center;margin-top:24px}
.ranking-home .link-row,.ranking-home .cta-row{justify-content:center}
.ranking-home .rk-board--home{padding-right:clamp(18px,3vw,32px)}
/* the pinned photo overlaps the board's right edge by its width less 26px: that strip is the board's right padding,
   so the photo never covers a table cell (post-build fix: it hid the leader's points at every desktop width) */
@media (min-width:700px){.ranking-home .rk-board--home{padding-right:calc(clamp(120px,17vw,184px) - 10px)}}
/* where we play: season tabs, the photo band, venue rows along the line */
.season-panel__photo{aspect-ratio:21/7;margin:0 0 20px;overflow:hidden;border-radius:var(--r-lg);background:var(--chalk-2)}
.season-panel__photo picture,.season-panel__photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:699px){.season-panel__photo{aspect-ratio:16/9}}
.venue-rows{margin:0 0 18px;padding:0;list-style:none;border-top:1px solid var(--hairline)}
.venue-row{display:grid;grid-template-columns:8.5em minmax(0,1.2fr) minmax(0,1fr) auto auto;grid-template-areas:"city name progs status dir" "city addr progs status dir";align-items:center;gap:2px 20px;margin:0;padding:16px 0;border-bottom:1px solid var(--hairline)}
.venue-row>p{margin:0;max-width:none}
.venue-row__city{grid-area:city;font:600 12px/1.3 var(--ff-label);font-stretch:var(--label-stretch);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.venue-row__name{grid-area:name;font:700 17px/1.3 var(--ff-display)}
.venue-row__address{grid-area:addr;font-size:14px;color:var(--text-2)}
.venue-row__programs{grid-area:progs;font-size:14px;color:var(--text-2)}
.venue-row__status{grid-area:status}
.venue-row__directions{grid-area:dir;font-weight:600;white-space:nowrap}
@media (max-width:799px){.venue-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"city status" "name name" "addr addr" "progs progs" "dir dir";gap:4px 12px}}
/* the director: portrait split 45/55, the court lift, the scorecard, credentials on the line */
.director__photo{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--chalk-2)}
.director__photo figure{position:relative;margin:0}
.director__photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.director__photo figcaption{position:absolute;left:12px;bottom:10px;padding:3px 8px;border-radius:6px;background:rgba(var(--ink-rgb),.62);color:var(--line);font:500 11px/1.3 var(--ff-mono);font-stretch:var(--mono-stretch)}
.js .director__photo::after{content:"";position:absolute;inset:0;z-index:2;background:var(--court);transform-origin:bottom;transform:scaleY(1);transition:transform .7s var(--ease-inout) .1s}
.js .director.in .director__photo::after{transform:scaleY(0)}
.director__sub{margin:-.2em 0 1em;font:500 19px/1.4 var(--ff-body);color:var(--text-2)}
.director__second{margin:20px 0 0}
dl.scorecard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px 0}
/* round 2 (WP-E, DESIGN 4.7): "15,000+" ran 28px out of its card at 1440 and 32px at 1100 once the count-up
   finished. Four cards in a row start at 1280px (2 by 2 below); each card is a size container and the figure is
   capped at 21% of its width, so seven tabular figures always fit. */
@media (min-width:1280px){dl.scorecard{grid-template-columns:repeat(4,minmax(0,1fr))}}
.scorecard>div{min-width:0;padding:14px;border:1px solid var(--hairline);border-radius:12px;background:var(--line);container-type:inline-size}
.scorecard dt{font:600 clamp(24px,2.4vw,32px)/1 var(--ff-num);font-stretch:var(--num-stretch);font-variant-numeric:tabular-nums;white-space:nowrap}
@supports (width:1cqi){.scorecard dt{font-size:min(clamp(24px,2.4vw,32px),21cqi)}}
.scorecard dd{margin:6px 0 0;font-size:13px;line-height:1.35;color:var(--text-2)}
/* families: one swipe row of quotes */
.swipe-row{display:flex;gap:16px;margin:0;padding:4px 2px 12px;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin}
.swipe-row>*{flex:0 0 min(88%,380px);margin:0;scroll-snap-align:start}
.quote blockquote{margin:0 0 14px}
.quote blockquote p{font:500 17px/1.55 var(--ff-body)}
.quote__who{margin:0;font-weight:600}
.quote__program{margin:0;font:500 12px/1.3 var(--ff-mono);font-stretch:var(--mono-stretch);color:var(--text-2)}
/* news cards: three on a shared baseline, the newest wider */
.news-cards{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px;align-items:end;margin-bottom:16px}
@media (max-width:899px){.news-cards{display:flex;align-items:stretch;padding-bottom:10px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain}.news-cards>*{flex:0 0 84%;scroll-snap-align:start}}
.news-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.news-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--chalk-2)}
.news-card__media picture,.news-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.news-card:hover .news-card__media img{transform:scale(1.03)}
.court-card{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;background:var(--court);color:var(--line)}
.court-card__line{position:absolute;left:0;right:0;top:60%;height:2px;background:var(--line)}
.court-card__date{position:relative;font:600 13px/1.2 var(--ff-mono);font-stretch:var(--mono-stretch)}
.news-card__body{display:flex;flex:1;flex-direction:column;gap:8px;padding:18px 20px 20px}
.news-card__date{display:flex;align-items:center;gap:8px;margin:0;font:500 12px/1.3 var(--ff-mono);font-stretch:var(--mono-stretch);color:var(--text-2)}
.news-cards>.news-card:first-child .news-card__date::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--court);animation:breathe-dot 6s var(--ease-inout) -1s infinite}
.news-card__title{margin:0;font-size:20px}
.news-card--feature .news-card__title{font-size:24px}
.news-card__title a{text-decoration:none}
.news-card__title a:hover{text-decoration:underline}
.news-card__excerpt{margin:0;font-size:15px;color:var(--text-2)}
.news-card__more{margin-top:auto;font-weight:600}
/* the newsletter band (W4) */
.newsletter{padding-block:clamp(40px,6vw,64px)}
.newsletter__inner{display:grid;gap:18px 40px;align-items:center}
@media (min-width:720px){.newsletter__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.newsletter__head h2{margin:0;font-size:clamp(26px,2.8vw,38px)}
.newsletter .form{max-width:none}
.band--court .field__label,.band--court .form__privacy,.band--court .field__hint,.band--court .choice{color:var(--line)}
.band--court .field__error{color:var(--line);font-weight:700}
/* named entrances keyed on W3's section classes (site.js adds .in, then .settled) */
.js .programs .age-card{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .programs.in .age-card{opacity:1;transform:none}
.js .programs .age-card:nth-child(2){transition-delay:110ms}.js .programs .age-card:nth-child(3){transition-delay:220ms}.js .programs .age-card:nth-child(4){transition-delay:330ms}
.js .programs.settled .age-card:nth-child(n){transition-delay:0ms}
.js .programs .program-tiles{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out) .5s,transform .6s var(--ease-out) .5s}
.js .programs.in .program-tiles{opacity:1;transform:none}
.js .locations .venue-row{opacity:0;transform:translateX(-16px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .locations.in .venue-row{opacity:1;transform:none}
.js .locations .venue-row:nth-child(2){transition-delay:70ms}.js .locations .venue-row:nth-child(3){transition-delay:140ms}.js .locations .venue-row:nth-child(4){transition-delay:210ms}.js .locations .venue-row:nth-child(5){transition-delay:280ms}.js .locations .venue-row:nth-child(6){transition-delay:350ms}.js .locations .venue-row:nth-child(n+7){transition-delay:420ms}
.js .locations.settled .venue-row:nth-child(n){transition-delay:0ms}
.js .news-home .news-card{opacity:0;transform:translateY(-12px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-bounce)}
.js .news-home.in .news-card{opacity:1;transform:none}
.js .news-home .news-card:nth-child(2){transition-delay:90ms}.js .news-home .news-card:nth-child(3){transition-delay:180ms}
.js .news-home.settled .news-card:nth-child(n){transition-delay:0ms}
.js .faq-home .accordion__item{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .faq-home.in .accordion__item{opacity:1;transform:none}
.js .faq-home .accordion__item:nth-child(2){transition-delay:70ms}.js .faq-home .accordion__item:nth-child(3){transition-delay:140ms}.js .faq-home .accordion__item:nth-child(4){transition-delay:210ms}.js .faq-home .accordion__item:nth-child(n+5){transition-delay:280ms}
.js .faq-home.settled .accordion__item:nth-child(n){transition-delay:0ms}
.js .families .quote{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .families.in .quote{opacity:1;transform:none}
.js .families .quote:nth-child(2){transition-delay:90ms}.js .families .quote:nth-child(n+3){transition-delay:180ms}
.js .families.settled .quote:nth-child(n){transition-delay:0ms}

/* ---------- 24d. Slider (round 2, WP-I; V2-PLAN WP-I, ADMIN-AUDIT 4.9): a reusable carousel of photo slides ----------
   Phones and narrow columns (a slider under 760 px wide): the photo, then its text panel under it; at 720 px of
   viewport and under the photo is the phone source at the phone ratio (--sl-p). From a 760 px slider: the photo fills
   the slider's desktop ratio (--sl-d) around its focal point (--fx, --fy), and the text sits on an ink panel (or a
   light one) over it on the chosen side, never straight on the photo. The photo and the panel share one grid cell, so a
   panel taller than the photo (the 3:1 shape at laptop widths, or long text) makes the slide taller and the photo
   covers that height: no text or button is ever cut off. The track is a scroll-snap row, so it swipes without
   JavaScript; the control bar shows once site.js runs (105-slider.js). Never inside the scroll film. */
.slider{--sl-d:21 / 9;--sl-p:4 / 5;position:relative;display:flex;flex-direction:column;gap:10px;margin:0;container-type:inline-size;container-name:slider}
.slider[hidden],.hero .slider,[data-hero-scrub] .slider{display:none}
.slider--section{width:100%;max-width:calc(var(--wrap) + var(--gl) + var(--gr));margin-inline:auto;padding:clamp(24px,4vw,48px) var(--gr) clamp(24px,4vw,48px) var(--gl)}
.slider__track{order:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;border-radius:var(--r-lg);background:var(--ink)}
.js .slider__track{scrollbar-width:none}
.js .slider__track::-webkit-scrollbar{display:none}
.slide{position:relative;display:flex;flex-direction:column;flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;background:var(--ink)}
.slide--light{background:var(--line)}
.slide:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.slide__media{position:relative;display:block;width:100%;aspect-ratio:var(--sl-d);overflow:hidden;background:var(--ink-2)}
.slide__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,40%)}
.slide__panel{position:relative;z-index:1;padding:18px 18px 20px;background:var(--ink);color:var(--line)}
.slide--light .slide__panel{background:var(--line);color:var(--ink)}
.slide__kicker{margin:0 0 8px;font:600 12px/1.3 var(--ff-label);font-stretch:var(--label-stretch);letter-spacing:.08em;text-transform:uppercase}
.slide__title{margin:0;color:inherit;font:var(--hd-style) var(--hd-weight) clamp(22px,2.2vw,32px)/1.12 var(--ff-display);font-stretch:var(--hd-stretch);letter-spacing:var(--hd-track);text-transform:var(--hd-case)}
.slide__text{max-width:none;margin:10px 0 0;font-size:16px;line-height:1.5}
.slide__cta{margin:16px 0 0}
@container slider (min-width:760px){
  .slide{display:grid;grid-template-columns:minmax(0,1fr)}
  .slide__media,.slide__panel{grid-area:1 / 1}
  .slide__media{align-self:stretch}
  .slide__panel{align-self:center;justify-self:start;width:min(460px,44%);margin:16px clamp(16px,4%,56px);padding:20px 22px 22px;border-radius:var(--r-lg);background:rgba(var(--scrim),.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .slide--right .slide__panel{justify-self:end}
  .slide--light .slide__panel{background:var(--line);box-shadow:var(--shadow)}
}
@media (max-width:720px){
  .slide__media{aspect-ratio:var(--sl-p)}
  .slide__media img{object-position:var(--pfx,50%) var(--pfy,40%)}
}
/* the control bar: pause (autoplay only), previous, the dots, next; 44 px targets */
.slider__bar{order:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.slider__bar[hidden],.slider__toggle[hidden]{display:none}
.slider__dots{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.slider__btn{display:inline-grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:var(--line);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-ui);cursor:pointer;transition:box-shadow .2s var(--ease-out)}
.slider__btn:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.slider__btn svg{display:block;width:20px;height:20px}
.slider__i-pause,.slider__i-play{display:grid}
.slider__toggle[data-state="playing"] .slider__i-play,.slider__toggle[data-state="paused"] .slider__i-pause{display:none}
.slider__dot{display:inline-grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:var(--fg);cursor:pointer}
.slider__pip{display:block;width:10px;height:10px;border-radius:5px;box-shadow:inset 0 0 0 2px currentColor;transition:width .25s var(--ease-out),background-color .25s var(--ease-out)}
.slider__dot[aria-current="true"] .slider__pip{width:24px;background:currentColor}
.slider button:focus-visible,.slider a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .slider__track{scroll-behavior:auto}
  .slider__btn,.slider__pip{transition:none}
}
/* The homepage section right after the film (client, 2026-09-15: "bigger, so nobody misses it"): edge to edge on
   desktop at up to a full screen tall, and a full screen on phones with the text over the bottom of the photo. */
.slider--section{max-width:none;padding:0 0 clamp(14px,2vw,22px)}
.slider--section .slider__track{border-radius:0}
.slider--section .slide__media{aspect-ratio:auto;height:clamp(420px,calc(100svh - var(--head-h,72px)),56.25vw)}
.slider--section .slide__title{font-size:clamp(28px,3.4vw,52px)}
.slider--section .slide__text{font-size:clamp(16px,1.3vw,19px)}
@container slider (min-width:760px){
  .slider--section .slide__panel{width:min(580px,44%);margin:24px clamp(24px,6%,96px);padding:28px 30px 30px}
}
@media (max-width:720px){
  .slider--section .slide{display:grid;grid-template-columns:minmax(0,1fr)}
  .slider--section .slide__media,.slider--section .slide__panel{grid-area:1 / 1}
  .slider--section .slide__media{height:calc(100svh - var(--head-h,64px) - var(--thumb-h,64px))}
  .slider--section .slide__panel{align-self:end;padding:88px 20px 26px;background:linear-gradient(to top,rgba(var(--scrim),.94) 58%,rgba(var(--scrim),0))}
  .slider--section .slide--light .slide__panel{background:linear-gradient(to top,rgba(var(--line-rgb),.96) 58%,rgba(var(--line-rgb),0))}
  .slider--section .slide__title{font-size:30px}
}
/* ---------- 24b. W5's scoreboard, tables and ranking pages (W5.2) ---------- */
.rk-board{position:relative;padding:clamp(18px,3vw,32px);border-radius:18px;background:var(--ink);color:var(--line);--fg:var(--line);--muted:var(--text-2-inv);--focus:var(--line);--edge:rgba(var(--line-rgb),.45);--link-line:rgba(var(--line-rgb),.5);box-shadow:0 30px 70px rgba(var(--ink-rgb),.22)}
.rk-board--page{padding:0;border-radius:0;background:none;box-shadow:none}
.rk-tabs{display:flex;gap:6px;margin:0 0 16px;padding:2px 2px 6px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none}
.rk-tabs::-webkit-scrollbar{display:none}
.rk-tab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid rgba(var(--line-rgb),.45);border-radius:999px;color:var(--line);font:700 14px/1 var(--ff-display);text-decoration:none;white-space:nowrap;scroll-snap-align:start}
.rk-tab.is-on,.rk-tab[aria-selected="true"]{border-color:var(--line);background:var(--line);color:var(--ink)}
@media (pointer:coarse){.rk-tab{min-height:44px}}
.rk-live{display:inline-block;flex:none;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--line);vertical-align:middle;animation:breathe-dot 8s var(--ease-inout) -2s infinite}
.rk-panel{margin:0 0 22px}
.rk-panel__title{margin:0 0 10px;font:600 12px/1.45 var(--ff-mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2-inv)}
.rk-panel__title a{text-decoration:none}
.rk-panel__title a:hover{text-decoration:underline}
.rk-board--page .rk-panel__title{font:700 clamp(18px,1.6vw,22px)/1.3 var(--ff-display);letter-spacing:0;text-transform:none;color:var(--line)}
/* a ranking table is --line text: its wrap is transparent wherever it sits on ink (post-build fix: on the High
   Performance page's ink band the opaque off-white wrap made every name and point total 1:1) */
.rk-board .table-wrap,.rk-standings .table-wrap,.band--ink .rk-panel .table-wrap,.on-dark .rk-panel .table-wrap{margin:0;border:0;background:transparent}
.rk-table{width:100%;min-width:0!important;border-collapse:collapse;color:var(--line);font:500 16px/1.3 var(--ff-mono);font-stretch:87.5%}
.rk-table caption{caption-side:top;padding:0 0 8px;text-align:left;font:600 12px/1.4 var(--ff-mono);color:var(--text-2-inv)}
.rk-table th,.rk-table td{padding:11px 10px;border-bottom:1px solid rgba(var(--line-rgb),.12);text-align:left;vertical-align:middle}
.rk-table thead th{font:600 11px/1.2 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2-inv)}
.rk-board--home .rk-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.rk-rank{width:58px}
.rk-rank__n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;font-weight:600;font-variant-numeric:tabular-nums}
.rk-table--medals .rk-row--medal .rk-rank__n{border:1px solid var(--line);border-radius:50%}
.rk-row{position:relative}
.rk-row--first td:first-child{box-shadow:inset 4px 0 0 var(--red)}
.rk-name{font:600 16px/1.3 var(--ff-body)}
.rk-pts{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.rk-table th.rk-pts,.rk-table td.rk-pts{text-align:right}
.rk-move{text-align:right;font-size:12px;white-space:nowrap;color:var(--text-2-inv)}
.rk-move--new{font-weight:600}
.rk-row.is-followed{background:rgba(var(--line-rgb),.08)}
.rk-follow{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:6px;padding:0;border:0;border-radius:50%;background:none;color:var(--line);cursor:pointer;vertical-align:middle}
.rk-follow:hover{background:rgba(var(--line-rgb),.1)}
.rk-follow__icon{width:18px;height:18px}
@media (pointer:coarse){.rk-follow{width:44px;height:44px}}
.rk-yours{display:inline-flex;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--ink);font:600 11px/1.4 var(--ff-mono);vertical-align:middle}
.rk-find{max-width:420px;margin:0 0 18px}
.rk-find .field__label{color:var(--line)}
.rk-find__input{width:100%;min-height:48px;padding:10px 14px;border:1px solid rgba(var(--line-rgb),.45);border-radius:var(--r);background:var(--ink-2);color:var(--line);font:400 16px/1.4 var(--ff-body)}
@media (max-width:720px){.rk-find{position:sticky;top:var(--head-h);z-index:5;margin-inline:calc(-1 * var(--gl));padding:8px var(--gl);background:var(--ink);transition:top .35s var(--ease-out)}
  :root:has(.site-header.is-tucked) .rk-find{top:var(--bar-h)}}
.rk-empty{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:16px;border-radius:12px;background:var(--ink-2)}
.rk-empty__lion{width:auto;max-height:100px}
.rk-empty p{margin:0}
.rk-archive-link{margin-top:18px}
.rk-head__photo{max-width:420px;margin-top:22px;overflow:hidden;border-radius:12px}
.rk-series-list{margin-top:10px}
.rk-series{display:flex;flex-direction:column;gap:6px}
.rk-series__name{margin:0}
.rk-series__sub,.rk-series__addr{margin:0;font-size:15px;color:var(--text-2)}
.rk-series__notes{margin:6px 0;padding-left:1.1em;font-size:15px}
.rk-series__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.rk-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin:4px 0;padding:0;list-style:none;font:500 13px/1.5 var(--ff-mono);font-stretch:87.5%;color:var(--text-2)}
.rk-signup{margin-top:clamp(28px,4vw,44px)}
.rk-chip{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--edge);border-radius:999px;font:600 11px/1.4 var(--ff-mono)}
.rk-note{font-size:14px;color:var(--muted)}
.rk-install{position:fixed;z-index:70;left:16px;right:16px;bottom:calc(var(--thumb-h) + 16px);max-width:420px;margin:0;box-shadow:0 18px 50px rgba(var(--ink-rgb),.2)}
.rk-install p{margin:0 0 10px}
.rk-install__actions{display:flex;gap:10px;margin:0}
.rk-arch{margin:0 0 32px}
.rk-arch__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--hairline)}
.rk-arch__row{display:grid;grid-template-columns:9em minmax(0,1fr) auto auto;align-items:center;gap:4px 16px;margin:0;padding:12px 0;border-bottom:1px solid var(--hairline)}
.rk-arch__stamp,.rk-arch__pts{font:500 13px/1.4 var(--ff-mono);font-stretch:87.5%}
.rk-arch__cat{font-weight:600}
.rk-arch__leader{font-size:15px;color:var(--text-2)}
.rk-arch__view{font-weight:600}
@media (max-width:699px){.rk-arch__row{grid-template-columns:minmax(0,1fr) auto}}
/* round 2 (WP-D): the archive by category, weekly updates folded under each final */
.rk-arch__dates{margin:-4px 0 14px;font-size:15px;color:var(--text-2)}
.rk-arch__block+.rk-arch__block>.rk-arch__list{border-top:0}
.rk-arch__weeks{border-bottom:1px solid var(--hairline)}
.rk-arch__weeks>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 0;font-size:15px;font-weight:600;cursor:pointer}
.rk-arch__list--weeks{margin:0 0 10px;padding-left:14px;border-top:0}
.rk-arch__list--weeks .rk-arch__row{grid-template-columns:12em minmax(0,1fr) auto auto;padding:8px 0}
.rk-arch__list--weeks .rk-arch__row:last-child{border-bottom:0}
@media (max-width:699px){.rk-arch__list--weeks .rk-arch__row{grid-template-columns:minmax(0,1fr) auto}}
.rk-snapshot__nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 0}
.rk-snapshot__when{font-weight:400}
.rk-snapshot__actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}


/* ---------- weekly ranking card, tiles (client 2026-10-21: "make it look nicer") ---------- */
.rk-series{gap:16px;padding:0;overflow:hidden}
.rk-series>*{margin-left:clamp(18px,2.4vw,28px);margin-right:clamp(18px,2.4vw,28px)}
.rk-series>:last-child{margin-bottom:clamp(18px,2.4vw,28px)}
.rk-series .rk-series__head{margin:0;padding:clamp(18px,2.4vw,26px) clamp(18px,2.4vw,28px) 16px;border-bottom:4px solid var(--gold);background:var(--chalk-2)}
.rk-series__kicker{margin:0 0 4px;font:700 13px/1.2 var(--ff-body);letter-spacing:.06em;text-transform:uppercase;color:var(--red-ink)}
.rk-series .rk-series__name{margin:0;line-height:1}
.rk-series .rk-facts--tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:4px;padding:0;font-size:15px;color:var(--ink)}
.rk-series .rk-fact{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:12px 14px;border:1px solid var(--hairline);border-radius:var(--r);background:var(--chalk-2)}
.rk-series .rk-fact--venue{grid-column:1/-1}
.rk-series .rk-fact__ico{flex:none;width:22px;height:22px;margin-top:1px;color:var(--red-ink)}
.rk-series .rk-fact dt{margin:0 0 2px;font:700 12px/1.2 var(--ff-body);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.rk-series .rk-fact dd{margin:0;font:700 16px/1.35 var(--ff-body);color:var(--ink);overflow-wrap:anywhere}
.rk-series .rk-fact--venue dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.rk-series .rk-fact--venue .rk-series__addr{font-weight:500;font-size:15px;color:var(--text-2)}
.rk-series .rk-series__dir{min-height:0;font-weight:700;font-size:15px;color:var(--red-ink)}
.rk-series .rk-series__notes{margin-top:0;margin-bottom:0;padding:0;list-style:none}
.rk-series .rk-series__notes ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.rk-series .rk-series__notes li{position:relative;margin:0;padding-left:28px;font-size:15.5px}
.rk-series .rk-series__notes li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:var(--gold-soft);box-shadow:inset 0 0 0 2px var(--gold)}
.rk-series .rk-series__notes li::after{content:"";position:absolute;left:6px;top:calc(.2em + 4px);width:5px;height:8px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rk-series .rk-series__actions{align-items:center;gap:12px;margin-top:2px;padding-top:16px;border-top:1px solid var(--hairline)}
@media (max-width:600px){.rk-series .rk-facts--tiles{grid-template-columns:1fr 1fr}.rk-series .rk-fact{padding:10px 12px}.rk-series .rk-fact dd{font-size:15px}}
@media (max-width:380px){.rk-series .rk-facts--tiles{grid-template-columns:1fr}}
.rk-series .rk-facts--tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.rk-series .rk-facts--tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:380px){.rk-series .rk-facts--tiles{grid-template-columns:1fr}}
.rk-series .rk-series__actions{align-self:stretch}
.rk-series .rk-series__name{font-size:clamp(24px,3vw,34px)}
.rk-series .rk-series__actions,.rk-series .rk-series__notes{max-width:none}
/* ---------- 24c. Inner templates (W3, W4; brief 11) ---------- */
.page-head__court,.page-head__strip{position:relative;height:6px;background:var(--court)}
.page-head__court{margin-top:clamp(24px,4vw,40px)}
.page-head__strip{margin-top:clamp(24px,4vw,40px)}
.page-head__line,.page-head__strip::after{content:"";position:absolute;left:0;right:0;top:2.5px;height:1px;background:var(--line)}
.page-head__court::before,.page-head__strip::before{content:"";position:absolute;top:-4px;left:calc(var(--gl) + 4px);z-index:1;width:14px;height:14px;border-radius:50%;background:var(--line);box-shadow:inset 0 0 0 1.5px var(--court),0 1px 2px rgba(var(--ink-rgb),.3)}
.page-head__meta{margin:12px 0 0;font:500 13px/1.4 var(--ff-mono);font-stretch:var(--mono-stretch);color:var(--muted)}
.page-head__back{margin:12px 0 0}
.page-head .cta-row{margin-top:22px}
.page-head .share{margin-top:14px}
.closing-band .ball-glyph{width:28px;height:28px}
.closing-band__line{flex:1 1 260px;margin:0;font:700 clamp(20px,2vw,26px)/1.25 var(--ff-display)}
/* course cards (level_chooser, location_hub) hang on the ladder rail */
.courses .ladder{position:relative;display:grid;gap:22px}
.ladder__rail{position:absolute;left:var(--gl);top:0;bottom:0;width:6px;border-radius:3px;background:var(--court)}
.ladder__rail::after{content:"";position:absolute;left:2.5px;top:0;bottom:0;width:1px;background:var(--line)}
.courses .ladder>.course-card,.courses .ladder>.empty{margin-left:38px}
.courses .ladder>.course-card::before{content:"";position:absolute;left:-32px;top:36px;width:32px;height:2px;background:var(--court)}
.course-card{position:relative}
.course-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
.course-card__title{flex:1 1 auto;margin:0;font:700 clamp(20px,1.8vw,24px)/1.25 var(--ff-display);font-style:normal;font-stretch:100%;letter-spacing:0}
.course-card__prereq{margin-bottom:.6em;font-weight:600}
.course-card__desc{margin-bottom:.8em}
.course-card__facts{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 10px;padding:0;list-style:none;font:400 13px/1.5 var(--ff-mono);font-stretch:var(--mono-stretch);color:var(--text-2)}
.course-card__facts li{margin:0}
.course-card__price{margin:.2em 0;font:600 17px/1.35 var(--ff-body)}
.course-card__small,.course-card__formnote{font-size:13px;color:var(--text-2)}
.course-card__note{padding:10px 12px;border-radius:8px;background:var(--chalk-2);font-size:14px}
.course-card__times{margin:12px 0}
.course-card__group{margin:12px 0 6px;font:600 12px/1.3 var(--ff-label);font-stretch:var(--label-stretch);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.course-card__action{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.course-card__action .course-card__formnote{flex-basis:100%;margin:0}
.card-waitlist{width:100%}
.card-waitlist>summary{display:inline-flex;list-style:none}
.card-waitlist>summary::-webkit-details-marker{display:none}
.card-waitlist__form{margin-top:14px;padding:16px;border:1px solid var(--hairline);border-radius:12px;background:var(--chalk)}
/* round 2 (WP-E, JUDGE 3, C notes 4.1): the list is ul.wrap.program-strip__list; resetting its margin and padding
   cancelled .wrap's centring and gutter, so the first tile ran to x=0 under the desktop rail (price clipped).
   Only the block axis is reset now; a list outside .wrap still drops the default list indent. */
.program-strip__list{display:grid;gap:14px;margin-block:0;padding-block:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.program-strip__list:not(.wrap){margin-inline:0;padding-inline:0}
.band.program-strip{padding-block:clamp(28px,4vw,56px)}
.program-tile{margin:0;padding:18px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--line)}
.program-tile__title{margin:0 0 6px;font:700 18px/1.3 var(--ff-display)}
.program-tile__price{font:600 14px/1.3 var(--ff-num);font-stretch:var(--num-stretch)}
.program-tile__meta{font-size:14px;color:var(--text-2)}
/* the registration hub status board */
.status-board__cols{display:grid;gap:20px}
@media (min-width:900px){.status-board__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.status-board__col{padding:20px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--line)}
.status-board__col>h2,.status-board__col>h3{font-size:22px}
.status-board__rows,.suggest-rows,.special__rows,.specials__list,.program-list{margin:0;padding:0;list-style:none}
/* a wrapping row, not a two-column grid (post-build fix: a wide pill, "Opens January 22, 2027", took the grid's
   auto column in a narrow card and squeezed the title to 0px). Title and pill share the first line when they fit;
   the program has a line of its own; the price and the action follow, each wrapping whole. */
.board-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;padding:12px 0;border-top:1px solid var(--hairline)}
.board-row>*{margin:0}
.board-row__title{flex:1 1 9em;min-width:0;font-weight:600}
.board-row>.pill{flex:none;max-width:100%}
.board-row__program{flex:1 0 100%;order:3;font-size:14px;color:var(--text-2)}
.board-row__from,.board-row__spots{order:4;font:500 13px/1.3 var(--ff-mono);font-stretch:var(--mono-stretch);color:var(--text-2)}
.board-row__action{order:5;font-weight:600}
/* the optional course image from the admin (courses.image_media_id) */
.course-card__media{--cp:calc(-1 * clamp(20px,2.4vw,28px));display:block;margin:var(--cp) var(--cp) 16px;overflow:hidden;border-radius:var(--r-lg) var(--r-lg) 0 0;aspect-ratio:16/9;background:var(--chalk-2)}
.course-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.specials__list{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.special{margin:0}
.special__from{font:600 14px/1.3 var(--ff-num);font-stretch:var(--num-stretch)}
.steps{display:grid;gap:12px 28px;margin:0;padding:0;list-style:none}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{display:flex;gap:12px;margin:0;font-size:15px;line-height:1.45}
.steps__num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--edge);border-radius:50%;font:600 12px/1 var(--ff-num)}
/* other-city status pages and camp */
.status-banner-band{padding-block:clamp(40px,7vw,88px) clamp(24px,4vw,40px)}
.status-banner__city{margin:0 0 .25em;font:italic 800 clamp(40px,6vw,84px)/.98 var(--ff-display);font-stretch:112.5%;letter-spacing:-.02em}
.status-banner__title{margin:0 0 .4em;font-size:clamp(26px,3.2vw,40px)}
.status-banner__sentence{max-width:52ch;font-size:clamp(18px,1.5vw,21px)}
.status-banner__note{color:var(--muted)}
.status-banner .pill{margin-bottom:14px}
.waitlist-panel{padding:22px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--line)}
.program-list>li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;padding:10px 0;border-top:1px solid var(--hairline)}
.program-list__name{font-weight:600}
.program-list__price{font:500 13px/1.3 var(--ff-num);font-stretch:var(--num-stretch);color:var(--text-2)}
.week-strip table{min-width:640px}
.week-strip .week-cell--full{background-image:repeating-linear-gradient(115deg,var(--hatch) 0 2px,transparent 2px 6px)}
.week-strip .week-cell--open{font-weight:600}
.price-chips{margin-top:16px}
.timeline{position:relative;margin:0;padding:0 0 0 28px;list-style:none}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--court)}
.timeline li{position:relative;margin:0 0 10px}
.timeline li::before{content:"";position:absolute;left:-24px;top:.75em;width:12px;height:2px;background:var(--court)}
.timeline__time{display:inline-block;min-width:4.6em;font:600 13px/1.3 var(--ff-mono);font-stretch:var(--mono-stretch)}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 1em;padding:0;list-style:none;font:400 14px/1.5 var(--ff-mono);font-stretch:var(--mono-stretch);color:var(--muted)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 1.2em;padding:0;list-style:none}
.stat{margin:0;padding:14px;border:1px solid var(--hairline);border-radius:12px;background:var(--line)}
.stat strong,.stat b,.stat dt{display:block;font:600 clamp(22px,2.2vw,30px)/1.1 var(--ff-num);font-stretch:var(--num-stretch)}
.facts-band{padding:22px;border-radius:var(--r-lg);background:var(--chalk-2)}
.facts-band__lead{font:italic 800 clamp(20px,2vw,26px)/1.3 var(--ff-display);font-stretch:112.5%}
.cta-state{margin:1.2em 0}
.cta-state__date{font:600 14px/1.4 var(--ff-mono)}
.cta-state__note{font-size:14px;color:var(--muted)}
/* locations pages */
/* round 2 (WP-E, JUDGE 3): the switch is nav.season-switch.wrap > ul > li > a. The old margin shorthand cancelled
   .wrap's centring (the links sat 38px left of the column) and nothing reset the list (it rendered as bullets) */
.season-switch{margin-block:0 22px}
.season-switch ul,.season-switch ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.season-switch li{margin:0}
.season-switch+.band{padding-top:clamp(24px,3vw,40px)}
.season-switch a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--edge);border-radius:999px;font:700 14px/1 var(--ff-display);text-decoration:none}
.season-switch a[aria-current]{border-color:var(--ink);background:var(--ink);color:var(--line)}
.venue{display:grid;gap:4px 28px;margin:0;padding:22px 0;border-top:1px solid var(--hairline)}
@media (min-width:900px){.venue:has(.venue__photo){grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.venue__photo{grid-row:1/span 8}}
.venue>*{margin:0}
/* round 2 (WP-E, JUDGE 3): the status pill is a grid child of .venue and stretched across the whole row */
.venue>.pill{justify-self:start}
.venue__photo{overflow:hidden;border-radius:12px}
.venue__city{font:600 12px/1.3 var(--ff-label);font-stretch:var(--label-stretch);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.venue__name{font:700 20px/1.3 var(--ff-display)}
.venue__address,.venue__programs,.venue__season{font-size:15px;color:var(--text-2)}
.venue__links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.venue-map__frame{display:block;width:100%;aspect-ratio:16/9;margin-top:12px;border:0;border-radius:12px}
/* the pathway page: a sticky ladder spine and the rung sections */
.pathway__layout{display:grid;gap:40px}
@media (min-width:900px){.pathway__layout{grid-template-columns:220px minmax(0,1fr)}.ladder-spine{position:sticky;top:calc(var(--head-h) + 24px);align-self:start}}
.ladder-host.pathway__layout{position:relative}
.ladder-spine ol,.ladder-spine ul{position:relative;margin:0;padding:0 0 0 22px;list-style:none;border-left:2px solid var(--court)}
.ladder-spine li{margin:0}
.ladder-spine a{display:flex;align-items:baseline;gap:10px;min-height:34px;padding:4px 0;font-size:14px;text-decoration:none}
.ladder-spine a:hover{text-decoration:underline}
.ladder-spine a.hit{font-weight:600}
.pathway__layout>.ladder__ball{display:none}
.rung-group{margin:0 0 36px}
section.rung{padding:16px 0;border-top:1px solid var(--hairline)}
section.rung .rung__focus{color:var(--text-2)}
/* round 2 (WP-A, NEW-COPY.md 5): the page head photo, the fact strip, the jump links, the tier subtitles,
   the certificates (the video beside the text from 900px, above it on phones) and the legal note */
.page-head--pathway .pathway-head__photo{margin:22px 0 0;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:16/9;background:var(--chalk-2)}
.page-head--pathway .pathway-head__photo picture,.page-head--pathway .pathway-head__photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .page-head--pathway .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:clamp(32px,4vw,64px);align-items:start}
  .page-head--pathway .wrap>*{grid-column:1}
  .page-head--pathway .wrap>.pathway-head__photo{grid-column:2;grid-row:1 / span 4;margin:0;align-self:center}
}
.pathway-overview{padding-block:clamp(24px,4vw,40px)}
.fact-strip{display:grid;gap:12px;margin:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.fact-strip>div{padding:14px 18px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--line)}
.fact-strip dt{margin:0 0 4px;font:600 12px/1.3 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.fact-strip dd{margin:0;font:700 17px/1.35 var(--ff-display)}
.jump-links ul{display:flex;flex-wrap:wrap;gap:10px 12px;margin:20px 0 0;padding:0;list-style:none}
.jump-links li{margin:0}
.jump-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--border-ui);border-radius:999px;background:var(--line);font:600 15px/1.2 var(--ff-body);text-decoration:none}
.jump-links a:hover{text-decoration:underline}
.pathway-philosophy .prose{max-width:66ch}
.rung-group__sub{margin:-.1em 0 14px;font:500 15px/1.45 var(--ff-body);color:var(--text-2)}
.rung-group,#certificates{scroll-margin-top:calc(var(--head-h) + 16px)}
.certificates__layout{display:flex;flex-direction:column;gap:24px}
.certificates__layout>.cert-video{order:-1}
.certificates__sub{margin:-.2em 0 .9em;font:600 13px/1.3 var(--ff-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
@media (min-width:900px){
  .certificates__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:clamp(32px,5vw,72px);align-items:center}
  .certificates__layout>.cert-video{order:0}
}
.pathway-legal{padding-block:clamp(28px,4vw,48px)}
.pathway-legal__h{margin:0 0 .5em;font-size:clamp(20px,2vw,24px)}
.pathway-legal .legal-note{max-width:70ch;font-size:15px;line-height:1.55;color:var(--text-2)}
.pathway-legal .legal-note p{margin:0}
/* ICM 30 stages, the coach pathway, formats, embeds */
.stages,.stage-list{display:grid;gap:18px;margin:0 0 1.2em;padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.stage{margin:0;padding:20px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--line)}
.stage__price{font:600 14px/1.4 var(--ff-mono);font-stretch:87.5%}
.rungs{position:relative;display:grid;gap:14px;margin:0 0 1.2em;padding:0 0 0 28px;list-style:none}
.rungs::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--court)}
.rungs>li{position:relative;margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--line);box-shadow:0 0 0 1px var(--hairline)}
.rungs>li::before{content:"";position:absolute;left:-22px;top:24px;width:14px;height:2px;background:var(--court)}
.tuition{font:600 16px/1.4 var(--ff-mono);font-stretch:87.5%}
.formats__list{display:grid;gap:14px;margin:0;padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.format{margin:0;padding:18px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--line)}
.embed{margin:0 0 1.4em}
.embed iframe{display:block;width:100%;min-height:720px;border:0;border-radius:12px;background:var(--line)}
.embed__summary{margin-bottom:12px}
.embed__newtab{display:inline-block;margin-top:10px;font-size:14px}
.embed--password>summary{display:inline-flex;list-style:none}
.embed--password>summary::-webkit-details-marker{display:none}
.approval{margin:0 0 1.4em}
/* the calendar */
.cal-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 28px;margin:0 0 24px}
.cal-controls .link-row{gap:8px}
.cal-years a,.calendar .chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--border-ui);border-radius:999px;background:var(--line);font:600 14px/1 var(--ff-body);text-decoration:none}
.cal-years a[aria-current],.calendar .chips a[aria-current],.calendar .chips a[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--line)}
@media (pointer:coarse){.cal-years a,.calendar .chips a{min-height:44px}}
.cal-location{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.cal-location select{min-height:44px;padding:8px 36px 8px 12px;border:1px solid var(--border-ui);border-radius:var(--r);background:var(--line);font-size:16px}
.cal-layout{display:grid;gap:32px}
@media (min-width:1000px){.cal-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}.cal-grid{position:sticky;top:calc(var(--head-h) + 24px)}}
@media (max-width:699px){.cal-grid{display:none}}
.cal-month{width:100%;margin:0 0 24px;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.cal-month caption{padding-bottom:6px;text-align:left;font:700 18px/1.3 var(--ff-display)}
.cal-month th{font:600 11px/1.2 var(--ff-label);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.cal-month td{height:62px;padding:5px 6px;border:1px solid var(--hairline);border-radius:6px;background:var(--line);vertical-align:top;font:500 12px/1.3 var(--ff-mono);font-stretch:var(--mono-stretch)}
.cal-month td:empty{border:0;background:none}
.cal-day__num{font-weight:600}
.cal-day__label{display:block;margin-top:4px;font-size:10px;line-height:1.2}
.cal-month .is-closure,.cal-month .cal-day--closure{background-image:repeating-linear-gradient(115deg,var(--hatch) 0 2px,transparent 2px 6px)}
.cal-month .is-today,.cal-month .cal-day--today{box-shadow:inset 0 0 0 2px var(--ink)}
.cal-list h2{margin-top:1.2em;font-size:clamp(22px,2.2vw,30px)}
.cal-items{margin:0 0 24px;padding:0;list-style:none}
.cal-item{display:grid;grid-template-columns:8em minmax(0,1fr);gap:2px 18px;margin:0;padding:14px 0;border-top:1px solid var(--hairline)}
.cal-item>*{grid-column:2;margin:0}
.cal-item__date{grid-column:1;grid-row:1/span 6;font:600 13px/1.4 var(--ff-mono);font-stretch:var(--mono-stretch)}
.cal-item__title{font-size:18px}
.cal-tag{display:inline-flex;width:fit-content;padding:2px 9px;border:1px solid var(--border-ui);border-radius:999px;background:var(--chalk-2);font:600 11px/1.5 var(--ff-mono);font-stretch:var(--mono-stretch)}
.cal-item--closure .cal-tag:first-of-type{background-image:repeating-linear-gradient(115deg,var(--hatch) 0 2px,transparent 2px 6px)}
.cal-item__where,.cal-item__notes{font-size:14px;color:var(--text-2)}
.cal-item__actions{font-size:14px}
@media (max-width:599px){.cal-item{grid-template-columns:1fr}.cal-item>*,.cal-item__date{grid-column:1;grid-row:auto}}
.cal-subscribe{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* contact, jobs, volunteer, search, certificates, thank you, news, posts, content pages */
.contact-card__name{margin:0 0 8px;font:700 20px/1.3 var(--ff-display)}
.contact-card__lines{margin:0 0 12px;padding:0;list-style:none;font:500 14px/1.7 var(--ff-mono);font-stretch:var(--mono-stretch)}
.contact-venues .link-row{justify-content:center}
.job__where{font:500 13px/1.4 var(--ff-mono);color:var(--text-2)}
.job__apply{font-weight:600}
.jobs__coach{font-size:15px}
.faq-filter{max-width:420px;margin:0 0 22px}
.faq-group{margin:0 0 28px}
.faq-group>h2{font-size:clamp(24px,2.4vw,32px)}
.is-filtering .faq-group>h2{margin-top:.6em}
.search-group{margin-top:28px}
.search-group>h2{font-size:clamp(22px,2.2vw,30px)}
.search-results{margin:0;padding:0;list-style:none}
.search-result{margin:0;padding:14px 0;border-top:1px solid var(--hairline)}
.search-result__title{margin:0 0 .2em;font-size:18px}
.search-result__snippet{margin:0 0 .2em}
.search-result__path{margin:0;font:500 12px/1.4 var(--ff-mono);font-stretch:var(--mono-stretch);color:var(--muted)}
.search__empty,.search__players{margin-top:18px}
.cert-form{max-width:520px}
.field__input--mono,.cert-form input[type="text"]{font-family:var(--ff-mono)!important;font-stretch:87.5%;letter-spacing:.04em}
.cert-card{max-width:560px}
.cert-card__status{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;font:600 12px/1.3 var(--ff-label);letter-spacing:.08em;text-transform:uppercase}
.cert-card--valid .cert-card__status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.cert-card--revoked{background-image:repeating-linear-gradient(115deg,var(--hatch) 0 2px,transparent 2px 6px)}
.cert-card__name{margin:0 0 .3em;font-size:clamp(24px,2.6vw,32px)}
.cert-card__level{display:flex;align-items:center;gap:10px;font:600 14px/1.4 var(--ff-mono);font-stretch:var(--mono-stretch)}
.rung-marker{display:inline-block;width:22px;height:2px;background:var(--court)}
.cert-card__facts{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:14px 0 0;font-size:15px}
.cert-card__facts dt{font:600 12px/1.6 var(--ff-mono);color:var(--text-2)}
.cert-card__facts dd{margin:0}
.cert-result__message{font-weight:600}
.thanks__ball{position:relative;width:96px;height:64px;margin:0 0 18px}
.thanks__ball::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--ink)}
.thanks__ball .ball-glyph{position:absolute;left:36px;bottom:3px;width:24px;height:24px;animation:thanks 1.1s var(--ease-bounce) .2s both}
@keyframes thanks{0%{transform:translateY(-44px)}55%{transform:translateY(0) scale(1.12,.86)}72%{transform:translateY(-8px)}88%{transform:translateY(0) scale(1.03,.97)}100%{transform:none}}
.thanks__class{font:600 14px/1.4 var(--ff-mono);color:var(--muted)}
.thanks__lion{float:right;margin:0 0 12px 18px}
.thanks__lion img{width:auto;max-height:150px}
.news-list{display:grid;gap:22px;margin:0;padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.news-list>li{margin:0}
.pagination .link-row{justify-content:center;margin-top:28px}
.pagination a,.pagination [aria-current]{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 10px;border:1px solid var(--border-ui);border-radius:8px;text-decoration:none}
.pagination [aria-current]{border-color:var(--ink);background:var(--ink);color:var(--line)}
@media (pointer:coarse){.pagination a,.pagination [aria-current]{min-width:44px;min-height:44px}}
.post__featured{margin:0 0 28px;overflow:hidden;border-radius:var(--r-lg)}
.post__featured img{display:block;width:100%}
.post__body{margin-bottom:28px}
.gallery{margin:32px 0}
.gallery__row{display:flex;gap:10px;margin:0;padding:0 0 8px;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.gallery__item{flex:0 0 min(80%,420px);margin:0;scroll-snap-align:start}
.gallery__item img{display:block;width:100%;height:auto;border-radius:var(--r)}
.gallery-band .gallery__row .gallery__item{flex-basis:min(70%,320px)}
.post__next{margin-top:32px}
.share{display:flex;flex-wrap:wrap;gap:10px}
.more-news .news-grid{margin-top:12px}
.content-page .wrap:has(>.toc){display:grid;gap:36px}
@media (min-width:1000px){.content-page .wrap:has(>.toc){grid-template-columns:230px minmax(0,1fr)}.content-page .toc{position:sticky;top:calc(var(--head-h) + 24px);align-self:start}}
.content-page .toc ol,.content-page .toc ul{margin:0;padding:0;list-style:none;border-left:2px solid var(--court)}
.content-page .toc li{margin:0}
.content-page .toc a{display:block;padding:6px 0 6px 14px;font-size:15px;text-decoration:none}
.content-page .toc a:hover{text-decoration:underline}
.content-figure{margin:0 0 1.4em;overflow:hidden;border-radius:var(--r-lg)}
.content-figure img{display:block;width:100%}
.content-figure figcaption{padding:8px 0 0;font:400 13px/1.5 var(--ff-mono);color:var(--muted)}
.content-card{margin:0}
.content-cta{margin:1.4em 0}
/* W4's form engine */
.form-block{max-width:680px}
.form__errors-title{margin:0 0 .4em;font-weight:600}
.form__errors-list{margin:0;padding-left:1.1em}
.form__progress{margin:0;font:600 11px/1.2 var(--ff-label);font-stretch:var(--label-stretch);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.form__step{display:grid;gap:18px;min-width:0;margin:0;padding:0;border:0}
.form__step-title{padding:0;margin:0 0 4px;font:700 20px/1.3 var(--ff-display)}
.form__step-hint{margin:-10px 0 0;font-size:15px;color:var(--muted)}
.field-group{display:grid;gap:14px;min-width:0;margin:0;padding:0;border:0}
.field-group>legend{margin-bottom:8px}
.field--invalid .field__label{color:var(--red-ink)}
.band--court .field--invalid .field__label{color:var(--line)}
.choices{display:flex;flex-wrap:wrap;gap:8px 20px}
.choice{display:inline-flex;align-items:flex-start;gap:10px;min-height:32px;font-size:16px;cursor:pointer}
.choice input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink)}
.choice--single{display:flex}
@media (pointer:coarse){.choice{min-height:44px;align-items:center}}
.form__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.form__privacy{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.form__success-title{margin:.3em 0 0;font-weight:600}
.stepper{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.stepper li{width:16px;height:16px;margin:0;border:1.5px solid var(--fg);border-radius:50%;transition:background-color .3s var(--ease-out)}
.stepper .is-done{background:var(--fg)}
/* the gallery lightbox (site.js) */
.lightbox{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(var(--scrim),.94);color:var(--line)}
.lightbox::backdrop{background:rgba(var(--scrim),.6)}
.lightbox__fig{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;margin:0;padding:56px 64px}
.lightbox__img{max-width:100%;max-height:calc(100% - 40px);object-fit:contain}
.lightbox__cap{margin-top:10px;font-size:14px;color:var(--text-2-inv)}
.lightbox__btn,.lightbox__x{position:absolute;color:var(--line);--focus:var(--line)}
.lightbox__btn{top:50%;margin-top:-22px;background:rgba(var(--line-rgb),.1)}
.lightbox__prev{left:10px}.lightbox__prev .ico{transform:rotate(90deg)}
.lightbox__next{right:10px}.lightbox__next .ico{transform:rotate(-90deg)}
.lightbox__x{top:max(10px,env(safe-area-inset-top));right:10px}

/* ---------- 25. Forms (spec 5; markup by W4's Forms::render) ---------- */
.form{display:grid;gap:18px;max-width:640px}
.form fieldset{min-width:0;margin:0;padding:0;border:0}
.form legend{padding:0;margin-bottom:10px;font:700 18px/1.3 var(--ff-display)}
.field{display:grid;gap:6px}
.field__label,.field>label{font:600 15px/1.35 var(--ff-body)}
.field__hint{margin:0;font-size:14px;color:var(--muted)}
.field__error{margin:0;font-size:14px;font-weight:600;color:var(--red-ink)}
.field__error:empty{display:none}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.field select,.field textarea,.finder__nojs select{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--border-ui);border-radius:var(--r);background:var(--line);color:var(--ink);font:400 16px/1.4 var(--ff-body);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:128px;resize:vertical}
.field select,.finder__nojs select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2317161a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.field [aria-invalid="true"]{border-color:var(--red-ink);box-shadow:0 0 0 1px var(--red-ink)}
.field input[type="file"]{font-size:15px}
.check,.field--check{display:flex;align-items:flex-start;gap:10px}
.field input[type="checkbox"],.field input[type="radio"],.check input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink)}
.band--court .field input[type="checkbox"],.band--ink .field input[type="checkbox"]{accent-color:var(--line)}
.choices{display:flex;flex-wrap:wrap;gap:8px 18px}
.form__errors{padding:14px 16px;border-left:4px solid var(--red-ink);border-radius:6px;background:var(--line);color:var(--ink);--focus:var(--red)}
.form__errors ul{margin:0;padding-left:1.1em}
.form__errors a{color:var(--red-ink);font-weight:600}
.form__success{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:var(--r-lg);background:var(--line);color:var(--ink)}
.form__success p{margin:.4em 0 0}
.tick{flex:none;width:40px;height:40px}
.tick circle{fill:none;stroke:var(--red);stroke-width:2;stroke-dasharray:117;stroke-dashoffset:117;animation:tick-c .6s var(--ease-out) forwards}
.tick path{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:tick-p .4s var(--ease-out) .45s forwards}
@keyframes tick-c{to{stroke-dashoffset:0}}
@keyframes tick-p{to{stroke-dashoffset:0}}
.hp,.form .hp,.field--hp,.form__hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.privacy-line{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.form .btn[type="submit"]{justify-self:start}
@media (max-width:479px){.form .btn[type="submit"]{justify-self:stretch}}

/* ---------- 25b. ICM's own registration (v3 step 3): /register/{course}/ and its status pages ---------- */
.reg__wrap{display:grid;gap:28px;align-items:start}
@media (min-width:960px){.reg__wrap{grid-template-columns:minmax(0,1fr) 340px;gap:40px}.reg__sum{position:sticky;top:calc(var(--header-h,72px) + 16px)}}
.reg__form{max-width:none;gap:22px}
.reg__step{display:grid;gap:16px;padding:22px 20px!important;border:1px solid var(--edge)!important;border-radius:var(--r-lg);background:var(--line)}
.reg__step>legend{float:left;width:100%;display:flex;align-items:center;gap:10px;margin:0 0 4px;font:700 20px/1.25 var(--ff-display)}
.reg__step>legend+*{clear:both}
.reg__n{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--court);color:var(--line);font:700 15px/1 var(--ff-body)}
.reg__class{margin:0;color:var(--muted)}
.reg__class strong{color:var(--ink)}
.reg__row{display:grid;gap:16px}
@media (min-width:600px){.reg__row{grid-template-columns:1fr 1fr}}
.reg__options{display:grid;gap:8px}
@media (min-width:600px){.reg__options--times{grid-template-columns:1fr 1fr}}
.reg__opt{position:relative;display:flex;align-items:flex-start;gap:10px;min-height:48px;padding:12px 14px;border:1.5px solid var(--edge);border-radius:var(--r);background:var(--line);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.reg__opt:hover{border-color:var(--ink)}
.reg__opt:has(input:checked){border-color:var(--court);box-shadow:0 0 0 1px var(--court)}
.reg__opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.reg__opt input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--court)}
.reg__opt>span{display:grid;gap:3px;font:500 15px/1.35 var(--ff-body)}
.reg__opt.is-full{background-image:repeating-linear-gradient(115deg,var(--hatch) 0 2px,transparent 2px 6px)}
.reg__time[hidden]{display:none}
.reg__full{font-style:normal;font-weight:700;color:var(--muted)}
.spots{font:700 13px/1.2 var(--ff-body);font-style:normal;color:var(--muted)}
.reg__wait{display:grid;gap:10px;padding:16px;border-left:4px solid var(--yellow);border-radius:var(--r);background:rgba(var(--yellow-rgb),.14)}
.reg__wait p{margin:0}
.reg__wait[hidden],.reg__alt[hidden]{display:none}
.reg__alt ul{margin:6px 0 0;padding-left:1.1em}
.reg__alt a{font-weight:700;color:var(--ink)}
.reg__agree{display:grid;gap:8px;padding:12px 14px;border-radius:var(--r);background:var(--chalk);border:1px solid var(--edge)}
.reg__agree p{margin:0;font-size:14px;line-height:1.55}
.reg__agree.field--invalid{border-color:var(--red-ink)}
.reg__card{display:grid;gap:12px;padding:22px 20px;border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--line);box-shadow:0 10px 30px rgba(var(--ink-rgb),.08)}
.reg__sum-h{margin:0;font:700 20px/1.25 var(--ff-display)}
.reg__sum-sub{margin:-6px 0 4px;color:var(--muted);font-size:14px}
.reg__line,.reg__total{display:flex;justify-content:space-between;gap:12px;margin:0;font-size:14px}
.reg__line span{color:var(--muted)}
.reg__total{padding-top:10px;border-top:1px solid var(--edge);font-size:18px;font-weight:700}
.reg__then{margin:6px 0 0;font-size:13px;color:var(--muted)}
.reg__q[hidden],[data-sum-enrol][hidden],[data-sum-wait][hidden]{display:none}
.reg__pay{width:100%;justify-content:center;min-height:52px;font-size:16px}
.reg__wallets{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.wallet{padding:4px 10px;border:1.5px solid var(--ink);border-radius:6px;font:700 12.5px/1.2 var(--ff-body);color:var(--ink)}
.reg-status__card{max-width:640px}
.reg-status__dl{display:grid;gap:10px;margin:0}
.reg-status__dl>div{display:grid;grid-template-columns:120px 1fr;gap:12px}
.reg-status__dl dt{color:var(--muted)}
.reg-status__dl dd{margin:0}
.reg-status__help{margin:6px 0 0;font-size:14px;color:var(--muted)}
/* spots left (client, 2026-10-08): green above 5, orange 3 to 5, purple 1 or 2, red when full (Enrol::urgency) */
.spots--many{color:var(--win)}
.spots--few{color:var(--orange)}
.spots--last{color:var(--low)}
.spots--full{color:var(--court)}
.chip.chip--many{border-color:var(--win);background:var(--win-bg);color:var(--win)}
.chip.chip--many .chip__dot{background:var(--win)}
.chip.chip--few{border-color:var(--orange);background:var(--orange-bg);color:var(--orange)}
.chip.chip--few .chip__dot{background:var(--orange)}
.chip.chip--last{border-color:var(--low);background:var(--low-bg);color:var(--low)}
.chip.chip--last .chip__dot{background:var(--low)}
.chip.chip--full{border-color:var(--court);background:var(--red-bg);background-image:none;color:var(--court)}
.chip.chip--full .chip__dot{background:none;border:1.5px solid var(--court)}
.reg__opt.is-full{background:var(--red-bg);background-image:none;border-color:var(--court)}
.reg__opt.is-full .spots--full{color:var(--court)}
@media (min-width:600px){.reg__options--months{grid-template-columns:repeat(3,minmax(0,1fr))}}
.reg__soon{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--win)}
/* by invitation or access code (client, 2026-10-19): how to register, the code, and "Ask how to register" */
.reg-gate__in{display:grid;gap:20px;align-items:start}
@media (min-width:900px){.reg-gate__in{grid-template-columns:1fr 1fr}.reg-gate__ask{grid-column:1/-1}}
.reg-gate .steps{display:grid;grid-template-columns:1fr;gap:12px;margin:4px 0 8px}
.reg-gate .steps li{display:flex;align-items:flex-start;gap:10px;max-width:none}
.reg-gate .steps a{white-space:nowrap}
.reg-gate__code{display:grid;gap:12px;max-width:none}
.reg-gate__code input{text-transform:uppercase;letter-spacing:.08em}
.reg__price{margin:0;font-weight:700;color:var(--ink)}
.reg__when{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--text-2,var(--muted))}
/* terms as on JotForm (client 2026-10-22): a heading, each policy with its title and a tick, the Client Agreement in a scroll box */
.reg__terms-h{margin:0 0 4px;font:700 19px/1.3 var(--ff-body);color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--edge)}
.reg__agree-t{margin:0;font-weight:700;color:var(--ink)}
.reg__agree-t .req,.reg__doc-tick .req{color:var(--red-ink)}
.reg__agree-c{align-items:flex-start;gap:10px}
.reg__agree-c>span{font-size:15px;line-height:1.5;color:var(--ink)}
.reg__doc-tick>span{font-weight:700;text-transform:none;letter-spacing:.01em}
.reg__doc{max-height:240px;overflow:auto;padding:12px 14px;border:1px solid var(--edge);border-radius:var(--r);background:var(--line);white-space:pre-line;font-size:14.5px;line-height:1.55;color:var(--ink)}
.reg__doc:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* ---------- 25c. The family portal and the Attendance Journey (v3 step 4) ---------- */
.portal .wrap{display:grid;gap:18px}
.portal__login{max-width:520px}
.portal__h{margin-top:18px}
.portal__grid{display:grid;gap:14px}
@media (min-width:700px){.portal__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jcard{display:flex;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--line);color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.jcard:hover{border-color:var(--court);box-shadow:0 8px 24px rgba(var(--ink-rgb),.08)}
.jcard:hover .jcard__cta,.jcard:focus-visible .jcard__cta{background:var(--red-press)}
.jcard:hover .jcard__cta svg{transform:translateX(3px)}
.portal__lead{margin:-6px 0 0;color:var(--muted);max-width:60ch}
.jcard__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:6px;padding-top:10px;border-top:1px solid var(--edge)}
.jcard__earned{font-size:14px;font-weight:600}
.jcard__cta{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;background:var(--red-field);color:var(--line);font-weight:700;font-size:14px;transition:background .15s}
.jcard__cta svg{transition:transform .15s}
@media (prefers-reduced-motion:reduce){.jcard__cta svg{transition:none}}
@media (max-width:480px){.jcard{padding:14px;gap:12px;align-items:flex-start}.jcard__badge,.jcard__badge img{width:76px;height:76px}.jcard__badge .jring{transform:scale(.8)}.jcard__cta{width:100%;justify-content:center}}
.jcard__badge{flex:none;width:112px;height:112px;display:grid;place-items:center}
.jcard__badge img{width:112px;height:112px;object-fit:contain}
.jcard__body{display:grid;gap:6px;min-width:0;flex:1}
.jcard__name{font:700 20px/1.2 var(--ff-display)}
.jcard__title{font-weight:600}
.jcard__line{font-size:14px;color:var(--muted)}
.jbar{display:block;height:10px;border-radius:999px;background:var(--hatch);overflow:hidden}
.jbar>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--court),var(--yellow))}
.jbar--big{height:14px}
.jring{--p:0%;position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--court) var(--p),var(--hatch) 0)}
.jring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--line)}
.jring b,.jring small{position:relative;line-height:1}
.jring b{font:700 30px/1 var(--ff-display);margin-top:6px}
.jring small{font-size:12px;color:var(--muted);margin-top:-18px}
.jring--big{width:180px;height:180px}
.jring--big::before{inset:14px}
.jring--big b{font-size:54px}
.portal__list{display:grid;gap:8px}
.portal__row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:12px 14px;border:1px solid var(--edge);border-radius:var(--r);background:var(--line)}
.portal__row.is-past{opacity:.7}
.portal__sub{display:block;font-size:14px;color:var(--muted)}
.portal__paid{font-size:14px;color:var(--muted)}
@media (min-width:700px){.portal__row{grid-template-columns:1fr auto auto auto}}
.portal__credit{padding:12px 14px;border-left:4px solid var(--yellow);background:rgba(var(--yellow-rgb),.14);border-radius:var(--r)}
.portal__updates{display:grid;gap:14px}
@media (min-width:900px){.portal__updates{grid-template-columns:repeat(2,minmax(0,1fr))}}
.portal__update h3{margin:0;font:700 20px/1.25 var(--ff-display)}
.portal__out{margin-top:10px}
.journey__hero{display:grid;gap:18px;align-items:center;text-align:center}
@media (min-width:800px){.journey__hero{grid-template-columns:240px 1fr 160px;text-align:left}}
.journey__now{display:grid;place-items:center}
.journey__now img{width:220px;height:220px;object-fit:contain}
.journey__text{display:grid;gap:8px}
.journey__text h2{margin:0;font:700 34px/1.1 var(--ff-display)}
.journey__total{margin:0;font-size:18px}
.journey__total b{font:700 28px/1 var(--ff-display);color:var(--court)}
.journey__line{margin:0;font-weight:600}
.journey__next{display:grid;justify-items:center;gap:4px;color:var(--muted);font-size:14px}
.journey__next p{margin:0}
.journey__next img{width:96px;height:96px;object-fit:contain;opacity:.55;filter:grayscale(.35)}
.journey__gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.jgal{display:grid;justify-items:center;gap:4px;padding:12px 8px;border:1px solid var(--edge);border-radius:var(--r);background:var(--line);text-align:center}
.jgal img{width:84px;height:84px;object-fit:contain}
.jgal__name{font-weight:700;font-size:14px}
.jgal__n{font-size:12px;color:var(--muted)}
.jgal--current{border-color:var(--court);box-shadow:0 0 0 2px var(--court)}
.jgal--locked img{filter:grayscale(1);opacity:.28}
.jgal--locked .jgal__name{color:var(--muted)}
.journey__hist{width:100%;border-collapse:collapse;font-size:15px}
.journey__hist th,.journey__hist td{padding:10px 8px;border-bottom:1px solid var(--edge);text-align:left}
.table-scroll{overflow-x:auto}
/* the small profile badge, 40 to 56 px, with its name on hover or tap */
.jchip{--js:48px;position:relative;display:inline-grid;place-items:center;width:var(--js);height:var(--js);vertical-align:middle;border-radius:50%;outline-offset:2px}
.jchip img{width:var(--js);height:var(--js);object-fit:contain}
.jchip--none .jchip__ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--court) var(--p),var(--hatch) 0)}
.jchip--none .jchip__ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--line)}
.jchip__n{position:relative;font:700 14px/1 var(--ff-body)}
.jchip[data-tip]:hover::after,.jchip[data-tip]:focus::after{content:attr(data-tip);position:absolute;z-index:5;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:240px;padding:6px 10px;border-radius:8px;background:var(--ink);color:var(--line);font:600 12.5px/1.35 var(--ff-body);white-space:normal}
/* the celebration */
.jcele{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(var(--ink-rgb),.62)}
.jcele[hidden]{display:none}
.jcele__card{position:relative;display:grid;justify-items:center;gap:8px;max-width:440px;padding:28px 22px;border-radius:var(--r-lg);background:var(--line);text-align:center;overflow:hidden;animation:jcele-in .5s var(--ease-out,ease-out)}
.jcele__card h2{margin:0;font:700 28px/1.15 var(--ff-display)}
.jcele__card p{margin:0}
.jcele__badge{position:relative;width:200px;height:200px;object-fit:contain;animation:jcele-badge 1.1s var(--ease-out,ease-out)}
.jcele--special .jcele__card{border:3px solid var(--yellow);box-shadow:0 0 0 6px rgba(var(--yellow-rgb),.35)}
.jcele--special .jcele__badge{width:240px;height:240px}
.jcele__confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@keyframes jcele-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes jcele-badge{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{transform:scale(1.08) rotate(3deg);opacity:1}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.jcele__card,.jcele__badge{animation:none}.jcele__confetti{display:none}}
/* ---------- 25d. Step 5: the portal bell, certificates, ranking circles, referral card (v3) ---------- */
.pbar{display:flex;align-items:center;justify-content:flex-end;gap:6px 14px;flex-wrap:wrap}
.pbar form{margin:0}
.pbar__link{padding:8px 4px;border:0;background:none;color:var(--ink);font:600 15px/1.2 var(--ff-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pbar__bell{position:relative;display:inline-grid;place-items:center;width:46px;height:46px;border:1.5px solid var(--edge);border-radius:50%;color:var(--ink);background:var(--line)}
.pbar__bell.has-new{border-color:var(--court);color:var(--court)}
.pbar__n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--court);color:var(--line);font:700 12px/20px var(--ff-body);text-align:center}
.pnotes{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pnote{padding:14px 16px;border:1px solid var(--edge);border-radius:var(--r);background:var(--line)}
.pnote.is-new{border-left:4px solid var(--court)}
.pnote__meta{margin:0;font-size:13px;color:var(--muted)}
.pnote__t{margin:4px 0 6px;font:700 19px/1.25 var(--ff-display)}
.pnote p{margin:0 0 6px}
.jcele--note .jcele__card{text-align:left;justify-items:start}
.pcerts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pcert{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--edge);border-radius:var(--r);background:var(--line)}
.prank{display:grid;gap:10px;margin-bottom:12px}
.prank__h{margin:0;font:700 20px/1.2 var(--ff-display)}
.prank__rec{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-weight:600}
.prank__signup>summary{list-style:none;display:inline-flex;cursor:pointer}
.prank__signup>summary::-webkit-details-marker{display:none}
.prank__signup[open]>summary{margin-bottom:12px}
.pref{border-left:4px solid var(--yellow)}
.pref__link{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pref__link code{padding:6px 10px;border-radius:6px;background:var(--chalk);border:1px solid var(--edge);font-size:14px;word-break:break-all}
.rk-form{display:inline-flex;gap:4px;vertical-align:middle;margin-left:8px}
.rk-form__c{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 11px/1 var(--ff-body);color:var(--line)}
.rk-form__c--w{background:var(--win)}
.rk-form__c--l{background:var(--court)}
.rk-form__c--d{background:var(--muted)}
.prose #key-takeaways,.prose #key-takeaways+ul{box-sizing:border-box;width:100%;max-width:680px}
.prose #key-takeaways{margin:0;padding:16px 20px 4px;border-left:4px solid var(--yellow);border-radius:var(--r) var(--r) 0 0;background:rgba(var(--yellow-rgb),.12);font-size:20px}
.prose #key-takeaways+ul{margin:0 0 28px;padding:4px 20px 16px 40px;border-left:4px solid var(--yellow);border-radius:0 0 var(--r) var(--r);background:rgba(var(--yellow-rgb),.12)}
/* ---------- 235. Direction C, "Bold court": the component layer (V2-PLAN 8.3, CD1, JUDGE section 5) ----------
   Written into assets/css/src/235-direction.css by _dev/apply-direction.php --direction=c. It follows every base
   part, so its rules win ties; it is the one part besides 010-tokens.css where a colour literal is allowed (the
   literals left here are shadow tints and the images of section 17). Ported from
   review/v2/directions/c-bold-court/theme.css onto the round 2 tokens and onto class names that exist after WP00.
   Left out of the preview: the Google Fonts import (self-hosted, fonts.css), every photo set by menu position or by
   template (menus and page heads take their photos from admin fields: WP-H, WP-E2), the ball-colour legend rules
   (the content is gone) and the three layout repairs (now in the base parts, every direction gets them).
   JUDGE grafts: 1 upright headings, capitals only for six words or fewer (tokens), italic only for the CTA label
   and the hero caption lines; 2 certificate gold for achievements only; 3 phone menu photo chips (styles for
   WP-H's markup); 4 the finder level column in court green; 6 an opaque header on scroll. WP-E2 styles the round 2
   components (menu cards, footer builder, slider, certificate toggle, pathway fact strip, program page) in wave 3. */

/* ---------- 2. Base type ---------- */
html{background:var(--chalk)}
body{font-size:17px;line-height:1.62}
.hall{background:var(--chalk)}
.hall i{display:none}
.hall::after{opacity:.025}
h1,h2,h3,h4,.h1,.h2,.h3{font-family:var(--ff-display);font-stretch:normal}
/* graft 1: one size and one line height for every h1 and h2, short or long. Only the letter case follows the
   .hd-short / .hd-long class (capitals for six words or fewer), and the server prints that class
   (Fonts::classifyHeadings in the layout), so nothing changes size when site.js runs; the line height leaves room
   for the descenders of long titles, which keep sentence case */
h1,.h1{line-height:1;font-size:clamp(42px,5.4vw,84px)}
h2,.h2{line-height:1.02;font-size:clamp(34px,4vw,60px)}
h3,.h3{font-style:normal;font-weight:800;letter-spacing:.005em;line-height:1.08;font-size:clamp(23px,1.9vw,28px)}
h4{font-weight:800;font-size:21px;line-height:1.15}
strong,b{font-weight:800}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;font-weight:500}
/* graft 1: italic only for the CTA label and the hero caption lines (fonts.json "italicOnly"). The base parts set
   italic on these display lines too; C sets them upright, in its own display voice */
.pull,.pull-line,.facts-band__lead{font-style:normal;font-stretch:normal;letter-spacing:.01em}
.status-banner__city{font-style:normal;font-stretch:normal;letter-spacing:.005em}
a:hover{text-decoration-color:currentColor}
::selection{background:var(--red-field);color:var(--line)}

/* eyebrows: the display face in capitals, a solid bar instead of the cross; red on light, white on every field */
.kicker{gap:12px;margin-bottom:16px;color:var(--red-press);font:600 16px/1.2 var(--ff-label);letter-spacing:.09em}
.kicker::before{width:30px;height:5px;border-radius:3px;background:currentColor}
.band--ink .kicker,.band--court .kicker,.band--court-deep .kicker,.on-dark .kicker,.finder .kicker,.page-head .kicker,
.director .kicker,.closing-band .kicker,.site-footer .kicker,.finder-band .kicker,.film-stages .kicker{color:var(--line)}

/* the old mono roles: labels in Barlow 600 capitals (a size larger), numbers in Barlow 800 with tabular figures,
   data in Nunito */
.mega__title,.menu-group__title,.site-footer__h,.ladder__label,.toc-mark,.finder__progress,.finder__count,.fresult__label,
.rail__tip,.rail__chip,.linebar__labels,.course-card__group,.venue-row__city,.venue__city,.age-card__age,.rk-panel__title,
.table-wrap thead th,.rk-table thead th,.cal-month th,.form__progress,.cert-card__status,.stamp,.hero__skip,.hero__cue,
.preview-bar,.chip-scrim,.news-card__date,.quote__program{font-family:var(--ff-label);font-weight:600;letter-spacing:.07em;font-stretch:normal}
.rail__tip,.rail__chip,.linebar__labels,.stamp,.finder__count,.finder__progress,.fresult__label,.form__progress{font-size:13px}
.scorecard dt,.stat strong,.stat b,.stat dt,.rk-rank__n,.rk-pts,.age-card__price,.tile .tile__price,.program-tile__price,.stage__price,
.tuition,.special__from,.fresult__price,.course-card__price,.cal-item__date,.cal-day__num,.steps__num,.program-list__price{font-family:var(--ff-num);font-weight:800;font-stretch:normal;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em}
.facts,.course-card__facts,.rk-facts,.board-row__from,.board-row__spots,.contact-card__lines,.crumbs,
.page-head__meta,.slot,.chip,.rung__dur,.rung__time,.timeline__time,.job__where,.search-result__path,.cal-month td,.cal-tag,
.prose figcaption,.content-figure figcaption,.director__photo figcaption,.court-card__date,.rk-move,.rk-yours,.rk-chip,.pill,
.cert-card__level,.cert-card__facts dt,.thanks__class,.cta-state__date{font-family:var(--ff-body);font-stretch:normal;letter-spacing:.01em}
.facts,.course-card__facts{font-size:15px}
.pill{font-weight:700;font-size:12.5px;min-height:26px;padding:3px 11px 3px 10px}

/* ---------- 3. Colour fields: the shared roles of every dark or red surface ---------- */
.band--ink,.band--court,.band--court-deep,.on-dark,.director,.page-head,.page-head--ink,.closing-band,.finder-band,.film-stages,.site-footer,.rk-board{
  --fg:var(--line);--muted:var(--text-2-inv);--focus:var(--line);--link-line:rgba(var(--line-rgb),.6);--edge:rgba(var(--line-rgb),.55);
  --pill-bg:rgba(var(--line-rgb),.12);--pill-fg:var(--line);--pill-edge:rgba(var(--line-rgb),.55);--hatch:rgba(var(--line-rgb),.16);--rule:var(--rule-dark);color:var(--fg)}
/* red fields: every line is white (a blush tint measured 4.21:1), pills darken instead of lighten */
.page-head,.page-head--ink,.closing-band,.pathway.band--court-deep,.newsletter.band--court{--muted:var(--line);--pill-bg:rgba(60,0,4,.26)}
.band--ink,.on-ink{background:var(--court-deep)}
.band--court{background:var(--court)}
.band--court-deep{background:var(--court-deep)}
.band--chalk2{background:var(--chalk-2)}
.band--ink .card,.band--court .card,.band--court-deep .card,.director .card,.page-head .card{--pill-bg:var(--chalk-2);--pill-fg:var(--ink);--pill-edge:var(--border-ui);--hatch:rgba(var(--court-rgb),.2);--rule:var(--hairline)}

/* ---------- 4. Buttons: pills in the display face; the CTA label is the one italic in the UI ---------- */
.btn{border-radius:999px;font:800 17px/1.1 var(--ff-display);letter-spacing:.05em;text-transform:uppercase;padding:.7em 1.5em;min-height:48px}
.btn--ink{--btn-bg:var(--court);--btn-fg:var(--line)}
.btn--ink:hover{--btn-bg:var(--court-deep)}
.btn--line{--btn-bg:var(--line);--btn-fg:var(--ink);box-shadow:inset 0 0 0 2px var(--border-ui)}
.btn--line:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.btn--cta,.btn--confirm{border-radius:999px;font:italic 800 21px/1 var(--ff-display);letter-spacing:.03em;padding:.62em 1.45em;min-height:52px;box-shadow:0 10px 22px -10px rgba(var(--red-rgb),.65)}
.btn--sm{min-height:40px;font-size:15px;padding:.45em 1.1em}
@media (pointer:coarse){.btn--sm{min-height:44px}}
/* on the greens the red CTA wears a 2px white ring (red on court 1.88:1, on night court 2.92:1) */
.band--ink .btn--cta,.band--court .btn--cta,.band--court-deep .btn--cta,.on-dark .btn--cta,.director .btn--cta,.finder .btn--cta,.finder .btn--confirm,
.finder-band .btn--cta,.site-footer .btn--cta,.rk-board .btn--cta,.mega__foot .btn--cta,.thumbbar .btn--cta,#menu-sheet .btn--cta,.sheet--finder .btn--cta,.sheet--finder .btn--confirm{box-shadow:0 0 0 2px var(--line)}
/* on red fields it turns into a white button with a red label (red on red would vanish, 1.19:1) */
.page-head .btn--cta,.closing-band .btn--cta,.pathway.band--court-deep .btn--cta,.newsletter.band--court .btn--cta,.page-head .btn--confirm{--btn-bg:var(--line);--btn-fg:var(--red-field);box-shadow:0 10px 22px -12px rgba(40,0,0,.6)}
.page-head .btn--cta:hover,.closing-band .btn--cta:hover,.pathway.band--court-deep .btn--cta:hover,.newsletter.band--court .btn--cta:hover{--btn-bg:var(--chalk-2)}
.band--ink .btn--ink,.band--court .btn--ink,.band--court-deep .btn--ink,.on-dark .btn--ink,.director .btn--ink,.page-head .btn--ink,.closing-band .btn--ink,.finder .btn--ink,#menu-sheet .btn--ink{--btn-bg:var(--line);--btn-fg:var(--ink)}
.band--ink .btn--line,.band--court .btn--line,.band--court-deep .btn--line,.on-dark .btn--line,.director .btn--line,.page-head .btn--line,.closing-band .btn--line,.finder .btn--line,#menu-sheet .btn--line{--btn-bg:transparent;--btn-fg:var(--line);box-shadow:inset 0 0 0 2px rgba(var(--line-rgb),.75)}
/* stand-alone links: heavier, a red underline, an arrow that nudges on hover */
.link-more,.age-card__find,.news-card__more,.venue-row__directions a,.board-row__action,.tile__action{font-weight:800;text-decoration-thickness:2px;text-decoration-color:var(--red)}
.link-more::after,.age-card__find::after,.news-card__more::after{content:"\2192";display:inline-block;margin-left:.35em;text-decoration:none;transition:transform .2s var(--ease-out)}
.link-more:hover::after,.age-card__find:hover::after,.news-card__more:hover::after{transform:translateX(3px)}
.band--ink .link-more,.band--court-deep .link-more,.director .link-more,.page-head .link-more{text-decoration-color:var(--line)}

/* ---------- 6. Announcement bar ---------- */
.notice{background:var(--court-deep)}
.notice--red{background:var(--red-field)}
.notice__text{font-weight:600}

/* ---------- 7. Header: a warm white bar with a red court line, the menu in the display face ---------- */
/* graft 6: opaque once scrolled (headings used to ghost through the 97% frost) */
.site-header{background:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 30px -22px rgba(60,30,10,.5)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red);pointer-events:none}
/* over the film and the still: a flat night-court frost (white on it 6.4:1 at 78% even over pure white) */
.site-header--home:not(.is-past),html.hero-scrub .site-header--home:not(.is-past){background:rgba(var(--court-deep-rgb),.78)}
.logo{box-shadow:none;border-radius:10px}
/* six top items (CD5 gives Programs its own): 16px capitals with 9px padding, one step smaller at each narrower
   breakpoint; the CTA label never under 19px (large text: white on ICM red is 4.17:1). The phone number shows in
   the masthead from 1360px, where the row has room (it is always in the mega foot and the footer), and from 1320px
   the header row may run to 1360px, wider than the 1200px content column. Checked from 920 to 1920px by
   v2-design.ps1 -Mode directions (the masthead sweep: no two links or buttons overlap, none off screen) */
.mainnav__btn,.mainnav__link{min-height:46px;padding:0 9px;border-radius:999px;font:600 16px/1 var(--ff-display);letter-spacing:.04em;text-transform:uppercase}
.mainnav__btn:hover,.mainnav__link:hover{background:var(--chalk-2)}
.mainnav__btn[aria-expanded="true"]{background:var(--red-field);color:var(--line)}
.site-header--home:not(.is-past) .mainnav__btn:hover,.site-header--home:not(.is-past) .mainnav__link:hover{background:rgba(var(--line-rgb),.14)}
.site-header--home:not(.is-past) .mainnav__btn[aria-expanded="true"]{background:var(--line);color:var(--court-deep)}
.masthead__phone{display:none;font:600 16px/1 var(--ff-display);letter-spacing:.03em}
.masthead__cta{font-size:19px;padding:.45em 1em;min-height:46px}
@media (min-width:1320px){.masthead__in{max-width:calc(1360px + var(--gl) + var(--gr))}}
@media (min-width:1360px){.masthead__phone{display:inline}}
@media (min-width:1600px){.mainnav__btn,.mainnav__link{font-size:17px;padding:0 11px}}
@media (max-width:1279px) and (min-width:901px){.mainnav__btn,.mainnav__link{padding:0 7px;font-size:15px;letter-spacing:.03em}}
@media (max-width:1199px) and (min-width:901px){.mainnav__btn,.mainnav__link{padding:0 6px;font-size:14px;letter-spacing:.02em}.masthead__cta{text-transform:none;padding:.45em .8em}}
@media (max-width:1049px) and (min-width:901px){.mainnav__btn,.mainnav__link{padding:0 5px;font-size:13.5px}}
.site-search{border-top-color:var(--hairline)}
.site-search input{border-radius:999px;border-width:2px}
/* panels: WP-H prints the photo cards (045-menu-cards.css); the typography and the green foot strip are C's */
.mainnav__panel{border:0;border-radius:var(--r-lg);box-shadow:0 30px 70px -20px rgba(40,20,5,.45),0 0 0 1px rgba(60,30,10,.06);background:var(--line)}
.mega{padding:0;overflow:hidden}
.mega__cols{padding:22px 24px 10px;gap:10px 22px}
.mega__title{margin:0 0 6px;padding:0;border:0;color:var(--ink);font:800 24px/1 var(--ff-display);letter-spacing:.03em;text-transform:uppercase}
.navlink{min-height:44px;padding:6px 10px;margin:0 -10px;border-radius:10px;font:600 16px/1.3 var(--ff-body)}
.navlink:hover{background:var(--chalk-2);color:var(--ink)}
.navlink:hover .navlink__label{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.2em}
.mega__foot{margin:14px 0 0;padding:16px 24px;border:0;border-radius:0;background:var(--court);color:var(--line);--focus:var(--line);--link-line:rgba(var(--line-rgb),.6)}
.mega__ask{font:800 24px/1 var(--ff-display);letter-spacing:.03em;text-transform:uppercase}
.mega__call{display:inline-flex;align-items:center;min-height:44px;font:700 15px/1.3 var(--ff-body);color:var(--line)}
.mainnav__panel:not(.mega){min-width:300px;padding:12px;border-top:5px solid var(--court)}
.panel__list .navlink{font:700 17px/1.3 var(--ff-body);min-height:44px}
/* graft 2: the Achievements menu is the one place gold appears in the header (WP-H adds the modifier class) */
.mainnav__panel--achievements,.mainnav__panel--achievements:not(.mega){border-top-color:var(--gold)}
.mainnav__panel--achievements .navlink:hover{box-shadow:inset 4px 0 0 var(--gold)}

/* ---------- 8. Rail and line bar (the signature stays, in the new green) ---------- */
.rail__tip,.rail__chip{background:var(--court-deep)}
.linebar__labels{letter-spacing:.07em}

/* ---------- 9. Thumb bar and sheets ---------- */
.thumbbar{background:var(--court-deep);background:color-mix(in srgb,var(--court-deep) 97%,transparent)}
.thumbbar::before{height:4px;background:var(--red)}
.thumbbar::after{top:4px;background:rgba(var(--line-rgb),.5)}
.thumbbar__cta{font-size:20px}
.thumbbar__label{font:700 11.5px/1.1 var(--ff-body)}
.sheet__in{background:var(--chalk)}
.sheet__title{font:800 26px/1.1 var(--ff-display);text-transform:uppercase}
.sheet__close{border-radius:999px;font:800 17px/1 var(--ff-display);text-transform:uppercase;letter-spacing:.05em}
.toc-list a{font:800 20px/1.2 var(--ff-display);text-transform:uppercase;letter-spacing:.03em}
.toc-list .is-now a{color:var(--red-press)}
/* the phone menu: a court-green sheet that opens on a photo, big condensed group names */
#menu-sheet .sheet__in{background:var(--court);color:var(--line);--fg:var(--line);--muted:var(--text-2-inv);--focus:var(--line);--link-line:rgba(var(--line-rgb),.6);--pill-bg:rgba(var(--line-rgb),.12);--pill-fg:var(--line);--pill-edge:rgba(var(--line-rgb),.55);gap:10px}
/* WP-H prints the phone menu's image first in the sheet as <img class="menu-sheet__photo" alt=""> */
#menu-sheet .menu-sheet__photo{display:block;flex:none;order:-1;width:auto;max-width:none;height:clamp(118px,19vh,170px);margin:calc(-1 * max(22px,env(safe-area-inset-top))) calc(-1 * max(20px,env(safe-area-inset-right))) 4px calc(-1 * max(20px,env(safe-area-inset-left)));object-fit:cover;object-position:center 42%;border-bottom:5px solid var(--red)}
/* the close button keeps the sheet's white focus ring (8.07:1 on court; the 2px offset keeps it off the white
   button): a red ring here sat on the court green at 1.88:1 */
#menu-sheet .sheet__x{background:var(--line);color:var(--ink)}
#menu-sheet .menu-search{margin:0}
#menu-sheet .menu-search input{min-height:48px;border:0;border-radius:999px;background:var(--line);color:var(--ink);padding:10px 18px;font-size:16px}
#menu-sheet .menu-groups{border-top:1px solid var(--rule-dark)}
#menu-sheet .menu-group,#menu-sheet .menu-link--top{border-bottom:1px solid var(--rule-dark)}
#menu-sheet .menu-link{font:600 17px/1.3 var(--ff-body)}
#menu-sheet .menu-group__sum,#menu-sheet .menu-link--top{min-height:58px;font:800 28px/1 var(--ff-display);letter-spacing:.03em;text-transform:uppercase}
#menu-sheet .menu-group[open]>.menu-group__sum{color:var(--line);box-shadow:inset 5px 0 0 var(--red);padding-left:14px}
#menu-sheet .menu-group__title{margin-top:14px;color:var(--text-2-inv);font-size:15px}
#menu-sheet .menu-contact .btn{min-height:50px}
#menu-sheet .sheet__close{border:0;background:transparent;color:var(--line);box-shadow:inset 0 0 0 2px rgba(var(--line-rgb),.75)}
/* graft 3 (from A): a 48px photo chip beside each group name. WP-H prints <img class="menu-chip" alt=""> first in
   the group's summary (or the top link) from the menu item's image; without one the row keeps today's layout. */
#menu-sheet .menu-group__sum:has(.menu-chip),#menu-sheet .menu-link--top:has(.menu-chip){justify-content:flex-start;gap:14px}
#menu-sheet .menu-group__sum:has(.menu-chip) .ico--chev{margin-left:auto}
.menu-chip{flex:none;display:block;width:48px;height:48px;border-radius:12px;object-fit:cover;background:var(--court-deep);box-shadow:0 0 0 2px rgba(var(--line-rgb),.55)}

/* ---------- 10. Footer: night court with a red and a white baseline on top ---------- */
.site-footer{background:var(--court-deep);box-shadow:inset 0 6px 0 var(--red),inset 0 9px 0 var(--line);padding-top:clamp(64px,8vw,104px)}
.site-footer__tag{font:800 clamp(30px,2.8vw,40px)/1.02 var(--ff-display);letter-spacing:.01em}
.site-footer__tag2{color:var(--text-2-inv);font-size:17px}
.site-footer__h{color:var(--line);font-size:17px;font-weight:800;letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.site-footer__h::before{content:"";width:18px;height:4px;border-radius:2px;background:var(--red);box-shadow:0 0 0 1px rgba(var(--line-rgb),.35)}
.site-footer__list li,.site-footer__social li{font-size:16px}
.site-footer__list a{text-decoration-color:rgba(var(--line-rgb),.35)}
.site-footer__list a:hover{text-decoration-color:var(--line)}
.site-footer__who{font-weight:800}
.site-footer__pay,.site-footer__ai,.site-footer__lower,.site-footer__lower a,.site-footer__lower .linkbtn{color:var(--text-2-inv)}
.site-footer__ai{border-top-color:var(--rule-dark);font-size:13px}
.site-footer__lower{font:500 13px/1.5 var(--ff-body)}
.site-footer__baseline{background:var(--line)}

/* ---------- 11. Hero captions only (the film is untouched) ---------- */
/* the caption lines ride on red chips, italic capitals like a broadcast graphic (white 4.73:1 over pure white) */
.hband__line{font:italic 800 clamp(32px,3.3vw,58px)/1 var(--ff-display);letter-spacing:.01em;text-transform:uppercase;padding:.08em .34em .1em}
.hband__line::before{border-radius:6px;background:rgba(var(--red-field-rgb),.92)}
.hband__line.chip-scrim{font:italic 800 clamp(30px,3.1vw,54px)/1 var(--ff-display);letter-spacing:.01em;text-transform:uppercase;background:rgba(var(--red-field-rgb),.92);border:0;border-radius:6px;padding:.1em .36em .12em}
.chip-scrim,.hband .chip-scrim{background:rgba(var(--court-deep-rgb),.82);border-color:rgba(var(--line-rgb),.22);font-size:15px;font-weight:600;letter-spacing:.08em}
.hband--settle::before{background:rgba(var(--court-deep-rgb),.84);border-radius:var(--r-lg);box-shadow:inset 0 5px 0 var(--red),0 18px 50px rgba(4,24,18,.3)}
.hband__eyebrow{font:600 clamp(17px,1.3vw,21px)/1.2 var(--ff-display);letter-spacing:.06em;text-transform:uppercase}
.hband__headline{font:800 clamp(34px,2.9vw,58px)/1 var(--ff-display);letter-spacing:.01em}
.hband__sub{font-family:var(--ff-body);font-weight:500}
.hero__skip,.hero__cue{background:rgba(var(--court-deep-rgb),.82);font-size:14px;letter-spacing:.08em}
.hero__eyebrow{font:600 clamp(18px,1.5vw,22px)/1.2 var(--ff-display);letter-spacing:.07em;text-transform:uppercase}
.hero__h1{font-family:var(--ff-display);font-weight:800;font-size:clamp(44px,5vw,80px);line-height:.98;letter-spacing:.005em}
.hero__more{font:800 18px/1.2 var(--ff-display);letter-spacing:.05em;text-transform:uppercase}
@media (max-width:720px){.hero__h1{font-size:clamp(34px,10vw,46px)}.hero__eyebrow{font-size:16px}}
.phone-film .hband{background:rgba(var(--court-deep-rgb),.82)}
.phone-film .hband__line,.phone-film .hband__line.chip-scrim{font-size:clamp(28px,8vw,38px)}
@media (orientation:portrait){:root:not(.hero-scrub) .hero__copy{background:rgba(var(--court-deep-rgb),.86);border-color:rgba(var(--line-rgb),.16);box-shadow:inset 0 5px 0 var(--red)}}
@media (orientation:landscape) and (max-height:560px){:root:not(.hero-scrub) .hero__copy{background:rgba(var(--court-deep-rgb),.86)}}
/* the film frames on phones and under reduced motion: night court, the caption lines as on the film */
.film-stages{background:var(--court-deep)}
.stage-frame__line{font:italic 800 clamp(28px,7vw,38px)/1 var(--ff-display);text-transform:uppercase;letter-spacing:.01em}
.stage-frame__line+.stage-frame__line{font:500 17px/1.5 var(--ff-body);font-style:normal;text-transform:none;color:var(--text-2-inv)}
.stage-frame__media{border-radius:var(--r-lg);box-shadow:10px 10px 0 var(--red)}

/* ---------- 12. Inner page heads: a red field, the page head photo multiplied into its right side ---------- */
.page-head,.page-head--ink{position:relative;overflow:hidden;isolation:isolate;background:var(--red-field);color:var(--line);padding:clamp(44px,7vw,104px) 0 clamp(34px,4.5vw,60px)}
/* WP-E2's "Page head photo" field sets --pagephoto on the head. Multiply can only darken the red, so white type
   holds 5.1:1 or better anywhere over the photo. No photo: a plain red field. */
.page-head::after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:58%;background:var(--pagephoto,none) center/cover no-repeat;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%);pointer-events:none}
@media (max-width:899px){.page-head::after{width:100%;opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 70%,transparent 100%)}}
.page-head>*{position:relative}
/* display widths in em, not ch: ch is the width of "0" in the face that is showing (Barlow 0.456em, its fallback
   0.430em), so a ch width changed on the font swap and rewrapped the heading. These are the same widths with
   Barlow (20ch, 26ch, 17ch, 26ch of the base parts), measured by v2-design.ps1 -Mode jump */
.page-head h1{max-width:9.1em;color:var(--line)}
.page-head--post h1{font-size:clamp(34px,4.2vw,62px);max-width:11.9em}
.hero__h1{max-width:7.75em}
.pull,.pull-line{max-width:11.9em}
/* text widths in em as well (Nunito 0.600em per ch, its Arial fallback 0.562em): the base parts' 64, 60, 46, 52,
   66, 70 and 68ch, at their Nunito widths */
p{max-width:38.4em}
.prose>*{max-width:38.4em}
.lede{max-width:36em}
.hero__sub,.hband__sub{max-width:27.6em}
.status-banner__sentence{max-width:31.2em}
.pathway-philosophy .prose{max-width:39.6em}
.pathway-legal .legal-note{max-width:42em}
.program-page__text{max-width:40.8em}
.page-head .lede{color:var(--line);font-weight:600}
.page-head .crumbs{color:var(--line);font-size:14px;font-weight:700}
.page-head .crumbs a{text-decoration:underline;text-decoration-color:rgba(var(--line-rgb),.5)}
.page-head .crumbs [aria-current]{color:var(--line);opacity:1}
.page-head__court,.page-head__strip{height:3px;border-radius:2px;background:rgba(var(--line-rgb),.4)}
.page-head__line,.page-head__strip::after{top:0;height:3px;background:var(--line);right:auto;width:clamp(120px,22%,260px)}
.page-head__court::before,.page-head__strip::before{top:-6px;width:15px;height:15px;background:var(--line);box-shadow:0 2px 6px rgba(40,0,0,.35)}
.page-head .facts,.page-head .page-head__meta{color:var(--line)}
.rk-head__photo{border:4px solid var(--line);border-radius:14px;box-shadow:12px 12px 0 var(--court-deep);transform:rotate(-1.5deg)}
/* graft 2: the certificate check page wears the one gold page-head rule */
.t-certificates .page-head__court,.t-certificates .page-head__strip{background:var(--gold)}
.t-certificates .page-head__line,.t-certificates .page-head__strip::after{background:var(--gold-hi)}
/* the closing band: the red field returns above the footer, with the white CTA */
.closing-band{background:var(--red-field);padding:clamp(34px,5vw,56px) 0;position:relative}
.closing-band p,.closing-band__line{font:800 clamp(28px,3vw,42px)/1.05 var(--ff-display);letter-spacing:.01em}
.closing-band .ball-glyph,.closing-band__ball{width:40px;height:40px}

/* ---------- 13. Cards, tables, accordions, tabs, chips ---------- */
.card{border:0;border-radius:var(--r-lg);background:var(--line);box-shadow:var(--shadow)}
.empty,.empty-state,.contact-box,.facts-band,.course-card__note{background:var(--chalk-2)}
.contact-box{border-left:6px solid var(--court)}
/* light data tables only: the ranking tables (white type on night court) are left out on purpose */
.table-wrap:not(:has(.rk-table)){border:0;border-radius:14px;box-shadow:var(--shadow);background:var(--line)}
.table-wrap table:not(.rk-table) thead th{background:var(--court);color:var(--line);font-size:14px;letter-spacing:.07em;border-bottom:0}
.table-wrap table:not(.rk-table) tbody tr:nth-child(even)>*{background:#fdf8f1}
.table-wrap table:not(.rk-table) th,.table-wrap table:not(.rk-table) td{border-bottom-color:var(--hairline)}
.prose table th{background:var(--court);color:var(--line)}
.prose th,.prose td{border-color:var(--hairline)}
.accordion{--rule:#e2cfb6}
.accordion>details>summary,.acc>summary,details.accordion__item>summary{font:800 23px/1.15 var(--ff-display);letter-spacing:.005em}
.accordion>details>summary::after,.acc>summary::after,details.accordion__item>summary::after{border-color:var(--red);border-width:0 3px 3px 0}
.band--ink .accordion>details>summary::after,.band--court-deep .accordion>details>summary::after,.band--court .accordion>details>summary::after{border-color:var(--line)}
details.accordion__item{border-color:var(--rule,#e2cfb6)}
/* tabs: the selected one is a solid red pill (white 5.1:1); on green it is a white pill */
.tab,.tabs-on [role="tab"],.season-switch a,.rk-tab,.cal-years a,.calendar .chips a{font:600 17px/1 var(--ff-display);letter-spacing:.06em;text-transform:uppercase;border-width:2px;min-height:44px;padding:0 18px}
.tab[aria-selected="true"],.tabs-on [role="tab"][aria-selected="true"],.season-switch a[aria-current],.cal-years a[aria-current],.calendar .chips a[aria-current]{border-color:var(--red-field);background:var(--red-field);color:var(--line)}
.band--ink .tab[aria-selected="true"],.on-dark .tab[aria-selected="true"],.rk-tab.is-on,.rk-tab[aria-selected="true"]{border-color:var(--line);background:var(--line);color:var(--court-deep)}
.chip{border-width:1.5px;background:var(--line);font-weight:600;font-size:14px}
.chip--range{background:var(--court);color:var(--line)}

/* ---------- 14. Homepage sections, in order ---------- */
/* the finder: a court-green field with the film frame multiplied in, a night-court console */
.finder-band{background:var(--court)}
.finder-band::after{opacity:.5;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.1)}
.finder{background:var(--court-deep);border:1px solid rgba(var(--line-rgb),.2);box-shadow:0 40px 90px -30px rgba(2,18,13,.8);--muted:var(--text-2-inv);--pill-bg:rgba(var(--line-rgb),.1)}
/* graft 4: the level column in court green (red inside green read as a holiday card); red stays for CTAs */
.finder__court{background:var(--court)}
.finder__group.is-lit i{background:var(--line);transform:scaleX(1.5)}
.finder__ball.is-landed::after{box-shadow:0 0 0 2px var(--line)}
.finder__title{font-size:clamp(34px,3.8vw,56px)}
.finder__lede,.finder-how li,.fresult__note,.fresult__facts,.fresult__small{color:var(--text-2-inv)}
.finder__legend{font:800 26px/1.1 var(--ff-display);letter-spacing:.01em}
.finder__opt{border:2px solid rgba(var(--line-rgb),.32);border-radius:14px;background:rgba(var(--line-rgb),.05)}
.finder__opt-text{font:700 17px/1.3 var(--ff-body)}
.finder__opt:has(input:checked){background:var(--line);color:var(--ink)}
.finder-how__n{border:0;background:var(--line);color:var(--court-deep);font:800 16px/1 var(--ff-display);width:32px;height:32px}
.fresult__title{font:800 clamp(26px,2.8vw,36px)/1 var(--ff-display);text-transform:uppercase}
@media (max-width:599px){.finder:not(.finder--dialog){--cw:44px}.finder:not(.finder--dialog) .finder__group b{left:3px;font-size:9px}}

/* programs: cream, the class photo on a red offset block, age cards with a red cap, tiles on a green base line */
.programs__photo{border-radius:var(--r-lg);box-shadow:16px 16px 0 var(--red);margin-right:16px}
@media (max-width:599px){.programs__photo{box-shadow:8px 8px 0 var(--red);margin-right:8px}}
.age-cards{gap:20px;padding-top:30px}
.age-card{padding:26px 22px 22px;overflow:visible}
.age-card::before{left:0;right:0;top:0;height:7px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--red)}
.age-card__age{font:800 30px/1 var(--ff-display);letter-spacing:.02em;color:var(--ink)}
.age-card__levels{font:600 18px/1.2 var(--ff-display);letter-spacing:.06em;text-transform:uppercase;color:var(--red-press)}
.age-card p:not([class]){font-size:16px}
.age-card__price{font-size:26px;color:var(--ink)}
.age-card__status{font:600 13px/1.5 var(--ff-body)}
.tile{padding-bottom:22px;border-bottom:6px solid var(--court)}
.tile__media{aspect-ratio:4/3;margin-bottom:8px}
.tile__media img{transition:transform .6s var(--ease-out)}
.tile:hover .tile__media img{transform:scale(1.04)}
.tile__title{font-size:28px}
.tile .tile__price{font-size:22px;color:var(--ink)}
.also{font-weight:600}

/* the pathway (home): the big red field, a white ladder, an upright pull line */
.pathway.band--court-deep{background:var(--red-field)}
.pathway .pull{font:800 clamp(28px,2.8vw,40px)/1.05 var(--ff-display);font-style:normal;letter-spacing:.01em;max-width:10em}
.ladder__label{font-size:17px;font-weight:800;letter-spacing:.1em;color:var(--line)}
.rung__code{min-width:3.6em;font:800 20px/1 var(--ff-display);letter-spacing:.03em}
.rung__name{font:600 21px/1.2 var(--ff-display);letter-spacing:.02em}
.rung__dur{color:var(--line);font-size:14px;font-weight:600}
ol.ladder::before{width:3px}
.pathway .link-row a{font-weight:800}

/* the weekly ranking: a night-court scoreboard, the photo pinned on a red block */
.rk-board{background:var(--court-deep);border-radius:22px;box-shadow:0 40px 80px -34px rgba(4,24,18,.7)}
.rk-board--page{background:none;box-shadow:none;border-radius:0}
.rk-table{font:600 18px/1.25 var(--ff-display);letter-spacing:.02em}
.rk-table thead th{font-size:14px;color:var(--text-2-inv);background:none}
.rk-table tbody tr>*{background:none}
.rk-name{font:700 17px/1.3 var(--ff-body);letter-spacing:0}
.rk-rank__n{font-size:24px}
.rk-pts{font-size:22px}
.rk-move{color:var(--text-2-inv)}
/* rank 1 keeps the red leader bar (red stays the rank 1 marker). Graft 2: the podium is certificate gold, a gold
   medal for rank 1 (ink numerals, 5.4:1 or better at every stop; the flat colour under the gradient is what a
   contrast scan reads) and gold rings for ranks 2 and 3 */
.rk-row--first td:first-child{box-shadow:inset 6px 0 0 var(--red)}
.rk-table--medals .rk-row--medal .rk-rank__n{border:0;border-radius:50%;box-shadow:inset 0 0 0 2px var(--gold);color:var(--line)}
.rk-row--first .rk-rank__n,.rk-table--medals .rk-row--first .rk-rank__n{border:0;border-radius:50%;background:var(--medal);background-color:var(--gold);box-shadow:0 0 0 2px rgba(var(--line-rgb),.2);color:var(--ink)}
.rk-row--first .rk-name{color:var(--gold-hi)}
.rk-panel__title{color:var(--text-2-inv);font-size:15px}
.rk-board--page .rk-panel__title{font:800 clamp(24px,2vw,30px)/1.1 var(--ff-display);letter-spacing:.02em}
.ranking-home__photo{border:5px solid var(--line);border-radius:14px;box-shadow:12px 12px 0 var(--red);transform:rotate(3deg)}

/* where we play: the sand band, the season photo on a green offset, venue rows in the display face */
.locations{background:var(--chalk-2);--pill-bg:var(--line)}
.season-panel__photo{border-radius:var(--r-lg);box-shadow:-14px 14px 0 var(--court);margin-left:14px}
.venue-rows,.venue-row{border-color:#e2cfb6}
.venue-row__city,.venue__city{font-size:16px;font-weight:800;color:var(--red-press)}
.venue-row__name,.venue__name{font:800 25px/1.1 var(--ff-display);letter-spacing:.01em}

/* the director: a court-green field, white type, big condensed figures in a 2 by 2 scorecard */
.director{background:var(--court)}
.director__sub{color:var(--text-2-inv);font-weight:600}
.director__photo{align-self:start;background:none;box-shadow:16px 16px 0 var(--red-field);border-radius:var(--r-lg);overflow:visible}
.director__photo figure,.director__photo img{border-radius:var(--r-lg);overflow:hidden}
.js .director__photo::after{background:var(--court-deep);border-radius:var(--r-lg)}
.director dl.scorecard{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1280px){.director dl.scorecard{grid-template-columns:repeat(2,minmax(0,1fr))}}
.director .scorecard>div{border:2px solid rgba(var(--line-rgb),.3);background:rgba(4,24,18,.18)}
.director .scorecard dt{font-size:clamp(38px,3.4vw,50px);color:var(--line)}
@supports (width:1cqi){.director .scorecard dt{font-size:min(clamp(38px,3.4vw,50px),30cqi)}}
.director .scorecard dd{color:var(--text-2-inv);font-size:14px;font-weight:600}
.director .line-list::before,.director .line-list>li::before{background:var(--line)}

/* families and news */
.quote blockquote p{font:600 18px/1.55 var(--ff-body)}
.quote{border-top:6px solid var(--red)}
.news-card{border-radius:var(--r-lg)}
.news-card__date{color:var(--red-press);font-size:15px;letter-spacing:.07em;text-transform:uppercase}
.news-cards>.news-card:first-child .news-card__date::before{background:var(--red)}
.news-card__title{font-size:25px;line-height:1.08}
.news-card--feature .news-card__title{font-size:32px}
.court-card{background:var(--court)}
.faq-home{background:var(--chalk-2)}
/* the newsletter band (when it shows): a red field */
.newsletter.band--court{background:var(--red-field)}
.newsletter__head h2{font-size:clamp(34px,3.4vw,52px)}

/* ---------- 15. Inner templates ---------- */
/* the registration hub: white columns with a green cap, red numbered steps */
.status-board__col{border:0;border-top:7px solid var(--court);border-radius:var(--r-lg);background:var(--line);box-shadow:var(--shadow)}
.status-board__col>h2,.status-board__col>h3{font-size:34px}
.board-row{border-top-color:var(--hairline)}
.board-row__title{font-weight:800}
.specials .card,.special{border-top:7px solid var(--red)}
.steps__num{border:0;background:var(--red-field);color:var(--line);font:800 17px/1 var(--ff-num);width:34px;height:34px}
/* program tiles on the city and programs pages */
.program-tile{border:0;box-shadow:var(--shadow);border-bottom:6px solid var(--court);background:var(--line)}
.program-tile__title{font:800 24px/1.1 var(--ff-display)}
/* course cards on the level pages hang on a green rail */
.ladder__rail{width:8px;background:var(--court)}
.courses .ladder>.course-card::before{height:4px;background:var(--court)}
.course-card__title{font:800 clamp(26px,2.2vw,32px)/1.05 var(--ff-display);letter-spacing:.01em}
.course-card__price{font-size:24px}
.course-card__group{color:var(--red-press);font-size:15px}
.card-waitlist__form{background:var(--chalk);border-color:var(--hairline)}
/* the locations pages */
.venue{border-top-color:#e2cfb6}
.venue__photo{border-radius:var(--r-lg);box-shadow:10px 10px 0 var(--court)}
/* the pathway page */
.ladder-spine ol,.ladder-spine ul{border-left:4px solid var(--court)}
.ladder-spine a{font:600 17px/1.2 var(--ff-display);letter-spacing:.05em;text-transform:uppercase}
.ladder-spine a.hit{color:var(--red-press);font-weight:800}
section.rung{border-top-color:var(--hairline)}
/* graft 2: the certificate frame: white, an ivory mat and a thin gold rule, on C's red offset block. The frame is
   .cert-video__frame (the video's own background is white, so it never sits straight on a field); the figure and
   its caption stay on the band, so the caption keeps the band's text colour */
.cert-video{overflow:visible;background:none;border-radius:0}
.cert-video__frame{margin:9px 27px 27px 9px;border-radius:6px;background:var(--white);box-shadow:0 0 0 1px var(--hairline),0 0 0 8px var(--chalk),0 0 0 9px var(--gold),18px 18px 0 9px var(--red)}
/* graft 2: the certificate check page */
.cert-card{border-top:6px solid var(--gold)}
.cert-card--valid .cert-card__status{color:var(--gold-ink)}
/* the ranking page */
.rk-standings.band--ink{background:var(--court-deep)}
.rk-find__input{border-radius:999px;border:2px solid rgba(var(--line-rgb),.55);background:rgba(var(--line-rgb),.08)}
@media (max-width:720px){.rk-find{background:var(--court-deep)}}
.rk-arch__row{border-color:var(--hairline)}
/* news and posts */
.prose h2{font-size:clamp(30px,3.2vw,44px)}
.prose blockquote{border-left:6px solid var(--red);font:800 clamp(22px,2.2vw,30px)/1.2 var(--ff-display);font-style:normal;text-transform:none}
.prose ul li::marker,.prose ol li::marker{color:var(--red-press)}
.post__featured{border-radius:var(--r-lg);box-shadow:14px 14px 0 var(--court)}
.pagination [aria-current]{border-color:var(--red-field);background:var(--red-field)}
/* contact */
.contact-card__name{font:800 28px/1.05 var(--ff-display);text-transform:uppercase;letter-spacing:.02em}
.contact-people .card{border-top:7px solid var(--red)}
.contact-card__lines{font-size:16px;font-weight:600}

/* ---------- 16. Forms ---------- */
.field__label,.field>label{font:700 15px/1.35 var(--ff-body)}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.field select,.field textarea,.finder__nojs select{border:2px solid var(--border-ui);border-radius:12px;background-color:var(--line)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--court);box-shadow:0 0 0 3px rgba(var(--court-rgb),.25)}
.form legend,.form__step-title{font:800 24px/1.1 var(--ff-display);letter-spacing:.02em}
.choice input,.field input[type="checkbox"],.field input[type="radio"],.check input{accent-color:var(--court)}

/* ---------- 17. Images recoloured for the direction (SVG data URIs are images: the lint does not read them) ---------- */
.ball-glyph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fffdf9' stroke='%238c7869' stroke-width='.5'/%3E%3Cpath d='M2.9 6.1c4.3 2.5 4.3 9.3 0 11.8M21.1 6.1c-4.3 2.5-4.3 9.3 0 11.8' fill='none' stroke='%230e5a43' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.ball-glyph--red{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ed1f24'/%3E%3Cpath d='M2.9 6.1c4.3 2.5 4.3 9.3 0 11.8M21.1 6.1c-4.3 2.5-4.3 9.3 0 11.8' fill='none' stroke='%23fffdf9' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.field select,.finder__nojs select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231b1411' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ---------- 18. Reduced motion (this part's own rules) ---------- */
@media (prefers-reduced-motion:reduce){
  .tile:hover .tile__media img{transform:none}
  .link-more:hover::after,.age-card__find:hover::after,.news-card__more:hover::after{transform:none}
}

/* ======================================================================================================================
   Direction D, "Academic" (client, 2026-10-06). Layered over C's component rules above.
   About 70% white, 20% ICM red, 10% yellow #FBBE00; titles and menu in black. No playful marks: the rail, the line
   bar, the ladder spines and balls and the ball glyphs are gone. Red fields keep white type; their CTA turns yellow.
   ====================================================================================================================== */
/* the signature rail and line bar are removed (client: "cartoonish"); the gutter they reserved goes with them */
.rail,.linebar,.rail__chip,.rail__tip,.ladder__ball,.ladder-spine,.ladder__rail,.ball-glyph,.ball-glyph--red{display:none !important}
@media (min-width:1100px) and (min-height:561px){:root{--gl:clamp(20px,5vw,48px)}}
.ladder,.ladder__rungs{background:none !important;border-left:0 !important}
.ladder__run::before,.ladder__run::after,.ladder::before,.ladder::after{display:none !important}

/* light role: sections that were coloured fields become white pages with black titles */
.page-head,.page-head--ink,.director,.finder-band,.film-stages ~ .finder-band{
  --fg:var(--ink);--muted:var(--text-2);--focus:var(--red);--link-line:var(--red);--edge:var(--border-ui);
  --pill-bg:var(--chalk-2);--pill-fg:var(--ink);--pill-edge:var(--border-ui);--hatch:rgba(var(--court-rgb),.18);--rule:var(--hairline);
  color:var(--ink);background:var(--white) !important}
.director,.finder-band{background:var(--chalk-2) !important}
.page-head h1,.director h2,.finder-band h2,.page-head .lede,.director p,.finder-band p{color:var(--ink)}
.page-head .lede,.director .lede,.finder-band .lede{color:var(--text-2)}
.page-head::after{display:none !important}
.page-head{border-bottom:1px solid var(--hairline);background-image:none !important}
.page-head .crumbs a,.page-head .crumbs{color:var(--text-2)}
.page-head .btn--cta,.page-head .btn--confirm,.director .btn--cta,.finder-band .btn--cta{background:var(--red);color:var(--white);box-shadow:none;border:0}
.page-head .btn--line,.director .btn--line,.finder-band .btn--line{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.page-head .link-more,.director .link-more{color:var(--ink)}
.director .card,.finder-band .card,.finder-band .finder,.finder-band .finder__console{background:var(--white);color:var(--ink);box-shadow:var(--shadow);border:1px solid var(--hairline)}
/* page head photo: a plain photo on the right, no colour multiply */
.page-head__photo,.page-head .page-head__photo img{mix-blend-mode:normal !important;filter:none !important}

/* titles: black on light; eyebrows red with a yellow bar */
h1,h2,h3,.h1,.h2{color:var(--fg,var(--ink))}
.kicker::before,.eyebrow::before{background:var(--yellow) !important}

/* red fields keep white type; their CTA is yellow with a black label */
.closing-band .btn--cta,.pathway.band--court-deep .btn--cta,.newsletter.band--court .btn--cta,.site-footer .btn--cta,.rk-board .btn--cta,.band--court .btn--cta,.band--court-deep .btn--cta{background:var(--yellow);color:var(--ink);box-shadow:none;border:0}
.closing-band .btn--cta:hover,.pathway.band--court-deep .btn--cta:hover,.newsletter.band--court .btn--cta:hover,.site-footer .btn--cta:hover,.rk-board .btn--cta:hover{background:var(--yellow-press);color:var(--ink)}
.closing-band .kicker,.site-footer .kicker,.pathway .kicker{color:var(--yellow)}

/* header: white, black menu, a thin red line; over the film a dark frost so white reads */
.site-header{background:var(--white)}
.site-header::after{background:var(--red);height:3px}
.mainnav__btn,.mainnav__link{color:var(--ink)}
.mainnav__btn[aria-expanded="true"]{background:var(--yellow);color:var(--ink)}
.logo{background:none !important;box-shadow:none !important;padding:0 !important}
.site-header--home:not(.is-past) .logo img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}

/* phone menu and thumb bar: white with black type; the red CTA stays */
#menu-sheet .sheet__in{background:var(--white);color:var(--ink);--fg:var(--ink);--muted:var(--text-2);--focus:var(--red)}
#menu-sheet .menu-group__title,#menu-sheet .menu-link,#menu-sheet .menu-link--top,#menu-sheet .menu-group__sum{color:var(--ink)}
#menu-sheet .menu-group,#menu-sheet .menu-link--top{border-color:var(--hairline)}
#menu-sheet .sheet__x{color:var(--ink);background:var(--chalk-2)}
#menu-sheet .menu-search input{background:var(--chalk-2);color:var(--ink);border:1px solid var(--border-ui)}
.thumbbar{background:var(--white) !important;color:var(--ink);--focus:var(--red);box-shadow:0 -1px 0 var(--hairline),0 -8px 24px rgba(0,0,0,.08)}
.thumbbar::before{background:var(--red)}
.thumbbar__label,.thumbbar a,.thumbbar button{color:var(--ink)}
.thumbbar .btn--cta,.thumbbar__cta{background:var(--red);color:var(--white)}

/* footer: deep red, yellow headings */
.site-footer__h{color:var(--yellow)}
.site-footer__h::before{background:var(--yellow)}

/* medals and podium: yellow */
.rk-medal,.rank-medal{background:var(--medal)}

/* hero: the skip control is a solid yellow pill, always easy to find (client: "more visible") */
.hero__skip{left:50% !important;right:auto !important;transform:translateX(-50%);bottom:calc(var(--thumb-h) + 22px) !important;min-height:52px;padding:0 26px !important;
  border:0 !important;border-radius:999px !important;background:var(--yellow) !important;color:var(--ink) !important;
  font:800 17px/1 var(--ff-display) !important;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 22px rgba(0,0,0,.35);
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;opacity:1 !important;visibility:visible !important}
.hero__skip:hover{background:var(--yellow-press) !important}
.hero__cue{display:none !important}

/* v3 fixes after the first review (2026-10-06) */
/* over the film the header is a dark frost (the red logo stays readable), white once scrolled past */
.site-header--home:not(.is-past),html.hero-scrub .site-header--home:not(.is-past),html.hero-scrub.phone-film .site-header--home:not(.is-past){background:rgba(17,17,17,.55) !important}
/* no ball marks on the age cards or anywhere decorative */
.age-card::after{display:none !important}
/* the thumb bar's menu icon reads in black on the white bar */
.ico--ball{--ball-fill:var(--white);--ball-seam:var(--ink)}
.thumbbar .ico{color:var(--ink);stroke:currentColor}
/* over the film: white menu words and tools on the dark frost; black again once past the film */
.site-header--home:not(.is-past) .mainnav__btn,.site-header--home:not(.is-past) .mainnav__link,.site-header--home:not(.is-past) .masthead__tool,
.site-header--home:not(.is-past) .masthead__phone,.site-header--home:not(.is-past) .search-btn{color:var(--white) !important}
.site-header--home:not(.is-past) .mainnav__btn[aria-expanded="true"]{background:var(--yellow);color:var(--ink) !important}
#menu-sheet .menu-contact .btn{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
/* the dropdown panels stay white with black words, also over the film */
.mainnav__panel,.mainnav__panel a,.mainnav__panel .navlink,.mainnav__panel h2,.mainnav__panel h3,.mainnav__panel p{color:var(--ink)}
.mainnav__panel a:hover{color:var(--red-ink)}
/* hub "Pathways and special programs": each card keeps its own height, with a sentence and a link */
.specials__list{align-items:start}
.special__about{margin:10px 0 0;color:var(--text-2);font-size:15px;line-height:1.5}
.special__more{margin:12px 0 0}
/* more playful marks out: the ball on the page-head strip and the ball and line on the level finder */
.page-head__strip,.page-head__court{display:none !important}
.finder__ball{display:none !important}

/* Direction D: the level finder on white (client, 2026-10-07): the dark console's light text, chips and outlines
   become ink, and the red level bar (B, IN, HP) is gone, as the rail is everywhere else. */
.finder{grid-template-columns:minmax(0,1fr);background:var(--white);color:var(--ink);--fg:var(--ink);--muted:var(--text-2);--focus:var(--ink);--link-line:rgba(var(--ink-rgb),.4);--edge:var(--hairline);--pill-bg:var(--white);--pill-fg:var(--ink);--pill-edge:var(--hairline);--hatch:rgba(var(--ink-rgb),.08)}
.finder__court{display:none !important}
.finder .chip{border-color:var(--hairline);background:var(--white);color:var(--ink)}
.finder .chip--range{background:var(--ink);color:var(--white)}
.finder__lede,.finder-how li,.fresult__note,.fresult__facts,.fresult__small,.finder .stamp{color:var(--text-2)}
.finder .btn--ink{--btn-bg:var(--ink);--btn-fg:var(--white)}
.finder .btn--line{--btn-bg:transparent;--btn-fg:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.finder .btn--cta,.finder .btn--confirm{box-shadow:none}
.finder__opt{border-color:var(--hairline);background:var(--white);color:var(--ink)}
.finder .kicker{color:var(--red)}

/* Direction D contrast sweep (client, 2026-10-07: "white text on a white background"). The page head, the director
   and the finder band became light, so every piece of text C styled white inside them turns ink here, and the white
   cards inside red bands (the ICM 30 stages) get ink text. Kickers on white use the darker ICM red (4.5:1). */
.kicker{color:var(--court)}
.page-head .kicker,.director .kicker,.finder-band .kicker{color:var(--court)}
.page-head .crumbs,.page-head .crumbs [aria-current]{color:var(--ink)}
.page-head .crumbs a{text-decoration-color:rgba(var(--ink-rgb),.4)}
.page-head .facts,.page-head .page-head__meta,.page-head time,.page-head small{color:var(--text-2)}
.page-head .link-more,.director .link-more{text-decoration-color:var(--ink)}
.director__sub{color:var(--text-2)}
.director .scorecard dt{color:var(--court)}
.director .scorecard dd{color:var(--text-2)}
.band--court .kicker,.band--court-deep .kicker{color:var(--line)}
.stage,.stage :is(h2,h3,h4,p,li,dt,dd,span,strong,small,em,b,.stage__price){color:var(--ink)}
.stage a{color:var(--ink)}
/* The still hero (reduced motion, or no film): the photo and its buttons scroll under the header, so the header's
   tint is almost solid there; over the moving film it stays at 55%. */
html:not(.hero-scrub) .site-header--home:not(.is-past){background:rgba(17,17,17,.92) !important}
/* Age-group titles above the class times (client, 2026-10-08: "not really visible"): ink, larger, bold. */
.course-card__group{margin:20px 0 8px;color:var(--ink);font-size:18px;font-weight:800;letter-spacing:.03em}
.course-card__times .chips{gap:8px}
/* The family portal in the header (client, 2026-10-14: "a lot bolder"): an outlined pill with the person icon;
   icon only below 1200 px and on phones; white over the homepage film like the other header tools. */
.masthead__portal{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border:2px solid var(--court);border-radius:999px;color:var(--court);font:800 15px/1 var(--ff-display);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.masthead__portal .ico{width:20px;height:20px}
.masthead__portal:hover{background:var(--court);color:var(--white)}
@media (max-width:1199px){.masthead__portal{width:44px;padding:0;justify-content:center}.masthead__portal span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.site-header--home:not(.is-past) .masthead__portal{color:var(--white) !important;border-color:var(--white)}
/* the homepage section */
.portal-home{background:var(--chalk-2)}
.portal-home__in{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.portal-home__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.portal-home__feats{display:grid;gap:12px;margin:18px 0 24px;padding:0;list-style:none}
@media (min-width:600px){.portal-home__feats{grid-template-columns:1fr 1fr}}
.portal-home__feats li{display:grid;gap:3px;padding:14px 16px;border:1px solid var(--hairline);border-left:4px solid var(--court);border-radius:12px;background:var(--white)}
.portal-home__feats strong{font:800 17px/1.2 var(--ff-display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.portal-home__feats span{color:var(--text-2);font-size:15px}
.portal-home__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0}
.portal-home__note{color:var(--text-2);font-size:15px}
.portal-home__badges{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px;border-radius:22px;background:var(--white);box-shadow:var(--shadow);justify-items:center}
.portal-home__badge{width:100%;max-width:170px;height:auto;aspect-ratio:1;object-fit:contain}
.portal-home__tag{grid-column:1/-1;margin:0;font:700 14px/1.3 var(--ff-display);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
/* ---------- 25e. The site assistant (v3 step 6) ---------- */
.asst{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--thumb-h,0px) + 16px + env(safe-area-inset-bottom));z-index:60}
/* The launcher (client 2026-10-28: "more attention seeking, like Sol on esolutify"): a glowing tennis ball with a
   pulsing halo, and a dark "Ask Ace" pill tucked under its left half */
.asst__open{position:relative;display:flex;align-items:center;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.asst__orb{position:relative;z-index:2;width:62px;height:62px;flex:none;border-radius:50%;animation:asstGlow 2.4s ease-in-out infinite;transition:transform .25s}
.asst__orb::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(var(--yellow-rgb),.55);animation:asstHalo 2.4s ease-out infinite}
.asst__ball{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 34% 28%,var(--line) 0%,var(--yellow) 30%,var(--yellow) 62%,rgba(var(--ink-rgb),.35) 120%),var(--yellow);
  box-shadow:inset -6px -8px 14px rgba(var(--ink-rgb),.28),inset 4px 5px 10px rgba(var(--line-rgb),.45)}
.asst__ball::before,.asst__ball::after{content:"";position:absolute;top:-18%;bottom:-18%;width:70%;border-radius:50%;border:3px solid rgba(var(--line-rgb),.92)}
.asst__ball::before{left:-46%}
.asst__ball::after{right:-46%}
.asst__open:hover .asst__orb{transform:scale(1.07)}
.asst__pill{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;height:50px;margin-right:-26px;padding:0 40px 0 18px;border-radius:999px;background:var(--ink);border:2px solid var(--yellow);
  box-shadow:0 0 22px rgba(var(--yellow-rgb),.45),0 12px 30px rgba(var(--ink-rgb),.35);text-align:left;white-space:nowrap;animation:asstPill .6s cubic-bezier(.16,1,.3,1) 1s both}
.asst__pill b{font:800 16px/1.1 var(--ff-display);letter-spacing:.02em;text-transform:uppercase;color:var(--yellow)}
.asst__pill span{margin-top:2px;font:500 12px/1.2 var(--ff-body);color:var(--text-2-inv)}
.asst__open:hover .asst__pill{box-shadow:0 0 30px rgba(var(--yellow-rgb),.65),0 12px 30px rgba(var(--ink-rgb),.35)}
.asst.is-open .asst__open{display:none}
@keyframes asstGlow{0%,100%{box-shadow:0 0 0 5px rgba(var(--yellow-rgb),.16),0 0 26px 8px rgba(var(--yellow-rgb),.45),0 14px 34px rgba(var(--ink-rgb),.3)}
  50%{box-shadow:0 0 0 9px rgba(var(--yellow-rgb),.2),0 0 42px 16px rgba(var(--yellow-rgb),.6),0 14px 38px rgba(var(--ink-rgb),.34)}}
@keyframes asstHalo{0%{transform:scale(.92);opacity:.85}100%{transform:scale(1.6);opacity:0}}
@keyframes asstPill{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
/* a first hello above the button, once per visit, wide screens */
.asst__hi{position:absolute;right:2px;bottom:80px;width:270px;padding:14px 34px 13px 16px;border-radius:18px 18px 4px 18px;background:var(--ink);border:2px solid var(--yellow);
  box-shadow:0 0 24px rgba(var(--yellow-rgb),.35),0 18px 40px rgba(var(--ink-rgb),.4);cursor:pointer;animation:asstHi .5s cubic-bezier(.2,.9,.3,1.2) both}
.asst__hi[hidden]{display:none}
.asst__hi p{margin:0;font:500 14.5px/1.45 var(--ff-body);color:var(--line)}
.asst__hi-go{display:block;margin-top:8px;font:700 13px/1 var(--ff-body);color:var(--yellow)}
.asst__hi-x{position:absolute;right:6px;top:4px;width:28px;height:28px;padding:0;border:0;background:transparent;color:var(--text-2-inv);font-size:20px;line-height:1;cursor:pointer}
.asst.is-open .asst__hi{display:none}
@keyframes asstHi{from{opacity:0;transform:translateY(10px) scale(.96)}}
@media (max-width:600px){.asst__orb{width:56px;height:56px}.asst__pill{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;animation:none}}   /* phones: the ball only (the pill covered page buttons); its text stays for screen readers */
@media (prefers-reduced-motion:reduce){.asst__orb,.asst__orb::after,.asst__pill,.asst__hi{animation:none}}
.asst__panel{display:flex;flex-direction:column;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100dvh - var(--thumb-h,0px) - 40px));border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--line);box-shadow:0 18px 50px rgba(var(--ink-rgb),.28);overflow:hidden}
.asst__panel[hidden]{display:none}
.asst__head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;background:var(--court);color:var(--line)}
.asst__head small{display:block;font-size:12px;opacity:.85}
.asst__tools{display:flex;align-items:center;gap:2px}
.asst__new{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:4px 10px;border:1.5px solid currentColor;border-radius:999px;background:transparent;color:var(--line);font:600 12px/1 var(--ff-body);cursor:pointer;opacity:.9}
.asst__new:hover{opacity:1;background:rgba(var(--line-rgb),.12)}
.asst__x{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--line);font-size:26px;line-height:1;cursor:pointer}
.asst__log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:14px}
.asst__msg{max-width:88%;margin:0;padding:9px 12px;border-radius:14px;font-size:15px;line-height:1.45}
.asst__msg p{margin:0 0 6px}
.asst__msg p:last-child{margin:0}
.asst__msg ul{margin:4px 0;padding-left:1.1em}
.asst__msg a{color:inherit;font-weight:700}
.asst__msg--bot{align-self:flex-start;background:var(--chalk);border:1px solid var(--edge)}
.asst__msg--me{align-self:flex-end;background:var(--ink);color:var(--line)}
.asst__msg.is-wait{opacity:.6}
.asst__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px}
.asst__chips[hidden]{display:none}
.asst__chips button{padding:7px 11px;border:1.5px solid var(--edge);border-radius:999px;background:var(--line);color:var(--ink);font:600 13px/1.2 var(--ff-body);cursor:pointer}
.asst__form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--edge)}
.asst__form textarea{flex:1;min-height:44px;max-height:120px;padding:10px 12px;border:1px solid var(--border-ui);border-radius:12px;font:400 16px/1.35 var(--ff-body);resize:none}
.asst__send{width:44px;height:44px;border:0;border-radius:50%;background:var(--court);color:var(--line);font-size:18px;cursor:pointer}
.asst__note{margin:0;padding:0 12px 10px;font-size:11.5px;color:var(--muted)}
@media print{.asst{display:none}}
/* ---------- 25g. The director's story page and the junior training guides (2026-10-28) ---------- */
/* profile (/mahdi-taheri/) */
.legacy-hero{padding-top:12px;padding-bottom:12px}
.legacy-hero + .content-page{padding-top:28px}
.legacy-hero__photo{margin:0}
.legacy-hero__photo img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-lift)}
.legacy-hero__photo figcaption{margin-top:8px;font-size:12px;color:var(--muted)}
.legacy-roles{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.legacy-roles li{position:relative;padding:10px 14px 10px 18px;border-left:4px solid var(--red);background:var(--chalk-2);border-radius:0 var(--r) var(--r) 0;font-weight:600;line-height:1.35}
.legacy-roles li:first-child{background:var(--ink);color:var(--line);font:var(--hd-weight) clamp(18px,2vw,22px)/1.2 var(--ff-display);font-stretch:var(--hd-stretch);text-transform:var(--hd-case)}
.legacy-facts dt{font:var(--hd-weight) clamp(26px,3vw,36px)/1 var(--ff-display);font-stretch:var(--hd-stretch);color:var(--red)}
.legacy-story>h2{scroll-margin-top:calc(var(--head-h) + 20px)}
.journey-line{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;counter-reset:j}
.journey-line li{position:relative;display:grid;gap:4px;padding:0 0 26px 40px;border-left:3px solid var(--court);margin-left:10px}
.journey-line li:last-child{border-left-color:transparent;padding-bottom:0}
.journey-line__dot{position:absolute;left:-12px;top:0;width:21px;height:21px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);box-shadow:0 0 0 4px var(--chalk-2)}
.journey-line strong{font:var(--hd-weight) clamp(18px,1.8vw,22px)/1.2 var(--ff-display);font-stretch:var(--hd-stretch);text-transform:var(--hd-case)}
.journey-line span:not(.journey-line__dot){color:var(--muted);max-width:62ch}
@media (min-width:1000px){.journey-line{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0}.journey-line li{border-left:0;border-top:3px solid var(--court);margin:12px 0 0;padding:26px 16px 0 0}.journey-line li:last-child{border-top-color:var(--court)}.journey-line__dot{left:0;top:-12px}}
.legacy-links{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.legacy-links a{display:grid;gap:6px;height:100%;padding:20px;border:1px solid var(--edge);border-top:4px solid var(--red);border-radius:var(--r-lg);background:var(--line);color:var(--ink);text-decoration:none;transition:box-shadow .2s,transform .2s}
.legacy-links a:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.legacy-links strong{font:var(--hd-weight) 22px/1.15 var(--ff-display);font-stretch:var(--hd-stretch);text-transform:var(--hd-case)}
.legacy-links span{color:var(--muted)}
.legacy-links .legacy-links__url{color:var(--red-ink);font:600 13px/1.3 var(--ff-label);letter-spacing:.04em}
.legacy-quote blockquote{margin:0 auto;max-width:900px;text-align:center}
.legacy-quote blockquote p{margin:0;font:var(--hd-weight) clamp(24px,3.4vw,42px)/1.15 var(--ff-display);font-stretch:var(--hd-stretch);color:var(--line)}
.legacy-quote__by{margin:18px auto 0;text-align:center;color:var(--yellow);font:600 13px/1 var(--ff-label);letter-spacing:.1em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.legacy-links a{transition:none}.legacy-links a:hover{transform:none}}

/* guides (/training-guides/ and each guide) */
.guide-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.guide-facts li{padding:7px 13px;border-radius:999px;background:var(--ink);color:var(--line);font:600 13px/1.2 var(--ff-label);letter-spacing:.03em}
.guide-facts--small{margin:8px 0 10px}
.guide-facts--small li{padding:5px 10px;font-size:12px;background:var(--chalk-2);color:var(--ink)}
.guide-dl{margin:20px 0 0}
.guide-dl__meta{margin-left:8px;font-weight:500;opacity:.8;font-size:.85em}
.content-page .wrap:has(>.guide-side){display:grid;gap:36px}
@media (min-width:1000px){.content-page .wrap:has(>.guide-side){grid-template-columns:300px minmax(0,1fr)}.guide-side{position:sticky;top:calc(var(--head-h) + 24px);align-self:start}}
.guide-side{display:grid;gap:22px;align-content:start}
.guide-cover{margin:0;max-width:300px}
.guide-cover img{width:100%;height:auto;border-radius:var(--r);box-shadow:var(--shadow-lift)}
.guide-get{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:36px 0 0;padding:22px 24px;border-radius:var(--r-lg);background:var(--ink);color:var(--line)}
.guide-get h2{margin:0 0 4px;color:var(--line)}
.guide-get p{margin:0;color:var(--text-2-inv)}
.guide-notice{margin:28px 0 0;padding:16px 18px;border-left:4px solid var(--yellow);border-radius:0 var(--r) var(--r) 0;background:var(--chalk-2);font-size:15px}
.guide-notice p{margin:0}
.guides-grid{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.guide-tile{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--edge);border-radius:var(--r-lg);overflow:hidden;background:var(--line)}
.guide-tile__pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.guide-tile__body{display:flex;flex-direction:column;padding:18px 20px 20px}
.guide-tile__body h2{margin:0}
.guide-tile__body h2 a{color:var(--ink);text-decoration:none}
.guide-tile__body h2 a:hover{text-decoration:underline}
.guide-tile__acts{margin:auto 0 0;padding-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.guides-grid--small{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.guide-card{display:grid;gap:10px;color:var(--ink);text-decoration:none}
.guide-card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:var(--r)}
.guide-card__title{font:var(--hd-weight) 19px/1.2 var(--ff-display);font-stretch:var(--hd-stretch);text-transform:var(--hd-case)}
.guides-more{margin-top:36px}
/* ---------- 26. Motion: named entrances (.in), retired delays (.settled), living elements (.awake) ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.enter-rise>*,.enter-hop>*,.enter-climb>*,.enter-along>*{opacity:0;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--n,0) * var(--step,70ms))}
.enter-rise>*{transform:translateY(12px)}
.enter-hop>*{--step:90ms;transform:translateY(-12px);transition-timing-function:var(--ease-out),var(--ease-bounce)}
.enter-climb>*{--step:110ms;transform:translateY(24px)}
.enter-along>*{transform:translateX(-16px)}
.enter-rise.in>*,.enter-hop.in>*,.enter-climb.in>*,.enter-along.in>*{opacity:1;transform:none}
.enter-rise.settled>*,.enter-hop.settled>*,.enter-climb.settled>*,.enter-along.settled>*{transition-delay:0ms}
.enter-podium .srow{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.enter-podium .srow__rank{transform:perspective(200px) rotateX(70deg);transition:transform .6s var(--ease-out)}
.enter-podium.in .srow{opacity:1;transform:none}
.enter-podium.in .srow__rank{transform:none}
.enter-podium .srow:nth-child(3),.enter-podium .srow:nth-child(3) .srow__rank{transition-delay:0ms}
.enter-podium .srow:nth-child(2),.enter-podium .srow:nth-child(2) .srow__rank{transition-delay:140ms}
.enter-podium .srow:nth-child(1),.enter-podium .srow:nth-child(1) .srow__rank{transition-delay:280ms}
.enter-podium.settled .srow:nth-child(n),.enter-podium.settled .srow:nth-child(n) .srow__rank{transition-delay:0ms}
.enter-console .finder__line{transform:scaleY(0);transition:transform .9s var(--ease-out) .3s}
.enter-console .finder__group{opacity:0;transition:opacity .4s var(--ease-out)}
.enter-console.in .finder__line{transform:none}
.enter-console.in .finder__group{opacity:1}
.enter-console .finder__group:nth-of-type(2){transition-delay:.6s}.enter-console .finder__group:nth-of-type(3){transition-delay:.8s}.enter-console .finder__group:nth-of-type(4){transition-delay:1s}
.enter-console.settled .finder__group:nth-of-type(n){transition-delay:0ms}
html:not(.js) .reveal,html:not(.js) .enter-rise>*,html:not(.js) .enter-hop>*,html:not(.js) .enter-climb>*,html:not(.js) .enter-along>*,html:not(.js) .enter-podium .srow,html:not(.js) .enter-podium .srow__rank,html:not(.js) .enter-console .finder__group{opacity:1;transform:none}
html:not(.js) .enter-console .finder__line{transform:none}
@keyframes breathe{0%,100%{transform:none}50%{transform:scale(1.03)}}
.breathe{animation:breathe 5s var(--ease-inout) -1.5s infinite}
.live .pill--open .pill__glyph{animation:breathe-dot 6s var(--ease-inout) infinite}
.live li:nth-child(2n) .pill--open .pill__glyph{animation-delay:-2s}.live li:nth-child(3n) .pill--open .pill__glyph{animation-delay:-4s}
.live:not(.awake) *,.live:not(.awake) *::before,.live:not(.awake) *::after{animation-play-state:paused}
main>.band:nth-of-type(3n+1){--tj:56px}main>.band:nth-of-type(3n+2){--tj:92px}main>.band:nth-of-type(3n){--tj:38px}
@media (min-width:1100px) and (min-height:561px){
  main>.band:not(.finder-band)::before,main>.film-stages::before{content:"";position:absolute;left:30px;top:var(--tj,56px);height:1px;width:calc(var(--gl) - 44px + max(0px,(100% - var(--wrap) - var(--gl) - var(--gr)) / 2));background:var(--hairline);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
  main>.band--ink::before,main>.band--court::before,main>.band--court-deep::before,main>.film-stages::before{background:var(--line)}
  main>.band.in::before,main>.film-stages.in::before{transform:none}
  html:not(.js) main>.band::before{transform:none}
}
@media (max-height:560px){main>.band::before{display:none}}

/* ---------- 27. Reduced motion: final states, nothing moves (brief 15.1, item 10) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .hall i{animation:none!important}
  .reveal,.enter-rise>*,.enter-hop>*,.enter-climb>*,.enter-along>*,.enter-podium .srow,.enter-podium .srow__rank,.stage-frame .stage-frame__line,.enter-console .finder__group{opacity:1;transform:none}
  .enter-console .finder__line{transform:none}
  .director__lift{transform:scaleY(0)}
  main>.band::before{transform:none}
}
body.pinned .reveal,body.pinned .enter-rise>*,body.pinned .enter-hop>*,body.pinned .enter-climb>*,body.pinned .enter-along>*{opacity:1;transform:none}

/* ---------- 28. Print: the current table as a clean sheet (brief 11.9) ---------- */
@media print{
  .site-header,.rail,.thumbbar,.hall,.site-footer,.consent,.install-card,.sheet,.closing-band,.finder-band,.hero__scrub,.skip-link,.notice,.share-row,.swipe-nav{display:none!important}
  body{padding:0!important;background:var(--white);color:var(--black);font-size:12pt}
  .band,.band--ink,.band--court,.band--court-deep,.scoreboard,.page-head--ink{background:var(--white)!important;color:var(--black)!important;box-shadow:none!important;padding-block:12pt}
  a{text-decoration:none}
  .table-wrap{overflow:visible;border:0}
  .table-wrap table{min-width:0}
}