/*
 * The website (/home, /results, /racers, /how-to-play, /faq, /support, /about, /fair-play), drawn by
 * src/site/. Plain CSS, no JavaScript. Colours and shapes copied from src/ui/theme/tokens.css
 * ("Hard Pastel": warm paper cards, crisp 2px borders, solid offset shadows, coral accent); keep
 * them in step. Fonts: public/fonts/ (latin subsets of the game's Oswald and Nunito).
 *
 * Building blocks for page markup:
 *   .page-head (h1 + .lead)   .section (+ .section__head: h2 + .more link)   .card   .grid--2/3/4
 *   .btn (.btn--play coral, .btn--quiet, .btn--glass and .pill--glass on dark images)   .prose (long text: h2, h3, p, ul, ol, kbd)
 *   .faq > details.faq__item > summary   .steps > li (.steps--shots: screenshot + .steps__text)   .stats > .stat (.stat__num, .stat__label)
 *   .table (results)   .place (.place--1/2/3)   .carchip (a run's car + hover card)   .pill   .empty   .callout   .cars > .car
 *   .posts > .post-card, .post, .post-meta (updates)
 *   .band (closing call to action with the in-game shot, drawn by playBand() in src/site/parts.ts)
 */
@font-face {
  font-family: 'Oswald';
  src: url('/fonts/oswald.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --cream: #f7ecdb;
  --cream-2: #f0e1c9;
  --paper: #fffaf2;
  --line: #e3cfae;
  --line-strong: #c9ad84;
  --ink: #2b211a;
  --ink-2: #5e4d3e;
  --ink-3: #8c7966;
  --tomato: #ff5f45;
  --tomato-d: #d23f27;
  --tomato-l: #ffe1d9;
  --mustard: #ffb627;
  --mustard-l: #ffefc7;
  --meadow: #1fb386;
  --meadow-d: #0f8a64;
  --meadow-l: #d3f4e6;
  --sky: #3fa7e0;
  --sky-l: #dbeffa;
  --plum: #8a5cf6;
  --plum-l: #ebe2fe;
  --silver: #c3cdd6;
  --bronze: #e39a5f;
  --shadow-ink: rgba(70, 45, 20, 0.22);
  --display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --ui: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1120px;
  --gutter: 16px;
}

* { box-sizing: border-box; }

html { background: var(--cream); scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.6 var(--ui);
  -webkit-text-size-adjust: 100%;
}

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

a { color: var(--tomato-d); text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
a:focus-visible, .btn:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

h1, h2, h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}
h1 { font-size: clamp(36px, 6vw, 56px); }
h2 { font-size: clamp(24px, 3.4vw, 32px); }
h3 { font-size: 20px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  /* Pulled back over its own pixel: in a 0-wide cell (the board's hover buttons) it would stick
   * out and make the table scroll sideways. */
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--shadow-ink);
  color: var(--ink);
  font: 600 17px/1 var(--display);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 110ms, box-shadow 110ms;
}
.btn:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 5px 0 var(--shadow-ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow-ink); }
.btn--play { border-color: var(--tomato-d); background: var(--tomato); color: #fff; box-shadow: 0 4px 0 var(--tomato-d); }
.btn--play:hover { color: #fff; box-shadow: 0 5px 0 var(--tomato-d); }
.btn--play:active { box-shadow: 0 1px 0 var(--tomato-d); }
.btn--big { min-height: 56px; padding: 12px 28px; font-size: 22px; }
.btn--small { min-height: 34px; padding: 4px 14px; font-size: 15px; }
/* In a table row, next to the ghost / watch buttons (same height). */
.btn--tiny { min-height: 28px; gap: 5px; padding: 2px 10px; border-width: 2px; border-radius: 6px; font-size: 14px; box-shadow: 0 2px 0 var(--shadow-ink); }
.btn--tiny:hover { box-shadow: 0 3px 0 var(--shadow-ink); }
.btn--quiet { background: transparent; box-shadow: none; }
.btn--quiet:hover { box-shadow: none; background: var(--paper); }

/* ---------------------------------------------------------------- top bar */

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 2px solid var(--line);
  background: rgba(255, 250, 242, 0.96);
}
.top__in {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px var(--gutter);
}
.top__logo img { display: block; width: 128px; height: auto; }
.top__nav { display: flex; gap: 4px 18px; flex-wrap: wrap; margin-right: auto; font-weight: 800; }
.top__nav a { color: var(--ink-2); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.top__nav a:hover { color: var(--ink); }
.top__nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--tomato); }
.top__play { min-height: 40px; padding: 6px 16px; }

@media (max-width: 860px) {
  .top__in { flex-wrap: wrap; gap: 8px 16px; padding-bottom: 6px; }
  .top__logo { margin-right: auto; }
  .top__nav {
    order: 3;
    width: 100%;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: calc(100% + 2 * var(--gutter));
  }
  .top__nav a { white-space: nowrap; }
}

/* ---------------------------------------------------------------- page */

.main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 24px var(--gutter) 64px;
}

.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.crumbs li + li::before { content: '/'; margin-right: 4px; color: var(--line-strong); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.page-head { margin: 8px 0 28px; }
.page-head h1 { margin-bottom: 8px; }
/* Title on the left, a Play button on the right (a day's results); stacked on phones. */
.page-head--play { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.page-head--play h1 { margin-bottom: 0; }
.lead { max-width: 680px; margin: 0; color: var(--ink-2); font-size: 18px; }
.muted { color: var(--ink-3); }
.lead--gap { margin-bottom: 20px; }
.lead--full { max-width: none; }
/* /home: text and numbers on the left, the islands cut like a pizza on the right (below on phones). */
.islands { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; align-items: center; }
.islands .stats { margin-bottom: 0; }
.islands .stat { flex-basis: calc(50% - 1px); }
.islands-art { display: block; width: 100%; height: auto; }
@media (max-width: 800px) {
  .islands { grid-template-columns: 1fr; gap: 24px; }
  .islands-art { width: min(420px, 90%); margin: 0 auto; }
}
.after { margin: 16px 0 0; }
.kicker { margin: 0 0 6px; color: var(--tomato-d); font: 600 15px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }

.section { margin: 48px 0 0; }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.section__head h2 { margin: 0; }
.more { flex: none; }

.card {
  padding: 20px 24px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--shadow-ink);
}
.card > :last-child { margin-bottom: 0; }
.card--flush { padding: 0; overflow: hidden; }
.card h3 { margin-bottom: 6px; }
.card p { margin: 0 0 12px; color: var(--ink-2); }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.pill {
  display: inline-block;
  padding: 2px 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.pill--live { border-color: var(--meadow); background: var(--meadow-l); color: var(--meadow-d); }
.pill--paid { border-color: var(--mustard); background: var(--mustard-l); color: #8a5a00; }
.pill--free { border-color: var(--meadow); background: var(--meadow-l); color: var(--meadow-d); }

.empty { padding: 28px 24px; border: 2px dashed var(--line-strong); border-radius: 12px; color: var(--ink-2); text-align: center; }
.empty p { margin: 0 0 12px; }
.empty p:last-child { margin: 0; }

.callout { padding: 14px 18px; border: 2px solid var(--sky); border-radius: 10px; background: var(--sky-l); }
.callout > :last-child { margin-bottom: 0; }
.callout--warn { border-color: var(--mustard); background: var(--mustard-l); }

/* ---------------------------------------------------------------- hero (/home) */

/* Full width above the page column: an in-game shot, a dark warm fade on the left for the copy,
   and a low-poly mountain ridge in the page colour along the bottom (public/site/hero-ridge.svg,
   scripts/hero-ridge.mjs) where the shot ends and the page begins. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 82vh, 860px);
  overflow: hidden;
  background: #2a1d14;
  color: #fffaf2;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(26, 17, 11, 0.9) 0%, rgba(26, 17, 11, 0.74) 30%, rgba(26, 17, 11, 0.3) 52%, rgba(26, 17, 11, 0) 68%),
    linear-gradient(180deg, rgba(26, 17, 11, 0.45) 0%, rgba(26, 17, 11, 0) 22%);
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: -1;
  height: clamp(36px, 4.5vw, 96px);
  background: url('/site/hero-ridge.svg') 50% 100% / cover no-repeat;
  pointer-events: none;
}
.hero__in { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) clamp(80px, 8vw, 140px); }
.hero__copy { max-width: 560px; }
.hero h1 { font-size: clamp(52px, 8.5vw, 112px); line-height: 0.92; margin-bottom: 20px; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); }
.hero h1 em { color: var(--tomato); font-style: normal; }
.hero .lead { margin-bottom: 28px; color: #f3e6d3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.hero__note { margin: 0; color: #e0cfb6; font-size: 14px; }
@media (max-width: 700px) {
  /* Phones: the car in the top half, the copy on a fade from the bottom. */
  .hero { align-items: flex-end; min-height: 640px; }
  .hero__bg img { height: 58%; object-position: 70% 50%; }
  .hero::before {
    background: linear-gradient(0deg, #2a1d14 0%, #2a1d14 46%, rgba(42, 29, 20, 0.85) 54%, rgba(42, 29, 20, 0) 74%);
  }
  .hero__in { padding: 0 var(--gutter) 60px; }
}

/* Light-on-dark versions of the button and the pill, for the hero and the band. */
.btn--glass { border-color: rgba(255, 250, 242, 0.7); background: rgba(255, 250, 242, 0.12); color: #fffaf2; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.btn--glass:hover { color: #fffaf2; background: rgba(255, 250, 242, 0.22); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); }
.btn--glass:active { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.pill--glass { border-color: rgba(255, 250, 242, 0.45); background: rgba(26, 17, 11, 0.35); color: #fffaf2; }

/* ---------------------------------------------------------------- stats */

/* One strip, the numbers split by thin rules (the gaps show the strip's line colour); a row that
 * wraps fills its width, so no empty cell shows. */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--line);
  overflow: hidden;
}
.stat { flex: 1 1 130px; padding: 12px 18px 14px; background: var(--paper); }
.stat__num { display: block; font: 600 28px/1.1 var(--display); letter-spacing: 0.02em; }
.stat__label { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------------------------------------------------------------- results table */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 10px 14px; text-align: left; white-space: nowrap; }
.table th { color: var(--ink-3); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 2px solid var(--line); }
.table td { border-bottom: 2px solid var(--cream-2); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fff4e6; }
.table .num { text-align: right; font-family: var(--display); font-size: 17px; letter-spacing: 0.02em; }
.table th.num { font-family: inherit; font-size: 12px; letter-spacing: 0.06em; }
.table .muted { color: var(--ink-3); }
.table .grow { width: 100%; }
/* Results list: the island's number big, no underline, and a View button at the row's end. */
.table .day-num { display: inline-block; vertical-align: middle; color: var(--ink); font: 600 26px/1 var(--display); letter-spacing: 0.02em; text-decoration: none; }
.table .day-num:hover { color: var(--tomato-d); }
/* Today's island: a small "Live" tag over the number, its dot pulsing. */
.table .day-id { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; vertical-align: middle; }
.day-live { display: inline-flex; align-items: center; gap: 5px; color: var(--meadow-d); font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.day-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--meadow); animation: live-pulse 1.6s ease-out infinite; }
@keyframes live-pulse { from { box-shadow: 0 0 0 0 rgba(31, 179, 134, 0.55); } to { box-shadow: 0 0 0 6px rgba(31, 179, 134, 0); } }
@media (prefers-reduced-motion: reduce) { .day-live__dot { animation: none; } }
.table .go-cell { width: 1%; padding-top: 6px; padding-bottom: 6px; text-align: right; }
.table .island-date { margin-left: 4px; vertical-align: middle; }
.table .name { width: 100%; font-weight: 800; white-space: normal; min-width: 120px; }
.table .name a { color: var(--ink); text-decoration: none; }
.table .name a:hover { color: var(--tomato-d); text-decoration: underline; }
/* A racer's drawn picture in front of their name (racerPic() in src/site/parts.ts). */
.racer-pic { display: inline-block; width: 22px; height: 22px; margin: -3px 8px -3px 0; vertical-align: middle; }
.racer-pic svg, .avatar--pic svg { display: block; width: 100%; height: 100%; border-radius: 5px; }

/* A run's ghost / watch buttons (runActions() in src/site/parts.ts), drawn like the game's board rows
 * (src/ui/components/RunList.css): with a mouse they show on the row's hover, always on touch. */
.table .acts-cell { width: 1%; padding-top: 4px; padding-bottom: 4px; }
.run-acts { display: inline-flex; gap: 4px; vertical-align: middle; }
.run-act {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-2);
  text-decoration: none;
}
.run-act:hover { border-color: var(--plum); color: var(--plum); box-shadow: 0 2px 0 var(--plum); }
.run-act:active { transform: translateY(1px); box-shadow: none; }
.run-act:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
/* Mouse on a wide screen: the buttons take no space until the row is hovered (or has keyboard focus),
 * then fade in at the row's end and push every cell after the name / island left, like the game's rows. Only that
 * row moves (a transform: a wider column would move every row). Touch and narrow screens: always
 * shown in their own column (narrow screens also show the car card fixed, which a transform breaks). */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .table .acts-cell { position: relative; width: 0; padding: 0; }
  .run-acts { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.12s; }
  .table :is(td.name, td.grow) ~ td:not(.acts-cell) { transition: transform 0.14s ease-out; }
  .table tr:has(.run-acts):is(:hover, :focus-within) :is(td.name, td.grow) ~ td:not(.acts-cell) { transform: translateX(-74px); }
  .table tr:is(:hover, :focus-within) .run-acts { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .table :is(td.name, td.grow) ~ td, .run-acts { transition: none; }
}

/* A run's car (carChip() in src/site/parts.ts): the picture in the row, a card with the car larger,
 * its name, paint and how it is had on hover, keyboard focus or a tap (then a sheet at the bottom
 * on phones). The tables clip what sticks out, so a hovered table lets it show. */
.table .car-cell { padding-top: 4px; padding-bottom: 4px; }
.carchip { position: relative; display: inline-block; vertical-align: middle; border-radius: 6px; cursor: help; }
.carchip:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.carchip__pic { display: block; width: 58px; height: 40px; object-fit: contain; }
.carchip__card {
  position: absolute;
  z-index: 6;
  bottom: calc(100% + 6px);
  left: 50%;
  /* Not laid out at all until shown: a hidden card would still stick out of the table and make it
   * scroll sideways. */
  display: none;
  flex-direction: column;
  gap: 2px;
  width: 232px;
  padding: 8px 12px 12px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--shadow-ink);
  color: var(--ink);
  text-align: left;
  white-space: normal;
  pointer-events: none;
  transform: translateX(-50%);
  animation: carchip-in 0.12s ease-out;
}
@keyframes carchip-in { from { opacity: 0; margin-bottom: -4px; } }
.carchip__card img { display: block; width: 100%; height: 124px; margin-bottom: 4px; object-fit: contain; border-radius: 8px; background: var(--cream-2); }
.carchip__name { font: 600 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.carchip__paint { font-size: 14px; font-weight: 800; color: var(--ink-2); }
.carchip__how { font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--ink-3); }
.carchip:hover .carchip__card,
.carchip:focus .carchip__card { display: flex; }
.table-wrap:has(.carchip:hover, .carchip:focus),
.card--flush:has(.carchip:hover, .carchip:focus) { overflow: visible; }
@media (hover: none), (max-width: 700px) {
  .carchip__card { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; max-width: 420px; margin: 0 auto; transform: none; }
  .table-wrap:has(.carchip:hover, .carchip:focus),
  .card--flush:has(.carchip:hover, .carchip:focus) { overflow-x: auto; }
}

.fav-cars__car { display: flex; align-items: center; gap: 12px; }
.fav-cars__car > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.fav-cars__car .muted { font-size: 13px; font-weight: 700; }
.fav-cars .carchip__pic { width: 76px; height: 52px; }

.place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--cream);
  font: 600 16px/1 var(--display);
}
.place--1 { background: var(--mustard); color: #4a3000; }
.place--2 { background: var(--silver); }
.place--3 { background: var(--bronze); color: #fff; }

/* ---------------------------------------------------------------- home blocks */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 20px 24px 20px 72px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 4px 0 var(--shadow-ink); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 18px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--tomato);
  color: #fff;
  font: 600 22px/36px var(--display);
  text-align: center;
}
.steps h3 { margin-bottom: 4px; }
/* Steps with a game screenshot on top (shotSteps() in src/site/parts.ts); the number sits on the picture. */
.steps--shots li { padding: 0; overflow: hidden; }
.steps--shots li::before { left: 14px; top: 14px; z-index: 1; box-shadow: 0 3px 0 var(--shadow-ink); }
.steps__shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 2px solid var(--line); background: var(--cream-2); }
.steps__text { padding: 16px 20px 20px; }
.steps p { margin: 0; color: var(--ink-2); }

.cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.car { border: 2px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; box-shadow: 0 4px 0 var(--shadow-ink); }
.car img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cream-2); }
.car__body { padding: 10px 14px 14px; }
.car__body h3 { margin: 0 0 6px; font-size: 18px; }

.band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 340px;
  margin: 56px 0 0;
  border: 2px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  background: #2a2420;
  box-shadow: 0 6px 0 var(--shadow-ink);
  color: #fffaf2;
}
.band__art { position: absolute; inset: 0; z-index: -2; }
.band__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
/* Dark warm fade from the left, so the text reads and the car on the right stays bright. */
.band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(28, 20, 14, 0.92) 0%, rgba(28, 20, 14, 0.78) 36%, rgba(28, 20, 14, 0.3) 58%, rgba(28, 20, 14, 0) 74%),
    linear-gradient(0deg, rgba(28, 20, 14, 0.35) 0%, rgba(28, 20, 14, 0) 40%);
}
.band__body { max-width: 480px; padding: 40px 44px; }
.band__kicker { margin: 0 0 8px; color: var(--mustard); font: 600 14px/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.band h2 { margin-bottom: 10px; font-size: clamp(34px, 5vw, 52px); line-height: 1; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.band__body > p:not(.band__kicker) { margin: 0 0 24px; color: #f3e6d3; font-size: 18px; }
.band__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 700px) {
  /* Phones: the car on top, the text on a fade from the bottom. */
  .band { align-items: flex-end; min-height: 460px; }
  .band__art img { object-position: 78% 40%; height: 62%; }
  .band::before {
    background: linear-gradient(0deg, #2a2420 0%, #2a2420 38%, rgba(42, 36, 32, 0.85) 48%, rgba(42, 36, 32, 0) 72%);
  }
  .band__body { padding: 24px 20px 24px; }
}

/* ---------------------------------------------------------------- racers */

.search { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.search input {
  flex: 1 1 220px;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}
.profile-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 8px 0 24px; }
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  flex: none;
  border: 2px solid var(--tomato-d);
  border-radius: 14px;
  background: var(--tomato);
  box-shadow: 0 4px 0 var(--tomato-d);
  color: #fff;
  font: 600 40px/1 var(--display);
  text-transform: uppercase;
}
.avatar--pic { padding: 0; border-color: var(--line-strong); background: none; box-shadow: 0 4px 0 var(--line-strong); overflow: hidden; }
.avatar--pic svg { border-radius: 0; }
.profile-head h1 { margin: 0 0 4px; text-transform: none; overflow-wrap: anywhere; }
.profile-head p { margin: 0; color: var(--ink-2); }

/* The racer page under the name (tiles() in src/site/parts.ts): the numbers side by side, each in a
 * small box with a coloured icon (no tinted circle behind it), the number, its label and maybe a line. */
.tiles { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tile {
  flex: 1 1 128px;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--shadow-ink);
}
.tile__icon { display: flex; margin-bottom: 8px; color: var(--ink-3); }
.tile__value { font: 600 30px/1 var(--display); letter-spacing: 0.02em; }
.tile__label { margin-top: 4px; color: var(--ink-2); font-size: 13px; font-weight: 800; }
.tile__sub { margin-top: 2px; color: var(--ink-3); font-size: 13px; font-weight: 700; }
.tile--gold .tile__icon { color: #c98d00; }
.tile--tomato .tile__icon { color: var(--tomato); }
.tile--sky .tile__icon { color: var(--sky); }
.tile--meadow .tile__icon { color: var(--meadow-d); }
.tile--plum .tile__icon { color: var(--plum); }
.note { margin: 8px 0 0; color: var(--ink-3); font-size: 14px; }

/* ---------------------------------------------------------------- updates */

.posts { display: grid; gap: 24px; }
.post-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--shadow-ink);
  overflow: hidden;
}
.post-card__img img { display: block; width: 100%; height: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.post-card__body { padding: 24px 28px; align-self: center; }
.post-card__body h2, .post-card__body h3 { margin-bottom: 8px; }
.post-card__body h3 { font-size: clamp(22px, 3vw, 28px); }
.post-card__body :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.post-card__body :is(h2, h3) a:hover { color: var(--tomato-d); }
.post-card__body p { margin: 0 0 14px; color: var(--ink-2); }
@media (max-width: 760px) {
  .post-card { grid-template-columns: 1fr; }
  .post-card__body { padding: 18px 20px 22px; }
}
.post-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--ink-3); font-size: 14px; font-weight: 800; }
.post { margin: 0; }
.post-head { margin: 8px 0 20px; }
.post-head h1 { margin: 0; }
.post-img { margin: 0 0 32px; border: 2px solid var(--line-strong); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 0 var(--shadow-ink); }
.post-img img { display: block; width: 100%; height: auto; }
.post .prose { max-width: none; font-size: 17px; }
.post-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 40px 0 0; }

/* ---------------------------------------------------------------- long text */

.prose { max-width: 760px; }
.prose h2 { margin: 36px 0 12px; }
.prose h3 { margin: 24px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose > :first-child { margin-top: 0; }

kbd, .kbd {
  display: inline-block;
  min-width: 26px;
  padding: 1px 7px;
  border: 2px solid var(--line-strong);
  border-bottom-width: 4px;
  border-radius: 6px;
  background: var(--paper);
  font: 700 14px/1.4 var(--ui);
  text-align: center;
}

.faq { display: grid; gap: 12px; }
.faq__item { border: 2px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 3px 0 var(--shadow-ink); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; color: var(--tomato-d); font: 600 22px/1 var(--display); }
.faq__item[open] summary::after { content: '–'; }
.faq__item > div { padding: 0 18px 14px; color: var(--ink-2); }
.faq__item > div > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- footer */

/*
 * A low-poly landscape (public/site/footer-scene.svg: hazy mountains, hills, pines, a lone cherry
 * tree, a red car on a road) sits on top of the footer. Its sky is transparent over the page's cream,
 * and its front hill is --foot-ground, the solid colour the links stand on (change both together).
 * Flat-shaded triangles, integer coordinates, one <path> per colour; keep it under ~25 KB.
 */
.foot {
  --foot-ground: #1e3b2c;
  --foot-text: #f7ecdb;   /* 10.5:1 on the ground */
  --foot-soft: #ddd0b8;   /* 8.0:1 */
  --foot-head: #a8c79a;   /* 6.6:1 */
  background: var(--foot-ground);
  color: var(--foot-text);
}
.foot::before {
  content: '';
  display: block;
  height: clamp(150px, 17vw, 380px);
  /* cover + bottom: wide screens crop sky, phones crop the sides around the car and the tree.
     The 2px gradient strip under it hides any anti-aliased seam at the image's bottom edge. */
  background:
    url('/site/footer-scene.svg') 50% 100% / cover no-repeat,
    linear-gradient(to top, var(--foot-ground) 2px, var(--cream) 2px);
}
.foot__in {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 32px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8px var(--gutter) 32px;
}
.foot__logo { display: inline-block; line-height: 0; }
.foot__logo:hover { transform: translateY(-1px); }
.foot__brand p { margin: 14px 0 18px; color: var(--foot-soft); }
.foot__social { display: flex; gap: 4px; margin: 14px 0 0 -8px; }
.foot__social a { display: inline-flex; padding: 8px; color: var(--foot-text); line-height: 0; }
.foot__social a:hover { color: #fff; transform: translateY(-1px); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; }
.foot__cols h2 { margin-bottom: 10px; font-size: 15px; color: var(--foot-head); letter-spacing: 0.08em; text-transform: uppercase; }
.foot__cols a { display: block; margin-bottom: 6px; color: var(--foot-text); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.foot__cols a:hover { color: #fff; text-decoration: underline; }
.foot a:focus-visible { outline-color: var(--mustard); }
.foot__copy {
  width: min(100% - 2 * var(--gutter), var(--wrap) - 2 * var(--gutter));
  margin: 0 auto;
  padding: 16px 0 32px;
  border-top: 1px solid rgba(247, 236, 219, 0.16);
  color: var(--foot-head);
  font-size: 14px;
  /* Copyright on the left, the legal pages on the right of the same line (stacked on phones). */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
}
.foot__copy p { margin: 0; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__legal a { color: var(--foot-text); font-weight: 700; text-decoration: none; }
.foot__legal a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 700px) {
  .foot__in { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}