/* Sakonnet Cyclones — site styles. Colours come from /theme.css (admin-editable); the values here are
   the defaults so the page is readable even if that stylesheet fails to load. */

:root {
  --primary: #5b1426; --primary-600: #4d0f1f; --primary-700: #3e0b19; --primary-soft: #f3dfe4; --on-primary: #ffffff;
  --accent: #7bafd4; --accent-600: #5f9ac8; --accent-soft: #c9dff0; --accent-ink: #1f6fa3; --on-accent: #1b1b1f;
  --highlight: #f2d24b; --on-highlight: #1b1b1f; --cream: #fbf6ec;
  --ink: #1b1b1f; --ink-soft: #3e3a40; --muted: #5b5560;
  --surface: #ffffff; --surface-2: #fbf6ec; --surface-3: #f3eff0;
  --border: #e4dee0; --border-strong: #8a8288;
  --ok: #1e7b3a; --ok-bg: #e6f4ea; --warn-ink: #7a4b00; --warn-bg: #fff4d6; --err: #b3261e; --err-bg: #fbe9e7;
  --ring: #1f6fa3; --link: var(--accent-ink);
  --primary-ink: var(--primary);   /* the primary used AS TEXT; the admin's dark style lightens it */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-0: .875rem; --fs-1: 1rem; --fs-2: 1.125rem; --fs-3: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  --fs-4: clamp(1.5rem, 1.2rem + 1.6vw, 2rem); --fs-5: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-1: 6px; --r-2: 12px; --r-3: 20px; --r-pill: 999px;
  --container: 1140px; --gutter: clamp(16px, 4vw, 32px); --measure: 68ch; --tap: 44px;
  --dur: 200ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 6px 24px rgba(30, 10, 20, .12);
  color-scheme: light;
}

/* ── Reset & base ─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-1); line-height: 1.55; color: var(--ink); background: var(--surface); }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--primary-ink); }
h1 { font-size: var(--fs-5); } h2 { font-size: var(--fs-4); } h3 { font-size: var(--fs-3); } h4 { font-size: var(--fs-2); }
p { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--primary-ink); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 620px; }
.centered { text-align: center; padding-block: var(--sp-7); }
.muted { color: var(--muted); }
.empty { color: var(--muted); font-style: italic; }
.prose { max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }
.inline { display: inline; }
.lead { font-size: var(--fs-2); }

/* Focus: paint on :focus first, then hand over to :focus-visible where supported. */
:focus { outline: 3px solid var(--ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--surface); }
.site-header :focus-visible, .site-footer :focus-visible, .team-head :focus-visible, .carousel :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--primary); }

.skiplink { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--surface); color: var(--ink); padding: 10px 16px; font-weight: 700; border: 2px solid var(--primary); border-radius: 0 0 var(--r-2) 0; text-decoration: none; }
.skiplink:focus { left: 0; }

/* ── Buttons, badges, cards ───────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: var(--tap); padding: .55em 1.25em; border-radius: var(--r-pill); border: 2px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-600); color: var(--on-primary); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-600); color: var(--on-accent); }
.btn--secondary { background: var(--surface); color: var(--primary-ink); border-color: var(--primary-ink); }
.btn--secondary:hover { background: var(--primary-soft); }
.btn--ghost { background: transparent; color: var(--accent-ink); }
.btn--ghost:hover { background: var(--surface-3); color: var(--primary-ink); }
.btn--danger { background: var(--surface); color: var(--err); border-color: var(--err); }
.btn--danger:hover { background: var(--err-bg); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--lg { font-size: var(--fs-2); padding: .7em 1.6em; }
.btn--sm { min-height: 36px; padding: .35em .9em; font-size: var(--fs-0); }
.btn--icon { padding: .35em; min-width: 36px; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }
.badge { display: inline-block; padding: .15em .6em; border-radius: var(--r-pill); font-size: var(--fs-0); font-weight: 700; background: var(--surface-3); color: var(--ink-soft); vertical-align: middle; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge--err { background: var(--err-bg); color: var(--err); }
.badge--highlight { background: var(--highlight); color: var(--on-highlight); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cards--teams { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; box-shadow: 0 2px 10px rgba(30, 10, 20, .06); }
.card > a { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; padding: var(--sp-5); color: inherit; text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card > a:hover { transform: translateY(-2px); }
.card--link > a:hover .card__title { color: var(--accent-ink); }
.card__icon { color: var(--accent-ink); }
.card__icon .icon { width: 36px; height: 36px; }
.card__title { font-size: var(--fs-3); font-weight: 800; color: var(--primary-ink); display: inline-flex; align-items: center; gap: .3em; }
.card__text { color: var(--ink-soft); }
.card--team > a { padding: 0; }
.card__media { display: block; aspect-ratio: 4 / 3; background: var(--cream); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__media--badge img { object-fit: contain; padding: var(--sp-4); }
.card--team .card__title, .card--team .card__text { padding-inline: var(--sp-5); }
.card--team .card__title { padding-top: var(--sp-4); }
.card--team .card__text { padding-bottom: var(--sp-5); }

/* ── Tables ───────────────────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.table th, .table td { text-align: left; padding: .6em .75em; border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th { background: var(--surface-2); color: var(--primary-ink); font-weight: 800; border-bottom: 2px solid var(--primary-soft); white-space: nowrap; }
.table .num { font-weight: 800; color: var(--primary-ink); width: 3em; }
.table tr.is-cancelled td { color: var(--muted); text-decoration: line-through; }
.table tr.is-cancelled td .cancelled { text-decoration: none; color: var(--err); }
.event-kind { display: inline-block; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1em .5em; border-radius: 4px; background: var(--surface-3); color: var(--ink-soft); margin-right: .3em; }
.event-kind--game { background: var(--primary-soft); color: var(--primary-ink); }
.event-kind--dh { background: var(--accent-soft); color: var(--accent-ink); }
.dh-result { display: block; white-space: nowrap; }
.dh-result__game { font-size: var(--fs-0); font-weight: 700; color: var(--muted); margin-right: .35em; }
.event-kind--tournament { background: var(--highlight); color: var(--on-highlight); }
.event-kind--practice { background: var(--accent-soft); color: var(--accent-ink); }
.event-ha { color: var(--muted); font-size: .9em; }

/* ── Forms ────────────────────────────────────────────────────────────────────────────────── */
.form { max-width: 720px; }
.field { margin-bottom: var(--sp-4); }
.field label, .field .label, .field legend { display: block; font-weight: 700; margin-bottom: var(--sp-1); }
.field input:not([type=checkbox]):not([type=radio]):not([type=color]), .field select, .field textarea, .table--edit input:not([type=checkbox]), .table--edit select {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--r-1); padding: .55em .7em; min-height: var(--tap); }
.field textarea { min-height: 6em; resize: vertical; }
.field--error input, .field--error textarea, .field--error select { border-color: var(--err); }
.field__help { color: var(--muted); font-size: var(--fs-0); margin: var(--sp-1) 0 0; }
.field__error { color: var(--err); font-weight: 700; font-size: var(--fs-0); margin: var(--sp-1) 0 0; }
.field--check { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: start; }
.field--check input { width: 1.25em; height: 1.25em; margin-top: .2em; accent-color: var(--primary); }
.field--check label { margin: 0; font-weight: 600; }
.field--check .field__help { grid-column: 2; }
.radio, .check { display: inline-flex; align-items: center; gap: .45em; margin-right: var(--sp-4); font-weight: 600; }
.radio input, .check input { width: 1.2em; height: 1.2em; accent-color: var(--primary); }
.radio--block { display: flex; margin: 0 0 var(--sp-2); }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.check-row--indent { padding-left: 1.65em; }          /* under a radio's own text */
.check-row .check { margin-right: 0; }
.check-row.is-off .check { opacity: .5; }
.req { color: var(--err); }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); }
.errors-summary { background: var(--err-bg); border-left: 4px solid var(--err); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-1); margin-bottom: var(--sp-4); }
.errors-summary ul { margin: 0; padding-left: 1.2em; }
.errors-summary a { color: var(--err); font-weight: 700; }
.card-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--sp-6); margin-block: var(--sp-6); box-shadow: var(--shadow); }
.card-form h1 { font-size: var(--fs-4); }
.password-wrap { display: flex; gap: var(--sp-2); align-items: center; }
.password-wrap input { flex: 1; }
.file-preview { margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); }
.file-preview img { max-height: 120px; width: auto; border-radius: var(--r-1); border: 1px solid var(--border); }
.hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── Flashes & notices ────────────────────────────────────────────────────────────────────── */
.flashes { margin-top: var(--sp-4); }
.flash { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-1); margin-bottom: var(--sp-3); font-weight: 600; border-left: 4px solid; }
.flash--success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.flash--error { background: var(--err-bg); color: var(--err); border-color: var(--err); }
.flash--info { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-ink); }

/* ── Header & navigation ──────────────────────────────────────────────────────────────────── */
.site-header { background: var(--primary); color: var(--on-primary); }
.site-header__inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); padding-block: var(--sp-3); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-4); color: var(--on-primary); text-decoration: none; margin-right: auto; }
.brand__logo { width: 168px; height: 168px; background: transparent; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); transition: width var(--dur) var(--ease), height var(--dur) var(--ease); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; gap: 4px; }
.brand__name { font-weight: 900; font-size: 1.8rem; letter-spacing: -.01em; transition: font-size var(--dur) var(--ease); }
.brand__tagline { font-size: 1rem; opacity: .85; text-transform: uppercase; letter-spacing: .1em; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 2px solid rgba(255,255,255,.6); border-radius: var(--r-1); background: transparent; color: var(--on-primary); cursor: pointer; }
.nav-toggle .icon { width: 26px; height: 26px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open, .nav-toggle:not([aria-expanded="true"]) .nav-toggle__close { display: none; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
/* Social buttons: their own header item, pinned to the far right; the links float between brand and buttons. */
.site-social { list-style: none; margin: 0 0 0 var(--sp-5); padding: 0; display: flex; gap: var(--sp-2); align-items: center; }
.social--header { width: 44px; height: 44px; background: rgba(255,255,255,.14); color: var(--on-primary); border: 1px solid rgba(255,255,255,.35); }
.social--header .icon { width: 24px; height: 24px; }
.social--header:hover { background: var(--accent); color: var(--on-accent); }
.site-nav a, .nav-dropdown__summary { display: inline-flex; align-items: center; gap: .25em; min-height: var(--tap); padding: .45em 1em; border-radius: var(--r-pill); color: var(--on-primary); text-decoration: none; font-weight: 700; font-size: 1.0625rem; cursor: pointer; }
.site-nav a:hover, .nav-dropdown__summary:hover, .nav-dropdown[open] > .nav-dropdown__summary { background: rgba(255,255,255,.14); color: var(--on-primary); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
.nav-dropdown { position: relative; }
.nav-dropdown__summary { list-style: none; }
.nav-dropdown__summary::-webkit-details-marker { display: none; }
.nav-dropdown__chevron { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.nav-dropdown[open] .nav-dropdown__chevron { transform: rotate(180deg); }
.nav-dropdown__menu { list-style: none; margin: 0; padding: var(--sp-2); position: absolute; top: calc(100% + 4px); left: 0; min-width: 250px; background: var(--surface); color: var(--ink); border-radius: var(--r-2); box-shadow: var(--shadow); border: 1px solid var(--border); z-index: 50; }
.nav-dropdown__menu a { display: flex; color: var(--ink); border-radius: var(--r-1); padding: .55em .8em; width: 100%; }
.nav-dropdown__menu a:hover { background: var(--surface-2); color: var(--primary); }
.nav-dropdown__menu .icon--sm { width: 16px; height: 16px; opacity: .7; }
.nav-dropdown__empty { padding: .55em .8em; color: var(--muted); }
.icon--sm { width: 18px; height: 18px; }

@media (max-width: 767px) {
  .site-header__inner { flex-wrap: wrap; }
  /* The brand shrinks and wraps its text so the menu button stays on the same row as the badge. */
  /* Badge and wordmark scale with the screen so the name never wraps and the menu button keeps its row. */
  .brand { gap: var(--sp-3); flex: 1 1 0; min-width: 0; }
  .brand__text { min-width: 0; }
  .brand__logo { width: clamp(72px, 24vw, 120px); height: clamp(72px, 24vw, 120px); }
  .brand__name { font-size: clamp(.85rem, 4.4vw, 1.3rem); white-space: nowrap; }
  .brand__tagline { font-size: clamp(.5rem, 2.5vw, .7rem); letter-spacing: .05em; white-space: nowrap; }
  .nav-toggle { flex: none; }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .site-nav__list { flex-direction: column; align-items: stretch; }
  /* On phones the buttons are the last row of the opened menu (always visible without JS). */
  .site-social { flex-basis: 100%; margin: 0; border-top: 1px solid rgba(255,255,255,.2); padding: var(--sp-3) var(--sp-3) var(--sp-2); }
  html.js .site-nav:not(.is-open) ~ .site-social { display: none; }
  .site-nav a, .nav-dropdown__summary { width: 100%; }
  .nav-dropdown__menu { position: static; box-shadow: none; border: 0; background: rgba(255,255,255,.08); color: var(--on-primary); margin-top: var(--sp-1); }
  .nav-dropdown__menu a { color: var(--on-primary); }
  .nav-dropdown__menu a:hover { background: rgba(255,255,255,.14); color: var(--on-primary); }
  .nav-dropdown__empty { color: rgba(255,255,255,.75); }
  html.js .nav-toggle { display: inline-flex; }
  html.js .site-nav:not(.is-open) { display: none; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* Medium screens: row 1 = brand … social buttons at the right; row 2 = the links, centred. */
  .brand { margin-right: 0; }
  .site-social { order: 2; margin-left: auto; }
  .site-nav { order: 3; flex-basis: 100%; justify-content: center; margin: 0; }
}
@media (min-width: 1280px) {
  /* One row: brand | (equal gap) | links | (equal gap) | social buttons at the edge. The header's
     container is wider than the page's so six links and three buttons still fit beside the badge. */
  .site-header .container { max-width: 1400px; padding-inline: 24px; }
  .brand { margin-right: 0; }
  .site-nav { margin-left: auto; margin-right: auto; }
}
@media (min-width: 1280px) {
  /* The one-row sizes: six links and four buttons beside the big badge need trimmer links and a smaller
     wordmark than the two-row layout uses. (The varsity wordmark's size lives with the varsity rules
     below — it has to come after them.) */
  .site-nav a, .nav-dropdown__summary { padding: .45em .7em; font-size: 1rem; }
  .site-social { margin-left: var(--sp-3); gap: 5px; }
  .brand__name { font-size: 1.6rem; }
  .brand__tagline { font-size: .9rem; letter-spacing: .08em; }
}
@media (min-width: 768px) {
  /* Sticky only with JS, because JS is what shrinks the big badge once the page scrolls. */
  html.js .site-header { position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: margin-bottom var(--dur) var(--ease); }
  html.js.is-scrolled .brand__logo { width: 84px; height: 84px; }
  html.js.is-scrolled .brand__name { font-size: 1.55rem; }
  /* The badge shrinks by 84px (168 -> 84), so the header gives those 84px back as bottom margin, on the
     same transition: the page below never moves when the badge changes. Without this the shrink
     shortened the document by 84px at the 120px threshold, Chrome's scroll anchoring pulled the page
     back under the threshold to keep the content still, the badge grew again, and the header
     oscillated for as long as the visitor sat near that point (seen 2026-09-15). tests/test_header.py
     holds the three numbers together. */
  html.js.is-scrolled .site-header { margin-bottom: 84px; }
}

/* ── Carousel ─────────────────────────────────────────────────────────────────────────────── */
.carousel { position: relative; background: var(--primary-700); }
.carousel__track { list-style: none; margin: 0; padding: 0; position: relative; aspect-ratio: 16 / 7; overflow: hidden; touch-action: pan-y; }
.carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--ease); }
.carousel__slide.is-active { opacity: 1; z-index: 1; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; -webkit-user-drag: none; user-select: none; }
/* "Fit" (the default) shows the whole picture on the brand-coloured frame; "Fill" crops to fill it. */
.carousel__slide.fit-fit img { object-fit: contain; }
.focal-top img { object-position: center top; } .focal-bottom img { object-position: center bottom; }
.focal-left img { object-position: left center; } .focal-right img { object-position: right center; }
/* The caption and button: a box at the slide's chosen spot (top/middle/bottom × left/center/right,
   per slide since 2026-09-17), inset well clear of the edge. Along the bottom it sits on the soft dark
   band the site always had; higher up the box carries its own translucent panel. The picture behind
   is a link when the slide has one, so the caption layer lets pointer events through except on the box. */
.carousel__caption { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-start; padding: var(--sp-6) clamp(var(--sp-5), 5.5vw, 80px) var(--sp-7); color: #fff; pointer-events: none; }
.carousel__caption::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(20, 4, 10, .78), rgba(20, 4, 10, 0)); pointer-events: none; }
.carousel__caption--top-left::before, .carousel__caption--top-center::before, .carousel__caption--top-right::before,
.carousel__caption--middle-left::before, .carousel__caption--middle-center::before, .carousel__caption--middle-right::before { display: none; }
.carousel__caption-box { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); max-width: min(100%, 46rem); pointer-events: auto; }
.carousel__caption-box--panel { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2); background: rgba(20, 4, 10, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.carousel__caption-text { margin: 0; font-size: var(--fs-3); font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.carousel__caption--top-left, .carousel__caption--top-center, .carousel__caption--top-right { align-items: flex-start; padding-top: var(--sp-6); }
.carousel__caption--middle-left, .carousel__caption--middle-center, .carousel__caption--middle-right { align-items: center; }
.carousel__caption--top-center, .carousel__caption--middle-center, .carousel__caption--bottom-center { justify-content: center; text-align: center; }
.carousel__caption--top-center .carousel__caption-box, .carousel__caption--middle-center .carousel__caption-box, .carousel__caption--bottom-center .carousel__caption-box { justify-content: center; }
.carousel__caption--top-right, .carousel__caption--middle-right, .carousel__caption--bottom-right { justify-content: flex-end; text-align: right; }
.carousel__caption--top-right .carousel__caption-box, .carousel__caption--middle-right .carousel__caption-box, .carousel__caption--bottom-right .carousel__caption-box { justify-content: flex-end; }
.carousel__caption--top-right, .carousel__caption--top-center { padding-right: calc(var(--tap) + var(--sp-5)); }   /* clear of the pause button */
.carousel__img-link { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
.carousel__controls { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.carousel__btn { pointer-events: auto; position: absolute; width: var(--tap); height: var(--tap); border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(20, 4, 10, .45); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.carousel__btn:hover { background: rgba(20, 4, 10, .75); }
.carousel__btn .icon { width: 24px; height: 24px; }
[data-carousel-prev] { left: var(--sp-3); top: 50%; transform: translateY(-50%); }
[data-carousel-next] { right: var(--sp-3); top: 50%; transform: translateY(-50%); }
[data-carousel-pause] { right: var(--sp-3); top: var(--sp-3); }
.carousel.is-paused .carousel__pause-icon, .carousel:not(.is-paused) .carousel__play-icon { display: none; }
.carousel__dots { position: absolute; left: 50%; bottom: var(--sp-3); transform: translateX(-50%); z-index: 3; display: flex; gap: var(--sp-2); padding: var(--sp-1); }
.carousel__dot { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.25); cursor: pointer; }
.carousel__dot[aria-current="true"] { background: #fff; }
.carousel:not(.is-ready) .carousel__controls, .carousel:not(.is-ready) .carousel__dots { display: none; }
.carousel:not(.is-ready) .carousel__slide:not(.is-active) { display: none; }
@media (max-width: 767px) {
  .carousel__track { aspect-ratio: 4 / 3; }
  .carousel__caption { padding: var(--sp-5) calc(var(--tap) + var(--sp-3)) var(--sp-7); }   /* clear of the arrows */
  .carousel__caption-text { font-size: var(--fs-2); }
}

/* ── Home page ────────────────────────────────────────────────────────────────────────────── */
.welcome { padding-block: var(--sp-7) var(--sp-5); }
.welcome__inner { display: grid; gap: var(--sp-4); }
.welcome h1 { margin-bottom: 0; }
.quicklinks { padding-block: var(--sp-5) var(--sp-7); }
.values-strip { background: var(--primary); color: var(--on-primary); padding-block: var(--sp-7); }
.values-strip h2 { color: var(--on-primary); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-3); }
.chips { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.chip { display: inline-flex; align-items: center; gap: .35em; padding: .45em 1em; border-radius: var(--r-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); font-weight: 700; }
.chip .icon { color: var(--accent); }
.values-strip__motto { font-size: var(--fs-3); font-weight: 800; color: var(--highlight); margin: 0; }
.home-teams { padding-block: var(--sp-7); background: var(--cream); }
.team-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.team-pill { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: var(--tap); padding: .5em 1.4em; border-radius: var(--r-pill); background: var(--surface); border: 2px solid var(--primary); color: var(--primary); font-weight: 800; text-decoration: none; }
.team-pill:hover { background: var(--primary); color: var(--on-primary); }
.team-pill__sub { font-size: var(--fs-0); font-weight: 600; opacity: .8; }

/* ── Page head & About ────────────────────────────────────────────────────────────────────── */
.page-head { background: var(--cream); border-bottom: 1px solid var(--border); padding-block: var(--sp-6); margin-bottom: var(--sp-6); }
.page-head h1 { margin-bottom: var(--sp-1); }
.page-head__sub { color: var(--ink-soft); font-size: var(--fs-2); margin: 0; }
.prose-page { padding-bottom: var(--sp-7); }
.about-section { padding-block: var(--sp-5); border-bottom: 1px solid var(--border); display: grid; gap: var(--sp-5); align-items: start; }
.about-section:last-child { border-bottom: 0; }
.about-section.has-image { grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); }
.about-section__figure { margin: 0; }
.about-section__figure img { border-radius: var(--r-2); box-shadow: var(--shadow); }
.prose-list { max-width: var(--measure); padding-left: 1.2em; }
.checklist { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.checklist li { display: flex; align-items: center; gap: var(--sp-3); padding: .55em .9em; background: var(--accent-soft); border-radius: var(--r-1); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--primary); }
.checklist .icon { color: var(--primary-ink); flex: none; }
.motto { font-size: var(--fs-3); font-weight: 800; color: var(--primary); background: var(--highlight); display: inline-block; padding: .3em .9em; border-radius: var(--r-1); }
@media (max-width: 767px) { .about-section.has-image { grid-template-columns: 1fr; } }

/* ── Team page ────────────────────────────────────────────────────────────────────────────── */
.team-head { background: var(--primary); color: var(--on-primary); padding-block: var(--sp-6); margin-bottom: var(--sp-6); }
.team-head__inner { display: grid; grid-template-columns: minmax(140px, 260px) 1fr; gap: var(--sp-5); align-items: center; }
.team-head__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-2); overflow: hidden; background: rgba(255,255,255,.1); border: 3px solid rgba(255,255,255,.5); }
.team-head__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-head__media--badge { background: #fff; }
.team-head__media--badge img { object-fit: contain; padding: var(--sp-2); }
.team-head h1 { color: var(--on-primary); margin-bottom: var(--sp-1); }
.team-head__eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-0); font-weight: 700; }
.team-head__eyebrow a { color: var(--accent); text-decoration: none; }
.team-head__eyebrow a:hover { text-decoration: underline; color: #fff; }
.team-head__sub { font-size: var(--fs-2); opacity: .9; }
.team-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.pay-note { flex-basis: 100%; margin: 0; font-size: var(--fs-0); opacity: .9; }
.pay-soon { margin: 0; display: inline-flex; align-items: center; gap: .5em; font-weight: 600; }
.team-body { padding-bottom: var(--sp-8); }
.team-description { margin-bottom: var(--sp-5); font-size: var(--fs-2); }
.team-section { margin-bottom: var(--sp-6); }
.coach-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.coach { background: var(--surface-2); border-radius: var(--r-2); padding: var(--sp-4); display: grid; gap: 2px; }
.coach__name { font-weight: 800; color: var(--primary-ink); font-size: var(--fs-2); }
.coach__title { color: var(--ink-soft); }
.coach__contact { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); font-size: var(--fs-0); }
.coach__contact a { display: inline-flex; align-items: center; gap: .3em; }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-3); border: 2px solid var(--accent-soft); }
.avatar--lg { width: 72px; height: 72px; }
.avatar-cell { width: 56px; padding-top: .35em; padding-bottom: .35em; }
.coach--photo { display: grid; grid-template-columns: 72px 1fr; column-gap: var(--sp-3); align-items: center; }
.coach--photo .avatar { grid-row: 1 / span 3; }
/* The game-day ticker, styled as a scoreboard: a black matrix board in a metal bezel with a
   date-and-clock plate in the club colour on its left. The LED line is amber text flowing through
   a fixed grid of dots — a mask on the viewport, so the dots stay put while the text moves through
   them, as on a real board. At rest (no JavaScript, or reduced motion) the line wraps; js/ticker.js
   adds .is-moving, repeats the line until it covers the board twice and slides the track by exactly
   one copy, so the loop never jumps. */
.ticker { --board: #08080b; --led: #ffb300; --led-dim: #b9861a; --lamp-live: #ff5147; --lamp-final: #4ade80; --bezel: #3a3a42; --ticker-gap: 72px; max-width: var(--container); margin: var(--sp-6) auto 0; padding-inline: var(--gutter); }
.ticker__inner { display: flex; align-items: stretch; min-height: 68px; border: 3px solid var(--bezel); border-radius: 8px; background: var(--board); color: var(--led); box-shadow: inset 0 0 0 1px #000, 0 8px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06); overflow: hidden; }
.ticker__plate { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: none; min-width: 7.5em; padding: var(--sp-2) var(--sp-4); background: var(--primary); color: var(--on-primary); border-right: 3px solid var(--bezel); font-family: Graduate, "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; line-height: 1.15; text-align: center; }
.ticker__plate-date { font-size: var(--fs-0); letter-spacing: .08em; opacity: .92; }
.ticker__plate-clock { font-size: var(--fs-3); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ticker__viewport { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; padding: var(--sp-2) var(--sp-3); background: #1d1608; font-size: 1.4rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 0 10px rgba(255, 179, 0, .5); -webkit-mask-image: radial-gradient(circle, #000 0 1.15px, transparent 1.45px); -webkit-mask-size: 3px 3px; mask-image: radial-gradient(circle, #000 0 1.15px, transparent 1.45px); mask-size: 3px 3px; }
/* the board's unlit dots: the viewport's own dark-amber background shows through the same mask */
.ticker__track { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--ticker-gap); }
.ticker__list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0; padding: 0; list-style: none; }
.ticker__item { display: inline-flex; align-items: center; gap: var(--sp-3); }
.ticker__item + .ticker__item::before { content: ""; align-self: stretch; width: 4px; margin-inline-end: var(--sp-2); background: #2f2f36; }
.ticker__badge { display: inline-flex; align-items: center; gap: .45em; flex: none; padding: .15em .55em; border: 2px solid currentColor; border-radius: 3px; font-size: var(--fs-0); letter-spacing: .14em; color: var(--led); }
.ticker__team { flex: none; padding: .15em .55em; border-radius: 3px; background: var(--accent); color: var(--primary-700, #2a0a14); font-size: var(--fs-0); letter-spacing: .14em; text-shadow: none; }
/* the home page's board: edge to edge above the header, no bezel corners (two classes so the phone
   rule below, which re-pads .ticker, cannot outrank it) */
.ticker.ticker--top { max-width: none; margin: 0; padding-inline: 0; }
.ticker.ticker--top .ticker__inner { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: inset 0 0 0 1px #000; }
.ticker__item--live .ticker__badge { color: var(--lamp-live); text-shadow: 0 0 10px rgba(255, 81, 71, .6); }
.ticker__item--live .ticker__badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: ticker-pulse 1.1s ease-in-out infinite; }
.ticker__item--final .ticker__badge { color: var(--lamp-final); text-shadow: 0 0 10px rgba(74, 222, 128, .55); }
.ticker__item--cancelled .ticker__badge { color: var(--lamp-live); }
.ticker__item--cancelled .ticker__body { color: var(--led-dim); text-decoration: line-through; text-decoration-thickness: 2px; }
.ticker__item--played .ticker__badge, .ticker__item--next .ticker__badge { color: var(--led-dim); }
.ticker__sep { color: var(--led-dim); margin-inline: .15em; }
.ticker__score { display: inline-flex; align-items: baseline; gap: .35em; margin-inline-start: .35em; font-size: 1.45em; letter-spacing: .06em; font-variant-numeric: tabular-nums; line-height: 1; }
.ticker__score-label { font-size: .55em; letter-spacing: .12em; color: var(--led-dim); }
.ticker__outcome { font-size: .62em; padding: .1em .35em; border: 2px solid currentColor; border-radius: 3px; }
.ticker__score--live .ticker__digits { text-shadow: 0 0 12px rgba(255, 179, 0, .75); animation: ticker-glow 1.6s ease-in-out infinite; }
@keyframes ticker-glow { 0%, 100% { text-shadow: 0 0 12px rgba(255, 179, 0, .75); } 50% { text-shadow: 0 0 3px rgba(255, 179, 0, .3); } }
.ticker__outcome--w { color: var(--lamp-final); }
.ticker__outcome--l { color: var(--lamp-live); }
.ticker__pause { flex: none; align-self: center; width: var(--tap); height: var(--tap); margin-inline: var(--sp-2); border-radius: 50%; border: 2px solid #55555f; background: #1b1b21; color: #e6e6ea; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 4px rgba(0, 0, 0, .6); }
.ticker__pause:hover { background: #2a2a31; }
.ticker__pause .icon { width: 20px; height: 20px; }
.ticker:not(.is-moving) .ticker__pause, .ticker:not(.is-paused) .ticker__play-icon, .ticker.is-paused .ticker__pause-icon { display: none; }
.ticker.is-moving .ticker__viewport { padding-block: 0; }
.ticker.is-moving .ticker__track { flex-wrap: nowrap; width: max-content; gap: 0; animation: ticker-scroll var(--ticker-duration, 20s) linear infinite; will-change: transform; }
.ticker.is-moving .ticker__list { flex: none; flex-wrap: nowrap; white-space: nowrap; padding-inline-end: var(--ticker-gap); min-height: 58px; align-items: center; }
.ticker.is-moving .ticker__viewport::before, .ticker.is-moving .ticker__viewport::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--sp-5); z-index: 1; pointer-events: none; }
.ticker.is-moving .ticker__viewport::before { left: 0; background: linear-gradient(to right, var(--board), transparent); }
.ticker.is-moving .ticker__viewport::after { right: 0; background: linear-gradient(to left, var(--board), transparent); }
.ticker.is-paused .ticker__track { animation-play-state: paused; }
@media (hover: hover) { .ticker.is-moving:hover .ticker__track, .ticker.is-moving:focus-within .ticker__track { animation-play-state: paused; } }
@media (max-width: 480px) {
  /* a phone: the clock alone on the plate, and a tap on the board pauses it (js/ticker.js), so the
     button gives its width back to the line */
  .ticker { padding-inline: var(--sp-3); margin-top: var(--sp-5); }
  .ticker__plate { min-width: 0; padding-inline: var(--sp-2); }
  .ticker__plate-date { display: none; }
  .ticker__plate-clock { font-size: var(--fs-1); }
  .ticker__pause { display: none; }
}
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(var(--ticker-shift, -100%)); } }
@keyframes ticker-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.7); } }

a.ticker__plate { text-decoration: none; }
a.ticker__plate:hover .ticker__plate-clock, a.ticker__plate:focus-visible .ticker__plate-clock { text-decoration: underline; text-underline-offset: .15em; }

/* The club scoreboard page (/scoreboard, 2026-09-17): every team's board at once on a dark page,
   sized for a phone at the field or a TV on the wall. The same amber-on-black matrix look as the
   ticker, laid out as panels instead of a strip; the type scales with the screen. Always dark — a
   scoreboard is — whatever style the visitor chose, so every colour here is set outright. */
html body.page-board, html[data-style] body.page-board { background: #08080b; color: #e6e6ea; }   /* outranks the visitor-style ground rule (html[data-style="dark"] body): the board is black in both */
.board-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--gutter); background: var(--primary); color: var(--on-primary); font-family: Graduate, "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.board-bar__brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: inherit; text-decoration: none; font-size: var(--fs-1); }
.board-bar__logo { flex: none; width: 44px; height: 44px; object-fit: contain; background: transparent; }
.board-bar .board-bar__title { margin: 0 auto 0 0; padding-inline-start: var(--sp-3); color: inherit; font-family: inherit; font-weight: 400; font-size: var(--fs-3); letter-spacing: .14em; }
.board-bar__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); color: inherit; background: rgba(0, 0, 0, .25); }
.board-bar__close:hover, .board-bar__close:focus-visible { background: #fff; color: var(--primary); border-color: #fff; }
.board-bar__close .icon { width: 24px; height: 24px; }
.board { --board: #08080b; --led: #ffb300; --led-dim: #b9861a; --lamp-live: #ff5147; --lamp-final: #4ade80; --bezel: #3a3a42; max-width: 1600px; margin-inline: auto; padding: var(--sp-4) var(--gutter) var(--sp-6); }
.board__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); font-family: Graduate, "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; }
.board__plate { display: inline-flex; align-items: baseline; gap: var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-4); border: 3px solid var(--bezel); border-radius: 8px; background: var(--primary); color: var(--on-primary); line-height: 1.15; }
.board__plate-date { font-size: var(--fs-1); letter-spacing: .08em; opacity: .92; white-space: nowrap; }
.board__plate-clock { font-size: var(--fs-4); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board__live-note { display: inline-flex; align-items: center; gap: .5em; margin: 0; color: var(--lamp-live); font-size: var(--fs-2); letter-spacing: .14em; text-shadow: 0 0 10px rgba(255, 81, 71, .6); }
.board__live-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: ticker-pulse 1.1s ease-in-out infinite; }
.board__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 960px) { .board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board__team { border: 3px solid var(--bezel); border-radius: 10px; background: var(--board); box-shadow: inset 0 0 0 1px #000, 0 8px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06); overflow: hidden; }
.board__team--live { border-color: #7a3a36; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgba(255, 81, 71, .35), 0 8px 26px rgba(255, 81, 71, .18); }
.board__team .board__name { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: 0; padding: var(--sp-2) var(--sp-4); background: var(--primary); color: var(--on-primary); font-family: Graduate, "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif; font-size: var(--fs-3); letter-spacing: .1em; text-transform: uppercase; }
.board__record { font-size: .7em; letter-spacing: .08em; opacity: .9; font-variant-numeric: tabular-nums; }
.board__name-link { color: inherit; text-decoration: none; }
.board__name-link::after { content: " \203A"; opacity: .7; }
.board__name-link:hover, .board__name-link:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
.board-bar__all { flex: none; margin-inline-end: var(--sp-2); padding: .35em .8em; border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px; color: inherit; text-decoration: none; font-size: var(--fs-0); letter-spacing: .12em; }
.board-bar__all:hover, .board-bar__all:focus-visible { background: #fff; color: var(--primary); border-color: #fff; }
.board--one .board__grid { grid-template-columns: minmax(0, 1fr); }
.board--one .board__lines { font-size: clamp(1.3rem, 1rem + 1.5vw, 2.8rem); }
.board--one .board__team .board__name { font-size: var(--fs-4); }
.board__lines { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3); background: #1d1608; color: var(--led); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; line-height: 1.25; text-shadow: 0 0 10px rgba(255, 179, 0, .5); font-size: clamp(1.05rem, .9rem + .7vw, 1.9rem); -webkit-mask-image: radial-gradient(circle, #000 0 1.15px, transparent 1.45px); -webkit-mask-size: 3px 3px; mask-image: radial-gradient(circle, #000 0 1.15px, transparent 1.45px); mask-size: 3px 3px; }
.board__line { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .8em; }
.board__line + .board__line { border-top: 3px solid #2f2f36; padding-top: var(--sp-3); }
.board__badge { display: inline-flex; align-items: center; gap: .45em; flex: none; padding: .15em .55em; border: 2px solid currentColor; border-radius: 3px; font-size: .62em; letter-spacing: .14em; color: var(--led); }
.board__body { flex: 1 1 12em; min-width: 0; }
.board__sep { color: var(--led-dim); margin-inline: .15em; }
.board__line--live .board__badge { color: var(--lamp-live); text-shadow: 0 0 10px rgba(255, 81, 71, .6); }
.board__line--live .board__badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: ticker-pulse 1.1s ease-in-out infinite; }
.board__line--final .board__badge { color: var(--lamp-final); text-shadow: 0 0 10px rgba(74, 222, 128, .55); }
.board__line--cancelled .board__badge { color: var(--lamp-live); }
.board__line--cancelled .board__body { color: var(--led-dim); text-decoration: line-through; text-decoration-thickness: 2px; }
.board__line--played .board__badge, .board__line--next .board__badge { color: var(--led-dim); }
.board__score { display: inline-flex; align-items: baseline; gap: .35em; margin-inline-start: auto; font-size: 1.6em; letter-spacing: .06em; font-variant-numeric: tabular-nums; line-height: 1; }
.board__score-label { font-size: .5em; letter-spacing: .12em; color: var(--led-dim); }
.board__outcome { font-size: .55em; padding: .1em .35em; border: 2px solid currentColor; border-radius: 3px; }
.board__outcome--w { color: var(--lamp-final); }
.board__outcome--l { color: var(--lamp-live); }
.board__score--live .board__digits { text-shadow: 0 0 12px rgba(255, 179, 0, .75); animation: ticker-glow 1.6s ease-in-out infinite; }
.board__empty { color: var(--led-dim); }
.board-foot { padding: var(--sp-4) var(--gutter) var(--sp-6); text-align: center; color: #9a9aa5; font-size: var(--fs-0); }
.board-foot p { margin: 0; }
.board-foot a { color: #e6e6ea; }
.page-board .to-top { display: none; }
@media (max-width: 599px) {
  .board-bar__brand span { display: none; }
  .board-bar .board-bar__title { font-size: var(--fs-2); min-width: 0; }
  .board-bar--one .board-bar__brand { display: none; }     /* room for the All-teams pill and the x */
  .board-bar__all { padding: .3em .6em; font-size: .7rem; letter-spacing: .08em; margin-inline-end: var(--sp-1); }
  .board__head { flex-wrap: wrap; }
  .board__plate { padding: var(--sp-1) var(--sp-3); }
  .board__plate-clock { font-size: var(--fs-3); }
  .board__lines { padding: var(--sp-3); }
}
.past-games { margin-top: var(--sp-4); }
.past-games summary { cursor: pointer; font-weight: 700; color: var(--accent-ink); padding: var(--sp-2) 0; }
@media (max-width: 767px) {
  .team-head__inner { grid-template-columns: 1fr; }
  .team-head__media { max-width: 260px; }
  .table--schedule thead { display: none; }
  .table--schedule tr { display: block; padding: var(--sp-2) 0; }
  .table--schedule td { display: grid; grid-template-columns: 5.5em 1fr; gap: var(--sp-2); border: 0; padding: .2em 0; }
  .table--schedule td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: var(--fs-0); }
  .table--schedule tbody tr { border-bottom: 1px solid var(--border); }
}

/* ── Contact ──────────────────────────────────────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: var(--sp-7); padding-bottom: var(--sp-8); align-items: start; }
.contact-aside { background: var(--cream); border-radius: var(--r-2); padding: var(--sp-5); }
.contact-aside h2 { font-size: var(--fs-3); }
.contact-aside p { display: flex; align-items: center; gap: .5em; }
.big-icon .icon { width: 64px; height: 64px; color: var(--ok); }
@media (max-width: 767px) { .contact-layout { grid-template-columns: 1fr; } }

/* ── Footer ───────────────────────────────────────────────────────────────────────────────── */
.site-footer { background: var(--primary-700); color: #fff; margin-top: auto; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--accent); }
.site-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); padding-block: var(--sp-7); }
.site-footer__logo { width: 84px; height: 84px; background: transparent; object-fit: contain; margin-bottom: var(--sp-3); }
.site-footer__name { font-weight: 900; font-size: var(--fs-3); margin-bottom: var(--sp-1); }
.site-footer__tagline { opacity: .85; margin: 0; }
.site-footer__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.site-footer__links a { text-decoration: none; font-weight: 700; display: inline-flex; min-height: 32px; align-items: center; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__heading { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-0); margin-bottom: var(--sp-3); }
.social-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; gap: var(--sp-3); }
.social { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
.social:hover { background: var(--accent); color: var(--on-accent); }
.social .icon { width: 26px; height: 26px; }
.site-footer__contact { margin: 0 0 var(--sp-1); }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.15); font-size: var(--fs-0); }
.site-footer__legal-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); padding-block: var(--sp-3); }
.site-footer__legal p { margin: 0; }
.site-footer__legal a { opacity: .8; }
@media (max-width: 767px) { .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-5); } }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* ── Back to top ──────────────────────────────────────────────────────────────────────────── */
.to-top { position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 90; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); border: 2px solid var(--accent); box-shadow: var(--shadow); text-decoration: none; opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.to-top.is-visible { opacity: 1; transform: none; }
.to-top:hover { background: var(--accent); color: var(--on-accent); border-color: var(--primary); }
.to-top .icon { width: 26px; height: 26px; }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: none; }
@media (max-width: 767px) { .to-top { left: var(--sp-3); bottom: var(--sp-3); width: 44px; height: 44px; } }
@media print { .to-top { display: none !important; } }

/* ── Page transition: the Cyclones sweep ──────────────────────────────────────────────────── */
/* The reveal plays only when the server saw the visitor arrive from another page here and marked
   the element .page-wipe--arriving — a typed address, a bookmark or a link from a search engine
   opens plainly. When it does play it runs from CSS alone, so a visitor whose JavaScript never runs
   still sees the panel clear itself and is never left stuck behind it. js/page-transition.js adds
   .is-leaving for the matching sweep the other way; its 420ms must stay in step with the duration
   below (tests/test_page_transition.py checks the pair). */
.page-wipe { position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
.page-wipe__panel { position: absolute; top: -10%; bottom: -10%; left: -30%; width: 160%; background: linear-gradient(100deg, var(--primary-700) 0%, var(--primary) 45%, var(--primary-600) 100%); transform: skewX(-9deg) translateX(-115%); }
.page-wipe__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.page-wipe__mark img { width: clamp(200px, 36vw, 360px); max-width: 62vw; max-height: 56vh; height: auto; object-fit: contain; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .38)); }
.page-wipe--arriving .page-wipe__panel { animation: wipe-out 620ms cubic-bezier(.65, 0, .2, 1) both; }
.page-wipe--arriving .page-wipe__mark { animation: wipe-mark-out 620ms cubic-bezier(.65, 0, .2, 1) both; }
.page-wipe.is-leaving .page-wipe__panel { animation: wipe-in 420ms cubic-bezier(.5, 0, .25, 1) both; }
.page-wipe.is-leaving .page-wipe__mark { animation: wipe-mark-in 420ms cubic-bezier(.5, 0, .25, 1) both; }
@keyframes wipe-in { from { transform: skewX(-9deg) translateX(115%); } to { transform: skewX(-9deg) translateX(0); } }
@keyframes wipe-out { from { transform: skewX(-9deg) translateX(0); } to { transform: skewX(-9deg) translateX(-115%); } }
@keyframes wipe-mark-in { 0% { opacity: 0; transform: translateX(10vw) scale(.86); } 45% { opacity: 0; } 100% { opacity: 1; transform: none; } }
@keyframes wipe-mark-out { 0% { opacity: 1; transform: none; } 55% { opacity: 1; } 100% { opacity: 0; transform: translateX(-10vw) scale(.86); } }
@media (prefers-reduced-motion: reduce) { .page-wipe { display: none; } }
@media print { .page-wipe { display: none !important; } }

/* ── The 2026-09-12 additions (docs/INSPIRATION.md) ──────────────────────────────────────── */
/* Every block below is switchable from Site settings › Sections and renders only when it has
   something to show, so none of these rules applies to a page the club has not opted into. */

/* Announcements */
.announcements { padding-block: 0 var(--sp-6); }
.announcements__inner { background: var(--surface-2); border-radius: var(--r-3); padding: var(--sp-5) var(--sp-6); }
.announcements h2 { display: flex; align-items: center; gap: .4em; font-size: var(--fs-3); margin-bottom: var(--sp-4); }
.announcements h2 .icon { width: 1.1em; height: 1.1em; color: var(--accent-ink); }
.notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.notice { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: var(--r-2); padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-1); }
.notice--pinned { border-left-color: var(--primary); }
.notice__date { margin: 0; color: var(--muted); font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: .6em; }
.notice__title { margin: 0; font-size: var(--fs-2); }
.notice__body { max-width: var(--measure); }
.notice__body p:last-child { margin-bottom: 0; }
.notice__link { margin: var(--sp-2) 0 0; }

/* Photo band */
.photo-band { margin: 0 0 var(--sp-7); position: relative; background: var(--primary-700); }
.photo-band img { width: 100%; height: auto; max-height: 70vh; object-fit: cover; display: block; }
.photo-band__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-6) 0 var(--sp-4); background: linear-gradient(to top, rgba(20, 4, 10, .75), rgba(20, 4, 10, 0)); color: #fff; font-weight: 800; font-size: var(--fs-2); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.photo-band__caption .container { display: block; }

/* Poster: a giant word with a player on it */
.poster { position: relative; overflow: hidden; background: var(--primary-700); color: var(--on-primary); min-height: clamp(260px, 44vw, 560px); display: grid; place-items: center; isolation: isolate; }
.poster__word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: clamp(4rem, 19vw, 17rem); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--primary); -webkit-text-stroke: 2px rgba(255, 255, 255, .28); text-shadow: 0 0 60px rgba(0, 0, 0, .35); user-select: none; white-space: nowrap; z-index: 0; }
.poster__img { position: relative; z-index: 1; width: auto; height: clamp(260px, 44vw, 560px); max-width: 100%; object-fit: contain; display: block; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .45)); }
/* An ordinary photo (JPEG) gets feathered edges so it sits on the word instead of covering it. */
.poster__img:not(.poster__img--cutout) { -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 55%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 62% 78% at 50% 55%, #000 55%, transparent 100%); }

/* Sponsors */
.sponsors { padding-block: var(--sp-6) var(--sp-7); }
.sponsors h2 { text-align: center; font-size: var(--fs-3); margin-bottom: var(--sp-5); }
.sponsor-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-4) var(--sp-6); }
.sponsor__link { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; padding: 0; border-radius: var(--r-2); background: transparent; border: 0; transition: transform .15s ease; }   /* the logo as uploaded: no tile, no white border (the club, 2026-09-17) */
a.sponsor__link:hover { transform: translateY(-2px); }
.sponsor__link img { max-height: 72px; width: auto; max-width: 220px; object-fit: contain; display: block; }
/* The strip scrolls once the logos outgrow the page (js/sponsors.js adds is-moving and the copies). */
.sponsor-marquee { position: relative; overflow: hidden; }
.sponsor-marquee.is-moving { -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.sponsor-marquee.is-moving .sponsor-track { display: flex; width: max-content; animation: sponsor-scroll var(--strip-duration, 30s) linear infinite; will-change: transform; }
.sponsor-marquee.is-moving .sponsor-strip { flex: none; flex-wrap: nowrap; justify-content: flex-start; padding-inline-end: var(--sp-6); }
.sponsor-marquee.is-moving:hover .sponsor-track, .sponsor-marquee.is-moving:focus-within .sponsor-track { animation-play-state: paused; }
@keyframes sponsor-scroll { from { transform: translateX(0); } to { transform: translateX(var(--strip-shift, -100%)); } }
.sponsor__name { font-weight: 800; color: var(--primary-ink); }
.site-footer__sponsors { border-top: 1px solid rgba(255, 255, 255, .15); padding-block: var(--sp-5); }
.site-footer__sponsors .site-footer__heading { text-align: center; }
.site-footer__sponsors .sponsor__link { min-height: 48px; }
.site-footer__sponsors .sponsor__link img { max-height: 44px; max-width: 150px; }

/* Alumni / commitments */
.alumni-page { padding-bottom: var(--sp-8); }
.alumni-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-4); }
.alumni-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; display: grid; gap: 2px; padding-bottom: var(--sp-4); text-align: center; box-shadow: 0 2px 10px rgba(30, 10, 20, .06); }
.alumni-card__media { display: block; aspect-ratio: 1; background: var(--surface-2); margin-bottom: var(--sp-3); overflow: hidden; }
.alumni-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alumni-card__media--empty { display: grid; place-items: center; background: var(--primary-soft); }
.alumni-card__initial { font-size: 4rem; font-weight: 900; color: var(--primary); opacity: .55; }
.alumni-card__name { font-weight: 800; color: var(--primary); font-size: var(--fs-2); padding-inline: var(--sp-3); }
.alumni-card__year { font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.alumni-card__college { font-weight: 700; color: var(--ink-soft); padding-inline: var(--sp-3); }
.alumni-card__note { font-size: var(--fs-0); color: var(--muted); padding-inline: var(--sp-3); }
.home-alumni { padding-block: var(--sp-7); }
.home-alumni h2 { text-align: center; }
.alumni-grid--home { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: 900px; margin-inline: auto; }
.home-alumni__more { text-align: center; margin: var(--sp-5) 0 0; }

/* Roster cards */
.roster-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
.player-card { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-3); align-items: center; background: var(--surface-2); border-radius: var(--r-2); padding: var(--sp-3); }
.player-card__media { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--surface-3); border: 2px solid var(--accent-soft); }
.player-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-card__media--number { display: grid; place-items: center; background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 900; font-size: 1.5rem; }
.player-card__text { display: grid; gap: 1px; min-width: 0; }
.player-card__name { font-weight: 800; color: var(--primary); font-size: var(--fs-2); line-height: 1.2; }
.player-card__num { color: var(--accent-ink); }
.player-card__pos { font-weight: 700; color: var(--ink-soft); }
.player-card__detail { font-size: var(--fs-0); color: var(--muted); }

/* Coach bios, season headings */
.coach__bio { margin-top: var(--sp-2); font-size: var(--fs-0); color: var(--ink-soft); }
.coach__bio p:last-child { margin-bottom: 0; }
.coach-list--bios { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.coach--photo .coach__bio { grid-column: 1 / -1; }
.table .season-row th { background: var(--primary); color: var(--on-primary); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-0); padding: .45em .75em; border-bottom: 0; }
@media (max-width: 767px) {
  .announcements__inner { padding: var(--sp-4); border-radius: var(--r-2); }
  .poster__word { font-size: 22vw; }
  .roster-cards { grid-template-columns: 1fr 1fr; }
  .player-card { grid-template-columns: 52px 1fr; padding: var(--sp-2); }
  .player-card__media { width: 52px; height: 52px; }
  .table--schedule .season-row { display: block; }
  .table--schedule .season-row th { display: block; border-radius: var(--r-1); }
}
@media (max-width: 479px) { .roster-cards { grid-template-columns: 1fr; } }

/* ── Varsity headings: the Graduate face (SIL OFL, bundled in static/fonts) ───────────────── */
@font-face { font-family: "Graduate"; src: url("../fonts/Graduate-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
html[data-headings="varsity"] h1, html[data-headings="varsity"] h2, html[data-headings="varsity"] h3,
html[data-headings="varsity"] .card__title, html[data-headings="varsity"] .poster__word, html[data-headings="varsity"] .brand__name {
  font-family: Graduate, "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; }
html[data-headings="varsity"] h1 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.8rem); }
html[data-headings="varsity"] h2 { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.85rem); }
html[data-headings="varsity"] h3, html[data-headings="varsity"] .card__title { font-size: clamp(1.1rem, 1rem + .6vw, 1.3rem); letter-spacing: .02em; }
html[data-headings="varsity"] .brand__name { font-size: 1.55rem; letter-spacing: .04em; }
html[data-headings="varsity"] .admin h1, html[data-headings="varsity"] .admin h2, html[data-headings="varsity"] .admin h3 { font-family: var(--font); font-weight: 800; text-transform: none; letter-spacing: -.01em; }
@media (min-width: 768px) { html[data-headings="varsity"].js.is-scrolled .brand__name { font-size: 1.3rem; } }
@media (min-width: 1280px) { html[data-headings="varsity"] .brand__name { font-size: 1.3rem; } }
@media (max-width: 767px) { html[data-headings="varsity"] .brand__name { font-size: clamp(.72rem, 3.7vw, 1.1rem); letter-spacing: .02em; } }

/* The light/dark slider in the header: a pill with the sun at one end and the moon at the other, and
   a knob that sits on the side in use. Hidden until js/style.js has run — the script is what makes
   it work. Sized to match the 44px social buttons beside it. */
.style-switch { position: relative; display: none; width: 66px; height: 34px; flex: none; border-radius: var(--r-pill); border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .14); padding: 0; font: inherit; cursor: pointer; color: var(--on-primary); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
html.style-auto .style-switch { display: inline-block; }
.style-switch:hover { background: rgba(255, 255, 255, .24); }
.style-switch__end { position: absolute; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: rgba(255, 255, 255, .8); transition: opacity var(--dur) var(--ease); }
.style-switch__end .icon, .style-switch__knob .icon { width: 17px; height: 17px; display: block; }
.style-switch__end--sun { left: 8px; }
.style-switch__end--moon { right: 8px; }
.style-switch__knob { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; color: var(--primary); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform var(--dur) var(--ease); }
html[data-style="dark"] .style-switch { background: rgba(0, 0, 0, .4); border-color: var(--accent); }
html[data-style="dark"] .style-switch__knob { transform: translateX(32px); }
/* the knob carries the icon of the style in use; the end it covers goes quiet */
html[data-style="dark"] .style-switch__knob .icon--sun, html:not([data-style="dark"]) .style-switch__knob .icon--moon { display: none; }
html[data-style="dark"] .style-switch__end--moon, html:not([data-style="dark"]) .style-switch__end--sun { opacity: 0; }
/* a shorter track in the one-row header band (rule order matters — this has to follow the base rules
   above, which is why it is not with the other header sizes) */
@media (min-width: 1280px) {
  .style-switch { width: 58px; }
  html[data-style="dark"] .style-switch__knob { transform: translateX(24px); }
}

/* ── Dark site style: a deep ground under white cards ─────────────────────────────────────── */
/* The ground and its text colour come from /theme.css (derived from the primary). Content that
   used to sit on a white page sits in a white card instead; text directly on the ground goes white,
   and links there use the light accent rather than the darkened one meant for white. */
html[data-style="dark"] body { background: var(--ground); color: var(--on-ground); --link: var(--accent); --ring: var(--accent); }
html[data-style="dark"] :focus-visible { box-shadow: 0 0 0 6px var(--ground); }
html[data-style="dark"] .site-header { box-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
html[data-style="dark"] .welcome__inner, html[data-style="dark"] .team-body, html[data-style="dark"] .contact-layout,
html[data-style="dark"] .alumni-page, html[data-style="dark"] .prose-page, html[data-style="dark"] .centered {
  background: var(--surface); color: var(--ink); border-radius: var(--r-3); padding: var(--sp-6); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); --link: var(--accent-ink); --ring: var(--accent-ink); }
html[data-style="dark"] .welcome { padding-top: var(--sp-6); }
html[data-style="dark"] .welcome__inner { margin-inline: auto; width: min(100% - 2 * var(--gutter), var(--container)); }
html[data-style="dark"] .page-head { background: transparent; border-bottom: 0; }
html[data-style="dark"] .page-head h1, html[data-style="dark"] .page-head__sub, html[data-style="dark"] .home-teams h2,
html[data-style="dark"] .sponsors h2, html[data-style="dark"] .home-alumni h2 { color: var(--on-ground); }
html[data-style="dark"] .home-teams { background: transparent; }
/* Outlined pills only where they sit on the dark ground (the home page block); inside a white card
   (the About page) they keep their light look — the outline version was white on white there. */
html[data-style="dark"] .home-teams .team-pill { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
html[data-style="dark"] .home-teams .team-pill:hover { background: #fff; color: var(--primary); border-color: #fff; }
html[data-style="dark"] .announcements__inner { background: var(--surface); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
html[data-style="dark"] .card, html[data-style="dark"] .alumni-card { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); border-color: transparent; }
html[data-style="dark"] .site-footer { background: var(--ground-2); }
html[data-style="dark"] .site-footer__legal, html[data-style="dark"] .site-footer__sponsors { border-top-color: rgba(255, 255, 255, .1); }
html[data-style="dark"] .card-form { color: var(--ink); --link: var(--accent-ink); --ring: var(--accent-ink); box-shadow: 0 10px 40px rgba(0, 0, 0, .45); border-color: transparent; }
html[data-style="dark"] .announcements__inner { color: var(--ink); --link: var(--accent-ink); --ring: var(--accent-ink); }
html[data-style="dark"] .flash { box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
html[data-style="dark"] .skiplink { background: var(--surface); color: var(--ink); }
@media (max-width: 767px) {
  html[data-style="dark"] .welcome__inner, html[data-style="dark"] .team-body, html[data-style="dark"] .contact-layout,
  html[data-style="dark"] .alumni-page, html[data-style="dark"] .prose-page, html[data-style="dark"] .centered { padding: var(--sp-4); border-radius: var(--r-2); }
}

/* ── Reduced motion & print ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
@media print {
  .site-header, .site-footer, .carousel, .team-head__actions, .skiplink, .nav-toggle, .past-games summary, .ticker { display: none !important; }
  body { color: #000; background: #fff; }
  .team-head { background: none; color: #000; padding: 0; }
  .team-head h1 { color: #000; }
  .past-games { display: block; }
  .past-games[open] > div, .past-games > div { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .table td, .table th { border-bottom: 1px solid #999; }
}

/* ── Records, recent form, Directions links, "This week" (2026-09-16, the three quick wins) ── */
.record { display: inline-flex; align-items: center; gap: .5em; flex-wrap: wrap; font-weight: 700; }
.record__season { font-size: .85em; opacity: .85; }
.record__tally { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.form-strip { display: inline-flex; gap: 3px; }
.form-strip__lamp { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 3px; font-size: .72em; font-weight: 900; line-height: 1; color: #fff; background: var(--ink-soft); }
.form-strip__lamp--w { background: var(--ok); }
.form-strip__lamp--l { background: var(--err); }
.form-strip__lamp--t { background: var(--warn-ink, #8a6d00); }
.team-head__record { margin: .35em 0 0; font-size: var(--fs-2); }
.record--head .record__season { opacity: .8; }
.season-record { margin-inline-start: .6em; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.card__record { display: block; margin-top: .35em; font-size: var(--fs-0); color: var(--ink-soft); }
.team-pill__record { font-size: .78em; font-weight: 700; opacity: .85; }
.maps-link { display: inline-flex; align-items: center; gap: .15em; margin-inline-start: .4em; font-size: .85em; font-weight: 700; white-space: nowrap; color: var(--accent-ink); text-decoration: none; }
.maps-link:hover, .maps-link:focus-visible { text-decoration: underline; }
.maps-link .icon--sm { width: 1em; height: 1em; }
.week { padding-block: var(--sp-6); }
.week__columns { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .week__columns { grid-template-columns: 1fr 1fr; } }
.week h3 { margin-top: 0; }
.week__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.week__item { display: grid; grid-template-columns: auto 1fr; gap: .15em .75em; align-items: baseline; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); }
.week__team { grid-row: span 3; align-self: start; display: inline-block; padding: .15em .6em; border-radius: var(--r-pill); background: var(--accent); color: var(--primary-700, #2a0a14); font-weight: 800; font-size: var(--fs-0); letter-spacing: .06em; text-decoration: none; }
.week__when { font-size: var(--fs-0); color: var(--ink-soft); }
.week__what { font-weight: 600; }
.week__where { font-size: var(--fs-0); color: var(--ink-soft); }
.week__result { font-weight: 800; font-variant-numeric: tabular-nums; }
.week__item.is-cancelled .week__what { text-decoration: line-through; opacity: .7; }
/* the dark style keeps content panels light with ink text (like .welcome__inner); the week cards do the same */
html[data-style="dark"] .week h2, html[data-style="dark"] .week h3 { color: var(--on-ground); }
html[data-style="dark"] .week__item { background: var(--surface); color: var(--ink); border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); --link: var(--accent-ink); --ring: var(--accent-ink); }
html[data-style="dark"] .week__when, html[data-style="dark"] .week__where { color: var(--ink-soft); }

/* ── Calendar subscriptions and "Add to calendar" (2026-09-16) ────────────────────────────── */
.subscribe { margin: var(--sp-3) 0 var(--sp-5); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--border); display: grid; gap: var(--sp-2); }
.subscribe--all { margin-top: var(--sp-6); }
.subscribe__lead { margin: 0; display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.subscribe__lead .icon { flex: none; color: var(--primary-ink); }
/* one row: the two buttons, then the address for any other app — it wraps under them on a phone */
.subscribe__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.subscribe__links { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.subscribe__url { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5em; flex: 1 1 30ch; min-width: 0; max-width: 100%; font-size: var(--fs-0); color: var(--ink-soft); }
.subscribe__url span { white-space: nowrap; }
.subscribe__input { flex: 1 1 22ch; min-width: 0; max-width: 46ch; font: inherit; font-size: var(--fs-0); padding: .4em .6em; border: 1px solid var(--border); border-radius: var(--r-1, 6px); background: var(--surface); color: var(--ink); }
.table--schedule .col-cal { width: 1%; white-space: nowrap; text-align: center; }
.add-cal { display: inline-flex; align-items: center; gap: .2em; font-size: .85em; font-weight: 700; white-space: nowrap; color: var(--accent-ink); text-decoration: none; }
.add-cal:hover, .add-cal:focus-visible { text-decoration: underline; }
.add-cal .icon--sm { width: 1em; height: 1em; }
/* the dark style keeps content panels light with ink text; on the Teams page the box sits straight on the
   dark ground, so it must say so itself (seen white-on-cream 2026-09-16) */
html[data-style="dark"] .subscribe { background: var(--surface); color: var(--ink); border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); --link: var(--accent-ink); --ring: var(--accent-ink); }
html[data-style="dark"] .subscribe__url { color: var(--ink-soft); }

/* "Install app" (2026-09-17): a small button in the footer and at the foot of the scoreboard,
   hidden until js/install.js knows the phone can use it; the tip under it names the taps for the
   phone in hand (data-install-kind from the script). Both grounds are dark: colours set outright. */
.install { margin-top: var(--sp-3); }
.install__btn { display: inline-flex; align-items: center; gap: .45em; }
.install__icon { width: 22px; height: 22px; border-radius: 5px; flex: none; }
.install__tip { margin-top: var(--sp-2); max-width: min(36em, 100%); box-sizing: border-box; padding: var(--sp-2) var(--sp-3); border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--r-2); font-size: var(--fs-0); line-height: 1.45; }
.install__tip p { margin: 0; }
.install__tip-ios, .install__tip-android { display: none; }
.install[data-install-kind="ios"] .install__tip-ios, .install[data-install-kind="android"] .install__tip-android { display: block; }
.install--footer .install__btn { border-color: rgba(255, 255, 255, .6); color: #fff; background: transparent; }
.install--footer .install__btn:hover, .install--footer .install__btn:focus-visible { background: #fff; color: var(--primary); }
.install--board { display: flex; flex-direction: column; align-items: center; margin-top: var(--sp-3); }
.install--board .install__btn { border-color: #55555f; color: #e6e6ea; background: #1b1b21; }
.install--board .install__btn:hover, .install--board .install__btn:focus-visible { background: #fff; color: #08080b; border-color: #fff; }
.install--board .install__tip { color: #c9c9d1; border-color: #3a3a42; text-align: left; }

/* ── Tuition (2026-09-21): the season's plan and the ways to pay. Panels are light: their ink is set. ── */
.tuition { padding-bottom: var(--sp-7); }
.tuition__team { max-width: 720px; margin: 0 auto var(--sp-5); }
.tuition__chooser { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; justify-content: center; }
.tuition__chooser .field { flex: 1 1 220px; margin: 0; }
.tuition__chooser select { width: 100%; }
.tuition__team-row { display: flex; gap: var(--sp-2); align-items: center; }
.tuition__team-row select { flex: 1 1 auto; min-width: 0; }
/* .panel is an admin class; on the public site these three are light cards with their own ink (the dark-ground rule) */
.tuition__plan, .tuition__way, .tuition__thanks, .tuition__code { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--sp-5); box-shadow: var(--shadow); }
.tuition__plan h2, .tuition__way h2, .tuition__code h2 { margin-top: 0; }
.tuition__plan { max-width: 900px; margin: 0 auto var(--sp-5); }
.tuition__fee { font-size: var(--fs-2); margin: 0 0 var(--sp-3); }
.tuition__fee-label { display: inline-block; margin-inline-end: .4em; padding: .15em .6em; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: var(--fs-0); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.table--schedule-fees { max-width: 560px; margin-bottom: var(--sp-4); }
.tuition__commitment p { max-width: 70ch; }
.tuition__ways { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .tuition__ways { grid-template-columns: 2fr 1fr; grid-auto-flow: dense; } .tuition__way--card { grid-row: span 2; } }
/* One or two ways to pay should sit in the middle of the page, not against the left edge with a
   hole beside them (the three-way grid above is what the wide layout was drawn for). */
.tuition__ways--1, .tuition__ways--2 { max-width: 720px; margin-inline: auto; }
@media (min-width: 900px) { .tuition__ways--1, .tuition__ways--2 { grid-template-columns: 1fr; } .tuition__ways--1 .tuition__way--card, .tuition__ways--2 .tuition__way--card { grid-row: auto; } }
.tuition__way h2 { display: flex; align-items: center; gap: .4em; font-size: var(--fs-3); }
.tuition__way .icon { width: 1.1em; height: 1.1em; }
.tuition__handle { font-size: var(--fs-4); font-weight: 800; margin: 0 0 var(--sp-2); }
.radio-col { display: grid; gap: var(--sp-2); }
.tuition__other { display: flex; align-items: center; gap: .3em; margin-inline-start: 1.9em; }
.tuition__dollar { font-weight: 700; }
.tuition__fine { font-size: var(--fs-0); color: var(--ink-soft); margin: var(--sp-2) 0 0; }
.tuition__for { margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.tuition__settled { margin: 0 0 var(--sp-3); }
.table-scroll { overflow-x: auto; }
.tuition__code-gift { margin-top: var(--sp-4); padding: var(--sp-4); border: 2px dashed var(--accent-ink); border-radius: var(--r-3); }
.tuition__code-gift h2 { margin-top: 0; font-size: var(--fs-2); }
.family-code { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-4); font-weight: 700; letter-spacing: .18em; margin: var(--sp-2) 0; }
.tuition__code { max-width: 720px; margin: 0 auto var(--sp-5); }
.tuition__code h2 { margin-top: 0; font-size: var(--fs-2); }
.tuition__code .field { margin-bottom: 0; }
.tuition__code-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.input--code { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-2); letter-spacing: .12em; text-transform: uppercase; max-width: 8em; }
.tuition__state { font-weight: 700; font-size: var(--fs-0); white-space: nowrap; }
.tuition__state.is-paid { color: var(--ok, #2f7a3d); }
.tuition__state.is-part { color: var(--warn, #b7791f); }
.tuition__thanks .lead { font-size: var(--fs-2); }
html[data-style="dark"] .tuition__plan, html[data-style="dark"] .tuition__way, html[data-style="dark"] .tuition__thanks, html[data-style="dark"] .tuition__code { color: var(--ink); --link: var(--accent-ink); --ring: var(--accent-ink); border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }