@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap");

/* ==========================================================================
   Marathon XC Invitational - Concept 2 "Modern Athletic"
   Crisp race-results look: evergreen masthead, cool-neutral surfaces,
   condensed uppercase display type, burnt-orange accent. Places 1-3 are
   deliberately NOT highlighted (no gold/silver/bronze).
   ========================================================================== */

:root {
  /* type */
  --font-display: "Barlow Condensed", "Avenir Next Condensed", "Arial Narrow", "sans-serif-condensed", "Roboto Condensed", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, Menlo, "Courier New", monospace;

  /* fixed fall palette (same in both modes; used for the brand stripe and hero) */
  --fall-pine: #2d8752;
  --fall-gold: #e5a82e;
  --fall-orange: #e0621f;
  --fall-maple: #b9301f;
  --stripe: linear-gradient(90deg, var(--fall-gold) 0 33.34%, var(--fall-orange) 33.34% 66.67%, var(--fall-maple) 66.67% 100%); /* no green */

  /* masthead (dark in both modes) */
  --header: #34190a;           /* dark ember (orange-hinted) */
  --header-ink: #ffffff;
  --header-muted: #e2cdb8;     /* warm light grey on the header */
  --header-line: rgba(255, 255, 255, .4);  /* search border, 3:1+ */
  --header-line-hover: rgba(255, 255, 255, .58);
  --header-field: rgba(255, 255, 255, .08);
  --header-field-focus: rgba(255, 255, 255, .14);
  --header-focus: #f0b43c;     /* gold focus rings on the dark header */

  /* icons (inline SVG data URIs; mid-grey reads on light and dark surfaces) */
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237d8983' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.7 12.7 17 17'/%3E%3C/svg%3E");
  --icon-search-header: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23e2cdb8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.7 12.7 17 17'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237d8983' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%237d8983' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l8 8M11 3l-8 8'/%3E%3C/svg%3E");

  /* spacing / shape */
  --gutter: 16px;
  --radius: 4px;

  /* themeable tokens - light */
  --brand: #34190a;
  --brand-ink: #ffffff;
  --accent: #c2470f;
  --accent-ink: #ffffff;
  --accent-text: #b03f0b;
  --gold: #e5a82e;
  --gold-ink: #1c1404;
  --bg: #f7f3ee;
  --surface: #ffffff;
  --surface-2: #faf7f3;
  --ink: #1c1612;
  --ink-2: #3a302a;
  --muted: #6b5f56;
  --line: #ebe3da;
  --line-strong: #d3c7bb;
  --field-line: #8f8277; /* input/select borders: 3:1 against surface and bg (WCAG 1.4.11) */
  --row-alt: #fbf8f5;
  --hover: #f4ece3;
  /* focus: a 2px solid accent edge (1px border + 1px ring) plus a soft halo */
  --ring: 0 0 0 1px var(--accent), 0 0 0 4px rgba(194, 71, 15, .28);
  --scroll-shadow: rgba(40, 22, 10, .34); /* edge shadow on sideways-scrolling tables */
  --shadow-sm: 0 1px 2px rgba(40, 22, 10, .05);
  --shadow-md: 0 10px 24px -14px rgba(40, 22, 10, .35);
  --danger: #b91c1c;
  --warn: #b45309;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #9a4a17;
    --brand-ink: #ffffff;
    --accent: #e8722f;
    --accent-ink: #170a03;
    --accent-text: #f2925b;
    --gold: #e5a82e;
    --gold-ink: #1c1404;
    --bg: #120d0a;
    --surface: #1a1410;
    --surface-2: #211a15;
    --ink: #efe8e2;
    --ink-2: #d6ccc4;
    --muted: #a89b91;
    --line: #2e251f;
    --line-strong: #44382f;
    --field-line: #76685d;
    --row-alt: #1d1713;
    --hover: #2a2019;
    --ring: 0 0 0 1px var(--accent), 0 0 0 4px rgba(232, 114, 47, .4);
    --scroll-shadow: rgba(0, 0, 0, .65);
    --shadow-sm: none;
    --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, .7);
    --radius: 4px;
    --danger: #f87171;
    --warn: #f5a524;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #9a4a17;
  --brand-ink: #ffffff;
  --accent: #e8722f;
  --accent-ink: #170a03;
  --accent-text: #f2925b;
  --gold: #e5a82e;
  --gold-ink: #1c1404;
  --bg: #120d0a;
  --surface: #1a1410;
  --surface-2: #211a15;
  --ink: #efe8e2;
  --ink-2: #d6ccc4;
  --muted: #a89b91;
  --line: #2e251f;
  --line-strong: #44382f;
  --field-line: #76685d;
  --row-alt: #1d1713;
  --hover: #2a2019;
  --ring: 0 0 0 1px var(--accent), 0 0 0 4px rgba(232, 114, 47, .4);
  --scroll-shadow: rgba(0, 0, 0, .65);
  --shadow-sm: none;
  --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, .7);
  --radius: 4px;
  --danger: #f87171;
  --warn: #f5a524;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
img { max-width: 100%; }
button { font: inherit; }
::selection { background: rgba(229, 168, 46, .38); }
[hidden] { display: none !important; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.muted { color: var(--muted); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.th-short { display: none; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: relative;
  background: var(--header);
  color: var(--header-ink);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--stripe);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 12px;
  padding-bottom: 16px; /* 12px + 4px stripe */
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  /* takes (nearly) all spare room on a shared row, so the search keeps its 320px
     there but stretches across the row when it wraps below (tablet widths) */
  flex: 1000 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.brand:focus-visible { outline-color: var(--header-focus); outline-offset: 4px; }
img.brand-mark {
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}
.brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-name {
  font: 700 21px/1.05 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.brand-sub {
  font: 600 11.5px/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--header-muted);
}
.header-search { flex: 1 1 320px; margin: 0; }
.header-search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--header-line); /* 3:1+ against the masthead (WCAG 1.4.11) */
  border-radius: var(--radius);
  background: var(--header-field) var(--icon-search-header) no-repeat 13px 50% / 18px 18px;
  color: var(--header-ink);
  font: 500 15px/1.2 var(--font-body);
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark; /* light clear-button glyph on the dark masthead in both modes */
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.header-search input::placeholder { color: var(--header-muted); opacity: 1; }
.header-search input:hover { border-color: var(--header-line-hover); }
.header-search input:focus {
  outline: none;
  border-color: var(--fall-gold);
  background-color: var(--header-field-focus);
  box-shadow: 0 0 0 3px rgba(229, 168, 46, .3);
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #1a0c05;
  color: #ffffff;
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #1a0c05 url("hero.svg") center bottom / cover no-repeat;
}
/* scrim: a dark band behind the text column that fades out toward the art */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 10, 4, .92) 0%, rgba(24, 10, 4, .8) calc(50% - 100px), rgba(24, 10, 4, .15) calc(50% + 280px), rgba(24, 10, 4, 0) 100%),
    linear-gradient(180deg, rgba(24, 10, 4, .35) 0%, rgba(24, 10, 4, 0) 45%);
}
.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 380px;
  padding-top: 52px;
  padding-bottom: 60px;
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: #f2b84b;
  font: 700 12.5px/1.2 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-kicker::before {
  content: "";
  flex: none;
  width: 28px;
  height: 3px;
  background: var(--fall-orange);
}
.hero-title {
  max-width: 24ch;
  margin: 0;
  color: #ffffff;
  font: 700 clamp(31px, 4vw + 16px, 62px)/.98 var(--font-display);
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 16px 0 0;
  color: #dbe4de;
  font: 600 13.5px/1.4 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-facts span + span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 12px;
  background: #f2b84b;
  transform: rotate(45deg);
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.hero-stats {
  display: inline-flex;
  align-self: flex-start;
  margin: 26px 0 0;
  background: rgba(8, 18, 13, .78);
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 3px solid var(--fall-orange);
  border-radius: 2px;
}
.hero-stats span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 20px;
  color: #c9d5ce;
  font: 700 11.5px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-stats span + span { border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-stats strong {
  color: #ffffff;
  font: 700 32px/1 var(--font-display);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- page scaffolding */
main { padding-top: 32px; padding-bottom: 56px; min-height: 60vh; }
.page-home main { padding-top: 40px; }
.page-title {
  margin: 4px 0 10px;
  color: var(--ink);
  font: 700 36px/1.04 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.page-home .page-title { font-size: 30px; margin: 0 0 6px; }
.page-home .page-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 10px;
  background: var(--accent);
}
.group-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 14px;
  color: var(--muted);
  font: 700 12px/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.group-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.page-title + .race-group > .group-title { margin-top: 22px; }
.page-title + .race-group > .race-grid:first-child { margin-top: 22px; }
.group-title a {
  margin: -8px 0; /* 8px padding: a taller tap target without moving anything */
  padding: 8px 0;
  color: var(--ink);
  font: 700 22px/1.1 var(--font-display);
  letter-spacing: .01em;
  text-decoration: none;
}
.group-title a:hover { color: var(--accent-text); }
.notice {
  margin: 0 0 28px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-weight: 600;
}
.empty { max-width: 560px; margin: 0 auto; padding: 72px 0; text-align: center; }
.empty::before { content: ""; display: block; width: 56px; height: 4px; margin: 0 auto 22px; background: var(--stripe); }
.empty h1, .empty h2 {
  margin: 0 0 10px;
  font: 700 32px/1.1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.empty p { margin: 0; color: var(--muted); text-wrap: balance; }
.empty a { display: inline-flex; align-items: center; min-height: 40px; color: var(--accent-text); font-weight: 700; text-underline-offset: 3px; }
.crumbs {
  margin: -6px 0 0; /* offsets the taller tap target so the title doesn't move down */
  font: 700 12px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--muted);
  text-decoration: none;
}
.crumbs a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.crumbs a:hover { color: var(--accent-text); }

/* ---------------------------------------------------------------- race cards (home) */
.race-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.race-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0; /* grid item: let the no-wrap card lines shrink instead of widening the track */
  padding: 18px 20px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.race-card::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 3px;
  background: var(--accent);
  border-radius: var(--radius) var(--radius) 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
.race-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.race-card:hover::before, .race-card:focus-visible::before { transform: scaleX(1); }
.race-card-title {
  font: 700 23px/1.08 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.race-card-meta {
  margin: 6px 0 12px;
  color: var(--muted);
  font: 600 11.5px/1.3 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* label | name | school (truncates first) | time or points, flush right.
   The time/points never shrink; the school gives way before the name does. */
.race-card-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.race-card-line .lbl {
  flex: none;
  min-width: 44px;
  color: var(--accent-text);
  font: 700 11px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.race-card-line .nm,
.race-card-line .sch { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.race-card-line .nm { flex: 0 1 auto; }
.race-card-line .sch { flex: 0 1000 auto; font-weight: 400; }
.race-card-line .time,
.race-card-line .pts {
  flex: none;
  margin-left: auto;
  padding-left: 8px;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.race-card-updated {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

/* ---------------------------------------------------------------- race page */
.race-head .page-title { margin-bottom: 8px; }
.race-head p { margin: 0 0 4px; font-size: 14px; }
.tabs {
  display: flex;
  gap: 4px;
  margin: 22px 0 20px;
  box-shadow: inset 0 -1px 0 var(--line); /* tab underlines paint over this hairline */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 3px 16px 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font: 600 16px/1 var(--font-display);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.tab:focus-visible { outline-offset: -2px; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.filters input,
.filters select,
.big-search input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--ink);
  font: 400 15px/1.2 var(--font-body);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.filters input, .big-search input {
  padding-left: 40px;
  background-image: var(--icon-search);
  background-repeat: no-repeat;
  background-position: 13px 50%;
  background-size: 18px 18px;
}
.filters input { flex: 1 1 260px; min-width: 0; }
.filters select {
  flex: 0 1 260px;
  min-width: 0;
  padding-right: 38px;
  background-image: var(--icon-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.filters input::placeholder, .big-search input::placeholder { color: var(--muted); opacity: 1; }
/* the browser's clear button: theme grey instead of the default (blue in light mode) */
.filters input::-webkit-search-cancel-button,
.big-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  background: var(--icon-clear) center / 14px 14px no-repeat;
  cursor: pointer;
}
.filters input:hover, .filters select:hover, .big-search input:hover { border-color: var(--muted); }
.filters input:focus, .filters select:focus, .big-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* results tables: on phones the table scrolls inside its own box (both axes) so the
   header can stay sticky; from 720px up the box is unclipped and the header sticks
   to the viewport. */
.table-scroll {
  position: relative;
  /* scroll cue: an edge shadow shows on any side with more columns to scroll to.
     The surface-coloured covers scroll with the content and hide the shadow at the ends. */
  background:
    linear-gradient(90deg, var(--surface) 40%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 40%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 14px 100% no-repeat scroll,
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: auto;
  max-height: 78vh;
  max-height: 78svh;
  scroll-padding-top: 40px; /* focus scrolling clears the sticky header row */
  -webkit-overflow-scrolling: touch;
}
table.results {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
  line-height: 1.35;
}
.results th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 11px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font: 700 11px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.results td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.results tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) {
  .results tbody tr:hover td { background: var(--hover); } /* no sticky tap-highlight on phones */
}
.results .num, .results th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.results td.num:first-child {
  font: 600 17px/1 var(--font-display);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.results .name { color: var(--ink); font-weight: 600; }
.results .school a { color: var(--ink-2); text-decoration: none; }
.results td a { color: var(--ink); text-decoration: none; }
.results td:not(.school) a { font-weight: 600; }
.results td a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.results .time { color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.results td.muted { color: var(--muted); }
.status {
  display: inline-block;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--muted);
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.no-match { margin: 0; padding: 18px 16px; color: var(--muted); text-align: center; }

/* ---------------------------------------------------------------- chips & team scores */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 600 15px/1 var(--font-display);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--ink); }
.chip.on, .chip.on:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.section-title {
  margin: 0 0 12px;
  font: 700 20px/1.1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.team-section > p.muted { margin: 0 0 14px; font-size: 14px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.team-card header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.team-place {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 34px;
  height: 34px;
  padding: 0 4px;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--brand-ink);
  font: 700 19px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.team-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: -8px 0; /* taller tap target, same layout */
  padding: 8px 0;
  overflow: hidden;
  color: var(--ink);
  font: 700 20px/1.15 var(--font-display);
  letter-spacing: .015em;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.team-name:hover { color: var(--accent-text); }
.team-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex: none;
  color: var(--ink);
  font: 700 30px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.team-score small {
  color: var(--muted);
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.team-runners { flex: 1 1 auto; margin: 0; padding: 8px 0; list-style: none; font-size: 14px; }
.team-runners li { display: flex; align-items: baseline; gap: 12px; padding: 5px 16px; }
.team-runners li:not(.displacer) + li.displacer { margin-top: 4px; padding-top: 9px; border-top: 1px dashed var(--line-strong); }
.tr-place {
  flex: none;
  width: 38px;
  color: var(--ink);
  font: 600 15px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tr-name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tr-name .muted { margin-left: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; }
.tr-time { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.team-runners li.displacer, .team-runners li.displacer .tr-place { color: var(--muted); }
.team-runners li.displacer .tr-name { font-weight: 400; }
.team-card footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 8px;
  padding: 10px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 600 11.5px/1.3 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.legend { margin: 18px 0 0; font-size: 13px; }

/* ---------------------------------------------------------------- printout */
.printout-actions { margin: 0 0 12px; }
.printout-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 600 15px/1 var(--font-display);
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
}
.printout-actions a::before { content: "\2193"; font: 700 15px/1 var(--font-body); color: var(--accent-text); }
.printout-actions a:hover { border-color: var(--accent); color: var(--accent-text); }
.printout {
  margin: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font: 12.5px/1.5 var(--font-mono);
  overflow-x: auto;
  tab-size: 8;
}

/* ---------------------------------------------------------------- pager */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: calc(50% - 6px);
  min-height: 44px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font: 600 17px/1.15 var(--font-display);
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .15s, box-shadow .15s;
}
.pager a::before {
  color: var(--muted);
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .14em;
}
.pager a:first-child::before { content: "Previous race"; }
.pager a:last-child::before { content: "Next race"; }
.pager a:last-child { align-items: flex-end; margin-left: auto; text-align: right; }
.pager a:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }

/* ---------------------------------------------------------------- search & school */
.big-search { margin: 8px 0 26px; }
.big-search input {
  width: 100%;
  max-width: 560px;
  height: 52px;
  padding-left: 46px;
  background-position: 15px 50%;
  background-size: 20px 20px;
  font-size: 17px;
}
.school-race { margin: 0 0 8px; }
/* every race on a school page is its own table: fixed columns keep them on one grid */
table.school-table { table-layout: fixed; }
.school-table .c-pl { width: 72px; }
.school-table .c-gr { width: 64px; }
.school-table .c-time { width: 112px; }
.school-table .c-team { width: 80px; }
.team-line { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.team-line strong {
  color: var(--accent-text);
  font: 700 17px/1 var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 22px;
  padding-bottom: 40px;
  color: var(--muted);
  font-size: 13px;
  /* hairline aligned to the content edge, not the padded box */
  background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.site-footer span:first-child {
  color: var(--ink);
  font: 700 14px/1.3 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- admin helpers
   admin.html hard-codes red/amber for errors; these slightly more specific rules
   swap in mode-aware colours so they stay readable in dark mode. */
body .btn.danger, body .log .err { color: var(--danger); }
body .warn { color: var(--warn); }
body .btn.primary:hover { filter: brightness(1.12); }
/* match the theme's 4px corner system and give admin fields a 3:1 boundary */
body .btn { border-radius: var(--radius); }
body input[type=text], body input[type=password], body textarea { border-color: var(--field-line); border-radius: var(--radius); }
body input[type=text]:focus, body input[type=password]:focus, body textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* ---------------------------------------------------------------- responsive */
@media (min-width: 720px) {
  :root { --gutter: 24px; }
  .table-scroll { overflow: visible; max-height: none; background: var(--surface); }
  /* keyboard focus scrolling keeps links clear of the sticky table header */
  html { scroll-padding-top: 44px; }
  .results thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
  .results thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
  /* the box is unclipped here, so round the last row's cells too (hover tint) */
  .results tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius) - 1px); }
  .results tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius) - 1px); }
}
/* below ~1180px a centred crop slices through the tree cluster at the art's right
   edge; anchor the crop toward the right so the cluster sits fully in frame.
   On phones the hero is too short for the cluster to clear the stats box, so
   it goes fully off-frame instead (no sliver at the edge). */
@media (max-width: 1180px) {
  .hero-art { background-position: 85% bottom; }
}
@media (max-width: 640px) {
  .hero-art { background-position: 40% bottom; }
}
/* below 1000px the text spans most of the hero, so the scrim runs top-to-bottom */
@media (max-width: 1000px) {
  .hero-art::after {
    background: linear-gradient(180deg, rgba(24, 10, 4, .82) 0%, rgba(24, 10, 4, .7) 58%, rgba(24, 10, 4, .36) 100%);
  }
}
@media (max-width: 640px) {
  .site-header .wrap { gap: 10px; padding-top: 10px; padding-bottom: 14px; }
  img.brand-mark { width: 40px; height: 40px; }
  .brand { gap: 12px; }
  .brand-name { font-size: 18px; }
  .brand-sub { font-size: 10.5px; letter-spacing: .12em; }
  .header-search { flex: 1 1 100%; }
  .header-search input,
  .filters input,
  .filters select,
  .big-search input { font-size: 16px; } /* 16px stops iOS zooming on focus */
  .hide-sm { display: none; }

  .hero-inner { min-height: 0; padding-top: 26px; padding-bottom: 26px; }
  .hero-kicker { margin-bottom: 10px; font-size: 11px; letter-spacing: .18em; }
  .hero-kicker::before { width: 20px; }
  .hero-facts { margin-top: 10px; font-size: 12px; letter-spacing: .1em; }
  .hero-facts span + span::before { margin: 0 9px; }
  .hero-stats { margin-top: 16px; }
  .hero-stats span { padding: 8px 14px; font-size: 10.5px; }
  .hero-stats strong { font-size: 24px; }

  main { padding-top: 22px; padding-bottom: 40px; }
  .page-home main { padding-top: 28px; }
  .page-title { font-size: 29px; }
  .page-home .page-title { font-size: 26px; }
  .group-title { margin-top: 28px; }
  .race-grid, .team-grid { grid-template-columns: 1fr; gap: 12px; }
  .race-card { padding: 16px 16px 12px; }
  .tabs { margin-top: 18px; margin-bottom: 16px; }
  .tab { padding: 3px 12px 0; font-size: 15px; }
  .filters select { flex: 1 1 100%; }
  .results td, .results th { padding-left: 6px; padding-right: 6px; }
  .results td:first-child, .results th:first-child { padding-left: 8px; }
  .results td:last-child, .results th:last-child { padding-right: 8px; }
  .results td { padding-top: 10px; padding-bottom: 10px; }
  table.results { font-size: 14px; }
  .results .th-long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .results .th-short { display: inline; }
  .status { padding: 2px 4px; font-size: 10px; letter-spacing: .04em; }
  .school-table .c-pl { width: 48px; }
  .school-table .c-gr { width: 40px; }
  .school-table .c-time { width: 84px; }
  .school-table .c-team { width: 46px; }
  .team-card header { padding: 12px 14px; }
  .team-runners li { padding-left: 14px; padding-right: 14px; }
  .team-card footer { padding: 10px 14px; font-size: 11px; letter-spacing: .03em; }
  .printout { padding: 14px; font-size: 12px; }
  .pager a { padding: 10px 12px; font-size: 15px; }
}
/* small phones (360px): a little more room so results tables still fit without scrolling */
@media (max-width: 380px) {
  .results td, .results th { padding-left: 5px; padding-right: 5px; }
  .results td:first-child, .results th:first-child { padding-left: 8px; }
  .results td:last-child, .results th:last-child { padding-right: 8px; }
  .status { padding: 2px 3px; letter-spacing: 0; }
}

/* ---------------------------------------------------------------- user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
/* Windows high-contrast: state shown by colour alone needs a non-colour cue */
@media (forced-colors: active) {
  .tab.on { border-bottom-color: Highlight; }
  .chip.on { outline: 2px solid Highlight; outline-offset: 1px; }
  .site-header::after, .hero-kicker::before { background: CanvasText; }
}

/* ---------------------------------------------------------------- print */
@media print {
  @page { margin: 12mm; }
  /* force light tokens even when the OS is in dark mode (same selectors as the
     dark blocks so these win on source order) */
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --bg: #fff; --surface: #fff; --surface-2: #fff; --hover: #fff; --row-alt: #fff;
    --ink: #000; --ink-2: #000; --muted: #333; --accent-text: #000;
    --line: #999; --line-strong: #666; --field-line: #666;
    --shadow-sm: none; --shadow-md: none;
    color-scheme: light;
  }
  .site-header, .hero, .header-search, .tabs, .filters, .pager, .site-footer,
  .chips, .printout-actions, .crumbs { display: none !important; }
  .panel[hidden] { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .wrap { max-width: none; padding: 0; }
  main { padding: 0; min-height: 0; }
  .page-title { color: #000; font-size: 20pt; }
  .page-home .page-title::after, .empty::before { display: none; }
  .muted, .legend, .team-line, .race-head p { color: #333 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  .table-scroll { overflow: visible !important; max-height: none !important; border: 0; border-radius: 0; background: none; box-shadow: none; }
  table.results { font-size: 9.5pt; }
  .results thead { display: table-header-group; }
  .results tr { break-inside: avoid; }
  .results th { position: static; padding: 4pt 6pt; background: none !important; color: #000; border-bottom: 1.5pt solid #000; }
  .results td.num:first-child { font-size: 10.5pt; }
  .results td { padding: 3pt 6pt; color: #000 !important; background: none !important; border-bottom: .5pt solid #999; }
  .status { border-color: #666; color: #000; }
  .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; }
  .team-card { break-inside: avoid; background: none; border: .75pt solid #999; box-shadow: none; }
  .team-card header, .team-card footer { background: none; border-color: #999; }
  .team-place { background: none !important; color: #000 !important; border: 1pt solid #000; }
  .team-name, .team-score, .tr-place, .team-runners li { color: #000 !important; }
  .printout { padding: 0; border: 0; background: none; color: #000; font-size: 8.5pt; white-space: pre-wrap; }
  .race-card, .notice { background: none; border-color: #999; box-shadow: none; break-inside: avoid; }
  .race-card::before { display: none; }
}

/* ==========================================================================
   v2: year-aware pages - header menu, archive bar, meet information, race
   schedule, print buttons, year chips, archive and search by year.
   ========================================================================== */
:root {
  --icon-newtab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3H3v10h10v-3M9 2h5v5M14 2 7 9'/%3E%3C/svg%3E");
  --icon-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 6V1.5h8V6M4 12H1.5V6h13v6H12'/%3E%3Cpath d='M4 9.5h8v5H4z'/%3E%3C/svg%3E");
}

/* ---- header menu: inline between the brand and the search on wide screens,
   its own sideways-scrolling row below the search on narrower ones */
.site-header .brand { order: 0; }
.site-header .header-search { order: 2; }
.site-nav { order: 3; flex: 1 1 100%; min-width: 0; margin: -2px 0 -4px; }
.site-nav ul {
  display: flex;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.site-nav ul::-webkit-scrollbar { display: none; }
/* positioned, so the absolutely placed sr-only "(opens in a new tab)" note stays
   inside the scrolling row instead of widening the page */
.site-nav li { position: relative; flex: none; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  border-bottom: 2px solid transparent;
  color: var(--header-muted);
  font: 600 12.5px/1.2 var(--font-body);
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
/* a long link title ends in "…" so five links and Archive usually share one row */
.site-nav .nav-t { min-width: 0; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.site-nav a:hover { color: var(--header-ink); border-bottom-color: rgba(255, 255, 255, .45); }
.site-nav a[aria-current="page"] { color: var(--header-ink); border-bottom-color: var(--fall-orange); }
.site-nav a:focus-visible { outline-color: var(--header-focus); outline-offset: 2px; }
/* "opens in a new tab" arrow */
.site-nav a[target="_blank"]::after,
.link-card.is-new-tab .link-title::after {
  content: "";
  flex: none;
  display: inline-block;
  width: .85em;
  height: .85em;
  background: currentColor;
  -webkit-mask: var(--icon-newtab) center / contain no-repeat;
  mask: var(--icon-newtab) center / contain no-repeat;
  opacity: .75;
}
/* tablets and up: a menu on its own row wraps instead of scrolling (mouse friendly) */
@media (min-width: 641px) {
  .site-nav ul { flex-wrap: wrap; overflow: visible; }
  .site-nav:not([data-inline]) a { min-height: 34px; }
}
/* wide screens: a short menu (data-inline, set by render.js) sits between the
   brand and the search; it scrolls rather than squeezing the brand */
@media (min-width: 1100px) {
  .site-header .wrap:has(.site-nav[data-inline]) { flex-wrap: nowrap; }
  .site-header .wrap:has(.site-nav[data-inline]) .brand { flex: none; }
  .site-nav[data-inline] { order: 1; flex: 1 1 auto; margin: 0; }
  /* items shrink to "…" before the row overflows; the auto margin (not
     justify-content: flex-end) keeps any overflow on the right, where it can scroll */
  .site-nav[data-inline] ul { flex-wrap: nowrap; overflow-x: auto; }
  .site-nav[data-inline] li { flex: 0 1 auto; min-width: 0; }
  .site-nav[data-inline] li:first-child { margin-left: auto; }
  .site-nav[data-inline] li:last-child { flex-shrink: 0; } /* Archive */
  .site-nav[data-inline] a { max-width: 100%; }
  .site-header .wrap:has(.site-nav[data-inline]) .header-search { flex: 0 0 260px; }
}
@media (max-width: 640px) {
  /* full-bleed scrolling row: items start at the gutter and run to the screen edge */
  .site-nav { margin: -4px calc(-1 * var(--gutter)) -6px; }
  .site-nav ul {
    gap: 8px;
    padding: 0 var(--gutter);
    scroll-padding: 0 var(--gutter);
    /* fade at the right edge: more menu items are a swipe away */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .site-nav a {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--radius);
    font-size: 12px;
  }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-color: rgba(255, 255, 255, .6); }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--fall-orange); }
}

/* ---- archived year: a bar under the masthead */
.archive-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.archive-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.archive-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font: 700 13px/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.archive-marker::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
  border-radius: 2px;
}
.archive-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  color: var(--accent-text);
  font: 700 14px/1.2 var(--font-body);
  text-decoration: none;
}
.archive-current:hover { text-decoration: underline; text-underline-offset: 3px; }

/* hero facts never break inside one fact ("9:30 AM"); the box wraps between facts instead */
.hero-stats { flex-wrap: wrap; max-width: 100%; }
.hero-stats span { white-space: nowrap; }
.hero-stats .hide-sm { display: inline; margin-left: -4px; padding: 0; border: 0; font: inherit; letter-spacing: inherit; color: inherit; }
@media (max-width: 640px) { .hero-stats .hide-sm { display: none; } }

/* ---- shared bits */
.section-lede { margin: 0 0 18px; font-size: 14.5px; }
.page-home .page-title + .section-lede { margin-top: 12px; }
.badge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 4px 8px 3px;
  border-radius: 3px;
  background: var(--brand);
  color: var(--brand-ink);
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.pending-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-text);
  font: 700 11.5px/1.2 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pending-label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

/* ---- print buttons: quiet secondary links to the print views */
.race-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.btn-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 600 14.5px/1 var(--font-display);
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.btn-print::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon-print) center / contain no-repeat;
  mask: var(--icon-print) center / contain no-repeat;
  color: var(--muted);
}
.btn-print:hover { border-color: var(--accent); color: var(--accent-text); }
.btn-print:hover::before { color: var(--accent-text); }
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px 16px;
}
.results-head .race-actions { margin: 0 0 6px; }
.race-head + .race-actions { margin-top: 12px; }
.race-head + .race-actions + .school-race .group-title { margin-top: 28px; }

/* ---- meet information */
.meet-info { margin: 0 0 40px; }
.meet-info .page-title { margin-bottom: 18px; }
.link-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-item { display: flex; min-width: 0; }
.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 14px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.link-card:hover { border-color: var(--line-strong); border-left-color: var(--accent); box-shadow: var(--shadow-md); }
.link-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.link-type {
  padding: 3px 7px 2px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--accent-text);
  font: 700 10.5px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.link-size { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 700 21px/1.1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.link-card.is-new-tab .link-title::after { width: 14px; height: 14px; color: var(--muted); opacity: 1; }
.link-desc { color: var(--muted); font-size: 14px; line-height: 1.45; }

/* ---- race cards: upcoming (placeholder) races */
.race-card.is-pending { background: var(--surface); border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
.race-card.is-pending:hover { border-style: solid; }
.race-card.is-pending .race-card-meta { margin-bottom: 14px; color: var(--ink-2); }
.race-card.is-pending .race-card-updated { color: inherit; }

/* ---- race schedule (a year with no results yet) */
.race-schedule .page-title + .section-lede { margin-top: 12px; }
.schedule { margin: 0; padding: 0; list-style: none; }
.schedule li { margin: 0 0 10px; break-inside: avoid; }
.schedule .race-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 18px;
  padding: 14px 18px;
}
.schedule:not(.has-times) .race-card { grid-template-columns: 34px minmax(0, 1fr) auto; }
.sched-time {
  color: var(--ink);
  font: 700 21px/1 var(--font-display);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sched-time .muted { font: 700 11px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.sched-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font: 700 17px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.sched-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.schedule .race-card-title { font-size: 21px; }
.schedule .race-when {
  color: var(--muted);
  font: 600 11.5px/1.3 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .schedule { columns: 2; column-gap: 16px; }
}
/* pending races aren't links */
.race-card.is-pending, .race-card.is-pending:hover { cursor: default; transform: none; border-style: dashed; }
/* a finished race on the meet-day schedule: the tag beside the name, winner and
   top team below at full width */
.schedule .race-card.is-done { align-items: start; border-style: solid; grid-template-columns: 96px minmax(0, 1fr); }
.schedule:not(.has-times) .race-card.is-done { grid-template-columns: 34px minmax(0, 1fr); }
.schedule .is-done .sched-time { padding-top: 2px; }
.schedule .is-done .sched-main { display: block; }
.sched-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sched-head .fresh-tag, .sched-head .done-label { margin-left: auto; }
.sched-lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-top: 8px; }
.sched-lines .race-card-line { margin: 0; }
.done-label {
  align-self: center;
  color: var(--accent-text);
  font: 700 11.5px/1.2 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- "Results are in": results posted in the last 20 minutes (isFresh in
   lib/render.js); public/site.js flips cards to this live, with no pop-up */
.fresh-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 12.5px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.fresh-tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
button.fresh-tag { cursor: pointer; }
button.fresh-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.schedule .fresh-tag { align-self: center; }
.page-title .fresh-tag { margin-left: 8px; font-size: 13px; transform: translateY(-3px); }
.race-card.is-fresh {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px -10px rgba(224, 98, 31, .6);
}
/* the race name glows */
.race-card.is-fresh .race-card-title,
.page-title.is-fresh { animation: xc-glow 2.4s ease-in-out infinite; }
@keyframes xc-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(240, 180, 60, 0); }
  50% { text-shadow: 0 0 14px rgba(240, 180, 60, .9), 0 0 3px rgba(224, 98, 31, .55); }
}
/* the moment it flips on an open page */
.race-card.just-in { animation: xc-arrive 1.4s ease-out 1; }
@keyframes xc-arrive {
  0% { transform: scale(1.015); box-shadow: 0 0 0 3px var(--fall-gold), 0 0 28px rgba(240, 180, 60, .7); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .race-card.is-fresh .race-card-title, .page-title.is-fresh, .race-card.just-in { animation: none; }
  .race-card.is-fresh .race-card-title, .page-title.is-fresh { text-decoration: underline 3px var(--fall-gold); text-underline-offset: 5px; }
}

@media (max-width: 640px) {
  .schedule .race-card { grid-template-columns: 72px minmax(0, 1fr); gap: 6px 14px; padding: 12px 14px; }
  .schedule:not(.has-times) .race-card { grid-template-columns: 34px minmax(0, 1fr); }
  .schedule .pending-label, .schedule .done-label, .schedule .fresh-tag { grid-column: 2; justify-self: start; }
  .sched-time { font-size: 19px; }
  .schedule .race-card-title { font-size: 19px; }
}

/* ---- placeholder race page */
.race-kicker {
  margin: 4px 0 6px;
  color: var(--muted);
  font: 700 12px/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.race-head .race-kicker + .page-title { margin-top: 0; }
.race-pending {
  max-width: 640px;
  margin: 22px 0 0;
  padding: 26px 26px 22px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.race-pending h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  color: var(--accent-text);
  font: 700 15px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.race-pending h2::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
}
.race-pending .race-when {
  margin: 0 0 12px;
  color: var(--ink);
  font: 700 30px/1.1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.race-pending-text { margin: 0 0 6px; color: var(--muted); }
.race-pending p:last-child { margin: 0; }
.race-pending-back {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--accent-text);
  font-weight: 700;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .race-pending { padding: 20px 18px 16px; }
  .race-pending .race-when { font-size: 25px; }
}

/* ---- year chips (home) */
.year-chips { margin: 44px 0 0; }
.year-chips .group-title { margin-top: 0; }
.year-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.year-list .chip { gap: 10px; font-size: 17px; }
.chip-note {
  font: 700 10px/1 var(--font-body);
  letter-spacing: .12em;
  opacity: .8;
}
.year-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 8px;
  color: var(--accent-text);
  font: 700 14px/1.2 var(--font-body);
  text-decoration: none;
}
.year-all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- archive: a table whose rows are cards */
table.archive-table { display: block; width: 100%; margin-top: 8px; border-collapse: separate; }
.archive-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.archive-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "year year" "name name" "facts facts" "races fin";
  align-content: start;
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.archive-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.archive-card.is-current { border-top: 3px solid var(--accent); padding-top: 16px; }
.archive-card td { display: block; padding: 0; }
.archive-year { grid-area: year; display: flex !important; align-items: center; }
.archive-year a {
  color: var(--ink);
  font: 700 46px/1 var(--font-display);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
/* the whole card is the link */
.archive-year a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.archive-year a:focus-visible { outline: none; }
.archive-year a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.archive-card:hover .archive-year a { color: var(--accent-text); }
.archive-name {
  grid-area: name;
  margin-top: 8px;
  color: var(--ink);
  font: 700 18px/1.15 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.archive-facts { grid-area: facts; margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.archive-races, .archive-finishers {
  display: flex !important;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 12px !important;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 700 11px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.archive-races { grid-area: races; padding-right: 18px !important; }
.archive-finishers { grid-area: fin; }
.archive-card strong {
  margin-right: 6px;
  color: var(--ink);
  font: 700 26px/1 var(--font-display);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.archive-card .pending-label { align-self: flex-end; margin-bottom: 2px; font-size: 11px; }

/* ---- search by year */
.big-search { margin-bottom: 14px; }
.search-years .chips { margin-bottom: 26px; }
.search-group { margin: 0 0 44px; }
.search-year {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font: 700 34px/1 var(--font-display);
  letter-spacing: .01em;
}
.search-year a { color: inherit; text-decoration: none; }
.search-year a:hover { color: var(--accent-text); }
.search-count {
  margin-left: auto;
  padding-left: 12px;
  color: var(--muted);
  font: 600 12px/1.2 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.search-group .group-title { margin-top: 22px; }

@media (max-width: 640px) {
  .results-head { align-items: flex-start; flex-direction: column; }
  .results-head .race-actions { margin: 10px 0 0; }
  .meet-info { margin-bottom: 32px; }
  .archive-year a { font-size: 40px; }
  .search-year { font-size: 30px; }
  .search-count { flex-basis: 100%; margin-left: 0; padding: 6px 0 0; }
}

@media (forced-colors: active) {
  .archive-marker::before, .pending-label::before, .race-pending h2::before { border-color: CanvasText; }
  .site-nav a[aria-current="page"] { border-bottom-color: Highlight; }
}

@media print {
  .site-nav, .archive-bar, .year-chips, .race-actions, .btn-print, .meet-info, .search-years { display: none !important; }
  .race-card.is-pending, .race-pending, .archive-card { background: none; border-color: #999; box-shadow: none; }
}