/*
 * Ported from the Next.js site's styles (src/styles/ and src/site/*.module.css, in the git tag
 * archive/nextjs-and-migration) by a tool that went with it. Hand-maintained since; the site's
 * look is theme.css, loaded after this file, so change that rather than this.
 */

/*
 * Self-hosted IBM Plex. No external requests, by project rule.
 *
 * Every weight is a genuinely distinct file. The Astro build this replaces shipped
 * twelve files of which only four were distinct — 500/600/700 were byte-identical
 * copies of 400, so browsers were synthesising every bold weight.
 *
 * The latin-ext face is not optional: it carries the Latvian diacritics
 * (ā č ē ģ ī ķ ļ ņ š ū ž, all in U+0100–U+017E). Without it half the site is tofu.
 */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   Robotu Skola

   The palette is the school's own, taken from the live site and the logo, not
   invented: gold links and navigation, dark navy text, warm cream panels, and
   the carmine of the wordmark for actions.

   Light only. The live site has no dark mode and the design should not feel
   dark or clinical, so there is no `prefers-color-scheme` override — adding one
   back later is a single block.
   ========================================================================= */

:root {
  color-scheme: light;

  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  /* Mono is reserved for dates and podium ranks, where digits must line up.
     It is not the voice of the site. */
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --t-micro: 0.75rem;
  --t-label: 0.8125rem;
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lead: 1.1875rem;
  /*
   * A page title is a label, not a billboard. At 3rem the h1 swallowed the page and
   * left nothing for section headings to be smaller than; the display size below is
   * only for the hero, where it sits over a photograph.
   */
  --t-h3: 1.25rem;
  --t-h2: clamp(1.3rem, 1.15rem + 0.65vw, 1.6rem);
  --t-h1: clamp(1.7rem, 1.4rem + 1.3vw, 2.25rem);
  --t-display: clamp(1.75rem, 1.1rem + 2.9vw, 3.1rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6rem;

  --shell: 78rem;
  --measure: 68ch;
  --hairline: 1px;
  --radius: 0.5rem;
  --radius-lg: 0.875rem;

  /* Surfaces */
  --paper: #ffffff;
  --panel: #ffffff;
  --cream: #eeece8;
  --ink: #192930;
  --ink-soft: #626d74;
  --ink-faint: #8d9599;
  --rule: #e6e3de;
  --rule-strong: #ddd9d2;

  /* Brand */
  --brand: #9c2140;
  --brand-hover: #7f1a34;
  --brand-ink: #ffffff;
  --accent: #d7b221;
  --accent-hover: #b8951a;
  --accent-subtle: #faf4dd;
  --accent-contrast: #192930;

  /*
   * The gold is about 2:1 on white — fine for large bold navigation, not for
   * body copy. Inline links use the darker shade. Do not collapse the two.
   */
  --link: #8a6f12;

  --gold: #b8860b;
  --silver: #6b7280;
  --bronze: #a1541f;

  --shadow: 0 1px 2px rgb(25 41 48 / 5%), 0 10px 30px -18px rgb(25 41 48 / 35%);
  --focus: #0b6bcb;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Results only line up if every digit is the same width. */
table,
time,
.tnum {
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--s-3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
}
h2 {
  font-size: var(--t-h2);
}
h3 {
  font-size: var(--t-h3);
}

p,
ul,
ol {
  margin: 0 0 var(--s-4);
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--brand);
}

img {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- primitives ---------------------------------------------------------- */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

/* Small caps-ish metadata. Sans, not mono — mono everywhere read as clinical. */
.label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rule {
  border: 0;
  border-top: var(--hairline) solid var(--rule);
  margin: 0;
}

.prose {
  max-width: var(--measure);
}

.prose :is(h2, h3) {
  margin-top: var(--s-6);
}

/* Wide migrated tables scroll inside themselves rather than breaking the page. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s-2);
  z-index: 100;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  font-weight: 600;
}

.skip-link:focus {
  left: var(--s-4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Header.module.css (classes prefixed header__) --- */

.header__header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Translucent, so content slides under it rather than hitting a hard slab. */
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--hairline) solid var(--rule);
}

@supports not (backdrop-filter: blur(1px)) {
  .header__header {
    background: var(--paper);
  }
}

.header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 5rem;
  padding-block: var(--s-3);
}

/* --- brand ---------------------------------------------------------------- */

.header__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}

.header__logo {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  flex: none;
}

.header__wordmark {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- navigation ----------------------------------------------------------- */

.header__menu {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.header__menu > li {
  position: relative;
}

/*
 * Gold, uppercase and bold — the school's navigation as it has always looked. The
 * gold is only ~2:1 on white, acceptable here because the type is large and heavy;
 * body links use the darker `--link` instead.
 */
.header__menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease;
}

.header__menu > li > a:hover,
.header__hasChildren:focus-within > a {
  color: var(--accent-hover);
}

/*
 * A sliding underline rather than a filled chip: lighter, and it leaves the gold
 * doing the work instead of a block of background colour.
 */
.header__menu > li > a::after {
  content: '';
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 0.1rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}

.header__menu > li > a:hover::after,
.header__hasChildren:focus-within > a::after,
.header__menu > li > a[aria-current='page']::after {
  transform: scaleX(1);
}

/*
 * The running season is where most visitors are heading during a championship, so it
 * is drawn as a button rather than a sixth link of identical weight.
 */
.header__menu > li > a.header__highlight {
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--radius);
  padding-inline: var(--s-4);
}

.header__menu > li > a.header__highlight:hover {
  background: var(--brand-hover);
  color: var(--brand-ink);
}

.header__menu > li > a.header__highlight::after {
  display: none;
}

.header__caret {
  width: 0.6rem;
  height: 0.4rem;
  transition: transform 0.18s ease;
}

.header__hasChildren:hover > a .header__caret,
.header__hasChildren:focus-within > a .header__caret {
  transform: rotate(180deg);
}

/* --- submenus ------------------------------------------------------------- */

.header__submenuWrap {
  position: absolute;
  top: 100%;
  inset-inline-start: 50%;
  /*
   * Padding on the wrapper, not margin on the panel — it keeps a hover bridge so the
   * pointer never leaves `:hover` on the way down to the submenu.
   */
  padding-top: 0.5rem;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.35rem);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s linear 0.16s;
}

.header__hasChildren:hover > .header__submenuWrap,
.header__hasChildren:focus-within > .header__submenuWrap {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.header__submenu {
  min-width: 19rem;
  max-width: 24rem;
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  background: var(--panel);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 6px rgb(25 41 48 / 6%),
    0 18px 40px -20px rgb(25 41 48 / 45%);
}

.header__submenu a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  font-size: var(--t-small);
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}

.header__submenu a:hover,
.header__submenu a[aria-current='page'] {
  color: var(--ink);
  background: var(--cream);
}

/* --- language toggle ------------------------------------------------------ */

.header__lang {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex: none;
  padding: 0.2rem;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 999px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.header__langOn,
.header__langOff {
  display: block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.2;
}

.header__langOn {
  background: var(--ink);
  color: var(--paper);
}

.header__langOff {
  color: var(--ink-faint);
}

.header__langOff:hover {
  color: var(--accent-hover);
  background: var(--accent-subtle);
}

/* --- mobile --------------------------------------------------------------- */

.header__toggle,
.header__toggleLabel {
  display: none;
}

@media (max-width: 72rem) {
  .header__bar {
    flex-wrap: wrap;
    min-height: 0;
    gap: var(--s-3);
  }

  .header__toggleLabel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: var(--hairline) solid var(--rule-strong);
    border-radius: var(--radius);
    cursor: pointer;
    order: 3;
  }

  .header__lang {
    order: 2;
  }

  .header__bars,
  .header__bars::before,
  .header__bars::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    content: '';
    transition: transform 0.18s ease;
  }

  .header__bars::before {
    transform: translateY(-6px);
  }

  .header__bars::after {
    transform: translateY(4px);
  }

  .header__nav {
    order: 4;
    flex-basis: 100%;
    display: grid;
    /* Animating rows rather than toggling display keeps the panel openable
       with CSS alone while still sliding rather than snapping. */
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
  }

  .header__nav > .header__menu {
    overflow: hidden;
    min-height: 0;
  }

  .header__bar:has(.header__toggle:checked) .header__nav {
    grid-template-rows: 1fr;
  }

  .header__bar:has(.header__toggle:checked) .header__nav > .header__menu {
    overflow-y: auto;
    max-height: 70vh;
  }

  .header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: var(--s-3);
  }

  .header__menu > li > a {
    padding: var(--s-3) 0;
    border-bottom: var(--hairline) solid var(--rule);
  }

  .header__menu > li > a::after,
  .header__caret {
    display: none;
  }

  .header__submenuWrap {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    padding-top: 0;
    transition: none;
  }

  .header__submenu {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    max-height: none;
    min-width: 0;
    max-width: none;
    padding: var(--s-1) 0 var(--s-2);
  }

  .header__submenu a {
    padding-inline-start: var(--s-4);
  }
}

/* --- Footer.module.css (classes prefixed footer__) --- */

.footer__footer {
  margin-top: var(--s-9);
  background: var(--cream);
  border-top: var(--hairline) solid var(--rule-strong);
  padding-block: var(--s-6);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: baseline;
  justify-content: space-between;
}

.footer__meta {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.footer__sep {
  color: var(--ink-faint);
}

.footer__links {
  display: flex;
  gap: var(--s-5);
  margin: 0;
  font-size: var(--t-small);
  font-weight: 600;
}

/* --- PostCard.module.css (classes prefixed post-card__) --- */

.post-card__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.post-card__card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* Whole-card hit area without wrapping block content in an anchor. */
.post-card__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.post-card__media {
  /* Shorter than 3/2: the cards were mostly photograph and very little headline. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cream);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Posts without a photograph get the mark rather than an empty field. */
.post-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--cream);
}

.post-card__placeholder svg {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--accent);
  opacity: 0.75;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5) var(--s-5);
}

.post-card__meta {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  margin: 0;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.post-card__meta time {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.post-card__cat {
  color: var(--accent-hover);
}

.post-card__title {
  margin: 0;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--ink);
}

.post-card__card:hover .post-card__title {
  color: var(--brand);
}

.post-card__excerpt {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* --- Pagination.module.css (classes prefixed pagination__) --- */

.pagination__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--hairline) solid var(--rule);
  font-size: var(--t-small);
  font-weight: 600;
}

.pagination__step {
  color: var(--link);
  text-decoration: none;
}

.pagination__step:hover {
  color: var(--brand);
}

.pagination__off {
  color: var(--ink-faint);
  opacity: 0.6;
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__pages li {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.pagination__page {
  display: block;
  min-width: 2rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius);
  text-align: center;
  color: var(--ink-soft);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.pagination__page:hover {
  color: var(--accent-hover);
  background: var(--accent-subtle);
}

.pagination__on {
  background: var(--accent);
  color: var(--accent-contrast);
}

.pagination__on:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

.pagination__gap {
  color: var(--ink-faint);
}

/* --- RichText.module.css (classes prefixed rich-text__) --- */

.rich-text__prose {
  max-width: var(--measure);
}

/*
 * Headings inside body copy are subheadings, not titles. At the shared h2 size they
 * came within a hair of the page's own <h1> and the hierarchy stopped reading.
 */
.rich-text__prose h2 {
  margin-top: var(--s-6);
  font-size: var(--t-h3);
}

.rich-text__prose h3 {
  margin-top: var(--s-5);
  font-size: var(--t-body);
}

.rich-text__prose hr {
  margin: var(--s-5) 0;
  border: 0;
  border-top: var(--hairline) solid var(--rule-strong);
}

.rich-text__prose img {
  border-radius: var(--radius);
}

.rich-text__figure {
  margin: var(--s-5) 0;
}

.rich-text__embed {
  margin: var(--s-5) 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
}

.rich-text__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.rich-text__raw {
  margin: var(--s-5) 0;
  /* Migrated tables are wider than the measure; let them use the full column. */
  max-width: none;
}

.rich-text__raw table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.rich-text__raw td,
.rich-text__raw th {
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--hairline) solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.rich-text__raw th {
  background: var(--cream);
  font-weight: 600;
}

/*
 * A run of photographs. Migrated posts are mostly portrait phone shots, so the grid
 * is sized to put two or three across rather than letting each sit alone at its
 * natural width — which for WordPress's 169px thumbnails looked like an accident.
 */
.rich-text__gallery {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  margin: var(--s-5) 0;
}

.rich-text__galleryItem {
  margin: 0;
}

.rich-text__galleryItem img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.rich-text__figure img {
  border-radius: var(--radius);
}

/*
 * Rules and resource pages are mostly links to PDFs. As ordinary inline links they
 * read as a wall of gold text; as buttons you can see at a glance how many documents
 * there are and what each one is.
 */
.rich-text__prose a[href$='.pdf'],
.rich-text__prose a[href$='.PDF'] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  margin: 0.15rem 0;
  background: var(--panel);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-small);
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}

.rich-text__prose a[href$='.pdf']::before,
.rich-text__prose a[href$='.PDF']::before {
  content: '';
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: var(--accent-hover);
  /* Document glyph, tinted with the accent rather than shipped as an image. */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5h6.5L16 7v10.5H5z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M11.5 2.5V7H16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
}

.rich-text__prose a[href$='.pdf']:hover,
.rich-text__prose a[href$='.PDF']:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--ink);
}

/* Lists of PDFs lay out as a grid of buttons rather than a bulleted column. */
.rich-text__prose ul:has(> li > a[href$='.pdf']) {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  list-style: none;
  padding: 0;
}

.rich-text__prose ul:has(> li > a[href$='.pdf']) > li {
  display: flex;
}

.rich-text__prose ul:has(> li > a[href$='.pdf']) > li > a {
  width: 100%;
}

/* Attention notices, set as blockquotes in the source. */
.rich-text__prose blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-3) var(--s-4);
  border: 0;
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-subtle);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
}

.rich-text__prose blockquote p:last-child {
  margin-bottom: 0;
}

/* --- views.module.css (classes prefixed views__) --- */

.views__sectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--accent);
}

.views__sectionTitle {
  margin: 0;
  font-size: var(--t-h2);
  letter-spacing: -0.015em;
}

.views__sectionCount {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.views__cards {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  margin-top: var(--s-6);
}

/*
 * A reading column rather than the full shell. Body copy set across 78rem left the
 * text stranded on one side of the screen; 54rem centres it and keeps the measure
 * comfortable. Wide content (standings, podium grids) scrolls inside itself.
 */
.views__article {
  max-width: 54rem;
  padding-block: var(--s-7) var(--s-8);
}

.views__articleHead {
  padding-bottom: var(--s-4);
  border-bottom: 2px solid var(--accent);
  margin-bottom: var(--s-5);
}

.views__articleHead h1 {
  margin: var(--s-2) 0 0;
}

.views__articleDate {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink-faint);
}

/* Featured images are up to 1268px wide; unconstrained they dominated the page. */
.views__articleHero {
  display: block;
  width: 100%;
  max-height: 20rem;
  object-fit: cover;
  margin-bottom: var(--s-5);
  border-radius: var(--radius-lg);
}

.views__notice {
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-subtle);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}