/* Hallmark · shape: Live desk · genre: editorial · theme: custom (design.md) · job: attend · idea: "What is on now, the medals, the stories, where Asia lifts next, and what it has lifted, shot and posted since." · 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 (a designed graphic framed whole beside the head instead); the live centre while a championship runs · nav: slab, a red bar on a yellow rule · footer: mast, the logo large over the offices · imagery: photographs, AWF's own, and AWF's Instagram posts through its Curator.io feed · 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 S4 R4 V4 · weakest: E, four more blocks risk a portal that never ends; each takes its own surface (paper, arena, chalk, paper) and one way out, the result books read as a scoreboard, and the Instagram mosaic always closes in whole rows */

/* ---------- Hero, framed: the lead story's designed graphic beside the head (front-page.php) ----------
 * A graphic carries its own type (inc/images.php), so it never runs full-bleed under the head: on the arena the
 * head, line and actions take 7 of 12 columns on the left and the graphic 5 on the right, whole (never cropped, no
 * gradient, nothing laid over it). Below 60rem the head comes first, then the graphic at full width. The news lead
 * and the article hero frame graphics the same way (news.css). The graphic is a plain block, so motion.js lets it
 * rise into place like any block, without the photograph's settle and drift (which would crop it). */
.hero--graphic { align-items: center; }
.hero__frame { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-xl) var(--space-2xl); padding-block: var(--space-3xl) var(--space-2xl); }
.hero--graphic .hero__content { padding-block: 0; }
.hero__graphic { min-width: 0; }
.hero__graphic img { max-height: min(70svh, 640px); margin-left: auto; object-fit: contain; object-position: 100% 50%; }

/* ---------- Rhythm: the homepage blocks under "Where Asia lifts next" (front-page.php, inc/home.php) ---------- */
.home-events, .home-galleries, .home-books, .home-ig { padding-block: var(--section-gap-s); }
/* Every way out of a homepage block is a 44px target, the links beside the heads included. */
.section-head .link-strong { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Event highlights: four finished championships, photograph first ---------- */
.home-events__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.home-event { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.home-event__link { display: grid; gap: var(--space-md); color: inherit; text-decoration: none; }
.home-event__frame { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-paper-3); container-type: inline-size; transition: transform var(--dur-micro) var(--ease-out); }
.home-event__frame img { width: 100%; height: 100%; object-fit: cover; }
/* Without a photograph the card names the city and the year on the arena, the way a poster would. */
.home-event__poster { display: grid; align-content: end; justify-items: start; gap: var(--space-xs); height: 100%; margin: 0; padding: var(--space-lg); background: var(--color-arena); color: var(--color-on-arena); border-bottom: 4px solid var(--color-yellow); }
.home-event__city { max-width: 100%; font: 800 clamp(2rem, 15cqi, 4.5rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); overflow-wrap: break-word; }
.home-event__year { font: 800 var(--text-2xl)/1 var(--font-display); color: var(--color-yellow); font-variant-numeric: tabular-nums; }
.home-event__title { margin: 0; }
.home-event__meta { display: grid; gap: var(--space-3xs); margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.home-event__link:hover .home-event__title { color: var(--color-mark); }
.home-event__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.home-event__link:active .home-event__frame { transform: scale(0.985); }
.home-event__link:active .home-event__title { color: var(--color-mark); }

/* ---------- Media galleries: the newest six, on the arena ---------- */
.home-galleries__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.home-gallery { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.home-gallery__link { display: grid; gap: var(--space-md); color: inherit; text-decoration: none; }
.home-gallery__photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-arena-2); transition: transform var(--dur-micro) var(--ease-out); }
.home-gallery__photo img { width: 100%; height: 100%; object-fit: cover; }
/* A cover that is a designed graphic (inc/images.php) is shown whole, never cropped. */
.home-gallery__photo--graphic img { object-fit: contain; }
.home-gallery__title { margin: 0; }
.home-gallery__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: 0; color: var(--color-on-arena-2); font-size: var(--text-sm); }
.home-gallery__link:hover .home-gallery__title, .home-gallery__link:active .home-gallery__title { color: var(--color-mark); }
.home-gallery__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.home-gallery__link:active .home-gallery__photo { transform: scale(0.985); }

/* ---------- Recent results: the newest result books, set like a scoreboard ---------- */
.home-books__list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
/* The name keeps at least 12rem, so the book buttons stack in their own column before they could reach the name. */
.home-book { display: grid; grid-template-columns: 11rem minmax(12rem, 1fr) auto; align-items: center; gap: var(--space-sm) var(--space-2xl); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.home-book__year { margin: 0; font: 800 var(--text-display-s)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.home-book__main { display: grid; gap: var(--space-2xs); min-width: 0; }
.home-book__name { margin: 0; }
.home-book__name a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.home-book__name a:hover { text-decoration: underline; text-decoration-color: var(--color-mark); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.home-book__name a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.home-book__name a:active { color: var(--color-mark); }
.home-book__place { margin: 0; color: var(--color-ink-2); }
.home-book__files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); margin: 0; }
.home-book__file { gap: var(--space-sm); }
/* The label stands 24px from the type, the type 12px from the size. */
.home-book__label { margin-inline-end: var(--space-sm); }
.home-book__type { padding: 0 var(--space-2xs); border: 1px solid currentColor; font: 600 var(--text-xs)/1.6 var(--font-body); }
.home-book__size { font-size: var(--text-sm); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--color-muted); }

/* ---------- Instagram: AWF's Instagram as a mosaic ---------- */
/* Six columns, then four, three and two: nine tiles (the first spans two by two) and every twelve more close in
   whole rows at each width. Tiles take Instagram's 4:5 portrait frame, so AWF's graphics (medal tables, session
   results) show whole; no rounding, two rows to begin with as on the old site. The lead tile fills the two rows
   it spans, its picture laid over it, so its corners meet the rows beside it exactly; at two columns it has the
   rows to itself and keeps the 4:5 frame. */
.home-ig__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.home-ig__tile { min-width: 0; min-height: 0; aspect-ratio: 4 / 5; }
.home-ig__tile:first-child { position: relative; grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.home-ig__tile:first-child .home-ig__link { position: absolute; inset: 0; }
.home-ig__link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--color-paper-3); transition: transform var(--dur-micro) var(--ease-out); }
/* The photograph sits still; the tile answers the pointer with a frame in the highlight colour over its edge. */
.home-ig__link::after { content: ""; position: absolute; inset: 0; border: 4px solid var(--color-mark); opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.home-ig__link img { width: 100%; height: 100%; object-fit: cover; }
.home-ig__play { position: absolute; top: var(--space-xs); right: var(--space-xs); display: grid; place-items: center; width: 32px; height: 32px; background: color-mix(in oklab, var(--color-arena) 72%, transparent); color: var(--color-on-arena); }
.home-ig__link:hover::after { opacity: 1; }
.home-ig__link:focus-visible { z-index: var(--z-base); outline: 3px solid var(--color-focus); outline-offset: 2px; }
.home-ig__link:active { transform: scale(0.98); }
.home-ig__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); }
.home-ig__credit { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.home-ig__credit:hover { color: var(--color-ink); text-decoration-color: var(--color-mark); text-decoration-thickness: 2px; }
.home-ig__credit:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.home-ig__credit:active { color: var(--color-mark); }

/* ---------- Responsive ---------- */
@media (max-width: 75rem) {
  .home-ig__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .hero__frame { grid-template-columns: minmax(0, 1fr); }
  .hero__graphic img { margin-left: 0; object-position: 0 50%; }
  .home-events__grid, .home-galleries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-book { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; }
  .home-book__year { grid-row: span 2; font-size: var(--text-3xl); }
  .home-book__files { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 48rem) {
  .home-ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .hero__frame { padding-block: var(--space-2xl) var(--space-xl); }
  .home-events__grid, .home-galleries__grid { grid-template-columns: minmax(0, 1fr); }
  .home-book { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-md); }
  .home-book__year { font-size: var(--text-2xl); }
  /* A book button never runs past the screen: its words wrap, and the type and size go under the label when the
     line is full ("Result book, Asian Games 2026, PDF 110.3 MB" at 320px). */
  .home-book__files { min-width: 0; }
  .home-book__file { max-width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2xs) var(--space-sm); padding: var(--space-xs) var(--space-md); white-space: normal; text-align: left; }
  .home-book__label { margin-inline-end: 0; line-height: 1.25; }
}
@media (max-width: 30rem) {
  .home-ig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-ig__tile:first-child { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .home-event__frame, .home-gallery__photo, .home-ig__link, .home-ig__link::after { transition: none; }
  .home-event__link:active .home-event__frame, .home-gallery__link:active .home-gallery__photo, .home-ig__link:active { transform: none; }
}