/* GENERATED by site-prototype/tools/wp-port.mjs — do not edit.
   Source: site-prototype/src/site.css
   2 development-only skip-link rule stripped.
   22 bare #fff rewritten to var(--on-hero).
   Token names resolve through the alias layer in ../style.css. */

/* ============================================================
   630 rebuild prototype — layout and components.
   Token references only: every colour, size, radius and font in
   this file comes from themes.css. Changing an art direction
   must never require editing this file.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); }
/* WordPress stores controlled Training sections as valid core Group blocks,
   so their filter identity is a class rather than an unsupported data
   attribute in saved markup. Keep them out of the default route; site.js
   reveals only the section selected by an approved query. */
.cc630-filter-only { display: none; }
.cc630-filter-only.is-controlled-match { display: block; }
/* ---------- focus ----------
   One ring, defined once (standard, I-2). Everything keyboard-reachable gets
   the same 3px ring in the focus token; the dark bands swap the token for
   white because brand red reads at roughly 1.6:1 against the header ink.
   A local override exists only where the ring must sit inside its element —
   the program bar, whose links meet a hairline it would cross. A new override
   needs that kind of geometric reason, not a taste. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.site-hdr, .site-ft, .skip { --focus: var(--on-hero); }
/* ---------- site header ---------- */
.site-hdr {
  position: sticky; top: 0; z-index: 40;
  background: var(--hero-a); color: var(--on-hero);
  box-shadow: 0 6px 18px rgb(15 20 28 / .18);
}
/* WordPress fixes its signed-in toolbar above the page. Keep the same public
   sticky behavior without letting the toolbar cover the header during review. */
body.admin-bar .site-hdr { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-hdr { top: 46px; }}

.hdr-in {
  max-width: var(--layout-wide); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 22px; min-height: 4.5rem;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-hero); }
.brand img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.brand .wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem; }
.brand .wordmark i { color: var(--brand); font-style: normal; }
.nav { display: flex; align-items: stretch; gap: 2px; margin-left: auto; order: 2; }
.nav > .nav-link,
.nav-group > .nav-parent {
  color: var(--on-hero-dim); text-decoration: none; font-weight: 600; font-size: .9rem;
  min-height: 44px; padding: 10px 4px 10px 12px; border-bottom: 3px solid transparent;
  white-space: nowrap; display: flex; align-items: center;
}
.nav > .nav-link { padding-right: 12px; }
.nav > .nav-chooser {
  min-height: 44px; margin: 4px 8px 4px 0; padding: 7px 12px;
  border: 1px solid rgb(255 255 255 / .62); border-radius: var(--radius-sm);
  color: var(--on-hero); font-weight: 700; gap: 10px; justify-content: center;
  background: transparent; transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.nav > .nav-chooser .nav-chooser__arrow { font-size: 1.05rem; line-height: 1; }
.nav > .nav-chooser:hover,
.nav > .nav-chooser:focus-visible { color: var(--on-hero); background: rgb(255 255 255 / .12); border-color: var(--on-hero); }
.nav > .nav-chooser.is-current { color: var(--on-hero); border-color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); }
.nav > .nav-chooser:active { transform: translateY(1px); }
.nav-group { position: relative; display: flex; align-items: stretch; }
.nav-disclosure {
  min-width: 44px; min-height: 44px; padding: 0 9px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--on-hero-dim); cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
html[data-subnav-enhanced="true"] .nav-disclosure { display: flex; }
.nav-caret {
  width: 7px; height: 7px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.nav-group.is-open .nav-caret { margin-top: 4px; transform: rotate(225deg); }
.nav > .is-current,
.nav-group.is-current > .nav-parent,
.nav-group.is-current > .nav-disclosure,
.nav-group.is-open > .nav-parent,
.nav-group.is-open > .nav-disclosure { color: var(--on-hero); border-bottom-color: var(--brand); }
.nav > .nav-link:hover,
.nav-group > .nav-parent:hover,
.nav-disclosure:hover { color: var(--on-hero); }
.subnav {
  display: none;
  position: absolute; top: calc(100% - 1px); left: 0; z-index: 2;
  min-width: 248px; padding: 8px; background: var(--hero-a);
  border-top: 3px solid var(--brand); border-left: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 24px rgb(15 20 28 / .24);
}
.nav-group.is-open > .subnav { display: block; }
.nav-group.is-closed > .subnav { display: none; }
@media (min-width: 821px) {
  .nav-group:not(.is-closed):hover > .subnav,
  .nav-group.is-open > .subnav { display: block; }
  .nav-group:not(.is-closed):hover > .nav-parent,
  .nav-group:not(.is-closed):hover > .nav-disclosure,
  .nav-group.is-open > .nav-parent,
  .nav-group.is-open > .nav-disclosure { color: var(--on-hero); border-bottom-color: var(--brand); }}

.subnav a {
  color: var(--on-hero-dim); text-decoration: none; font-size: .875rem; font-weight: 600;
  min-height: 44px; padding: 10px 12px; display: flex; align-items: center;
  border-left: 3px solid transparent; white-space: nowrap;
}
.subnav a:hover { color: var(--on-hero); background: rgba(255,255,255,.08); }
.subnav a[aria-current] { color: var(--on-hero); border-left-color: var(--brand); background: rgba(255,255,255,.08); }
.reg-cta {
  position: relative; min-height: 44px; display: inline-flex; align-items: center;
  background: var(--brand); color: var(--on-hero); text-decoration: none; font-weight: 700;
  font-size: .875rem; padding: 8px 48px 8px 16px; border: 2px solid var(--brand);
  border-radius: var(--radius-sm); white-space: nowrap;
  transition: background-color .15s ease, transform .1s ease;
}
.reg-cta::after {
  content: '→'; position: absolute; inset: 0 0 0 auto; width: 34px;
  display: grid; place-items: center; border-left: 1px solid rgb(255 255 255 / .35);
  font-size: 1rem; line-height: 1;
}
.reg-cta:hover { background: var(--brand-press); }
.reg-cta:active { background: var(--brand-press); transform: translateY(1px); }
.reg-cta { order: 3; }
/* Hidden unless JavaScript declares itself before the stylesheet loads. A
   no-JavaScript phone therefore keeps the ordinary navigation visible and
   never exposes a disclosure button that cannot operate. */
.navtoggle { display: none; }
@media (max-width: 1080px) {
  /* The compact header wraps its registration action onto a second row. Deep
     links need to clear the full closed header, not the desktop-height guess. */
  html { scroll-padding-top: 128px; }
  html.has-journey-rail { scroll-padding-top: 88px; }
  .hdr-in {
    flex-wrap: wrap; gap: 6px; padding-top: 10px; padding-bottom: 6px;
    min-height: 0;
  }
  .brand { gap: 8px; }
  .brand .wordmark { font-size: .98rem; }
  /* A wrapped desktop menu cost 110px above the hero on a 390px screen,
     and the earlier `overflow-x: auto` never took effect because the nav also
     wraps — so it was a two-row block, not a scroller, and nothing indicated
     there was more. It is a disclosure now: one control, opened deliberately. */
  .js .navtoggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm);
    color: var(--on-hero); font: inherit; font-size: .875rem; font-weight: 600;
    min-height: 44px; padding: 9px 10px; cursor: pointer; margin-left: auto;
  }
  .navtoggle::before {
    content: ""; width: 15px; height: 2px; background: currentColor;
    box-shadow: 0 5px currentColor, 0 -5px currentColor;
  }
  .navtoggle[aria-expanded="true"] { background: rgba(255,255,255,.12); }
  .reg-cta { margin-left: 0; padding-left: 11px; padding-right: 36px; }
  .nav { order: 4; width: 100%; margin-left: 0; flex-direction: column; gap: 0; }
  .reg-cta { order: 5; }
  .js .navtoggle[aria-expanded="true"] ~ .reg-cta {
    width: 100%; justify-content: space-between;
  }
  .js .navtoggle[aria-expanded="false"] ~ .nav { display: none; }
  .nav-group { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 44px; }
  .nav > .nav-link,
  .nav-group > .nav-parent {
    min-height: 44px; padding: 11px 2px;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav > .nav-chooser {
    min-height: 48px; margin: 8px 0 6px; padding: 11px 12px;
    border: 1px solid rgb(255 255 255 / .62); justify-content: space-between;
  }
  .nav-disclosure {
    width: 44px; min-width: 44px; padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav > .is-current,
  .nav-group.is-current > .nav-parent,
  .nav-group.is-current > .nav-disclosure { border-bottom-color: var(--brand); }
  .subnav {
    grid-column: 1 / -1; position: static; min-width: 0; padding: 2px 0 8px 14px;
    border: 0; border-left: 3px solid var(--brand); box-shadow: none;
  }
  html:not([data-subnav-enhanced="true"]) .subnav { display: block; }
  .subnav a { min-height: 44px; padding: 10px 12px; white-space: normal; }}

@media (prefers-reduced-motion: reduce) {
  .nav-caret { transition: none; }}

/* ---------- shell ---------- */
main { display: block; }
.wrap { max-width: var(--layout-wide); margin: 0 auto; padding: 0 var(--gutter); }
/* One reading line. A narrow band is the SAME 1240px container as a wide one;
   only its content is capped at the measure, aligned to the shared left edge.
   The previous shape — a second, smaller container centered independently —
   made the text's left edge lurch ±210px five times down one page, which is
   the "CMS import" look the teardown measured. Prose is capped at the measure;
   the difference between a narrow band and a wide one is layout, never a
   different grid. */
.narrow { max-width: var(--layout-wide); }
.wrap.narrow > * { max-width: var(--measure); }
.crumb { font-size: var(--small); color: var(--muted); padding: 16px 0 0; }
/* 24px is the WCAG 2.2 minimum target (2.5.8) and these measured 18. Found by
   the keyboard pass, which is also where the "more open" links below turned up
   at 17 — small text set at its natural line height lands under the floor
   without looking cramped, so nothing here is visibly different. */
.crumb a { color: var(--muted); text-decoration: none; display: inline-block; min-height: 24px; line-height: 24px; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb b { color: var(--ink); font-weight: 600; }
/* ---------- hero ---------- */
.hero {
  background: linear-gradient(150deg, var(--hero-a), var(--hero-b) 62%, var(--hero-c));
  color: var(--on-hero); padding: var(--hero-pad) 0;
  /* Contains the photograph's bleed. 100vw counts the scrollbar and the content
     box does not, so the bleed overshoots by the scrollbar width on any page
     long enough to scroll — which is every page. Clipping here fixes it at the
     source; clip rather than hidden so no scroll container is created. */
  overflow-x: hidden; overflow-x: clip;
}
.hero .wrap { max-width: var(--layout-wide); }
/* Wide cards and comparisons should use an ultrawide display without letting
   prose lines expand with it. The separate measure token above keeps reading
   blocks at the same width. */
@media (min-width: 2200px) {
  :root { --layout-wide: var(--layout-ultrawide); }
}
.hero-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }}

.hero-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 34%, transparent), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: flex-end; padding: 16px;
}
.hero-media .slot {
  font-size: .76rem; line-height: 1.45; color: rgba(255,255,255,.9);
  background: rgba(10,13,17,.55); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm); padding: 9px 12px; backdrop-filter: blur(3px);
}
.hero-media .slot b { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-hero); margin-bottom: 3px; }
.eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: var(--case-eyebrow);
  color: var(--hero-eyebrow); font-weight: 700; margin-bottom: 10px;
}
.hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--display-xl); letter-spacing: var(--track-display);
  line-height: 1.12; margin: 0 0 14px; max-width: 22ch;
}
.hero .lede { font-size: 1.06rem; color: var(--on-hero-dim); margin: 0 0 24px; max-width: 60ch; }
.hero .lede b { color: var(--on-hero); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero-actions .btn { color: var(--on-hero); }
.hero-actions .btn.ghost { color: var(--on-hero); border-color: color-mix(in srgb, var(--on-hero) 72%, transparent); }
.hero-actions .btn.ghost:hover { background: color-mix(in srgb, var(--on-hero) 10%, transparent); }
.hero-actions .btn.ghost::after { border-left-color: color-mix(in srgb, var(--on-hero) 30%, transparent); }
/* Phone hero, sized so "Open right now" is reachable.
   The hero's job at 390 is the headline, the audience sentence and one image
   that says who this is for — not a full screen of its own. The 4/3 media
   ratio came from the desktop two-column layout, where it balances the text;
   stacked on a phone it just spends 266px. 16/9 keeps the athlete and the
   crop reads fine at phone width. Every number here was measured against the
   listing's distance from the top of the page, not chosen for looks. */
/* The 561-900px band is the worst case, not the phone: it gets neither the
   phone tightening below nor the two-column hero above, so at 768 the 4/3
   media rendered 471px tall and the homepage ran 5,474px — 1,300px longer
   than the same page on a desktop. The crop is the fix; the type scale is
   not, because a tablet has the width for the full headline. */
@media (max-width: 900px) {
  .hero-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .hero { padding-top: 20px; padding-bottom: 20px; }
  .hero h1 { font-size: clamp(1.75rem, 8.2vw, 2.1rem); margin-bottom: 10px; }
  .hero .lede { font-size: 1rem; margin-bottom: 0; }
  .hero-actions { margin-top: 16px; }
  .hero-actions .btn { width: 100%; }
  .hero-media { aspect-ratio: 3 / 1; }
  /* The banner is an alert strip, not a content band, so it does not need a
     content band's breathing room on a phone. Two selectors deep on purpose:
     a media query adds no specificity, and `.band` sets this padding further
     down the file. */
  .band.band-banner { padding-top: 16px; padding-bottom: 16px; margin-top: 0; }}

/* Commitments and Partners are campaign surfaces, not data pages. Their hero
   leads with the visitor's ambition and one action; the photograph is part of
   the proposition instead of a framed illustration below an editorial head. */
.hero.is-campaign { position: relative; isolation: isolate; --hero-pad: clamp(48px, 7vw, 88px); }
.hero.is-campaign::before {
  content: ''; position: absolute; z-index: -1; width: 34rem; height: 34rem;
  left: clamp(-25rem, -18vw, -10rem); bottom: -28rem; border: 1px solid rgb(255 255 255 / .13);
  border-radius: 50%; box-shadow: 0 0 0 72px rgb(255 255 255 / .035), 0 0 0 144px rgb(255 255 255 / .025);
}
.hero.is-campaign .hero-grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(34px, 5vw, 76px); }
.hero.is-campaign .hero-copy { position: relative; z-index: 1; }
.hero.is-campaign h1 { max-width: 10ch; font-size: clamp(3rem, 5.25vw, 5.55rem); line-height: .94; letter-spacing: -.055em; }
.hero.is-campaign .lede { max-width: 48ch; font-size: clamp(1.02rem, 1.4vw, 1.17rem); line-height: 1.65; }
.hero.is-commitments .hero-media img { object-position: 54% center; }
.hero.is-partners .hero-media img { object-position: 47% center; }
.hero-actions .six30-button.is-ghost .wp-block-button__link {
  background: transparent; color: var(--on-hero); border-color: color-mix(in srgb, var(--on-hero) 72%, transparent);
}
.hero-actions .six30-button.is-ghost .wp-block-button__link:hover { background: color-mix(in srgb, var(--on-hero) 10%, transparent); }
.hero-actions .six30-button.is-ghost .wp-block-button__link::after { border-left-color: color-mix(in srgb, var(--on-hero) 30%, transparent); }
@media (min-width: 901px) {
  .hero.is-campaign .hero-media { min-height: 34rem; }}

@media (max-width: 900px) {
  .hero.is-campaign .hero-grid { grid-template-columns: 1fr; }
  .hero.is-campaign h1 { max-width: 12ch; }}

@media (max-width: 560px) {
  .hero.is-campaign { --hero-pad: 28px; padding-top: var(--hero-pad); padding-bottom: 0; }
  .hero.is-campaign h1 { font-size: clamp(2.45rem, 12vw, 3.2rem); line-height: .96; margin-bottom: 14px; }
  .hero.is-campaign .lede { margin-bottom: 0; }
  .hero.is-campaign .hero-actions { padding-bottom: 26px; }
  .hero.is-campaign .hero-actions > *,
  .hero.is-campaign .hero-actions .six30-button,
  .hero.is-campaign .hero-actions .wp-block-button__link { width: 100%; }
  .hero.is-campaign .hero-media { aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--gutter)); }}

.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
/* A door must not read as one of the static cards beside it (standard, I-1):
   same white card, same shadow was Gestalt similarity working against the one
   element whose whole job is being pressed. So it carries the listing rows'
   go-cue at rest, and hover/focus answer with the same border the age-band
   cards use. The transition is on the base class — a lift with no easing is a
   glitch, not a micro-interaction. */
.door {
  position: relative;
  background: var(--card); color: var(--ink); text-decoration: none;
  border: var(--card-border); border-radius: var(--radius); padding: 16px 40px 16px 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25;
  box-shadow: var(--card-shadow);
  transition: transform .15s ease, border-color .15s ease;
}
.door span:not(.door-go) { display: block; font-family: var(--font-body); font-weight: 400; font-size: .875rem; color: var(--muted); margin-top: 4px; }
.door .door-go {
  position: absolute; top: 14px; right: 14px;
  color: var(--brand); font-family: var(--font-body); font-weight: 600;
  transition: transform .15s ease;
}
.door:hover, .door:focus-visible { transform: translateY(-1px); border-color: var(--brand); }
.door:hover .door-go, .door:focus-visible .door-go { transform: translateX(3px); }
.door:active { transform: translateY(0); }
/* page header for interior pages */
.page-head { padding: calc(var(--rhythm) * 0.7) 0 0; }
.page-head h1 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--display-lg); letter-spacing: var(--track-display); line-height: 1.16; margin: 6px 0 10px;
}
.page-head .kicker {
  font-size: .74rem; letter-spacing: .12em; text-transform: var(--case-eyebrow);
  color: var(--brand); font-weight: 700;
}
.page-head .lede { font-size: 1.02rem; color: var(--ink-2); margin: 0; max-width: 62ch; }
/* Direction B across the system. Every interior page gets the same short red
   opening rule, tighter display setting and wider editorial measure. The page
   job and first component still determine what follows; this is hierarchy,
   not a new archetype or a page-specific layout. */
.page-head {
  position: relative;
  background: linear-gradient(var(--brand), var(--brand)) no-repeat left top / clamp(52px, 6vw, 84px) 4px;
}
.page-head h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.3rem);
  line-height: .98; max-width: 18ch; margin-top: 9px;
}
.page-head .lede {
  max-width: 70ch; margin-top: 15px; font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
}
/* Direction B candidate. The standard page head stays the owner of the title
   and audience statement; this modifier changes only their editorial weight.
   The decision block below owns the photograph, fork and tryout handoff, so no
   content or lifecycle state is copied to make the composition. */
.page-head.is-editorial { padding-top: clamp(20px, 3vw, 40px); }
.page-head.is-editorial h1 {
  font-size: clamp(2.65rem, 1.9rem + 3.5vw, 5.4rem);
  line-height: .94; max-width: 11ch; margin-top: 10px;
}
.page-head.is-editorial .lede {
  font-size: clamp(1rem, .94rem + .25vw, 1.13rem);
  max-width: 70ch; margin-top: 18px;
}
/* ---------- program section bar ----------
   Chrome between the breadcrumb and the page head on every girls/boys page —
   the site's nav grammar (quiet links, red underline marks current), never the
   data grammar (no ink top-rule, no cell borders, no grid). A flex row of
   natural-width links: five short labels fit one row from ~360px, so there is
   no collapse and no disclosure; below that the row scrolls sideways with the
   cut-off item visible as its own affordance. The exit rides last, demoted. */
.program-bar { border-bottom: 1px solid var(--line); }
.program-bar .wrap {
  display: flex; align-items: baseline; gap: 4px;
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.program-bar .wrap::-webkit-scrollbar { display: none; }
/* The scrollbar is hidden, so on a phone the only sign more items existed was
   a label lucky enough to be cut mid-word. This fades the clipped edge — an
   explicit cue — and site.js lifts it at the end of the scroll so the last
   item is never dimmed. Class set by script; with no JavaScript there is no
   mask and the row clips as before, the safe direction. */
/* A mask reads only the alpha channel, so the opaque stop's hue is
   irrelevant — the ink token keeps the stylesheet literal-free (the port
   gate enforces that) without changing what the mask does. */
.program-bar .wrap.is-clipped {
  -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, var(--ink) calc(100% - 36px), transparent);
}
.program-bar-eyebrow {
  color: var(--brand); font-size: .68rem; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; margin-right: 10px; flex: none;
}
.program-bar a {
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .86rem;
  padding: 12px 10px 10px; border-bottom: 3px solid transparent; flex: none;
}
.program-bar a:hover { color: var(--ink); }
.program-bar a[aria-current] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 700; }
.program-bar-exit { margin-left: auto; font-size: .875rem; color: var(--muted); font-weight: 500; }
.program-bar a:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
/* ---------- decision block ----------
   The hub's first screen: question, two described doors, one anchored action —
   and the section's photograph beside them, because the first screen has to
   carry the information AND the art direction. Stacking them was the fold
   problem: a text column with a void beside it, and the photograph three
   screens down where it illustrated nothing. */
.decision { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 34px; align-items: stretch; }
.decision-main { min-width: 0; }
.decision-media { min-width: 0; }
.decision-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.decision:not(.has-media) { display: block; max-width: 820px; }
@media (max-width: 900px) {
  .decision { grid-template-columns: 1fr; }
  .decision-media img { aspect-ratio: 16 / 9; height: auto; }}

.decision-note { color: var(--ink-2); font-size: var(--small); margin: 10px 0 0; max-width: 62ch; }
.decision-act { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.decision-state { margin: 0 0 8px; font-weight: 700; font-size: .9rem; color: var(--ink); }
.decision-act .btn { margin: 0; }
.decision-act .fine { margin-top: 8px; }
/* Direction B: an editorial program lead built from the existing decision
   contract. On wide screens the photograph and ruled decision package compose
   as one lead; on phones the action remains ahead of the photograph. It is a
   variant, not a second component, route or content record; the WordPress port
   renders this same markup through SPEC.decision. */
.decision.is-editorial {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 0;
  --decision-panel-inset: 16px;
  border-top: 4px solid var(--ink);
}
.decision.is-editorial .decision-media { grid-column: 1; grid-row: 1; overflow: hidden; }
.decision.is-editorial .decision-media img {
  width: 100%; height: auto; aspect-ratio: 12 / 4.75; object-fit: cover;
  object-position: center 68%; border-radius: 0;
}
.decision.is-editorial.p-top .decision-media img { object-position: center top; }
.decision.is-editorial.p-bottom .decision-media img { object-position: center bottom; }
.decision.is-editorial .decision-main {
  grid-column: 1; grid-row: 1; z-index: 1; align-self: end; display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
  column-gap: clamp(26px, 4vw, 54px);
  margin: 0; padding: 16px 0 2px;
  background: var(--card); box-shadow: 0 -8px 28px rgb(15 20 28 / .16);
}
.decision.is-editorial .decision-main > .sec { grid-column: 1; grid-row: 1; }
.decision.is-editorial .decision-summary {
  grid-column: 1; grid-row: 2; max-width: 64ch;
  margin-top: 8px;
  color: var(--ink-2); font-size: .92rem; line-height: 1.45;
}
.decision.is-editorial .decision-main > .doors {
  grid-column: 1; grid-row: 3;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--ink);
}
.decision-choice {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; height: 100%;
  padding: 13px 14px; background: color-mix(in srgb, var(--card) 94%, var(--ink) 6%);
  color: var(--ink); text-decoration: none; border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .7);
  transition: border-color .15s ease, background-color .15s ease;
}
.decision-choice__grade {
  color: var(--brand); font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; line-height: 1.2; text-transform: uppercase;
}
.decision-choice__title {
  font-family: var(--font-display); font-size: 1rem; line-height: 1.2;
}
.decision-choice__detail { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.decision-choice:hover,
.decision-choice:focus-visible {
  background: color-mix(in srgb, var(--brand) 6%, var(--card));
  border-color: var(--brand);
}
.decision-choice:hover .decision-choice__title,
.decision-choice:focus-visible .decision-choice__title { text-decoration: underline; text-underline-offset: 3px; }
.decision.is-editorial .decision-note { grid-column: 1; grid-row: 4; margin: 8px 0 10px; }
.decision.is-editorial .decision-act {
  grid-column: 2; grid-row: 1 / 5; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  margin: 0; padding: 4px 0 10px clamp(24px, 3vw, 38px);
  border-top: 0; border-left: 1px solid var(--line);
}
.decision.is-editorial .decision-state {
  font-family: var(--font-display); font-size: 1.08rem; line-height: 1.25;
}
.decision.is-editorial .decision-act .btn { align-self: flex-start; }
/* The panel and photograph stay on the page's shared outer edge. Its contents
   need their own inset: without one, the heading begins on the panel border and
   the handoff button ends against the opposite border. Phones use a smaller
   inset so the action-first stack keeps its usable width. */
.decision.is-editorial .decision-main > .sec,
.decision.is-editorial .decision-summary,
.decision.is-editorial .decision-main > .doors,
.decision.is-editorial .decision-note {
  margin-right: var(--decision-panel-inset);
  margin-left: var(--decision-panel-inset);
}
@media (min-width: 901px) {
  .decision.is-editorial { --decision-panel-inset: clamp(22px, 2.2vw, 32px); }
  .decision.is-editorial .decision-main {
    column-gap: 0; padding-top: 22px; padding-bottom: 0;
  }
  .decision.is-editorial .decision-note {
    margin: 12px var(--decision-panel-inset) 22px;
  }
  .decision.is-editorial .decision-act {
    padding: var(--decision-panel-inset);
  }}

@media (max-width: 900px) {
  .page-head.is-editorial h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .page-head.is-editorial .lede { margin-top: 12px; }
  /* Keep the decision and tryout handoff ahead of photography in the visual
     reading order as well as the DOM. Editorial scale is not an L-2 waiver. */
  .decision.is-editorial .decision-main {
    display: block; grid-row: 1; margin: 0; padding: 18px 0 4px;
    background: transparent; box-shadow: none;
  }
  .decision.is-editorial .decision-media { grid-row: 2; }
  .decision.is-editorial .decision-media img { aspect-ratio: 2 / 1; }
  /* A wide phone crop must keep the subject's head. The page model owns this
     focal-point exception so one photograph can move without shifting every
     editorial decision image or changing the desktop composition. */
  .decision.is-editorial .decision-media.mobile-p-top img { object-position: center top; }
  .decision.is-editorial .decision-media.mobile-p-bottom img { object-position: center bottom; }
  .decision.is-editorial .decision-main > .doors { display: grid; }
  .decision.is-editorial .decision-summary { margin-top: 8px; }
  .decision.is-editorial .decision-main > .doors {
    grid-template-columns: 1fr; gap: 9px; padding-top: 12px;
  }
  .decision.is-editorial .decision-act {
    display: block; margin-top: 0;
    padding: 16px var(--decision-panel-inset) 18px;
    border-left: 0; border-top: 2px solid var(--ink);
  }}

/* ---------- B2 journey rail ----------
   The large lead establishes character and answers the first question. Once
   its source action has scrolled away, this compact rail preserves only page
   identity, stable context or current state, and the same next action. site.js
   derives all three from rendered markup; no lifecycle or handoff value is
   authored here. */
.journey-rail {
  position: fixed; inset: 0 0 auto; z-index: 45;
  margin: 0;
  background: var(--hero-a); color: var(--on-hero);
  box-shadow: 0 8px 24px rgb(15 20 28 / .2);
  transform: translateY(-100%); visibility: hidden; pointer-events: none;
}
body.admin-bar .journey-rail { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .journey-rail { top: 46px; }}

.journey-rail.is-active {
  transform: translateY(0); visibility: visible; pointer-events: auto;
}
/* A tryout journey already has a compact, source-derived action rail. Let it
   replace the sticky global header instead of stacking two fixed controls and
   taking 120+ pixels from a phone. Visibility also removes the covered global
   links from keyboard focus until the journey rail releases near the footer. */
html.has-journey-rail .site-hdr { visibility: hidden; }
.journey-rail .wrap {
  min-height: 62px; display: flex; align-items: center; gap: clamp(14px, 3vw, 34px);
  padding-top: 8px; padding-bottom: 8px;
}
.journey-rail__identity { min-width: 0; margin-right: auto; }
.journey-rail__label {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: .875rem; font-weight: var(--weight-display);
  letter-spacing: var(--track-display);
}
.journey-rail__state {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--on-hero-dim); font-size: .875rem; font-weight: 600;
}
.journey-rail .btn {
  flex: none; min-height: 44px; display: inline-flex; align-items: center;
  padding: 10px 52px 10px 18px; font-size: .875rem;
}
html.has-journey-rail { scroll-padding-top: 88px; }
@media (max-width: 1080px) {
  html.has-journey-rail { scroll-padding-top: 128px; }}

@media (max-width: 520px) {
  .journey-rail .wrap { min-height: 60px; gap: 10px; }
  .journey-rail__label { font-size: .875rem; }
  .journey-rail__state { font-size: .875rem; }
  .journey-rail .btn {
    min-height: 44px; max-width: 58%; padding: 8px 40px 8px 11px;
    text-align: center; font-size: .875rem; line-height: 1.2;
  }
  .journey-rail .btn::after { width: 30px; }}

/* ---------- next-step rail ---------- */
.nextstep {
  display: block; text-decoration: none; border-top: 2px solid var(--ink);
  padding: 14px 2px 2px; color: var(--ink);
}
.nextstep-k {
  display: block; color: var(--brand); font-size: .68rem; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px;
}
.nextstep b { font-family: var(--font-display); font-size: 1.1rem; }
.nextstep small { display: block; color: var(--muted); font-size: var(--small); margin-top: 3px; }
.nextstep:hover b { color: var(--brand); }
/* ---------- fork line ---------- */
.fork-line { margin: 0; color: var(--ink-2); font-size: var(--small); }
.fork-line a { font-weight: 650; }
/* ---------- sections ---------- */
section.band { padding: var(--rhythm) 0; }
section.band.tint { background: var(--card); border-top: var(--card-border); border-bottom: var(--card-border); }
/* Long pages need deliberate resting points. The renderer assigns a tone to
   the existing semantic section; components keep their own layout and order. */
section.band--tone-plain { background: transparent; }
section.band--tone-paper {
  background: color-mix(in srgb, var(--info) 4%, var(--page));
  border-top: var(--card-border);
  border-bottom: var(--card-border);
}
section.band--tone-dark,
section.band--tone-action {
  background: var(--hero-a);
  color: var(--on-hero);
  --focus: var(--on-hero);
}
section.band--tone-action { border-block: 4px solid var(--brand); }
section.band--tone-dark :where(h1, h2, h3, h4, h5, h6, strong, b),
section.band--tone-action :where(h1, h2, h3, h4, h5, h6, strong, b) { color: var(--on-hero); }
section.band--tone-dark :where(p, li, dt, dd, figcaption),
section.band--tone-action :where(p, li, dt, dd, figcaption) { color: var(--on-hero-dim); }
section.band--tone-dark p,
section.band--tone-action p { color: var(--on-hero-dim); }
section.band--tone-dark :where(.eyebrow, .kicker),
section.band--tone-action :where(.eyebrow, .kicker) { color: var(--hero-eyebrow); }
section.band--tone-dark a:not(.btn):not(.wp-block-button__link),
section.band--tone-action a:not(.btn):not(.wp-block-button__link) {
  color: var(--hero-eyebrow);
  text-decoration-color: color-mix(in srgb, var(--hero-eyebrow) 56%, transparent);
}
section.band--tone-dark .quote p,
section.band--tone-action .quote p { color: var(--on-hero); }
section.band--tone-dark .quote cite,
section.band--tone-action .quote cite { color: var(--on-hero-dim); }
section.band--tone-dark .facts:not(.portraits),
section.band--tone-action .facts:not(.portraits) { border-top-color: var(--on-hero); }
section.band--tone-dark .facts:not(.portraits) .fact,
section.band--tone-action .facts:not(.portraits) .fact { border-bottom-color: rgb(255 255 255 / .22); }
section.band--tone-dark .fact .k,
section.band--tone-action .fact .k,
section.band--tone-dark .price-freshness,
section.band--tone-action .price-freshness { color: var(--on-hero-dim); }
section.band--tone-dark .btn.ghost,
section.band--tone-action .btn.ghost {
  color: var(--on-hero);
  border-color: var(--on-hero);
}
section.band--tone-dark .btn.ghost:hover,
section.band--tone-action .btn.ghost:hover { background: rgb(255 255 255 / .12); }
section.band--tone-dark .btn.ghost::after,
section.band--tone-action .btn.ghost::after { border-left-color: rgb(255 255 255 / .35); }
section.band--tone-dark .six30-button.is-ghost .wp-block-button__link,
section.band--tone-action .six30-button.is-ghost .wp-block-button__link {
  color: var(--on-hero);
  border-color: var(--on-hero);
}
section.band--tone-dark .six30-button.is-ghost .wp-block-button__link:hover,
section.band--tone-action .six30-button.is-ghost .wp-block-button__link:hover { background: rgb(255 255 255 / .12); }
section.band--tone-dark .six30-button.is-ghost .wp-block-button__link::after,
section.band--tone-action .six30-button.is-ghost .wp-block-button__link::after { border-left-color: rgb(255 255 255 / .35); }
/* Approved long-page refit: a chapter groups related components into one
   visual decision. The old page gave every table and note a full band, which
   made one subject look like several unrelated stops. */
.chapter-composition__head { margin-bottom: clamp(28px, 5vw, 56px); }
.chapter-composition__head .sec { max-width: 12ch; }
.chapter-composition__head .sub { max-width: 48ch; margin-top: 16px; }
.chapter-composition__body { min-width: 0; }
.chapter-part { min-width: 0; }
.chapter-part + .chapter-part { margin-top: clamp(22px, 3vw, 36px); }
.chapter-part > [data-wp-block] { min-width: 0; }
.program-paths__head {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 6vw, 72px);
  align-items: end;
}
.program-paths__head > p { max-width: 58ch; color: var(--on-hero-dim); }
.program-paths__grid {
  margin-top: clamp(34px, 5vw, 52px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgb(255 255 255 / .2);
}
.program-path { min-height: 340px; padding: 32px; border-right: 1px solid rgb(255 255 255 / .2); }
.program-path:last-child { border-right: 0; }
.program-path__number { color: var(--hero-eyebrow); font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.program-path h3 { margin-top: 20px; color: var(--on-hero); font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.8rem); }
.program-path dl,
.program-path__facts { margin: 28px 0 0; }
.program-path dt,
.program-path__label { display: block; margin-top: 16px; color: var(--on-hero-dim); opacity: .72; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.program-path dd,
.program-path__value { display: block; margin: 5px 0 0; color: var(--on-hero); }
.program-paths__recruiting {
  margin-top: 28px;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgb(255 255 255 / .2);
}
.program-paths__recruiting p { margin: 0; }
.program-paths__recruiting a { min-height: 44px; display: inline-flex; align-items: center; flex: none; font-weight: 800; }
.chapter-composition--costs,
.chapter-composition--schedule,
.chapter-composition--season,
.chapter-composition--level,
.chapter-composition--ledger {
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
  gap: clamp(38px, 7vw, 92px);
  align-items: start;
}
.chapter-composition--costs > .chapter-composition__head,
.chapter-composition--schedule > .chapter-composition__head,
.chapter-composition--season > .chapter-composition__head,
.chapter-composition--level > .chapter-composition__head,
.chapter-composition--ledger > .chapter-composition__head { position: sticky; top: 210px; margin-bottom: 0; }
.chapter-composition--costs .chapter-part--table:first-child .sec,
.chapter-composition--costs .chapter-part--table:first-child .sub { display: none; }
.chapter-composition--costs .chapter-part--facts .facts { border-top: 0; display: grid; gap: 12px; }
.chapter-composition--costs .chapter-part--facts .fact {
  padding: 18px 20px;
  grid-template-columns: minmax(160px, .72fr) minmax(0, 1.28fr);
  background: var(--paper);
  border: 0;
  border-left: 4px solid var(--brand);
}
.chapter-composition--costs .chapter-part--prose { padding: 22px 24px; background: var(--paper); border-left: 4px solid var(--brand); }
.chapter-composition--costs .chapter-part--prose .sec { font-size: 1.16rem; }
.chapter-composition--costs .chapter-part--callout .decision-callout { background: color-mix(in srgb, var(--brand) 8%, var(--on-hero)); border-left: 4px solid var(--brand); }
.chapter-composition--costs .chapter-part--callout .decision-callout h2 { font-size: 1rem; }
.chapter-composition--schedule .chapter-part--facts .sec { display: none; }
.chapter-composition--schedule .facts:not(.portraits) { border-top-width: 1px; }
.chapter-composition--schedule .facts:not(.portraits) .fact { padding-block: 22px; grid-template-columns: 145px minmax(0, 1fr); }
.chapter-composition--schedule .facts:not(.portraits) .k { color: var(--brand); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.chapter-composition--schedule .chapter-part--table { padding: 24px; background: var(--on-hero); border: 1px solid var(--line); }
.chapter-composition--schedule .chapter-part--links .listing { border-top-width: 1px; }
.chapter-composition--quote { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); gap: clamp(38px, 7vw, 90px); align-items: center; }
.chapter-composition--quote .chapter-composition__body { display: contents; }
.chapter-composition--quote .chapter-part { margin: 0; }
.chapter-composition--quote .media img,
.chapter-composition--quote .wp-block-image img { width: 100%; aspect-ratio: 1.15 / 1; height: auto; object-fit: cover; }
.chapter-composition--quote .quote p { font-size: clamp(1.75rem, 3.2vw, 3.2rem); line-height: 1.08; letter-spacing: -.04em; }
.chapter-composition--quote .quote p::before { content: '“'; display: block; height: 42px; color: var(--brand); font-size: 5rem; line-height: .7; }
.home-switchboard-band > .wrap,
.home-switchboard-band > .wrap > [data-wp-block='agegrid'] { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: 0 clamp(36px, 6vw, 88px); align-items: start; }
.home-switchboard-band > .wrap > [data-wp-block='agegrid'] { grid-column: 1 / -1; }
.home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > .sec { grid-column: 1; grid-row: 1; }
.home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > .sub { grid-column: 1; grid-row: 2; max-width: 34ch; margin-top: 14px; }
.home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > .bands { grid-column: 2; grid-row: 1 / span 2; }
.home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > .agegrid-actions { grid-column: 2; }
.home-switchboard-band .bands { display: block; counter-reset: home-program; border-top: 1px solid var(--line); }
.home-switchboard-band .band-c { counter-increment: home-program; min-height: 150px; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(150px, auto); gap: 16px; align-items: center; padding: 26px 8px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.home-switchboard-band .band-c::before { content: '0' counter(home-program); align-self: start; color: var(--brand); font-weight: 800; }
.home-switchboard-band .band-c .band-go { margin: 0; }
.home-switchboard-band .band-c h3 { font-size: clamp(1.45rem, 2.4vw, 2.3rem); }
.chapter-composition--training { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 84px); align-items: center; }
.chapter-composition--training > .chapter-composition__head { grid-column: 2; margin: 0; align-self: end; }
.chapter-composition--training > .chapter-composition__body { display: contents; }
.chapter-composition--training .chapter-part { margin: 0; }
.chapter-composition--training .chapter-part--media { grid-column: 1; grid-row: 1 / span 2; box-shadow: 16px 16px 0 var(--brand); }
.chapter-composition--training .chapter-part--links { grid-column: 2; }
.home-news-band .listing { border-top-color: rgb(255 255 255 / .2); }
.home-news-band .item { border-bottom-color: rgb(255 255 255 / .2); }
@media (max-width: 900px) {
  .program-paths__head,
  .chapter-composition--costs,
  .chapter-composition--schedule,
  .chapter-composition--season,
  .chapter-composition--level,
  .chapter-composition--ledger,
  .chapter-composition--quote,
  .home-switchboard-band > .wrap,
  .home-switchboard-band > .wrap > [data-wp-block='agegrid'],
  .chapter-composition--training { grid-template-columns: 1fr; }
  .program-paths__grid { grid-template-columns: 1fr; }
  .program-path { min-height: 0; padding: 30px 0; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .2); }
  .program-path:last-child { border-bottom: 0; }
  .program-paths__recruiting { align-items: flex-start; flex-direction: column; }
  .chapter-composition--costs > .chapter-composition__head,
  .chapter-composition--schedule > .chapter-composition__head,
  .chapter-composition--season > .chapter-composition__head,
  .chapter-composition--level > .chapter-composition__head,
  .chapter-composition--ledger > .chapter-composition__head { position: static; margin-bottom: 0; }
  .chapter-composition--costs .chapter-part--facts .fact,
  .chapter-composition--schedule .facts:not(.portraits) .fact { grid-template-columns: 1fr; gap: 7px; }
  .chapter-composition--quote .chapter-composition__body,
  .chapter-composition--training > .chapter-composition__body { display: grid; }
  .chapter-composition--training > .chapter-composition__head,
  .chapter-composition--training .chapter-part--media,
  .chapter-composition--training .chapter-part--links { grid-column: 1; grid-row: auto; }
  .home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > :is(.sec, .sub, .bands, .agegrid-actions) { grid-column: 1; grid-row: auto; }
  .home-switchboard-band .band-c { grid-template-columns: 36px minmax(0, 1fr); }
  .home-switchboard-band .band-c::before { grid-column: 1; grid-row: 1 / span 2; }
  .home-switchboard-band .band-c .band-t { grid-column: 2; }
  .home-switchboard-band .band-c .band-go { grid-column: 2; width: 100%; }}

/* Gutenberg's flow layout adds a 24px block gap between top-level sections.
   The authored bands already carry their own vertical rhythm, so that second
   gap makes WordPress taller than the static review surface. Remove it on Home
   and trim only the listing band's leading edge so its first real action stays
   inside the desktop fold without reducing the row's 44px+ target. */
body.home .entry-content > section.band { margin-block-start: 0; }
body.home .entry-content > .hero + section.band { padding-top: 12px; }
h2.sec {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--display-md); letter-spacing: var(--track-display); margin: 0 0 4px;
}
p.sub { color: var(--muted); margin: 0 0 14px; font-size: var(--small); }
p { margin: 0 0 12px; color: var(--ink-2); }
.decision-callout {
  background: color-mix(in srgb, var(--brand) 7%, var(--card));
  border-left: 4px solid var(--brand);
  padding: clamp(18px, 3vw, 26px);
}
.decision-callout h2 {
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: var(--track-display);
  margin: 0 0 7px;
}
/* The callout's box spans the container; its text keeps the reading measure.
   The band edge aligns with the tables and listings around it, the line
   length stays a line a tired parent can track. */
.decision-callout p { color: var(--ink); font-weight: 600; margin: 0; max-width: 66ch; }
/* Register follows the approved decision-first composition. These hooks are
   emitted only by the canonical Register page, so the tighter sequence does
   not change the rhythm of other generated pages. */
.register-page-head {
  background: none;
  padding: clamp(18px, 3vw, 30px) 0 clamp(20px, 3vw, 32px);
}
.register-page-head .kicker {
  width: max-content;
  border-top: 4px solid var(--brand);
  padding-top: 12px;
}
.register-page-head h1 {
  max-width: 18ch; margin: 10px 0 10px;
  font-size: clamp(2.15rem, 3.7vw, 2.8rem); line-height: 1.05;
}
.register-page-head .lede {
  max-width: 62ch; margin: 0; font-size: clamp(1rem, 1.4vw, 1.12rem);
}
.register-page-head__help {
  color: var(--brand); display: inline-flex; font-weight: 800; gap: 8px;
  text-decoration: none;
}
.register-page-head__help-wrap { margin: 14px 0 0; }
.register-page-head__help:hover,
.register-page-head__help:focus-visible { text-decoration: underline; }
.register-page-head__ownership { color: var(--muted); font-size: .86rem; margin: 10px 0 0; }
.entry-content > section[class*="register-"] { margin-block-start: 0; }
.register-featured-band { background: var(--ink); color: var(--on-hero); padding: clamp(24px, 4vw, 42px) 0 clamp(30px, 4vw, 48px); }
.register-featured-band .cc630-listing__head { border-color: var(--brand); }
.register-featured-band .cc630-listing__title { color: var(--on-hero); }
.register-featured-band .cc630-listing__sub { color: var(--on-hero-dim); }
.cc630-featured-programs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px);
}
.cc630-featured-program {
  background: var(--card); border: var(--card-border); border-radius: 8px; box-shadow: var(--card-shadow); color: var(--ink);
  display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp(22px, 3vw, 34px);
}
.cc630-featured-program__title {
  color: var(--ink); font-family: var(--font-display); font-size: clamp(1.55rem, 2.65vw, 2.35rem);
  letter-spacing: var(--track-display); line-height: 1.03; margin: 0; max-width: 22ch; min-block-size: 2.06em;
}
.cc630-featured-program__status {
  align-items: center; color: var(--muted); display: inline-flex;
  font-size: .875rem; font-weight: 800; gap: 8px; line-height: 1.2; margin: 0;
}
.cc630-featured-program__status::before {
  background: currentColor; border-radius: 50%; content: ''; flex: 0 0 auto; height: .68em; width: .68em;
}
.cc630-featured-program__status.is-open,
.cc630-featured-program__status.is-in_progress,
.cc630-featured-program__status.is-progress { color: var(--success); }
.cc630-featured-program__status.is-closing,
.cc630-featured-program__status.is-urgent { color: color-mix(in srgb, var(--urgent) 78%, var(--ink)); }
.cc630-featured-program__facts {
  border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 4px 0 0; padding: 0;
}
.cc630-featured-program__fact { border-right: 1px solid var(--line); min-width: 0; padding: 14px 14px 14px 0; }
.cc630-featured-program__fact + .cc630-featured-program__fact { padding-left: 14px; }
.cc630-featured-program__fact:last-child { border-right: 0; }
.cc630-featured-program__fact dt {
  color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.cc630-featured-program__fact dd { color: var(--ink); font-size: .94rem; font-weight: 750; line-height: 1.3; margin: 6px 0 0; }
.cc630-featured-program__action {
  align-items: center; background: var(--brand); color: var(--on-hero); display: inline-flex; font-weight: 800;
  justify-content: space-between; margin-top: auto; min-height: 44px; padding: 10px 16px; text-decoration: none;
}
.cc630-featured-program__action:hover { background: color-mix(in srgb, var(--brand) 88%, var(--ink)); color: var(--on-hero); }
.cc630-featured-program__action:focus-visible { outline: 3px solid var(--on-hero); outline-offset: -5px; }
.register-training-head-band { padding: clamp(34px, 5vw, 56px) 0 20px; }
.register-family-band { padding: 0 0 30px; }
.register-other-band { padding: 40px 0 0; }
.register-decision-callout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px; align-items: center; padding: 22px 24px;
}
.register-decision-callout__copy h2 { margin: 0 0 6px; font-size: 1.18rem; }
.register-decision-callout__copy p { max-width: 62ch; font-weight: 400; }
.register-decision-callout__actions { margin: 0; }
.register-decision-callout__actions .wp-block-button__link { white-space: nowrap; }
.register-section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; border-top: 3px solid var(--ink); padding-top: 10px;
}
.register-section-head h2.sec {
  margin: 0; font-size: clamp(1.65rem, 3vw, 2.55rem);
}
.register-section-head > p {
  max-width: 48ch; margin: 0; color: var(--muted); font-size: .92rem;
}
.register-family-nav-label {
  color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em;
  margin: 24px 0 8px; text-transform: uppercase;
}
.register-family-nav {
  display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0;
}
.register-family-nav a {
  align-items: center; color: var(--brand); display: inline-flex; font-size: .9rem;
  font-weight: 800; min-height: 44px; text-decoration: none;
}
.register-family-nav a:hover,
.register-family-nav a:focus-visible { text-decoration: underline; }
.register-family-band[id] { scroll-margin-top: 120px; }
@media (max-width: 900px) {
  .cc630-featured-programs { grid-template-columns: 1fr; }}

@media (max-width: 640px) {
  .register-page-head { padding: 12px 0 14px; }
  .register-page-head h1 { font-size: clamp(2.1rem, 10vw, 2.65rem); }
  .cc630-featured-program { gap: 12px; padding: 16px; }
  .cc630-featured-program__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc630-featured-program__fact,
  .cc630-featured-program__fact + .cc630-featured-program__fact { border-bottom: 1px solid var(--line); border-right: 0; padding: 12px 0; }
  .cc630-featured-program__fact:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 14px; }
  .cc630-featured-program__fact:nth-child(even) { padding-left: 14px; }
  .cc630-featured-program__fact:last-child { border-bottom: 0; }
  .register-decision-callout { grid-template-columns: 1fr; }
  .register-decision-callout__actions,
  .register-decision-callout__actions .wp-block-button,
  .register-decision-callout__actions .wp-block-button__link { width: 100%; }
  .register-section-head { align-items: flex-start; flex-direction: column; gap: 8px; }}

@media (max-width: 350px) {
  .cc630-featured-program__facts { grid-template-columns: 1fr; }
  .cc630-featured-program__fact:nth-child(odd),
  .cc630-featured-program__fact:nth-child(even) { border-right: 0; padding-left: 0; padding-right: 0; }}

@media (max-width: 360px) {
  /* Keep the compact header one deliberate row. The Register destination follows
     the opened menu in source and keyboard order instead of becoming an always
     visible second row that pushes the first program action below the fold. */
  .reg-cta { width: 100%; justify-content: space-between; }
  .js .navtoggle[aria-expanded="false"] ~ .reg-cta { display: none; }
  .register-featured-band { padding: 12px 0 16px; }
  .register-featured-band .cc630-listing__head { margin-bottom: 6px; padding-top: 6px; }
  .register-featured-band .cc630-listing__title { font-size: 1.7rem; }
  .register-featured-band .cc630-listing__sub { font-size: .875rem; line-height: 1.35; }
  .cc630-featured-program { gap: 6px; padding: 8px; }
  .cc630-featured-program__title { font-size: 1.4rem; line-height: 1; min-block-size: 0; }
  .cc630-featured-program__status { font-size: .875rem; }
  .cc630-featured-program__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc630-featured-program__fact,
  .cc630-featured-program__fact + .cc630-featured-program__fact { padding-top: 8px; padding-bottom: 8px; }
  .cc630-featured-program__fact:nth-child(odd) { border-right: 1px solid var(--line); padding-left: 0; padding-right: 8px; }
  .cc630-featured-program__fact:nth-child(even) { padding-left: 8px; padding-right: 0; }
  .cc630-featured-program__fact dt { font-size: .75rem; }
  .cc630-featured-program__fact dd { font-size: .875rem; line-height: 1.25; margin-top: 3px; }
  .cc630-featured-program__fact:last-child { border-right: 0; grid-column: 1 / -1; padding-left: 0; }}

.cols2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 clamp(20px, 3vw, 44px); align-items: start; }
.cols-even { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 44px); align-items: start; }
@media (max-width: 860px) {
  .cols2, .cols-even { grid-template-columns: 1fr; }}

/* ---------- listings ---------- */
/* No card. This is audit finding V6, which is open and reads: "repeated fact
   cards, listing rows, pills and white panels read as an event directory rather
   than a sports club" — and calls itself a design brief rather than a fix.

   The brief's answer is not a better card. Nine components carried this same
   white-rounded-shadowed surface and /girls/ stacked five of them, so a page
   read as a pile of identical boxes, which is the shape a CMS hands you. The
   hierarchy moves to type and a single heavy rule instead — Major League
   Volleyball's lesson from the reference set, "bold sports typography carrying
   hierarchy without decoration" — and the space the borders and gutters were
   using goes to photography, which is AU Pro's: "the photograph is the design".

   Note this deletes CSS rather than adding it. */
.listing { border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: none; box-shadow: none; }
.listing + .listing { margin-top: 16px; }
.listing .lh {
  padding: 9px 16px 7px; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line);
}
/* Says what left the list, so self-removal is visible rather than silent. */
.listing .lnote { padding: 9px 16px; font-size: .875rem; color: var(--muted); }
/* Same 24px floor as the breadcrumb. This is the "7 more open — see everything"
   link, which is the only route to the programmes a capped group is holding
   back — the smallest target on the homepage was also the one hiding the most. */
.listing .lnote a { display: inline-block; min-height: 24px; line-height: 24px; }
.item {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.item:last-child { border-bottom: 0; }
a.item:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
/* The pill drops below the title on a phone. The prototype's own labels are
   short enough to sit beside it ("Open", "Closes Friday"); the plugin's are
   not — "Registration closes 8 August 2026" is nowrap and ran 19px past a
   390px viewport, where .listing's overflow:hidden silently cropped the date
   off the most time-critical label on the site. Measured at 390, not guessed:
   a clipped element does not move the document's scroll width, so nothing
   about the page reported a problem. */
.item .t { flex: 1; font-weight: 600; font-size: .94rem; }
.item .t span { display: block; font-weight: 400; font-size: var(--small); color: var(--muted); margin-top: 3px; }
.item .t .listing-title {
  color: var(--ink); font-size: 1rem; font-weight: 750; line-height: 1.25; margin-top: 0;
}
.item .t .listing-audience {
  color: color-mix(in srgb, var(--info) 72%, var(--ink)); font-size: .875rem;
  font-weight: 650; letter-spacing: .01em; margin-top: 4px;
}
.item .t .listing-details { color: var(--muted); font-size: var(--small); margin-top: 2px; }
@media (max-width: 560px) {
  .item { align-items: flex-start; flex-wrap: wrap; row-gap: 8px; }
  .item .t { flex: 1 0 100%; }
  .item .go {
    display: inline-flex; align-items: center; flex: 1 0 100%; min-height: 44px;
    margin-left: 0; padding-left: 0; white-space: normal;
  }}

.pill {
  font-size: .68rem; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-pill);
  white-space: nowrap; letter-spacing: .02em;
}
/* The label is the accent mixed 70% toward --ink, not the raw accent. A tinted
   pill puts a colour on a 10-16% wash of itself, which is the lowest-contrast
   pairing on the site: Court read 3.79:1 on .open and 3.17:1 on .urgent, and
   Field House failed on three of the four. Mixing toward --ink self-corrects
   per theme, because --ink is whatever reads on that theme's card — it darkens
   on Court and Field, lightens on Night. Worst case across all twelve
   combinations is now 5.09:1. */
.pill.open { background: color-mix(in srgb, var(--info) 14%, transparent);   color: color-mix(in srgb, var(--info) 70%, var(--ink)); }
.pill.soon { background: color-mix(in srgb, var(--muted) 15%, transparent);  color: color-mix(in srgb, var(--muted) 70%, var(--ink)); }
.pill.closed { background: color-mix(in srgb, var(--muted) 10%, transparent);  color: color-mix(in srgb, var(--muted) 70%, var(--ink)); }
.pill.urgent { background: color-mix(in srgb, var(--urgent) 10%, transparent); color: color-mix(in srgb, var(--urgent) 72%, var(--ink)); }
/* The navigation cue on a links row. Deliberately NOT a .pill: a pill on this
   site means a registration state, and a link wearing one claims a state it
   does not have. Reads as text with an arrow, not as a badge. */
.go {
  font-size: .875rem; font-weight: 600; color: var(--brand);
  white-space: nowrap; letter-spacing: .01em; margin-left: auto; padding-left: 16px;
}
.item:hover .go { text-decoration: underline; }
/* The arrow moves on hover — the register action exists as a visible element
   because listing rows never looked like anything you could press: no arrow,
   no colour, nothing but a status badge on the right. A parent's job on this
   block is to register, and the door had no handle. The school-stage doors
   now carry the same cue through the shared door renderer in components.mjs —
   one go-cue grammar (standard, I-1), so a change here changes there too. */
.go .arw { display: inline-block; transition: transform .15s ease; }
a.item:hover .go .arw { transform: translateX(3px); }
/* ---------- facts / prices ---------- */
/* A two-column grid, not a flex row with the ends pushed apart.
   `justify-content: space-between` put "Ages" and "3rd grade – 18U" at opposite
   edges of a 740px card — roughly 500px of nothing between the two halves of one
   sentence, five rows stacked, no leader line. The eye has to track the gap and
   can land on the neighbouring row's value; it is the reason a printed menu uses
   dot leaders. Here the value simply starts one column after the label, so the
   pair reads as a line.

   A row-level grid owns each key/value pair, so the row starts together and
   wraps together. Excluded from .portraits, which is a different layout wearing
   the same class. */
.facts:not(.portraits) { border-top: 2px solid var(--ink); }
.facts:not(.portraits) .fact {
  display: grid;
  /* One shared-width label track keeps every value on the same vertical line.
     `max-content` sized the track independently inside every row, so a short
     label such as "Ages" started its value farther left than "Break in play". */
  grid-template-columns: clamp(6.5rem, 14vw, 9rem) minmax(0, 1fr);
  gap: 0 26px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
}
.facts:not(.portraits) .fact .k,
.facts:not(.portraits) .fact .v {
  margin: 0;
  min-width: 0;
  padding: 9px 0;
  overflow-wrap: anywhere;
  font-size: .92rem;
}
.fact .k { color: var(--muted); }
.fact .v { font-weight: 600; }
.facts:not(.portraits) .fact .v { text-align: left; max-width: 66ch; }
/* The one fact on a season page a parent acts on is the tryout date. Rendering
   it as bold text next to four others it cannot be told apart from is the same
   defect the listing had: the door with no handle. */
.fact .v a {
  color: var(--brand); font-weight: 700; text-decoration: none;
  display: inline-block; min-height: 24px; line-height: 24px;
}
.fact .v a::after { content: " \2192"; }
.fact .v a:hover { text-decoration: underline; }
/* ---------- cost breakdown ----------
   The total is the conclusion of a ledger, not a decorative stat. Fixed costs,
   the before-travel subtotal and the variable rows stay in reading order so a
   parent can reproduce the arithmetic instead of trusting a large number above
   a paragraph. The left panel carries only the scope and reason for the range. */
.cost-breakdown {
  display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  background: var(--card); border: var(--card-border); border-top: 4px solid var(--brand);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow);
}
.cost-intro { padding: clamp(22px, 3.2vw, 38px); background: color-mix(in srgb, var(--info) 7%, var(--card)); }
.cost-intro .eyebrow { color: var(--info); margin-bottom: 9px; }
.cost-intro .sec { margin: 0; }
.cost-intro .sub { margin: 12px 0 0; color: var(--ink-2); max-width: 38ch; }
.cost-ledger { margin: 0; padding: clamp(14px, 2.4vw, 28px) clamp(20px, 3vw, 34px); }
.cost-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 12px 24px;
  align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cost-row dt, .cost-row dd { margin: 0; }
.cost-row dt { font-weight: 650; }
.cost-row dt span { display: block; margin-top: 3px; color: var(--muted); font-size: var(--small); font-weight: 400; }
.cost-row dd { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.cost-row.is-variable dt::before { content: 'Varies · '; color: var(--info); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.cost-row.is-subtotal { border-bottom: 2px solid var(--ink); }
.cost-row.is-subtotal dt, .cost-row.is-subtotal dd { font-weight: 750; }
.cost-row.is-total { margin-top: 4px; border-top: 2px solid var(--brand); border-bottom: 0; padding-top: 17px; }
.cost-row.is-total dt { font-family: var(--font-display); font-size: 1.08rem; letter-spacing: var(--track-display); }
.cost-row.is-total dd { color: var(--brand); font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); letter-spacing: var(--track-display); }
/* Public price freshness, without exposing the editorial owner or deadline. */
.price-freshness { margin: 12px 0 0; color: var(--muted); font-size: .875rem; }
.price-freshness b { color: var(--ink-2); font-weight: 700; }
.price-freshness time { white-space: nowrap; }
.cost-breakdown > .price-freshness { grid-column: 1 / -1; margin: 0;
  padding: 12px clamp(20px, 3vw, 34px); border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 3%, var(--card)); }
@media (max-width: 720px) {
  .cost-breakdown { grid-template-columns: 1fr; }
  .cost-intro { padding-bottom: 20px; }
  .cost-row { gap: 8px 14px; }
  .cost-row.is-total { align-items: end; }}

@media (max-width: 560px) {
  /* A variable amount can be a sentence-sized range (for example, a
     per-tournament estimate). Stack it before the label column becomes too
     narrow to read. */
  .cost-row.is-variable { grid-template-columns: 1fr; align-items: start; }
  .cost-row.is-variable dd,
  .cost-row.is-variable .cost-amount { justify-self: start; }
  /* A long total note and a large amount cannot share 312px without turning
     the explanation into a six-word column. Let the conclusion read in one
     measure, then place the number beneath it. */
  .cost-row.is-total { grid-template-columns: 1fr; align-items: start; }
  .cost-row.is-total dd,
  .cost-row.is-total .cost-amount { justify-self: start; }}

/* ---------- people ---------- */
.person { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0; border-bottom: var(--card-border); }
.person:last-child { border-bottom: 0; }
.person .av {
  flex: 0 0 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem;
}
/* ---------- portrait roster ----------
   The club's headshots are all shot on black. Given a dark card the background
   dissolves into the surface, so the face reads as cut out with no masking. */
.facts.portraits {
  /* Fixed 4-up rather than auto-fit: the rosters are 4 and 8 people, and auto-fit
     orphaned the last face on its own row at the measures that actually occur. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; background: var(--hero-a); border: 0; overflow: hidden;
}
.facts.portraits .person {
  display: block; padding: 0; border: 0; background: transparent;
  margin-block-start: 0;
  border-right: 1px solid color-mix(in srgb, var(--on-hero) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--on-hero) 8%, transparent);
}
.facts.portraits .av-img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 0; display: block;
}
.facts.portraits .av { flex: none; }
.facts.portraits .person > span { display: block; padding: 15px 17px 20px; }
.facts.portraits .person b {
  font-size: 1.02rem; letter-spacing: -.02em; margin-bottom: 4px; color: var(--on-hero);
}
.facts.portraits .person > span > span {
  font-size: .79rem; line-height: 1.55; color: var(--on-hero-dim); opacity: .74;
}
.facts.portraits .person b + span b { color: var(--on-hero); opacity: 1; }
.facts.portraits a {
  color: var(--on-hero);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  text-decoration-color: color-mix(in srgb, var(--on-hero) 45%, transparent);
}
/* Staff sections can carry distinct jobs without changing a person’s reusable
   profile. DOM order stays unchanged for keyboard and mobile users. The
   nine-person selector is the transition fallback for pages not yet split. */
@media (min-width: 901px) {
  .facts.portraits.cc630-staff-directory--leadership-stack,
  .facts.portraits.cc630-staff-directory--layout-leadership,
  .facts.portraits.cc630-staff-directory--layout-overview,
  .facts.portraits.staff-layout--overview,
  .facts.portraits.staff-layout--leadership {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .cc630-staff-directory--leadership-stack > .person:nth-child(-n + 2),
  .cc630-staff-directory--layout-leadership > .person:nth-child(-n + 2),
  .cc630-staff-directory--layout-overview > .person:nth-child(-n + 2),
  .staff-layout--overview > .person:nth-child(-n + 2),
  .staff-layout--leadership > .person:nth-child(-n + 2) {
    grid-column: span 3;
  }
  .cc630-staff-directory--leadership-stack > .person:nth-child(n + 3):nth-child(-n + 8),
  .cc630-staff-directory--layout-leadership > .person:nth-child(n + 3),
  .cc630-staff-directory--layout-overview > .person:nth-child(n + 3),
  .staff-layout--overview > .person:nth-child(n + 3),
  .staff-layout--leadership > .person:nth-child(n + 3) {
    grid-column: span 2;
  }
  .cc630-staff-directory--leadership-stack > .person:nth-child(9) {
    grid-column: 3 / span 2;
  }
  .facts.portraits.cc630-staff-directory--layout-advisors,
  .facts.portraits.cc630-staff-directory--layout-directors,
  .facts.portraits.staff-layout--directors,
  .facts.portraits.staff-layout--advisors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .facts.portraits.cc630-staff-directory--layout-contacts,
  .facts.portraits.staff-layout--contacts {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .facts.portraits.cc630-staff-directory--layout-founder,
  .facts.portraits.staff-layout--founder {
    grid-template-columns: 1fr;
    max-width: 900px;
    margin-inline: auto;
  }
  .facts.portraits.cc630-staff-directory--layout-founder > .person,
  .facts.portraits.staff-layout--founder > .person {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr);
    align-items: stretch;
  }
}
@media (max-width: 900px) {
  .facts.portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts.portraits.cc630-staff-directory--layout-founder,
  .facts.portraits.staff-layout--founder {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
  }}

@media (max-width: 420px) {
  .facts.portraits { grid-template-columns: 1fr; }}

.person b { display: block; font-size: .95rem; }
.person span { color: var(--muted); font-size: var(--small); }
.person a { color: var(--info); text-decoration: none; }
.person a:hover { text-decoration: underline; }
/* ---------- actions ---------- */
.btn {
  position: relative; min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-hero); text-decoration: none;
  font-weight: 700; font-size: .95rem; line-height: 1.25; letter-spacing: .005em;
  padding: 12px 58px 12px 20px; border-radius: var(--radius-sm);
  border: 2px solid var(--brand); cursor: pointer; font-family: var(--font-body);
  transition: background-color .15s ease, transform .1s ease;
}
.btn::after {
  content: '→'; position: absolute; inset: 0 0 0 auto; width: 40px;
  display: grid; place-items: center; border-left: 1px solid rgb(255 255 255 / .35);
  font-size: 1.05rem; line-height: 1;
}
.btn:hover { background: var(--brand-press); }
/* A press is acknowledged (standard, I-3): one pixel down plus the pressed
   colour, so a phone — the device this audience actually holds — gets an
   answer at the finger, and the colour alone carries it when motion is off. */
.btn:active { background: var(--brand-press); transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--brand); border: 2px solid var(--brand); }
.btn.ghost:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.btn.ghost::after { border-left-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.journey-rail .btn,
.ctaband .btn {
  background: var(--on-hero); color: var(--hero-a); border-color: var(--on-hero);
}
.journey-rail .btn::after,
.ctaband .btn::after { border-left-color: rgb(21 24 29 / .22); }
.journey-rail .btn:hover,
.ctaband .btn:hover {
  background: var(--on-hero-dim); color: var(--hero-a); border-color: var(--on-hero-dim);
}
.journey-rail .btn:active,
.ctaband .btn:active { background: var(--on-hero-dim); color: var(--hero-a); }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.fine { font-size: var(--small); color: var(--muted); margin-top: 9px; }
/* ---------- notice band ---------- */
.notice {
  background: color-mix(in srgb, var(--urgent) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--urgent) 35%, transparent);
  border-radius: var(--radius); padding: 14px 17px; font-size: .93rem;
}
.notice b { color: var(--ink); }
/* ---------- footer ---------- */
.site-ft { background: var(--hero-a); color: var(--on-hero-dim); margin-top: calc(var(--rhythm) * 1.4); padding: calc(var(--rhythm) * 1.2) 0; }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px; }
.ft-grid h2 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-hero); margin: 0 0 10px; }
.ft-grid a { display: flex; align-items: center; min-height: 44px; color: var(--on-hero-dim); text-decoration: none; font-size: .9rem; padding: 8px 0; }
.ft-grid a:hover { color: var(--on-hero); text-decoration: underline; }
/* Audit V9. The route columns are <details> so a phone can collapse them.

   The first attempt styled the summary to look like a plain heading at desktop
   width and left it operable underneath. The keyboard checker measured it at
   15px — three tab stops per page, on every page, below the 24px floor, and
   drawn to look like something that does nothing. A control is either real at
   this width or it is not: this one is, so it is 24px, it carries the same
   +/- as the phone, and clicking it collapses the column. Hiding the affordance
   while keeping the behaviour is the combination with no honest reading. */
.ft-col > summary { list-style: none; display: flex; align-items: center; gap: 8px;
  min-height: 24px; margin: 0 0 10px; cursor: pointer; }
.ft-col > summary::-webkit-details-marker { display: none; }
.ft-col > summary h2 { margin: 0; }
.ft-col > summary::after { content: '+'; font-size: 1rem; line-height: 1; color: var(--on-hero-dim); }
.ft-col[open] > summary::after { content: '\2212'; }
.ft-col > summary:hover::after { color: var(--on-hero); }
/* A phone gets one footer column, said rather than inherited.

   Left to `auto-fit`, the column count falls out of the gutter arithmetic, and
   it does not land where phones are: a 430px iPhone has 394px of content and so
   gets two columns, an 886px footer, and no collapse. Declaring it here means
   the "is this one column" question below answers correctly for every phone in
   portrait, and it is one rule to move if the breakpoint is ever wrong.

   600px, not the nav's 820px. At 768 an iPad still renders several columns and
   does not need those route groups hidden behind a tap.

   This rule is also load-bearing in a second way that is not obvious, so do not
   delete it as redundant with the `auto-fit` track sizing. site.js decides
   whether to stack by reading the used column count — and `.is-stacked` sets
   `gap: 0`, which frees 26px and can turn one column into two. Pinning the
   phone range to a single explicit track breaks that loop. With this rule
   removed and the track sizing left to compute, a 412px viewport lands in a
   state where the script has stacked a two-column grid; measured, not feared.
   `tools/footer-widths.mjs` asserts the rule against the viewport width so its
   removal fails rather than quietly settling somewhere. */
@media (max-width: 599px) { .ft-grid { grid-template-columns: 1fr; } }
/* The stacked footer — a class, not a media query, and that is the fix for the
   first version of this rule.

   These rules only make sense when the grid is genuinely one column: `gap: 0`
   kills the *column* gap as well as the row gap, and a top border on every item
   but the first is a divider between stacked rows. The first version keyed them
   to `max-width: 820px` on the reasoning that a phone is one column — but this
   grid is `repeat(auto-fit, minmax(180px, 1fr))`, so one column does not start
   until about 396px. Measured across the range it claimed to own: 4 columns at
   820, 3 at 768, 2 at 500, 1 only at 390. So from 500 to 820 the columns butted
   together with no gap and every item in the top row carried a stray rule above
   it — and every route group went behind a tap on an iPad, which never had the
   height problem this exists to solve.

   `.is-stacked` is set by site.js from the *used* column count, so the styling
   and the behaviour share one condition and it is the real one rather than a
   width standing in for it. Without JavaScript the class never appears and the
   concise route groups remain open. */
.ft-grid.is-stacked { gap: 0; }
.is-stacked .ft-col, .is-stacked .ft-col-fixed {
  border-top: 1px solid color-mix(in srgb, var(--on-hero) 13%, transparent); }
.ft-grid.is-stacked > :first-child { border-top: 0; }
/* 44px, matching the link targets below it — a summary is the control that
   stands between a parent and eight routes, so it is not allowed to be the
   smallest thing in the footer. The row is full width here, so the marker goes
   to the far edge where a thumb is. */
.is-stacked .ft-col > summary { justify-content: space-between; min-height: 44px; margin: 0; }
.is-stacked .ft-col > summary::after { font-size: 1.1rem; color: var(--on-hero); }
.is-stacked .ft-col[open] { padding-bottom: 10px; }
.is-stacked .ft-col-fixed { padding: 12px 0; }
.is-stacked .ft-col-fixed h2 { margin-bottom: 6px; }
/* --on-hero-dim, not --muted. --muted is calibrated against --card and read
   2.97:1 here on Court, 3.40:1 on Field House — and this is the paragraph
   telling a reader the dates are placeholders and must not be acted on. */
.ft-base { margin-top: 24px; padding-top: 16px; font-size: .875rem; color: var(--on-hero-dim);
  border-top: 1px solid color-mix(in srgb, var(--on-hero) 13%, transparent); }
/* ============================================================
   Enriched component library. Token references only.
   ============================================================ */

/* media */
/* The photograph runs to the measure with nothing framing it. A club photo in a
   shadowed rounded box is a thumbnail of the club; the same photo at full width
   is the club. This is the surface the de-carding above reclaims space for.
   Standalone wide images are editorial filmstrips rather than 16:9 video
   placeholders. Phones receive a taller crop so the subject survives the
   narrower frame; route-level object position remains the existing escape
   hatch when a photograph needs it. */
.media { margin: 0; border-radius: 0; overflow: hidden; background: none; box-shadow: none; }
.responsive-picture { display: block; min-width: 0; }
.hero-media.has-photo > .responsive-picture,
.decision-media > .responsive-picture { height: 100%; }
.media img { width: 100%; height: auto; }
.media.r-wide { border-top: 2px solid var(--ink); padding-top: 12px; }
.media.r-wide img { aspect-ratio: 2/1; object-fit: cover; }
.media.r-square img { aspect-ratio: 1/1; object-fit: cover; }
.media.p-top img { object-position: center top; }
.media.p-bottom img { object-position: center bottom; }
.media figcaption { padding: 10px 14px; font-size: var(--small); color: var(--muted); }
@media (max-width: 700px) {
  .media.r-wide img { aspect-ratio: 16/10; }}

/* split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center;
  border-top: 2px solid var(--ink); padding-top: clamp(18px, 2.4vw, 28px); }
.split-media { grid-column: 1; grid-row: 1; }
.split-body { grid-column: 2; grid-row: 1; }
.split.flip .split-media { grid-column: 2; }
.split.flip .split-body { grid-column: 1; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-body, .split.flip .split-body { grid-column: 1; grid-row: 1; }
  .split-media, .split.flip .split-media { grid-column: 1; grid-row: 2; }}

.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0; display: block; box-shadow: none; }
.split-video { aspect-ratio: 4/3; border-radius: 0; overflow: hidden; background: var(--hero-a); box-shadow: none; }
.split-video video, .split-video .video-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-video .video-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
  .split-video video { display: none; }
  .split-video .video-fallback { display: block; }}

/* Home's club story and sourced proof are one editorial band. The photograph,
   belief and record corroborate one another; a detached stat strip made the
   same evidence look like dashboard furniture. Inline elements keep this
   valid inside the source-owned paragraph and Gutenberg paragraph block. */
.home-story-copy { display: block; max-width: 58ch; }
.home-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink); margin-top: 22px; }
.home-proof > * { min-width: 0; padding: 14px clamp(8px, 1.5vw, 16px) 4px;
  color: inherit; text-decoration: none; }
.home-proof > *:first-child { padding-left: 0; }
.home-proof > * + * { border-left: 1px solid var(--line); }
.home-proof strong { display: block; color: var(--brand); font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.25rem); line-height: 1; }
.home-proof > * > span { display: block; color: var(--ink); font-size: .875rem;
  font-weight: 700; line-height: 1.35; margin-top: 7px; }
.home-proof small { display: block; color: var(--muted); font-size: .78rem;
  letter-spacing: .04em; line-height: 1.35; margin-top: 4px; }
.home-proof > a:hover > span { color: var(--brand); text-decoration: underline; }
/* Home answers the location question without replaying the full facility
   feature. The About page keeps the photographic facility story. */
.home-location { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; width: 100%; }
.home-location > strong { font-family: var(--font-display); font-size: 1rem; }
.home-location-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.home-location-actions a { min-height: 44px; display: inline-flex; align-items: center;
  color: var(--brand); font-weight: 700; }
.decision-callout p:has(> .home-location) { max-width: none; }
@media (max-width: 700px) {
  .home-proof { grid-template-columns: 1fr; }
  .home-proof > *,
  .home-proof > *:first-child { padding: 14px 0; }
  .home-proof > * + * { border-top: 1px solid var(--line); border-left: 0; }
  .home-location { align-items: flex-start; flex-direction: column; gap: 10px; }
  .home-location-actions { width: 100%; }}

/* card grid */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; background: var(--card); border: var(--card-border);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--card-shadow); }
a.card { transition: transform .15s ease; }
a.card:hover { transform: translateY(-2px); }
a.card:active { transform: translateY(0); }
.card-img { display: block; }
.card-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.card-b { padding: 14px 16px; display: block; }
.card-b .pill { display: inline-block; margin-bottom: 8px; }
.card-b b { display: block; font-size: .98rem; font-family: var(--font-display); letter-spacing: var(--track-display); }
.card-b span { display: block; font-size: var(--small); color: var(--muted); margin-top: 4px; }
/* A commitment card identifies the destination without pretending a college
   mark is a player photograph. The school mark remains contained and gets a
   neutral field of its own, so different aspect ratios do not change the grid. */
.card--commitment .card-img { display: grid; place-items: center; min-height: 188px;
  padding: 22px; background: var(--card); border-bottom: 1px solid var(--line); }
.card--commitment .card-img img { width: min(100%, 230px); height: 144px; aspect-ratio: auto;
  object-fit: contain; }
.card--commitment.is-dark-mark .card-img { background: var(--hero-a); }
.card-action-wrap { margin: 0; }
.card-action { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px;
  color: var(--info); font-size: var(--small); font-weight: 750; text-decoration: none; }
.card-action::after { content: ' ↗'; margin-left: 5px; }
.card-action:hover, .card-action:focus-visible { color: var(--brand); text-decoration: underline; }
/* Gutenberg marks every Group as a flow layout and adds a 24px block-start
   margin to every child after the first. These components own their spacing
   with grid gaps and explicit margins; accepting both systems staggered cards,
   separated photos from their copy, and inserted gaps between archive rows. */
.commitment-stage__head > *,
.commitment-stage__grid > *,
.commitment-destination > *,
.commitment-archive > *,
.commitment-archive__years > *,
.partner-network__head > *,
.partner-network__groups > *,
.partner-network__group > .partner-network__grid,
.partner-network__grid > *,
.partner-card > *,
.partnership-platform > *,
.partnership-platform__facts > *,
.partnership-opportunities > header > *,
.partnership-opportunities__head > *,
.partnership-opportunities__list > * {
  margin-block-start: 0 !important;
}
.commitment-stage > .commitment-stage__grid,
.partner-network > .partner-network__groups,
.partnership-opportunities > .partnership-opportunities__list {
  margin-block-start: 0 !important;
}
/* ---------- college pathway campaign ---------- */
.commitment-stage {
  position: relative; overflow: hidden; background: var(--hero-a); color: var(--on-hero);
  border-top: 8px solid var(--brand); padding: clamp(28px, 5vw, 58px);
}
.commitment-stage::after {
  content: ''; position: absolute; width: 22rem; height: 22rem; right: -15rem; top: -15rem;
  border: 1px solid rgb(255 255 255 / .1); border-radius: 50%;
  box-shadow: 0 0 0 52px rgb(255 255 255 / .025), 0 0 0 104px rgb(255 255 255 / .02);
}
.commitment-stage__head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(230px, .4fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.commitment-stage__year { margin: 0; color: var(--brand); font-family: var(--font-display);
  font-size: clamp(4.25rem, 8vw, 7rem); font-weight: var(--weight-display); letter-spacing: -.075em; line-height: .76; }
.commitment-stage__head .eyebrow { margin: 0 0 8px; }
.commitment-stage__head h2 { max-width: 15ch; margin: 0; font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.commitment-stage__head > div > p:last-child { max-width: 45ch; margin: 12px 0 0; color: var(--on-hero-dim); }
.commitment-stage__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.commitment-destination { min-width: 0; display: flex; flex-direction: column; background: var(--hero-b);
  border: 1px solid rgb(255 255 255 / .14); border-top: 4px solid var(--brand); }
.commitment-destination__photo { position: relative; min-width: 0; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--ink); }
.commitment-destination__photo > .responsive-picture,
.commitment-destination__photo > .wp-block-image { display: block; width: 100%; height: 100%; margin: 0; overflow: hidden; }
.commitment-destination__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .25s ease; }
.commitment-destination__photo.is-fallback { display: grid; place-items: center; padding: 28px; background: linear-gradient(145deg, var(--hero-b), var(--ink)); }
.commitment-destination__photo-fallback { color: var(--on-hero-dim); font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.commitment-destination.crop-torso .commitment-destination__photo img { transform: scale(1.7); transform-origin: 50% 18%; }
.commitment-destination.crop-nolan .commitment-destination__photo img { object-position: 2% 13%; transform: scale(1.72); transform-origin: 2% 13%; }
.commitment-destination.crop-aidan .commitment-destination__photo img { object-position: 50% 22%; transform: scale(1.42); transform-origin: 50% 22%; }
.commitment-destination.crop-brody .commitment-destination__photo img { object-position: 50% 58%; transform: scale(1.3); transform-origin: 50% 58%; }
.commitment-destination__number { position: absolute; top: 14px; left: 14px; z-index: 2; width: 40px; height: 40px;
  display: grid; place-items: center; margin: 0; background: var(--brand); color: var(--on-hero);
  font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.commitment-destination__mark { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 112px; height: 68px;
  display: grid; place-items: center; padding: 0; overflow: hidden; background: var(--on-hero); border: 1px solid rgb(17 17 17 / .12);
  box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
.commitment-destination.is-dark-mark .commitment-destination__mark { background: var(--hero-a); border-color: rgb(255 255 255 / .2); }
.commitment-destination__mark > .responsive-picture,
.commitment-destination__mark > .wp-block-image { display: grid; width: 100%; height: 100%; place-items: center; margin: 0; }
.commitment-destination__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.commitment-destination__copy { flex: 1; display: flex; flex-direction: column; padding: 22px; }
.commitment-destination__copy p { margin: 0; }
.commitment-destination__route { color: var(--hero-eyebrow); font-size: .68rem; font-weight: 800;
  min-height: 2.9em; letter-spacing: .08em; line-height: 1.45; text-transform: uppercase; }
.commitment-destination__route span { padding: 0 3px; }
.commitment-destination__category,
.commitment-category { display: inline-flex; width: fit-content; align-items: center; margin-top: 9px !important; padding: 3px 7px; border: 1px solid currentColor; color: var(--hero-eyebrow); font-size: .62rem; font-weight: 800; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; }
.commitment-destination__copy h3 { margin: 9px 0 10px; color: var(--on-hero); font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.25vw, 2rem); line-height: 1.02; letter-spacing: -.035em; }
.commitment-destination__story { min-height: 4.74em; color: var(--on-hero-dim); font-size: .82rem; line-height: 1.58; }
.commitment-destination__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: auto; padding-top: 18px; }
.commitment-destination__actions p { margin: 0; }
.commitment-destination__actions a { min-height: 44px; display: inline-flex; align-items: center;
  color: var(--on-hero); font-size: .75rem; font-weight: 750; text-underline-offset: 3px; }
.commitment-destination__school-action::after,
.commitment-destination__source-action::after { content: ' ↗'; margin-left: 5px; color: var(--hero-eyebrow); }
.commitment-destination__school-action { text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.commitment-destination__source-action { color: var(--on-hero-dim) !important; }
.commitment-destination__actions a:hover,
.commitment-destination__actions a:focus-visible { color: var(--hero-eyebrow); }
.commitment-stage > .commitment-stage__fine { position: relative; z-index: 1; max-width: 70ch;
  margin-block-start: 22px !important; margin-inline: 0;
  color: var(--on-hero-dim); font-size: .76rem; line-height: 1.55; }
@media (min-width: 821px) {
  /* Route, name and story occupy matching rows so the actions line up even
     when one school or athlete name wraps before another. */
  .commitment-destination__copy h3 { min-height: 2.04em; }}

@media (min-width: 1200px) {
  .commitment-stage__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }}

.commitment-archive { display: grid; grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr);
  gap: clamp(28px, 6vw, 84px); align-items: start; }
.commitment-archive__head .eyebrow { color: var(--brand); margin: 0 0 10px; }
.commitment-archive__head h2 { max-width: 12ch; margin: 0; font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.6rem); line-height: 1; letter-spacing: -.045em; }
.commitment-archive__head > p:last-child { max-width: 40ch; margin: 16px 0 0; color: var(--muted); }
.commitment-archive__years { border-top: 3px solid var(--ink); }
.commitment-archive__years details { border-bottom: 1px solid var(--line); }
.commitment-archive__years summary { min-height: 68px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 4px; cursor: pointer; list-style: none; color: var(--ink); }
.commitment-archive__years summary::-webkit-details-marker { display: none; }
.commitment-archive__years summary span { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; }
.commitment-archive__years summary small { margin-left: auto; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.commitment-archive__years summary::after { content: '+'; width: 28px; color: var(--brand); font-family: var(--font-display); font-size: 1.35rem; text-align: center; }
.commitment-archive__years details[open] summary::after { content: '−'; }
.commitment-archive__years details[open] summary { border-bottom: 1px solid var(--line); }
.commitment-archive__years ol,
.commitment-archive__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 3vw, 38px);
  margin: 0; padding: 8px 4px 20px; list-style: none; }
.commitment-archive__years li { display: flex; flex-direction: column; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.commitment-archive__years li strong { color: var(--ink); font-size: .88rem; line-height: 1.35; }
.commitment-archive__years li .commitment-archive__school { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 3px; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.commitment-archive__years li .commitment-category { margin-top: 0 !important; color: var(--brand); font-size: .56rem; }
@media (max-width: 820px) {
  .commitment-stage__head { grid-template-columns: 1fr; }
  .commitment-stage__year { font-size: clamp(4.4rem, 25vw, 7rem); }
  .commitment-stage__grid { grid-template-columns: 1fr; }
  .commitment-destination { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); }
  .commitment-destination__photo { aspect-ratio: 4 / 5; }
  .commitment-archive { grid-template-columns: 1fr; }
  .commitment-archive__head h2 { max-width: 16ch; }}

@media (max-width: 540px) {
  .commitment-stage { padding: 26px 20px; }
  .commitment-stage__grid { gap: 24px; }
  .commitment-destination { display: flex; }
  .commitment-archive__years ol,
  .commitment-archive__list { grid-template-columns: 1fr; }}

/* ---------- partnership growth campaign ---------- */
.partner-network { border-top: 8px solid var(--brand); padding-top: clamp(24px, 4vw, 42px); }
.partner-network__head { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1.55fr);
  gap: clamp(20px, 5vw, 72px); align-items: start; margin-bottom: clamp(32px, 5vw, 58px); }
.partner-network__head .eyebrow { margin: 5px 0 0; color: var(--brand); }
.partner-network__head h2 { max-width: 15ch; margin: 0; font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 4.6rem); line-height: .98; letter-spacing: -.05em; }
.partner-network__head > div > p:last-child { max-width: 55ch; margin: 16px 0 0; color: var(--muted); line-height: 1.6; }
.partner-network__groups { display: grid; gap: clamp(38px, 6vw, 72px); }
.partner-network__group { border-top: 3px solid var(--ink); padding-top: 16px; }
.partner-network__group > h3 { margin: 0 0 20px; font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: -.03em; }
.partner-network__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.partner-card { min-width: 0; display: flex; flex-direction: column; background: var(--card); border: var(--card-border);
  box-shadow: var(--card-shadow); }
.partner-card__visual { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 8px;
  background: var(--on-hero); border-bottom: 1px solid var(--line); overflow: hidden; }
.partner-card__visual > .responsive-picture,
.partner-card__visual > .wp-block-image { display: grid; width: 100%; height: 100%; place-items: center; margin: 0; }
.partner-card__visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.partner-card__copy { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 20px 20px; }
.partner-card__copy > p:first-child { margin: 0; color: var(--brand); font-size: .66rem; font-weight: 800;
  letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.partner-card__copy h4 { margin: 7px 0 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15; letter-spacing: -.025em; }
.partner-card__copy > p:last-child { margin: auto 0 0; padding-top: 15px; }
.partner-card__action { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-2);
  font-size: .74rem; font-weight: 750; text-underline-offset: 3px; }
.partner-card__action::after { content: ' ↗'; margin-left: 5px; color: var(--brand); }
.partner-card__action:hover,
.partner-card__action:focus-visible { color: var(--brand); }
.partner-network__fine { max-width: 78ch; margin: 24px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.partnership-opportunities { border-top: 8px solid var(--brand); padding-top: clamp(24px, 4vw, 42px); }
.partnership-opportunities > header,
.partnership-opportunities__head { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1.55fr);
  gap: clamp(20px, 5vw, 72px); margin-bottom: clamp(26px, 4vw, 46px); }
.partnership-opportunities > header .eyebrow,
.partnership-opportunities__head .eyebrow { color: var(--brand); margin: 5px 0 0; }
.partnership-opportunities > header h2,
.partnership-opportunities__head h2 { max-width: 14ch; margin: 0; font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 4.6rem); line-height: .98; letter-spacing: -.05em; }
.partnership-opportunities > header > div > p:last-child,
.partnership-opportunities__head > div > p:last-child { align-self: end; max-width: 42ch; margin: 14px 0 0; color: var(--muted); }
.partnership-opportunities__list { border-top: 3px solid var(--ink); }
.partnership-opportunities__item { display: grid; grid-template-columns: 72px minmax(180px, .72fr) minmax(0, 1.28fr);
  gap: clamp(18px, 3vw, 44px); align-items: baseline; padding: clamp(22px, 3vw, 34px) 4px; border-bottom: 1px solid var(--line); }
.partnership-opportunities__number { margin: 0; color: var(--brand); font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; }
.partnership-opportunities__item h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.65rem); letter-spacing: -.03em; }
.partnership-opportunities__item > p:last-child { max-width: 55ch; margin: 0; color: var(--ink-2); line-height: 1.65; }
.partnership-platform { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); background: var(--brand); color: var(--on-hero); overflow: hidden; }
.partnership-platform__media { min-height: 560px; }
.partnership-platform__media > .responsive-picture,
.partnership-platform__media > .wp-block-image { display: block; width: 100%; height: 100%; margin: 0; }
.partnership-platform__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.partnership-platform__copy { align-self: center; padding: clamp(30px, 5vw, 68px); }
.partnership-platform__copy .eyebrow { color: var(--on-hero); opacity: .76; margin: 0 0 10px; }
.partnership-platform__copy h2 { max-width: 12ch; margin: 0; color: var(--on-hero); font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 4.1rem); line-height: .98; letter-spacing: -.05em; }
.partnership-platform__copy > p:not(.eyebrow):not(.partnership-platform__fine) { max-width: 46ch; margin: 18px 0 0; color: rgb(255 255 255 / .86); line-height: 1.65; }
.partnership-platform__copy dl,
.partnership-platform__facts { display: grid; margin: 28px 0 0; border-top: 1px solid rgb(255 255 255 / .42); }
.partnership-platform__copy dl > div,
.partnership-platform__fact { display: grid; grid-template-columns: minmax(110px, .55fr) minmax(0, 1.45fr); gap: 18px;
  align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgb(255 255 255 / .28); }
.partnership-platform__copy dt,
.partnership-platform__value { margin: 0; color: var(--on-hero); font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; }
.partnership-platform__copy dd,
.partnership-platform__label { margin: 0; color: rgb(255 255 255 / .8); font-size: .76rem; line-height: 1.45; }
.partnership-platform__fine { margin: 18px 0 0; color: rgb(255 255 255 / .72); font-size: .72rem; line-height: 1.5; }
@media (max-width: 820px) {
  .partner-network__head { grid-template-columns: 1fr; }
  .partner-network__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partnership-opportunities > header,
  .partnership-opportunities__head { grid-template-columns: 1fr; }
  .partnership-opportunities__item { grid-template-columns: 54px 1fr; }
  .partnership-opportunities__item > p:last-child { grid-column: 2; }
  .partnership-platform { grid-template-columns: 1fr; }
  .partnership-platform__media { min-height: 0; aspect-ratio: 16 / 10; }}

@media (max-width: 520px) {
  .partner-network__grid { grid-template-columns: 1fr; }
  .partner-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 176px; }
  .partner-card__visual { aspect-ratio: auto; min-height: 176px; height: 100%; padding: 6px;
    border-right: 1px solid var(--line); border-bottom: 0; }
  .partner-card__visual img { transform: scale(1.18); }
  .partner-card__copy { min-width: 0; padding: 14px 14px 12px; }
  .partner-card__copy > p:first-child { font-size: .6rem; }
  .partner-card__copy h4 { font-size: 1rem; line-height: 1.14; overflow-wrap: anywhere; }
  .partner-card__copy > p:last-child,
  .partner-card__copy > .partner-card__action { margin-top: auto; padding-top: 8px; }
  .partner-card__action { font-size: .7rem; line-height: 1.25; }
  .partnership-opportunities__item { grid-template-columns: 42px 1fr; gap: 14px; }
  .partnership-platform__copy { padding: 30px 22px; }
  .partnership-platform__copy dl > div,
  .partnership-platform__fact { grid-template-columns: 1fr; gap: 4px; }}

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.stat { position: relative; background: none; border: 0; border-right: 1px solid var(--line);
  border-radius: 0; padding: 20px clamp(16px, 2.4vw, 28px); text-align: left; box-shadow: none; }
.stat:last-child { border-right: 0; }
a.stat { color: inherit; text-decoration: none; }
a.stat:hover, a.stat:focus-visible { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.stat small { display: block; margin-bottom: 9px; color: var(--muted); font-size: .68rem;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem);
  font-weight: var(--weight-display); letter-spacing: var(--track-display); color: var(--brand); line-height: 1.1; }
.stat span { display: block; font-size: var(--small); color: var(--muted); margin-top: 5px; }
.stat i { position: absolute; right: 18px; top: 18px; color: var(--brand); font-style: normal; }
@media (max-width: 700px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }}

/* logo wall */
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; align-items: center; }
.logo { background: var(--card); border: var(--card-border); border-radius: var(--radius-sm); padding: 16px;
  display: flex; align-items: center; justify-content: center; min-height: 86px; }
.logo img { max-height: 52px; width: auto; object-fit: contain; }
/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.gallery > .responsive-picture { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* faq */
.faq details { background: var(--card); border: var(--card-border); border-radius: var(--radius); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 14px 17px; font-weight: 600; font-size: .95rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--brand); font-weight: 700; }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 17px 15px; color: var(--ink-2); font-size: .93rem; }
/* quote */
/* A pull quote, upright, carrying itself.
   It was four lines of 1.03rem italic inside a bordered card — italic is for a
   short quotation, and at that length it slows down the one block on the page
   whose entire job is to be read. Set at display scale it needs no box to be
   found, which is the same trade as the listing above: the decoration was doing
   the work the typography should. */
.quote { margin: 0; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.quote p { font-family: var(--font-display); font-size: 1.34rem; line-height: 1.42;
  font-style: normal; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
  margin: 0 0 12px; max-width: 34ch; }
.quote cite { font-size: var(--small); color: var(--muted); font-style: normal; }
/* age bands */
.bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.band-c { background: none; border: 0; border-right: 1px solid var(--line); border-radius: 0;
  padding: 20px clamp(16px, 2.4vw, 28px); text-decoration: none; color: inherit; box-shadow: none;
  display: flex; flex-direction: column; gap: 12px; }
.band-c:last-child { border-right: 0; }
.band-c:hover, .band-c:focus-within { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.band-c h3 { display: block; margin: 0; font-family: var(--font-display); font-size: 1rem; letter-spacing: var(--track-display); }
.band-c .ages { display: block; color: var(--brand); font-weight: 700; font-size: var(--small); margin: 3px 0 5px; }
.band-c span { display: block; font-size: var(--small); color: var(--muted); }
/* A band serving both programmes names both. margin-top:auto keeps the two
   destinations on one line across cards of unequal copy length. */
.band-c .band-go { display: flex; gap: 8px; margin-top: auto; }
.agegrid-guide { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; margin: 14px 0 0; color: var(--muted); font-size: var(--small); }
.agegrid-guide a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.band-current { margin: 9px 0 0; color: var(--ink-2); font-size: .78rem; line-height: 1.4; }
.agegrid-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.agegrid-actions .agegrid-guide { margin-top: 14px; }
.agegrid-directory { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--brand); font-size: var(--small); font-weight: 700; }
/* Optional program guide. The dark rail uses the existing 630 action palette
   to make a short decision sequence legible; it is not a second brand or a
   registration surface. The no-JavaScript direction is a useful first choice
   and the established route behind it. */
.program-guide { display: grid; grid-template-columns: minmax(13.5rem, .48fr) minmax(0, 1fr); background: var(--card); border: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; }
.guide-rail { display: flex; flex-direction: column; background: linear-gradient(150deg, var(--hero-a), var(--hero-b) 68%, var(--hero-c)); color: var(--on-hero); padding: clamp(24px, 4vw, 42px); }
.guide-eyebrow, .guide-step-count, .guide-result-kicker, .guide-status span { margin: 0; color: var(--hero-eyebrow); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.guide-rail h2 { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); letter-spacing: var(--track-display); line-height: 1.08; }
.guide-rail-list { display: grid; gap: 0; list-style: none; margin: 34px 0 auto; padding: 0; }
.guide-rail-step { display: grid; grid-template-columns: 2.25rem 1fr; gap: 10px; align-items: baseline; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--on-hero) 20%, transparent); color: var(--on-hero-dim); }
.guide-rail-step span { color: var(--hero-eyebrow); font-family: var(--font-mono); font-size: .72rem; }
.guide-rail-step b { font-size: .88rem; }
.guide-rail-step.is-current, .guide-rail-step.is-complete { color: var(--on-hero); }
.guide-rail-step.is-current { border-top-color: var(--brand); }
.guide-summary { margin: 28px 0 0; color: var(--on-hero-dim); font-size: var(--small); }
.guide-main { min-width: 0; padding: clamp(24px, 4vw, 46px); }
.guide-status { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.guide-status span { color: var(--muted); }
.guide-status strong { font-family: var(--font-display); font-size: .92rem; }
.guide-step { display: none; }
.guide-step.is-active { display: block; }
.guide-question { max-width: 22ch; margin: 6px 0 0; font-family: var(--font-display); font-size: var(--display-lg); font-weight: var(--weight-display); letter-spacing: var(--track-display); line-height: 1.05; }
.guide-question-sub { max-width: 62ch; margin: 10px 0 0; color: var(--ink-2); }
.guide-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.guide-option-block { min-width: 0; margin: 0 !important; }
.guide-option { position: relative; display: block; min-height: 100%; padding: 18px 42px 18px 18px; border: var(--card-border); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.guide-option-title { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: var(--track-display); }
.guide-option-sub { display: block; margin-top: 4px; color: var(--muted); font-size: var(--small); line-height: 1.45; }
.guide-option-go { position: absolute; top: 50%; right: 16px; color: var(--brand); font-size: 1.15rem; transform: translateY(-50%); transition: transform .15s ease; }
.guide-option:hover, .guide-option:focus-visible { border-color: var(--brand); box-shadow: var(--card-shadow); transform: translateY(-1px); }
.guide-option:hover .guide-option-go, .guide-option:focus-visible .guide-option-go { transform: translate(3px, -50%); }
.guide-option:active { transform: translateY(0); }
.guide-results { display: none; }
.program-guide.is-showing-result .guide-results { display: block; }
.guide-result { display: none; }
.guide-result.is-active { display: block; }
.guide-result-kicker { color: var(--brand); }
.guide-result-title { max-width: 22ch; margin: 6px 0 0; font-family: var(--font-display); font-size: var(--display-lg); font-weight: var(--weight-display); letter-spacing: var(--track-display); line-height: 1.05; }
.guide-result-body { max-width: 62ch; margin: 10px 0 0; color: var(--ink-2); }
.guide-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.guide-result-actions .btn { margin: 0; }
.guide-action-block { margin: 0 !important; }
.guide-handoff { max-width: 56ch; margin: 14px 0 0; color: var(--muted); font-size: var(--small); }
.guide-controls { display: none; justify-content: space-between; gap: 16px; margin: 24px 0 0; font-size: var(--small); }
.program-guide.has-guide-history .guide-controls { display: flex; }
.guide-back, .guide-restart { color: var(--ink-2); font-weight: 700; }
.guide-back { visibility: hidden; }
.guide-back.is-visible { visibility: visible; }
.guide-fallback { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--small); }
.program-guide.is-ready .guide-fallback { display: none; }
.guide-privacy { margin: 12px 0 0; color: var(--muted); font-size: var(--small); }
@media (max-width: 760px) {
  .program-guide { grid-template-columns: 1fr; }
  .guide-rail { padding: 24px var(--gutter); }
  .guide-rail-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; }
  .guide-rail-step { grid-template-columns: 1fr; gap: 3px; padding: 9px 0 0; border-top: 2px solid color-mix(in srgb, var(--on-hero) 20%, transparent); }
  .guide-rail-step b { font-size: .74rem; line-height: 1.2; }
  .guide-summary { margin: 18px 0 0; }
  .guide-main { padding: 26px var(--gutter); }}

@media (max-width: 520px) {
  .guide-options { grid-template-columns: 1fr; }
  .guide-result-actions { display: grid; grid-template-columns: 1fr; }
  .guide-result-actions .btn { justify-content: center; }}

@media (prefers-reduced-motion: reduce) {
  .guide-option, .guide-option-go { transition: none; }}

/* One quiet route line replaces the nested outlined button that made each
   program choice look like a card containing another card. */
.band-go a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: flex-start;
  text-decoration: none; font-size: var(--small); font-weight: 700; color: var(--brand);
  border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 0 0; }
.band-go a::after { content: '→'; margin-left: auto; }
.band-go a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .bands { grid-template-columns: 1fr; }
  .band-c { border-right: 0; border-bottom: 1px solid var(--line); }
  .band-c:last-child { border-bottom: 0; }}

/* table */
.tbl-wrap { overflow-x: auto; border: var(--card-border); border-radius: var(--radius); background: var(--card); }
/* Audit A5, the visible half. The class is set by site.js only when the table
   really is wider than its box, so the cue never appears on a table that has
   nothing hidden. A fixed gradient would claim there is more to see on every
   table at every width, which is the same lie in the other direction.

   The shadow rides on the scroll container, so it stays at the right edge as
   the table moves under it and tells a reader there is a column past the fold. */
.tbl-wrap.is-scrollable {
  background:
    linear-gradient(to right, var(--card) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--card) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) right / 14px 100% no-repeat scroll,
    var(--card);
}
.tbl-wrap.is-scrollable:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 2px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .91rem; min-width: 480px; }
.tbl th, .tbl td { text-align: left; padding: 12px 15px; border-bottom: var(--card-border); }
.tbl th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.tbl tr:last-child td { border-bottom: 0; }
/* 24px, the WCAG 2.2 2.5.8 floor. Table cells were the last place on the site
   with links in them and they measured 20px — the keyboard pass found all nine
   the moment the private-lesson table shipped, same as it found the breadcrumb
   at 18px and the "more open" links at 17px. The cell padding already gives the
   row height; this raises the target inside it. */
.tbl td a { display: inline-block; min-height: 24px; line-height: 24px; }
/* On a phone every value keeps its column label. Horizontal scrolling is a
   useful fallback for a spreadsheet, but these are decisions — cost, level,
   schedule and booking — and no field should be hidden off-screen when the
   reader reaches it. The table semantics stay in the markup while the visual
   presentation becomes a stack of labelled records. */
@media (max-width: 680px) {
  html.has-table-labels .tbl-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  html.has-table-labels .tbl { min-width: 0; border-collapse: separate; border-spacing: 0 12px; }
  html.has-table-labels .wp-block-table.tbl table { min-width: 0; border-collapse: separate; border-spacing: 0 12px; }
  html.has-table-labels .tbl thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  html.has-table-labels .tbl tbody,
  html.has-table-labels .tbl tr,
  html.has-table-labels .tbl td { display: block; width: 100%; }
  html.has-table-labels .tbl tr { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
  html.has-table-labels .tbl td { display: grid; grid-template-columns: minmax(7.25rem, 38%) 1fr; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  html.has-table-labels .tbl td:last-child { border-bottom: 0; }
  html.has-table-labels .tbl td::before { content: attr(data-label); color: var(--muted); font-size: .875rem;
    font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
}
/* A dated sequence is a line, not a stack of cards. College Prep uses it for
   the prior camp's guest-coach record; future schedule-like programmes can use
   the same shape without inventing another component. */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: minmax(7rem, .55fr) 2fr; gap: clamp(18px, 4vw, 48px);
  padding: 18px 0; border-bottom: 1px solid var(--line); }
.timeline-key { color: var(--brand); font-size: .875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; }
.timeline-body b { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.timeline-body > span { display: block; color: var(--muted); font-size: var(--small); margin-top: 2px; }
.timeline-body p { max-width: 65ch; margin: 9px 0 0; font-size: .9rem; }
@media (max-width: 560px) {
  .timeline li { grid-template-columns: 1fr; gap: 5px; }}

/* Adult professional rosters are dense reference data. Number, name and role
   remain visible together; the grid provides comparison without turning every
   player into a decorative profile card. */
.roster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink); }
.roster-player { display: grid; grid-template-columns: 3.25rem 1fr; gap: 13px; align-items: start;
  padding: 15px 0; border-bottom: 1px solid var(--line); }
.roster-player:nth-child(odd) { padding-right: clamp(16px, 3vw, 36px); border-right: 1px solid var(--line); }
.roster-player:nth-child(even) { padding-left: clamp(16px, 3vw, 36px); }
.roster-player .jersey { color: var(--brand); font-family: var(--font-display); font-size: 1.35rem;
  font-variant-numeric: tabular-nums; line-height: 1; }
.roster-player b { display: block; font-family: var(--font-display); font-size: .98rem; }
.roster-player div span { display: block; margin-top: 3px; color: var(--muted); font-size: var(--small); }
@media (max-width: 680px) {
  .roster-grid { grid-template-columns: 1fr; }
  .roster-player:nth-child(odd), .roster-player:nth-child(even) { padding: 14px 0; border-right: 0; }}

/* cta band */
.ctaband { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(22px, 4vw, 40px);
  background: linear-gradient(150deg, var(--hero-a), var(--hero-b) 70%, var(--hero-c)); color: var(--on-hero);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.ctaband::before { content: ''; position: absolute; inset: 0; background-image: var(--band-img);
  background-size: cover; background-position: center; opacity: .22; }
.ctaband > * { position: relative; }
.ctaband h2 { font-family: var(--font-display); font-size: var(--display-lg); font-weight: var(--weight-display);
  letter-spacing: var(--track-display); margin: 0 0 6px; }
.ctaband p { color: var(--on-hero-dim); margin: 0; max-width: 54ch; }
/* hero with a real photograph */
/* ---------- hero photograph ----------
   The photo runs through the top, right and bottom of the hero rather than
   floating inside three visible gutters. A framed rectangle in a coloured field
   reads as decoration; a committed split reads as a place.

   Invariant 6 constrains WHICH photo can sit here — wide or non-identifiable
   while consent is unresolved — so the scale is doing the work, not the crop.

   The negative margin resolves to exactly the distance from the wrap's content
   edge to the viewport edge, so nothing overflows and the body never scrolls
   sideways. Below 900px the grid stacks and the bleed is cancelled. */
.hero-media.has-photo { border: 0; background: none; padding: 0; display: block; }
.hero-media.has-video video { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.hero-media .video-fallback { display: none; }
/* Motion is an enhancement, never the carrier. A visitor who has asked their
   system for less of it gets the poster frame and no video element at all. */
@media (prefers-reduced-motion: reduce) {
  .hero-media.has-video video { display: none; }
  .hero-media .video-fallback { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
}
.hero-media.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
@media (min-width: 901px) {
  .hero-grid { align-items: stretch; }
  .hero-media.has-photo {
    aspect-ratio: auto; min-height: 22rem;
    margin-top: calc(-1 * var(--hero-pad));
    margin-right: calc(-1 * (max(0px, (100vw - 1240px) / 2) + var(--gutter)));
    margin-bottom: calc(-1 * var(--hero-pad));
    border-radius: 0;
  }
  .hero-grid > div:first-child { align-self: center; }}

/* --- steps: an ordered sequence, with the order carrying the meaning ------ */
.steps { display: grid; gap: clamp(20px, 3vw, 36px); }
.steps.has-media { grid-template-columns: 1fr; }
@media (min-width: 901px) {
  .steps.has-media { grid-template-columns: .9fr 1.1fr; align-items: start; }}

.steps-media img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
/* Below 900px the steps come first: on a phone the reader wants the list, and
   the photograph is corroboration. Source order puts the media first for the
   desktop two-column read, so this is the one place an order swap is correct —
   and it is a whole block moving, not a focusable control leaving its
   sequence, so the focus order is unchanged. */
@media (max-width: 900px) { .steps-media { order: 2; } .steps-body { order: 1; } }
.steplist { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steplist li {
  counter-increment: step; position: relative; padding: 0 0 18px 46px;
  border-left: 2px solid color-mix(in srgb, var(--brand) 22%, transparent); margin-left: 15px;
}
.steplist li:last-child { padding-bottom: 0; border-left-color: transparent; }
.steplist li::before {
  content: counter(step); position: absolute; left: -16px; top: -2px;
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  background: var(--brand); color: var(--on-hero); font-weight: 700; font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
/* ---------- native Gutenberg composition parity -------------------------
   The WordPress port uses core blocks for every staff-owned static component.
   These aliases preserve the approved component classes when Gutenberg adds
   its own wrappers. They are intentionally presentation-only: the content and
   block boundaries remain ordinary Heading, Paragraph, Image, Button, List,
   Details, Table, Gallery, Columns and Group blocks in the editor. */
.six30-door-block,
.six30-decision-choice-block,
.six30-link-row,
.six30-nextstep-block,
.wp-block-image,
.wp-block-video,
.wp-block-table { margin: 0; }
.six30-door-block .door { display: block; height: 100%; }
.six30-decision-choice-block .decision-choice { height: 100%; }
.six30-nextstep-block .nextstep { display: block; }
.six30-button .wp-block-button__link {
  position: relative; min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-hero); text-decoration: none;
  font-weight: 700; font-size: .95rem; line-height: 1.25; letter-spacing: .005em;
  padding: 12px 58px 12px 20px; border-radius: var(--radius-sm);
  border: 2px solid var(--brand); cursor: pointer; font-family: var(--font-body);
  transition: background-color .15s ease, transform .1s ease;
}
.six30-button .wp-block-button__link::after {
  content: '→'; position: absolute; inset: 0 0 0 auto; width: 40px;
  display: grid; place-items: center; border-left: 1px solid rgb(255 255 255 / .35);
  font-size: 1.05rem; line-height: 1;
}
.six30-button .wp-block-button__link:hover { background: var(--brand-press); }
.six30-button .wp-block-button__link:active { background: var(--brand-press); transform: translateY(1px); }
.six30-button.is-ghost .wp-block-button__link {
  background: transparent; color: var(--brand); border-color: var(--brand);
}
.six30-button.is-ghost .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.six30-button.is-ghost .wp-block-button__link::after {
  border-left-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
.decision-buttons { margin: 0; }
.ctaband .six30-button .wp-block-button__link {
  background: var(--on-hero); color: var(--hero-a); border-color: var(--on-hero);
}
.ctaband .six30-button .wp-block-button__link::after { border-left-color: rgb(21 24 29 / .22); }
.ctaband .six30-button .wp-block-button__link:hover,
.ctaband .six30-button .wp-block-button__link:active {
  background: var(--on-hero-dim); color: var(--hero-a); border-color: var(--on-hero-dim);
}
.hero-media.has-photo > .wp-block-image,
.decision-media > .wp-block-image { height: 100%; }
.split-media > .wp-block-image img,
.steps-media > .wp-block-image img { display: block; }
.card-b .card-title { margin: 0; font-size: .98rem; }
.card-b .card-title a { color: inherit; text-decoration: none; }
.card-b .card-sub { margin: 4px 0 0; font-size: var(--small); color: var(--muted); }
.card-b > .pill { width: fit-content; margin: 0 0 8px; }
.stat .stat-eyebrow {
  margin: 0 0 9px; color: var(--muted); font-size: .68rem;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.stat .stat-value {
  margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem);
  font-weight: var(--weight-display); letter-spacing: var(--track-display); color: var(--brand); line-height: 1.1;
}
.stat .stat-value a { color: inherit; text-decoration: none; }
.stat .stat-label { margin: 5px 0 0; font-size: var(--small); color: var(--muted); }
.logo > .wp-block-image { display: flex; align-items: center; justify-content: center; }
.gallery > .wp-block-image {
  aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); margin: 0;
}
.faq details > p { padding: 0 17px 15px; color: var(--ink-2); font-size: .93rem; }
.band-c h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; letter-spacing: var(--track-display); }
.band-c p { margin: 0; }
.band-go > .wp-block-button { flex: 1; }
.band-go .wp-block-button__link {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: var(--small); font-weight: 700; color: var(--ink);
  background: transparent; border: 2px solid var(--brand); border-radius: var(--radius-sm); padding: 8px 12px;
}
.band-go .wp-block-button__link:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.tbl-wrap > .wp-block-table { width: 100%; }
.wp-block-table.tbl table { width: 100%; border-collapse: collapse; font-size: .91rem; min-width: 480px; }
.cost-row .cost-label,
.cost-row .cost-amount { margin: 0; }
.cost-row .cost-label { font-weight: 650; }
.cost-row .cost-label span {
  display: block; margin-top: 3px; color: var(--muted); font-size: var(--small); font-weight: 400;
}
.cost-row .cost-amount {
  color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap;
}
.cost-row.is-subtotal .cost-label,
.cost-row.is-subtotal .cost-amount { font-weight: 750; }
.cost-row.is-total .cost-label { font-family: var(--font-display); font-size: 1.08rem; letter-spacing: var(--track-display); }
.cost-row.is-total .cost-amount {
  color: var(--brand); font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); letter-spacing: var(--track-display);
}
.person > .av { margin: 0; }
.facts.portraits .av-img { height: auto; }
.facts.portraits .av-img img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.facts.portraits .person > .person-copy { padding: 15px 17px 20px; }
.facts.portraits .person-name { margin: 0 0 4px; font-size: 1.02rem; color: var(--on-hero); }
.facts.portraits .person-role { margin: 0; font-size: .79rem; line-height: 1.55; color: var(--on-hero-dim); opacity: .74; }
.person-contact { display: block; min-height: 24px; font-size: var(--small); line-height: 1.55; }
.person-contact > span { font-weight: 700; }
.facts.portraits .person-contact { color: var(--on-hero); text-decoration-color: color-mix(in srgb, var(--on-hero) 45%, transparent); }
.facts.portraits.cc630-staff-directory--layout-contacts .av-img,
.facts.portraits.cc630-staff-directory--layout-contacts .av-img img,
.facts.portraits.staff-layout--contacts .av-img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.facts.portraits.cc630-staff-directory--layout-contacts .av-img img {
  object-position: center 22%;
}
/* The contact page has one job: let a family reach the right person. On a
   desktop, every card therefore presents the same four scan lines — name,
   role, email and cell — rather than merging the last two into a dense line. */
@media (min-width: 901px) {
  .facts.portraits.contact-directory .person-copy { display: grid; gap: 2px; }
  .facts.portraits.contact-directory .person-name,
  .facts.portraits.contact-directory .person-role,
  .facts.portraits.contact-directory .person-contact { min-width: 0; margin: 0; }
}
.facts:not(.portraits) .person-copy { min-width: 0; }
.person-name { margin: 0; font-size: .95rem; }
.person-role { margin: 2px 0 0; color: var(--muted); font-size: var(--small); }
.timeline .timeline-copy { max-width: 65ch; margin-top: 9px; font-size: .9rem; }
.roster-player .jersey { margin: 0; }
.roster-player .roster-name { margin: 0; font-family: var(--font-display); font-size: .98rem; }
.roster-player .roster-meta { margin: 3px 0 0; color: var(--muted); font-size: var(--small); }
/* ---------- source-bounded proof records ---------- */
.proof-list__items, .partner-list__items { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.proof-list__item, .partner-list__item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.proof-list__item h3, .partner-list__item h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: var(--track-display); }
.proof-list__item p, .partner-list__item p { margin: 5px 0 0; max-width: 66ch; }
.proof-list__history, .partner-list__relationship { color: var(--ink-2); font-weight: 650; }
.proof-list__state, .partner-list__state, .proof-list__dates, .partner-list__dates, .proof-list__empty, .partner-list__empty { color: var(--muted); font-size: var(--small); }
.proof-list__action, .partner-list__action { display: inline-flex; min-height: 24px; align-items: center; margin-top: 9px; color: var(--info); font-weight: 700; }
.proof-list__dates time, .partner-list__dates time { white-space: nowrap; }
.partner-list__item.is-pending h3 { color: var(--muted); }
/* ---------- Training chooser ----------
   The directory lives at /programs/. Training earns its separate destination
   by helping a family choose a bounded family before it sees a transaction. */
.training-guide { border-top: 4px solid var(--red); padding: clamp(18px, 2.5vw, 30px); background: var(--paper, var(--on-hero)); }
.training-guide header { max-width: 72ch; }
.training-guide__form { display: grid; gap: 16px; margin-top: 18px; }
.training-guide__fieldset { border: 0; margin: 0; padding: 0; }
.training-guide__fieldset h3, .training-guide fieldset > legend { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(1.35rem, 2.7vw, 2rem); line-height: 1.05; }
.training-guide__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
/* Gutenberg places each choice in a paragraph. Reset that wrapper here rather
   than shrinking the page copy: every choice remains aligned and equally tall. */
.training-guide__choices > p { display: flex; margin: 0; }
.training-guide__choice { display: flex; flex: 1; align-items: center; gap: 9px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); background: var(--on-hero); font-weight: 700; cursor: pointer; }
.training-guide__choice:has(input:checked) { border-color: var(--red); box-shadow: inset 4px 0 var(--red); }
.training-guide__choice input { width: 20px; height: 20px; accent-color: var(--red); }
.training-guide__choice.is-unavailable { color: var(--muted); cursor: not-allowed; opacity: .58; }
.training-guide__choice.is-unavailable input { cursor: not-allowed; }
.training-guide__status { min-height: 22px; margin: 14px 0 0; color: var(--info); font-weight: 700; }
.training-guide__results { margin-top: 18px; }
.training-guide__stage,
.training-guide__results { display: none; }
.training-guide.is-ready .training-guide__stage:not([hidden]),
.training-guide.is-ready .training-guide__results:not([hidden]) { display: block; }
.training-guide__results > h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 2.7vw, 2rem); }
.training-guide__result-grid { display: grid; gap: 0; margin-top: 10px; border-top: 2px solid var(--ink); }
.training-guide__result { padding: 14px 0; border-bottom: 1px solid var(--line); }
.training-guide__result h3 { margin: 0; font-family: var(--font-display); font-size: 1.18rem; }
.training-guide__result p { max-width: 64ch; margin: 7px 0 0; }
.training-guide__count { color: var(--muted); font-size: var(--small); font-weight: 700; }
.training-guide__action { display: inline-flex; min-height: 44px; align-items: center; margin-top: 10px; color: var(--red); font-weight: 800; }
.training-guide__recovery { margin: 14px 0 0; padding: 14px; border-left: 4px solid var(--red); background: color-mix(in srgb, var(--red) 7%, var(--on-hero)); }
@media (max-width: 650px) {
  .training-guide__choices { grid-template-columns: 1fr; }}

/* ---------- motion is an enhancement (standard, I-4) ----------
   Same contract the videos honour further up this file: asked-for stillness
   gets stillness. Every hover lift and arrow slide sits behind this guard;
   the colour and border changes on the same states carry the feedback with
   nothing moving, so a reduced-motion visitor loses the slide and keeps the
   answer. A new transform anywhere in this file belongs on this list. */
@media (prefers-reduced-motion: reduce) {
  .door, .door .door-go, .decision-choice, a.card, .btn, .six30-button .wp-block-button__link, .nav-chooser, .reg-cta, .go .arw { transition: none; }
  .door:hover, .door:focus-visible, a.card:hover,
  .door:hover .door-go, .door:focus-visible .door-go,
  a.item:hover .go .arw, .btn:active, .six30-button .wp-block-button__link:active, .nav-chooser:active, .reg-cta:active { transform: none; }
}
/* ======================================================================
   Hierarchy refit remediation (2026-09-02). Closes the gaps between the
   approved Home + Girls mockup (review/site-refit/) and the ported pages.
   ====================================================================== */

/* Hero photograph in block-editor markup sits inside a figure, which has no
   height of its own, so the image kept its intrinsic ratio inside a taller
   column and left a dark void beneath it. */
@media (min-width: 901px) {
  .hero-media.has-photo > figure,
  .hero-media.has-photo .wp-block-image { height: 100%; margin: 0; }
  .hero.is-home .hero-media.has-photo,
  .hero.is-girls .hero-media.has-photo,
  .hero.is-boys .hero-media.has-photo,
  /* The floor was a flat 26rem, so past about 1900px the photo column kept
     growing wider against a fixed height and the frame degenerated into a
     letterbox — 3.4:1 at 2560, which crops a portrait source to a fifth of
     its height. Tying the floor to the viewport holds the ratio near 2.5:1
     instead. Below ~1900px `max()` returns 26rem, so nothing changes there. */
  .hero.is-breeze .hero-media.has-photo { min-height: max(26rem, 22vw); }
  /* The block image carries width/height attributes, and WordPress's own
     image rule pins such an image to height:auto. This outranks it so the
     photograph fills the column it was given. */
  .hero .hero-media.has-photo .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
  /* The column's height must come from the copy and the minimum, never from
     the photograph's own proportions — a portrait file was stretching the
     Breeze hero to 790px and pushing its first choice below the fold. */
  .hero.is-campaign .hero-media.has-photo { position: relative; }
  .hero.is-campaign .hero-media.has-photo > figure,
  .hero.is-campaign .hero-media.has-photo .wp-block-image { position: static; height: 100%; margin: 0; }
  /* The image is positioned against the media box itself: a percentage height
     on the block image resolved against its figure, not the stretched column,
     and left a 448px photograph inside a 630px column. */
  .hero.is-campaign .hero-media.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
.hero.is-home,
.hero.is-girls,
.hero.is-boys,
.hero.is-breeze { --hero-pad: clamp(40px, 5vw, 64px); }
.hero.is-boys h1,
.hero.is-breeze h1 { max-width: 8ch; }
.hero.is-boys .lede,
.hero.is-breeze .lede { margin-bottom: 0; }
/* The homepage hero keeps the first family choice inside a 900px fold
   (verify-site L-2): a slightly smaller display size, five lines at most. */
.hero.is-home h1 { max-width: 12ch; font-size: clamp(2.8rem, 4.6vw, 4.6rem); }
.hero.is-girls h1 { max-width: 8ch; }
.hero.is-girls .lede { margin-bottom: 0; }
/* Program guide: stays under the site header on a long hub page, so the
   chapters are one tap away at any scroll position. Height of the header
   is measured by site.js; the fallback is the desktop header. */
.program-bar { position: sticky; top: var(--site-hdr-h, 64px); z-index: 30; background: var(--page); }
body.admin-bar .program-bar { top: calc(var(--site-hdr-h, 64px) + 32px); }
html { scroll-padding-top: calc(var(--site-hdr-h, 64px) + 64px); }
/* Home switchboard: eyebrow, display heading, intro pinned to the top of its
   column instead of floating at mid-height beside the list. */
.home-switchboard-band > .wrap,
.home-switchboard-band > .wrap > [data-wp-block='agegrid'] { grid-template-rows: auto auto 1fr auto; }
.home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 6px; }
.home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > .sec { grid-row: 2; max-width: 11ch; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.02; letter-spacing: -.03em; }
.home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > .sub { grid-row: 3; align-self: start; }
.home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > .bands { grid-row: 1 / span 3; }
.home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > .agegrid-actions { grid-row: 4; }
/* Home proof band: photograph and claim share one dark stage; the number
   carries its noun beside it. */
.home-proof-band .split { border-top: 0; padding-top: 0; gap: clamp(32px, 5vw, 72px); }
.home-proof-band .split-media img { aspect-ratio: 5 / 4; }
.home-proof-band .split-body .eyebrow { margin-bottom: 12px; }
.home-proof-band .split-body .sec { max-width: 11ch; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.03em; }
.home-proof-band .home-story-copy { margin-top: 18px; }
section.band--tone-dark a.home-proof-number:not(.btn) {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  margin-top: 32px; color: var(--on-hero); text-decoration: none;
}
.home-proof-number strong { color: var(--hero-eyebrow); font-family: var(--font-display); font-size: clamp(3.4rem, 6vw, 5.6rem); line-height: .85; letter-spacing: -.06em; }
.home-proof-number span { max-width: 16ch; font-weight: 800; line-height: 1.2; }
.home-proof-number:hover span,
.home-proof-number:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.home-proof-detail { display: block; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .2); font-size: .9rem; }
/* Girls grade chapter: the decision keeps its structure and source-owned
   action, and gains the chapter head the other chapters have. Without the
   photograph the editorial card chrome has nothing to sit on, so it goes. */
.grade-band .decision:not(.has-media) { max-width: none; }
.grade-band .decision.is-editorial:not(.has-media) { display: block; }
.grade-band .decision.is-editorial:not(.has-media) .decision-main { margin: 0; padding: 0; background: transparent; box-shadow: none; }
/* Row assignments must outrank the editorial decision's own rows, which are
   written at three classes deep. */
.grade-band .decision.is-editorial .decision-main > .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 6px; }
.grade-band .decision.is-editorial .decision-main > .sec { grid-row: 2; max-width: 12ch; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.02; letter-spacing: -.03em; }
.grade-band .decision.is-editorial .decision-summary { grid-row: 3; max-width: 52ch; font-size: 1.02rem; }
.grade-band .decision.is-editorial .decision-main > .doors { grid-row: 4; margin-top: 22px; padding-top: 0; border-top: 0; gap: 14px; }
.grade-band .decision.is-editorial .decision-note { grid-row: 5; }
.grade-band .decision.is-editorial .decision-act { grid-row: 1 / 6; }
.grade-band .decision-choice { padding: 22px 22px 24px; background: var(--page); border-top: 4px solid var(--brand); border-radius: 0; }
.grade-band .decision-choice__title { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.grade-band .decision-choice__detail { font-size: .92rem; }
/* Program paths: every card starts at the same line. WordPress's flow layout
   gives every sibling after the first a block-gap top margin, which put the
   second and third cards 24px below the first. */
.program-paths__grid > .program-path { margin-block-start: 0; }
.program-path { display: flex; flex-direction: column; }
.program-path > * { margin-top: 0; }
.program-path > h3 { margin-top: 20px; }
.program-path > .program-path__facts,
.program-path > dl { margin-top: 28px; }
/* Costs: the dues table leads with the program and the amount a family
   commits to; the ledger rows read as a table, not a stack of cards. */
.chapter-composition--costs .chapter-part--table:first-child .tbl td:first-child { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.chapter-composition--costs .chapter-part--table:first-child .tbl td:nth-child(2) { color: var(--brand); font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; }
.chapter-composition--costs .chapter-part--prose p { margin: 8px 0 0; }
.chapter-composition--schedule .facts:not(.portraits) .fact { padding-block: 16px; }
/* The next action is one full-bleed band in the club colour, not a card
   inside a band. White on the brand red measures 7.8:1. */
section.band--tone-action { background: var(--brand); border-block: 0; }
section.band--tone-action .ctaband { padding: 0; background: none; border-radius: 0; box-shadow: none; }
section.band--tone-action .ctaband::before { display: none; }
section.band--tone-action .ctaband h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.035em; }
section.band--tone-action :where(p, li, dt, dd) { color: var(--on-hero); }
section.band--tone-action a:not(.btn):not(.wp-block-button__link) { color: var(--on-hero); text-decoration-color: rgb(255 255 255 / .6); }
section.band--tone-action .btn:not(.ghost),
section.band--tone-action .six30-button:not(.is-ghost) .wp-block-button__link { background: var(--page); color: var(--brand); }
section.band--tone-action .btn:not(.ghost)::after,
section.band--tone-action .six30-button:not(.is-ghost) .wp-block-button__link::after { border-left-color: color-mix(in srgb, var(--brand) 30%, transparent); }
@media (max-width: 900px) {
  .home-switchboard-band > .wrap,
  .home-switchboard-band > .wrap > [data-wp-block='agegrid'] { grid-template-rows: none; }
  /* Every desktop row assignment above is written after the earlier mobile
     reset, so it must be reset again here or the heading lands on the rows. */
  .home-switchboard-band :is(.wrap, [data-wp-block='agegrid']) > :is(.eyebrow, .sec, .sub, .bands, .agegrid-actions) { grid-column: 1; grid-row: auto; }
  .grade-band .decision.is-editorial .decision-main > :is(.eyebrow, .sec, .decision-summary, .doors, .decision-note, .decision-act) { grid-column: 1; grid-row: auto; }
  .grade-band .decision.is-editorial .decision-act { padding-left: 0; border-left: 0; }}

/* Boys and Breeze chapters (2026-09-02). A cost ledger inside a costs chapter
   already has the chapter head; its own intro would say it twice. The total
   gets the same emphasis the Girls dues carry. Facts inside a dark chapter
   read on the dark ground; level and ledger chapters keep their row rhythm. */
.chapter-composition--costs .chapter-part--cost-breakdown:first-child .cost-intro { display: none; }
.chapter-composition--costs .cost-ledger .cost-row.is-total dd { color: var(--brand); font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; }
.chapter-composition--season .chapter-part--facts .sec,
.chapter-composition--ledger .chapter-part--facts:first-child .sec { display: none; }
.chapter-composition--season .facts:not(.portraits) .fact { padding-block: 14px; }
.chapter-composition--level .chapter-part + .chapter-part { margin-top: 18px; }
.chapter-composition--level .chapter-part--media img,
.chapter-composition--level .chapter-part--media .wp-block-image img { width: 100%; height: auto; }
.chapter-composition--stack > .chapter-composition__head .sec { max-width: 16ch; }
/* A cost ledger inside a costs chapter is a single column: its own two-column
   card grid kept an empty intro track and squeezed the amounts into the rest. */
.chapter-composition--costs .cost-breakdown { display: block; }
.chapter-composition--costs .cost-ledger { padding: 6px clamp(20px, 3vw, 34px) 10px; }
/* WordPress's block-gap rule (`.is-layout-flow > * + *`) reaches inline-block
   breadcrumb links and every band in the post content. On a child page the
   second crumb link picked up a 24px block margin, so the breadcrumb sat 24px
   lower than on the hub; and every band sat 24px below its neighbour, which
   is the light strip that showed under the sticky guide. Chapters butt
   against each other, as in the prototype and the approved mock. */
.crumb > a, .crumb > b { margin-block-start: 0; }
.entry-content > section.band, .entry-content > section.hero { margin-block-start: 0; }
/* The guide follows the reader: the chapter under the sticky bar takes the
   current mark, and the page's own entry gives it up while a chapter has it. */
.program-bar a.is-active { color: var(--ink); border-bottom-color: var(--brand); font-weight: 700; }
.program-bar a[aria-current="page"].is-muted { color: var(--ink-2); border-bottom-color: transparent; font-weight: 600; }
/* Breeze is the club's only action photograph of the pro team and it is the
   only portrait hero source, 1600x2400 against a column that runs from 1.8:1
   at 1440 to 3.4:1 at 2560. Centring that crop keeps the torso and knees and
   cuts the head off. Weighting it to 30% keeps the hitter's head, arm and the
   net at every width measured. */
.hero.is-breeze .hero-media.has-photo img { object-position: 50% 30%; }


/* WordPress-native Training: retain context, shorten only pre-choice rhythm. */
.cc630-component--training-guide { padding-top: 0; }
.cc630-component--training-guide .training-guide { padding-top: 12px; }
.cc630-component--training-guide .training-guide > .kicker { margin: 0 0 6px; }
.cc630-component--training-guide .training-guide > .sec { margin: 0 0 6px; }
.cc630-component--training-guide .training-guide > .sub { margin: 0; }
.cc630-component--training-guide .training-guide__form { margin-top: 12px; }