/* Hallmark · shape: Live desk · genre: editorial · theme: custom (design.md) · job: attend · idea: "What is on now, the medals, the stories, and where Asia lifts next." · vibe: "arena-dark, poster-loud, scoreboard-exact"
 * paper: oklch(98.5% 0.004 91.4) · accent: oklch(43.3% 0.178 29.2) · display: Barlow Condensed 800 · body: Inter · hero: poster, the lead story's photograph full-bleed with the head low-left; the live centre while a championship runs · nav: slab, a red bar on a yellow rule that stays on screen, awf.sport's full menu with its pages in arena panels · footer: mast, the partners band over the logo large, the two offices, the Inside AWF and quick links and AWF's accounts · imagery: photographs, AWF's own · signature: the results desk, medals set like a scoreboard
 * axes: warm-paper/condensed-caps/red-yellow · posture: full palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a federation homepage risks being a news portal; led with the event that is on now and the medals instead */
/* Hallmark · waive 1 · h3 item titles in Inter 600, never the h1 or h2 · news headlines read in the body face; the condensed display stays reserved for the caps heads per design.md */
/* Hallmark · dismissed 58 · the extra words are data rows: 45 nation names in the federations rail, 16 champions and the medal table, read as a scoreboard rather than copy */
/* Hallmark · dismissed 28a · the first <img> on the results and person pages is a 24px round flag in a table row; the largest paint there is the display head or the portrait, and the portrait already loads eager with fetchpriority high */
/* Hallmark · answered F4 · the one primary swaps colour by surface: AWF red on paper, AWF yellow on the arena, one per screen */
/* Hallmark · waive 22 · --color-partner-tile oklch(24.78% 0 0) · the partners' logo files carry a neutral #212121 box around each white mark; the tile matches that grey exactly so the box disappears, and any tint would show its edge */
/* Hallmark · waive 11 · photo cards and portraits scale to 1.05 inside clipping frames on hover and keyboard focus · the owner asked on 31 October for every photograph to lean in under the pointer; each frame clips the photo, and graphics, heroes and lead photographs stay still */
/* Hallmark · dismissed 19 · "All rights reserved" is the federation's own legal line, carried over from the awf.sport footer with the current year */
/* Hallmark · dismissed 42 · the link groups are awf.sport's own footer (Inside AWF, quick links, the accounts) beside the two offices, under the partners band and next to the mast, as the stamp's footer field names */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Page ---------- */
body { font-size: var(--text-md); line-height: 1.6; }
/* Anchors land clear of the header, which stays on screen (and of a signed-in editor's toolbar above it). */
html { scroll-padding-top: calc(var(--masthead-top) + var(--masthead-h) + var(--space-lg)); }
:root:has(> body.admin-bar) { --masthead-top: var(--wp-admin--admin-bar--height, 32px); scroll-padding-top: calc(var(--masthead-top) + var(--masthead-h) + var(--space-lg)); }
@media (max-width: 600px) { :root:has(> body.admin-bar) { --masthead-top: 0px; } }
/* Without scripting, narrow screens carry the destinations row in the header too (44px links on a 4px foot), so
   the header's height, and with it the anchors' landing and sticky offsets, includes it. */
@media (max-width: 79.99rem) { html:not(.js) { --masthead-h: calc(var(--header-h) + 4px + 44px + var(--space-2xs)); } }
h1, h2 { text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: 1.02; font-weight: 800; }
h1 { font-size: var(--text-display); max-width: 18ch; }
h2 { font-size: var(--text-section); max-width: 22ch; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-title); line-height: 1.25; max-width: 40ch; }
.lead { font-size: var(--text-lead); line-height: 1.5; max-width: 52ch; }
.num { font-variant-numeric: tabular-nums; }
/* The skip link is the first thing in the body; it shows over the header when focused. */
.skip { position: fixed; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-skip); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); background: var(--color-yellow); color: var(--color-arena); font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: calc(var(--masthead-top) + var(--space-sm)); outline: 3px solid var(--color-ink); outline-offset: 0; }
.skip:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.skip:active { transform: translateY(1px); }

/* Surfaces that swap their text, focus and mark colours in the same rule */
.arena { background: var(--color-arena); color: var(--color-on-arena); --color-focus: var(--color-yellow); --color-mark: var(--color-yellow); --color-rule: var(--color-arena-3); --color-muted: var(--color-on-arena-2); }
.band { background: var(--color-paper-2); }
.field { background: var(--color-red); color: var(--color-paper); --color-focus: var(--color-yellow); --color-mark: var(--color-yellow); }
/* Yellow surfaces swap the selection pair (ink highlight, yellow text), so selected text never vanishes into its own highlight. */
.skip, .chip--live, :is(.arena, .hero, .field, .menu) .btn--signal { --color-selection: var(--color-ink); --color-on-selection: var(--color-yellow); }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 2px solid var(--color-red); border-radius: var(--radius-input); background: var(--color-red); color: var(--color-paper); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-red-deep); border-color: var(--color-red-deep); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.arena .btn--signal, .hero .btn--signal, .field .btn--signal, .menu .btn--signal { background: var(--color-yellow); border-color: var(--color-yellow); color: var(--color-arena); }
.arena .btn--signal:hover, .hero .btn--signal:hover, .field .btn--signal:hover, .menu .btn--signal:hover { background: var(--color-paper); border-color: var(--color-paper); }
.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: color-mix(in oklab, currentColor 12%, transparent); border-color: currentColor; }
.link-strong { position: relative; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; white-space: nowrap; }
/* A 44px tall target that leaves the line it sits on alone: the hit area reaches above and below the text. */
.link-strong::after { content: ""; position: absolute; inset: calc(50% - 22px) 0 auto; height: 44px; }
.link-strong:hover { text-decoration-color: var(--color-mark); }
.link-strong:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.link-strong:active { color: var(--color-mark); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap; border: 1px solid currentColor; }
.chip--live { background: var(--color-yellow); border-color: var(--color-yellow); color: var(--color-arena); }
.chip--upcoming { color: inherit; }
.chip--past { border-color: var(--color-rule); color: var(--color-muted); }

/* ---------- Header: always on screen ---------- */
/* The bar lives outside the swapped content (#swup) and sticks to the top of the window on every page, so it
   never scrolls away or reloads; the page-change panel rises under it (the curtain, below). On the first page
   of a visit it stays hidden while the loader plays; as the panel lifts it fades in where it stands and its items
   rise into place from its lower edge (motion.js), so nothing moves down. Without scripting or with reduced motion
   it is simply there. */
.masthead { position: sticky; top: var(--masthead-top); z-index: var(--z-masthead); background: var(--color-red); color: var(--color-paper); border-bottom: 4px solid var(--color-yellow); --color-focus: var(--color-yellow); --color-mark: var(--color-yellow); }
.js.motion.intro .masthead:not(.is-in) { visibility: hidden; opacity: 0; }
.masthead.is-entering .masthead__bar { overflow: clip; }
.masthead__bar { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--header-h); }
.masthead__brand { position: relative; display: inline-flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; min-height: 44px; color: inherit; text-decoration: none; }
/* Hover draws a yellow bar under the plates and the name, so the home link answers even where the wordmark is hidden (80 to 90rem). */
.masthead__brand::after { content: ""; position: absolute; inset: auto 0 calc(-1 * var(--space-2xs)); height: 3px; background: var(--color-mark); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-short) var(--ease-out); }
.masthead__brand:hover::after { transform: scaleX(1); }
.masthead__brand:hover .masthead__wordmark { color: var(--color-yellow); }
.masthead__brand:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.masthead__brand:active { transform: translateY(1px); }
.masthead__logo { width: auto; height: 40px; flex-shrink: 0; }
.masthead__wordmark { font: 800 var(--text-lg)/1 var(--font-display); text-transform: uppercase; white-space: nowrap; }

/* The main menu (80rem and wider): each parent is a link and a toggle that opens its panel (a disclosure). */
.masthead__nav { display: none; align-self: stretch; }
.nav { display: flex; align-items: stretch; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: inherit; font: 600 var(--text-sm)/1.2 var(--font-body); text-decoration: none; white-space: nowrap; }
.nav__link::after { content: ""; position: absolute; inset: auto 0 6px; height: 3px; background: var(--color-paper); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-short) var(--ease-out); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current]::after { transform: scaleX(1); background: var(--color-yellow); }
.nav__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.nav__link:active { transform: translateY(1px); }
.nav__toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
/* The toggle's hit area reaches 44px into the gap after it. */
.nav__toggle::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--space-sm)) 0 0; }
.nav__toggle svg { transition: transform var(--dur-short) var(--ease-out); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__toggle:hover { color: var(--color-yellow); }
.nav__toggle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.nav__toggle:active svg { transform: translateY(1px); }
.nav__toggle[aria-expanded="true"]:active svg { transform: rotate(180deg) translateY(-1px); }
/* The panel hangs under the yellow rule, an arena sheet like the phone menu; it rises 8px into place. */
.nav__panel { position: absolute; top: calc(100% + 4px); left: calc(-1 * var(--space-lg)); z-index: var(--z-dropdown); min-width: 15rem; padding-block: var(--space-xs); border: 1px solid var(--color-arena-3); border-top: 0; background: var(--color-arena); color: var(--color-on-arena); --color-focus: var(--color-yellow); --color-mark: var(--color-yellow); visibility: hidden; opacity: 0; transform: translate3d(0, var(--space-xs), 0); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
/* A bridge over the yellow rule, so the pointer can cross from the link to the panel. */
.nav__panel::before { content: ""; position: absolute; inset: auto 0 100%; height: 5px; }
.nav__item.is-open > .nav__panel { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s; }
html:not(.js) .nav__item--parent:is(:hover, :focus-within) > .nav__panel { visibility: visible; opacity: 1; transform: none; transition: none; }
.nav__sub { margin: 0; padding: 0; list-style: none; }
.nav__sub a { position: relative; display: flex; align-items: center; min-height: 44px; padding-inline: var(--space-lg); color: inherit; font: 600 var(--text-sm)/1.25 var(--font-body); text-decoration: none; white-space: nowrap; }
.nav__sub a::before { content: ""; position: absolute; inset: var(--space-xs) auto var(--space-xs) 0; width: 4px; background: var(--color-yellow); transform: scaleY(0); transition: transform var(--dur-short) var(--ease-out); }
.nav__sub a:hover { color: var(--color-yellow); }
.nav__sub a:hover::before, .nav__sub a[aria-current]::before { transform: scaleY(1); }
.nav__sub a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.nav__sub a:active { transform: translateY(1px); }

.masthead__tools { display: flex; align-items: center; gap: var(--space-3xs); margin-left: auto; }
.masthead__social { display: none; align-items: center; gap: var(--space-3xs); margin: 0 var(--space-xs) 0 0; padding: 0; list-style: none; }
.masthead__icon, .masthead__menu { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.masthead__icon:hover, .masthead__menu:hover { color: var(--color-yellow); }
.masthead__icon:focus-visible, .masthead__menu:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -2px; }
.masthead__icon:active, .masthead__menu:active { transform: translateY(1px); }
.masthead__menu { padding: 0 var(--space-xs); }
@media (prefers-reduced-motion: reduce) { .masthead__brand::after, .nav__link::after, .nav__toggle svg, .nav__panel, .nav__sub a::before { transition: none; } }
/* Without scripting the menu button cannot open the full-screen menu, so narrow screens get the destinations as
   a row under the bar instead. The panel toggles have no script to drive them either: hovering or focusing a
   parent's link still opens its panel, so they step aside rather than announce a state they cannot change. */
html:not(.js) .masthead__menu, html:not(.js) .nav__toggle { display: none; }
.masthead__plain ul { display: flex; gap: var(--space-lg); margin: 0; padding-block: 0 var(--space-2xs); overflow-x: auto; list-style: none; }
.masthead__plain a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600; white-space: nowrap; text-decoration: none; }
.masthead__plain a[aria-current] { text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.masthead__plain a:hover { color: var(--color-yellow); }
.masthead__plain a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.masthead__plain a:active { transform: translateY(1px); }

/* The full-screen menu, below 80rem: every destination with its pages, AWF's accounts and the search. */
.menu { position: fixed; inset: 0; z-index: var(--z-modal); overflow-y: auto; overscroll-behavior: contain; background: var(--color-arena); color: var(--color-on-arena); --color-focus: var(--color-yellow); --color-mark: var(--color-yellow); padding-block: calc(var(--masthead-top) + var(--masthead-h) + var(--space-xl)) var(--space-2xl); }
/* minmax(0, 1fr): the column is the screen, never the search row's natural width. */
.menu__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.menu__groups { columns: 2 18rem; column-gap: var(--space-2xl); margin: 0; padding: 0; list-style: none; }
.menu__group { break-inside: avoid; padding-bottom: var(--space-lg); }
/* Destinations are nav links: Inter in sentence case, as in the wide header, set large for the thumb. */
.menu__head { display: inline-flex; align-items: center; min-height: 48px; color: inherit; font: 600 var(--text-xl)/1.2 var(--font-body); text-decoration: none; }
.menu__head[aria-current] { text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.menu__sub { display: grid; margin: 0 0 var(--space-xs); padding: 0; list-style: none; }
.menu__sub a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-arena-2); font-weight: 600; text-decoration: none; }
.menu__sub a[aria-current] { color: var(--color-on-arena); text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.menu__social { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.menu__social a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: inherit; font-weight: 600; text-decoration: none; }
.menu__head:hover, .menu__sub a:hover, .menu__social a:hover { color: var(--color-yellow); }
.menu__head:focus-visible, .menu__sub a:focus-visible, .menu__social a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.menu__head:active, .menu__sub a:active, .menu__social a:active { transform: translateY(1px); }
.menu__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-arena-3); }
.menu__search { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); max-width: 32rem; }
.menu__search label { font-weight: 600; }
.menu__search-row { display: flex; gap: var(--space-xs); }
.menu__search input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border: 2px solid var(--color-on-arena-2); border-radius: var(--radius-input); background: var(--color-arena-2); color: var(--color-on-arena); caret-color: var(--color-yellow); outline: 3px solid transparent; outline-offset: 2px; }
.menu__search input:hover { border-color: var(--color-on-arena); }
.menu__search input:focus-visible { outline-color: var(--color-focus); }
.menu-open { overflow: hidden; }

/* Tracker: what is on now or next */
.tracker { background: var(--color-arena); color: var(--color-on-arena); --color-focus: var(--color-yellow); --color-mark: var(--color-yellow); }
.tracker__inner { display: flex; align-items: center; gap: var(--space-md); min-height: 48px; padding-block: var(--space-xs); }
.tracker__text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-lg); row-gap: var(--space-3xs); margin: 0; min-width: 0; }
.tracker__name { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.tracker__name:hover { text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; }
.tracker__name:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.tracker__name:active { color: var(--color-mark); }
.tracker__place, .tracker__when { color: var(--color-on-arena-2); }
.tracker__results { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.tracker__results:hover { text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; }
.tracker__results:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.tracker__results:active { color: var(--color-mark); }

/* ---------- Hero: poster ---------- */
.hero { position: relative; display: flex; align-items: flex-end; min-height: max(560px, calc(100svh - var(--header-h) - 52px)); background: var(--color-arena); color: var(--color-on-arena); --color-focus: var(--color-yellow); --color-mark: var(--color-yellow); overflow: clip; }
.hero__photo { position: absolute; inset: 0; margin: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--color-arena) 92%, transparent) 0%, color-mix(in oklab, var(--color-arena) 0%, transparent) 62%), linear-gradient(to right, color-mix(in oklab, var(--color-arena) 70%, transparent) 0%, color-mix(in oklab, var(--color-arena) 0%, transparent) 55%); }
.hero__content { position: relative; z-index: var(--z-raised); display: grid; gap: var(--space-lg); justify-items: start; padding-block: var(--space-3xl) var(--space-2xl); }
.hero__title { font-size: var(--text-display); max-width: 14ch; }
.hero__line { font-size: var(--text-lead); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-xs); }

/* ---------- Section rhythm ---------- */
.desk, .newsroom, .next, .nations { padding-block: var(--section-gap-s); }
.newsroom { padding-block: var(--section-gap); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-2xl); }

/* ---------- Results desk ---------- */
.desk__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.desk__head .lead { color: var(--color-on-arena-2); }
.desk__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.desk__table { display: grid; gap: var(--space-lg); justify-items: start; }
.desk__subhead { font: 600 var(--text-lg)/1.3 var(--font-body); margin-bottom: var(--space-md); }
.desk__champions { min-width: 0; }

.table-wrap { width: 100%; overflow-x: auto; }
.table-wrap:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.medals { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.medals th, .medals td { padding: var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: middle; }
.medals thead th { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); white-space: nowrap; border-bottom-width: 2px; }
.medals .num { text-align: right; width: 4.5rem; }
.medals td.num { font: 800 var(--text-xl)/1 var(--font-display); }
.medals td.is-zero { color: var(--color-muted); font-weight: 800; opacity: 0.6; }
.medals__rank { width: 3.5rem; }
.medals td.medals__rank { font: 800 var(--text-xl)/1 var(--font-display); color: var(--color-muted); text-align: left; }
.medals tbody th { font-weight: 600; }
.medals__nation { white-space: nowrap; }
.medals tbody .medals__nation { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; }
.medals__noc { font: 800 var(--text-lg)/1 var(--font-display); min-width: 3ch; }
.medals__name { font-weight: 400; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; }
.medals__total { color: var(--color-yellow); }
.medals tbody tr:first-child .medals__total { color: var(--color-yellow); }
.medal { display: inline-block; width: 12px; height: 12px; margin-right: var(--space-2xs); border-radius: var(--radius-pill); vertical-align: -1px; }
.medal--gold { background: var(--color-gold); }
.medal--silver { background: var(--color-silver); }
.medal--bronze { background: var(--color-bronze); }
.flag { display: inline-block; flex-shrink: 0; border-radius: var(--radius-pill); object-fit: cover; outline: 1px solid color-mix(in oklab, currentColor 18%, transparent); outline-offset: -1px; }
.flag--blank { width: var(--flag); height: var(--flag); background: var(--color-arena-3); }

/* Rails */
.rail { display: grid; grid-auto-flow: column; gap: var(--space-md); margin: 0; padding: 0 0 var(--space-md); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-color: var(--color-muted) transparent; }
.arena .rail { scrollbar-color: var(--color-on-arena-2) var(--color-arena-2); }
.field .rail { scrollbar-color: var(--color-yellow) var(--color-red-deep); }
.rail > * { scroll-snap-align: start; }
.rail:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

.champions { grid-auto-columns: minmax(12.5rem, 46%); grid-template-rows: repeat(2, auto); }
.champion { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-md); background: var(--color-arena-2); }
.champion p { margin: 0; }
.champion__cat { display: flex; align-items: baseline; gap: var(--space-xs); }
.champion__weight { font: 800 var(--text-2xl)/1 var(--font-display); text-transform: uppercase; }
.champion__group { color: var(--color-on-arena-2); font-size: var(--text-sm); }
.champion__name { font-weight: 600; line-height: 1.3; }
.champion__nation { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-on-arena-2); font-size: var(--text-sm); }
.champion__total { margin-top: var(--space-xs); }
.champion__total .num { font: 800 var(--text-2xl)/1 var(--font-display); color: var(--color-yellow); }
.unit { font-size: var(--text-sm); color: var(--color-on-arena-2); }

/* ---------- Stories ---------- */
.newsroom__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.newsroom__list { display: grid; gap: var(--space-xl); }
.story { display: grid; gap: var(--space-sm); }
.story__link { display: grid; gap: var(--space-md); color: inherit; text-decoration: none; }
.story__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.story__photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-paper-3); }
.story__photo img { width: 100%; height: 100%; object-fit: cover; }
/* A designed graphic (inc/images.php) is shown whole on the arena, never cropped. */
.story__photo--graphic { background: var(--color-arena); }
.story__photo--graphic img { object-fit: contain; }
.story__title { margin: 0; }
.story__link:hover .story__title { color: var(--color-mark); }
.story__link:active .story__title { color: var(--color-mark); }
.story__date { color: var(--color-ink-2); font-size: var(--text-sm); }
.newsroom__lead .story__title { font: 800 var(--text-section)/1.02 var(--font-display); text-transform: uppercase; max-width: 20ch; }
.newsroom__list .story__link { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
.newsroom__list .story { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--space-md); }
.newsroom__list .story__link { grid-column: 1 / -1; }
.newsroom__list .story__date { grid-column: 2; }
.newsroom__list .story__title { font-size: var(--text-lg); }
@media (prefers-reduced-motion: reduce) { .story__title { transition: none; } }

/* ---------- Photographs: every photo that opens something leans in a little ----------
 * On hover, and on keyboard focus, the photo scales to --photo-zoom (1.05) inside its own frame, which clips it.
 * Portraits do too, linked or not. A designed graphic shown whole, a hero and a lead photograph (which settle and
 * drift with the scroll, motion.js) never do, and nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :is(.story__photo, .home-event__frame, .home-gallery__photo, .home-ig__link, .mg-card__photo, .mg-photo__link, .hub-photos__link, .ia-tile__photo, .ia-portrait, .result__media, .article-body .e-gallery-item) img { transition: transform var(--dur-long) var(--ease-out); }
  :is(.story__link:focus-visible .story__photo:not(.story__photo--graphic), .home-event__link:focus-visible .home-event__frame, .home-gallery__link:focus-visible .home-gallery__photo:not(.home-gallery__photo--graphic), .home-ig__link:focus-visible, .mg-card__link:focus-visible .mg-card__photo, .mg-photo__link:focus-visible, .hub-photos__link:focus-visible, .ia-tile:focus-visible .ia-tile__photo, .ia-person:focus-within .ia-portrait, .result:focus-within .result__media:not(.result__media--flag), .article-body .e-gallery-item:focus-visible) img:not(.is-graphic) { transform: scale(var(--photo-zoom)); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.story__link:hover .story__photo:not(.story__photo--graphic), .home-event__link:hover .home-event__frame, .home-gallery__link:hover .home-gallery__photo:not(.home-gallery__photo--graphic), .home-ig__link:hover, .mg-card__link:hover .mg-card__photo, .mg-photo__link:hover, .hub-photos__link:hover, .ia-tile:hover .ia-tile__photo, .ia-person:hover .ia-portrait, .result:hover .result__media:not(.result__media--flag), .article-body .e-gallery-item:hover) img:not(.is-graphic) { transform: scale(var(--photo-zoom)); }
}

/* ---------- Events ---------- */
.events { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
.event { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--space-2xl); align-items: center; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.event__date { display: grid; justify-items: start; margin: 0; line-height: 1; }
.event__days { font: 800 var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.event__month { font: 800 var(--text-lg)/1.1 var(--font-display); text-transform: uppercase; }
.event__until { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.event__main { display: grid; gap: var(--space-2xs); min-width: 0; }
.event__name { font-size: var(--text-xl); margin: 0; }
.event__name a { color: inherit; text-decoration: none; }
.event__name a:hover, .event__name a:active { text-decoration: underline; text-decoration-color: var(--color-mark); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.event__name a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.event__meta { display: flex; flex-wrap: wrap; column-gap: var(--space-lg); margin: 0; color: var(--color-ink-2); }
.event__state { display: grid; justify-items: end; gap: var(--space-2xs); margin: 0; }
.event__day { font-size: var(--text-sm); color: var(--color-ink-2); }
.event--live .event__days, .event--live .event__month { color: var(--color-mark); }

/* ---------- Nations band ---------- */
.nations__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.nations__head h2 { max-width: 16ch; }
.nations__rail { grid-auto-columns: 9.5rem; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.nation { display: grid; justify-items: start; gap: var(--space-xs); padding: var(--space-md) 0; color: inherit; text-decoration: none; }
.nation:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.nation .flag { width: 56px; height: 56px; outline-color: color-mix(in oklab, var(--color-paper) 40%, transparent); }
.nation__noc { font: 800 var(--text-3xl)/1 var(--font-display); }
.nation__name { font-size: var(--text-sm); line-height: 1.3; }
.nation:hover .nation__noc { color: var(--color-yellow); }

/* ---------- Live centre ---------- */
.live { padding-block: var(--space-3xl); }
.live__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
.live__head { grid-column: 1 / -1; display: grid; gap: var(--space-md); justify-items: start; }
.live__title { font-size: var(--text-display); max-width: 18ch; }
.live__line { color: var(--color-on-arena-2); }
.live__subhead { font: 600 var(--text-lg)/1.3 var(--font-body); text-transform: none; letter-spacing: 0; margin-bottom: var(--space-md); max-width: none; }
.sessions { display: grid; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-on-arena); }
.session { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; column-gap: var(--space-md); row-gap: var(--space-3xs); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-arena-3); }
.session__time { font: 800 var(--text-xl)/1 var(--font-display); grid-row: span 2; }
.session__name { font-weight: 600; }
.session__group { grid-column: 2; color: var(--color-on-arena-2); font-size: var(--text-sm); }
.session__status { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: var(--text-sm); color: var(--color-on-arena-2); }
.session--medal .session__name::after { content: " medal final"; color: var(--color-yellow); font-weight: 600; }
.live__note { margin-top: var(--space-sm); color: var(--color-on-arena-2); font-size: var(--text-sm); }

/* ---------- Footer: the partners, then the mast ---------- */
/* One arena block on a yellow rule, on every page: the partners band, then the logo large, the two offices,
   the Inside AWF and quick links, AWF's accounts and the legal line. Both grids share the same columns. */
.footer { --footer-cols: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr); background: var(--color-arena); color: var(--color-on-arena); border-top: 4px solid var(--color-yellow); --color-focus: var(--color-yellow); --color-mark: var(--color-yellow); --color-rule: var(--color-arena-3); --color-muted: var(--color-on-arena-2); }
.partners { padding-block: var(--space-2xl); border-bottom: 1px solid var(--color-arena-3); }
.partners__inner { display: grid; grid-template-columns: var(--footer-cols); gap: var(--space-lg) var(--space-xl); align-items: center; }
.partners__title { font-size: var(--text-3xl); }
.partners__list { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
/* Each logo file is a white mark on a dark box; the tile takes the box's own grey, so the mark sits in a raised cell. */
.partner { position: relative; display: grid; place-items: center; min-height: 128px; padding: var(--space-sm); background: var(--color-partner-tile); }
.partner img { width: 200px; max-width: 100%; height: auto; }
.partner::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--color-yellow); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-short) var(--ease-out); }
.partner:hover::after { transform: scaleX(1); }
.partner:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.partner:active { transform: translateY(1px); }
.footer__main { padding-block: var(--space-3xl) var(--space-xl); }
.footer__inner { display: grid; grid-template-columns: var(--footer-cols); gap: var(--space-2xl) var(--space-xl); }
.footer__mast { display: grid; gap: var(--space-md); align-content: start; justify-items: start; }
.footer__logo { width: auto; height: 80px; }
.footer__name { font: 800 var(--text-3xl)/1.02 var(--font-display); text-transform: uppercase; max-width: 12ch; }
.footer__col { display: grid; gap: var(--space-md); align-content: start; }
.footer__head { font: 600 var(--text-md)/1.4 var(--font-body); text-transform: none; letter-spacing: 0; max-width: none; color: var(--color-yellow); }
.offices { display: grid; gap: var(--space-xl); margin: 0; }
.office { display: grid; gap: var(--space-2xs); align-content: start; }
.office__title { margin-bottom: var(--space-2xs); font-weight: 600; color: var(--color-on-arena); }
.office dd { margin: 0; color: var(--color-on-arena-2); }
.office a { color: var(--color-on-arena); text-underline-offset: 0.2em; }
.office a:hover { color: var(--color-yellow); text-decoration-thickness: 2px; }
.office a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.office a:active { color: var(--color-yellow); text-decoration: none; }
.footer__links { display: grid; margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: inherit; font-weight: 600; text-decoration: none; }
.footer__links a:hover { color: var(--color-yellow); }
.footer__links a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.footer__links a:active { transform: translateY(1px); }
.footer__legal { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: 1px solid var(--color-arena-3); color: var(--color-on-arena-2); font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) { .partner::after { transition: none; } }

/* ---------- Tabs without script: every panel shows, the tab list hides ---------- */
html:not(.js) [role="tablist"] { display: none; }
html:not(.js) [role="tabpanel"][hidden] { display: block !important; }

/* ---------- Generic page head ---------- */
.page-head { padding-block: var(--space-3xl) var(--space-2xl); }
.prose-wrap { padding-bottom: var(--section-gap-s); }

/* ---------- Responsive ---------- */
/* The header: the full menu, AWF's accounts and the search fit from 80rem (1280px); the wordmark joins them
   from 90rem. Below 80rem the menu button opens the full-screen menu. */
@media (min-width: 80rem) {
  .masthead__nav, .masthead__social { display: flex; }
  .masthead__menu, .menu, .masthead__plain { display: none; }
}
@media (min-width: 80rem) and (max-width: 89.99rem) {
  .masthead__wordmark { display: none; }
}
@media (max-width: 75rem) {
  .footer { --footer-cols: repeat(6, minmax(0, 1fr)); }
  .partners__title, .partners__list, .footer__mast, .footer__contact, .footer__legal { grid-column: 1 / -1; }
  .footer__col:not(.footer__contact) { grid-column: span 2; }
  .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  :root { --header-h: 64px; }
  .desk__body, .newsroom__grid, .live__inner { grid-template-columns: minmax(0, 1fr); }
  .event { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-md); }
  .event__state { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; gap: var(--space-sm); }
  .champions { grid-auto-columns: minmax(12rem, 70%); grid-template-rows: none; }
}
@media (max-width: 40rem) {
  .masthead__bar { gap: var(--space-sm); }
  .masthead__search { display: none; }
  .hero { min-height: max(520px, calc(100svh - var(--header-h) - 76px)); }
  .hero__content { padding-block: var(--space-2xl) var(--space-xl); }
  .footer { --footer-cols: repeat(2, minmax(0, 1fr)); }
  .footer__col:not(.footer__contact) { grid-column: span 1; }
  .footer__col.footer__follow { grid-column: 1 / -1; }
  .offices { grid-template-columns: minmax(0, 1fr); }
  .partners__list { grid-template-columns: minmax(0, 1fr); }
  .partner { min-height: 112px; }
  .medals__name { display: none; }
  .medals .num { width: 2.75rem; }
  .medals__rank { width: 2.25rem; }
  .medals th, .medals td { padding-inline: var(--space-2xs); }
  .medals thead .medal-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .medals thead .medal { width: 14px; height: 14px; margin-right: 0; }
  .newsroom__list .story, .newsroom__list .story__link { grid-template-columns: minmax(0, 1fr); }
  .newsroom__list .story__date { grid-column: 1; }
}
/* The narrowest phones (360px and under): the wordmark steps down so the menu button keeps its label. */
@media (max-width: 23rem) {
  .masthead__wordmark { font-size: var(--text-sm); }
}
@media print {
  .masthead { position: static; }
  .menu, .masthead__tools, .masthead__nav, html.js.motion .curtain { display: none; }
  /* No observer runs for print: a block still waiting for its reveal prints as it reads (motion.js also
     finishes them on beforeprint). */
  .js.motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js.motion [data-reveal="lines"] .reveal-line { transform: none !important; transition: none !important; }
}

/* ---------- Logo: inline SVG from inc/logo.php ---------- */
.awf-logo { display: block; overflow: visible; }
.awf-logo__back, .awf-logo__disc, .awf-logo__name { fill: var(--color-logo-red); }
.awf-logo__awf, .awf-logo__sun, .awf-logo__year { fill: var(--color-logo-yellow); }

/* ---------- Loader and page changes: assets/js/motion.js ---------- */
/* An arena panel covers the first paint and every page change, then lifts like a bar off the floor.
   It exists only with scripting on and motion allowed; the head script drops .motion if motion.js
   has not started within four seconds, and reduced motion never sets it. */
.curtain { display: none; }
.js.motion .curtain { display: block; position: fixed; inset: 0; z-index: var(--z-curtain); pointer-events: none; overflow: clip; }
/* Once the intro has played, the header stays on screen: the panel covers only the page below it, rising from
   the foot of the window and lifting away under the header's yellow rule. */
.js.motion:not(.intro) .curtain { top: calc(var(--masthead-top) + var(--masthead-h)); }
.curtain__panel { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-arena); color: var(--color-on-arena); pointer-events: auto; }
.curtain__panel::before, .curtain__panel::after { content: ""; position: absolute; inset-inline: 0; height: 4px; background: var(--color-yellow); }
.curtain__panel::before { bottom: 100%; }
.curtain__panel::after { top: 100%; }
.curtain__stage { display: grid; justify-items: center; gap: var(--space-xl); }
/* The front plate and the name sit on the window's centre line, over the progress bar, and the second plate
   hangs off to the right: the plate's centre is 283.47 of the logo's 687.39 units (inc/logo-parts.php), so the
   logo moves right by (343.695 - 283.47) / 687.39 of its width. translate composes with GSAP's transforms. */
.curtain__logo { width: min(40vmin, 240px); height: auto; translate: 8.761% 0; }
.intro .curtain__logo { width: min(62vmin, 440px); }
.js.motion.intro .curtain .awf-logo__plate, .js.motion.intro .curtain .awf-logo__back, .js.motion.intro .curtain .awf-logo__name path, .js.motion.intro .curtain__progress { opacity: 0; }
/* A slim progress bar: it fills as the page gets ready and only ever moves forward. */
.curtain__progress { position: relative; width: min(28vmin, 150px); height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in oklab, var(--color-on-arena) 16%, transparent); }
.intro .curtain__progress { width: min(40vmin, 200px); }
.curtain__bar { position: absolute; inset: 0; border-radius: inherit; background: var(--color-on-arena); transform: translateX(-100%); }

/* Reveals: motion.js marks the blocks of each page; each rises once as it enters the view, then the
   marks come off. The hidden states exist only under .js.motion, so pages read in full without them. */
.js.motion [data-reveal="rise"]:not(.is-in) { opacity: 0; transform: translate3d(0, 48px, 0); }
.js.motion [data-reveal="item"]:not(.is-in) { opacity: 0; transform: translate3d(0, 32px, 0); }
.js.motion [data-reveal="rise"], .js.motion [data-reveal="item"] { transition: opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms), transform 1.1s var(--ease-out) var(--reveal-delay, 0ms); }
.js.motion [data-reveal="lines"] .reveal-line { transform: translate3d(0, 112%, 0); }
.js.motion [data-reveal="lines"].is-in .reveal-line { transform: none; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--reveal-delay, 0ms) + var(--line, 0) * 90ms); }
.reveal-line-mask { padding-block: 0.1em; margin-block: -0.1em; }
.js.motion .hero__photo { overflow: clip; }

/* Lenis smooth scrolling, from lenis/dist/lenis.css */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- The plate scrollbar: assets/js/motion.js ---------- */
/* With a mouse or trackpad and motion allowed, a floating rail stands in for the browser's scrollbar. Its thumb
   is a 25 kg plate that rolls as the page moves and grows under the pointer; a fixed sheen on top keeps the
   light still while the plate turns. The head script sets .has-platebar before the first paint, so the page never
   changes width when the bar arrives. */
/* Only where the gutter can hold its lane (over 60rem, so zooming in brings the browser's bar back) and never
   with forced colours, where the system scrollbar's own colours matter. */
@media (min-width: 60.0625rem) and (forced-colors: none) {
  html.has-platebar { scrollbar-width: none; }
  html.has-platebar::-webkit-scrollbar { width: 0; height: 0; }
  .has-platebar .platebar { display: block; }
}
/* A short rail centred on the screen's height, floating clear of the header and the page's foot. */
.platebar { display: none; position: fixed; top: 50%; right: var(--space-xs); z-index: var(--z-scrollbar); width: 24px; height: clamp(200px, 46vh, 480px); transform: translateY(-50%); pointer-events: none; transition: opacity var(--dur-long) var(--ease-out), visibility var(--dur-long); }
.platebar__rail { position: absolute; inset: 0 auto 0 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--color-rail); transition: transform var(--dur-short) var(--ease-out); }
.platebar__rail::before { content: ""; position: absolute; inset: 0 -10px; pointer-events: auto; cursor: pointer; }
.platebar__thumb { position: absolute; top: 0; left: 0; width: 24px; height: 24px; pointer-events: auto; cursor: grab; will-change: transform; }
/* The plate is an object, so it keeps a small shadow, and its hover grow is the one springy, longer move in the
   interface (DESIGN.md, Motion). A faint paper ring holds its edge on the red bands. */
.platebar__grow { position: relative; width: 100%; height: 100%; border-radius: 50%; outline: 1.5px solid var(--color-plate-ring); outline-offset: -1px; filter: drop-shadow(0 2px 5px var(--color-plate-shadow)); transition: transform var(--dur-plate) var(--ease-plate); }
.platebar__grow::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 26%, var(--color-sheen), transparent 52%); pointer-events: none; }
.platebar__plate { display: block; width: 100%; height: 100%; will-change: transform; }
/* The 3D disc replaces the drawn plate once it has loaded; it carries its own light, so the sheen goes. */
.platebar__disc { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.platebar.is-3d .platebar__plate { visibility: hidden; }
.platebar.is-3d .platebar__grow::after { display: none; }
.platebar:hover .platebar__rail, .platebar.is-dragging .platebar__rail { transform: scaleX(2); }
.platebar:hover .platebar__grow, .platebar.is-dragging .platebar__grow { transform: scale(1.5); }
.platebar.is-dragging .platebar__thumb, html.is-scrubbing, html.is-scrubbing * { cursor: grabbing; }
html.is-scrubbing { user-select: none; }
.platebar.is-off, .menu-open .platebar { opacity: 0; visibility: hidden; }
@media print { .platebar { display: none; } }