/* ===================== Programme edition =====================
   The site is the season's printed programme: newsprint paper with a fine grain, a deep ink,
   the four quiet tones used like riso inks (flat, a touch off register, shaded in halftone),
   condensed poster type that stretches, an italic serif for asides, and a coach's pen for notes.
   Loaded after styles.css and motion.css; it restyles, it does not change behaviour. */

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.14  0 0 0 0 0.12  2.4 0 0 0 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -4 0 0 0 2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23s%29'/%3E%3C/svg%3E");
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 6'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3 T30 3 T40 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M6 26 C18 4 30 4 36 20 S56 36 64 18 S86 2 94 18 S110 34 116 14' fill='none' stroke='black' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E");
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 4.8 L14 14.4 L24 14.1 L31 3.8 L38 12.9 L45 15.5 L63 7.8 L80 18.3 L90 9.4 L99 5.2 L112 7.5 L125 8.7 L134 8.1 L143 8.4 L153 11.4 L162 9.3 L178 6.5 L196 13.0 L211 13.9 L218 12.2 L231 6.8 L245 10.0 L256 14.3 L268 3.7 L282 14.9 L298 7.6 L312 13.5 L320 8.7 L336 11.0 L346 4.0 L358 13.6 L373 6.3 L384 13.6 L402 10.1 L411 13.8 L424 3.0 L435 9.8 L452 9.2 L466 3.6 L482 13.5 L498 7.8 L505 3.7 L512 9.9 L522 8.0 L530 12.4 L536 10.4 L544 7.2 L554 18.2 L572 8.8 L579 12.1 L589 4.9 L595 9.3 L600 9 L600 24 Z'/%3E%3C/svg%3E");
}

/* ---------- Each sport's riso ink (fills and balls) ---------- */
:root { --sp-ink: var(--sp-other-ink); }
[data-sport="football"] { --sp-ink: var(--sp-football-ink); }
[data-sport="futsal"] { --sp-ink: var(--sp-futsal-ink); }
[data-sport="volleyball"] { --sp-ink: var(--sp-volleyball-ink); }
[data-sport="throwball"] { --sp-ink: var(--sp-throwball-ink); }
[data-sport="basketball"] { --sp-ink: var(--sp-basketball-ink); }
[data-sport="badminton"] { --sp-ink: var(--sp-badminton-ink); }
[data-sport="table-tennis"] { --sp-ink: var(--sp-table-tennis-ink); }
[data-sport="chess"] { --sp-ink: var(--sp-chess-ink); }
[data-sport="carrom"] { --sp-ink: var(--sp-carrom-ink); }
[data-sport="cricket"] { --sp-ink: var(--sp-cricket-ink); }
[data-sport="kabaddi"] { --sp-ink: var(--sp-kabaddi-ink); }
[data-sport="handball"] { --sp-ink: var(--sp-handball-ink); }
[data-sport="judo"] { --sp-ink: var(--sp-judo-ink); }
[data-sport="swimming"] { --sp-ink: var(--sp-swimming-ink); }
[data-sport="other"] { --sp-ink: var(--sp-other-ink); }

/* ---------- Paper, ink and type ---------- */
body { background: var(--color-paper); color: var(--color-ink); }
/* One sheet of grain over the whole page, like ink on uncoated stock */
body::after { content: ""; position: fixed; inset: 0; z-index: 9000; background-image: var(--grain); background-size: 240px; opacity: 0.32; pointer-events: none; }
::selection { background: var(--tone-sand-ink); color: var(--color-ink); }
h1, h2, h3 { font-stretch: var(--stretch-display); font-weight: 850; letter-spacing: var(--tracking-display); }
.fig { font-family: var(--font-outlier); font-stretch: var(--stretch-figure); font-weight: 800; font-variant-numeric: tabular-nums; }
.sep { margin-inline: 0; }
.cur { font-size: 0.55em; vertical-align: 0.62em; }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal; }
.section-head { align-items: end; }
.section-head h2, .questions h2 { font-size: clamp(2.8rem, 5vw + 1rem, 6rem); line-height: 0.86; text-transform: uppercase; }
.section-head__line { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 0.6vw + 1rem, 1.6rem); line-height: 1.3; color: var(--color-ink-2); }
/* Big headings print in two inks: the tone sits a little off register behind the ink */
@property --reg { syntax: "<length>"; inherits: true; initial-value: 0px; }
.section-head h2, .questions h2, .hero h1, .finale h2, .story__sport, .sport-card__name { --reg: 0.045em; text-shadow: var(--reg) calc(var(--reg) * 0.8) 0 var(--reg-ink, var(--tone-clay-ink)); }
.motion [data-reveal-words] { --reg: 0.22em; transition: --reg 1200ms var(--ease-out) 250ms; }
.motion [data-reveal-words].is-in { --reg: 0.045em; }
.motion .rw { overflow: visible; clip-path: inset(-0.2em -0.4em 0 -0.2em); }

/* Hand-written notes and pen marks */
.mark { position: relative; display: inline-block; }
.mark__svg { position: absolute; z-index: 0; overflow: visible; pointer-events: none; fill: none; stroke: var(--mark-ink, var(--tone-clay-ink)); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mark__svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-out); transition-delay: calc(var(--k, 0) * 320ms + 120ms); }
.mark.is-drawn .mark__svg path { stroke-dashoffset: 0; }
.mark[data-mark-scrub] .mark__svg path { transition: none; stroke-dashoffset: calc(1 - var(--draw, 0)); }
.hero__hint, .finale__note, .hub__tag, .schools__note, .slot__next, .questions__aside .mark { font-family: var(--font-hand); color: var(--tone-clay-deep); }

/* Rubber stamps */
.stamp { display: inline-block; width: 132px; aspect-ratio: 1; color: var(--tone-clay-ink); rotate: calc(-12deg + var(--turn, 0deg)); -webkit-mask: var(--speckle) 0 0 / 160px; mask: var(--speckle) 0 0 / 160px; pointer-events: none; }
.stamp__svg { width: 100%; height: 100%; overflow: visible; }
.stamp__rim { fill: none; stroke: currentColor; stroke-width: 3; }
.stamp__rim--in { stroke-width: 1.6; }
.stamp__ring { fill: currentColor; font: 700 10.5px/1 var(--font-display); font-stretch: 112%; letter-spacing: 0.4px; text-transform: uppercase; }
.stamp__core { fill: currentColor; font: 900 27px/1 var(--font-display); font-stretch: 68%; }
.stamp__sub { fill: currentColor; font: 700 8px/1 var(--font-display); font-stretch: 110%; letter-spacing: 1px; text-transform: uppercase; }
.motion .stamp { opacity: 0; scale: 1.8; }
.motion .stamp.is-in { animation: thump 620ms cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards; }
@keyframes thump { 0% { opacity: 0; scale: 1.8; } 55% { opacity: 1; scale: 0.9; } 78% { scale: 1.04; } 100% { opacity: 0.94; scale: 1; } }

/* Buttons: a ticket, with a notch punched in each end */
.cta, .masthead__tickets { --notch: 7px; border: 0; border-radius: 5px; background: var(--color-ink); color: var(--color-paper);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat; }
.cta { min-height: 56px; padding: 0 36px; font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cta span { display: inline-flex; align-items: center; gap: 12px; }
.cta span::after { content: ""; width: 1px; height: 22px; margin-left: 6px; border-left: 2px dotted color-mix(in oklab, var(--color-paper) 55%, var(--color-clear)); }
.cta span::before { content: "→"; order: 2; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; transition: translate var(--dur-short) var(--ease-out); }
.cta::before { background: var(--tone-clay-deep); }
@media (hover: hover) { .cta:hover span::before { translate: 4px 0; } }
.cta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; -webkit-mask: none; mask: none; }
.link-hand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; --mark-ink: var(--color-ink); }
.link-hand::after { content: "↓"; transition: translate var(--dur-short) var(--ease-out); }
@media (hover: hover) { .link-hand:hover::after { translate: 0 3px; } }

/* ---------- Masthead ---------- */
.masthead, .masthead.is-scrolled { background: var(--color-paper); }
.masthead.is-scrolled { box-shadow: 0 1px 0 var(--color-ink); }
.wordmark { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-weight: 850; font-stretch: 70%; font-size: 1.45rem; letter-spacing: 0.005em; text-transform: uppercase; }
.wordmark > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
/* the host's emblem (MIRS), leading the fest's name */
.wordmark__seal { align-self: center; flex: none; width: 2.2rem; height: 2.2rem; }
.wordmark__tag { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal; font-size: 1rem; text-transform: none; color: var(--color-ink-2); white-space: nowrap; }
/* a narrow phone, its masthead full of buttons: three short lines beside the emblem */
@media (max-width: 480px) { .wordmark > span:first-of-type { -webkit-line-clamp: 3 !important; font-size: 0.8rem !important; line-height: 1 !important; } }
.masthead__nav { align-items: center; gap: 2px; }
.masthead__nav .masthead__link { padding: 0 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); background: var(--wave) 10px calc(100% - 7px) / 0 6px no-repeat; transition: background-size 420ms var(--ease-out); }
@media (hover: hover) { .masthead__nav .masthead__link:hover { text-decoration: none; background-size: calc(100% - 20px) 6px; } }
.masthead__tickets, .masthead__nav a.masthead__tickets { --notch: 5px; min-height: 40px; margin-left: 8px; padding: 0 20px; color: var(--color-paper); font-family: var(--font-display); font-weight: 800; font-stretch: 105%; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
/* the player's way in: Sign in, or their username once signed in (public/app.js) */
.masthead__account, .masthead__nav a.masthead__account { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-left: 8px; padding: 0 14px; border: 1.5px solid var(--color-ink); border-radius: 5px; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-weight: 800; font-stretch: 105%; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.masthead__account svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.masthead__account.is-in, .masthead__nav a.masthead__account.is-in { max-width: 15rem; font-family: var(--font-body); font-weight: 700; font-stretch: 100%; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }
.masthead__account.is-in, .masthead__nav a.masthead__account.is-in { gap: 8px; padding: 0 10px 0 4px; }
.masthead__account.is-in #masthead-account-label { overflow: hidden; text-overflow: ellipsis; }
.masthead__avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 4px; background: var(--color-ink); color: var(--color-paper); font: 850 0.72rem/1 var(--font-display); font-stretch: 112%; letter-spacing: 0.02em; }
.masthead__caret { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.masthead__account[aria-expanded="true"] .masthead__caret { transform: rotate(180deg); }
@media (hover: hover) { .masthead__nav a.masthead__account.is-in:hover .masthead__avatar { background: var(--color-paper); color: var(--color-ink); } }
@media (hover: hover) { .masthead__nav a.masthead__account:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); } }
.sound { min-height: 40px; margin-left: 6px; border: 1.5px solid var(--color-ink); border-radius: 6px; color: var(--color-ink); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.sound[aria-pressed="true"], .sound[aria-pressed="true"]:hover { background: var(--color-ink); color: var(--color-paper); }
.progress { height: 0; background: none; }
.progress { overflow-x: clip; overflow-y: visible; }
.progress > #progress-bar { inset: -1px 0 auto; height: 2px; background: repeating-linear-gradient(90deg, var(--color-ink) 0 9px, var(--color-clear) 9px 15px); transform: translate3d(-100%, 0, 0); clip-path: none; will-change: transform; }

/* ---------- Hero: a poster cover over the pitch ---------- */
.hero { --chalk-ink: oklch(25% 0.024 262); --chalk-tone: oklch(55% 0.11 40); background: var(--color-paper); }
.hero__sticky { isolation: isolate; }
.chalk { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hero__grid { z-index: 2; }
.hero__sun { position: absolute; z-index: -1; right: -10vw; top: -18%; width: min(62vw, 860px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--tone-sand-ink) 0 1.9px, var(--color-clear) 2.3px) 0 0 / 10px 10px; -webkit-mask: radial-gradient(circle at 42% 42%, #000 0 22%, #0000 68%); mask: radial-gradient(circle at 42% 42%, #000 0 22%, #0000 68%); opacity: 0.7; pointer-events: none; }
.hero__field { inset: 10% -3% 6% 40%; color: var(--color-ink); opacity: 1; }
.motion .hero__field .court__surface { opacity: calc(0.25 + 0.75 * var(--draw, 1)); }
.hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--space-2xl); align-items: end; }
.hero__copy { position: relative; z-index: 2; }
.hero__kicker { display: flex; align-items: center; gap: 14px; max-width: 560px; margin-bottom: var(--space-lg); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.hero__rule { flex: 1; min-width: 32px; border-top: 1.5px solid var(--color-ink); }
#hero-issue { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.hero h1 { width: max-content; max-width: min(12ch, calc(100vw - 2 * var(--gutter))); font-size: clamp(3.6rem, 9.4vw, 10.5rem); font-weight: 900; font-stretch: 64%; line-height: 0.8; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; }
.hero h1 .word { white-space: nowrap; }
.hero h1 .char { font-stretch: calc(64% + var(--near, 0) * 46%); transition: font-stretch 260ms var(--ease-out); }
.js .hero h1 .char { animation: stretch-in 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--c, 0) * 45ms + 150ms); }
@keyframes stretch-in { 0% { opacity: 0; font-stretch: 130%; translate: 0 0.25em; } 45% { opacity: 1; } 70% { font-stretch: 56%; translate: 0 0; } 100% { font-stretch: 64%; } }
.hero h1 .word--year em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.9em; letter-spacing: -0.02em; text-transform: none; text-shadow: none; --mark-ink: var(--tone-clay-ink); }
.hero h1 .word--year .mark__svg { stroke-width: 4; }
.js .hero h1 .word--year { animation: rise 900ms var(--ease-out) 700ms both; }
.hero .lead { max-width: 32ch; margin-top: var(--space-xl); font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem); color: var(--color-ink-2); }
.hero__actions { align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.hero__stamp { position: absolute; z-index: 2; top: 7%; right: max(3vw, calc((100vw - var(--container)) / 2 + var(--gutter))); width: clamp(104px, 9vw, 138px); }
.hero__hint { position: absolute; z-index: 2; left: 60%; top: 13%; font-size: 1.15rem; rotate: -3deg; transition: opacity 600ms var(--ease-out); }
.hero__hint .mark__svg { stroke-width: 2; }
.hero__hint.is-gone { opacity: 0; }
/* The hint only shows where the chalk is live (a mouse, motion allowed) */
.hero__sticky:not([data-chalk]) .hero__hint { display: none; }
.hero__ball { left: 53%; top: 22%; width: clamp(64px, 6.4vw, 100px); }
.hero__ball-body { animation-name: bounce; }
.hero__ball-shadow { left: 4%; right: 4%; bottom: -14%; height: 18%; background: radial-gradient(closest-side, oklch(18% 0.02 60 / 0.55), oklch(18% 0.02 60 / 0)); opacity: 1; }
.hero__cue { font-family: var(--font-hand); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-ink-2); }
.hero__cue-ball { border: 1.5px solid var(--color-ink); background: var(--tone-clay-ink); }

/* The scoreboard is a ticket stub: two counts, a perforation, then the countdown and the dates */
.scoreboard, .hero .scoreboard { --ny: 118px; position: relative; isolation: isolate; justify-self: end; width: min(100%, 470px); overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 20px 22px oklch(25% 0.024 262 / 0.2)); }
.scoreboard::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: var(--color-card);
  -webkit-mask: radial-gradient(circle 13px at 0 var(--ny), #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% var(--ny), #0000 96%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 13px at 0 var(--ny), #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% var(--ny), #0000 96%, #000) right / 51% 100% no-repeat; }
.scoreboard__cell { padding: var(--space-md) var(--space-xl); border: 0 !important; }
.scoreboard__cell:nth-child(-n + 2) { min-height: var(--ny); align-content: start; }
.scoreboard__cell:nth-child(1) { border-right: 1.5px solid var(--color-ink) !important; }
.scoreboard__cell:nth-child(3) { position: relative; padding-top: var(--space-lg); }
.scoreboard__cell:nth-child(3)::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; border-top: 2px dashed color-mix(in oklab, var(--color-ink) 40%, var(--color-clear)); }
.scoreboard__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-2); }
.scoreboard__value { font-size: clamp(3rem, 3vw + 1.5rem, 4.4rem); line-height: 0.85; }
.scoreboard__cell:nth-child(1) .scoreboard__value { color: var(--tone-clay-deep); }
.scoreboard__cell:nth-child(2) .scoreboard__value { color: var(--tone-sage-deep); }
.scoreboard__clock { font-size: clamp(2.2rem, 2vw + 1.4rem, 3.2rem); }
.clock__sep { color: var(--tone-clay-ink); }
.clock__unit { font-family: var(--font-serif); font-style: italic; font-size: 0.9rem; color: var(--color-ink-2); }
.scoreboard__dates { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal; font-size: 1.5rem; letter-spacing: 0; }
.scoreboard__cell:last-child { padding-bottom: var(--space-lg); }

/* ---------- Two tapes cross under the hero ---------- */
.ribbon { margin-block: calc(-1 * var(--space-2xl)) 0; padding-block: 34px; overflow: clip; background: none; border: 0; transform: none; }
.ribbon__tape { position: relative; overflow: clip; margin-inline: -40px; }
.ribbon__tape--a { z-index: 1; background: var(--color-ink); color: var(--color-paper); rotate: -2.4deg; box-shadow: 0 14px 22px -16px oklch(25% 0.024 262 / 0.6); }
.ribbon__tape--b { position: absolute; z-index: 0; left: 0; right: 0; top: 50%; translate: 0 -30%; background: var(--tone-sand); color: var(--color-ink); rotate: 3.2deg; }
.ribbon__track { padding-block: 12px; }
.ribbon__tape--b .ribbon__track { padding-block: 10px; }
.ribbon__item { gap: 18px; padding-inline: 22px; font-family: var(--font-display); font-weight: 850; font-stretch: 70%; font-size: clamp(1.7rem, 2vw + 1rem, 2.8rem); letter-spacing: 0.01em; }
.ribbon__orb { --size: 1.35em; }
.ribbon__phrase { display: inline-flex; align-items: center; gap: 22px; padding-inline: 11px; font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; white-space: nowrap; }
.ribbon__phrase::after { content: "✶"; font-style: normal; font-size: 0.9rem; color: var(--tone-clay-deep); }
.ribbon__pause { z-index: 2; border: 1.5px solid var(--color-paper); border-radius: 5px; background: var(--color-ink); color: var(--color-paper); }

/* ---------- Contents page ---------- */
.hub { padding-block: var(--space-4xl) var(--space-3xl); background: none; }
.hub__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.hub__intro { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); container-type: inline-size; }
.hub__title { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.8rem, 1.4vw + 1.2rem, 2.6rem); line-height: 1; }
.hub__title em { display: block; margin-top: 4px; font-family: var(--font-display); font-style: normal; font-weight: 900; font-stretch: 64%; font-size: clamp(3.2rem, 4.6vw + 1rem, 6.4rem); line-height: 0.84; text-transform: uppercase; text-shadow: 0.045em 0.036em 0 var(--tone-sage-ink); }
/* "PROGRAMME" with its shadow sets about 4.7em wide, so it is also capped by its own column: the
   page stops growing at the container's width while the viewport-based size would keep going. */
.hub__title em { font-size: min(clamp(3.2rem, 4.6vw + 1rem, 6.4rem), 100cqi / 4.85); }
.hub__blurb { max-width: 30ch; margin-top: var(--space-lg); color: var(--color-ink-2); }
.hub__list { display: block; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
.hub__list > li { position: relative; }
.hub li:nth-child(4n + 1) { --hub: var(--tone-sage); }
.hub li:nth-child(4n + 2) { --hub: var(--tone-sand); }
.hub li:nth-child(4n + 3) { --hub: var(--tone-clay); }
.hub li:nth-child(4n + 4) { --hub: var(--tone-mist); }
.hub__item { position: relative; isolation: isolate; display: grid; grid-template-columns: 3rem max-content minmax(24px, 1fr) max-content; align-items: baseline; justify-items: start; gap: var(--space-md); padding: var(--space-md) var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-ink); text-decoration: none; }
.hub__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hub); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--ease-out); }
.hub__item::after { content: ""; grid-column: 3; grid-row: 1; align-self: end; justify-self: stretch; margin-bottom: 0.7em; border-bottom: 2px dotted color-mix(in oklab, var(--color-ink) 45%, var(--color-clear)); }
.hub__no { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--color-ink-2); }
.hub__label { font-family: var(--font-display); font-weight: 900; font-stretch: 64%; font-size: clamp(2.4rem, 3vw + 1rem, 4.2rem); line-height: 0.86; text-transform: uppercase; transition: font-stretch 600ms var(--ease-out); }
.hub__what { grid-column: 4; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.35rem); color: var(--color-ink-2); }
.hub__tag { position: absolute; left: clamp(220px, 28vw, 380px); top: 2px; font-size: 1.2rem; rotate: -5deg; }
.hub__tag .mark__svg { stroke-width: 2.2; }
.hub__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
@media (hover: hover) { .hub__item:hover::before { transform: none; } .hub__item:hover .hub__label { font-stretch: 100%; } }
.hub__item:focus-visible::before { transform: none; }
.motion .hub__list[data-reveal-group] > li { opacity: 0; }
.motion .hub__list.is-in > li { animation: deal-row 800ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes deal-row { from { opacity: 0; transform: translateX(-28px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* ---------- Statement ---------- */
.statement { background: none; }
.statement__eyebrow { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1vw + 1.1rem, 2.2rem); color: var(--color-ink-2); }
.statement__text { max-width: 16ch; font-size: clamp(2.6rem, 5.6vw + 0.4rem, 7rem); font-weight: 900; font-stretch: 64%; line-height: 0.88; letter-spacing: 0; text-transform: uppercase; }
.statement__text .w--accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal; font-size: 0.86em; letter-spacing: -0.02em; text-transform: none; }
.statement__text .mark-scrub { --mark-ink: var(--tone-clay-ink); }
.statement__text .mark-scrub .mark__svg { stroke-width: 5; }
.cut { position: absolute; will-change: transform; }
.cut--tri { width: clamp(54px, 6vw, 96px); aspect-ratio: 1; background: var(--tone-sage-ink); clip-path: polygon(50% 4%, 96% 92%, 4% 92%); }
.cut--tri::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, var(--color-ink) 0 1.1px, var(--color-clear) 1.5px) 0 0 / 5px 5px; -webkit-mask: linear-gradient(200deg, #0000 40%, #000); mask: linear-gradient(200deg, #0000 40%, #000); opacity: 0.4; }
.cut--squiggle { width: clamp(80px, 9vw, 140px); aspect-ratio: 3; background: var(--tone-clay-ink); -webkit-mask: var(--squiggle) center / contain no-repeat; mask: var(--squiggle) center / contain no-repeat; }
.cut--half { width: clamp(60px, 7vw, 110px); aspect-ratio: 2; border-radius: 999px 999px 0 0; background: var(--tone-mist-ink); box-shadow: inset 0 -6px 0 color-mix(in oklab, var(--color-ink) 20%, var(--color-clear)); }

/* ---------- Line-up: collector's cards on a torn sheet ---------- */
.lineup { z-index: 2; background: var(--color-paper-2); }
.lineup::before, .lineup::after, .bts::before, .bts::after, .colophon::before { content: ""; position: absolute; left: 0; right: 0; height: 16px; background: inherit; -webkit-mask: var(--torn) 0 0 / 600px 16px repeat-x; mask: var(--torn) 0 0 / 600px 16px repeat-x; pointer-events: none; }
.lineup::before, .bts::before, .colophon::before { top: -15px; }
.lineup::after, .bts::after { bottom: -15px; rotate: 180deg; }
.lineup__head { align-items: end; }
.lineup__track { gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
.sport-card { --tilt: -1.2deg; position: relative; display: flex; flex-direction: column; gap: 0; width: clamp(270px, 23vw, 320px); min-height: 0; padding: 12px; border-radius: 16px; background: var(--color-card); box-shadow: var(--shadow-card); rotate: var(--tilt); }
.sport-card:nth-child(even) { --tilt: 1.4deg; }
.sport-card::before { content: ""; position: absolute; inset: 7px; border: 2px solid var(--sp-deep); border-radius: 11px; pointer-events: none; }
.sport-card__tape { position: absolute; z-index: 2; top: -14px; left: 50%; width: 92px; height: 28px; translate: -50% 0; rotate: calc(var(--tilt) * -3); background: color-mix(in oklab, var(--tone-sand) 78%, var(--color-clear)); clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 24% 8%, 100% 4%, 94% 50%, 100% 96%, 30% 100%, 24% 90%, 18% 100%, 12% 92%, 6% 100%, 0 92%, 5% 50%); box-shadow: 0 2px 4px oklch(25% 0.024 262 / 0.08); }
.sport-card__top { display: flex; justify-content: space-between; padding: 10px 12px 8px; font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-deep); }
.sport-card__art { position: relative; display: grid; place-items: center; aspect-ratio: 1.18; margin: 0 6px; overflow: hidden; border-radius: 8px; background: var(--sp); }
.sport-card__art::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(circle, var(--sp-ink) 0 2px, var(--color-clear) 2.4px) 0 0 / 9px 9px; -webkit-mask: radial-gradient(circle at 50% 54%, #000 0 26%, #0000 62%); mask: radial-gradient(circle at 50% 54%, #000 0 26%, #0000 62%); opacity: 0.75; }
.sport-card__art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18%; border-top: 2px solid color-mix(in oklab, var(--sp-deep) 50%, var(--color-clear)); }
.sport-card__orb { --size: 56%; z-index: 1; margin: 0; }
.sport-card__index { display: none; }
.sport-card__name { align-self: stretch; padding: 14px 12px 6px; font-size: clamp(2.2rem, 1.6vw + 1.2rem, 2.9rem); font-weight: 900; font-stretch: 64%; line-height: 0.86; letter-spacing: 0; text-transform: uppercase; --reg-ink: var(--sp-ink); }
.sport-card__stats { display: grid; margin: 6px 12px 0; padding: 0; }
.sport-card__stat { display: flex; align-items: baseline; gap: 8px; padding-block: 5px; border-bottom: 1px dotted color-mix(in oklab, var(--color-ink) 35%, var(--color-clear)); font-size: 0.875rem; }
.sport-card__stat dt { flex: 1; color: var(--color-ink-2); }
.sport-card__stat dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 1rem; }
.sport-card__go { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; margin: 14px 6px 4px; padding: 0 14px 0 16px; border: 0; border-radius: 8px; background: var(--color-ink); color: var(--color-paper); font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), translate 320ms var(--ease-out); }
.sport-card__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--dur-short) var(--ease-out); }
@media (hover: hover) { .sport-card__go:hover { background: var(--sp-deep); color: var(--color-paper); } .sport-card__go:hover svg { translate: 3px 0; } }
.sport-card__go:active { scale: 0.98; }
@media (min-width: 60.0625rem) {
  .motion .sport-card { translate: 0 calc(var(--d, 0) * var(--d, 0) * 70px); rotate: calc(var(--tilt) + var(--d, 0) * 4deg); scale: calc(1 - var(--d, 0) * var(--d, 0) * 0.06); }
  .motion .sport-card__orb { translate: calc(var(--d, 0) * -22px) 0; }
  .lineup__bar { height: 2px; border-radius: 0; background: var(--color-rule); }
}

/* ---------- Courts: rendered playing surfaces with crisp lines on top ---------- */
.court .court__lines .ln { stroke: oklch(98% 0.005 90 / 0.94); stroke-width: calc(1.3 * var(--sw, 1)); }
.court .court__lines .dot { fill: oklch(98% 0.005 90 / 0.94); }
.court[data-court="carrom"] .court__lines .ln { stroke: oklch(18% 0.02 40 / 0.9); }
.court[data-court="carrom"] .court__lines .dot { fill: oklch(18% 0.02 40 / 0.9); }
.court[data-court="chess"] .court__lines .ln { stroke: oklch(22% 0.03 50 / 0.28); stroke-width: calc(0.6 * var(--sw, 1)); }
.court[data-court="chess"] .court__lines .cell { display: none; }

/* ---------- Story: a tactics board, with each event on an index card ---------- */
.story { --story-ink: var(--sp-other-ink); }
.story__count { align-items: baseline; gap: 8px; }
.story__no, .story__of { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--color-ink-2); }
.story__count .fig { font-size: clamp(2.6rem, 2vw + 1.6rem, 3.6rem); line-height: 0.8; color: var(--color-ink); }
.js .story__court .draw .court__surface { opacity: 0; transition: opacity 700ms var(--ease-out); }
.js .story__court .draw.is-drawn .court__surface { opacity: 1; }
.story__sport { font-size: clamp(3.4rem, 7.4vw + 0.5rem, 9rem); font-weight: 900; font-stretch: 64%; line-height: 0.84; letter-spacing: 0; text-transform: uppercase; --reg-ink: var(--story-ink); }
.story__lane { gap: 6px; }
.story__lane span { height: 6px; border-radius: 3px; }
.play__trail { stroke: oklch(100% 0 0); stroke-width: calc(1.2 * var(--sw, 1)); stroke-dasharray: 1; opacity: 0.75; }
.play__shadow { fill: oklch(12% 0.02 60); opacity: 0.35; }
.step__head { gap: 12px; margin-bottom: var(--space-lg); color: var(--color-ink); font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; }
.step__orb { --size: 52px; }
.step__head .ball { display: none; }
.step__events { gap: var(--space-xl); }
.step__event { position: relative; grid-template-columns: minmax(0, 1fr) auto; padding: 18px var(--space-lg) var(--space-lg); border: 0; border-radius: 4px; box-shadow: var(--shadow-card);
  background: linear-gradient(var(--color-clear) 0 62px, color-mix(in oklab, var(--tone-clay-ink) 70%, var(--color-clear)) 62px 64px, var(--color-clear) 64px), repeating-linear-gradient(var(--color-clear) 0 27px, color-mix(in oklab, var(--tone-mist-ink) 30%, var(--color-clear)) 27px 28px) 0 64px / 100% calc(100% - 64px) no-repeat, var(--color-card); }
.step__event:nth-child(odd) { rotate: -0.6deg; }
.step__event:nth-child(even) { rotate: 0.8deg; }
.step__event.is-added { border: 0; box-shadow: var(--shadow-card), inset 0 0 0 2px var(--sp-deep); }
.step__event h3 { grid-column: 1 / -1; overflow-wrap: normal; hyphens: manual; min-height: 44px; padding-right: 76px; font-size: clamp(1.5rem, 0.8vw + 1.2rem, 2rem); font-weight: 850; font-stretch: 70%; line-height: 0.95; text-transform: uppercase; }
.step__meta { gap: 5px; margin-top: 14px; line-height: 28px; font-size: 0.95rem; }
.step__meta span { line-height: 1.5; }
.step__price { position: absolute; top: -20px; right: -12px; display: flex; align-items: center; justify-content: center; white-space: nowrap; width: 92px; aspect-ratio: 1; border-radius: 50%; background: var(--sp); color: var(--color-ink); font-size: 1.5rem; line-height: 1; rotate: 9deg; box-shadow: inset 0 0 0 4px var(--sp), inset 0 0 0 5.5px var(--sp-deep), 0 6px 10px -6px oklch(25% 0.024 262 / 0.4); }
.step__add { grid-column: 2; grid-row: 2 / span 2; }
.pill { border: 1.5px solid var(--color-ink); border-radius: 6px; background: var(--color-card); color: var(--color-ink); font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pill[aria-pressed="true"] { border-color: var(--sp-deep, var(--color-ink)); background: var(--sp-deep, var(--color-ink)); color: var(--color-paper); }
.step__add:not([aria-pressed="true"]) { background: var(--color-ink); color: var(--color-paper); }

/* ---------- Schedule: tear-off calendar sheets ---------- */
.days { gap: var(--space-md); padding: var(--space-sm) 4px var(--space-md); }
.day { display: grid; justify-items: center; gap: 0; min-width: 118px; padding: 0 0 12px; overflow: hidden; border: 1.5px solid var(--color-ink); border-radius: 10px; background: var(--color-card); text-align: center; box-shadow: 0 6px 12px -10px oklch(25% 0.024 262 / 0.5); transition: translate 300ms var(--ease-out), rotate 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.day__month { display: block; width: 100%; margin: 0; padding: 16px 0 6px; background: radial-gradient(circle 3.5px at 32% 7px, var(--color-card) 96%, var(--color-clear)), radial-gradient(circle 3.5px at 68% 7px, var(--color-card) 96%, var(--color-clear)), var(--color-ink); color: var(--color-paper); font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.day__num { margin-top: 8px; font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: 3rem; line-height: 0.9; }
.day__name { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--color-ink-2); }
.day__count { margin-top: 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.day[aria-selected="true"] { border-color: var(--color-ink); background: var(--color-card); color: var(--color-ink); translate: 0 -6px; rotate: -2deg; box-shadow: var(--shadow-lift); }
.day[aria-selected="true"] .day__month { background: radial-gradient(circle 3.5px at 32% 7px, var(--color-card) 96%, var(--color-clear)), radial-gradient(circle 3.5px at 68% 7px, var(--color-card) 96%, var(--color-clear)), var(--tone-clay-deep); }
.day[aria-selected="true"] :is(.day__name, .day__count) { color: var(--color-ink-2); }
@media (hover: hover) { .day:not([aria-selected="true"]):hover { translate: 0 -3px; border-color: var(--color-ink); } }
.timeline__day { border-top: 2px solid var(--color-ink); }
.slot { grid-template-columns: 8rem minmax(0, 1fr) auto; }
.slot__time { position: relative; display: grid; justify-items: start; font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: 2.4rem; line-height: 0.9; color: var(--color-ink); }
.slot__time .mark__svg { stroke-width: 2.4; }
.slot__next { margin-top: 4px; font-size: 1.05rem; font-weight: 400; rotate: -4deg; }
.slot.is-next .slot__time::after { display: none; }
.slot__name { font-weight: 850; font-stretch: 72%; font-size: clamp(1.4rem, 0.7vw + 1.1rem, 1.8rem); line-height: 1; text-transform: uppercase; }
.slot__name .ball { width: 1.1em; height: 1.1em; }
.filters .pill .ball { width: 20px; height: 20px; margin-left: -4px; }
.line__name .ball { width: 1.05em; height: 1.05em; padding: 0; border-radius: 0; background: none; vertical-align: -0.18em; }
.row__name .ball { width: 1.05em; height: 1.05em; vertical-align: -0.14em; }
.orb__ball { isolation: isolate; }
.slot__tag { min-height: 26px; border-radius: 4px; font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Tickets: a fixture list of stubs, and the pass ---------- */
.board { border-radius: 14px; background: var(--color-card); box-shadow: var(--shadow-card); }
.board__bar h2 { font-size: clamp(2rem, 1.5vw + 1.4rem, 2.8rem); font-weight: 900; font-stretch: 64%; line-height: 0.9; text-transform: uppercase; }
.board__sum { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--color-ink-2); }
.board__cols { border-block-color: var(--color-ink) var(--color-rule); border-top-width: 1.5px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.filters .pill { min-height: 36px; border-color: color-mix(in oklab, var(--color-ink) 30%, var(--color-clear)); }
.filters .pill .count { font-family: var(--font-display); font-stretch: 80%; }
.filters .pill[data-filter="all"][aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-ink); }
.row__hit { border-radius: 8px; }
.row__cell { position: relative; padding: 8px 14px 8px 10px; border-radius: 6px 2px 2px 6px; background: var(--sp); border-right: 2px dashed color-mix(in oklab, var(--color-ink) 35%, var(--color-clear)) !important; }
.row__day { font-size: 2.3rem; color: var(--sp-deep); }
/* A ticket punch: the stub gets a hole when the event is on your pass */
.row__cell::after { content: ""; position: absolute; top: 50%; right: -9px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--row-bg, var(--color-card)); box-shadow: inset 1px 1px 2px oklch(25% 0.024 262 / 0.35); scale: 0; transition: scale 320ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.row:has(.row__input:checked) { --row-bg: color-mix(in oklab, var(--sp) 30%, var(--color-card)); }
.row:has(.row__input:checked) .row__cell::after { scale: 1; }
.row:has(.row__input:checked) .row__cell { background: var(--sp); }
.row__month { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.row__weekday { font-family: var(--font-serif); font-style: italic; }
.row__name { font-weight: 850; font-stretch: 72%; font-size: clamp(1.4rem, 0.6vw + 1.15rem, 1.75rem); line-height: 0.98; text-transform: uppercase; }
.row__price { font-size: 2rem; }
.add { border: 1.5px solid var(--color-ink); border-radius: 6px; font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.row:has(.row__input:checked) .add { border-color: var(--sp-deep); background: var(--sp-deep); color: var(--color-paper); }

.card { border-radius: 14px; }
.card__admit { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-lg); padding: 14px var(--space-xl) 12px; border-bottom: 2px dashed color-mix(in oklab, var(--color-paper) 40%, var(--color-clear)); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.card__admit-name { overflow: hidden; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal; font-size: 1rem; letter-spacing: 0; text-transform: none; text-overflow: ellipsis; white-space: nowrap; }
.card__head { margin-top: 0; }
.card__head h2 { font-size: clamp(1.9rem, 1vw + 1.4rem, 2.4rem); font-weight: 900; font-stretch: 64%; line-height: 0.9; text-transform: uppercase; }
.card__count .fig { font-size: 2.6rem; }
.lines { border-top-width: 2px; }
.line__name, .line__price { font-weight: 800; font-stretch: 80%; }
.field label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.field input { border: 0; border-bottom: 2px solid var(--color-ink); border-radius: 6px 6px 0 0; background: color-mix(in oklab, var(--color-paper) 70%, var(--color-card)); box-shadow: none; }
@media (hover: hover) { .field input:hover { background: var(--color-paper); } }
.field input[aria-invalid="true"] { border-bottom-color: var(--color-error); }
.pay { min-height: 56px; border: 0; border-radius: 10px; font-family: var(--font-display); font-weight: 800; font-stretch: 105%; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
@media (hover: hover) { .pay:not(:disabled):hover { background: var(--color-ink); translate: -2px -2px; box-shadow: 5px 5px 0 var(--tone-clay-ink); } }
.total__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.card__methods { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; }
.kick.orb { width: 44px; height: 44px; padding: 0; background: none; box-shadow: none; --size: 44px; }

/* ---------- Schools: felt pennants pinned to the wall ---------- */
.schools__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); padding-top: var(--space-md); }
.school { position: relative; display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; rotate: var(--tilt, -2deg); transform-origin: 6% 12%; transition: rotate 700ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.school__felt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 156px; padding: 22px 36% 22px 40px; background: var(--sp-deep) var(--grain); background-size: 240px; color: var(--color-paper); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); filter: none; }
.school__felt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 22px; background: color-mix(in oklab, var(--sp-deep) 70%, var(--color-ink)); }
.school__felt::after { content: ""; position: absolute; left: 28px; top: 6px; bottom: 6px; border-left: 2px dashed color-mix(in oklab, var(--color-paper) 55%, var(--color-clear)); }
.school__pin { position: absolute; z-index: 2; left: 4px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--color-card) 0 18%, var(--tone-clay-ink) 22%); box-shadow: 1px 3px 3px oklch(25% 0.024 262 / 0.35); }
.school__crest { width: 52px; height: 52px; border: 2px solid var(--color-paper); background: var(--color-clear); color: var(--color-paper); font-family: var(--font-display); font-weight: 900; font-stretch: 80%; }
.school__name { font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: clamp(1.25rem, 0.6vw + 1rem, 1.6rem); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; }
.school__meta { color: color-mix(in oklab, var(--color-paper) 85%, var(--color-clear)); font-size: 0.8rem; }
.school__meta .ball { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px oklch(10% 0 0 / 0.4)); }
@media (hover: hover) { .school:hover { transform: none; rotate: calc(var(--tilt, -2deg) * -1.6); } }
.school--empty { grid-column: 1 / -1; max-width: 760px; }
.school--empty .school__felt { padding-right: 30%; background: repeating-linear-gradient(135deg, var(--color-paper-3) 0 12px, var(--color-paper-2) 12px 24px); color: var(--color-ink); }
.school--empty .school__felt::before { background: var(--color-muted); }
.school--empty .school__felt::after { border-color: color-mix(in oklab, var(--color-ink) 40%, var(--color-clear)); }
.school--empty .school__crest { border-color: var(--color-ink); color: var(--color-ink); }
.school--empty .school__meta { color: var(--color-ink-2); }
.schools__note { align-self: center; font-size: 1.3rem; rotate: -3deg; list-style: none; padding-left: 70px; }
.motion .schools__grid[data-reveal-group] > li { opacity: 0; translate: 0 -40px; rotate: calc(var(--tilt, -2deg) * 4); }
.motion .schools__grid.is-in > li { opacity: 1; translate: none; rotate: var(--tilt, -2deg); transition: opacity 500ms var(--ease-out), translate 900ms cubic-bezier(0.3, 1.5, 0.5, 1), rotate 1200ms cubic-bezier(0.3, 1.8, 0.4, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.motion .schools__grid.is-in .school__crest { animation: none; }

/* ---------- Behind the scenes: polaroids on a dark board ---------- */
.bts { position: relative; z-index: 2; background: var(--color-night); color: var(--color-paper); }
.bts .section-head h2 { --reg-ink: var(--tone-clay-ink); }
.bts .section-head__line { color: var(--color-night-muted); }
.bts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--space-2xl) var(--space-xl); align-items: start; padding-top: var(--space-lg); }
.shot, .shot:nth-child(6n + 1) { position: relative; grid-column: auto; grid-row: auto; margin: 0; padding: 12px 12px 0; overflow: visible; border-radius: 3px; background: var(--color-card); color: var(--color-ink); box-shadow: 0 24px 34px -20px oklch(10% 0.02 262 / 0.85); rotate: var(--r, -2deg); }
.shot:nth-child(3n + 2) { margin-top: var(--space-2xl); }
.shot__frame { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--color-paper-2); }
.shot__frame img, .shot__frame video { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { position: static; padding: 10px 4px 16px; background: none; color: var(--color-ink); font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.2; text-align: center; }
.shot__tape { position: absolute; z-index: 2; top: -13px; left: 50%; width: 88px; height: 26px; translate: -50% 0; rotate: calc(var(--r, 0deg) * -1.5); background: color-mix(in oklab, var(--tone-sand) 75%, var(--color-clear)); clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 100% 6%, 94% 50%, 100% 94%, 18% 100%, 12% 90%, 6% 100%, 0 92%, 5% 50%); }
/* Until real photos arrive, each polaroid holds a shot of the court from the stands */
.shot__sketch { position: absolute; inset: 0; overflow: hidden; perspective: 640px; background: linear-gradient(180deg, oklch(22% 0.02 260) 0%, oklch(34% 0.02 260) 34%, oklch(46% 0.02 250) 58%, oklch(52% 0.02 250) 100%); }
.shot__sketch::before { content: ""; position: absolute; inset: 0 0 62%; background: repeating-linear-gradient(90deg, oklch(30% 0.02 260) 0 6px, oklch(26% 0.02 260) 6px 9px); opacity: 0.6; }
.shot__sketch .court { position: absolute; left: -18%; top: 30%; width: 136%; height: auto; transform: rotateX(54deg); transform-origin: 50% 0; }
.shot__orb { position: absolute; left: 50%; bottom: 12%; --size: 30%; translate: -50% 0; }
.bts__empty { grid-column: 1 / -1; max-width: 52ch; margin-top: var(--space-md); color: var(--color-night-muted); }
.bts__empty strong { color: var(--color-paper); }
.motion .shot { opacity: calc(var(--deal, 1) * 1.5 - 0.5); translate: calc((1 - var(--deal, 1)) * (var(--i, 0) - 1) * 60px) calc((1 - var(--deal, 1)) * 180px); rotate: calc(var(--r, -2deg) + (1 - var(--deal, 1)) * var(--r, -2deg) * 5); }

/* ---------- House rules ---------- */
.questions { background: var(--color-paper-2); }
.questions__head { display: grid; gap: var(--space-lg); align-content: start; }
.questions h2 { max-width: 7ch; }
.questions__aside { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--color-ink-2); }
.questions__aside .mark { font-family: var(--font-hand); font-style: normal; font-size: 1.35rem; }
.qa { border-top: 2px solid var(--color-ink); }
.qa__item { border-bottom-color: var(--color-rule); }
.qa__item summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--space-lg); row-gap: 2px; padding-block: var(--space-md); font-family: var(--font-display); font-weight: 750; font-stretch: 82%; font-size: clamp(1.25rem, 0.5vw + 1.1rem, 1.6rem); line-height: 1.15; letter-spacing: 0; }
.qa__no { grid-column: 1; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal; font-size: 1rem; color: var(--tone-clay-deep); }
.qa__q { grid-column: 1; }
.qa__icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; border: 1.5px solid var(--color-ink); border-radius: 8px; }
.qa__item[open] .qa__icon { background: var(--tone-sand); border-radius: 50%; }
.qa__body p { font-size: 1.05rem; }

/* ---------- Finale: the back cover ---------- */
.finale { position: relative; padding-block: var(--section-gap) var(--section-gap-l); }
.finale__inner { position: relative; }
/* two lines, always: SEE YOU, then on the FIELD. (the break is in the heading; the second line fits a phone) */
.finale h2 { max-width: none; font-size: clamp(3.4rem, 9.6vw, 11rem); font-weight: 900; font-stretch: 64%; line-height: 0.82; letter-spacing: 0; text-transform: uppercase; }
.finale h2 em { font-size: 0.82em; letter-spacing: -0.02em; text-transform: none; text-shadow: none; }
.finale h2 .char { font-stretch: calc(64% + var(--near, 0) * 46%); transition: font-stretch 260ms var(--ease-out); }
/* the stretchy headings keep the lines they have at rest (art.js): a widening letter never moves a word */
.is-measuring .char { --near: 0 !important; animation: none !important; transition: none !important; }
.hero h1.is-held, .finale h2.is-held { white-space: nowrap; }
.finale__text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 0.6vw + 1.05rem, 1.65rem); line-height: 1.35; }
.finale__actions { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-2xl); margin-top: var(--space-md); }
.finale__note { position: absolute; left: calc(50% + 196px); top: 50%; translate: 0 -50%; font-size: 1.25rem; white-space: nowrap; rotate: -4deg; }
.finale__stamp { position: absolute; top: 4%; right: 2%; width: clamp(110px, 10vw, 150px); rotate: 14deg; --turn: 0deg; }
.finale__line { height: 0; border-top: 3px dashed var(--color-ink); background: none; }
.finale__line::after { bottom: -6px; height: 14px; width: 3px; background: var(--color-ink); }

/* ---------- Colophon: the inside back page ---------- */
.colophon { position: relative; padding-block: var(--space-2xl) var(--space-2xl); background: var(--color-paper-2); }
.colophon__mark { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-family: var(--font-display); font-weight: 900; font-stretch: 64%; font-size: clamp(2.4rem, 4vw + 1rem, 4.6rem); line-height: 0.9; text-transform: uppercase; }
.colophon__mark em { font-size: 0.4em; text-transform: none; color: var(--color-ink-2); }
.colophon__links { border-top: 2px solid var(--color-ink); }
.colophon__note { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--color-ink-2); }

/* ---------- Phone dock: a ticket ---------- */
@media (max-width: 60rem) {
  .dock { border-radius: 10px; background: var(--color-ink); }
  .dock__go { --notch: 6px; border-radius: 6px; font-family: var(--font-display); font-weight: 800; font-stretch: 105%; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 60rem) {
  .hero h1 { font-size: clamp(3.4rem, 16vw, 7rem); max-width: calc(100vw - 2 * var(--gutter)); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__field { inset: 34% -24% 0 -6%; }
  .hero__ball { left: auto; right: 6%; top: 3%; }
  .hero__stamp { top: auto; bottom: 30%; right: 4%; width: 96px; }
  .hero__sun { width: 110vw; right: -40vw; top: -10%; }
  .scoreboard, .hero .scoreboard { justify-self: stretch; width: 100%; }
  .wordmark__tag { display: none; }
  /* beside the emblem on a phone, the name takes two lines instead of an ellipsis */
  .wordmark { align-items: center; gap: 8px; }
  .wordmark__seal { width: 2rem; height: 2rem; }
  .wordmark > span:first-of-type { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 0.95rem; line-height: 1.02; }
  .hub { padding-block: var(--space-3xl) var(--space-2xl); }
  .hub__grid { grid-template-columns: minmax(0, 1fr); }
  .hub__intro { position: static; }
  .hub__tag { left: auto; right: 4px; top: -6px; }
  .schools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot:nth-child(3n + 2) { margin-top: 0; }
  .shot:nth-child(even) { margin-top: var(--space-xl); }
  .finale__note { position: static; translate: none; }
  .finale__actions { flex-direction: column; gap: var(--space-lg); }
  .finale__stamp { top: -2%; right: -2%; width: 92px; }
}
@media (max-width: 40rem) {
  .masthead__tickets, .masthead__nav a.masthead__tickets { padding: 0 14px; }
  .masthead__account, .masthead__nav a.masthead__account { justify-content: center; width: 40px; margin-left: 6px; padding: 0; }
  .masthead__account span { display: none; }
  .masthead__account.is-in, .masthead__nav a.masthead__account.is-in { width: 40px; padding: 0; }
  .masthead__account.is-in .masthead__avatar { display: grid; }
  .masthead__account .masthead__caret { display: none; }
  .hero__kicker { gap: 10px; font-size: 0.68rem; }
  .scoreboard, .hero .scoreboard { --ny: 100px; }
  .scoreboard__cell { padding: var(--space-sm) var(--space-lg); }
  .scoreboard__value { font-size: 2.8rem; }
  .hub__item { grid-template-columns: 2.2rem max-content minmax(12px, 1fr); }
  .hub__what { grid-column: 2 / -1; grid-row: 2; margin-top: 2px; font-size: 1rem; }
  .hub__label { font-size: 2.4rem; }
  .statement__text { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  .schools__grid, .bts__grid { grid-template-columns: minmax(0, 1fr); }
  .schools__note { padding-left: 0; }
  .hero__stamp { display: none; }
  .school__felt { padding-right: 20%; clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%); }
  .school--empty .school__felt { padding-right: 16%; }
  .shot { max-width: 340px; justify-self: center; width: 100%; }
  .shot:nth-child(even) { margin-top: 0; }
  .slot { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .slot__time { font-size: 2rem; }
  .step__price { width: 80px; font-size: 1.3rem; right: -6px; }
  .step__event h3 { padding-right: 64px; }
  .card__admit { margin-inline: calc(-1 * var(--space-lg)); padding-inline: var(--space-lg); }
}
@media (max-width: 60rem) and (min-width: 40.0625rem) { .hero__ball { top: 30%; right: 9%; } }
@media (max-width: 60rem) and (min-width: 40.0625rem) { .card__admit { margin-inline: calc(-1 * var(--space-lg)); padding-inline: var(--space-lg); } }

/* ---------- Reduced motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero h1 .char, .js .hero h1 .word--year { animation: none; }
  .hero h1 .char, .finale h2 .char { transition: none; }
  .mark__svg path { transition: none; stroke-dashoffset: 0; }
  .stamp { opacity: 1; scale: 1; animation: none; }
  .hub__item::before, .hub__label, .day, .school, .pay { transition-duration: 0.01ms; }
}
@media print {
  body::after { display: none; }
  .ribbon, .hero__stamp, .finale__stamp, .chalk { display: none; }
}

/* ---------- Events whose fee and dates are still to be announced ---------- */
.fee-tba { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal; font-size: 1rem; letter-spacing: 0; white-space: normal; color: var(--color-ink-2); }
.row__price:has(.fee-tba) { max-width: 9rem; line-height: 1.2; text-align: right; }
.row__seats--soon { color: var(--tone-clay-deep); font-family: var(--font-hand); font-size: 1.05rem; font-weight: 400; }
.step__price--tba { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; }
.step__note { font-family: var(--font-hand); font-size: 1.05rem; font-weight: 400; color: var(--tone-clay-deep); }
@media (max-width: 40rem) { .row__price:has(.fee-tba) { text-align: left; } }

/* ---------- Line-up rigs: each sport's equipment in layers that move like the sport (rigs.js) ---------- */
.sport-card__art .rig { position: absolute; inset: 0; z-index: 1; }
.rig__obj { position: absolute; left: 50%; top: 50%; width: 56%; aspect-ratio: 1; margin: -28% 0 0 -28%; }
.rig__obj > img, .rig__layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.rig[data-kind="ball"] .rig__obj { top: auto; bottom: 18%; width: 35%; margin: 0 0 0 -17.5%; transform-origin: 50% 100%; }
.rig__shadow { position: absolute; left: 50%; bottom: calc(18% - 2.8%); width: 34%; height: 6%; margin-left: -17%; border-radius: 50%; background: radial-gradient(closest-side, oklch(18% 0.02 60 / 0.5), oklch(18% 0.02 60 / 0)); }
.rig[data-rig="badminton"] .rig__shadow { width: 40%; margin-left: -20%; }
/* table tennis: the ball and its shadow on the rubber */
.rig__ball { position: absolute; left: 39.5%; top: 29%; width: 13.4%; height: 13.4%; }
.rig__ballshadow { position: absolute; left: 40.5%; top: 38.5%; width: 11.5%; height: 4.5%; border-radius: 50%; background: radial-gradient(closest-side, oklch(25% 0.08 25 / 0.55), oklch(25% 0.08 25 / 0)); }
/* chess: live shadows under each piece */
.rig__cshadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, oklch(18% 0.02 60 / 0.5), oklch(18% 0.02 60 / 0)); }
.rig__cshadow[data-p="king"] { left: 15%; top: 84%; width: 54%; height: 12%; }
.rig__cshadow[data-p="pawn"] { left: 42%; top: 75%; width: 40%; height: 10%; }
/* judo: the tails hang from the knot */
.rig [data-p="tail-l"], .rig [data-p="tail-r"] { transform-origin: 50% 50.6%; }
.rig [data-p="knot"] { transform-origin: 50% 46%; }
/* kabaddi: players over the mat, and the flash of a touch */
.rig__player { position: absolute; left: 0; top: 0; width: 24.5%; aspect-ratio: 1; }
.rig__player img { width: 100%; height: 100%; max-width: none; }
.rig__player::before { content: ""; position: absolute; inset: 24%; border-radius: 50%; background: radial-gradient(closest-side, oklch(15% 0.05 260 / 0.5), oklch(15% 0.05 260 / 0)); translate: 6% 8%; }
.rig__flash { position: absolute; left: 0; top: 0; width: 20%; aspect-ratio: 1; margin: -10% 0 0 -10%; border: 3px solid oklch(98% 0.01 90); border-radius: 50%; opacity: 0; }
/* swimming: water under the goggles, rings, and light sliding over the lenses */
.rig__water { position: absolute; left: 50%; top: 58%; width: 96%; height: 30%; margin-left: -48%; border-radius: 50%; background: radial-gradient(closest-side, oklch(72% 0.09 230 / 0.6), oklch(72% 0.09 230 / 0.22) 65%, oklch(72% 0.09 230 / 0)); }
.rig__ripple { position: absolute; left: 50%; top: 50%; width: 76%; height: 64%; border: 2px solid oklch(98% 0.01 230 / 0.75); border-radius: 50%; transform: translate(-50%, -50%) scale(0.5); }
.rig__float { position: absolute; inset: 0; }
.rig__glint { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: linear-gradient(100deg, oklch(100% 0 0 / 0) 42%, oklch(100% 0 0 / 0.75) 50%, oklch(100% 0 0 / 0) 58%) 100% 0 / 260% 100% no-repeat; }
/* Only the cards near the screen get their own GPU layers (motion.js marks them .is-live); a
   layer for every part of every card would make each frame's compositing slower on phones. */
.motion .sport-card.is-live :is(.rig__obj, .rig__shadow, .rig__player, .rig__float, .rig__ball, .rig [data-p]) { will-change: transform; }
.motion .sport-card.is-live .rig__obj .orb__base { will-change: rotate; }

/* ---------- Back to top: a stopwatch bezel with the season's ball ---------- */
.to-top { --gold: #e2b34c; --gold-hi: #f7dd92; --gold-deep: #b5822a; position: fixed; z-index: var(--z-sticky); right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-paper); cursor: pointer; opacity: 0; scale: 0.6; translate: 0 18px; pointer-events: none; transition: opacity 320ms var(--ease-out), scale 520ms cubic-bezier(0.3, 1.6, 0.5, 1), translate 520ms cubic-bezier(0.3, 1.6, 0.5, 1); -webkit-tap-highlight-color: transparent; }
.to-top.is-shown, .to-top.is-kicked { opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; }
/* the bezel: a hairline track and a gold arc for how far down the page you are */
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.to-top__track { fill: oklch(98% 0.01 84 / 0.55); stroke: oklch(25% 0.024 262 / 0.14); stroke-width: 1.5; }
.to-top__fill { fill: none; stroke: var(--gold-deep); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transition: stroke-dashoffset 400ms var(--ease-out); }
/* the orb: night glass, liquid gold rising inside it */
.to-top__orb { position: absolute; inset: 6px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 34% 24%, oklch(40% 0.04 262), oklch(21% 0.03 262) 72%); box-shadow: 0 16px 30px -12px oklch(18% 0.04 262 / 0.6), 0 2px 4px oklch(18% 0.04 262 / 0.25), inset 0 1px 0 oklch(100% 0 0 / 0.18), inset 0 -3px 8px oklch(0% 0 0 / 0.35); isolation: isolate; transition: transform 380ms cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 380ms var(--ease-out); }
.to-top__liquid { position: absolute; inset: 0; transform: translateY(calc((1 - var(--p, 0)) * 100%)); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 40%, var(--gold-deep)); transition: transform 700ms cubic-bezier(0.3, 1.25, 0.5, 1); }
.to-top__liquid::before, .to-top__liquid::after { content: ""; position: absolute; left: 0; width: 200%; height: 10px; background-repeat: repeat-x; background-size: 26px 10px; }
.to-top__liquid::before { top: -9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10'%3E%3Cpath d='M0 5 Q6.5 0 13 5 T26 5 V10 H0z' fill='%23f7dd92'/%3E%3C/svg%3E"); animation: tt-wave 2.2s linear infinite; }
.to-top__liquid::after { top: -7px; opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10'%3E%3Cpath d='M0 5 Q6.5 10 13 5 T26 5 V10 H0z' fill='%23e2b34c'/%3E%3C/svg%3E"); animation: tt-wave 3.1s linear infinite reverse; }
@keyframes tt-wave { to { transform: translateX(-26px); } }
/* the arrow: gold above the liquid, ink where the gold covers it */
.to-top__arrow { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--gold-hi); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; clip-path: inset(0 0 calc(var(--p, 0) * 100%) 0); transition: clip-path 700ms cubic-bezier(0.3, 1.25, 0.5, 1); }
.to-top__arrow--sunk { stroke: oklch(22% 0.03 262); clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); }
.to-top__shine { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 45% at 32% 20%, oklch(100% 0 0 / 0.3), transparent 70%), radial-gradient(80% 60% at 70% 110%, oklch(100% 0 0 / 0.08), transparent 70%); pointer-events: none; }
/* on hover: a label slides out with how much of the page you have read */
.to-top__label { position: absolute; right: calc(100% + 10px); top: 50%; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: oklch(21% 0.03 262 / 0.94); box-shadow: 0 12px 24px -12px oklch(18% 0.04 262 / 0.55); white-space: nowrap; opacity: 0; translate: 10px -50%; pointer-events: none; transition: opacity 260ms var(--ease-out), translate 360ms cubic-bezier(0.3, 1.4, 0.5, 1); }
.to-top__label b { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; }
.to-top__label em { color: var(--gold-hi); font-style: normal; font-weight: 700; font-size: 0.75rem; }
@media (hover: hover) {
  .to-top:hover .to-top__orb { transform: translateY(-3px); box-shadow: 0 22px 34px -12px oklch(18% 0.04 262 / 0.6), 0 0 0 1px oklch(85% 0.12 85 / 0.35), inset 0 1px 0 oklch(100% 0 0 / 0.2), inset 0 -3px 8px oklch(0% 0 0 / 0.35); }
  .to-top:hover .to-top__arrow { animation: tt-nudge 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .to-top:hover .to-top__label { opacity: 1; translate: 0 -50%; }
}
.to-top:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.to-top:focus-visible .to-top__label { opacity: 1; translate: 0 -50%; }
.to-top:active .to-top__orb { transform: scale(0.92); }
.to-top.is-kicked .to-top__arrow { animation: tt-launch 900ms cubic-bezier(0.5, 0, 0.3, 1) both; }
.to-top.is-kicked .to-top__orb { animation: tt-press 520ms cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes tt-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes tt-launch { 0% { translate: 0 0; opacity: 1; } 38% { translate: 0 -34px; opacity: 0; } 39% { translate: 0 30px; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes tt-press { 0% { scale: 1; } 30% { scale: 0.88; } 100% { scale: 1; } }
@media (max-width: 60rem) {
  .to-top { right: max(14px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px); width: 56px; height: 56px; }
  .to-top__orb { inset: 5px; }
  .to-top__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 0.01ms; scale: 1; translate: 0 0; }
  .to-top__liquid::before, .to-top__liquid::after, .to-top:hover .to-top__arrow, .to-top.is-kicked .to-top__arrow, .to-top.is-kicked .to-top__orb { animation: none; }
}
@media print { .to-top { display: none; } }

/* ---------- Performance: phones and tablets ----------
   Everything that moves with the scroll gets its own GPU layer, so a frame only moves textures and
   never repaints; everything else stays flat. */
.motion .hero__field, .motion .hero__ball { will-change: transform; }
.motion .shot { will-change: translate, rotate, opacity; }
@media (min-width: 60.0625rem) { .motion .sport-card { will-change: translate, rotate, scale; } }
/* The court's ball, players and trail are drawn on their own layer above the court, so the court
   (surface image and lines) is painted once and never again while the play runs. */
.story__court { position: relative; }
.court-play { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
/* On touch screens the paper grain is printed into the section backgrounds (painted once, scrolled
   for free) instead of a full-screen layer over everything that would be blended on every frame. */
@media (hover: none), (pointer: coarse) {
  :root { --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.14  0 0 0 0 0.12  0.77 0 0 0 -0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"); }
  body::after { display: none; }
  body, .lineup, .questions, .colophon, .schools, .hub, .bts { background-image: var(--grain-soft); background-size: 240px; }
}
/* The headline's stretch-in animates the font's width, which re-lays out text every frame. Phones
   get the same entrance with transforms only. */
@media (hover: none), (pointer: coarse), (max-width: 60rem) {
  .js .hero h1 .char { animation-name: rise-in; animation-duration: 800ms; }
  @keyframes rise-in { 0% { opacity: 0; translate: 0 0.35em; scale: 1.25 1; } 60% { opacity: 1; scale: 0.96 1; } 100% { translate: 0 0; scale: 1 1; } }
  .motion [data-reveal-words], .motion [data-reveal-words].is-in { --reg: 0.045em; transition: none; }
}

/* Phones: the court section changes colour per sport in one step rather than a 0.7 s fade (a fade
   repaints the whole screen every frame), the court draws in faster, and the contents rows slide in
   with transforms only (an animated clip cannot run on the GPU). */
@media (hover: none), (pointer: coarse), (max-width: 60rem) {
  .story, .story__stage { transition: none; }
  .js .draw .ln { transition-duration: 650ms; transition-delay: calc(min(var(--n, 0), 6) * 40ms); }
  .js .story__court .draw .court__surface { transition: none; opacity: 1; }
  @keyframes deal-row { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
}

/* ---------- The ticket's top row: 8 Sports · 2 Arenas · 1 Fest ---------- */
.scoreboard, .hero .scoreboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scoreboard .scoreboard__cell--count { display: grid; align-content: center; justify-items: start; gap: 6px; min-height: var(--ny); padding: var(--space-md) var(--space-lg); border-right: 1.5px solid var(--color-ink) !important; }
.scoreboard .scoreboard__cell--count:nth-child(3) { border-right: 0 !important; }
.scoreboard .scoreboard__cell--count .scoreboard__value { font-size: clamp(3.2rem, 3vw + 1.8rem, 4.8rem); line-height: 0.8; }
.scoreboard .scoreboard__cell--count:nth-child(1) .scoreboard__value { color: var(--tone-sage-deep); }
.scoreboard .scoreboard__cell--count:nth-child(2) .scoreboard__value { color: var(--tone-clay-deep); }
.scoreboard .scoreboard__cell--count:nth-child(3) .scoreboard__value { color: var(--tone-mist-deep); }
/* the perforation now runs above the countdown, the fourth cell */
.scoreboard__cell:nth-child(3)::before { content: none; }
.scoreboard .scoreboard__cell--clock { position: relative; padding-top: var(--space-lg); }
.scoreboard .scoreboard__cell--clock::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; border-top: 2px dashed color-mix(in oklab, var(--color-ink) 40%, var(--color-clear)); }
@media (max-width: 40rem) {
  .scoreboard .scoreboard__cell--count { padding: var(--space-sm) var(--space-md); }
  .scoreboard .scoreboard__cell--count .scoreboard__value { font-size: 2.9rem; }
}
/* the side notches sit exactly on the perforation: the count row is as tall as --ny */
.scoreboard, .hero .scoreboard { --ny: 136px; }
.scoreboard .scoreboard__cell--count { height: var(--ny); min-height: 0; }
@media (max-width: 40rem) { .scoreboard, .hero .scoreboard { --ny: 104px; } }
/* the court play's movers: HTML elements moved by the GPU over the court */
.play-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.play-sprite, .play-shadow { position: absolute; left: 0; top: 0; will-change: transform; }
.play-sprite img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.play-sprite__spin { will-change: transform; }
.play-sprite--person .play-sprite__spin { will-change: auto; }
.play-sprite--person::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, oklch(12% 0.04 260 / 0.45), oklch(12% 0.04 260 / 0)); translate: 6% 8%; }
.play-shadow { border-radius: 50%; background: radial-gradient(closest-side, oklch(12% 0.02 60 / 0.42), oklch(12% 0.02 60 / 0)); }

/* ---------- The sound switch: bars dance while the fest's music plays ---------- */
.sound { position: relative; }
.sound__eq { display: none; align-items: flex-end; gap: 2px; width: 18px; height: 16px; }
.sound__eq i { flex: 1; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(0.3); }
.sound.is-playing svg { display: none; }
.sound.is-playing .sound__eq, .masthead__nav .sound.is-playing .sound__eq { display: inline-flex; }
.sound.is-playing .sound__eq i { animation: eq 900ms ease-in-out infinite alternate; }
.sound.is-playing .sound__eq i:nth-child(2) { animation-duration: 640ms; animation-delay: -200ms; }
.sound.is-playing .sound__eq i:nth-child(3) { animation-duration: 780ms; animation-delay: -420ms; }
.sound.is-playing .sound__eq i:nth-child(4) { animation-duration: 560ms; animation-delay: -120ms; }
@keyframes eq { 0% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0.45); } }
/* until the visitor decides, a soft ring breathes round the switch (transform and opacity only) */
.sound.is-cue::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--tone-clay-ink); border-radius: 9px; pointer-events: none; animation: cue-ring 2.4s var(--ease-out) infinite; }
@keyframes cue-ring { 0% { opacity: 0.9; transform: scale(0.96); } 70%, 100% { opacity: 0; transform: scale(1.22); } }
/* In the sports section, one clear tap for sound while the visitor has not chosen (a swipe cannot start audio) */
.sound-hint { position: fixed; left: 50%; bottom: max(var(--space-md), calc(env(safe-area-inset-bottom) + var(--space-sm))); z-index: var(--z-toast); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md) 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 600 0.9375rem/1 var(--font-body); white-space: nowrap; box-shadow: 0 10px 24px -12px var(--color-shade), 0 2px 6px var(--color-shade); cursor: pointer; transform: translateX(-50%); animation: hint-in var(--dur-short) var(--ease-out) both; }
.sound-hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-hint:active { transform: translateX(-50%) translateY(1px); }
.sound-hint:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@keyframes hint-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
/* on phones it sits above the basket dock (68px tall, at the screen's foot) */
@media (max-width: 60rem) { .sound-hint { bottom: calc(max(var(--space-sm), env(safe-area-inset-bottom)) + 68px + var(--space-sm)); } }
@media (prefers-reduced-motion: reduce) {
  .sound.is-playing .sound__eq i { animation: none; }
  .sound.is-playing .sound__eq i:nth-child(odd) { transform: scaleY(0.75); }
  .sound.is-playing .sound__eq i:nth-child(even) { transform: scaleY(0.45); }
  .sound.is-cue::after { animation: none; opacity: 0.8; }
  .sound-hint { animation: none; }
}

.colophon__replay { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--color-ink); border-radius: 999px; background: none; color: var(--color-ink); font: 700 0.72rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.colophon__replay::before { content: "↺"; font-size: 1rem; letter-spacing: 0; }
@media (hover: hover) { .colophon__replay:hover { background: var(--color-ink); color: var(--color-paper); } }
.colophon__replay:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- the registering player, and team rosters, in the card ---------- */
.card__player { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 var(--space-sm); padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, var(--color-paper) 70%, var(--color-card)); font-size: 0.875rem; }
.card__player-who { flex: 1 1 auto; min-width: 0; }
.card__player-who b { font-weight: 700; }
.card__player-id { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--color-rule); border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.card__player a { font-weight: 700; color: var(--color-ink); }
.card__player-go { padding: 6px 14px; border-radius: 999px; background: var(--color-ink); color: var(--color-paper) !important; text-decoration: none; }
.teams { display: grid; gap: var(--space-sm); }
.teams:empty { display: none; }
.team { display: grid; gap: 8px; margin: 0; padding: 14px; border: 1.5px solid var(--color-rule); border-radius: 12px; min-width: 0; }
.team legend { padding: 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.team__rule { margin: -4px 0 2px; color: var(--color-muted); font-size: 0.8125rem; }
.team__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: p; }
.team__list li { display: flex; align-items: center; gap: 6px; }
.team__list input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 10px; border: 0; border-bottom: 2px solid var(--color-ink); border-radius: 6px 6px 0 0; background: color-mix(in oklab, var(--color-paper) 70%, var(--color-card)); font: inherit; font-size: 0.9375rem; }
.team__x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--color-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.team__x:hover { color: var(--color-ink); background: var(--color-paper); }
.team__add { justify-self: start; padding: 6px 12px; border: 1.5px dashed var(--color-rule); border-radius: 999px; background: transparent; color: var(--color-ink); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.team__add:hover { border-color: var(--color-ink); }
.team__subs { margin: 6px 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }