/* ==========================================================================
   WSKF Australia - inner-v2.css   (Inner-page redesign, November 2026)
   "Disciplined" foundation for every inner page.

   Load order (build/build.py): base, header, sections, owner-r1, assistant,
   inner, >>> inner-v2 <<<, page family CSS, a11y (last).

   Two layers:
     PART A  Global foundation. Applies to every inner page, old or new
             markup. Deliberately small and safe: anchor clearance under the
             floating header, and the inline enquiry card aligned to the
             page shell. Nothing else in Part A restyles legacy classes.
     PART B  The v2 component system (all classes prefixed v2-). Used by the
             benchmark pages (Adults 30 to 49, WSKF Perth, Grant Rollinson)
             and by every page rebuilt in the propagation step. Legacy ip-*
             components are left untouched, so pages that have not been
             rebuilt render exactly as before.

   Rules that every v2 component follows (see docs/redesign/DESIGN-SYSTEM-V2.md):
     * Shell: .c-page (1320px including gutters, about 1220px of content).
       Reading width: --v2-read (700px). Head width: --v2-head-w (760px).
     * Spacing is not text: section rhythm, gaps and insets are px based.
     * Type is rem based, with bounded growth: min(rem, max(px, cap)), the
       cap measured against the real column in container units (cqi).
     * Column switches are container queries in rem. At normal text they act
       as ordinary responsive breakpoints; with 150% or 200% text, or 200%
       zoom, the same queries fall back to fewer columns (reflow before
       resizing, design system sections 15 and 16).
     * Dark surfaces set --red-text:var(--red-text-dark) themselves.
     * Typography follows the homepage (the typography authority): H1 at the
       size of a homepage section heading (46px), H2 at the homepage's
       secondary display size (34px), homepage lede, button and kicker
       values. Montserrat only.
     * Containers and subgrid: an element with container-type is laid out
       independently, so it can never be a subgrid. Containment lives on the
       leaf component (cards, modules, eras, region bodies, hero copy), never
       on a layout wrapper that may need to share rows with its neighbours.
       The list of foundation containers is in B0 below.

   V2.1 (2 November 2026): the twelve family workarounds listed in
   INNER-PAGE-REDESIGN-REPORT.md section 8 are now foundation behaviour
   (quote--long, calligraphy, flipped feature tracks, venue actions, region,
   related descriptions, event cards, ruled sections, dark surfaces, era
   dates, containers and subgrid, facts rows), plus balanced chip rows, the
   light closing next step and homepage-aligned type. See
   docs/redesign/V2-1-FOUNDATION.md.
   ========================================================================== */


/* ==========================================================================
   PART A. GLOBAL FOUNDATION (every inner page)
   ========================================================================== */

/* A1. Anchor clearance. The header is fixed and floats 14px from the top, so
   every in-page target (chapters, FAQ, #enquiry, venue rows) stops below it
   instead of under it. --ip-top is the header height plus its offset. */
.ip-main [id]{ scroll-margin-top:calc(var(--ip-top) + 16px); }

/* A2. Inline enquiry card (legacy .ip-enquiry sections). The card sat in the
   1660px wide container while the page content sits in the 1320px shell,
   so above 1320px its edges did not line up with anything else on the
   page. It now uses the page shell. Below 1320px both widths are equal, so
   nothing moves there (and the console's container thresholds, measured
   below 1320px, are unaffected). */
.ip-enquiry > .c-wide{ max-width:var(--w-page); }

/* A3. The page column containers used by the v2 queries. .c-page and
   .ip-main are already containers (a11y.css section 6); restated here so
   this file does not depend on load order. */
.ip-main{ container:wskf-main / inline-size; }


/* ==========================================================================
   PART B. V2 COMPONENT SYSTEM
   ========================================================================== */

/* ---------- B0. Containers (for reference) -------------------------------
   Query containers set by the foundation: .ip-main (wskf-main), .c-page and
   .c-wide (wskf-col, a11y.css), .v2-body__main (v2-main), .v2-next
   (v2-next), and the leaf components .v2-hero__copy, .v2-rank, .v2-profile,
   .v2-module, .v2-card, .v2-era, .v2-region__body. None of these may be
   made a subgrid (container-type implies layout containment, which turns
   subgrid off silently). To align rows across siblings, make the wrapper
   the subgrid and keep containment on a child, as the era (B17) does. */

/* ---------- B1. Tokens --------------------------------------------------- */
:root{
  /* widths */
  --v2-read:43.75rem;                      /* 700px reading measure */
  --v2-head-w:47.5rem;                     /* 760px section head */
  --v2-aside-w:max(296px, min(18.5rem, 30vw));   /* summary card column; grows with enlarged text */

  /* rhythm (px: spacing does not grow with the reader's text size).
     V2.1: band padding moved toward the homepage rhythm (homepage bands
     pad 35 to 67px): 40 phone, 69 at 1280, 73 at 1366, 80 max. */
  --v2-sec:clamp(40px, calc(18px + 4vw), 80px);
  --v2-sec-tight:clamp(40px, calc(22px + 3vw), 68px);
  --v2-sec-rule:clamp(32px, calc(16px + 3vw), 52px);     /* ruled sections: 64 phone, 104 desktop between blocks */
  --v2-gap:clamp(24px, calc(10px + 3.2vw), 64px);        /* column gap */
  --v2-head-gap:clamp(24px, calc(14px + 2vw), 44px);     /* head to content */
  --v2-inset:clamp(18px, calc(12px + 1vw), 26px);        /* card padding */

  /* lines and surfaces */
  --v2-rule:rgba(0,0,0,.14);
  --v2-rule-ink:rgba(162,161,161,.32);
  --v2-card-line:rgba(0,0,0,.11);
  --v2-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 28px -18px rgba(0,0,0,.28);

  /* type scale (bounded growth; the cap uses the column the text sits in).
     Each heading size is a pair: a rem size that grows with the reader's
     text (-fluid) and the same size in px (-px) that a narrow column may
     not push below. Families that need their own cap reuse the pair:
       min(var(--v2-h3-fluid), max(var(--v2-h3-px), <column> / <longest word>))
     V2.1, aligned with the homepage (typography authority):
       H1  30 phone, 46 from about 1100px  (homepage section heading 46px;
           was 33 / 52, larger than anything on the homepage)
       H2  24 / 34                          (homepage secondary display 34px)
       H3  16.4 / 20                        (homepage card titles 16 / 20px)
       lede the homepage .lede: 16.8 / 20.5 */
  --v2-h1-fluid:clamp(1.875rem, calc(1.2rem + 2.4vw), 2.875rem);
  --v2-h1-px:clamp(30px, calc(19.2px + 2.4vw), 46px);
  --v2-h2-fluid:clamp(1.5rem, calc(1.2rem + 1.1vw), 2.125rem);
  --v2-h2-px:clamp(24px, calc(19.2px + 1.1vw), 34px);
  --v2-h3-fluid:clamp(1rem, calc(.94rem + .35vw), 1.25rem);
  --v2-h3-px:clamp(16px, calc(15.04px + .35vw), 20px);
  --v2-h1:min(var(--v2-h1-fluid), max(var(--v2-h1-px), calc(100cqi / var(--v2-h1-em, 6.6))));
  --v2-h2:min(var(--v2-h2-fluid), max(var(--v2-h2-px), calc(100cqi / var(--v2-h2-em, 7.4))));
  --v2-h3:min(var(--v2-h3-fluid), max(var(--v2-h3-px), calc(100cqi / var(--v2-h3-em, 8.6))));
  --v2-lede:clamp(1.05rem, 1.5vw, 1.28rem);
  --v2-body:clamp(1rem, calc(.97rem + .15vw), 1.0625rem);
  --v2-small:.875rem;
}

/* ---------- B2. Type atoms -----------------------------------------------
   The size tokens are declared again on every heading, so the per-heading
   hooks (--v2-h1-em, --v2-h2-em, --v2-h3-em: the longest word of that
   heading in ems) resolve on the heading itself. A custom property that
   refers to another custom property is resolved where it is declared, so
   the :root copies above can only use the defaults. */
.ip-main :is(h1,h2,h3,h4){
  --v2-h1:min(var(--v2-h1-fluid), max(var(--v2-h1-px), calc(100cqi / var(--v2-h1-em, 6.6))));
  --v2-h2:min(var(--v2-h2-fluid), max(var(--v2-h2-px), calc(100cqi / var(--v2-h2-em, 7.4))));
  --v2-h3:min(var(--v2-h3-fluid), max(var(--v2-h3-px), calc(100cqi / var(--v2-h3-em, 8.6))));
}
.v2-h1,.v2-hero h1{ font-size:var(--v2-h1); line-height:1.02; letter-spacing:-.025em; overflow-wrap:normal; }
.v2-h1 em,.v2-hero h1 em{ font-style:normal; color:var(--red); }
.v2-h2,.v2-head h2{ font-size:var(--v2-h2); line-height:1.08; letter-spacing:-.02em; overflow-wrap:normal; }
.v2-h2 em,.v2-head h2 em{ font-style:normal; color:var(--red); }
.v2-h3{ font-size:var(--v2-h3); line-height:1.2; letter-spacing:.005em; }
/* Balanced lines: no single-word orphan under a display heading. */
.v2-h1,.v2-hero h1,.v2-h2,.v2-head h2,.v2-quote p,.v2-next h2,.v2-profile__name{ text-wrap:balance; }
.v2-lede{ font-size:var(--v2-lede); line-height:1.55; color:var(--ip-text); max-width:52ch; }
.v2-small{ font-size:var(--v2-small); line-height:1.55; color:var(--muted); max-width:70ch; }
.v2-small a{ color:var(--red-text); font-weight:600; }

/* Kicker: the approved chapter mark ("01 / Label") at one size everywhere
   (the homepage .cap: 11.2px, 600, uppercase).
   V2.1: a long label wraps beside its number with a hanging indent instead
   of dropping whole onto a new line and leaving "06 /" alone (the homepage
   rule flex-wraps the label as one item). On phones the tracking tightens
   from .18em to .14em, the homepage's own chapter-number tracking, so more
   labels fit one line; the size never drops. */
.v2-kicker{ display:block; }
.ip-main .cap--red{ flex-wrap:nowrap; }
.ip-main .cap--red > .chapno{ flex:none; }
@media (max-width:599px){ .ip-main .cap{ letter-spacing:.14em; } }
/* V2.1 polish: on the smallest phones (below 375px) .12em, so the longer
   two-part hero kickers ("03 Clubs · Worldwide · The federation") still fit
   one line at 360px. Same 11.2px size. */
@media (max-width:374px){ .ip-main .cap{ letter-spacing:.12em; } }
/* A section title written as a kicker (the "Keep exploring" pattern). */
.v2-kicker-h{ margin-bottom:clamp(14px, 1.6vw, 20px); }

/* Buttons on phones: the homepage's phone button type (finale, footer and
   hero buttons at 600px and below: .76rem, .07em tracking, 50px tall) in
   place of the desktop .85rem / .09em, so a phone button reads the same on
   every page. The enquiry card keeps its own approved styles. */
@media (max-width:599px){
  .ip-main .btn:not(.enq__card .btn){ min-height:50px; font-size:.76rem; letter-spacing:.07em; }
}

/* Prose: one reading measure, one size. */
.v2-prose{ display:grid; gap:1em; max-width:var(--v2-read); color:var(--ip-text); font-size:var(--v2-body); line-height:1.68; }
.v2-prose p{ max-width:none; }
/* Body links only: a quiet .ln link or a button inside prose keeps its own
   style (V2.1: an .ln--light link in dark prose was turned deep red). */
.v2-prose a:not(.ln):not(.btn){ color:var(--red-deep); text-underline-offset:.18em; }

/* Actions row: primary button plus quiet links, wraps cleanly. */
.v2-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }

/* ---------- B3. Images: ratio families ----------------------------------
   One frame, five ratios. The image always covers its frame (no distortion,
   no letterboxing); set object-position inline when a face must stay in. */
.v2-media{ position:relative; margin:0; overflow:hidden; border-radius:4px; background:var(--paper-2); aspect-ratio:3/2; min-width:0; }
.v2-media img{ width:100%; height:100%; object-fit:cover; }
.v2-media--wide{ aspect-ratio:16/7; }       /* hero bands, editorial moments */
.v2-media--feature{ aspect-ratio:3/2; }     /* feature images */
.v2-media--land{ aspect-ratio:4/3; }        /* feature images, squarer */
.v2-media--portrait{ aspect-ratio:4/5; }    /* people, single figures */
.v2-media--square{ aspect-ratio:1/1; }
@media (max-width:599px){ .v2-media--wide{ aspect-ratio:16/9; } }
.v2-media figcaption,.v2-caption{ margin-top:8px; font-size:.8rem; line-height:1.45; color:var(--muted); }

/* ---------- B4. Sections and heads ---------------------------------------- */
.v2-sec{ position:relative; padding-block:var(--v2-sec); }
.v2-sec--tight{ padding-block:var(--v2-sec-tight); }
.v2-sec--white{ background:var(--white); }
.v2-sec--paper2{ background:var(--paper-2); }
.v2-sec--ink{ background:var(--ink); color:var(--paper); --red-text:var(--red-text-dark); }
.v2-sec--ink .v2-head h2,.v2-sec--ink h3{ color:var(--white); }
.v2-sec--ink .v2-head p:not(.cap),.v2-sec--ink .v2-prose{ color:var(--on-ink); }
/* Two sections on the same surface: a ruled line inside the shell instead of
   a second full gap. Put .v2-sec--rule on the second section.
   V2.1: the rule sits halfway in the ruled-section rhythm (--v2-sec-rule on
   each side: 64px phone, 104px desktop between the two blocks, the same as
   sections inside .v2-body). Before, both sides kept the full band padding
   (about 160 to 176px on desktop). The section before the rule gives up
   its bottom padding through :has(); where :has() is not supported the
   gap is still smaller than before. */
.v2-sec--rule{ padding-top:0; }
.v2-sec--rule > .c-page::before{ content:""; display:block; height:1px; background:var(--v2-rule); margin-bottom:var(--v2-sec-rule); }
.v2-sec:has(+ .v2-sec--rule){ padding-bottom:var(--v2-sec-rule); }
.v2-sec--ink.v2-sec--rule > .c-page::before{ background:var(--v2-rule-ink); }
.v2-clip{ overflow-x:clip; }

.v2-head{ display:grid; gap:12px; max-width:var(--v2-head-w); margin-bottom:var(--v2-head-gap); min-width:0; }
.v2-head > *{ min-width:0; }
.v2-head p:not(.cap){ font-size:var(--v2-body); line-height:1.62; color:var(--muted); max-width:60ch; }
.v2-head--flush{ margin-bottom:0; }
/* Split head: title left, short intro right, sharing one baseline row.
   Saves a full line of vertical space on desktop. */
.v2-head--split{ max-width:none; }
@container (min-width:56rem){
  .v2-head--split{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:var(--v2-gap); align-items:end; }
  .v2-head--split > .cap{ grid-column:1 / -1; }
  .v2-head--split > p:not(.cap){ padding-bottom:.2em; }
}

/* Editorial split: a narrow lead column (heading, quote, small facts) and a
   wide content column. Both columns start on the same top line. */
.v2-split{ display:grid; gap:20px var(--v2-gap); }
.v2-split > *{ min-width:0; }
@container (min-width:56rem){
  .v2-split{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }
  .v2-split--even{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .v2-split--wide-lead{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); }
  /* The lead column may follow the reader while a longer column scrolls. */
  .v2-split__lead--stick{ position:sticky; top:calc(var(--ip-top) + 28px); }
}
/* Medium widths (tablet landscape and small laptops, about 1000 to 1279px):
   the 5 / 7 lead column is too narrow for a two-line heading, so the two
   columns share the width evenly. The heading size is unchanged. The upper
   limit is in px, so 1280 and wider (and every enlarged-text view) keep the
   approved 5 / 7 composition. */
@container (min-width:56rem) and (max-width:1187.5px){
  .v2-split:not(.v2-split--even){ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* A long heading beside short prose: stacked on purpose at these widths
     (heading across the page, prose beneath), as on tablets. */
  .v2-split--stack-md{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- B5. Hero ------------------------------------------------------
   One grammar: breadcrumb, kicker, controlled H1, one lede, one action row,
   optional facts; media beside the copy on desktop, under it on phones.
   The media frame is capped so the hero fits a 1280 x 720 laptop. */
.v2-hero{ position:relative; overflow-x:clip; background:var(--paper); padding-top:calc(var(--ip-top) + clamp(2px, .8vw, 12px)); padding-bottom:clamp(36px, calc(18px + 3vw), 64px); }
.v2-hero .ip-crumbs{ margin-bottom:clamp(6px, 1.2vw, 14px); }
.v2-hero__grid{ display:grid; gap:clamp(24px, 3.4vw, 56px); align-items:center; }
.v2-hero__grid > *{ min-width:0; }
.v2-hero__copy{ container-type:inline-size; display:grid; gap:clamp(14px, 1.5vw, 20px); align-content:start; }
.v2-hero__copy > *{ min-width:0; }
.v2-hero__lede{ font-size:var(--v2-lede); line-height:1.55; color:var(--ip-text); max-width:50ch; }
.v2-hero__media{ position:relative; margin:0; }
.v2-hero__media .v2-media{ width:100%; }
/* Stacked on tablets: a wider, shorter frame so the photograph does not
   push the content a whole screen down. */
@container wskf-main (min-width:37.5rem) and (max-width:56.24rem){
  .v2-hero__media .v2-media{ aspect-ratio:16/9; }
}
@container wskf-main (min-width:56.25rem){
  .v2-hero__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .v2-hero__grid--even{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .v2-hero__grid--end{ align-items:end; }
  .v2-hero__media .v2-media{ max-height:max(300px, calc(100svh - var(--ip-top) - 150px)); }
}
/* Dark hero (profiles, worldwide). */
.v2-hero--ink{ background:var(--ink); color:var(--paper); --red-text:var(--red-text-dark); }
.v2-hero--ink h1{ color:var(--white); }
.v2-hero--ink .v2-hero__lede{ color:var(--on-ink); }
/* Grant's calligraphy column at the right edge (ip-cal--hero).
   V2.1, responsive behaviour for every calligraphy hero (light or ink):
     phones (below 600px): left out. At phone width the column can only sit
       over the kicker, H1 or lede, which is unreadable on a light hero and
       noisy on an ink one. It is decorative (aria-hidden), so nothing is lost.
     tablets (600px up, stacked hero): the grid keeps a right gutter for the
       column, so text, facts and rules stop before it.
     two-column hero: the gutter as before. */
@container wskf-main (min-width:56.25rem){ .v2-hero--cal .v2-hero__grid{ padding-right:clamp(0px, 7vw, 112px); } }
@media (min-width:600px){
  @container wskf-main (max-width:56.24rem){ .v2-hero--cal .v2-hero__grid{ padding-right:clamp(64px, 10vw, 96px); } }
}
@media (max-width:599px){ .v2-hero--cal .ip-cal--hero{ display:none; } }
.v2-hero .ip-cal--hero{ z-index:0; }
.v2-hero--cal{ overflow:clip; }                 /* the calligraphy column is cropped by the hero */
.v2-hero--ink .ip-cal--hero{ opacity:.15; }
.v2-hero--ink .ip-cal--hero img{ filter:invert(1); }
.v2-hero > .c-page{ position:relative; z-index:1; }

/* Facts: up to four facts on one ruled line (hero or body).
   V2.1: in a column narrower than 30rem (phones, and any column at
   enlarged text) the facts become label and value rows, so a long value
   (a club name, two instructors, "None needed") is never squeezed into a
   third of the phone width. Below 17rem the label sits over its value. */
.v2-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, max(104px, 6.5rem)), 1fr)); margin:4px 0 0; border-top:1px solid var(--grey-line); }
.v2-facts > div{ padding:12px 16px 2px 0; min-width:0; }
.v2-facts dt{ font-family:var(--display); font-weight:600; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.v2-facts dd{ margin:5px 0 0; font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.32; overflow-wrap:break-word; }
.v2-facts dd a{ color:inherit; text-decoration:none; border-bottom:1.5px solid var(--red); }
.v2-facts dd a:hover{ color:var(--red-deep); }
@container (max-width:29.99rem){
  .v2-facts:not(.v2-facts--club){ grid-template-columns:minmax(0,1fr); }
  .v2-facts:not(.v2-facts--club) > div{ display:grid; grid-template-columns:minmax(0, 7.5rem) minmax(0,1fr); gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--v2-rule); }
  .v2-facts:not(.v2-facts--club) dd{ margin:0; }
}
/* The label column is in rem so the longest label ("Experience",
   "Enrolment") always fits at enlarged text; below 17rem (a 320px phone
   keeps rows) the label sits over its value. */
@container (max-width:16.99rem){ .v2-facts:not(.v2-facts--club) > div{ grid-template-columns:minmax(0,1fr); gap:2px; } }
/* Club facts (four facts, one long value and an email address): compact
   label and value rows on phones, two columns once the copy column has room. */
.v2-facts--club{ grid-template-columns:minmax(0,1fr); }
.v2-facts--club > div{ padding:9px 0; border-bottom:1px solid var(--v2-rule); }
.v2-facts--club dd{ font-size:min(.92rem, max(14.72px, calc(100cqi / 11.5))); }
@container (min-width:21rem){
  .v2-facts--club > div{ display:grid; grid-template-columns:6.25rem minmax(0,1fr); gap:10px; align-items:baseline; }
  .v2-facts--club dd{ margin:0; }
}
@container (min-width:30rem){
  .v2-facts--club{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
  .v2-facts--club > div{ display:block; padding:12px 0 10px; }
  .v2-facts--club dd{ margin-top:5px; font-size:.96rem; }
  /* An odd number of club facts: the last one takes the full row, never a
     half row beside an empty cell. */
  .v2-facts--club > div:last-child:nth-child(odd){ grid-column:1 / -1; }
}
.v2-hero--ink .v2-facts{ border-top-color:var(--v2-rule-ink); }
.v2-hero--ink .v2-facts > div{ border-bottom-color:var(--v2-rule-ink); }
.v2-hero--ink .v2-facts dt{ color:var(--on-ink); }
.v2-hero--ink .v2-facts dd{ color:var(--white); }

/* Rank plate (instructor profiles): one large dan numeral and its line. */
.v2-rank{ container-type:inline-size; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(14px, 2vw, 24px); align-items:end; border-top:2px solid var(--red); padding-top:clamp(14px, 1.6vw, 20px); }
.v2-rank__n{ font-family:var(--display); font-weight:700; line-height:.78; color:var(--red); font-size:min(clamp(4.6rem, 9vw, 8rem), 40cqi); font-variant-numeric:lining-nums; }
.v2-rank__t{ display:grid; gap:6px; padding-bottom:4px; min-width:0; }
.v2-rank__t b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:1.12; font-size:min(clamp(1.1rem, 1.6vw, 1.45rem), max(17.6px, calc((100cqi - 7rem) / 7.6))); }
.v2-rank__t span{ font-size:.88rem; line-height:1.5; color:var(--muted); }
.v2-hero--ink .v2-rank__t b{ color:var(--white); }
.v2-hero--ink .v2-rank__t span{ color:var(--on-ink); }

/* ---------- B6. Page navigation ("On this page") --------------------------
   A ruled strip under the hero with the page's own chapter labels. Never
   sticky (no fixed element may cover content).

   Balanced rows (V2.1, shared with .v2-chips in B14): no strip or chip
   group can leave one item alone on a short last row.
     From a 30rem column: the items sit inline at their natural width, so
       a strip that fits on one line looks exactly as before. When it needs
       two or more lines, the line breaker balances them (text-wrap:balance
       treats each item as one unbreakable box): 5 + 1 becomes 3 + 3,
       4 + 1 becomes 3 + 2, 7 + 1 becomes 4 + 4. The gaps are margins (the
       list's own font size is 0, so the spaces between items take no room).
     Below 30rem (phones, enlarged text): an even two-column grid; an odd
       last item takes the whole last row. One column below 17rem.
   Labels never break inside a word; a label longer than the line wraps
   inside its own box. Browsers without text-wrap:balance wrap normally. */
.v2-pagenav{ background:var(--paper); border-bottom:1px solid var(--v2-rule); }
.v2-pagenav > .c-page{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; padding-block:12px; }
.v2-pagenav__t{ font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.v2-pagenav ul{ flex:1 1 auto; min-width:0; margin:0; padding:0; list-style:none; }
/* V2.1 polish: the family chip lists (History's four styles, .ppl-styles;
   the Clubs hub state filter, .vd-filter) share this layout too. */
:is(.v2-pagenav ul,.v2-chips,.ppl-styles,.vd-filter){ display:block; margin-bottom:-6px; font-size:0; line-height:0; text-wrap:balance; }
:is(.v2-pagenav ul,.v2-chips,.ppl-styles,.vd-filter) > li{ display:inline-flex; vertical-align:top; max-width:100%; margin:0 6px 6px 0; }
:is(.v2-pagenav ul,.v2-chips,.ppl-styles,.vd-filter) > li > :is(a,span,button){ max-width:100%; line-height:1.25; }
@container (max-width:29.99rem){
  :is(.v2-pagenav ul,.v2-chips,.ppl-styles,.vd-filter){ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:0; }
  :is(.v2-pagenav ul,.v2-chips,.ppl-styles,.vd-filter) > li{ display:flex; min-width:0; margin:0; }
  :is(.v2-pagenav ul,.v2-chips,.ppl-styles,.vd-filter) > li > :is(a,span,button){ flex:1; min-width:0; }
  :is(.v2-pagenav ul,.v2-chips,.ppl-styles,.vd-filter) > li:last-child:nth-child(odd){ grid-column:1 / -1; }
}
@container (max-width:16.99rem){ :is(.v2-pagenav ul,.v2-chips,.ppl-styles,.vd-filter){ grid-template-columns:minmax(0,1fr); } }
.v2-pagenav a{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px; border:1px solid rgba(0,0,0,.16); border-radius:2px; background:var(--white); font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); text-decoration:none; transition:border-color .2s var(--ease),color .2s var(--ease); }
.v2-pagenav a b{ font-weight:700; color:var(--red-text); font-variant-numeric:tabular-nums; }
.v2-pagenav a:hover{ border-color:var(--ink); }
.v2-pagenav--ink{ background:var(--ink); border-bottom-color:var(--v2-rule-ink); --red-text:var(--red-text-dark); }
.v2-pagenav--ink .v2-pagenav__t{ color:var(--on-ink); }
.v2-pagenav--ink a{ background:transparent; border-color:rgba(255,255,255,.24); color:var(--paper); }
.v2-pagenav--ink a:hover{ border-color:var(--paper); }
@media (max-width:599px){
  .v2-pagenav > .c-page{ display:grid; gap:8px; padding-block:12px 14px; }
  /* V2.1 polish: 8px inset, 6px number gap and .03em tracking (size stays
     11.2px) so the common three-word labels fit one line of the 393px
     two-column grid; a few navigation labels were also shortened (see
     docs/redesign/V2-1-POLISH.md). */
  .v2-pagenav a{ gap:6px; padding:0 8px; font-size:.7rem; letter-spacing:.03em; }
  /* V2.1.1: a strip whose longest label is a few px over the 390 to 430px
     cell (Articles, Self-control). Same size; 6px inset, 5px number gap and
     .02em tracking on that strip only. */
  .v2-pagenav--snug a{ gap:5px; padding:0 6px; letter-spacing:.02em; }
}

/* ---------- B7. Body with a sticky summary card ---------------------------
   Long detail pages (age detail, club pages). From 1100px (68.75rem, so
   enlarged text falls back to one column) a slim, light summary card rides
   beside the content. It holds the page context, two or three facts or
   jump links, one Enquire button (to the inline #enquiry section) and the
   phone number. It is not the form, never scrolls inside itself, and is
   never shown on tablets or phones, where the inline section is enough.
   Inside .v2-body every section sits on the page surface; sections are
   separated by rules, never by colour blocks beside the card. */
.v2-body__main{ container:v2-main / inline-size; min-width:0; }
.v2-body__main > .v2-sec{ padding-inline:0; padding-block:var(--v2-sec-rule); }
.v2-body__main > .v2-sec:first-child{ padding-top:clamp(40px, calc(20px + 3.4vw), 64px); }
.v2-body__main > .v2-sec:last-child{ padding-bottom:var(--v2-sec); }
.v2-body__main > .v2-sec + .v2-sec{ border-top:1px solid var(--v2-rule); }
.v2-body__aside{ display:none; }
@container wskf-main (min-width:68.75rem){
  .v2-body__aside{ padding-top:clamp(40px, calc(20px + 3.4vw), 64px); }
  .v2-body{ display:grid; grid-template-columns:minmax(0,1fr) var(--v2-aside-w); column-gap:clamp(40px, 4.6vw, 76px); align-items:stretch; }
  .v2-body__aside{ display:block; padding-bottom:var(--v2-sec); }
}
.v2-glance{ position:sticky; top:calc(var(--ip-top) + 24px); display:grid; gap:14px; padding:20px 18px 18px; background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--red); border-radius:4px; box-shadow:var(--v2-shadow); }
.v2-glance__ctx{ display:flex; align-items:baseline; gap:8px; font-family:var(--display); font-weight:700; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; }
.v2-glance__ctx::before{ content:""; width:7px; height:7px; flex:none; background:var(--red); transform:translateY(-1px); }
.v2-glance__facts{ display:grid; gap:0; margin:0; border-top:1px solid var(--v2-rule); }
.v2-glance__facts > div{ display:grid; grid-template-columns:minmax(0,5.6rem) minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px solid var(--v2-rule); }
.v2-glance__facts dt{ font-family:var(--display); font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:.2em; }
.v2-glance__facts dd{ margin:0; font-family:var(--display); font-weight:600; font-size:.86rem; line-height:1.35; overflow-wrap:break-word; }
.v2-glance__facts a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(228,25,30,.5); }
.v2-glance__facts a:hover{ color:var(--red-deep); }
.v2-glance__jump{ display:grid; margin:0; padding:0; list-style:none; border-top:1px solid var(--v2-rule); }
.v2-glance__jump a{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; border-bottom:1px solid var(--v2-rule); font-family:var(--display); font-weight:600; font-size:.84rem; color:var(--ink); text-decoration:none; }
.v2-glance__jump a b{ font-size:.7rem; letter-spacing:.08em; color:var(--red-text); font-variant-numeric:tabular-nums; margin-right:8px; }
.v2-glance__jump a span{ flex:1; }
.v2-glance__jump .i{ width:.9em; height:.9em; color:var(--red); transition:transform .2s var(--ease); }
.v2-glance__jump a:hover{ color:var(--red-deep); }
.v2-glance__jump a:hover .i{ transform:translateX(3px); }
.v2-glance .btn{ width:100%; min-height:48px; padding-inline:10px; font-size:.76rem; letter-spacing:.07em; text-align:center; line-height:1.3; }
.v2-glance__tel{ font-size:.84rem; line-height:1.45; color:var(--muted); max-width:none; }
.v2-glance__tel a{ color:var(--red-text); font-weight:700; white-space:nowrap; }

/* ---------- B8. Points: short labelled items in a ruled 2-up grid ------- */
.v2-points{ display:grid; margin:0; padding:0; list-style:none; border-top:1px solid var(--v2-rule); }
.v2-points > *{ min-width:0; padding:16px 0 17px; border-bottom:1px solid var(--v2-rule); }
.v2-points dt,.v2-points b{ display:flex; align-items:baseline; gap:10px; font-family:var(--display); font-weight:700; font-size:1rem; line-height:1.3; letter-spacing:.005em; margin-bottom:5px; }
.v2-points dt::before,.v2-points b::before{ content:""; width:6px; height:6px; flex:none; background:var(--red); transform:translateY(-.15em); }
.v2-points dd,.v2-points p,.v2-points > li > span{ display:block; margin:0; padding-left:16px; font-size:.97rem; line-height:1.58; color:var(--muted); max-width:46ch; }
@container (min-width:38rem){
  .v2-points{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--v2-gap); }
}

/* ---------- B9. Choice: two clear options, each with one action -------- */
.v2-choice{ display:grid; gap:clamp(14px, 1.8vw, 24px); }
.v2-choice__opt{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; overflow:hidden; min-width:0; box-shadow:var(--v2-shadow); }
.v2-choice__opt--primary{ border-top:3px solid var(--red); }
.v2-choice__media{ margin:0; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); }
.v2-choice__media img{ width:100%; height:100%; object-fit:cover; }
.v2-choice__body{ flex:1; display:flex; flex-direction:column; gap:12px; padding:var(--v2-inset); }
.v2-choice__body h3{ font-size:var(--v2-h3); line-height:1.2; }
.v2-choice__body ul{ flex:1; display:grid; align-content:start; gap:8px; margin:0 0 6px; padding:0; list-style:none; }
.v2-choice__body li{ position:relative; padding-left:16px; font-size:.95rem; line-height:1.5; color:var(--ip-text); }
.v2-choice__body li::before{ content:""; position:absolute; left:0; top:.66em; width:7px; height:1.5px; background:var(--red); }
.v2-choice__body .btn{ align-self:flex-start; max-width:100%; text-align:center; }
@container (min-width:40rem){ .v2-choice{ grid-template-columns:repeat(2,minmax(0,1fr)); } .v2-choice__media{ aspect-ratio:3/2; } }

/* ---------- B10. Steps: numbered, three across or as rows --------------- */
.v2-steps{ display:grid; gap:0; margin:0; padding:0; list-style:none; counter-reset:none; }
.v2-steps > li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; align-content:start; padding:18px 0 20px; border-top:1px solid var(--v2-rule); min-width:0; }
.v2-steps > li:last-child{ border-bottom:1px solid var(--v2-rule); }
.v2-steps .idx{ font-size:1.5rem; color:var(--red); line-height:1; padding-top:2px; min-width:2.2ch; }
/* Enlarged text in a narrow column: the number sits above the title. */
@container (max-width:16rem){ .v2-steps > li{ grid-template-columns:minmax(0,1fr); } }
.v2-steps h3{ font-size:var(--v2-h3); line-height:1.2; margin-bottom:6px; }
.v2-steps p{ font-size:.97rem; line-height:1.6; color:var(--ip-text); max-width:52ch; }
.v2-steps a{ color:var(--red-deep); }
@container (min-width:44rem){
  .v2-steps--cols{ grid-template-columns:repeat(var(--v2-n,3),minmax(0,1fr)); column-gap:clamp(20px, 2.6vw, 36px); }
  .v2-steps--cols > li{ grid-template-columns:minmax(0,1fr); border-top:2px solid var(--ink); padding-top:16px; }
  .v2-steps--cols > li:last-child{ border-bottom:0; }
  .v2-steps--cols .idx{ font-size:1.25rem; margin-bottom:6px; }
}
.v2-sec--ink .v2-steps > li{ border-color:var(--v2-rule-ink); }
.v2-sec--ink .v2-steps p{ color:var(--on-ink); }

/* ---------- B11. Feature: image beside copy, one shared top line ------- */
.v2-feature{ display:grid; gap:clamp(20px, 2.8vw, 40px); align-items:start; }
.v2-feature > *{ min-width:0; }
/* Flip: the image moves to the right and keeps the narrow track (7fr copy,
   5fr image). V2.1: before, the tracks stayed 5fr / 7fr, so a flipped image
   landed in the wide column. */
@container (min-width:44rem){
  .v2-feature{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .v2-feature--flip{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .v2-feature--flip > :first-child{ order:2; }
  .v2-feature--center{ align-items:center; }
}

/* ---------- B12. FAQ: compact accordion cards ---------------------------
   Uses the approved native <details class="faq__item"> markup (wording,
   sign and behaviour unchanged). Each question is its own light card on
   the page surface: scannable, never one grey block. */
.v2-faq .faq__list{ display:grid; gap:8px; border-top:0; }
.v2-faq .faq__item{ background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; transition:border-color .2s var(--ease); }
.v2-faq .faq__item:hover,.v2-faq .faq__item[open]{ border-color:rgba(0,0,0,.24); }
.v2-faq .faq__item summary{ min-height:56px; padding:14px var(--v2-inset); gap:16px; font-size:clamp(.95rem, calc(.92rem + .15vw), 1.02rem); }
.v2-faq .faq__a{ padding:0 var(--v2-inset) 18px; max-width:68ch; }
.v2-faq .faq__a p{ font-size:.95rem; color:var(--ip-text); }
.v2-faq__help{ margin-top:14px; font-size:var(--v2-small); color:var(--muted); }
.v2-faq__help a{ color:var(--red-text); font-weight:700; }
/* Full-width variant: title column and list column. */
@container (min-width:56rem){
  .v2-faq--split{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:var(--v2-gap); align-items:start; }
  .v2-faq--split > .v2-head{ margin-bottom:0; }
}

/* ---------- B13. Venues: compact, scannable rows ------------------------
   Number, venue, room and street, and the venue's own actions on its row.
   One light container with restrained dividers. */
.v2-venues{ margin:0; padding:0; list-style:none; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; box-shadow:var(--v2-shadow); }
.v2-venue{ display:grid; grid-template-columns:min(2rem, 32px) minmax(0,1fr); gap:4px 10px; padding:18px clamp(14px, 3vw, 26px) 18px clamp(12px, 2.4vw, 16px); min-width:0; }
.v2-venue + .v2-venue{ border-top:1px solid var(--v2-rule); }
.v2-venue .idx{ font-size:1.05rem; color:var(--red-text); padding-top:3px; }
.v2-venue__main{ min-width:0; }
/* Venue name: H3 scale, capped by the row's text column; a name with a
   long word sets --v2-venue-em (its longest word in ems, default 7.6). */
.v2-venue h3{ font-size:min(var(--v2-h3-fluid), max(var(--v2-h3-px), calc((100cqi - 76px) / var(--v2-venue-em, 7.6)))); line-height:1.2; letter-spacing:.01em; }
.v2-venue address{ margin-top:5px; font-style:normal; font-size:.93rem; line-height:1.5; color:var(--muted); }
.v2-venue__place{ display:block; color:var(--ink); font-weight:600; }
/* Actions: each button sizes to its label and the row wraps when the
   labels do not fit; a label longer than the row wraps inside its button
   (V2.1: before, the buttons shared the line equally with nowrap labels,
   which overflowed at 320px with 200% text). From a 46rem row they sit at
   their natural width at the row's end. */
.v2-venue__acts{ grid-column:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.v2-venue__acts a{ flex:1 1 auto; max-width:100%; justify-content:center; text-align:center; }
.v2-venue__acts a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px min(14px, 3vw); border:1px solid rgba(0,0,0,.18); border-radius:2px; font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.09em; line-height:1.25; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:normal; transition:border-color .2s var(--ease),background-color .2s var(--ease); }
.v2-venue__acts a:hover{ border-color:var(--ink); }
.v2-venue__acts a:first-child{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.v2-venue__acts a:first-child:hover{ background:var(--ink-3); }
.v2-venue__acts .i{ width:.95em; height:.95em; color:var(--red); }
@container (min-width:46rem){
  .v2-venue{ grid-template-columns:min(2.6rem, 41.6px) minmax(0,1fr) auto; align-items:center; column-gap:20px; padding-inline:16px var(--v2-inset); }
  .v2-venue .idx{ align-self:start; padding-top:4px; }
  .v2-venue__acts{ grid-column:3; margin-top:0; justify-content:flex-end; }
  .v2-venue__acts a{ flex:0 0 auto; }
}
.v2-note{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:.9rem; line-height:1.55; color:var(--muted); max-width:72ch; }
.v2-note .i{ flex:none; width:1rem; height:1rem; margin-top:.2em; color:var(--red); }
.v2-note a{ color:var(--ink); font-weight:700; }

/* ---------- B14. Chips: small linked tags (age groups, venues) ----------
   Layout: balanced rows, shared with the page navigation (B6). */
.v2-chips{ padding:0; list-style:none; }
.v2-chips a,.v2-chips span{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid rgba(0,0,0,.18); background:var(--white); border-radius:2px; font-family:var(--display); font-weight:600; font-size:.84rem; color:var(--ink); text-decoration:none; }
.v2-chips b{ color:var(--red-text); font-variant-numeric:tabular-nums; }
.v2-chips a:hover{ border-color:var(--ink); }
/* Aligned columns (V2.1 polish): a set that reads as one block, such as
   the eight principles (four of character, four of attention). From a
   46rem column, four columns that size to their longest chip, so both rows
   end on the same line (4 + 4). Narrower: the shared balanced rows (4 + 4
   at tablet width) and the two-column phone grid. */
@container (min-width:46rem){
  .v2-chips.v2-chips--cols{ display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:6px; margin-bottom:0; }
  .v2-chips.v2-chips--cols > li{ display:flex; margin:0; }
  .v2-chips.v2-chips--cols > li > :is(a,span){ flex:1; }
}
.v2-label{ margin:clamp(22px, 2.6vw, 30px) 0 10px; font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ---------- B15. Quote: exact words, one controlled statement ---------- */
.v2-quote{ margin:0; display:grid; gap:14px; }
.v2-quote p{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em; line-height:1.12; font-size:min(clamp(1.35rem, calc(1rem + 1.2vw), 1.9rem), max(clamp(21.6px, calc(16px + 1.2vw), 30.4px), calc(100cqi / 8))); max-width:22ch; }
.v2-quote p em{ font-style:normal; color:var(--red); }
.v2-quote footer{ font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.14em; line-height:1.55; text-transform:uppercase; color:var(--muted); }
.v2-quote footer a{ color:var(--red-text); }
.v2-quote--rule{ padding-left:clamp(16px, 2vw, 24px); border-left:3px solid var(--red); }
/* Long quotation (V2.1, replaces ag-quote and pr-quote): a sentence or more
   of exact words set as reading text, in sentence case, not as an uppercase
   display line. 18 to 22px, semibold, 42 characters a line at most. */
.v2-quote--long p{ text-transform:none; font-weight:600; letter-spacing:-.005em; line-height:1.4; max-width:42ch;
  font-size:min(clamp(1.125rem, calc(1rem + .45vw), 1.375rem), max(18px, calc(100cqi / 12))); }

/* ---------- B16. Profile module (an instructor inside another page) ---- */
.v2-profile{ container-type:inline-size; display:grid; gap:clamp(22px, 3vw, 40px); padding:clamp(20px, 2.6vw, 34px); background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; box-shadow:var(--v2-shadow); }
.v2-profile > *{ min-width:0; }
.v2-profile__name{ font-size:var(--v2-h2); line-height:1.05; }
.v2-profile__role{ margin-top:8px; font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red-text); }
.v2-profile .v2-prose{ margin-top:16px; font-size:.98rem; }
.v2-profile .v2-actions{ margin-top:18px; }
@container (min-width:40rem){ .v2-profile{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); } }

/* Dan ladder: year and grade on a quiet vertical rule. */
.v2-ladder{ display:grid; margin:0; padding:0; list-style:none; border-left:2px solid var(--grey-line); }
.v2-ladder li{ position:relative; display:grid; grid-template-columns:min(3.6rem, 57.6px) minmax(0,1fr); gap:10px; padding:7px 0 7px 16px; font-size:.9rem; line-height:1.4; }
.v2-ladder li::before{ content:""; position:absolute; left:-6px; top:.95rem; width:10px; height:10px; border-radius:50%; background:var(--white); border:2px solid var(--ink); }
.v2-ladder li:last-child::before{ background:var(--red); border-color:var(--red); }
.v2-ladder b{ font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums; }
.v2-ladder span{ color:var(--muted); }

/* ---------- B17. Timeline: dated entries in one or two eras ------------- */
.v2-timeline{ display:grid; gap:clamp(28px, 3.4vw, 44px); }
@container (min-width:46rem){ .v2-timeline--eras{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--v2-gap); } }
/* V2.1: the era is its own container (so an era can sit inside a subgrid
   layout, such as the History chapters, without a family workaround), and
   its date column is a token:
     --v2-era-date   min(4rem, 64px), for years ("1983")
     .v2-era--words  min(7.75rem, 124px), for word dates ("Early 1920s")
   In a narrow era (below 16rem, or 30rem for word dates: phones with
   enlarged text, narrow columns) the date sits above its entry in red, so
   neither the date nor the text is squeezed. */
.v2-era{ container-type:inline-size; --v2-era-date:min(4rem, 64px); min-width:0; padding-top:16px; border-top:3px solid var(--ink-3); }
.v2-era--words{ --v2-era-date:min(7.75rem, 124px); }
.v2-era--red{ border-top-color:var(--red); }
.v2-era h3{ font-size:var(--v2-h3); line-height:1.2; }
.v2-era__who{ margin-top:6px; font-size:.9rem; line-height:1.5; color:var(--muted); }
.v2-era ol{ display:grid; margin:16px 0 0; padding:0; list-style:none; }
.v2-era li{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px 14px; padding:11px 0; border-top:1px solid var(--v2-rule); font-size:.95rem; line-height:1.5; color:var(--ip-text); }
.v2-era li > *{ min-width:0; }
.v2-era li b{ font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums; color:var(--red-text); overflow-wrap:normal; }
@container (min-width:16rem){
  .v2-era li{ grid-template-columns:var(--v2-era-date) minmax(0,1fr); }
  .v2-era li b{ color:var(--ink); }
}
@container (max-width:29.99rem){
  .v2-era--words li{ grid-template-columns:minmax(0,1fr); }
  .v2-era--words li b{ color:var(--red-text); }
}
.v2-era li.is-grade b{ color:var(--red-text); }
.v2-era li.is-grade span{ font-weight:600; color:var(--ink); }

/* ---------- B18. Values: a controlled grid of short words --------------- */
/* At most three across, never narrower than the longest word needs
   ("Perceptiveness"); one column on phones and with enlarged text. */
.v2-values{ display:grid; gap:8px; margin:0; padding:0; list-style:none; grid-template-columns:repeat(auto-fill, minmax(min(100%, max(210px, 13.125rem, calc((100% - 16px) / 3))), 1fr)); }
.v2-values > li{ display:flex; align-items:center; gap:12px; min-height:58px; padding:14px 16px; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; font-family:var(--display); font-weight:700; font-size:min(.95rem, max(15.2px, calc((100cqi - 48px) / 11.4))); letter-spacing:.07em; text-transform:uppercase; line-height:1.2; min-width:0; }
.v2-values > li::before{ content:""; width:3px; height:1.3em; flex:none; background:var(--red); }


/* ---------- B19. Modules: supporting cards in a row -------------------- */
.v2-modules{ display:grid; gap:clamp(12px, 1.6vw, 20px); }
.v2-module{ container-type:inline-size; display:grid; align-content:start; gap:10px; padding:var(--v2-inset); background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--ink); border-radius:4px; min-width:0; }
.v2-module--red{ border-top-color:var(--red); }
.v2-module h3{ font-size:var(--v2-h3); line-height:1.2; }
.v2-module p{ font-size:.96rem; line-height:1.6; color:var(--ip-text); max-width:60ch; }
.v2-module__links{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:6px; }
/* V2.1 polish: in a narrow module (phones, two modules side by side on a
   tablet) the quiet links stack as a short list instead of two plus one. */
@container (max-width:29.99rem){ .v2-module__links{ flex-direction:column; align-items:flex-start; gap:10px; } }
@container (min-width:44rem){ .v2-modules{ grid-template-columns:repeat(var(--v2-n,2),minmax(0,1fr)); } }

/* ---------- B20. Cards: club, event and editorial cards ----------------
   For directories (state club cards), event lists (calendar), article
   indexes and hub discovery grids. One card grammar: optional media in a
   fixed ratio, kicker, title, one or two lines, a link row. */
.v2-cards{ display:grid; gap:clamp(12px, 1.6vw, 20px); margin:0; padding:0; list-style:none; grid-template-columns:minmax(0,1fr); }
@container (min-width:40rem){ .v2-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (min-width:62rem){ .v2-cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.v2-card{ container-type:inline-size; position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; overflow:hidden; min-width:0; transition:border-color .2s var(--ease); }
.v2-card__media{ margin:0; aspect-ratio:3/2; overflow:hidden; background:var(--paper-2); }
.v2-card__media img{ width:100%; height:100%; object-fit:cover; }
.v2-card__body{ flex:1; display:flex; flex-direction:column; gap:8px; padding:var(--v2-inset); }
.v2-card__body h3{ font-size:var(--v2-h3); line-height:1.2; }
.v2-card__body p{ font-size:.95rem; line-height:1.55; color:var(--ip-text); }
.v2-card__facts{ display:grid; margin:4px 0 0; border-top:1px solid var(--v2-rule); }
/* Card facts: label beside value (a rem column, so labels fit at enlarged
   text); in a narrow card (below 24rem: phones, enlarged text) the label
   sits over its value so the value is never squeezed (V2.1). */
.v2-card__facts > div{ display:grid; grid-template-columns:minmax(0,6rem) minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px solid var(--v2-rule); }
@container (max-width:23.99rem){ .v2-card__facts > div{ grid-template-columns:minmax(0,1fr); gap:3px; } }
.v2-card__facts dt{ font-family:var(--display); font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:.2em; }
.v2-card__facts dd{ margin:0; font-weight:600; font-size:.9rem; line-height:1.4; }
.v2-card__links{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:auto; padding-top:10px; }
.v2-card--link:hover,.v2-card:has(> a.v2-card__cover:hover){ border-color:var(--ink); }
.v2-card__cover{ position:absolute; inset:0; z-index:1; }          /* whole-card link (keep a real text link inside too) */
.v2-card--ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); --red-text:var(--red-text-dark); }
.v2-card--ink h3{ color:var(--white); }
.v2-card--ink p{ color:var(--on-ink); }
/* Event card: date block beside the details. V2.1: the date panel grows
   with the reader's text (96px at normal text), so a range such as
   "28–30" always fits on one line; it was a fixed 104px. */
.v2-card--event{ flex-direction:row; }
.v2-card__date{ flex:none; display:grid; align-content:center; justify-items:center; gap:2px; width:max(96px, 5.6rem); padding:14px 8px; background:var(--ink); color:var(--white); text-align:center; font-family:var(--display); }
.v2-card__date b{ font-size:1.6rem; line-height:1; font-weight:700; white-space:nowrap; letter-spacing:-.02em; }
.v2-card__date span{ font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.v2-card__date--red{ background:var(--red); }
@container (max-width:22rem){ .v2-card--event{ flex-direction:column; } .v2-card__date{ width:auto; justify-items:start; padding:10px var(--v2-inset); grid-auto-flow:column; justify-content:start; gap:10px; align-items:baseline; } }

/* Regional directory module (worldwide, states): a head (kicker, title as
   h2 or h3, optional line, count) and the region's entries.
   V2.1, a sound base at every width:
     phones and narrow columns: head above a single-column list of ruled
       rows (one entry per row, easy to scan);
     from a 30rem list column: two columns; from 48rem: three;
     from a 56rem shell: the head becomes a column beside the list and
       stays in view while a long list scrolls.
   The list's columns are measured on .v2-region__body (a container) when
   the list sits in one, otherwise on the shell. */
.v2-region{ display:grid; gap:18px 20px; padding-block:clamp(24px, 3vw, 36px); border-top:1px solid var(--v2-rule); }
.v2-region > *{ min-width:0; }
.v2-region__head{ display:grid; gap:10px; align-content:start; }
.v2-region__head :is(h2,h3){ font-size:var(--v2-h2); line-height:1.05; }
.v2-region__count{ font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.v2-region__body{ container-type:inline-size; min-width:0; }
.v2-region__list{ display:grid; gap:0 var(--v2-gap); margin:0; padding:0; list-style:none; grid-template-columns:minmax(0,1fr); }
@container (min-width:30rem){ .v2-region__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (min-width:48rem){ .v2-region__list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container wskf-col (min-width:56rem){
  .v2-region{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:var(--v2-gap); align-items:start; }
  .v2-region__head{ position:sticky; top:calc(var(--ip-top) + 24px); }
}
.v2-region__list > li{ padding:10px 0; border-top:1px solid var(--v2-rule); min-width:0; font-size:.92rem; line-height:1.4; }
.v2-region__list b{ display:block; font-family:var(--display); font-weight:700; }
.v2-region__list span{ color:var(--muted); font-size:.85rem; }

/* ---------- B21. Dark feature band and closing next step --------------- */
.v2-band{ background:var(--ink); color:var(--paper); padding-block:var(--v2-sec-tight); --red-text:var(--red-text-dark); }
.v2-band .v2-head h2,.v2-band h3{ color:var(--white); }
/* :not(.cap): a kicker on the band keeps its (dark-surface) red. */
.v2-band p:not(.cap){ color:var(--on-ink); }

/* Closing next step (pages without the enquiry card).
   V2.1: a light band. It sits directly on the black global footer, and as
   a black band the two read as one large black block. On white, with the
   hairline every closing band uses (the inline enquiry section is the same
   white band), the final call to action is clearly separate from the
   footer, with no extra gap. The phone link is styled here, whatever its
   class. */
.v2-next{ container:v2-next / inline-size; background:var(--white); color:var(--ink); padding-block:clamp(40px, calc(24px + 3vw), 68px); border-top:1px solid var(--v2-rule); }
.v2-next__in{ display:grid; gap:18px; align-items:end; }
.v2-next h2{ color:var(--ink); font-size:var(--v2-h2); line-height:1.08; max-width:20ch; }
.v2-next p{ color:var(--muted); margin-top:10px; max-width:52ch; }
.v2-next a[href^="tel:"]{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-family:var(--display); font-weight:700; font-size:clamp(1.2rem, calc(1.05rem + .5vw), 1.5rem); letter-spacing:.02em; color:var(--ink); text-decoration:none; white-space:nowrap; }
.v2-next a[href^="tel:"] .i{ width:.8em; height:.8em; color:var(--red); }
.v2-next a[href^="tel:"]:hover{ color:var(--red-deep); text-decoration:underline; text-underline-offset:.2em; }
.v2-next .v2-actions{ gap:12px 28px; }
@container v2-next (min-width:56rem){ .v2-next__in{ grid-template-columns:minmax(0,1fr) auto; } }

/* ---------- B21b. Every dark v2 surface ---------------------------------
   V2.1: one place for link, caption, quote and list colours on the dark
   surfaces (ink section, band, ink hero, ink card), instead of a patch in
   each family. Small red text is handled by --red-text (set on each dark
   surface); here: body links light and underlined in red, link hover
   white (the light-surface deep red is unreadable on black), quotation,
   caption, footer and label text in the on-ink grey, and the hairlines
   of points, steps and related cards in the dark-surface rule. */
:is(.v2-sec--ink,.v2-band,.v2-hero--ink,.v2-card--ink) :is(.v2-prose,.v2-hero__lede,.v2-small,.v2-note,.v2-head,.v2-faq__help) a:not(.btn):not(.ln){ color:var(--white); text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:1.5px; text-underline-offset:.2em; }
:is(.v2-sec--ink,.v2-band,.v2-hero--ink,.v2-card--ink) :is(.v2-prose,.v2-hero__lede,.v2-small,.v2-note,.v2-head,.v2-faq__help) a:not(.btn):not(.ln):hover{ color:var(--paper); text-decoration-color:var(--white); }
:is(.v2-sec--ink,.v2-band,.v2-hero--ink,.v2-card--ink) .ln:not(.ln--light):hover{ color:var(--white); }
:is(.v2-sec--ink,.v2-band) .v2-quote p{ color:var(--white); }
:is(.v2-sec--ink,.v2-band,.v2-hero--ink) :is(.v2-quote footer,.v2-caption,.v2-media figcaption,.v2-label,.v2-note){ color:var(--on-ink); }
:is(.v2-sec--ink,.v2-band) .v2-points{ border-top-color:var(--v2-rule-ink); }
:is(.v2-sec--ink,.v2-band) .v2-points > *{ border-bottom-color:var(--v2-rule-ink); }
:is(.v2-sec--ink,.v2-band) :is(.v2-points b,.v2-points dt){ color:var(--white); }
:is(.v2-sec--ink,.v2-band) :is(.v2-points p,.v2-points dd,.v2-points > li > span){ color:var(--on-ink); }
.v2-band .v2-steps > li{ border-color:var(--v2-rule-ink); }
.v2-band .v2-steps p{ color:var(--on-ink); }
/* Column steps keep a strong top rule on a dark band, in red. */
:is(.v2-sec--ink,.v2-band) .v2-steps--cols > li{ border-top-color:var(--red); }
:is(.v2-sec--ink,.v2-band) .v2-related a{ background:transparent; border-color:var(--v2-rule-ink); }
:is(.v2-sec--ink,.v2-band) .v2-related a:hover{ border-color:var(--paper); }
:is(.v2-sec--ink,.v2-band) .v2-related b,:is(.v2-sec--ink,.v2-band) .v2-related a:hover b{ color:var(--white); }
:is(.v2-sec--ink,.v2-band) :is(.v2-related .cap,.v2-related a > span:not(.cap)){ color:var(--on-ink); }

/* ---------- B22. Phone line (used in the enquiry head and next step) --- */
.v2-tel{ display:grid; gap:4px; justify-items:start; }
.v2-tel__t{ font-size:var(--v2-small); color:var(--muted); max-width:none; }
.v2-tel a{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-family:var(--display); font-weight:700; font-size:clamp(1.25rem, calc(1.1rem + .5vw), 1.6rem); letter-spacing:.02em; color:var(--ink); text-decoration:none; }
.v2-tel a .i{ width:.8em; height:.8em; color:var(--red); }
.v2-tel a:hover{ color:var(--red-deep); }

/* ---------- B23. Inline enquiry section ---------------------------------
   The one shared enquiry card (#enquiry, two steps) at page-shell width,
   introduced by a short head and the phone number. It never scrolls inside
   itself: at 1280 x 720 step 1 and step 2 both fit on screen. This section
   replaces the full-form sticky rail and, on pages that have it, the
   closing call to action band. */
.v2-enquire{ background:var(--white); padding-block:var(--v2-sec); border-top:1px solid var(--v2-rule); }
.v2-enquire__head{ display:grid; gap:18px var(--v2-gap); margin-bottom:clamp(22px, 2.6vw, 34px); }
.v2-enquire__head > *{ min-width:0; }
.v2-enquire__head .v2-head{ margin-bottom:0; }
@container (min-width:56rem){
  .v2-enquire__head{ grid-template-columns:minmax(0,1fr) auto; align-items:end; }
}
.v2-enquire .enq__card{ box-shadow:0 22px 48px -26px rgba(0,0,0,.38); transition:outline-color .3s var(--ease); outline:3px solid transparent; outline-offset:3px; }
.v2-enquire .enq__card.is-flash{ outline-color:var(--red); }
.v2-enquire .enq__card{ scroll-margin-top:calc(var(--ip-top) + 12px); }
/* Step 2 on wide columns: the four contact fields on one row, the reply
   method and consent beside the message. Same fields, same order, same
   behaviour; only the grid changes, so the card fits a 1280 x 720 screen
   without scrolling inside itself. A rem query, so enlarged text keeps the
   approved two-column step 2. */
@container (min-width:58rem){
  .v2-enquire .frow--2{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .v2-enquire #field-method{ grid-column:1 / 3; grid-row:2; align-self:start; margin-top:0; padding-top:0; }
  .v2-enquire #field-consent{ grid-column:1 / 3; grid-row:3; align-self:start; }
  .v2-enquire #field-message{ grid-column:3 / 5; grid-row:2 / span 2; }
  .v2-enquire #field-message textarea{ min-height:76px; }
}

/* ---------- B24. Related content ----------------------------------------
   Same inner markup as the legacy list (span.cap, b, span, arrow svg), so
   a page only changes the list class from ip-related to v2-related. */
.v2-related{ display:grid; gap:10px; margin:0; padding:0; list-style:none; grid-template-columns:minmax(0,1fr); }
@container (min-width:40rem){ .v2-related{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px, 1.6vw, 20px); } }
.v2-related > li{ min-width:0; }
.v2-related a{ position:relative; display:grid; align-content:start; gap:6px; height:100%; min-height:44px; padding:18px 52px 20px 20px; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; color:inherit; text-decoration:none; transition:border-color .2s var(--ease); }
.v2-related a > *{ min-width:0; }
.v2-related .cap{ color:var(--muted); font-size:min(var(--t-cap), max(11.2px, calc((100cqi - 72px) / 10.6))); }
.v2-related b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.18; font-size:min(1.1rem, max(17.6px, calc((100cqi - 72px) / 9.4))); }
/* Description: bounded growth like the title (V2.1), so a long word
   ("Championships") never splits at 200% text in a phone column. */
.v2-related a > span:not(.cap){ font-size:min(.9rem, max(14.4px, calc((100cqi - 72px) / 9.4))); line-height:1.45; color:var(--muted); }
.v2-related .i{ position:absolute; right:18px; top:20px; width:1.05rem; height:1.05rem; color:var(--red); transition:transform .2s var(--ease); }
.v2-related a:hover{ border-color:var(--ink); }
.v2-related a:hover b{ color:var(--red-deep); }
.v2-related a:hover .i{ transform:translateX(3px); }

/* ---------- B25. Motion and print ---------------------------------------
   v2 components reuse the approved progressive-enhancement reveals (.rv,
   .ip-imgrev handled by js/inner.js). Nothing here hides content. */
@media print{
  .v2-pagenav,.v2-body__aside,.v2-enquire{ display:none !important; }
  .v2-hero--ink{ background:none; color:#000; }
  .v2-region__head{ position:static; }
}