/* ============================================================
   supplemental.css — fallback rules for page-local classes
   used by individual pages but not yet codified in main.css.
   Loaded AFTER main.css. Token vars from main.css §2 are used.

   FULL REWRITE 2026-06-02 by MASTER PATCH AGENT.
   Driven by 30-file QA review under /qa_reviews/.

   Goals:
     - Kill the 800px .subpage .container clamp that broke every subpage.
     - Replace off-palette hex with locked design tokens.
     - Replace undefined --brand-cream / --brand-ink vars with
       --surface-cream / --surface-ink.
     - Add missing component rules (legal-page__*, pillar-card color
       modifiers, day-accordion sub-elements, race-toggle sub-elements,
       compare grid, calculator aliases, faq-accordion__content, etc).
     - Restore list bullets on legal/content pages (global reset killed them).
   ============================================================ */


/* ============================================================
   1. .subpage IS A HINT, NOT A CLAMP
   ------------------------------------------------------------
   Previously: `.subpage .container { max-width: 800px; padding: 64px 0; }`
   broke every interior page (homepage container is 1200px, subpages
   were forced down to 800px and lost their horizontal gutter).
   Now: .subpage is purely a nav scroll-state hint. Container clamp
   is opt-in via .container--narrow on the inner element.
   ============================================================ */
body.subpage {
  /* .subpage is now a pure semantic marker — DOES NOT force cream-fill
     on the nav. Per fix 2026-06-01: nav is transparent on EVERY page
     at scroll-top, and only flips to cream via .nav--scrolled (added
     by main.js when window.scrollY > 50). The previous override —
     `body.subpage .nav { background: cream }` — pushed every subpage
     hero below the nav and is REMOVED. */
}
/* Patched 2026-06-02 (X-AXIS UNIFICATION): legal `.container--narrow`
   wrapper now keeps the canonical 1200px max-width so the left edge
   aligns with every other page. The 720px reading-line clamp applies
   to its children via `.container--narrow > *` (main.css §4). */
body.subpage--legal .container--narrow {
  max-width: var(--page-max);
}
body.subpage--legal .container--narrow > * {
  max-width: var(--container-narrow);
}
/* Legal pages should sit on cream like every other section — remove
   the prior `.subpage--legal { background: #fff }` conflict. */
body.subpage--legal {
  background: var(--surface-cream);
}


/* ============================================================
   2. HERO VARIANTS
   ------------------------------------------------------------
   ALL hero min-heights live in main.css §9 now (single source of
   truth: home = 100svh, every other hero = 30svh mobile / 35svh
   desktop). Legacy override removed 2026-06-02.
   ============================================================ */


/* ============================================================
   3. LEGAL PAGES
   ------------------------------------------------------------
   Pages use a mix of .legal__* (privacy.html) and .legal-page__*
   (terms.html, photo-release.html). Both naming forms must work.
   ============================================================ */
.legal,
.legal-page {
  padding: 48px 0 96px;
}
.legal__body,
.legal-page__body {
  max-width: 760px;
  /* Patched 2026-06-02 (X-AXIS UNIFICATION): anchor to wrapper's
     left edge so the body copy on legal pages aligns with the
     hero H1, section H2s, and footer columns on every other page.
     The 760px clamp still gives a readable measure. */
  margin-inline-start: 0;
  margin-inline-end: auto;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--surface-ink);
}
.legal__body h2,
.legal-page__body h2 {
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  font-size: 1.5rem;
  color: var(--brand-aubergine);
}
.legal__body h3,
.legal-page__body h3 {
  margin-top: 1.8em;
  margin-bottom: 0.4em;
  font-size: 1.2rem;
}
.legal__body p,
.legal__body li,
.legal-page__body p,
.legal-page__body li {
  margin-bottom: 1em;
}
.legal__body ul,
.legal__body ol,
.legal-page__body ul,
.legal-page__body ol {
  padding-left: 1.5em;
}

/* Legal-page meta line ("Last updated: ...") */
.legal-meta,
.legal__updated,
.legal-page__updated {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--ink-muted);
}

/* Pull-quotes on legal pages */
.legal__quote,
.legal-page__quote {
  border-left: 4px solid var(--brand-aubergine);
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  margin: 2rem 0;
  background: var(--surface-cream);
  font-style: italic;
  color: var(--surface-ink);
}

/* Section dividers on legal pages */
.legal__divider,
.legal-page__divider {
  border: 0;
  border-top: 1px solid var(--ink-muted);
  margin: 3rem 0;
}

/* Strap/intro lines */
.legal__strap,
.legal-page__strap,
.legal-page__intro {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  margin-bottom: 1.5em;
}

/* Legal-section + legal-body inherit from the container; supply a baseline. */
.legal-section,
.legal-body {
  margin-bottom: 2em;
}

/* TOC card */
.legal-toc {
  background: var(--surface-cream);
  border-left: 4px solid var(--brand-aubergine);
  padding: 20px 24px;
  margin: 24px 0 32px;
  border-radius: 4px;
}
.legal-toc__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--brand-aubergine);
}
.legal-toc ol,
.legal-toc ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: decimal;
}
.legal-toc a {
  color: var(--brand-aubergine);
  text-decoration: none;
}
.legal-toc a:hover,
.legal-toc a:focus-visible {
  text-decoration: underline;
}

/* Tables on legal pages */
.legal-table-wrap {
  overflow-x: auto;
  margin: 1.5em 0;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.legal-table th,
.legal-table td {
  border: 1px solid var(--ink-muted);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  background: var(--surface-cream);
  font-weight: 700;
  color: var(--brand-aubergine);
}


/* ============================================================
   4. RESTORE LIST BULLETS ON CONTENT PAGES
   ------------------------------------------------------------
   The global reset in main.css §1 kills list-style: none on ul/ol.
   That's fine for nav/footer, but legal + body content needs
   real bullets to be readable.
   ============================================================ */
.legal-page ul,
.legal-page__body ul,
.legal__body ul,
.body ul:not(.no-bullets),
ul.body:not(.no-bullets),
.legal-section ul,
.legal-body ul,
.pillar-card__list {
  list-style: disc;
  padding-left: 1.5em;
}
.legal-page ol,
.legal-page__body ol,
.legal__body ol,
.body ol:not(.no-bullets),
ol.body:not(.no-bullets),
.legal-section ol,
.legal-body ol {
  list-style: decimal;
  padding-left: 1.5em;
}
.legal-page li,
.legal-page__body li,
.legal__body li,
.body li,
.pillar-card__list li {
  margin-bottom: 0.5em;
  line-height: 1.6;
}


/* ============================================================
   5. PILLAR CARD COLOR MODIFIERS + EXTENSIONS
   ------------------------------------------------------------
   main.css §11 covers nth-child rotation. Some pages set explicit
   modifiers; both must work.
   ============================================================ */
.pillar-card--lilac    { background: var(--brand-lilac);    color: var(--surface-ink); }
.pillar-card--salmon   { background: var(--accent-salmon);  color: var(--surface-ink); }
.pillar-card--lavender { background: var(--accent-lavender); color: var(--surface-ink); }

.pillar-card__cost-number {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--surface-ink);
}
.pillar-card__cost-label {
  font-size: 0.875rem;
  color: var(--surface-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pillar-card__list {
  margin: 12px 0;
}
.pillar-card__back-link {
  display: inline-block;
  margin-top: 1rem;
}
.pillar-card__body {
  flex: 1;
}
.pillar-card__body-text {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--surface-ink);
}


/* ============================================================
   6. STAT BAND EXTENSIONS
   ============================================================ */
.stat-band--cumulative {
  background: var(--brand-aubergine);
  color: var(--surface-white);
}
.stat-band--cumulative .stat-band__number,
.stat-band--cumulative .stat-band__label {
  color: var(--surface-white);
}

/* Patched 2026-06-02: when ANY stat-band modifier (--cumulative,
   --pilot, etc.) is nested inside a `.section--cream` (post-alternation
   flip), reset bg + text color so the band reads as part of the cream
   section. Specificity (0,3,0) beats the modifier rules above (0,2,0)
   so this wins regardless of source order. */
.section--cream .stat-band--cumulative,
.section--cream .stat-band--cumulative .stat-band__number,
.section--cream .stat-band--cumulative .stat-band__label,
.section--cream .stat-band--pilot,
.section--cream .stat-band--pilot .stat-band__number,
.section--cream .stat-band--pilot .stat-band__label {
  background: transparent;
  color: var(--surface-ink);
}


/* ============================================================
   7. STEP / PROCESS GRIDS
   ------------------------------------------------------------
   B17: pick ONE step-number convention — 56px Cosmic Buns aubergine
   on cream, NO background circle. Apply to .step__number,
   .how-step__num, .steps-grid__num.
   ============================================================ */
.step-grid,
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.step,
.how-step,
.steps-grid__item {
  padding: 24px;
  background: var(--surface-white);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.step__number,
.how-step__num,
.steps-grid__num {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 1;
  background: transparent;
  color: var(--brand-aubergine);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  margin-bottom: 12px;
  border-radius: 0;
  text-align: left;
}


/* ============================================================
   8. COMPARE / ELIGIBILITY GRIDS
   ============================================================ */
.compare-grid,
.eligibility-grid,
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.compare__col,
.compare-grid > *,
.eligibility-grid > * {
  background: var(--surface-white);
  padding: 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--surface-cream);
}
.compare__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.125rem;
  margin-bottom: 12px;
  color: var(--brand-aubergine);
}
.compare__list {
  list-style: disc;
  padding-left: 1.5em;
}
.compare__list li {
  margin-bottom: 0.5em;
  line-height: 1.6;
}


/* ============================================================
   9. RESCUE / CALLOUT BOXES
   ============================================================ */
.rescue-callout {
  background: var(--accent-salmon);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin: 24px 0;
  color: var(--surface-ink);
}
.rescue-callout strong {
  color: var(--brand-aubergine);
}


/* ============================================================
   10. JOTFORM / FORM PLACEHOLDERS
   ============================================================ */
.jotform-placeholder {
  background: var(--surface-cream);
  border: 2px dashed var(--brand-aubergine);
  border-radius: var(--radius-card);
  padding: 48px 24px;
  text-align: left;
  margin: 32px 0;
  color: var(--ink-muted);
}


/* ============================================================
   11. ERROR PAGE / 404
   ============================================================ */
.error-links {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.error-links li {
  margin: 12px 0;
}

/* Countdown on cream sections — main.css §15 was designed for aubergine.
   B18: variant for cream-backed countdowns (404, faq, thanks). */
.countdown--on-cream .countdown__label {
  color: var(--surface-ink);
}
.countdown--on-cream .countdown__number,
.countdown--on-cream .countdown__sep {
  color: var(--brand-aubergine);
}


/* ============================================================
   12. TRUST / CLOSING CTA SECTIONS
   ------------------------------------------------------------
   B21: never center body text. Per BUILD_CONTRACT line 192.
   ============================================================ */
.section--trust {
  background: var(--surface-cream);
  padding-block: var(--section-pad-mobile);
  padding-inline: 0;
}
@media (min-width: 768px) {
  .section--trust {
    padding-block: var(--section-pad-desktop);
  }
}
.trust-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  font-size: 0.95rem;
  color: var(--ink-muted);
  /* NOT centered — left-align per hard rule */
}
/* Patched 2026-06-01: handle BOTH .section--closing-cta (about-hy) and
   .section--closing (index). The Home closing block previously rendered
   as a cream image-band with a huge gap before the footer because the
   image-overlay rules didn't constrain padding. Force aubergine fill,
   white text, no center alignment, and a sensible bottom padding. */
.section--closing,
.section--closing-cta {
  background: var(--brand-aubergine);
  color: var(--surface-white);
  padding-block: var(--section-pad-mobile);
  padding-inline: 0;
  /* B21: NOT centered. */
  text-align: left !important;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .section--closing,
  .section--closing-cta {
    padding-block: var(--section-pad-desktop);
  }
}
.section--closing .h1,
.section--closing .h2,
.section--closing h1,
.section--closing h2,
.section--closing-cta .h1,
.section--closing-cta .h2,
.section--closing-cta h1,
.section--closing-cta h2 {
  color: var(--surface-white);
}
.section--closing .body,
.section--closing p,
.section--closing-cta .body,
.section--closing-cta p {
  color: var(--brand-lilac);
}
/* Patched 2026-06-02 (Sam): closing-CTA Register button uses the site-wide
   orange-pill spec — was white-on-aubergine. Override removed so the base
   .btn--primary (terracotta) wins. Hover: aubergine (inverse). */
.section--closing .btn--primary,
.section--closing-cta .btn--primary {
  background: var(--brand-terracotta) !important;
  color: var(--surface-white) !important;
}
.section--closing .btn--primary:hover,
.section--closing .btn--primary:focus-visible,
.section--closing-cta .btn--primary:hover,
.section--closing-cta .btn--primary:focus-visible {
  background: var(--brand-aubergine) !important;
  color: var(--surface-white) !important;
}
/* When the closing section contains a background image + overlay
   (Home pattern), suppress the image and keep the aubergine fill —
   the image was producing the cream-band-before-footer gap. */
.section--closing .section__image,
.section--closing-cta .section__image {
  display: none;
}
.section--closing .section__overlay,
.section--closing-cta .section__overlay {
  display: none;
}
.section--closing .container,
.section--closing-cta .container {
  position: relative;
  z-index: 1;
}
.section--closing .section__closing-content,
.section--closing-cta .section__closing-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.section--closing .section__closing-micro {
  color: var(--brand-lilac);
  font-size: var(--fs-small);
  opacity: 0.85;
}
.closing-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  /* NOT centered */
  justify-content: flex-start;
}


/* ============================================================
   13. (REMOVED) .btn--orange — invalid off-palette token.
   ------------------------------------------------------------
   B7: removed entirely. About-HY closing "Visit Health Yetu"
   CTA should use .btn--primary (aubergine pill). For hierarchy,
   make the secondary use .btn--secondary (cream/ink/border).
   We leave a no-op alias so that any HTML still wearing
   .btn--orange degrades to .btn--primary styling, not white-
   on-white invisibility.
   ============================================================ */
.btn--orange {
  /* alias: behave as .btn--primary so we don't break the page if
     the HTML hasn't been rewritten yet. */
  background: var(--brand-aubergine) !important;
  color: var(--surface-white) !important;
  border: 0;
}
.btn--orange:hover,
.btn--orange:focus-visible {
  background: var(--brand-terracotta) !important;
}


/* ============================================================
   13b. AFTERMOVIE PLACEHOLDER
   ------------------------------------------------------------
   Patched 2026-06-01: hide the placeholder iframe block when no
   real YouTube ID is set (data-youtube-id="TBD" or missing).
   Otherwise the Home page renders a broken empty iframe slot
   between the pillar grid and cumulative stat band.
   ============================================================ */
.aftermovie__frame[data-youtube-id="TBD"],
.aftermovie__frame:not([data-youtube-id]),
.aftermovie-placeholder[data-youtube-id="TBD"],
.aftermovie-placeholder:not([data-youtube-id]):not([data-has-content]) {
  display: none !important;
}
/* When the frame is hidden, hide its caption too. */
.aftermovie:has(.aftermovie__frame[data-youtube-id="TBD"]) .aftermovie__caption,
.aftermovie:has(.aftermovie__frame:not([data-youtube-id])) .aftermovie__caption {
  display: none !important;
}
/* And the entire aftermovie wrapper if every child is suppressed. */
.aftermovie:has(.aftermovie__frame[data-youtube-id="TBD"]):not(:has(.aftermovie__frame:not([data-youtube-id="TBD"]))) {
  display: none !important;
}


/* ============================================================
   14. MAP PLACEHOLDERS
   ============================================================ */
.map-placeholder,
.map-static-kenya {
  width: 100%;
  min-height: 320px;
  background: var(--surface-cream);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-aubergine);
  font-weight: 600;
  margin: 24px 0;
}
.map-placeholder::after,
.map-static-kenya::after {
  content: "Map preview";
  opacity: 0.6;
}


/* ============================================================
   15. DAY ACCORDION SUB-ELEMENTS
   ------------------------------------------------------------
   B13: hierarchy collapsed because the-race.html emits
   .day-accordion__date / __activity / __altitude / __distance /
   __preview / __meta / __body without rules.
   ============================================================ */
.day-accordion__date {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-lilac);
}
.day-accordion__activity {
  display: block;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1.3;
  color: inherit;
}
.day-accordion__altitude,
.day-accordion__distance {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: inherit;
  opacity: 0.85;
}
.day-accordion__preview {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: inherit;
  opacity: 0.85;
  margin-top: 4px;
}
.day-accordion__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 16px 0;
  font-size: 0.9375rem;
}
.day-accordion__meta dt {
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  color: var(--brand-lilac);
  align-self: center;
}
.day-accordion__meta dd {
  margin: 0;
  color: inherit;
}
.day-accordion__body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: inherit;
}
.day-accordion__body p + p {
  margin-top: 12px;
}


/* ============================================================
   16. RACE-TOGGLE SUB-ELEMENTS
   ------------------------------------------------------------
   B14: legs / leg-label / leg-value / leg-note / total / total-value.
   Patched 2026-06-01 (LEFT-ALIGN FLEX REWRITE per Sam): legs flow
   left-to-right with a fixed gap. First leg aligns to the card's
   left edge (matching the card title). Each leg sizes to its natural
   width — long notes wrap inside the leg's max-width without breaking
   the row. // Left-align flex pattern per Sam's instruction. */
.race-toggle__legs {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-4);
  list-style: none;
  padding: 0;
}
.race-toggle__legs > li {
  flex: 0 0 auto;                              /* natural width per content */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;                                /* allow shrink only if absolutely needed */
  /* no max-width — block sizes to content. Patched 2026-06-01d (Sam): removed
     the 220px cap so the label + value can size to their natural widths and
     labels stay on one line (see .race-toggle__leg-label nowrap). */
}
@media (max-width: 480px) {
  .race-toggle__legs {
    flex-direction: column !important;
  }
  .race-toggle__legs > li {
    max-width: 100%;
  }
}
.race-toggle__leg-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--brand-terracotta);
  display: block;
  margin-bottom: 4px;
  white-space: nowrap;                         /* labels stay on one line — block width = max(value, label) */
}
.race-toggle__leg-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.1;
  color: var(--surface-ink);
  display: block;
}
.race-toggle__leg-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-top: 4px;
  display: block;
}
.race-toggle__total {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(23, 20, 17, 0.12);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.race-toggle__total-label,
.race-toggle__total .eyebrow {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-terracotta);
}
.race-toggle__total-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--brand-aubergine);
}


/* ============================================================
   17. CALCULATOR CLASS ALIASES
   ------------------------------------------------------------
   B16: support both naming conventions emitted by calculator.js
   (now emits both, but the CSS aliases let either name win).
   ============================================================ */
.calculator__count {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  color: inherit;
}
.calculator__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: inherit;
  margin-left: 8px;
}


/* ============================================================
   18. FAQ ACCORDION — content wrapper
   ------------------------------------------------------------
   HTML uses .faq-accordion__content for the answer wrapper.
   main.css §16 only styled .faq-accordion__answer. Add the alias.
   ============================================================ */
.faq-accordion__content {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  padding-bottom: var(--space-2);
}
.faq-accordion__content p + p {
  margin-top: 12px;
}
.faq-accordion__bucket-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--surface-ink);
}


/* ============================================================
   19. FOOTER CLASS CONSOLIDATION
   ------------------------------------------------------------
   B11: pages mix .footer__top vs .footer__cols and
   .footer__legal-links vs .footer__bottom-links. Aliases.
   ============================================================ */
.footer__cols,
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .footer__cols,
  .footer__top {
    grid-template-columns: repeat(3, 1fr);
  }
}
.footer__bottom-links,
.footer__legal-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


/* ============================================================
   20. RESPONSIVE COLLAPSES
   ============================================================ */
@media (max-width: 640px) {
  /* Stale grid-template-columns rule replaced by flex-direction:
     these grids are now LEFT-ALIGN FLEX (see §23 C4–C11). The
     base rules already set flex-direction: column on mobile. */
  .step-grid,
  .compare-grid,
  .eligibility-grid,
  .compare {
    flex-direction: column !important;
  }
  .trust-line {
    gap: 16px;
  }
  .legal__body,
  .legal-page__body {
    font-size: 1rem;
  }
}


/* ============================================================
   21. NAV LOGO — DUAL-IMAGE WHITE/BLACK SWAP
   ------------------------------------------------------------
   Added 2026-06-01 with the Yetu Triathlon brand mark.
   Each nav contains TWO <img> tags:
     .nav__logo-img--white (for dark hero / transparent nav)
     .nav__logo-img--black (for cream-on-ink nav)
   CSS picks which one is visible based on nav state.

   Patched 2026-06-01c (double-logo fix):
     Earlier rules in main.css used `.nav__logo img` (specificity 0,1,1)
     which OUTRANKED `.nav__logo-img--black { display: none }` (0,1,0)
     — both images rendered side by side. main.css was tightened to use
     only `.nav__logo-img` (0,1,0), so the simple class swap below now
     wins on equal specificity by source order (supplemental loads last).
     The previous `body.subpage .nav__logo-img--*` overrides were removed
     — every page now starts in the un-scrolled state (white logo) and
     swaps to black on `.nav--scrolled`. The parallel hero-overlay-nav
     fix agent owns the matching `body.subpage` nav-background cleanup.

   Logo is also larger now — Sam reported the old yt_logo at
   140x40 was too small. New default is up to 64px tall.
   ============================================================ */
.nav__logo {
  display: inline-flex;
  align-items: center;
  /* The two stacked <img>s share the same slot; only one is shown. */
}

/* Default state: white logo visible (over hero photo). */
.nav__logo-img { max-height: 64px; height: auto; width: auto; }
.nav__logo-img--black { display: none; }
.nav__logo-img--white { display: block; }

/* Scrolled state: nav becomes cream → swap to black logo. */
.nav.nav--scrolled .nav__logo-img--white,
.nav--scrolled .nav__logo-img--white { display: none; }
.nav.nav--scrolled .nav__logo-img--black,
.nav--scrolled .nav__logo-img--black { display: block; }

/* Mobile size. */
@media (max-width: 768px) {
  .nav__logo-img { max-height: 48px; }
}


/* ============================================================
   22. FOOTER LOGO — ALWAYS WHITE, BIGGER
   ------------------------------------------------------------
   Footer is always aubergine — the white logo always wins.
   Bump the displayed size to match the new Yetu Triathlon mark.
   ============================================================ */
.footer__logo {
  display: block;
  max-height: 80px;
  height: auto;
  width: auto;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .footer__logo {
    max-height: 64px;
  }
}


/* ============================================================
   23. VISUAL-AUDIT FIXES (2026-06-01)
   ------------------------------------------------------------
   Driven by /Users/samvanooijen/yetutriathlon_site/VISUAL_AUDIT.md
   Sam: "horizontals often still not well aligned and too large
   text size to fit on the pages. SAME SETTINGS everywhere."
   HARD RULES enforced site-wide:
     - Horizontal grids = `repeat(N, 1fr); gap: 2rem` desktop,
       single-column mobile at 768px (or 480px for stat-bands).
     - No per-cell clamp() font sizes in display text.
     - Step-numbers: 3rem Cosmic Buns aubergine, no circle bg.
     - Partner / pillar / sponsor tier cards equal-height.
     - Closing CTAs: aubergine, left-aligned, padding 96px 0.
   ============================================================ */

/* --- C1, C2, C3: section-header rhythm (eyebrow + h2 + lede) --- */
.eyebrow + .h2,
.eyebrow + h2,
.eyebrow + h3,
.eyebrow + .h3 {
  margin-top: var(--space-2);
}
.section__header {
  max-width: 720px;
  margin-bottom: var(--space-5);
}
.section__header .h2 + .body,
.section__header h2 + p,
.section__header .h2 + p {
  margin-top: var(--space-3);
}
.section__lede {
  max-width: 720px;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Patched 2026-06-02 (SECTION INTERNAL RHYTHM FALLBACK):
   Many sections don't wrap content in `.section__header`. Those sections
   render as bare children of `.container` and feel cramped because nothing
   sets vertical gaps between eyebrow / h2 / body / CTA. This adds default
   spacing to direct `.container` children inside any `.section`, without
   touching sections that DO use `.section__header` (its children are
   wrapped one level deeper so this selector doesn't reach them). */
.section > .container > * + *,
.section > .container--narrow > * + * {
  margin-top: var(--space-4);                 /* 24px default sibling gap */
}
.section > .container > .eyebrow + .h2,
.section > .container > .eyebrow + h2,
.section > .container--narrow > .eyebrow + .h2,
.section > .container--narrow > .eyebrow + h2 {
  margin-top: var(--space-2);                 /* 8px tight eyebrow→h2 */
}
.section > .container > .h2 + .body,
.section > .container > .h2 + p,
.section > .container > h2 + p,
.section > .container--narrow > .h2 + .body,
.section > .container--narrow > .h2 + p,
.section > .container--narrow > h2 + p {
  margin-top: var(--space-3);                 /* 16px h2→body */
}
.section > .container > p + .btn,
.section > .container > .body + .btn,
.section > .container > p + .btn--text,
.section > .container > .body + .btn--text,
.section > .container--narrow > p + .btn,
.section > .container--narrow > .body + .btn,
.section > .container--narrow > p + .btn--text,
.section > .container--narrow > .body + .btn--text {
  margin-top: var(--space-5);                 /* 32px body→CTA (pill OR text link) */
}

/* Patched 2026-06-02 (CLOSING-CTA → FOOTER COMPRESSION, Sam):
   The closing CTA's bottom padding + the footer's top padding stack to a
   192px+ gap on desktop, which feels disconnected. Pull them together so
   the "Register" pill sits closer to the footer's "About" block — visual
   continuity between the call-to-action and the legal/contact info that
   follows. Override scoped to (a) closing-CTA bottom and (b) footer top
   only — section→section gaps elsewhere remain at the canonical token. */
.section.closing-cta,
.section--closing,
.section--closing-cta,
section.closing-cta {
  padding-bottom: var(--space-6) !important;  /* 48px mobile + desktop */
}

/* Patched 2026-06-02 (RACE-TOGGLE ON AUBERGINE BG):
   The race-toggle tabs + leg labels/values/notes were styled for cream.
   When the section is .section--aubergine (purple), the dark ink text +
   greyed-muted inactive-tab color disappear against the bg. Light-on-dark
   variant scoped to the aubergine section only. */
.section--aubergine .race-toggle__tablist {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}
.section--aubergine .race-toggle__tab {
  color: rgba(255, 255, 255, 0.65);             /* inactive tab — soft white */
}
.section--aubergine .race-toggle__tab[aria-selected="true"] {
  color: var(--surface-white);                  /* selected — full white */
  border-bottom-color: var(--brand-lilac);      /* lilac underline pops on aubergine */
}
.section--aubergine .race-toggle__tab:hover {
  color: var(--surface-white);
}
.section--aubergine .race-toggle__leg-label {
  color: var(--brand-lilac);                    /* lilac label on aubergine */
}
.section--aubergine .race-toggle__leg-value {
  color: var(--surface-white);
}
.section--aubergine .race-toggle__leg-note {
  color: rgba(255, 255, 255, 0.75);             /* slightly subdued note */
}
.section--aubergine .race-toggle__total {
  border-top-color: rgba(255, 255, 255, 0.25);  /* divider visible on aubergine */
}
.section--aubergine .race-toggle__total-label,
.section--aubergine .race-toggle__total .eyebrow {
  color: var(--brand-lilac);                    /* matches leg-label treatment */
}
.section--aubergine .race-toggle__total-value {
  color: var(--surface-white);                  /* was aubergine-on-aubergine — invisible */
}

/* Patched 2026-06-02: connector word ("or") inside a .stat-band__number
   should sit smaller + lighter than the surrounding numerals so the
   numbers carry the visual weight. Used on the-race AT A GLANCE for
   "25 or 75 km". */
.stat-band__connector {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.45em;                            /* relative to the big numeric size */
  text-transform: lowercase;
  letter-spacing: 0.02em;
  vertical-align: middle;
  opacity: 0.75;
  margin: 0 0.15em;
}
.footer {
  padding-top: var(--space-6) !important;     /* 48px mobile + desktop */
}
@media (min-width: 1024px) {
  .section.closing-cta,
  .section--closing,
  .section--closing-cta,
  section.closing-cta {
    padding-bottom: var(--space-6) !important;
  }
  .footer {
    padding-top: var(--space-6) !important;
  }
}

/* --- C4: .how-grid (fundraise) — LEFT-ALIGN FLEX per Sam's instruction
   (was grid 1fr → 3fr). First card aligns to section left edge; cards
   flow right with fixed gap and grow to fill the row.
   // Left-align flex pattern per Sam's instruction. */
.how-grid {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 2rem !important;
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}
.how-grid > * {
  flex: 1 1 240px;
  min-width: 0;
}
@media (min-width: 768px) {
  .how-grid {
    flex-direction: row !important;
  }
}
.how-step {
  background: var(--surface-white);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 220px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* --- C5, C6, C7: step-grid + step-number — LEFT-ALIGN FLEX per Sam's
   instruction (was grid 1fr → 2fr → 4fr). First step aligns to section
   left edge; cards flow right with a fixed gap and grow to fill space.
   // Left-align flex pattern per Sam's instruction. */
.step-grid,
.steps-grid {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 2rem !important;
  margin: var(--space-6) 0 0 !important;
  list-style: none;
  padding: 0;
}
.step-grid > *,
.steps-grid > * {
  flex: 1 1 220px;
  min-width: 0;
}
@media (min-width: 768px) {
  .step-grid,
  .steps-grid {
    flex-direction: row !important;
  }
}
.step-grid__item,
.steps-grid__item,
.step,
.how-step {
  background: var(--surface-white);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  min-height: 0;
}
.step-grid__number,
.steps-grid__number,
.step__number,
.how-step__num {
  display: block;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  color: var(--brand-aubergine) !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 0.75rem !important;
  text-align: left !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  .step-grid__number,
  .steps-grid__number,
  .step__number,
  .how-step__num {
    font-size: 2.25rem !important;
  }
}

/* --- C8, C9, C10, C11: compare/eligibility cards — LEFT-ALIGN FLEX
   per Sam's instruction (was grid 1fr/repeat(2, 1fr)). First card aligns
   to section left edge; cards grow to fill the row with a fixed gap.
   // Left-align flex pattern per Sam's instruction. */
.compare-grid,
.compare,
.eligibility-grid {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 2rem !important;
  margin: var(--space-6) 0 0 !important;
  list-style: none;
  padding: 0;
}
.compare-grid > *,
.compare > *,
.eligibility-grid > * {
  flex: 1 1 280px;
  min-width: 0;
}
@media (min-width: 768px) {
  .compare-grid,
  .compare,
  .eligibility-grid {
    flex-direction: row !important;
  }
}
.compare-col,
.compare__col {
  background: var(--surface-white);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  border: 1px solid rgba(23, 20, 17, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Patched 2026-06-02: lock dark text + dark bullet markers inside the
     white compare cards, regardless of the parent section's color. When
     the parent section is .section--aubergine, the section's white-text
     cascade made bullets + body white-on-white (invisible). */
  color: var(--surface-ink);
}
.compare-col *,
.compare__col * {
  color: var(--surface-ink);
}
/* Restore aubergine + underline for inline links inside the white compare
   cards (e.g. rescue.co in the Included list). Was inheriting ink color
   from the * rule above. */
.compare-col a,
.compare__col a {
  color: var(--brand-aubergine);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.compare-col a:hover,
.compare-col a:focus-visible,
.compare__col a:hover,
.compare__col a:focus-visible {
  color: var(--brand-terracotta);
}
/* Patched 2026-06-02 (Sam): both columns get a terracotta orange accent
   line on top (was: aubergine on --in, ink-muted on --out). Consistent
   visual treatment + matches the site-wide orange CTA palette. */
.compare-col--included,
.compare__col--in,
.compare-col--excluded,
.compare__col--out {
  border-top: 4px solid var(--brand-terracotta);
}
.compare-list,
.compare__list {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0;
}
.compare-list li,
.compare__list li {
  margin-bottom: 0.5em;
  line-height: 1.6;
}

/* --- C13: .stat-band__grid baseline (covers fundraise + impact where the
   flex container sits at section root, not inside .container).
   Patched 2026-06-01: container constraints only — display/flex behaviour
   is now owned by main.css §10 (left-align flex pattern per Sam).
   Patched 2026-06-01c (STAT-BAND ALIGNMENT FIX — Sam's Image #28):
   The previous version applied `padding-inline: var(--container-pad)` to
   EVERY `.stat-band__grid`, including the ones that already sit inside a
   `<div class="container">`. That produced a DOUBLE gutter: the `.container`
   contributed `--container-pad` on the left, then this rule added another
   `--container-pad` on top — so the first stat item ("€37,000") landed
   ~40-80 px to the right of the section H2 ("Twelve climbed. Twelve
   summited."), which was rendered by the outer `.container` only.
   Fix: keep the rule's auto-margin + max-width, but ONLY add padding-inline
   when the grid is NOT a descendant of `.container` (i.e. impact.html +
   fundraise.html where the grid sits directly under the section). For grids
   inside `.container`, the container already supplies the gutter, so we
   neutralise this rule via the overrides below. --- */
.stat-band__grid {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  /* Patched 2026-06-02 (X-AXIS UNIFICATION): canonical page-gutter so
     stat-bands that sit at section-root (impact.html, fundraise.html)
     share the same left edge as `.container`-wrapped stat-bands. */
  padding-inline: var(--page-gutter);
}
/* Neutralise the C13 padding when the grid is INSIDE a .container — the
   container already provides the horizontal gutter. Also catches Pattern A
   (`.stat-band` as direct flex parent) when wrapped in `.container`. */
.container .stat-band__grid,
.container .stat-band:has(> .stat-band__item) {
  padding-inline: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  max-width: none;          /* the parent .container already caps width */
}
.container .stat-band__item:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* --- C13b: vertical divider between consecutive stat items.
   Patched 2026-07-30 (STAT-BAND GRID REWRITE): dividers now apply only at
   ≥901px, where 4-cell and 3-cell layouts both sit on a single row. Below
   that, cells wrap to 2×2 or 1-col stacks and the gap alone is enough. --- */
@media (min-width: 901px) {
  .stat-band__item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }
  /* Cream-section dividers use ink alpha for contrast. */
  .section--cream .stat-band__item:not(:last-child),
  .stat-band--pilot .stat-band__item:not(:last-child) {
    border-right-color: rgba(23, 20, 17, 0.10);
  }
}

/* --- C14, C15: day-accordion trigger — explicit grid so the 5 children
   don't get squeezed by `justify-content: space-between`. Columns size
   to content per row (won't perfectly align across rows, but no overflow). --- */
.day-accordion__trigger {
  display: grid !important;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  column-gap: var(--space-3);
  text-align: left;
}
.day-accordion__trigger > * {
  min-width: 0;
  overflow-wrap: break-word;
}
.day-accordion__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1;
  color: inherit;
  flex: 0 0 auto;
}
.day-accordion__activity {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1.25;
  color: inherit;
  white-space: normal;
}
@media (max-width: 768px) {
  .day-accordion__trigger {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "num activity icon"
      "date date date"
      "preview preview preview";
    row-gap: 4px;
  }
  .day-accordion__num     { grid-area: num; font-size: 1.75rem; }
  .day-accordion__date    { grid-area: date; }
  .day-accordion__activity{ grid-area: activity; font-size: 1rem; }
  .day-accordion__preview { grid-area: preview; }
  .day-accordion__icon    { grid-area: icon; }
}

/* --- C16, C17: race-toggle leg values + total = FIXED size, no clamp --- */
.race-toggle__leg-value {
  font-size: 2rem !important;
  line-height: 1.1;
}
.race-toggle__total-value {
  font-size: 2rem !important;
  line-height: 1.1;
}
@media (max-width: 768px) {
  .race-toggle__leg-value,
  .race-toggle__total-value {
    font-size: 1.625rem !important;
  }
}

/* --- C18, C19: .closing-cta (no `section--` prefix) gets the same
   aubergine left-aligned treatment as .section--closing-cta. Travel
   page emits .closing-cta with a centered overlay block; override. --- */
.closing-cta {
  background: var(--brand-aubergine) !important;
  color: var(--surface-white) !important;
  padding-block: var(--section-pad-mobile) !important;
  padding-inline: 0 !important;
  min-height: 0 !important;
  text-align: left !important;
  position: relative;
  overflow: hidden;
  display: block !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
@media (min-width: 768px) {
  .closing-cta {
    padding-block: var(--section-pad-desktop) !important;
  }
}
.closing-cta__image,
.closing-cta__overlay {
  display: none !important;
}
.closing-cta__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  /* Patched 2026-06-02 (X-AXIS UNIFICATION): closing CTA content shares
     the canonical page x-axis with every other section wrapper. */
  padding: 0 var(--page-gutter);
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
  gap: var(--space-4);
}
.closing-cta__h2,
.closing-cta h2,
.closing-cta .h2 {
  color: var(--surface-white) !important;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-align: left !important;
}
.closing-cta__micro,
.closing-cta p {
  color: var(--brand-lilac);
  text-align: left !important;
}
.closing-cta .eyebrow {
  color: var(--brand-lilac);
}
/* Same orange treatment for .closing-cta (no --section prefix, used on
   travel-and-logistics and the-race closing CTAs). Patched 2026-06-02. */
.closing-cta .btn--primary {
  background: var(--brand-terracotta) !important;
  color: var(--surface-white) !important;
}
.closing-cta .btn--primary:hover,
.closing-cta .btn--primary:focus-visible {
  background: var(--brand-aubergine) !important;
  color: var(--surface-white) !important;
}

/* --- C20, C21, C22: partner card equal-height + uniform placeholder --- */
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: var(--surface-white);
  border-radius: var(--radius-card);
  min-height: 240px;
}
.partner-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  max-width: 100%;
}
.partner-card__placeholder {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--ink-muted);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  background: var(--surface-cream);
  border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3);
}
.partner-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  text-align: center;
  justify-content: flex-start;
}
.partner-card__name {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--surface-ink);
  margin: 0;
}
.partner-card__role {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
}
.partner-card__location {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-aubergine);
  margin-top: auto;
}

/* --- C23: extension tiles 2-col (travel) --- */
.extension-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .extension-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- C24: tips-list (fundraise) — kill the disc list-style so the inline
   ol with custom number spans doesn't double-number. Also consolidates the
   per-li grid + numeral styling that used to live as repeated inline styles. --- */
.tips-list {
  list-style: none !important;
  padding: 0 !important;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tips-list > li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}
.tips-list__num {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--brand-lilac);
}
.tips-list strong {
  font-weight: 900;
}

/* --- Pillar card equal-height + cost-number alignment uniform --- */
.pillar-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pillar-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pillar-card__cost {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.pillar-card__cost-number {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--surface-ink);
}
@media (max-width: 768px) {
  .pillar-card__cost-number { font-size: 2rem; }
}
.pillar-card__cost-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--surface-ink);
  opacity: 0.85;
}

/* --- Pillar grid HARD ENFORCE: 3-col desktop, single-col mobile.
   Some pages place .pillar-grid both as direct child of .section and
   wrapped in .container — main.css §11 covers both; this re-asserts
   the gap and tightens the mobile breakpoint. --- */
.pillar-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
}
@media (min-width: 768px) {
  .pillar-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* --- Partner grid HARD ENFORCE: 4 desktop, 2 tablet, 1 mobile --- */
.partner-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
}
@media (min-width: 640px) {
  .partner-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 1024px) {
  .partner-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* --- Footer cols HARD ENFORCE: 3-col desktop, single mobile --- */
.footer__cols,
.footer__top {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-6) !important;
}
@media (min-width: 768px) {
  .footer__cols,
  .footer__top {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.5rem !important;
  }
}

/* --- FAQ accordion item — uniform spacing, prevent the +/- glyph from
   shifting when long questions wrap --- */
.faq-accordion__item summary {
  align-items: flex-start;
}
.faq-accordion__item summary > * {
  min-width: 0;
}

/* --- H2 uniform inside .section--aubergine + .section--ink (ensure white
   text everywhere, including pages that wrote `style="color:white"` inline) --- */
.section--aubergine .h2,
.section--aubergine h2,
.section--ink .h2,
.section--ink h2,
.stat-band .h2,
.stat-band h2 {
  color: var(--surface-white);
}
.section--aubergine .body,
.section--aubergine p:not(.eyebrow),
.section--ink .body,
.section--ink p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.92);
}

/* --- H2 fixed sizes site-wide (override clamp() if any subagent
   introduced one). main.css §3 ships fixed values; supplemental reasserts. --- */
.h2,
h2 {
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .h2,
  h2 { font-size: 2rem; }
}
@media (min-width: 1024px) {
  .h2,
  h2 { font-size: 2.25rem; }
}

/* --- Container padding sane mobile baseline (override per-page drift).
   Patched 2026-06-02 (X-AXIS UNIFICATION): both `.container` and
   `.container--narrow` now use the canonical `--page-gutter` and
   `--page-max` tokens, so their left-edges align exactly. The 720px
   constraint moved onto the children via `.container--narrow > *`
   (see main.css §4). DO NOT reintroduce `.container--narrow {
   max-width: 720px }` here — it would re-center the narrow body and
   shift its left edge ~240px to the right of `.container`. --- */
.container,
.container--narrow {
  padding-inline: var(--page-gutter);
  max-width: var(--page-max);
}
.container--narrow > * {
  max-width: var(--container-narrow);
  margin-inline-start: 0;
}

/* --- Section uniform padding rhythm (covers `.section`, `.section--cream`,
   etc.). main.css §4 sets 64/96; this is a belt-and-suspenders for any
   page that wrote inline `padding-top:32px`. The override is intentional
   only on fundraise tax-note section; we leave that one alone via
   inline specificity — but ALL other sections get uniform padding. --- */
@media (min-width: 1024px) {
  .section {
    padding-top: var(--section-pad-desktop);
    padding-bottom: var(--section-pad-desktop);
  }
}

/* --- Hero short variants — uniform 60svh for short pages (faq, thanks,
   privacy, terms, photo-release, partners). --- */
/* Hero height duplicates removed 2026-06-02 — canonical 70svh for every
   non-home hero is now defined ONCE in main.css §9. Earlier duplicates
   here (.hero--short at 50svh desktop, .hero--faq at 35svh) were
   overriding main.css due to load order and producing inconsistent
   per-page hero heights. Single source of truth in main.css. */

/* --- Closing CTA on travel page specifically: defeat the inline `<style>`
   block that centered the content and applied a 60svh image bleed. --- */
section.closing-cta {
  min-height: auto !important;
  display: block !important;
}
section.closing-cta .closing-cta__content {
  padding-block: var(--space-8) !important;
}

/* --- legal TOC card — same width as legal body for visual harmony --- */
.legal-toc {
  margin-inline: 0;
}

/* End of section 23. */


/* ============================================================
   §24 CAROUSEL
   ------------------------------------------------------------
   Reusable rotating slide component. Markup contract:
     <section class="carousel" data-carousel data-autoplay="6000">
       <div class="carousel__track">
         <div class="carousel__slide is-active"> ... </div>
         ...
       </div>
       <button class="carousel__prev">‹</button>
       <button class="carousel__next">›</button>
       <div class="carousel__dots"></div>
     </section>
   Behaviour wired in /assets/js/carousel.js (IIFE, defensive nulls).
   ============================================================ */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  outline: none;
}
.carousel:focus-visible {
  outline: 2px solid var(--brand-terracotta);
  outline-offset: 2px;
}

/* Slide stack: all slides occupy the same grid cell; fade controls which
   one is visible. opacity transition is the only animation. */
.carousel__track {
  position: relative;
  display: grid;
  grid-template-areas: "slide";
  width: 100%;
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
  .carousel__track {
    aspect-ratio: 16 / 9;
  }
}

.carousel__slide {
  grid-area: slide;
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s linear 0s;
}
.carousel__slide picture,
.carousel__slide > img {
  display: block;
  width: 100%;
  height: 100%;
}
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption: bottom-pinned gradient backdrop for legibility, white text. */
.carousel__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem;
  color: var(--surface-white);
  background: linear-gradient(180deg, rgba(23, 20, 17, 0) 0%, rgba(23, 20, 17, 0.7) 100%);
}
.carousel__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--surface-white);
}
.carousel__sub {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
  color: var(--surface-white);
}

/* Prev / Next buttons: circular aubergine, white glyph, hover lilac. */
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand-aubergine);
  color: var(--surface-white);
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background-color 150ms ease;
}
.carousel__prev { left: 1rem; }
.carousel__next { right: 1rem; }
.carousel__prev:hover,
.carousel__next:hover {
  background: var(--brand-lilac);
  color: var(--brand-aubergine);
}
.carousel__prev:focus-visible,
.carousel__next:focus-visible {
  outline: 2px solid var(--brand-terracotta);
  outline-offset: 2px;
}

/* Dots: row of circles under the slide, aubergine outline, filled when active. */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 0;
}
.carousel__dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--brand-aubergine);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.carousel__dots button.is-active,
.carousel__dots button[aria-current="true"] {
  background: var(--brand-aubergine);
}
.carousel__dots button:focus-visible {
  outline: 2px solid var(--brand-terracotta);
  outline-offset: 2px;
}

/* Mobile: shrink the arrows so they don't crowd the slide. */
@media (max-width: 768px) {
  .carousel__prev,
  .carousel__next {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  .carousel__prev { left: 0.5rem; }
  .carousel__next { right: 0.5rem; }
  .carousel__caption {
    padding: 1rem;
  }
  .carousel__title {
    font-size: 1.25rem;
  }
  .carousel__sub {
    font-size: 0.9375rem;
  }
}

/* Reduced motion: cut the fade entirely. */
@media (prefers-reduced-motion: reduce) {
  .carousel__slide,
  .carousel__slide.is-active {
    transition: none;
  }
}

/* ----------------------------------------------------------------
   .carousel--small — narrower + shorter modifier.
   Used by the pilot 2025 carousel on the-race page so the slide
   fits on a 1080p laptop viewport (default 16/9 at 1200px = 675px
   tall, which combined with fixed nav (~80px) eats ~75% of the
   viewport). 800px / 3:2 = 533px tall, 800px / 4:3 mobile = 600px.
   Wildlife carousel keeps default sizing — Sam wants that one big.
   ---------------------------------------------------------------- */
.carousel--small {
  max-width: 800px;
  margin-inline: auto;
}
.carousel--small .carousel__track {
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
  .carousel--small .carousel__track {
    aspect-ratio: 3 / 2;
  }
}

/* End of section 24. */


/* ============================================================
   §25 HERO H1 TWO-LINE LAYOUT + ORANGE CTA VARIANT (2026-06-02)
   ------------------------------------------------------------
   Sam's ask: keep "on Mount Kenya" on a single line slightly
   smaller than "Yetu Triathlon", and add a terracotta-filled
   "Or donate" pill matching the Register pill shape.
   ============================================================ */

.hero__h1 {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.hero__h1-main {
  display: block;
  /* inherits .h1 font-size — this is the dominant line */
}

.hero__h1-sub {
  display: block;
  font-size: 0.62em;       /* ~62% of the main H1 size */
  font-weight: 500;        /* lighter than the main 900 */
  line-height: 1.1;
  letter-spacing: -0.01em;
  opacity: 0.95;
  white-space: nowrap;     /* keep "on Mount Kenya" intact */
}

/* Orange (terracotta-filled) primary button — same as the new site-wide
   .btn--primary default, kept for legacy class usage. Hover → aubergine. */
.btn--primary.btn--primary-orange {
  background: var(--brand-terracotta) !important;
  color: var(--surface-white) !important;
}
.btn--primary.btn--primary-orange:hover,
.btn--primary.btn--primary-orange:focus-visible {
  background: var(--brand-aubergine) !important;
}

/* Purple (aubergine-filled) primary button — for secondary CTAs that
   need to contrast against the orange site-wide default. Hover → orange. */
.btn--primary.btn--primary-purple {
  background: var(--brand-aubergine) !important;
  color: var(--surface-white) !important;
}
.btn--primary.btn--primary-purple:hover,
.btn--primary.btn--primary-purple:focus-visible {
  background: var(--brand-terracotta) !important;
}

/* End of section 25. */


/* ============================================================
   §26 INTERACTIVE MAPS (Leaflet, embedded)
   ------------------------------------------------------------
   .interactive-map gets explicit height — Leaflet renders into a
   div via its own internal sizing and CANNOT determine the
   container's height on its own. Without this rule the map ends
   up 0px tall and appears missing.

   .elevation-profile likewise needs a fixed height for the
   leaflet-elevation chart to render.

   Both are MOBILE-FIRST: ~360px on phones (small but usable),
   bumped to 520px on tablet+ and 640px on widescreens.
   ============================================================ */
.interactive-map {
  width: 100%;
  height: 360px;
  margin-top: var(--space-4);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-cream);  /* placeholder while tiles load */
  border: 1px solid rgba(23, 20, 17, 0.08);
}
@media (min-width: 768px) {
  .interactive-map {
    height: 520px;
  }
}
@media (min-width: 1200px) {
  .interactive-map {
    height: 640px;
  }
}

.elevation-profile {
  width: 100%;
  min-height: 180px;
  margin-top: var(--space-3);
}
@media (min-width: 768px) {
  .elevation-profile {
    min-height: 220px;
  }
}

/* Ensure Leaflet popups and controls inherit reasonable typography. */
.leaflet-popup-content {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  margin: 12px 14px;
}
.leaflet-popup-content strong {
  font-family: var(--font-heading);
  font-weight: 600;
}
.leaflet-container {
  font-family: var(--font-body);
}

/* End of section 26. */


/* ============================================================
   §27 BULLET-LIST (SITE-WIDE)
   ------------------------------------------------------------
   Square-marker list, originally page-local to travel-and-logistics.
   Lifted here so every page can use the same style: aubergine square
   markers + ink text on cream sections; lilac square markers + white
   text on aubergine sections.

   Sam's preferred bullet style across the whole site.
   ============================================================ */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bullet-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--surface-ink);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--brand-aubergine);
}
.bullet-list a {
  color: var(--brand-aubergine);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bullet-list a:hover,
.bullet-list a:focus-visible {
  color: var(--brand-terracotta);
}
.bullet-list strong { font-weight: 700; }

/* On aubergine sections, flip text + markers + links so they read on the
   dark purple background. */
.section--aubergine .bullet-list li { color: var(--surface-white); }
.section--aubergine .bullet-list li::before { background: var(--brand-lilac); }
.section--aubergine .bullet-list a { color: var(--brand-lilac); }
.section--aubergine .bullet-list a:hover,
.section--aubergine .bullet-list a:focus-visible { color: var(--surface-white); }

/* End of section 27. */


/* ============================================================
   §28 FAQ HERO HEIGHT OVERRIDE
   ------------------------------------------------------------
   FAQ page is utilitarian — content starts immediately, no need
   for a 45svh hero. Shrink to ~28svh so "Event basics" appears
   right under the subtitle. !important to beat the site-wide
   .hero--faq, ... { min-height: 45svh !important } rule.
   ============================================================ */
.hero--faq {
  min-height: 18svh !important;
}

/* End of section 28. */


/* ============================================================
   §29 BECOME-A-FRIEND INLINE LINK
   ------------------------------------------------------------
   Plain underline by default, aubergine (purple) on hover.
   Used inline in the "Become a Partner" body on partners.html.
   ============================================================ */
.link-friends {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.link-friends:hover,
.link-friends:focus-visible {
  color: var(--brand-aubergine);
}

/* End of section 29. */


/* ============================================================
   §30 NATIVE REGISTRATION FORM
   ------------------------------------------------------------
   Form lives in register.html §5, posts to /api/register
   (Cloudflare Pages Function backed by D1).
   Sits inside .section--cream so default text colour is ink.
   ============================================================ */

.register-form {
  margin-top: var(--space-6);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Honeypot — hide visually + from AT, keep focusable for bots */
.register-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.register-form__group {
  background: var(--surface-white);
  border: 0;
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.register-form__legend {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3, 22px);
  color: var(--brand-aubergine);
  padding: 0;
  margin-bottom: var(--space-2);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-field > label,
.form-field > label:not(.form-radio):not(.form-check) {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--surface-ink);
}

.form-required {
  color: var(--brand-terracotta);
  font-weight: 700;
}

.form-help {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-muted, rgba(23, 20, 17, 0.65));
  line-height: 1.45;
  margin: 0;
}

.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="tel"],
.register-form input[type="date"],
.register-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* ≥16px stops iOS zoom on focus */
  line-height: 1.4;
  color: var(--surface-ink);
  background: var(--surface-cream);
  border: 1px solid rgba(23, 20, 17, 0.15);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.register-form input:focus,
.register-form textarea:focus {
  outline: none;
  border-color: var(--brand-aubergine);
  box-shadow: 0 0 0 3px rgba(88, 14, 65, 0.15);
}

.register-form textarea {
  resize: vertical;
  min-height: 80px;
}

/* Field error state — applied to .form-field wrapper */
.form-field.has-error > label { color: var(--brand-terracotta); }
.form-field.has-error input,
.form-field.has-error textarea {
  border-color: var(--brand-terracotta);
  box-shadow: 0 0 0 3px rgba(195, 73, 34, 0.12);
}

/* ---- Radio group (race choice + altitude yes/no) ---- */
.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.form-radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.form-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-cream);
  border: 1px solid rgba(23, 20, 17, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.form-radio:hover { border-color: var(--brand-aubergine); }
.form-radio input[type="radio"] {
  margin: 4px 0 0;
  accent-color: var(--brand-aubergine);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.form-radio input[type="radio"]:checked + .form-radio__label,
.form-radio:has(input[type="radio"]:checked) {
  border-color: var(--brand-aubergine);
  background: rgba(88, 14, 65, 0.04);
}
.form-radio__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--surface-ink);
}
.form-radio__label strong { font-weight: 700; }
.form-radio__sub {
  font-size: 13px;
  color: var(--ink-muted, rgba(23, 20, 17, 0.7));
}

.form-radio--inline {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(23, 20, 17, 0.2);
  align-items: center;
}
.form-radio--inline span { font-size: 15px; }

/* ---- Checkbox group (dietary, gear) + stacked consent ---- */
.form-check-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 640px) {
  .form-check-group { grid-template-columns: 1fr 1fr; }
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--surface-ink);
  cursor: pointer;
  line-height: 1.45;
}
.form-check input[type="checkbox"] {
  margin: 3px 0 0;
  accent-color: var(--brand-aubergine);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.form-check a {
  color: var(--brand-aubergine);
  text-decoration: underline;
}
.form-check--stacked {
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(23, 20, 17, 0.08);
}
.form-check--stacked:last-child { border-bottom: 0; }

/* ---- Submit row ---- */
.register-form__submit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-3);
}
.register-form__btn {
  min-width: 220px;
}

.form-status {
  font-family: var(--font-body);
  font-size: 14px;
  margin: 0;
  color: var(--surface-ink);
}
.form-status[data-kind="error"] {
  color: var(--brand-terracotta);
  font-weight: 600;
}

/* End of section 30. */


/* ============================================================
   §31 EXPEDITION CHAPTERS (travel-and-logistics §2)
   ------------------------------------------------------------
   Editorial chapter-stack replacing the old trip-arc.
   Two-column grid at ≥960px: chapters left, sticky route-map right.
   Single column below 960px; map hidden on small screens.
   ============================================================ */

.chapters {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.chapters__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.chapter {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-6) var(--space-4);
  border-left: 1px solid var(--brand-aubergine);
}

.chapter:last-child {
  padding-bottom: var(--space-2);
}

.chapter__numeral {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  color: var(--brand-aubergine);
  align-self: start;
  margin: 0;
  min-width: 0;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.chapter__numeral--small {
  font-size: 36px;
  line-height: 1;
}

.chapter__node {
  position: absolute;
  left: -6px;
  top: 0.6rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--brand-lilac);
  transition: background 200ms ease, border-color 200ms ease;
}

.chapter.is-active .chapter__node {
  background: var(--brand-terracotta);
  border-color: var(--brand-terracotta);
}

.chapter__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.chapter__day {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-aubergine);
  margin: 0;
}

.chapter__eyebrow {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-terracotta);
  margin: 0;
}

.chapter__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--surface-ink);
  margin: 0;
  max-width: 28ch;
}

.chapter__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--surface-ink);
  margin: 0;
  max-width: 52ch;
}

.chapter__meta {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chapter__meta li {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--brand-aubergine);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-aubergine);
}

.chapter--optional {
  border-left-style: dashed;
  border-left-color: var(--brand-lilac);
}

.chapter--optional .chapter__numeral,
.chapter--optional .chapter__day,
.chapter--optional .chapter__eyebrow {
  color: var(--brand-lilac);
}

.chapter--optional .chapter__node {
  border-color: var(--brand-lilac);
}

.chapter__map-strip {
  display: none;
}

.chapters__aside {
  display: none;
}

.routemap {
  width: 100%;
  height: auto;
  max-height: 80vh;
  display: block;
}

.routemap__path {
  fill: none;
  stroke: var(--brand-aubergine);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.routemap__contour {
  fill: none;
  stroke: var(--brand-aubergine);
  stroke-width: 0.6;
  opacity: 0.18;
}

.routemap__ridge {
  fill: none;
  stroke: var(--brand-aubergine);
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.35;
}

.routemap__route {
  fill: none;
  stroke: var(--brand-terracotta);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
  transition: opacity 400ms ease, stroke-width 400ms ease;
}

.routemap__route.is-active {
  opacity: 1;
  stroke-width: 2.6;
}

/* Roads (off-mountain, dashed, terracotta) */
.routemap__route--road {
  stroke: var(--brand-terracotta);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  opacity: 0.35;
}
.routemap__route--road.is-active {
  opacity: 1;
  stroke-width: 2;
}

/* Triathlon segments (lilac, lights up on Day 4 chapter) */
.routemap__route--triathlon {
  stroke: var(--brand-lilac);
}
.routemap__route--triathlon.is-active {
  stroke: var(--brand-lilac);
}

.routemap__node {
  fill: var(--surface-cream);
  stroke: var(--brand-aubergine);
  stroke-width: 1.2;
}

.routemap__node--summit {
  fill: var(--brand-terracotta);
  stroke: var(--brand-terracotta);
}

.routemap__node--town {
  fill: var(--surface-cream);
  stroke: var(--brand-aubergine);
  stroke-width: 1.2;
  stroke-dasharray: 1.5 1.5;
}

.routemap__node--triathlon {
  fill: var(--surface-cream);
  stroke: var(--brand-lilac);
  stroke-width: 1.4;
}

.routemap__label {
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--brand-aubergine);
}

.routemap__title {
  font-family: var(--font-display);
  font-size: 14px;
  fill: var(--brand-aubergine);
}

.routemap__compass {
  font-family: var(--font-heading);
  font-size: 8px;
  letter-spacing: 0.1em;
  fill: var(--brand-aubergine);
  opacity: 0.6;
}

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

@media (min-width: 960px) {
  .chapters {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    column-gap: var(--space-7);
    align-items: start;
  }
  .chapters__aside {
    display: block;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
  }
  .chapter {
    padding-left: var(--space-5);
  }
}

/* End of section 31. */


/* ============================================================
   §32 ATHLETES GRID (athletes.html)
   ------------------------------------------------------------
   Editorial cohort grid. 3-col desktop / 2 tablet / 1 mobile.
   Cut-out portraits over alternating aubergine/terracotta panels.
   Click-to-inline-expand bio. TBD silhouettes link to register.
   ============================================================ */

.athletes-grid {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .athletes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .athletes-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

.athlete {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: grid-column 250ms ease;
}

.athlete__trigger {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card, 14px);
  overflow: hidden;
  background: var(--brand-aubergine);
  color: var(--surface-cream);
  text-decoration: none;
  cursor: pointer;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 250ms ease,
              background 200ms ease;
}

.athlete--terracotta .athlete__trigger { background: var(--brand-terracotta); }
.athlete--aubergine  .athlete__trigger { background: var(--brand-aubergine); }

/* Hover lift + slight tilt — desktop only */
@media (hover: hover) {
  .athlete__trigger:hover {
    transform: translateY(-6px) rotate(-0.5deg);
    box-shadow: 0 12px 30px rgba(195, 73, 34, 0.18);
  }
  .athlete:nth-child(even) .athlete__trigger:hover {
    transform: translateY(-6px) rotate(0.5deg);
  }
  .athlete__trigger:hover .athlete__image {
    filter: saturate(1.08);
  }
}

.athlete__trigger:focus-visible {
  outline: 2px solid var(--brand-lilac);
  outline-offset: 3px;
}

.athlete__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 12%;
}

.athlete__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 8px 14px rgba(23, 20, 17, 0.28));
  transition: filter 250ms ease, transform 250ms ease;
}

.athlete__silhouette {
  width: 60%;
  height: auto;
  color: var(--brand-lilac);
  opacity: 0.55;
  filter: none;
}

.athlete__caption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  pointer-events: none;
  text-align: left;
}

.athlete__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.05;
  color: var(--surface-cream);
}

.athlete__badge {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-lilac);
}

.athlete--terracotta .athlete__badge { color: var(--surface-cream); opacity: 0.85; }

/* Bio panel — hidden by default, revealed when card is .is-open */
.athlete__bio {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-white, #ffffff);
  border-left: 3px solid var(--brand-terracotta);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--surface-ink);
}

.athlete__bio[hidden] { display: none; }

.athlete.is-open .athlete__trigger {
  transform: none;
  box-shadow: 0 6px 18px rgba(88, 14, 65, 0.22);
}

@media (min-width: 1024px) {
  .athlete.is-open { grid-column: span 2; }
  .athlete.is-open .athlete__trigger {
    aspect-ratio: 8 / 5;
  }
}

/* TBD silhouette tiles — link to /register, dimmer treatment */
.athlete--tbd .athlete__trigger {
  background: var(--brand-aubergine);
  opacity: 0.85;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.athlete--tbd.athlete--terracotta .athlete__trigger { background: var(--brand-terracotta); }

.athlete--tbd .athlete__trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 12px,
      rgba(255,255,255,0.04) 12px 24px
    );
  pointer-events: none;
}

.athlete--tbd .athlete__media {
  position: relative;
  inset: auto;
  padding-top: 0;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.athlete--tbd .athlete__name { color: var(--surface-cream); opacity: 0.85; }
.athlete--tbd .athlete__badge { color: var(--brand-lilac); }

.athlete--tbd .athlete__trigger:hover {
  opacity: 1;
}

/* Note + CTA blocks at the section bottom */
.athletes-grid__note {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-muted, rgba(23, 20, 17, 0.6));
  text-align: center;
}
.athletes-grid__note a {
  color: var(--brand-aubergine);
  text-decoration: underline;
}
.section--aubergine .athletes-grid__note { color: var(--brand-lilac); }

.athletes-grid__cta {
  margin-top: var(--space-5);
  display: flex;
  justify-content: center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .athlete,
  .athlete__trigger,
  .athlete__image {
    transition: none;
  }
  .athlete__trigger:hover {
    transform: none;
  }
}

/* Nav: Athletes menu-item in the right-side cluster — just inherits the
   default .nav__menu-item styling. Only spacing adjustment lives here. */
.nav__menu-item--athletes {
  margin-right: var(--space-3);
}

/* End of section 32. */


/* ============================================================
   §33 MOBILE-ONLY OPTIMIZATIONS (sitewide audit pass)
   ------------------------------------------------------------
   All rules scoped to @media queries. Desktop layout untouched.
   Synthesis of per-page mobile audits — addresses tap targets,
   stat-band overflow, h2 nowrap, section padding, hero CTAs,
   compare cards, the-race accordion, calculator, athletes,
   register form, gallery, faq, thank-you pages, 404.
   ============================================================ */

/* ---- (a) Allow long h2s with inline white-space:nowrap to wrap on small screens.
   Targets index/the-race AT-A-GLANCE, fundraise goal, etc. ---- */
@media (max-width: 768px) {
  h2[style*="nowrap"],
  .h2[style*="nowrap"],
  h2[style*="white-space"] {
    white-space: normal !important;
  }
}

/* ---- (b) Stat-band — obsolete flex overrides removed 2026-07-30.
   Layout is now CSS Grid (main.css §10 + responsive rules there); no
   flex-wrap / flex-basis overrides needed at any breakpoint. ---- */

/* ---- (c) Counter numbers — tabular figures for stable digit widths.
   counter.js handles the actual min-width reservation; this just locks
   digit widths so the animation looks tidy and digits align. ---- */
@media (max-width: 768px) {
  [data-counter-target] {
    font-variant-numeric: tabular-nums;
  }
}

/* ---- (d) Primary buttons — bump tap target to 48px on mobile ---- */
@media (max-width: 768px) {
  .btn {
    padding: 14px 26px;
    min-height: 48px;
  }
}

/* ---- (e) Hero CTAs — stack vertical full-width on small phones ---- */
@media (max-width: 480px) {
  .hero__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .hero__cta .btn,
  .hero__cta > .btn {
    width: 100%;
  }
}

/* ---- (f) Section padding — tighten on smallest phones (<480px) ---- */
@media (max-width: 480px) {
  :root {
    --section-pad-mobile: 48px;
  }
  .section {
    padding-block: 48px;
  }
}

/* ---- (g) Compare cards (the-race "Included / Not included") ---- */
@media (max-width: 480px) {
  .compare > *,
  .compare__col {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* ---- (h) Pillar cards — drop the 480px desktop min-height on mobile ---- */
@media (max-width: 768px) {
  .pillar-card {
    min-height: auto;
  }
}

/* ---- (i) The Race — race toggle tabs + Leaflet height ---- */
@media (max-width: 768px) {
  .race-toggle__tab {
    padding: 12px 18px;
    min-height: 44px;
  }
  .interactive-map,
  #map,
  .map-leaflet {
    height: clamp(280px, 50vh, 360px);
  }
}

/* ---- (j) Day-by-day accordion — text wrap on narrow phones ---- */
@media (max-width: 480px) {
  .day-accordion__date,
  .day-accordion__preview {
    word-break: break-word;
    font-size: clamp(0.875rem, 3vw, 1rem);
  }
}

/* ---- (k) Fundraise — calculator input + tips list compression ---- */
@media (max-width: 480px) {
  .calculator__input {
    font-size: 22px !important;
  }
  .calculator__input-prefix {
    font-size: 18px !important;
  }
}

/* ---- (l) Athletes — CTA full-width + badge contrast + tighter top margin ---- */
@media (max-width: 640px) {
  .athletes-grid {
    margin-top: var(--space-4);
  }
  .athletes-grid__cta .btn {
    width: 100%;
  }
}
/* Badge contrast on terracotta tiles — both desktop and mobile (visual fix) */
.athlete--terracotta .athlete__badge {
  opacity: 1;
  color: var(--brand-lilac);
}

/* ---- (m) Register — submit button full-width + stat-band wrap override.
   The page has inline style="flex-wrap: nowrap..." on the stat-band; we
   override only on mobile so desktop keeps its single-row layout. ---- */
@media (max-width: 640px) {
  .register-form__btn {
    width: 100%;
  }
  .register-form__submit {
    align-items: stretch !important;
  }
  /* Register-page stat-band `nowrap` inline-style override removed
     2026-07-30 — the inline style has been deleted from register.html
     since the grid layout handles wrap responsively. */
}

/* ---- (n) Gallery (admin) — 1-col grid on small phones + stack actions ---- */
@media (max-width: 480px) {
  .photo-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .slot-panel-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .slot-panel-actions .btn,
  .slot-panel-actions button {
    width: 100% !important;
  }
  .slot-clear {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
}

/* ---- (o) FAQ summary — bigger tap target on mobile ---- */
@media (max-width: 768px) {
  .faq-accordion summary,
  details.faq-accordion__item > summary {
    padding-block: 14px;
    min-height: 48px;
  }
}

/* ---- (p) Thank-you pages — step number scaling ---- */
@media (max-width: 480px) {
  .step__number,
  .step-grid__number,
  .step-grid li > span:first-child {
    font-size: 2.5rem;
  }
  .steps-grid,
  .step-grid {
    gap: 20px;
  }
}

/* ---- (q) 404 — h3 link sizing on narrow phones ---- */
@media (max-width: 375px) {
  .error-links .h3,
  .error-links h3 {
    font-size: 18px;
  }
}

/* ---- (r) Travel page — extension link tap target on mobile ---- */
@media (max-width: 768px) {
  .extension-tile__link,
  .extension-tile__cta {
    display: inline-block;
    padding: 8px 0;
    min-height: 44px;
    line-height: 28px;
  }
}

/* ---- (s) Athletes scroll-into-view — make sure expanded card lands at top
   (the inline JS uses block:'nearest'; on small phones we want block:'start').
   This rule alone can't change JS behaviour, so it's a hint via CSS:
   add scroll-margin-top so 'nearest' lands below the sticky nav. ---- */
@media (max-width: 768px) {
  .athlete.is-open {
    scroll-margin-top: 80px;
  }
}

/* End of section 33. */


/* ============================================================
   §34 NAV MOBILE FIX (top-nav overflow on phones)
   ------------------------------------------------------------
   Bug (2026-06-02): On phones the top nav shifted right and the
   "Athletes" link ran off the viewport. Root cause: `.nav__right`
   contains THREE elements that all remain visible below the
   1024px desktop breakpoint — the Athletes link, the Register
   CTA, and the hamburger button. Combined with the §33 bump that
   gave every `.btn` 14px 26px padding + 48px min-height, the
   right cluster exceeded the viewport width at 375px.

   Fix strategy (mobile only, no desktop changes):
     1. Hide the duplicate Athletes link in `.nav__right` below
        1024px (the same breakpoint where the hamburger appears
        in main.css around L2122-2126). The mobile drawer already
        exposes Athletes, so this is purely dedup.
     2. Shrink `.nav__cta` so the §33 .btn padding bump does NOT
        balloon the in-nav Register button. Override the §33
        global .btn bump for `.nav__cta` only.
     3. Guard `.nav__inner` against horizontal overflow
        (defensive: min-width:0 + flex-wrap allowance).
     4. Keep hamburger at its 44x44 hit target — leave alone.

   All rules scoped to @media (max-width: 1023.98px). Above
   1024px nothing in this section applies; desktop is byte-for-byte
   unchanged.
   ============================================================ */

@media (max-width: 1023.98px) {

  /* (1) Hide the duplicate Athletes link in the right cluster.
     The mobile drawer (`.mobile-drawer`) already lists Athletes,
     so showing it twice on phones is redundant AND the primary
     cause of horizontal overflow. */
  .nav__right .nav__menu-item--athletes {
    display: none !important;
  }

  /* (2) Re-tighten the in-nav Register CTA. §33's global .btn
     bump (padding 14px 26px, min-height 48px) is appropriate for
     hero/section CTAs but too large for a nav-bar pill. Restore
     the original .nav__cta dimensions (10px 22px) at the nav
     scope only — body CTAs keep the 48px tap target. */
  .nav__cta,
  .nav .nav__cta,
  .nav__right .nav__cta {
    padding: 10px 18px !important;
    min-height: 0 !important;
    font-size: 14px;
    line-height: 1.2;
  }

  /* (3) Defensive overflow guards. `.nav__inner` is a flex row;
     if any child (e.g. a long logo) tries to push the row wider
     than the viewport, min-width:0 lets flex shrink them first
     instead of producing a horizontal scrollbar. */
  .nav__inner {
    min-width: 0;
    flex-wrap: nowrap;
  }
  .nav__logo,
  .nav__right {
    min-width: 0;
  }
  /* Right cluster: tighten the gap on phones so logo + CTA +
     hamburger fit comfortably at 375px. */
  .nav__right {
    gap: var(--space-2);
  }
}

/* ---- Narrow phones (<=480px): if Register still feels tight,
   nudge font/padding down one more notch. This is opt-in — the
   1024px block above is the load-bearing fix; this is polish. ---- */
@media (max-width: 480px) {
  .nav__cta,
  .nav .nav__cta,
  .nav__right .nav__cta {
    padding: 9px 14px !important;
    font-size: 13px;
  }
}

/* End of section 34. */


/* ============================================================
   §35 HERO MOBILE FIX (2026-06-02)
   ------------------------------------------------------------
   Sam: "The hero's are off" on mobile.
   Root causes addressed:
     1. .hero__h1-sub has `white-space: nowrap` (set in §25 for
        "on Mount Kenya"). On <=375px viewports the 0.62em sub
        renders ~24-25px and 14-char string flirts with overflow.
     2. Display font (Cosmic Buns) at the mobile token --fs-h1:40px
        leaves no slack for the longest single-token H1 lines
        ("Frequently Asked Questions" wraps OK, but the home main
        line "Yetu Triathlon" needs to feel anchored, not pinned
        against the gutter edge).
     3. .hero__content has hard `padding-top: 80px` to clear the
        fixed nav, but no `env(safe-area-inset-*)` allowance for
        iOS notch / home-indicator on full-bleed heroes.
     4. .hero__image uses `object-position: center` — on portrait
        viewports our mountain photos crop the peak out of frame;
        biasing upward keeps the subject visible.
     5. .hero__overlay gradient (main.css §6) is tuned for desktop
        landscape; on portrait the lower-third where text sits is
        less covered, so legibility against bright sky drops.
   Scope: mobile only (<=768px primary, <=480px tighter). Zero
   desktop changes. No HTML touched. No .hero--gallery rules.
   ============================================================ */

/* ---- (a) H1 sizing — clamp the home two-line layout so neither
   the main line nor the "on Mount Kenya" sub overflows on the
   narrowest phones. Also allow the sub to wrap as a last resort
   instead of blowing past the gutter. ---- */
@media (max-width: 768px) {
  .hero__h1 {
    /* tighter inter-line gap on small heroes */
    gap: 0.1em;
    /* belt-and-suspenders: keep H1 inside the content column */
    max-width: 100%;
  }
  .hero__h1-main {
    /* shrink "Yetu Triathlon" gracefully on small phones — fluid
       between 32px (320px viewport) and 40px (768px viewport).
       Below the canonical 40px mobile token only at <375px. */
    font-size: clamp(32px, 9.5vw, 40px);
    line-height: 1.02;
    letter-spacing: -0.02em;
  }
  .hero__h1-sub {
    /* allow wrap on tiny phones; preserve nowrap intent above 480 */
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.1;
  }
}

/* ---- (b) Narrow phones (<=480px): drop the §25 nowrap so the
   sub line can break onto two lines if the device is unusually
   narrow (older iPhone SE = 320px). Single-line preferred but
   wrap is better than overflow. ---- */
@media (max-width: 480px) {
  .hero__h1-sub {
    white-space: normal;
  }
  /* Non-home hero H1s (single-line headings like "Frequently Asked
     Questions", "The Race", "Travel & Logistics") — clamp the
     site-wide .h1/.hero__h1 size so long titles stay inside the
     327px content column without forcing 3-line wraps. */
  .hero__h1:not(:has(.hero__h1-main)) {
    font-size: clamp(30px, 8.5vw, 38px);
    line-height: 1.06;
  }
}

/* ---- (c) Hero content padding — respect iOS safe areas on
   full-bleed heroes (notch top, home-indicator bottom). The
   80px nav clearance stays; we ADD the env() value on top. ---- */
@media (max-width: 768px) {
  .hero__content {
    padding-top: calc(80px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
    /* Keep left/right gutter aligned with rest of page but ensure
       no child can punch past it (e.g. a long unbroken token). */
    min-width: 0;
  }
  .hero__content > * {
    /* main.css caps children at 720px — on mobile clamp to 100% so
       nothing escapes the gutter regardless. */
    max-width: 100%;
    min-width: 0;
  }
  /* hero__sub readability: bump line-height a touch + add a faint
     text-shadow on photo heroes (skipped on cream/faq below). */
  .hero__sub {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* ---- (d) Hero image cropping — bias upward on portrait so the
   peak / subject stays in frame. Desktop unchanged (default
   `center` from main.css applies above 768px). ---- */
@media (max-width: 768px) {
  .hero__image,
  .hero .hero__image img,
  .hero__image > img {
    object-position: center 35%;
  }
}

/* ---- (e) Hero overlay — darken on photo heroes for mobile
   legibility. Cream / faq / thanks / 404 heroes already hide the
   overlay (main.css §6) so they are untouched. ---- */
@media (max-width: 768px) {
  .hero__overlay {
    background:
      radial-gradient(ellipse at 30% 75%, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 65%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 100%);
  }
}

/* ---- (f) Text shadow only on photo heroes (skip cream variants
   so the ink-on-cream pages don't get a blur halo). ---- */
@media (max-width: 768px) {
  .hero:not(.hero--cream):not(.hero--faq):not(.hero--thanks):not(.hero--404):not(.section--cream) .hero__h1,
  .hero:not(.hero--cream):not(.hero--faq):not(.hero--thanks):not(.hero--404):not(.section--cream) .hero__sub {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  }
}

/* ---- (g) Home hero specifically (100svh) — guarantee the CTA
   block sits above the iOS home-indicator gesture area, and
   never gets pinched by the bottom padding on tall phones.
   §33 already stacks the two home CTAs vertical full-width
   below 480px; we just ensure breathing room. ---- */
@media (max-width: 768px) {
  .hero--home .hero__content {
    padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* ---- (h) FAQ hero (18svh override from §28) — on phones that's
   only ~150px tall which crushes the H1 + sub. Bump to a usable
   floor without going near the 45svh secondary default. ---- */
@media (max-width: 768px) {
  .hero--faq {
    min-height: clamp(180px, 28svh, 240px) !important;
  }
}

/* End of section 35. */


/* ============================================================
   §36 DONATION GRID — variant of §32 athletes-grid (donate.html)
   ------------------------------------------------------------
   Anchor-based tile (not button) — each card links to a per-athlete
   donate page. Adds a raised-amount line + thin progress bar under
   the existing name/badge caption. Also styles the recent-donations
   ticker strip and the overall-total counter context.
   ============================================================ */

/* Anchor variant of .athlete__trigger. Inherits all visual rules from
   §32 — we only need to make sure the anchor element behaves like the
   button (no underline, cursor pointer). */
.athlete__trigger--donate {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
.athlete__trigger--donate:hover,
.athlete__trigger--donate:focus-visible {
  text-decoration: none;
}

/* Tiny "raised so far" line, sits just above the progress bar. */
.athlete__raised {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-lilac);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.athlete--terracotta .athlete__raised {
  color: var(--surface-cream);
  opacity: 0.9;
}

/* Progress bar — CSS custom property drives the fill width. */
.athlete__progress {
  --progress: 0%;
  height: 6px;
  width: 100%;
  margin-top: 8px;
  background: rgba(234, 170, 255, 0.25);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.athlete__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-terracotta), var(--brand-aubergine));
  border-radius: 3px;
  width: var(--progress);
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.athlete--terracotta .athlete__progress {
  background: rgba(255, 255, 255, 0.30);
}
.athlete--terracotta .athlete__progress::after {
  background: var(--surface-cream);
}

/* Recent donations ticker — thin editorial strip. */
.donations-ticker {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--surface-ink);
  border-bottom: 1px solid var(--surface-ink);
  padding-block: var(--space-4);
}
.donations-ticker li,
.donations-ticker__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--surface-ink);
}
.donations-ticker__name { font-weight: 600; }
.donations-ticker__athlete { color: var(--brand-aubergine); font-weight: 600; }
.donations-ticker__amount {
  color: var(--brand-terracotta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.donations-ticker__time {
  color: var(--ink-muted, rgba(23,20,17,0.6));
  font-size: 13px;
}
.donations-ticker__empty {
  justify-content: center;
  color: var(--ink-muted);
  font-style: italic;
}

/* Mobile: only 3 rows visible. Desktop: 5 rows. Beyond 5 = always hidden. */
.donations-ticker__row--desktop-hidden { display: none; }
@media (max-width: 720px) {
  .donations-ticker__row--mobile-hidden { display: none; }
}
@media (max-width: 480px) {
  .donations-ticker li,
  .donations-ticker__row { flex-wrap: wrap; }
  .donations-ticker__time { flex-basis: 100%; }
}

/* Overall raised line — sits above/under the §3 strip CTAs. */
.donate-overall {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.donate-overall .js-overall-total {
  color: var(--brand-terracotta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* "Where the money goes" three-up. */
.money-grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .money-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
.money-grid__item {
  background: var(--surface-white, #ffffff);
  border-left: 3px solid var(--brand-terracotta);
  border-radius: 8px;
  padding: var(--space-4);
}
.money-grid__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--brand-aubergine);
}
.money-grid__label {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--surface-ink);
}
.money-grid__body {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .athlete__progress::after { transition: none; }
}
/* End of section 36. */

/* ============================================================
   §37 PERSONAL DONATION PAGE  (/donate/<slug>)
   Server-rendered by functions/donate/[slug].js. Styles cover:
     - Hero two-column layout (cut-out portrait + intro)
     - Large progress bar with milestone tick marks
     - Recent-supporters donor list
   These selectors are scoped tightly enough that they shouldn't
   bleed into other pages. Mobile-first; desktop adjusts at 960px.
   ============================================================ */
.donate-personal-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 960px) {
  .donate-personal-hero { grid-template-columns: 1fr 1fr; }
}
.donate-personal-hero__photo img {
  width: 100%;
  height: auto;
  max-height: 70svh;
  object-fit: contain;
}

.progress-large {
  position: relative;
  height: 12px;
  width: 100%;
  background: rgba(234, 170, 255, 0.20);
  border-radius: 6px;
  overflow: visible;
  margin-block: var(--space-4);
}
.progress-large__fill {
  --progress: 0%;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-terracotta), var(--brand-aubergine));
  border-radius: 6px;
  width: var(--progress);
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-large__milestone {
  position: absolute;
  top: -4px;
  height: 20px;
  width: 1px;
  background: rgba(23, 20, 17, 0.4);
}
.progress-large__milestone span {
  position: absolute;
  top: 24px;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 11px;
  color: rgba(23, 20, 17, 0.5);
  white-space: nowrap;
}

.donor-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.donor-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(23, 20, 17, 0.08);
  font-family: var(--font-body);
}
.donor-list li:last-child { border-bottom: 0; }
.donor-list__name {
  color: var(--surface-ink);
  font-weight: 500;
}
.donor-list__amount {
  color: var(--brand-terracotta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.donor-list__empty .donor-list__name {
  opacity: 0.65;
  font-style: italic;
  font-weight: 400;
}
/* End of section 37. */



/* ============================================================
   §38 COMPACT FOOTER (footer--compact)
   ------------------------------------------------------------
   3-col on desktop (brand | navigate | contact), single stack
   on mobile. Single legal ribbon at bottom collapses all entity
   IDs + policy links onto one line.
   ============================================================ */

.footer.footer--compact {
  background: var(--brand-aubergine);
  color: var(--surface-cream);
  padding: var(--space-6) 0 var(--space-4);
}

.footer--compact .footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 768px) {
  .footer--compact .footer__top {
    grid-template-columns: 1.2fr 1fr 1.4fr;
    gap: var(--space-6);
  }
}

.footer--compact .footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer--compact .footer__logo {
  width: 200px;
  height: auto;
}
.footer--compact .footer__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  max-width: 32ch;
  color: var(--surface-cream);
  opacity: 0.9;
  margin: 0;
}

.footer--compact .footer__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-lilac);
  margin: 0 0 var(--space-3);
}

.footer--compact .footer__nav ul,
.footer--compact .footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .footer--compact .footer__nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
    row-gap: 6px;
  }
}

.footer--compact a {
  color: var(--surface-cream);
  text-decoration: none;
  transition: color 150ms ease;
}
.footer--compact a:hover,
.footer--compact a:focus-visible {
  color: var(--brand-lilac);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer--compact a:focus-visible {
  outline: 2px solid var(--brand-lilac);
  outline-offset: 2px;
}

.footer--compact .footer__follow {
  margin-top: var(--space-2);
  color: var(--surface-cream);
  opacity: 0.95;
}
.footer--compact .footer__follow a {
  margin-left: 4px;
}

.footer--compact .footer__ribbon {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(234, 170, 255, 0.18);
}
.footer--compact .footer__ribbon p {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--surface-cream);
  opacity: 0.7;
  margin: 0;
  text-align: left;
}
.footer--compact .footer__ribbon a {
  color: var(--surface-cream);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer--compact .footer__ribbon a:hover {
  color: var(--brand-lilac);
}
.footer--compact .footer__ribbon span[aria-hidden="true"] {
  opacity: 0.45;
  margin: 0 2px;
}

@media (max-width: 640px) {
  .footer--compact .footer__nav ul,
  .footer--compact .footer__contact-list {
    gap: 10px;
    font-size: 15px;
  }
  .footer--compact .footer__ribbon p {
    text-align: center;
  }
}

/* End of section 38. */

/* ============================================================
   §39 SYNTHESIZED DONATION EXPERIENCE
   ------------------------------------------------------------
   Adds the live-total tracker (above athlete grid on /donate),
   athlete-confirmed hover-reveal, gift-level chips, the per-
   athlete personal page (donate-hero--athlete, donate-stats,
   progress-thin, donor avatars, share row), and the sticky
   mobile donate bar.
   Brand tokens used:
     aubergine #580e41 · terracotta #c34922 · lilac #eaaaff
     cream     #efe5d7 · ink        #171411
   ============================================================ */

/* ---- (a) Live total tracker (landing page) ---- */
.raised-tracker {
  text-align: center;
}
.raised-tracker__inner {
  max-width: 760px;
  margin: 0 auto;
}
.raised-tracker__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-aubergine);
  opacity: 0.7;
  margin-bottom: var(--space-3);
}
.raised-tracker__amount {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7.5vw, 3.5rem);
  line-height: 1;
  color: var(--brand-terracotta);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.raised-tracker__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--surface-ink);
  opacity: 0.78;
  margin-top: var(--space-2);
}
.raised-tracker__sub strong {
  color: var(--brand-aubergine);
  font-weight: 700;
}
.raised-tracker__bar {
  --progress: 0%;
  --progress-athletes: 0%;
  position: relative;
  width: 100%;
  height: 8px;
  margin-top: var(--space-5);
  background: var(--brand-lilac);
  border-radius: 4px;
  overflow: hidden;
}
/* Athletes-confirmed proxy fill — a paler tone of the aubergine, sits
   underneath the euro fill. Keeps the bar visually non-empty as soon as
   the first athlete is confirmed, even before €1 is raised. */
.raised-tracker__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--progress-athletes);
  background: var(--brand-aubergine);
  opacity: 0.32;
  border-radius: 4px;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}
.raised-tracker__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--progress);
  background: var(--brand-aubergine);
  border-radius: 4px;
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}
.raised-tracker__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
  text-align: center;
}
.raised-tracker__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.raised-tracker__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  line-height: 1;
  color: var(--brand-aubergine);
  font-variant-numeric: tabular-nums;
}
.raised-tracker__stat-label {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--surface-ink);
  opacity: 0.68;
}
.raised-tracker__cta {
  margin-top: var(--space-5);
  display: inline-flex;
}
@media (max-width: 520px) {
  .raised-tracker__stats {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* ---- (b) Athlete-confirmed hover-reveal (donate grid only) ---- */
/* Scope is .athlete--confirmed so the explorer cards on /athletes
   keep their existing behaviour. */
.athlete--confirmed {
  position: relative;
  overflow: hidden;
}
.athlete--confirmed .athlete__trigger--donate {
  position: relative;
  display: block;
  overflow: hidden;
}
.athlete--confirmed .athlete__media {
  position: relative;
}
.athlete--confirmed .athlete__media::after {
  /* Aubergine scrim — sits BETWEEN the image and the reveal panel.
     Hidden on mobile-no-hover; reveal panel handles its own bg there. */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(88, 14, 65, 0.72);
  opacity: 0;
  transition: opacity 240ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.athlete--confirmed .athlete__reveal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-3) var(--space-3) calc(var(--space-3) + 8px);
  background: var(--brand-aubergine);
  color: var(--surface-cream);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1),
              opacity 240ms cubic-bezier(.22,.61,.36,1);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.athlete--confirmed .athlete__bio-short {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--surface-cream);
  opacity: 0.92;
  margin: 0;
}
.athlete--confirmed .athlete__reveal .athlete__raised {
  color: var(--surface-cream);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.athlete--confirmed .athlete__reveal .athlete__raised-goal {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-lilac);
  margin-top: 2px;
  font-weight: 600;
}
.athlete--confirmed .athlete__cta {
  margin-top: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-lilac);
}
.athlete--confirmed .athlete__progress {
  --progress: 0%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  margin: 0;
  background: var(--surface-cream);
  border-radius: 0;
  z-index: 3;
}
.athlete--confirmed .athlete__progress::after {
  background: var(--brand-terracotta);
  border-radius: 0;
}

@media (hover: hover) {
  .athlete--confirmed .athlete__trigger--donate:hover .athlete__media::after,
  .athlete--confirmed .athlete__trigger--donate:focus-visible .athlete__media::after {
    opacity: 1;
  }
  .athlete--confirmed .athlete__trigger--donate:hover .athlete__reveal,
  .athlete--confirmed .athlete__trigger--donate:focus-visible .athlete__reveal {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Mobile / touch: keep the reveal visible, static, no slide. */
@media (hover: none) {
  .athlete--confirmed .athlete__reveal {
    position: static;
    transform: none;
    opacity: 1;
    background: var(--brand-aubergine);
  }
  .athlete--confirmed .athlete__media::after { display: none; }
  .athlete--confirmed .athlete__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .athlete--confirmed .athlete__reveal {
    transform: none;
    transition: opacity 200ms linear;
  }
  .athlete--confirmed .athlete__media::after {
    transition: opacity 200ms linear;
  }
  .raised-tracker__bar::after,
  .raised-tracker__bar::before { transition: none; }
}

/* ---- (c) Gift-level chips ---- */
.gift-chips {
  list-style: none;
  margin: var(--space-4) 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gift-chips__chip {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--surface-ink);
  border: 1.5px solid var(--surface-ink);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.gift-chips__chip:hover,
.gift-chips__chip:focus-visible {
  background: var(--brand-terracotta);
  color: var(--surface-cream);
  border-color: var(--brand-terracotta);
  outline: none;
}
.gift-chips__chip.is-selected {
  background: var(--brand-terracotta);
  color: var(--surface-cream);
  border-color: var(--brand-terracotta);
}
.section--aubergine .gift-chips__chip {
  color: var(--surface-cream);
  border-color: var(--brand-lilac);
}
.section--aubergine .gift-chips__chip:hover,
.section--aubergine .gift-chips__chip:focus-visible,
.section--aubergine .gift-chips__chip.is-selected {
  background: var(--brand-terracotta);
  border-color: var(--brand-terracotta);
}
.gift-chips__caption {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--surface-ink);
  opacity: 0.68;
  margin: 0 0 var(--space-3);
}
.section--aubergine .gift-chips__caption {
  color: var(--surface-cream);
  opacity: 0.7;
}

/* ---- (d) Personal page: athlete hero ---- */
.donate-hero--athlete {
  background: var(--brand-aubergine);
  color: var(--surface-cream);
  padding: var(--space-7) 0;
}
.donate-hero--athlete__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 768px) {
  .donate-hero--athlete__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-7);
  }
}
.donate-hero--athlete__photo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.donate-hero--athlete__photo img,
.donate-hero--athlete__photo svg {
  display: block;
  max-width: 100%;
  max-height: 70svh;
  width: auto;
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.35));
}
.donate-hero--athlete__intro .eyebrow {
  color: var(--brand-lilac);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.donate-hero--athlete__h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 1;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--surface-cream);
}
.donate-hero--athlete__identity {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: var(--surface-cream);
  opacity: 0.85;
  margin-bottom: var(--space-5);
}
.btn--full {
  display: block;
  width: 100%;
  text-align: center;
}

/* ---- (e) Personal page: social share row ---- */
.share-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.share-row__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--brand-lilac);
  color: var(--brand-lilac);
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.share-row__btn:hover,
.share-row__btn:focus-visible {
  background: var(--brand-lilac);
  color: var(--brand-aubergine);
  outline: none;
}

/* ---- (f) Personal page: donate cluster — stat triplet + progress ---- */
.donate-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  text-align: center;
  margin-top: var(--space-5);
}
.donate-stats__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.donate-stats__num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1;
  color: var(--surface-cream);
  font-variant-numeric: tabular-nums;
}
.donate-stats__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-lilac);
  opacity: 0.9;
}
@media (max-width: 520px) {
  .donate-stats { grid-template-columns: 1fr; }
}
.progress-thin {
  --progress: 0%;
  position: relative;
  width: 100%;
  height: 8px;
  margin-top: var(--space-5);
  background: var(--surface-cream);
  border-radius: 4px;
  overflow: hidden;
}
.progress-thin::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--progress);
  background: var(--brand-terracotta);
  border-radius: 4px;
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .progress-thin::after { transition: none; }
}

/* ---- (g) Personal page: donor list (avatar rows) ---- */
.donor-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.donor-list__item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(23, 20, 17, 0.08);
}
.donor-list__item:last-child { border-bottom: none; }
.donor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-lilac);
  color: var(--brand-aubergine);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.donor-list__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.donor-list__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--surface-ink);
}
.donor-list__time {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--surface-ink);
  opacity: 0.6;
}
.donor-list__message {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--surface-ink);
  opacity: 0.85;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.donor-list__message.is-expanded {
  white-space: normal;
  overflow: visible;
}
.donor-list__read-more {
  background: none;
  border: none;
  color: var(--brand-terracotta);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
.donor-list__amount {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--brand-terracotta);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  white-space: nowrap;
}
.donor-list__empty {
  text-align: center;
  color: var(--surface-ink);
  opacity: 0.65;
  font-style: italic;
  padding: var(--space-4) 0;
  display: block;
}

/* ---- (h) Sticky mobile donate bar (personal page) ---- */
.sticky-donate-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--brand-aubergine);
  color: var(--surface-cream);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  opacity: 0;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1),
              opacity 260ms cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sticky-donate-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.sticky-donate-bar__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sticky-donate-bar__label {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-lilac);
  font-variant-numeric: tabular-nums;
}
.sticky-donate-bar__label strong {
  color: var(--surface-cream);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  font-family: var(--font-display);
}
.sticky-donate-bar__btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 10px 18px;
  background: var(--brand-terracotta);
  color: var(--surface-cream);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.sticky-donate-bar__btn:hover { background: #a83e1d; }
.sticky-donate-bar__progress {
  --progress: 0%;
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(234, 170, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
}
.sticky-donate-bar__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--progress);
  background: var(--brand-terracotta);
  border-radius: 2px;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
  .sticky-donate-bar { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-donate-bar {
    transition: opacity 200ms linear;
  }
  .sticky-donate-bar__progress::after { transition: none; }
}

/* ---- (i) Personal page: small body classes used by renderPage ---- */
.donate-pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.2;
  color: var(--brand-aubergine);
  margin: 0;
}
.donate-bio-col {
  max-width: 30em;
  margin: var(--space-5) auto 0;
}
.donate-bio-col p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--surface-ink);
  margin-top: var(--space-3);
}
.donate-bio-col p:first-child { margin-top: 0; }

/* End of section 39. */


/* ============================================================
   §40 IMAGE COVERAGE — sitewide fill-the-frame audit pass
   ------------------------------------------------------------
   Sam's rule: every photographic image fills all 4 corners of
   its container (object-fit: cover). LOGOS are the exception —
   they must never crop (object-fit: contain).
   ============================================================ */

/* --- (a) Athlete portrait cards (athletes.html + donate.html + partners lead team)
   `.athlete__image` was set to `contain + bottom center` — leaves vertical gaps on
   raw photos like Robert's. Switch to cover anchored at the top so face stays in. */
.athlete__image {
  object-fit: cover !important;
  object-position: top center !important;
}

/* --- (b) Hero with <div class="hero__image"> wrapper (home, partners, about-hy)
   The wrapper doesn't itself respond to object-fit; the inner <img> must.
   Apply universally — no harm where it was already correct, fixes the broken cases. */
.hero__image > img,
.hero .hero__image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* On mobile (< 768px), bias the hero photos slightly upward so subject stays in. */
@media (max-width: 768px) {
  .hero__image > img,
  .hero .hero__image > img,
  .hero__image {
    object-position: center 38% !important;
  }
}

/* --- (c) The-race day accordion inline images — no sizing rule before */
.day-accordion__content img,
.day-accordion img:not(.icon) {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: var(--space-3) 0;
  border-radius: var(--radius-card, 8px);
}

/* --- (d) Logos — explicit contain to prevent any accidental crop */
.nav__logo-img,
.footer__logo,
.footer--compact .footer__logo,
.partner-card__logo,
.extension-tile__logo {
  object-fit: contain;
}

/* End of section 40. */


/* ============================================================
   §41 IMAGE COVERAGE — follow-up fixes
   ------------------------------------------------------------
   (a) Confirmed athlete tiles (raw photos like Robert's) — kill
       the 12% top padding that §32 used for cut-out portraits.
   (b) Personal-page hero portrait — round corners + sensible
       aspect ratio so it's not a square slab.
   (c) Personal-page hero — top padding so the fixed nav doesn't
       overlap the portrait.
   ============================================================ */

/* (a) Confirmed-athlete cards — full-bleed image inside tile.
   §32 reserves padding-top: 12% on .athlete__media for cut-out
   portraits to breathe; raw photos need none. */
.athlete--confirmed .athlete__media {
  padding-top: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.athlete--confirmed .athlete__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;   /* Hard centre — all 4 flanks covered, crop spread evenly */
  filter: none !important;
}

/* Badge text on confirmed cards — lilac at 10px is too light against
   aubergine for the long "Orthopedic surgery resident · NL" string.
   Switch to cream + bigger + bolder for proper readability. */
.athlete--confirmed .athlete__badge {
  color: var(--surface-cream) !important;
  opacity: 1 !important;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* (b) Personal-page hero portrait — give it a card frame instead
   of a ~70svh free-floating "square slab". §39 sets display:flex +
   center alignment on the wrapper and max-height:70svh + width:auto
   on the inner <img>, which together force the image to its native
   aspect ratio (square slab). We must explicitly override every one
   of those declarations.
   THIRD-PASS FIX (2026-06-02): softer corners (32px), explicit
   align-self:center so the grid cell doesn't stretch the wrapper
   tall enough to ride the nav, and filter:none belt-and-braces on
   both wrapper + inner img so no §39 shadow bleeds upward. */
.donate-hero--athlete__photo {
  display: block !important;          /* kill §39 flex */
  aspect-ratio: 4 / 5 !important;
  width: 100% !important;             /* lets aspect-ratio drive height */
  max-width: 460px !important;
  margin: 0 auto !important;
  align-self: center !important;      /* centre vertically inside grid cell */
  border-radius: 32px !important;     /* soft-cornered card */
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.15);
  filter: none !important;            /* no upward-bleeding shadow on wrapper */
}
.donate-hero--athlete__photo img,
.donate-hero--athlete__photo svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important; /* true centre — equal crop all sides */
  filter: none !important;            /* kill §39 drop-shadow that overflowed top */
  border-radius: 0 !important;        /* wrapper owns the rounding */
}

/* (c) Personal-page hero — clear the fixed nav HARD.
   Nav can run up to ~100px tall depending on scroll state; previous
   120px wasn't enough (Sam reports the portrait still kissed the nav
   on mobile). Bump to 180px on mobile, 160px on >=768px so there is
   unambiguous breathing room at every scroll position.
   z-index ensures the section paints below the fixed nav. */
.donate-hero--athlete {
  position: relative;
  z-index: 1;
  padding-top: 180px !important;
  padding-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .donate-hero--athlete {
    padding-top: 160px !important;
  }
}

/* End of section 41. */

/* ============================================================
   §42 PROFILE HERO KILL-SWITCH (Robert Wagner / donate-hero--athlete)
   ------------------------------------------------------------
   3 prior attempts failed due to specificity conflicts.
   This block uses maximum-specificity selectors + !important
   to GUARANTEE the values win regardless of earlier rules.
   ============================================================ */

html body main section.donate-hero--athlete {
  padding-top: 180px !important;
  padding-bottom: var(--space-7) !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (min-width: 768px) {
  html body main section.donate-hero--athlete {
    padding-top: 160px !important;
  }
}

html body main section.donate-hero--athlete .donate-hero--athlete__photo {
  display: block !important;
  width: 100% !important;
  max-width: 460px !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  margin: 0 auto !important;
  align-self: center !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
  position: relative !important;
}

html body main section.donate-hero--athlete .donate-hero--athlete__photo > img,
html body main section.donate-hero--athlete .donate-hero--athlete__photo > svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  filter: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  inset: 0 !important;
  position: relative !important;
}

/* End of section 42. */

/* ============================================================
   §43 PROFILE HERO LEFT-AXIS ALIGNMENT
   Force every child of the intro column to start at x=0 (relative
   to the column). No centering, no extra left padding, share-row
   aligns flex-start, button is inline-block (not full-width).
   ============================================================ */
html body main section.donate-hero--athlete .donate-hero--athlete__intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: var(--space-3) !important;
}

html body main section.donate-hero--athlete .donate-hero--athlete__intro > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: flex-start !important;
}

/* Share row: horizontal, left-aligned */
html body main section.donate-hero--athlete .share-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  margin-left: 0 !important;
}

/* Primary CTA: inline-block sized to content, not full-width */
html body main section.donate-hero--athlete a.btn--full,
html body main section.donate-hero--athlete a.btn.btn--primary {
  width: auto !important;
  display: inline-flex !important;
  align-self: flex-start !important;
}

/* End of section 43. */

/* §44 — PROFILE DONATE CLUSTER LEFT-AXIS ALIGNMENT
   Robert Wagner profile (/donate/<slug>): the .section--aubergine donate cluster
   must align to the same left x-axis as the hero intro column above it.
   Belt-and-braces with inline styles in [slug].js. */
html body main section.section--aubergine .container--narrow {
  text-align: left !important;
}
html body main section.section--aubergine .donate-stats {
  justify-content: flex-start !important;
  text-align: left !important;
}
html body main section.section--aubergine .donate-stats__item {
  text-align: left !important;
  align-items: flex-start !important;
}
html body main section.section--aubergine .gift-chips {
  justify-content: flex-start !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
html body main section.section--aubergine .gift-chips__caption,
html body main section.section--aubergine .body--small {
  text-align: left !important;
  margin-left: 0 !important;
}
html body main section.section--aubergine .progress-thin {
  margin-left: 0 !important;
  margin-right: auto !important;
}
html body main section.section--aubergine p {
  text-align: left !important;
}
html body main section.section--aubergine .btn--full {
  margin-left: 0 !important;
  margin-right: auto !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
}
html body main section.section--aubergine .eyebrow,
html body main section.section--aubergine .h2,
html body main section.section--aubergine #donate-h2 {
  text-align: left !important;
  margin-left: 0 !important;
}

/* §45 — PERSONAL ATHLETE PAGE: GLOBAL LEFT-AXIS LOCK
   Template-level rule for /donate/<slug>: every section's container
   must align its content to the same left x-axis. Body.subpage scope
   keeps this from leaking onto the static donate.html landing. */

html body.subpage main section.donate-hero--athlete .container,
html body.subpage main section.donate-hero--athlete .container--narrow,
html body.subpage main section.section--cream .container--narrow,
html body.subpage main section.section--aubergine .container--narrow,
html body.subpage main section.section--ink.closing-cta .container--narrow {
  text-align: left !important;
}

html body.subpage main section .container--narrow > *,
html body.subpage main section .container--narrow .eyebrow,
html body.subpage main section .container--narrow .h1,
html body.subpage main section .container--narrow .h2,
html body.subpage main section .container--narrow .h3,
html body.subpage main section .container--narrow p,
html body.subpage main section .container--narrow ul,
html body.subpage main section .container--narrow ol,
html body.subpage main section .container--narrow .donate-pull-quote,
html body.subpage main section .container--narrow .donate-bio-col,
html body.subpage main section .container--narrow .donor-list {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.subpage main section .container--narrow .donate-stats,
html body.subpage main section .container--narrow .gift-chips {
  justify-content: flex-start !important;
  margin-left: 0 !important;
}

html body.subpage main section .container--narrow .btn,
html body.subpage main section .container--narrow .btn--primary,
html body.subpage main section .container--narrow .btn--full,
html body.subpage main section .container--narrow .btn--text {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.subpage main section .container--narrow .btn--full {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
}

html body.subpage main section.donate-hero--athlete .donate-hero--athlete__intro,
html body.subpage main section.donate-hero--athlete .donate-hero--athlete__intro > * {
  align-items: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
}

html body.subpage main section.closing-cta .container--narrow {
  justify-content: flex-start !important;
}

html body.subpage main section .container--narrow .progress-thin {
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 480px !important;
}

/* End of section 45 */

/* §46 — MOBILE NAV BAR: TOP + BOTTOM WITHIN VIEWPORT
   Locks the open nav menu, site header, sticky donate bar, and footer
   to the phone-screen viewport. Prevents horizontal overflow, respects
   iOS safe-area insets, stacks footer columns on small screens. */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* TOP: site header sits flush to screen edges + respects notch */
  html body header.site-header,
  html body .site-header {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-top: env(safe-area-inset-top, 0) !important;
  }

  html body header.site-header > *,
  html body .site-header > * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* OPEN MOBILE MENU: full viewport, scrollable, padded for safe area */
  html body .nav-menu.is-open,
  html body nav.nav-menu.is-open,
  html body .nav-menu[aria-expanded="true"],
  html body nav.nav-menu[aria-expanded="true"] {
    box-sizing: border-box !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: calc(env(safe-area-inset-top, 0) + 64px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 32px) !important;
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
    z-index: 9000 !important;
  }

  html body .nav-menu.is-open ul,
  html body .nav-menu[aria-expanded="true"] ul {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  html body .nav-menu.is-open li,
  html body .nav-menu[aria-expanded="true"] li {
    width: 100% !important;
  }

  html body .nav-menu.is-open a,
  html body .nav-menu[aria-expanded="true"] a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 12px !important;
    font-size: 17px !important;
    text-align: left !important;
  }

  /* Hamburger toggle: tap target 44x44 minimum, stays in flow */
  html body .nav-toggle {
    box-sizing: border-box !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    margin: 0 !important;
    z-index: 9100 !important;
    position: relative !important;
  }

  /* Body scroll lock when menu open */
  html body.nav-locked {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  /* BOTTOM: footer fits viewport, stacks columns */
  html body footer.site-footer,
  html body .site-footer {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 24px) !important;
  }

  html body .site-footer > *,
  html body .footer__row,
  html body .footer__cols {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }

  html body .footer__cols > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* STICKY DONATE BAR on /donate/<slug>: respects safe area, fits screen */
  html body aside.sticky-donate-bar,
  html body .sticky-donate-bar {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 10px) !important;
  }

  html body .sticky-donate-bar__row {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  html body .sticky-donate-bar__label {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .sticky-donate-bar__btn {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* Universal: any .container / .container--narrow inside body fits screen */
  html body .container,
  html body .container--narrow {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}

@media (max-width: 380px) {
  html body .nav-menu.is-open a,
  html body .nav-menu[aria-expanded="true"] a {
    font-size: 16px !important;
    padding: 12px 8px !important;
  }
  html body .sticky-donate-bar__label {
    font-size: 13px !important;
  }
  html body .sticky-donate-bar__btn {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
}

/* End of section 46 */

/* §47 — DONATE CLUSTER STAT TRIPLET + PROGRESS ALIGNMENT
   Personal athlete page (/donate/<slug>): make stats and progress bar share
   the same left + right edges, with consistent gaps and no width drift. */

html body.subpage main section.section--aubergine .donate-stats {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--space-4) !important;
  width: 100% !important;
  max-width: 480px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: var(--space-4) !important;
  padding: 0 !important;
}

html body.subpage main section.section--aubergine .donate-stats__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html body.subpage main section.section--aubergine .donate-stats__num {
  font-size: clamp(22px, 5vw, 28px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: var(--surface-cream, #efe5d7) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.subpage main section.section--aubergine .donate-stats__label {
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--brand-lilac, #eaaaff) !important;
  opacity: 0.85 !important;
}

html body.subpage main section.section--aubergine .progress-thin {
  display: block !important;
  width: 100% !important;
  max-width: 480px !important;
  height: 6px !important;
  margin: var(--space-3) 0 0 0 !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
}

html body.subpage main section.section--aubergine .progress-thin::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: var(--progress, 0%) !important;
  background: var(--brand-terracotta, #c34922) !important;
  border-radius: 999px !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (max-width: 480px) {
  html body.subpage main section.section--aubergine .donate-stats {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--space-3) !important;
  }
  html body.subpage main section.section--aubergine .donate-stats__num {
    font-size: clamp(18px, 4.5vw, 22px) !important;
  }
  html body.subpage main section.section--aubergine .donate-stats__label {
    font-size: 11px !important;
  }
}

/* End of section 47 */

/* §48 — DONATE BUTTON: SITE-WIDE LIGHT PURPLE
   Every Donate CTA across the site uses --brand-lilac (light purple) with
   ink-color text for contrast. Covers desktop nav CTA, mobile drawer donate
   item, and any .btn--primary used inside donate contexts. */

html body .nav__cta--donate,
html body a.nav__cta--donate,
html body .btn.btn--primary.nav__cta--donate,
html body .btn--primary-purple,
html body a.btn--primary-purple,
html body .mobile-drawer__menu-item--donate,
html body a.mobile-drawer__menu-item--donate,
html body .js-donate-cta,
html body a.js-donate-cta,
html body .js-donate-cta-2,
html body a.js-donate-cta-2,
html body .js-donate-cta-sticky,
html body a.js-donate-cta-sticky,
html body .sticky-donate-bar__btn,
html body a.sticky-donate-bar__btn,
html body .btn.btn--primary[href="/donate"],
html body a.btn.btn--primary[href="/donate"],
html body .btn.btn--primary[href="/donate.html"],
html body a.btn.btn--primary[href="/donate.html"] {
  background: var(--brand-lilac, #eaaaff) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: var(--font-display, "Cosmic Buns", "Inter", sans-serif) !important;
  letter-spacing: 0.02em !important;
  border-color: var(--brand-lilac, #eaaaff) !important;
}

html body .nav__cta--donate:hover,
html body a.nav__cta--donate:hover,
html body .btn.btn--primary.nav__cta--donate:hover,
html body .btn--primary-purple:hover,
html body a.btn--primary-purple:hover,
html body .mobile-drawer__menu-item--donate:hover,
html body a.mobile-drawer__menu-item--donate:hover,
html body .js-donate-cta:hover,
html body a.js-donate-cta:hover,
html body .js-donate-cta-2:hover,
html body a.js-donate-cta-2:hover,
html body .js-donate-cta-sticky:hover,
html body a.js-donate-cta-sticky:hover,
html body .sticky-donate-bar__btn:hover,
html body a.sticky-donate-bar__btn:hover,
html body .btn.btn--primary[href="/donate"]:hover,
html body a.btn.btn--primary[href="/donate"]:hover,
html body .btn.btn--primary[href="/donate.html"]:hover,
html body a.btn.btn--primary[href="/donate.html"]:hover {
  background: #d893ff !important;
  border-color: #d893ff !important;
  color: #ffffff !important;
  font-family: var(--font-display, "Cosmic Buns", "Inter", sans-serif) !important;
  letter-spacing: 0.02em !important;
}

html body .nav__cta--donate:focus-visible,
html body .mobile-drawer__menu-item--donate:focus-visible {
  outline: 2px solid var(--brand-aubergine, #580e41) !important;
  outline-offset: 2px !important;
}

/* End of section 48 */

/* §49 — DONATE-STATS NUMBERS: FORCE VISIBLE CREAM TEXT
   Belt-and-braces override: ensure every numeric value inside .donate-stats
   on aubergine sections renders in cream text. Targets both the outer
   .donate-stats__num AND any nested .js-* spans that may not inherit. */

html body main section.section--aubergine .donate-stats__num,
html body main section.section--aubergine .donate-stats__num *,
html body main section.section--aubergine .donate-stats .js-athlete-raised,
html body main section.section--aubergine .donate-stats .js-athlete-count,
html body main section.section--aubergine .donate-stats__label,
html body main section.section--aubergine .donate-stats__item {
  color: var(--surface-cream, #efe5d7) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body main section.section--aubergine .donate-stats__num {
  font-size: clamp(22px, 5vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  display: block !important;
  text-shadow: none !important;
}

html body main section.section--aubergine .donate-stats__label {
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  opacity: 0.85 !important;
  font-weight: 500 !important;
}

html body main section.section--aubergine .donate-stats .js-athlete-raised,
html body main section.section--aubergine .donate-stats .js-athlete-count {
  display: inline !important;
  color: inherit !important;
}

/* End of section 49 */

/* §50 — DONOR ROW LAYOUT OVERRIDE (RECENT BACKERS)
   Force the 3-column donor-row grid on personal athlete pages, overriding
   any §45 global left-axis lock that may have collapsed it to vertical.
   Columns: 40px avatar / flexible name+time / auto amount. */

html body.subpage main section .donor-list {
  list-style: none !important;
  padding: 0 !important;
  margin: var(--space-4, 24px) 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2, 12px) !important;
  width: 100% !important;
}

html body.subpage main section .donor-row {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border, #e7d8c4) !important;
  width: 100% !important;
  text-align: left !important;
  margin: 0 !important;
}

html body.subpage main section .donor-row:last-child {
  border-bottom: none !important;
}

html body.subpage main section .donor-row--empty {
  display: block !important;
  grid-template-columns: none !important;
  border-bottom: none !important;
  font-style: italic !important;
  opacity: 0.65 !important;
  padding: 12px 0 !important;
}

html body.subpage main section .donor-row__avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: var(--brand-terracotta, #c34922) !important;
  color: var(--surface-cream, #efe5d7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

html body.subpage main section .donor-row__main {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  text-align: left !important;
  margin: 0 !important;
}

html body.subpage main section .donor-row__name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--brand-aubergine, #580e41) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

html body.subpage main section .donor-row__time {
  font-size: 12px !important;
  color: var(--surface-ink, #171411) !important;
  opacity: 0.6 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

html body.subpage main section .donor-row__amount {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--brand-aubergine, #580e41) !important;
  white-space: nowrap !important;
  text-align: left !important;
  padding-left: var(--space-2, 12px) !important;
  justify-self: end !important;
}

@media (max-width: 480px) {
  html body.subpage main section .donor-row {
    gap: 12px !important;
    padding: 10px 0 !important;
  }
  html body.subpage main section .donor-row__avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  html body.subpage main section .donor-row__name,
  html body.subpage main section .donor-row__amount {
    font-size: 14px !important;
  }
}

/* End of section 50 */

/* §51 — THANK-YOU PAGE: COMPACT 2-SECTION REDESIGN
   Tightens the new hero + action band layout for /thank-you-donation.html
   and /thank-you-registration.html. Hero centers content vertically with
   max-width column. Action band is tight padding + flex-wrap share row. */

html body.subpage .hero--thanks {
  min-height: 70svh !important;
  display: flex !important;
  align-items: center !important;
  padding-block: var(--space-6, 48px) !important;
}

html body.subpage .hero--thanks .hero__content {
  max-width: 640px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

html body.subpage .hero--thanks .hero__h1 {
  font-size: clamp(28px, 5vw, 44px) !important;
  line-height: 1.15 !important;
  margin-top: var(--space-2, 12px) !important;
}

html body.subpage .hero--thanks .js-thank-amount-line .js-thank-amount {
  color: var(--brand-aubergine, #580e41) !important;
  font-weight: 700 !important;
}

html body.subpage .hero--thanks .js-thank-amount-line .js-thank-name {
  color: var(--brand-aubergine, #580e41) !important;
  font-weight: 700 !important;
}

html body.subpage .section--aubergine .container--narrow {
  text-align: left !important;
}

html body.subpage .section--aubergine .thanks-share-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-3, 16px) !important;
  align-items: center !important;
  margin-top: var(--space-5, 32px) !important;
  justify-content: flex-start !important;
}

html body.subpage .section--aubergine .thanks-share-row .btn--primary {
  background: var(--brand-lilac, #eaaaff) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: var(--brand-lilac, #eaaaff) !important;
}

html body.subpage .section--aubergine .thanks-share-row .btn--primary:hover {
  background: #d893ff !important;
  border-color: #d893ff !important;
  color: #ffffff !important;
}

html body.subpage .section--aubergine .btn--text {
  color: var(--brand-cream, #efe5d7) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

html body.subpage .section--aubergine .btn--text:hover {
  color: var(--brand-lilac, #eaaaff) !important;
}

@media (max-width: 480px) {
  html body.subpage .hero--thanks {
    min-height: 60svh !important;
    padding-block: var(--space-5, 32px) !important;
  }
  html body.subpage .hero--thanks .hero__h1 {
    font-size: clamp(22px, 6vw, 32px) !important;
  }
  html body.subpage .section--aubergine .thanks-share-row {
    gap: var(--space-2, 12px) !important;
  }
}

/* End of section 51 */

/* §52 — DONATE CLUSTER: CREAM-BACKGROUND VARIANT
   The general pool section on /donate uses .section--cream so it alternates
   with the .section--aubergine athlete grid above it. Mirror §47/§49 stat +
   progress styling, but with ink-colored text and aubergine accents. */

html body.subpage main section.section--cream.section--general-pool .donate-stats {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--space-4, 24px) !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: var(--space-4, 24px) 0 0 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

html body.subpage main section.section--cream.section--general-pool .donate-stats__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html body.subpage main section.section--cream.section--general-pool .donate-stats__num,
html body.subpage main section.section--cream.section--general-pool .donate-stats__num *,
html body.subpage main section.section--cream.section--general-pool .donate-stats .js-stat-raised,
html body.subpage main section.section--cream.section--general-pool .donate-stats .js-stat-backers {
  font-size: clamp(22px, 5vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--brand-aubergine, #580e41) !important;
  white-space: nowrap !important;
  font-family: var(--font-display, "Cosmic Buns", "Inter", sans-serif) !important;
}

html body.subpage main section.section--cream.section--general-pool .donate-stats__label {
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--brand-aubergine, #580e41) !important;
  opacity: 0.65 !important;
  font-weight: 500 !important;
}

html body.subpage main section.section--cream.section--general-pool .progress-thin {
  display: block !important;
  width: 100% !important;
  max-width: 480px !important;
  height: 6px !important;
  margin: var(--space-3, 16px) 0 0 0 !important;
  background: rgba(88, 14, 65, 0.15) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
}

html body.subpage main section.section--cream.section--general-pool .progress-thin::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: var(--progress, 0%) !important;
  background: var(--brand-aubergine, #580e41) !important;
  border-radius: 999px !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body.subpage main section.section--cream.section--general-pool .eyebrow {
  color: var(--brand-terracotta, #c34922) !important;
}

html body.subpage main section.section--cream.section--general-pool .section__lede {
  color: var(--ink, #171411) !important;
  opacity: 0.85 !important;
  max-width: 540px !important;
}

@media (max-width: 480px) {
  html body.subpage main section.section--cream.section--general-pool .donate-stats {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--space-3, 16px) !important;
  }
  html body.subpage main section.section--cream.section--general-pool .donate-stats__num {
    font-size: clamp(18px, 4.5vw, 22px) !important;
  }
  html body.subpage main section.section--cream.section--general-pool .donate-stats__label {
    font-size: 11px !important;
  }
}

/* End of section 52 */

/* §53 — MAJOR GIVING SECTION: AUBERGINE-BACKGROUND VARIANT
   The Major giving block on /donate uses .section--aubergine so it visually
   sets apart the "let's talk" outreach from the cream general-pool above.
   All text + accents flipped to cream/lilac for contrast on dark purple. */

html body.subpage main section.section--aubergine.section--major-giving .eyebrow {
  color: var(--brand-lilac, #eaaaff) !important;
}

html body.subpage main section.section--aubergine.section--major-giving .h2,
html body.subpage main section.section--aubergine.section--major-giving h2 {
  color: var(--surface-cream, #efe5d7) !important;
}

html body.subpage main section.section--aubergine.section--major-giving .section__lede,
html body.subpage main section.section--aubergine.section--major-giving .body,
html body.subpage main section.section--aubergine.section--major-giving p {
  color: var(--surface-cream, #efe5d7) !important;
}

html body.subpage main section.section--aubergine.section--major-giving .container,
html body.subpage main section.section--aubergine.section--major-giving .container--narrow {
  text-align: left !important;
}

/* End of section 53 */

/* §54 — 2025 ATHLETE CARDS: NON-INTERACTIVE VARIANT OF 2027 STYLE
   Pilot 2025 cohort tiles on /athletes: visually IDENTICAL to confirmed
   2027 fundraising tiles (aubergine purple, same hover reveal), but
   non-clickable and without raised/progress/Donate elements. */

.athlete.athlete--noninteractive {
  cursor: default;
}

.athlete.athlete--noninteractive .athlete__trigger--display {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: default;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Reveal panel: mirror 2027's hover behavior — bio-short slides up on hover */
.athlete.athlete--noninteractive:hover .athlete__reveal,
.athlete.athlete--noninteractive:focus-within .athlete__reveal {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Force-hide ANY raised / progress / cta elements that might survive on
   non-interactive cards (defensive — should be removed at the markup level too). */
.athlete.athlete--noninteractive .athlete__raised,
.athlete.athlete--noninteractive .athlete__progress,
.athlete.athlete--noninteractive .athlete__cta {
  display: none !important;
}

/* End of section 54 */

/* §55 — ATHLETE NAME: FIT LONGER NAMES INSIDE CAPTION
   Long names like "Merel Hazewinkel" and "Simen van den Berg" overflow
   the purple caption box. Shrink the font + allow wrap as fallback. */

.athlete .athlete__name {
  font-size: clamp(13px, 1.4vw, 16px) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
  display: block !important;
}

.athlete .athlete__caption {
  padding-left: 12px !important;
  padding-right: 12px !important;
  min-width: 0 !important;
}

@media (max-width: 480px) {
  .athlete .athlete__name {
    font-size: clamp(12px, 3.5vw, 15px) !important;
  }
}

/* Athletes grid: ensure each card has consistent width regardless of name length */
.athletes-grid .athlete {
  min-width: 0 !important;
}

/* End of section 55 */

/* §56 — IMPACT BENEFICIARY PORTRAITS: UNIFORM 4:5 ASPECT
   The 3 impact-story cards (Amina/Jackson/Aaliyah) use <img class="impact-portrait">
   with source JPGs of varying aspect. Force every portrait to render as 4:5
   cropped (object-fit cover) so all 3 cards are the same height. */

.pillar-card .impact-portrait,
.impact-portrait {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: 50% 30% !important;
  background: rgba(23, 20, 17, 0.08) !important;
}

/* Match the rounded-top of pillar-card if the image is the first child */
.pillar-card .impact-portrait {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

/* Ensure pillar-card itself doesn't grow taller because of differing image heights */
.pillar-card {
  display: flex !important;
  flex-direction: column !important;
}

.pillar-card > .impact-portrait,
.pillar-card .pillar-card__image {
  flex-shrink: 0 !important;
}

@media (max-width: 480px) {
  .pillar-card .impact-portrait,
  .impact-portrait {
    aspect-ratio: 4 / 5 !important;
  }
}

/* End of section 56 */

/* §57 — NO-STRETCH IMAGE POLICY (zoom-to-fit via crop, never letterbox)
   Sam's rule: don't physically resize source images; if dimensions don't
   match the container, the image should ZOOM IN (object-fit: cover) so the
   container is fully filled with the image cropped at the edges. Portraits
   crop favouring the face; logos use contain so they're not cropped. */

.athlete__image,
.impact-portrait,
.hero__image,
.carousel__slide img,
.athlete__media img,
.donate-hero--athlete__photo img,
.pillar-card .impact-portrait {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Portrait images: bias the crop toward the upper-middle (face area) */
.athlete__image,
.impact-portrait {
  object-position: 50% 30% !important;
}

/* Hero images: center crop (most heroes are landscape) */
.hero__image {
  object-position: 50% 50% !important;
}

/* Logos must NOT crop — contain ensures the full logo is always visible */
.partner-card__logo,
.nav__logo-img,
.footer__logo,
.partner-card img.partner-card__logo {
  object-fit: contain !important;
  height: auto !important;
  max-width: 100% !important;
}

/* End of section 57 */

/* §58 — MOBILE DRAWER DONATE BUTTON: LILAC PILL
   The .mobile-drawer__menu-item--donate inside the open drawer should look
   like a proper pill button (border-radius, padding, inline-flex), matching
   the desktop nav-bar Donate button — not a full-width square link. */

html body .mobile-drawer__menu .mobile-drawer__menu-item--donate,
html body aside.mobile-drawer .mobile-drawer__menu-item--donate,
html body a.mobile-drawer__menu-item.mobile-drawer__menu-item--donate {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 24px 0 0 0 !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  background: var(--brand-lilac, #eaaaff) !important;
  color: #ffffff !important;
  font-family: var(--font-display, "Cosmic Buns", "Inter", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border: 2px solid var(--brand-lilac, #eaaaff) !important;
  text-transform: none !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

html body .mobile-drawer__menu li:has(.mobile-drawer__menu-item--donate) {
  display: flex !important;
  justify-content: flex-start !important;
  border-bottom: none !important;
}

html body .mobile-drawer__menu .mobile-drawer__menu-item--donate:hover,
html body aside.mobile-drawer .mobile-drawer__menu-item--donate:hover {
  background: #d893ff !important;
  border-color: #d893ff !important;
  color: #ffffff !important;
}

/* End of section 58 */

/* §59 — REMOVED 2026-07-30. Superseded by the CSS Grid stat-band layout
   in main.css §10 + supplemental.css §C13/C13b. The `flex-wrap`, `flex: 1 1
   auto`, and `white-space: normal !important` overrides here were band-aids
   on the old flex layout and are no longer needed (and were actively breaking
   the new grid alignment). */

/* §60 — HERO HEADINGS: WHOLE-WORD WRAPPING (no mid-word breaks)
   Sam's complaint: "Triathlon" was breaking to "Triathlo-n" on certain widths.
   Force hero h1 + large display headings to break only at word boundaries
   (spaces), never mid-word, never with hyphens. */

html body .hero__h1,
html body .h1,
html body .hero__sub,
html body h1.hero__h1 {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  word-spacing: normal !important;
}

/* Hero sub: also no mid-word breaks */
html body .hero__sub {
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Allow font-size to shrink slightly on narrow viewports so the long words
   still fit on one line where possible. */
@media (max-width: 640px) {
  html body .hero__h1 {
    font-size: clamp(28px, 8vw, 48px) !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 380px) {
  html body .hero__h1 {
    font-size: clamp(24px, 7.5vw, 36px) !important;
  }
}

/* End of section 60 */


/* §61 — IMAGE ZOOM POLICY: MAX-SPECIFICITY OVERRIDES
   Sam reports §57 didn't take. The root cause is the .athlete__media CONTAINER
   doesn't force a fixed aspect-ratio, so img only fills width (leaving the
   colored container bg visible above/below). Force container aspect + img fill. */

html body .athlete__media,
html body section .athlete__media,
html body main .athlete__media,
html body main section .athlete__media,
html body main section.section--aubergine .athlete__media,
html body main section.section--cream .athlete__media,
html body main section.section--terracotta .athlete__media,
html body main section .athletes-grid .athlete__media,
html body main section .athletes-grid--lead .athlete__media,
html body .athlete .athlete__media {
  aspect-ratio: 4 / 5 !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

html body .athlete__media img,
html body .athlete__media > img,
html body .athlete__media .athlete__image,
html body .athlete__image,
html body main .athlete__image,
html body main section .athlete .athlete__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 30% !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
}

/* Impact portraits — same enforcement */
html body .pillar-card .impact-portrait,
html body main .pillar-card .impact-portrait,
html body .impact-portrait {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: 50% 30% !important;
  display: block !important;
}

/* Hero images — center crop, fill */
html body .hero__image,
html body .hero__image img,
html body section.hero img.hero__image,
html body section.hero .hero__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block !important;
}

/* Logos: KEEP contain (never crop). High-specificity */
html body .partner-card__logo,
html body img.partner-card__logo,
html body .partner-card img.partner-card__logo,
html body .nav__logo-img,
html body .footer__logo,
html body img.footer__logo {
  object-fit: contain !important;
  height: auto !important;
  max-width: 100% !important;
  width: auto !important;
}

/* End of section 61 */

/* §62 — MOBILE DRAWER DONATE PILL: MAX-SPECIFICITY OVERRIDE
   §58 didn't take. Use the highest-specificity selectors + override
   parent flex/block rules that force full width. */

html body aside#mobile-drawer.mobile-drawer ul.mobile-drawer__menu li a.mobile-drawer__menu-item.mobile-drawer__menu-item--donate,
html body aside#mobile-drawer ul.mobile-drawer__menu li a.mobile-drawer__menu-item--donate,
html body #mobile-drawer .mobile-drawer__menu li a.mobile-drawer__menu-item--donate,
html body aside.mobile-drawer ul li .mobile-drawer__menu-item--donate {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  margin: 32px auto 0 0 !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  background: var(--brand-lilac, #eaaaff) !important;
  color: #ffffff !important;
  font-family: var(--font-display, "Cosmic Buns", "Inter", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border: 2px solid var(--brand-lilac, #eaaaff) !important;
  text-align: center !important;
  line-height: 1.2 !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  box-sizing: border-box !important;
  text-transform: none !important;
}

/* Parent li should be flex so child can align flex-start without stretching */
html body aside#mobile-drawer ul.mobile-drawer__menu li:has(.mobile-drawer__menu-item--donate),
html body aside.mobile-drawer ul.mobile-drawer__menu li:has(.mobile-drawer__menu-item--donate) {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 24px 0 0 0 !important;
  width: 100% !important;
}

html body aside#mobile-drawer .mobile-drawer__menu-item--donate:hover,
html body aside.mobile-drawer .mobile-drawer__menu-item--donate:hover {
  background: #d893ff !important;
  border-color: #d893ff !important;
  color: #ffffff !important;
}

/* End of section 62 */

/* §63 — REMOVED 2026-07-30. Superseded by CSS Grid stat-band layout
   (main.css §10 + supplemental.css §C13/C13b). The "25 or 75 km" cell no
   longer overflows because grid tracks are equal 1fr slices, and the
   connector "or" stays inline via .stat-band__number { white-space: nowrap }
   inside a properly-sized cell. */
/* End of section 63 */

/* §64 — ATHLETE CARD ORANGE BAR: KILL THE PADDING-TOP CULPRIT
   Sam reports the Lance Koi card STILL has an orange bar even after §61
   forced aspect-ratio + object-fit: cover. Root cause located:
     supplemental.css line 2822 — `.athlete__media { padding-top: 12%; }`
     supplemental.css line 2820 — `.athlete__media { align-items: flex-end; }`
     supplemental.css line 2828 — `.athlete__image { object-fit: contain; }`
   The 12% top padding inside `.athlete__media` (which sits on top of the
   terracotta `.athlete__trigger` background) carves out an exact 12%-of-width
   strip of terracotta that the image cannot reach because flex-end +
   object-fit: contain anchor it to the bottom. §61 set object-fit: cover on
   the img but did NOT zero the container's padding-top, so the cover'd image
   still starts 12% down. Kill the padding, kill the flex anchoring, kill
   any trigger padding/border. */

html body .athlete .athlete__trigger,
html body .athlete--terracotta .athlete__trigger,
html body .athlete--aubergine .athlete__trigger,
html body main section .athlete .athlete__trigger,
html body main section .athletes-grid .athlete .athlete__trigger,
html body main section .athletes-grid--lead .athlete .athlete__trigger {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: block !important;
}

/* Keep terracotta/aubergine background on trigger (it's the card color)
   but ensure NOTHING above the image inside the media container shows it. */

html body .athlete .athlete__media,
html body .athlete--terracotta .athlete__media,
html body .athlete--aubergine .athlete__media,
html body main section .athlete .athlete__media,
html body main section .athletes-grid .athlete .athlete__media,
html body main section .athletes-grid--lead .athlete .athlete__media {
  padding: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}

/* Image must FILL the now-unpadded container, cover crop, no contain. */
html body .athlete .athlete__media img.athlete__image,
html body .athlete .athlete__media > img,
html body .athlete--terracotta .athlete__media img,
html body .athlete--aubergine .athlete__media img,
html body main section .athlete .athlete__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 30% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  filter: none !important;
}

/* End of section 64 */

/* §65 — REMOVED 2026-07-30. Superseded by CSS Grid stat-band layout
   (main.css §10). Column-count is now handled by breakpoint rules there:
   4 cols ≥901px → 2 cols 481–900px → 1 col ≤480px, with pilot 3-cell
   variants dropping to 2 cols (last item spanning) then 1 col. */
/* End of section 65 */

/* §67 — REMOVED 2026-07-30. Was neutralising the double-gutter caused by
   §63's `max-width: 100vw !important`. §63 is now gone, so C13's base
   neutraliser (`.container .stat-band__grid { padding-inline: 0 !important }`)
   at line ~1331 does its job without needing this override. */
/* End of section 67 */

/* === §66 — Hero/race h2 clean-wrap guard ====================================
   Independent verification appended 2026-06-08 alongside a sibling fix that
   strips inline `white-space: nowrap` from h2s on index.html (lines 280, 333).

   Once the inline is gone, two h2s with the form "Four days. 25 athletes.
   One mountain summit. One triathlon." need to wrap cleanly:
     • #1 (line 280): `.section--aubergine.stat-band .section__header > h2.h2`
     • #2 (line 333): `.section--aubergine .container--narrow > h2.h2`

   Risk left in the cascade after inline removal:
     • main.css line 137 ships a global `overflow-wrap: break-word` on every
       `h2`. With a long word inside a narrow viewport, the browser is
       permitted to break mid-word (no hyphen — just a hard mid-glyph break)
       — Sam previously reported "Triathlon" splitting as "Triathlo-n".
     • §60 (sup.css:5854) already enforces clean-wrap for `.h1` / hero
       headings but has NO `.h2` selector, so the same fix never reached the
       at-a-glance + race-callout h2s.
     • No `white-space: nowrap` exists on `.h2` at any breakpoint, so no
       further normalize-nowrap rule is required (the existing §40 guard
       at sup.css:2995 already neutralises any future `[style*="nowrap"]`
       leak on mobile).
     • No problematic `max-width` exists on `.h2` itself; container ancestors
       (`.section__header`, `.container--narrow > *`) cap at 720px which is
       wide enough that wrapping at spaces stays balanced on every viewport.

   Fix: re-assert keep-all + normal overflow-wrap + hyphens:none on every
   `.h2` / `h2` site-wide, mirroring §60's hero policy. This means h2 text
   breaks ONLY at whitespace, never mid-glyph, never with a hyphen. Specificity
   (`html body`) defeats main.css line 137 without `!important` collisions with
   site-wide H2 sizing in sup.css §main-h2 (1720). Mobile/desktop both inherit
   this — wrapping at spaces is desirable on every viewport for these lines.
   --- */
html body .h2,
html body h2 {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Explicitly cover the two h2 locations the sibling agent is fixing, plus the
   stat-band header pattern, with the same protections under higher specificity
   so they survive any future override that re-introduces break-word on h2. */
html body .section--aubergine .h2,
html body .section--aubergine h2,
html body .stat-band .h2,
html body .stat-band h2,
html body .section__header .h2,
html body .section__header h2 {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* End of section 66 */

/* §69 — REMOVED 2026-07-30. Pilot 3-cell layout is now handled by the
   base grid rule in main.css §10:
     .stat-band__grid:has(> .stat-band__item:nth-child(3):last-child) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   with responsive drops to 2 cols (last spans both) then 1 col. */
/* End of section 69 */

/* === §70 — beneficiary story quote styling =================================
   Context: /impact "Three stories from Northern Kenya" uses
   <blockquote class="pillar-card__quote"> with curly &ldquo;/&rdquo; entities
   and an inline <cite>. The earlier rule (main.css:1320) only set body font +
   italic + body size, so the quotes read as plain italic prose and did not
   stand out as quotes on the cream pillar-card background.

   This section restores the blockquote feel: heading font, larger fluid size,
   comfortable line-height, indented from the card body with a lilac rule, and
   a discreet cite block in terracotta. We use the curly quotes already in the
   HTML (no ::before mark) to avoid doubling up.

   Specificity: html body .pillar-card .pillar-card__quote — beats the bare
   .pillar-card__quote in main.css regardless of load order, and also covers
   .section--cream context (the only place this card is used on /impact).
   ========================================================================= */

html body .pillar-card .pillar-card__quote {
  /* reset blockquote UA margin so it sits flush within the card body flow */
  margin: var(--space-3) 0 0;
  padding: 0 0 0 var(--space-3);
  border-left: 2px solid var(--brand-lilac);

  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--brand-aubergine);

  /* hanging punctuation if the engine supports it; no harm if not */
  hanging-punctuation: first;
  text-wrap: pretty;
}

/* The inline <cite> on /impact uses style="..." overrides for font-family,
   weight and display. Keep those working but add a clear visual demotion:
   smaller size, normal style, terracotta accent. We do NOT touch font-family
   or font-weight here (the inline styles win) — just size, color, spacing. */
html body .pillar-card .pillar-card__quote cite {
  font-size: var(--fs-small);
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--brand-terracotta);
  opacity: 0.95;
}

/* Section-context guard: even on .section--cream the aubergine text needs to
   stay aubergine (some older rules tint blockquotes on cream backgrounds). */
html body .section--cream .pillar-card .pillar-card__quote {
  color: var(--brand-aubergine);
}
html body .section--cream .pillar-card .pillar-card__quote cite {
  color: var(--brand-terracotta);
}

/* End of section 70 */

/* §71 — REMOVED 2026-07-30. Was re-tightening nowrap on formatted counters
   to defeat §63's `white-space: normal !important` blanket. §63 is gone;
   main.css §10 sets `.stat-band__number { white-space: nowrap }` as the
   default, so all counter numbers stay on one line without further help. */
/* End of section 71 */

/* === §72 — beneficiary story cards: consolidated layout ===
   Replaces 8+ conflicting .impact-portrait rules scattered through
   the file. Forces: 3-column grid on desktop, stacked on narrow,
   uniform card heights, 4:5 portraits that all render at the same
   size. Highest selector specificity beats all earlier overrides. */

html body main section .pillar-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  margin-inline: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
}

@media (max-width: 900px) {
  html body main section .pillar-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

html body main section .pillar-grid .pillar-card {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

html body main section .pillar-card .impact-portrait,
html body main section .pillar-card > img.impact-portrait {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: 50% 30% !important;
  margin: 0 !important;
  border-radius: 12px 12px 0 0 !important;
}

html body main section .pillar-card .pillar-card__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 20px 4px 0 4px !important;
  flex: 1 1 auto !important;
  text-align: left !important;
}

html body main section .pillar-card .pillar-card__back-link {
  display: inline-block !important;
  margin-top: auto !important;
  color: var(--brand-aubergine, #580e41) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* End of section 72 */


/* === §73 — closing-CTA hierarchy ============================
   Fixes:
   - Lede paragraph rendered lilac (low typographic hierarchy) on 10 pages.
   - closing-cta__lede and closing-cta__btn modifier classes were referenced
     site-wide but undefined; now have minimal styles.
   Wins over: supplemental.css:1499 (.closing-cta p) — equal specificity but later. */
html body .closing-cta p {
  color: var(--surface-white) !important;
}
html body .closing-cta .eyebrow {
  color: var(--brand-lilac) !important;
}
html body .closing-cta__lede {
  color: var(--surface-white);
  max-width: 60ch;
  margin-inline: auto;
}
html body .closing-cta__btn {
  margin-top: var(--space-4);
}
/* End of section 73 */

/* === §74 — eligibility & rescue-callout contrast ============
   Fixes:
   - CRITICAL: white-on-white bullet list inside .eligibility-body on
     register.html (.section--aubergine .bullet-list li forces white).
   - CRITICAL: lilac links + lilac eyebrow on salmon .rescue-callout.
   Wins over: supplemental.css:2161 (.section--aubergine .bullet-list li),
   main.css:357 (.section--aubergine a). */
html body .section--aubergine .eligibility-body {
  background: var(--surface-white) !important;
  color: var(--surface-ink) !important;
  padding: var(--space-4);
  border-radius: 8px;
}
html body .section--aubergine .eligibility-body .bullet-list li {
  color: var(--surface-ink) !important;
}
html body .section--aubergine .eligibility-body .bullet-list li::before {
  color: var(--brand-aubergine) !important;
}
html body .section--aubergine .eligibility-body a:not(.btn) {
  color: var(--brand-aubergine) !important;
  border-bottom-color: var(--brand-aubergine) !important;
}
html body .section--aubergine .rescue-callout {
  background: var(--accent-salmon, #ffafa8);
  color: var(--surface-ink);
  padding: var(--space-4);
  border-radius: 8px;
}
html body .section--aubergine .rescue-callout .eyebrow,
html body .section--aubergine .rescue-callout a:not(.btn) {
  color: var(--brand-aubergine) !important;
}
html body .section--aubergine .rescue-callout a:not(.btn) {
  border-bottom-color: var(--brand-aubergine) !important;
}
/* End of section 74 */

/* === §75 — restore pillar-card backgrounds outside impact stories ===
   §72 (lines 6547+) zeroes background/padding on every .pillar-grid
   .pillar-card. That was correct for impact-story portrait cards but
   wipes the lilac/salmon/lavender Three-Pillar tiles on index +
   about-health-yetu. Re-establish the backgrounds + padding when the
   card does NOT contain an .impact-portrait. Uses :has() — Safari 15.4+. */
html body main section .pillar-grid:not(:has(.impact-portrait)) .pillar-card {
  padding: var(--space-5) !important;
  border-radius: 16px !important;
  background: var(--brand-cream) !important;  /* default fallback */
}
html body main section .pillar-grid:not(:has(.impact-portrait)) .pillar-card.pillar-card--lilac {
  background: var(--brand-lilac) !important;
  color: var(--surface-ink) !important;
}
html body main section .pillar-grid:not(:has(.impact-portrait)) .pillar-card.pillar-card--salmon {
  background: var(--accent-salmon) !important;
  color: var(--surface-ink) !important;
}
html body main section .pillar-grid:not(:has(.impact-portrait)) .pillar-card.pillar-card--lavender {
  background: var(--accent-lavender) !important;
  color: var(--surface-ink) !important;
}
html body main section .pillar-grid:not(:has(.impact-portrait)) .pillar-card .pillar-card__body {
  padding: 0 !important;
}
/* Fallback for browsers without :has(): paint backgrounds via modifier
   classes regardless (only one of these wins per card via §72's
   transparent override on impact-portrait cards, which stays scoped). */
@supports not selector(:has(*)) {
  html body main section .pillar-card--lilac    { background: var(--brand-lilac) !important; color: var(--surface-ink) !important; padding: var(--space-5) !important; }
  html body main section .pillar-card--salmon   { background: var(--accent-salmon) !important; color: var(--surface-ink) !important; padding: var(--space-5) !important; }
  html body main section .pillar-card--lavender { background: var(--accent-lavender) !important; color: var(--surface-ink) !important; padding: var(--space-5) !important; }
}
/* End of section 75 */

/* === §76 — carousel dots on aubergine sections =================
   Wins over: supplemental.css:1923 (.carousel__dots button). */
html body section.section--aubergine .carousel__dots button {
  border: 2px solid var(--brand-lilac) !important;
  background: transparent !important;
}
html body section.section--aubergine .carousel__dots button.is-active,
html body section.section--aubergine .carousel__dots button[aria-current="true"] {
  background: var(--brand-lilac) !important;
}
/* End of section 76 */

/* === §77 — athletes-grid--lead 2-col desktop override ==================
   Stat-band bits removed 2026-07-30 (now handled by main.css §10 grid).
   The athletes-grid--lead override remains — unrelated to stat-band. */
@media (min-width: 1024px) {
  html body .athletes-grid--lead {
    grid-template-columns: repeat(2, minmax(0, 320px)) !important;
    justify-content: center !important;
    gap: var(--space-5) !important;
  }
}
/* End of section 77 */

/* === §78 — body padding reserve for sticky donate bar =====
   Prevents overlap with closing-CTA buttons on /donate/[slug] mobile. */
@media (max-width: 767px) {
  body:has(.sticky-donate-bar) {
    padding-bottom: 96px !important;
  }
}
/* Hide mobile-register-bar on post-conversion pages */
body.subpage--post-conversion .mobile-register-bar { display: none !important; }
/* End of section 78 */

/* === §79 — mobile tap-target floor (WCAG 2.5.5) =====
   Universal pad-up to 44×44 for: pillar-card text links, 404 link list,
   sticky-donate-bar btn, carousel arrows/dots, camps map select,
   legal-page TOC anchors, thank-you back links. */
@media (max-width: 768px) {
  html body .pillar-card .btn--text,
  html body .athletes-grid__cta .btn--text,
  html body .error-links a,
  html body .legal-toc a,
  html body .js-back-home,
  html body .js-back-to-athletes {
    min-height: 44px !important;
    padding-block: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  html body .carousel__btn--prev,
  html body .carousel__btn--next {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html body .carousel__dots button {
    min-width: 16px !important;
    min-height: 16px !important;
  }
  html body .sticky-donate-bar__btn {
    min-height: 44px !important;
    padding-block: 12px !important;
  }
  html body select#camps-year-filter {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
  html body .form-radio--inline {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }
  html body .form-check {
    min-height: 44px !important;
    padding-block: 10px !important;
  }
}
/* End of section 79 */

/* === §80 — new component styles =====
   Components referenced in markup but with zero CSS:
   - .hero__stat aside on index hero (bottom-right summit elevation badge)
   - .extension-tile system on travel-and-logistics.html sec8
   - .legal-section scroll-margin (TOC anchor jumps under fixed nav)
   - .partner-card__logo-link (rename from .partner-card__logo, anchor only)
   - .section--general-pool progress bar (resolve ::before/::after conflict) */

/* hero__stat — small overlay badge bottom-right of hero */
.hero__stat {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 2;
  text-align: right;
  color: var(--surface-white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
.hero__stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
}
.hero__stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-small, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.92;
}
@media (max-width: 640px) {
  .hero__stat { display: none; }
}

/* extension-tile — travel-and-logistics §8 */
.extension-tiles {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-4) !important;
  margin-top: var(--space-5) !important;
}
@media (min-width: 768px) { .extension-tiles { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) {
  .extension-tiles { grid-template-columns: repeat(3, 1fr) !important; }
  .extension-tiles > *:nth-child(4):nth-last-child(2),
  .extension-tiles > *:nth-child(5):nth-last-child(1) {
    grid-column: span 1;
  }
}
.extension-tile {
  padding: var(--space-5);
  border-radius: 16px;
  background: var(--brand-cream);
  color: var(--surface-ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.extension-tile--lavender { background: var(--accent-lavender); }
.extension-tile--lilac    { background: var(--brand-lilac); }
.extension-tile--salmon   { background: var(--accent-salmon); }
.extension-tile--cream    { background: var(--brand-cream); }
.extension-tile--sand     { background: #e8d8b8; }
.extension-tile__region {
  font-family: var(--font-body);
  font-size: var(--fs-small, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-aubergine);
  font-weight: 600;
}
.extension-tile__logo {
  max-width: 160px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-block: var(--space-2);
}
.extension-tile__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body, 1rem);
  line-height: 1.5;
  flex-grow: 1;
}
.extension-tile__placeholder {
  display: inline-block;
  font-size: var(--fs-small, 0.875rem);
  color: var(--ink-muted, #6b6357);
  font-style: italic;
}
.extension-tile__cta {
  margin-top: auto;
  align-self: flex-start;
}
.extension-footnote {
  margin-top: var(--space-5);
  color: var(--ink-muted, #6b6357);
  font-size: var(--fs-small, 0.875rem);
}

/* legal-section scroll-margin (TOC anchor under fixed nav) */
.legal-section {
  scroll-margin-top: 96px;
}

/* partner-card__logo-link (anchor) — separate from img class */
.partner-card__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: var(--space-3);
  text-decoration: none;
}
.partner-card__logo-link img {
  max-width: 160px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* General-pool progress bar — use ::after only, kill ::before fill */
html body .section--general-pool .progress-thin::before {
  display: none !important;
}
html body .section--general-pool .progress-thin::after {
  content: '';
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: var(--brand-terracotta);
  border-radius: inherit;
  transition: width 0.6s ease;
}

/* End of section 80 */

/* §81 — REMOVED 2026-07-30. Was a bulletproof override piled on top of
   §59/§63/§65/§71 to keep stat-band numbers on one line. Those sections
   are gone, and main.css §10's base `.stat-band__number { white-space:
   nowrap }` (no !important needed) is now the only rule in play. */
/* End of section 81 */

/* === §82 — Closing-CTA left-align ============================
   Sam requested left alignment for all closing-CTA sections.
   Default was centered (via .closing-cta / section.closing-cta
   inherited from main.css and section--closing-cta rules).
   The CTA <a class="btn btn--primary closing-cta__btn"> is bare
   (NOT wrapped in <p>), so its alignment follows the parent's
   text-align; setting .container to text-align:left left-aligns
   the inline-block button naturally, without making it full-width.
   Site-wide: applies to index, about-health-yetu, faq, impact,
   fundraise, partners, the-race, travel-and-logistics, 404, and
   donate/[slug].js. Matches §73 selector pattern (html body ...)
   to win over .closing-cta defaults + §73 lede color rule. */

html body .closing-cta,
html body section.closing-cta,
html body .section.closing-cta,
html body .closing-cta .container,
html body .closing-cta .container--narrow,
html body .closing-cta .closing-cta__content,
html body .closing-cta .eyebrow,
html body .closing-cta .h2,
html body .closing-cta h2,
html body .closing-cta .body,
html body .closing-cta p,
html body .closing-cta .closing-cta__lede {
  text-align: left !important;
}

/* Reset auto-centering of the lede block set by §73 (margin-inline: auto)
   so the lede flushes to the left edge of the container. */
html body .closing-cta .closing-cta__lede {
  margin-inline: 0 !important;
}

/* End of section 82 */

/* === §83 — MOBILE-REGISTER-BAR: SOLID LILAC =====================
   Sam's canonical rule (2026-06-08): the sticky bottom mobile-register-bar
   on every subpage should be SOLID LILAC (--brand-lilac bg, ink text), to
   visually distinguish it from the terracotta Register CTAs elsewhere on the
   page (hero CTA, closing-cta CTA, in-section CTAs all stay terracotta).

   Background context — main.css §8 (lines 861–884) paints .mobile-register-bar
   with --brand-aubergine background and a terracotta hover. This section
   re-skins to lilac + aubergine-on-hover for legibility.

   This rule also covers the LEGACY wrapped-button shape
     <div class="mobile-register-bar"><a class="btn btn--primary mobile-register-bar__link">…</a></div>
   in case any page still ships it after the alignment pass — the inner
   .btn--primary is overridden so the visible pill matches the bare-anchor
   shape. (The alignment pass removes all wrapped-button shapes, but the
   max-specificity guard prevents regression if a future page reintroduces it.)

   Specificity: html body … with !important to defeat:
     - main.css:867  .mobile-register-bar { background: var(--brand-aubergine); }
     - main.css:883  .mobile-register-bar:hover { background: var(--brand-terracotta); }
     - supplemental.css btn--primary terracotta fill (default .btn--primary bg)
   ================================================================ */

html body .mobile-register-bar {
  background: var(--brand-lilac) !important;
  color: var(--surface-ink) !important;          /* dark ink on lilac for AA contrast */
  text-decoration: none !important;
}

html body .mobile-register-bar:hover,
html body .mobile-register-bar:focus-visible {
  background: var(--brand-aubergine) !important;
  color: var(--surface-white) !important;
}

/* Legacy wrapped-button shape: kill the nested .btn--primary terracotta fill
   so the visible pill matches the bare-anchor lilac treatment. */
html body .mobile-register-bar .mobile-register-bar__link.btn--primary,
html body .mobile-register-bar a.btn--primary {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  /* keep .btn typographic + padding rhythm — only neutralise color/bg */
}

html body .mobile-register-bar .mobile-register-bar__link.btn--primary:hover,
html body .mobile-register-bar a.btn--primary:hover,
html body .mobile-register-bar .mobile-register-bar__link.btn--primary:focus-visible,
html body .mobile-register-bar a.btn--primary:focus-visible {
  background: transparent !important;
  color: inherit !important;
}

/* End of section 83 */

/* === §84 — Donate CTA orphan: js-donate-cta-general =============
   The general-pool Stripe CTA on /donate.html uses the class
   .js-donate-cta-general (not .js-donate-cta), which §48's lilac
   CTA rule does not match. Without this override the button would
   render as the default terracotta .btn--primary. Mirror the §48
   pattern (html body prefix + !important) to apply solid lilac.
   ================================================================ */

html body a.js-donate-cta-general,
html body .js-donate-cta-general {
  background: var(--brand-lilac, #eaaaff) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: var(--font-display, "Cosmic Buns", "Inter", sans-serif) !important;
  letter-spacing: 0.02em !important;
  border-color: var(--brand-lilac, #eaaaff) !important;
}

html body a.js-donate-cta-general:hover,
html body .js-donate-cta-general:hover {
  background: #d893ff !important;
  border-color: #d893ff !important;
  color: #ffffff !important;
}

/* End of section 84 */

/* === §85 — Carousel control tap-target selector fix =============
   §79 (line 6763) pads carousel arrows to 44×44 on mobile but uses
   the names `.carousel__btn--prev` / `.carousel__btn--next`, which
   never matched the real markup (`.carousel__prev` / `.carousel__next`)
   that carousel.js binds to. Renaming the markup would break the JS,
   so we add the missing tap-target rule here against the live class
   names. Wins via specificity (`html body` + media query). §79's
   dead selectors are intentionally left in place — they are harmless
   no-ops and removing them is out of scope for this pass.
   ================================================================ */

@media (max-width: 768px) {
  html body .carousel__prev,
  html body .carousel__next {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* End of section 85 */

/* === §86 — Eyebrow tone modifier: .eyebrow--aubergine ===========
   Promotes inline `style="color: var(--brand-aubergine);"` overrides
   on .eyebrow to a reusable modifier class. Used by impact.html for
   3 sub-card eyebrows (Eye care / Dental / Cervical cancer) that sit
   inside cream sections but need aubergine eyebrows to differentiate
   them from the section's default terracotta. Adds !important to
   beat the section-tone default eyebrow color rules in main.css.
   ================================================================ */

.eyebrow--aubergine {
  color: var(--brand-aubergine) !important;
}

/* End of section 86 */