/* Hallmark · shape: Conversational FAQ · genre: editorial · theme: Sport (deal 1/3, seed turbo-volleyball-club-non-profit-2e68·f7c599d4·2026-11-06·r0) · job: join · draw: 2e6c11
 * hero: Stage (swapped from the draw's Corridor: the club's team photograph carries the first screen) · nav: search-led bar (the command pill is an age picker) · footer: letter close · imagery: photographs, the club's own 4, duotone · signature: the session calendar set as a results sheet, the next session on volt
 * axes: light/display-condensed/chromatic-volt · posture: restrained · contrast: pass · fold: pass · render: manual (chrome-devtools) · v2.0.0
 * hero-review: fix · 5 findings · 4 resolved 1 partial · finish-review: subagent · 8 findings · 8 resolved · gap: none · sweep: Floor 0 FAIL · Reflex 0 (1 dismissed: 23) · render manual */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the hero could head any winter programme; the calendar sheet and the minute-by-minute session are facts only this club published */
/* Hallmark · answered F3 · base.css sets text-wrap: balance on every head */
/* Hallmark · dismissed 23 · the volt session tag on the hero photograph is about 220 x 70 px, under 2% of the 1440 viewport, and is the only volt fill on the first screen beside the primary control */
@import url("./tokens.css");
@import url("./base.css");

/* layout */
.container { display: block; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.col-1-5 { grid-column: 1 / 6; } .col-1-6 { grid-column: 1 / 7; } .col-1-7 { grid-column: 1 / 8; } .col-7-13 { grid-column: 7 / 13; } .col-6-13 { grid-column: 6 / 13; } .col-1-13 { grid-column: 1 / 13; } .col-8-13 { grid-column: 8 / 13; }
section.block { padding-block: var(--section-gap); }
section.block--s { padding-block: var(--section-gap-s); }
section.block--l { padding-block: var(--section-gap-l); }
.well { background: var(--color-paper-2); }
.rule-bar { border-top: var(--rule-bar) solid var(--color-rule-2); }
.rule-hair { border-top: var(--rule-hair) solid var(--color-rule); }

/* type */
h1, h2, h3 { text-transform: uppercase; line-height: 1.02; }
h2 { max-width: 24ch; }
.lead { color: var(--color-ink-2); }
small, .caption, th, .label { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }
.figure { font: var(--display-weight) var(--text-display-s)/0.95 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); }
.time { font: 500 var(--text-lg)/1 var(--font-outlier); font-variant-numeric: tabular-nums; }
a.text { text-decoration-thickness: 2px; text-underline-offset: 0.18em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
a.text:hover { text-decoration-color: var(--color-accent-deep); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); background: transparent; color: var(--color-ink); font: var(--display-weight) var(--text-lg)/1 var(--font-display); text-transform: uppercase; letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn--secondary { background: transparent; color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-md); }
input, select, textarea { min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--color-focus); }
input[aria-invalid="true"] { border-color: var(--color-error); }
input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* nav: search-led bar, the command pill is an age picker */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav .container { display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; }
.wordmark { font: var(--display-weight) var(--text-xl)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap; }
.finder { display: flex; align-items: center; gap: var(--space-xs); margin-inline: auto; }
.finder label { white-space: nowrap; }
.finder select { min-height: 44px; padding-right: var(--space-lg); }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links a { text-decoration: none; white-space: nowrap; }
.nav-links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-deep); text-decoration-thickness: 2px; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* hero: Stage, the photograph on seven columns with the next session on a volt tag */
.hero { min-height: calc(100dvh - 72px); display: grid; align-content: center; padding-block: var(--space-2xl); }
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.hero .text { display: grid; gap: var(--space-lg); border-left: var(--rule-bar) solid var(--color-rule-2); padding-left: var(--space-lg); }
.hero h1 { font-size: clamp(3.25rem, 6vw + 0.25rem, 6rem); max-width: 10ch; }
.hero .lead { font-size: var(--text-lead); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero .actions { margin-top: var(--space-xs); }
.hero .photo { aspect-ratio: 4 / 3; min-height: 520px; margin: 0; }
.hero .tag { position: absolute; left: 0; bottom: 0; z-index: 2; display: grid; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); border-top-right-radius: var(--radius-card); }
.hero .tag b { font: var(--display-weight) var(--text-xl)/1 var(--font-display); text-transform: uppercase; }
.hero .tag span { font-size: var(--text-sm); }

/* photographs */
.photo { position: relative; margin: 0; border-radius: var(--radius-card); }
.photo--wide { aspect-ratio: 16 / 9; min-height: 560px; }
.photo--square { aspect-ratio: 1 / 1; }
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.photo-row figure { margin: 0; display: grid; gap: var(--space-sm); }
.photo-row .photo { max-width: 320px; }
.photo-row figcaption { font-weight: 500; }
.photo-row figcaption small { display: block; font-weight: 400; }

/* the course as stages: the session, minute by minute */
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: var(--rule-bar) solid var(--color-rule-2); }
.stages li { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; }
.stages li:first-child { border-left: 0; padding-left: 0; }
.stages .time { font-size: var(--text-2xl); }
.stages h3 { font-size: var(--text-lg); line-height: 1.1; }
.stages p { font-size: var(--text-sm); color: var(--color-ink-2); }

/* rows: the age groups */
.rows { display: grid; }
.row { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.row:last-child { border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.row h3, .row h2 { display: flex; align-items: baseline; gap: var(--space-md); font-size: var(--text-title); line-height: 1.2; max-width: none; }
.row h3 .figure, .row h2 .figure { font-size: var(--text-3xl); font-variant-numeric: tabular-nums; }
.row p { max-width: 60ch; }
.row .meta { margin-top: var(--space-xs); }

/* the calendar as a results sheet */
.sheet-wrap { min-width: 0; overflow-x: auto; }
.sheet { width: 100%; border-collapse: collapse; border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.sheet th, .sheet td { text-align: left; padding: var(--space-md) var(--space-md) var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.sheet th { border-top: 0; font-weight: 500; white-space: nowrap; }
.sheet td.time { white-space: nowrap; }
.sheet td:first-child { font: var(--display-weight) var(--text-xl)/1 var(--font-display); text-transform: uppercase; }
.sheet tr.next td { background: var(--color-accent); color: var(--color-accent-ink); padding-left: var(--space-md); }
.sheet .state { font-size: var(--text-sm); color: var(--color-muted); }
.sheet tr.next .state { color: var(--color-accent-ink); }
.sheet tr.past td { color: var(--color-muted); }
.place { display: grid; gap: var(--space-md); align-content: start; }
.place .figure { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.place dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-lg); margin: 0; }
.place dt { color: var(--color-muted); } .place dd { margin: 0; }

/* statement */
.statement { font: var(--display-weight) var(--text-section)/1.04 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); max-width: 20ch; }
.coaches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.coaches > div { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-lg); }
.coaches > div:first-child { border-left: 0; padding-left: 0; }
.coaches dt { font: var(--display-weight) var(--text-xl)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); }
.coaches dd { margin: var(--space-xs) 0 0; color: var(--color-ink-2); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-bar) solid var(--color-rule-2); }
.facts > div { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-lg); }
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts dt { font-weight: 500; }
.facts dd { margin: var(--space-xs) 0 0; color: var(--color-ink-2); }

/* the close: the options as rows with prices */
.options { display: grid; }
.option { display: grid; grid-template-columns: 4fr 5fr 3fr; column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.option:first-child { border-top: var(--rule-bar) solid var(--color-rule-2); }
.option:last-child { border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.option .price { font: var(--display-weight) var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.option .price small { display: block; font-weight: 400; text-transform: none; }
.option .act { justify-self: end; }

/* footer: letter close */
.footer { background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); }
.footer .grid { row-gap: var(--space-xl); }
.footer .letter { max-width: 52ch; display: grid; gap: var(--space-md); }
.footer .letter .sign { font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); text-transform: uppercase; }
.footer .fill { color: var(--color-rule); border-color: color-mix(in oklch, var(--color-rule) 60%, transparent); }
.footer address { font-style: normal; display: grid; gap: var(--space-2xs); }
.footer nav { display: grid; gap: var(--space-2xs); }
.footer a { color: var(--color-paper); }
.footer small { color: var(--color-rule); }
.footer .legal { grid-column: 1 / 13; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: space-between; }

/* inner pages */
.page-head { padding-block: var(--section-gap-s) var(--space-2xl); display: grid; gap: var(--space-lg); }
.page-head h1 { font-size: var(--text-display-s); max-width: 24ch; }
.prose { max-width: 65ch; display: grid; gap: var(--space-md); }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-lg); }
.form { display: grid; gap: var(--space-md); }
.form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.form label { display: grid; gap: var(--space-2xs); font-weight: 500; }
.form .help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.form legend { font-weight: 500; padding: 0; margin-bottom: var(--space-2xs); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); cursor: pointer; font-weight: 400; }
.seg input:checked + label { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .btn, a.text { transition: none; } }

@media (max-width: 60rem) {
  .nav .container { flex-wrap: wrap; min-height: 64px; padding-block: var(--space-sm); gap: var(--space-sm) var(--space-md); }
  .finder { order: 2; margin-inline: auto 0; }
  .finder label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-links { order: 3; width: 100%; margin-left: 0; }
  .coaches { grid-template-columns: minmax(0, 1fr); }
  .coaches > div { border-left: 0; padding-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .coaches > div:first-child { border-top: 0; }
  .hero { min-height: auto; padding-block: var(--space-xl); }
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero .photo { min-height: 0; }
  .hero h1 { font-size: clamp(2.75rem, 11vw, 4.5rem); }
  .col-1-5, .col-1-6, .col-1-7, .col-7-13, .col-6-13, .col-8-13 { grid-column: 1 / 13; }
  .grid { row-gap: var(--space-xl); }
  .photo--wide { min-height: 0; aspect-ratio: 4 / 3; }
  .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .row, .option { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-sm); }
  .option .act { justify-self: start; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div { border-left: 0; padding-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .facts > div:first-child { border-top: 0; }
  .sheet th:nth-child(3), .sheet td:nth-child(3) { display: none; }
  .sheet td.time { white-space: normal; }
  .form .two { grid-template-columns: minmax(0, 1fr); }
  .footer .legal { flex-direction: column; }
}
@media (max-width: 40rem) {
  .photo-row { grid-template-columns: minmax(0, 1fr); }
  .stages { grid-template-columns: minmax(0, 1fr); }
  .stages li { border-left: 0; padding-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .stages li:first-child { border-top: 0; }
  .hero .where { grid-template-columns: minmax(0, 1fr); }
  .nav-links { gap: var(--space-md); }
}