/* Cass the Runner — "street poster" design system
   Locked tokens per CLAUDE.md: coral #ff4d2e, ink #111111, white #ffffff,
   Anton for display, monospace for stat/label readouts, plain sans-serif body.
   Sharp edges only — no rounded-corner signature. */

:root {
  --coral: #ff4d2e;
  --ink: #111111;
  --white: #ffffff;
  --font-display: 'Anton', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rule: 4px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
}

/* Horizontal-overflow clipping (needed because the rotated hero numeral,
   diary tags, and quiz badge/tag bleed slightly outside their box) lives on
   `main`, not `body` — `overflow-x: hidden` directly on body/html forces
   `overflow-y: auto` per the CSS overflow-propagation rule, which breaks
   `position: sticky` on the header (a sibling of main) on iOS Safari. */
main { overflow-x: hidden; }

p { margin: 0; }

img { max-width: 100%; display: block; }

a { color: var(--coral); text-decoration: none; }
a:hover, a:focus-visible { opacity: 0.82; }

h1, h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ink);
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--white);
  color: var(--ink);
}
.btn--filled { background: var(--coral); color: var(--white); }
.btn--sm {
  padding: 10px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.btn--on-dark { border-color: var(--white); }

/* Sticky top bar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px;
  background: var(--white);
  border-bottom: var(--rule) solid var(--ink);
}
.site-header__wordmark a { color: inherit; text-decoration: none; }
.site-header__wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.site-header__actions { display: flex; align-items: center; gap: 24px; }
.site-header__nav {
  display: flex;
  gap: 18px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-header__nav a { color: var(--ink); text-decoration: none; opacity: 0.65; }
.site-header__nav a:hover, .site-header__nav a:focus-visible { opacity: 1; color: var(--coral); }
/* Duplicate of the standalone .site-header__tickets-btn button, shown only
   in the mobile dropdown (see the max-width:640px block) since that button
   doesn't fit the header at that width. */
.site-header__nav-tickets { display: none; }
.site-header__menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.site-header__menu-btn span { display: block; width: 100%; height: 3px; background: var(--ink); }

/* Hero banner */
.hero-banner {
  width: 100%;
  overflow: hidden;
  border-bottom: var(--rule) solid var(--ink);
}
.hero-banner__img {
  width: 100%;
  height: clamp(180px, 28vw, 380px);
  object-fit: cover;
  object-position: center 22%;
}

/* Hero */
.hero {
  padding: 72px 32px 96px;
  display: flex;
  gap: 48px;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: var(--rule) solid var(--ink);
}
.hero__numeral-block {
  flex: 0 0 auto;
  transform: rotate(-3deg);
}
.hero__kicker {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero__numeral {
  font-family: var(--font-display);
  font-size: clamp(96px, 16vw, 220px);
  line-height: 0.85;
  color: var(--coral);
}
.hero__days-label {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 12px;
}
.hero__body { flex: 1 1 380px; min-width: 280px; }
.hero__headline {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.02;
  margin-bottom: 20px;
}
.hero__copy {
  font-size: 17px;
  line-height: 1.55;
  max-width: 520px;
  margin: 0 0 28px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Progress strip */
.stats {
  background: var(--ink);
  padding: 48px 32px;
  color: var(--white);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 0;
}
/* Each stat's label/value sit in the grid's shared row tracks (via
   subgrid) rather than sizing to their own content — so a label that
   wraps onto more lines than its neighbours (e.g. "Gym Sessions (30
   Days)" vs "Total Raised") still leaves every value aligned on the
   same row, at any viewport width, with no fixed height guess needed. */
.stat {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  padding: 0 32px;
}
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat:not(:first-child) { border-left: 2px solid rgba(255, 255, 255, 0.18); }
.stat__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 8px;
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  color: var(--coral);
  line-height: 1;
}
.stat__value-secondary {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--white);
  opacity: 0.55;
  vertical-align: middle;
}
.stats__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 28px;
}

/* Event diary */
.diary { padding: 80px 32px; border-bottom: var(--rule) solid var(--ink); }
.diary__heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.diary__title { font-size: clamp(28px, 3.6vw, 44px); }
.diary__tag {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  border: 2px solid var(--coral);
  padding: 4px 12px;
  transform: rotate(-2deg);
}
.diary__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.diary__row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  border: 3px solid var(--ink);
  border-left: 10px solid var(--ink);
  flex-wrap: wrap;
}
.diary__row--accent { border-left-color: var(--coral); }
.diary__date {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 170px;
}
.diary__event { flex: 1 1 200px; }
.diary__name { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; }
.diary__place { font-size: 14px; opacity: 0.7; }
.diary__badge {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
}

/* Updates */
.updates { padding: 80px 32px; border-bottom: var(--rule) solid var(--ink); }
.updates__heading { margin-bottom: 40px; }
.updates__title { font-size: clamp(28px, 3.6vw, 44px); }
.updates__list { display: flex; flex-direction: column; gap: 20px; max-width: 780px; }
.update-card { border: 3px solid var(--ink); padding: 20px 24px; }
.update-card__date {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
  margin: 0 0 8px;
}
.update-card__title { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; margin: 0 0 8px; }
.update-card__body { font-size: 15px; line-height: 1.5; margin: 0; white-space: pre-line; }

/* Quiz night */
.quiz { background: var(--ink); padding: 88px 32px; color: var(--white); }
.quiz__layout { display: flex; gap: 56px; flex-wrap: wrap; }
.quiz__intro { flex: 1 1 340px; min-width: 280px; }
.quiz__badge-img {
  width: 260px;
  max-width: 100%;
  aspect-ratio: 865 / 486;
  object-fit: cover;
  transform: rotate(-4deg);
  margin-bottom: 20px;
  border: 3px solid var(--white);
}
.quiz__kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 12px;
}
.quiz__title { font-size: clamp(40px, 6vw, 72px); line-height: 0.95; margin-bottom: 40px; }
.quiz__facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.quiz__facts .is-tbc { color: var(--coral); }

.quiz__form-panel {
  flex: 1 1 320px;
  min-width: 280px;
  background: var(--white);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--coral);
  padding: 28px;
  align-self: flex-start;
}
.quiz__form-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 18px;
}
.quiz__ticket-copy { font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.quiz__highlights {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}
.quiz__highlights li { padding-left: 22px; position: relative; }
.quiz__highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  background: var(--coral);
}
.quiz__ticket-options {
  list-style: none;
  margin: 0 0 28px;
  padding: 20px 0 0;
  border-top: 2px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
}
.quiz__ticket-price {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--coral);
  margin-right: 10px;
}
.quiz__ticket-btn { width: 100%; }
/* RSVP form (posts to our own /api/rsvp backend) */
.rsvp-form { display: flex; flex-direction: column; gap: 22px; }
.rsvp-form[hidden] { display: none; }
.rsvp-form__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  padding: 0;
  margin: 0;
}
.rsvp-form__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  padding: 0;
}
.rsvp-form__choices { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rsvp-form__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border: 2px solid var(--ink);
  font-size: 14px;
  cursor: pointer;
}
.rsvp-form__choice:has(input:checked) {
  background: var(--ink);
  color: var(--white);
}
.rsvp-form__choice input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.rsvp-form__choice input:checked {
  background: var(--coral);
  border-color: var(--coral);
}
.rsvp-form__input,
.rsvp-form__select,
.rsvp-form__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 0;
  border: none;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  appearance: none;
}
.rsvp-form__input:focus,
.rsvp-form__select:focus,
.rsvp-form__textarea:focus {
  outline: none;
  border-bottom-color: var(--coral);
}
.rsvp-form__select { cursor: pointer; }
.rsvp-form__textarea { resize: vertical; }
.rsvp-form__submit { align-self: flex-start; }
.rsvp-form__status {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0;
}
.rsvp-form__error {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--coral);
  margin: 0;
}
.rsvp-form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Footer */
.site-footer {
  background: var(--white);
  padding: 40px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: var(--rule) solid var(--ink);
}
.site-footer__credit { font-size: 13px; line-height: 1.6; max-width: 480px; }
.share { display: flex; align-items: center; gap: 14px; }
.share__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}
.share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: none;
  cursor: pointer;
  padding: 0;
}
.share__link svg { width: 18px; height: 18px; }
.share__toast {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.share__toast.is-visible { opacity: 1; }

@media (max-width: 640px) {
  .site-header, .hero, .stats, .diary, .quiz, .site-footer { padding-left: 20px; padding-right: 20px; }
  .diary__date { min-width: 0; }

  /* Header nav collapses into a hamburger + dropdown instead of wrapping
     inline next to Donate, which made the sticky header tall and cramped. */
  .site-header__menu-btn { display: flex; }
  .site-header__actions { gap: 14px; }
  .site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: var(--rule) solid var(--ink);
    padding: 4px 20px 12px;
  }
  .site-header__nav.is-open { display: flex; }
  .site-header__nav a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.1);
    font-size: 15px;
    opacity: 1;
  }
  .site-header__nav a:last-child { border-bottom: none; }
  .site-header__nav-tickets { display: block; color: var(--coral) !important; font-weight: 700; }

  /* The header's standalone "Buy Tickets" button doesn't fit next to Donate
     at this width — it moves into the hamburger dropdown instead (see
     .site-header__nav-tickets above), same reasoning as the rest of the nav. */
  .site-header__tickets-btn { display: none; }

  /* Hero kicker: force the date onto its own line rather than letting it
     wrap wherever it happens to run out of room. */
  .hero__kicker-date { display: block; margin-top: 2px; }

  /* Progress-strip labels wrap to different numbers of lines ("Gym
     Sessions (30 Days)" up to 3, "Total Raised" only 2), which pushed the
     numbers below them out of alignment. Reserve enough height for the
     worst case so every number lines up regardless of its own label. */
  .stat__label { line-height: 1.4; }
}

/* Footer nav links (Blog / Recipes / Training Plan / Privacy) */
.site-footer { flex-wrap: wrap; }
.site-footer__links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-footer__links a { color: var(--ink); opacity: 0.65; }
.site-footer__links a:hover, .site-footer__links a:focus-visible { opacity: 1; color: var(--coral); }

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  max-width: 640px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--white);
  border: 3px solid var(--ink);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { flex: 1 1 260px; font-size: 14px; line-height: 1.5; }
.cookie-banner__text a { color: var(--coral); }
.cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Sponsors */
.sponsors { padding: 80px 32px; border-bottom: var(--rule) solid var(--ink); }
.sponsors__heading { margin-bottom: 40px; }
.sponsors__title { font-size: clamp(28px, 3.6vw, 44px); }
.sponsors__group { margin-bottom: 40px; }
.sponsors__group-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 16px;
}
.sponsors__grid { display: flex; gap: 24px; flex-wrap: wrap; max-width: 780px; }
.sponsor-card { border: 3px solid var(--ink); padding: 24px; flex: 1 1 280px; min-width: 240px; }
.sponsor-card__link { display: block; color: inherit; text-decoration: none; }
.sponsor-card__logo-box {
  height: 96px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.sponsor-card__logo {
  max-height: 100%;
  max-width: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.sponsor-card__name { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; margin: 0 0 8px; }
.sponsor-card__blurb { font-size: 14px; line-height: 1.5; margin: 0; }
.sponsors__supporters-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  max-width: 780px;
}
.sponsors__supporter {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.sponsors__supporter:hover, .sponsors__supporter:focus-visible { opacity: 1; }
.sponsors__supporter img { max-height: 50px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.sponsors__enquiry { margin-top: 32px; font-size: 15px; }
.sponsors__enquiry a { font-weight: 700; }

/* Blog / Recipes index cards (populated client-side, same card shape as
   the Updates section) */
.content-list { padding: 80px 32px; }
.content-list__heading { margin-bottom: 40px; }
.content-list__title { font-size: clamp(28px, 3.6vw, 44px); }
.content-list__grid { display: flex; flex-direction: column; gap: 20px; max-width: 780px; }
.content-card {
  display: block;
  border: 3px solid var(--ink);
  padding: 20px 24px;
  color: var(--ink);
}
.content-card:hover, .content-card:focus-visible { opacity: 1; background: var(--ink); color: var(--white); }
.content-card__image-placeholder {
  height: 220px;
  border: 2px dashed currentColor;
  opacity: 0.4;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.content-card__image {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  margin-bottom: 14px;
}
.content-card__date {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
  margin: 0 0 8px;
}
.content-card__title { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; margin: 0 0 8px; }
.content-card__excerpt { font-size: 15px; line-height: 1.5; margin: 0; }
.content-list__empty { font-size: 15px; opacity: 0.6; }

/* Post / recipe detail article (rendered server-side from editor HTML) */
.post { padding: 64px 32px; max-width: 760px; margin: 0 auto; }
.post__date {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
  margin-bottom: 12px;
}
.post__title { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin-bottom: 24px; }
.post__cover { width: 100%; max-height: 420px; object-fit: cover; border: 3px solid var(--ink); margin-bottom: 32px; }
.post__cover--placeholder {
  height: 220px;
  border: 2px dashed var(--ink);
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.post__body { font-size: 17px; line-height: 1.65; }
.post__body p { margin-bottom: 20px; }
.post__body h2 { font-size: 28px; margin: 40px 0 16px; }
.post__body h3 { font-size: 22px; margin: 32px 0 14px; }
.post__body ul, .post__body ol { margin: 0 0 20px; padding-left: 24px; }
.post__body li { margin-bottom: 8px; }
.post__body img { width: 100%; border: 3px solid var(--ink); margin: 24px 0; }
.post__body blockquote {
  border-left: 4px solid var(--coral);
  margin: 24px 0;
  padding-left: 20px;
  font-style: italic;
  opacity: 0.85;
}
.post__pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 3px solid var(--ink);
}
.post__pager-link {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 15px;
  max-width: 46%;
  color: var(--ink);
}
.post__pager-link--next { text-align: right; margin-left: auto; }
.post__back { margin-top: 40px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }

@media (max-width: 640px) {
  .post__pager { flex-direction: column; gap: 16px; }
  .post__pager-link { max-width: 100%; }
  .post__pager-link--next { text-align: left; margin-left: 0; }
}

/* 404 page (functions/_lib/page-shell.js renderNotFound) */
.not-found { padding: 96px 32px; text-align: center; }
.not-found__title { font-size: clamp(32px, 6vw, 64px); text-transform: uppercase; }
.not-found__back { margin-top: 16px; }

/* Training plan */
.training { padding: 80px 32px; }
.training__heading { margin-bottom: 40px; }
.training__title { font-size: clamp(28px, 3.6vw, 44px); }
.training__intro { max-width: 640px; font-size: 15px; line-height: 1.6; margin-bottom: 40px; opacity: 0.75; }
.training__list { display: flex; flex-direction: column; gap: 16px; max-width: 900px; list-style: none; margin: 0; padding: 0; }
.training-phase-header {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral);
  margin: 32px 0 -4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--coral);
}
.training-phase-header:first-child { margin-top: 0; }
.training-row {
  display: grid;
  grid-template-columns: 170px 1fr 1fr;
  grid-template-areas: "date planned actual" "notes notes notes";
  gap: 20px;
  border: 3px solid var(--ink);
  border-left: 10px solid var(--ink);
  padding: 20px 24px;
  align-items: start;
}
.training-row[data-status="done"] { border-left-color: #1a7a3c; }
.training-row[data-status="partial"] { border-left-color: var(--coral); }
.training-row[data-status="missed"] { border-left-color: #999; }
.training-row--current {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
  border-left-color: var(--ink);
}
.training-row--current .training-row__label,
.training-row--current .training-row__notes { opacity: 0.8; }
.training-row--current .training-row__notes { border-top-color: rgba(255, 255, 255, 0.35); }
.training-row__date { grid-area: date; font-family: var(--font-mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.training-row__planned { grid-area: planned; }
.training-row__actual { grid-area: actual; }
.training-row__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.55; margin-bottom: 6px; }
.training-row__text { font-size: 15px; line-height: 1.5; white-space: pre-line; }
.training-row__notes {
  grid-area: notes;
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  opacity: 0.6;
  border-top: 2px solid #eee;
  padding-top: 12px;
  margin: 0;
}
.training-row__status {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 8px;
  display: inline-block;
}
.training-row__variance {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 8px;
  margin-left: 10px;
  display: inline-block;
  opacity: 0.6;
}
.training-row--current .training-row__variance { opacity: 0.85; }

/* Strava feed (/training) */
.strava-feed { max-width: 900px; margin-bottom: 48px; }
.strava-feed__heading { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.strava-feed__follow {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.strava-feed__follow:hover, .strava-feed__follow:focus-visible { color: var(--coral); }
.strava-feed__title { font-size: clamp(22px, 2.8vw, 30px); }
.strava-feed__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  border: 2px solid var(--coral);
  padding: 4px 12px;
  transform: rotate(-2deg);
}
.strava-feed__latest { border: 3px solid var(--ink); padding: 24px; margin-bottom: 16px; }
.strava-feed__latest-type {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin: 0 0 8px;
}
.strava-feed__latest-name { font-family: var(--font-display); font-size: 24px; text-transform: uppercase; margin: 0 0 6px; }
.strava-feed__latest-date { font-size: 13px; opacity: 0.6; margin: 0 0 18px; }
.strava-feed__latest-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.strava-feed__latest-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
  margin: 0 0 4px;
}
.strava-feed__latest-stat-value { font-family: var(--font-display); font-size: 26px; color: var(--coral); margin: 0; }
.strava-feed__latest-stat-secondary { font-family: var(--font-mono); font-size: 14px; color: var(--ink); opacity: 0.55; }
.strava-feed__list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.strava-feed__item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 16px; border: 2px solid var(--ink); font-size: 14px; }
.strava-feed__item-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.strava-feed__item-type {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
  flex-shrink: 0;
}
.strava-feed__item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strava-feed__item-stat { font-family: var(--font-mono); font-size: 13px; flex-shrink: 0; }
.strava-feed__item-stat-secondary { opacity: 0.55; font-size: 12px; }

/* Footage (/footage) */
.footage { padding: 80px 32px; }
.footage__heading { margin-bottom: 16px; }
.footage__title { font-size: clamp(28px, 3.6vw, 44px); }
.footage__intro { max-width: 640px; font-size: 15px; line-height: 1.6; margin-bottom: 40px; opacity: 0.75; }
.footage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.footage__tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 3px solid var(--ink);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.footage__tile-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.footage__tile-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.footage__tile-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border: 3px solid var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 20px;
  background: rgba(17, 17, 17, 0.35);
}
.footage__tile-title { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; padding: 14px 16px; margin: 0; }
.footage__tile-date { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; padding: 0 16px 16px; margin: 0; }

.video-modal { position: fixed; inset: 0; z-index: 200; padding: 24px; }
.video-modal[hidden] { display: none; }
.video-modal:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.9); }
.video-modal__frame { position: relative; width: 100%; max-width: 960px; }
.video-modal__embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); }
.video-modal__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal__close {
  position: absolute;
  top: -44px; right: 0;
  background: none;
  border: none;
  color: var(--white);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* Privacy policy */
.legal { padding: 80px 32px; max-width: 780px; margin: 0 auto; }
.legal h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 8px; }
.legal__updated { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; margin-bottom: 40px; }
.legal h2 { font-size: 22px; margin: 36px 0 12px; }
.legal p, .legal li { font-size: 15px; line-height: 1.65; }
.legal ul { padding-left: 22px; margin-bottom: 20px; }
.legal li { margin-bottom: 8px; }
.legal__disclaimer { opacity: 0.6; font-size: 13px; margin-top: 40px; }

@media (max-width: 640px) {
  .sponsors, .content-list, .training, .legal { padding-left: 20px; padding-right: 20px; }
  .training-row { grid-template-columns: 1fr; grid-template-areas: "date" "planned" "actual" "notes"; }
}