/* ==========================================================================
   THE RED ROAD — css/site.css (public pages, portal pages and the /news,
   /info and /fundraise shells). Loads after css/base.css, which owns the
   tokens, the reset, the type voices and the shared kit. §1–§17 are the
   candidate stylesheet ported verbatim with the .rr prefix kept, so it stays
   diffable against what Toby reviewed; §18–§30 are filled by later work
   packages; §31 is responsive.

   ROUTE-LINE DISCIPLINE RULES (enforced, not advisory):
   1. The route rail appears only on pages with 3+ narrative sections.
   2. Never on the donate form itself, contact, or utility pages.
   3. Rail-only: the line never crosses a photograph or a text column.
   4. At most one line per viewport.
   5. Posts carry real ordinals and labels only — never invented distances.
   6. Each segment animates once, ever. No-JS and reduced-motion users get
      the road fully drawn (the covered state is only ever added by JS).

   MAP
   §1 text/link basics
   §2 utility bar
   §3 nav
   §4 hero
   §5 start line
   §6 trust strip
   §7 route rail
   §8 splits
   §9 waypoint cards
   §10 voices band
   §11 races, partner strip, quotes
   §12 news teaser
   §13 finish band
   §14 footer
   §15 inner pages: hero, breadcrumb, clinical register, plain stats, milestones, gallery, benefits, celebs
   §16 donate page
   §17 sections/transparency
   §18 long-form article (RR-07)
   §19 news grid + archive (RR-07)
   §20 pillars (RR-08)
   §21 school card (RR-08)
   §22 roster (RR-08)
   §23 feature row (RR-08)
   §24 bigstat + lede (RR-08)
   §25 register (RR-09)
   §26 endorsement + profile (RR-09)
   §27 celebs--square, solid hero, figure/two-up (RR-10)
   §28 contact/offices, race panel, auth layout, utility shell (RR-11)
   §29 campaign family + browse (RR-12)
   §30 seg-media + homepage extras (RR-03)
   §31 responsive
   ========================================================================== */

/* ==== §1 text/link basics ==== */
.rr a:not(:where(.skip-link)) { color: var(--murram); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rr a:not(:where(.skip-link)):hover { color: var(--ink); }
.rr p { max-width: 65ch; }

/* ==== §2 utility bar ==== */
/* ---- utility bar -------------------------------------------------------- */
.rr .utility-bar {
  background: var(--chalk);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.82rem;
}
.rr .utility-bar .container {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding-block: 6px; flex-wrap: wrap;
}
.rr .utility-left { display: flex; gap: 18px; flex-wrap: wrap; }
.rr .utility-item { display: inline-flex; align-items: center; gap: 6px; color: var(--dust); }
.rr .utility-bar a { color: var(--dust); text-decoration: none; }
.rr .utility-bar a:hover, .rr .utility-bar a:focus-visible { color: var(--murram); text-decoration: underline; }
.rr .utility-right { display: flex; gap: 14px; }

/* ==== §3 nav ==== */
/* ---- nav ----------------------------------------------------------------
   Same DOM contract as the live site (#nav-links, .has-dropdown, .dropdown-
   toggle/.dropdown-menu/.dropdown-open/.dropdown-suppressed, #hamburger) so
   js/common.js initNav() drives it unchanged. */
.rr .main-nav {
  position: sticky; top: 0; z-index: 1000;
  background: var(--chalk);
  border-bottom: 1px solid var(--hairline);
}
.rr .main-nav .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 24px;
}
.rr .logo-img { height: 42px; width: auto; }
.rr .nav-links {
  display: flex; align-items: center; gap: 26px;
  margin: 0; padding: 0; list-style: none;
}
.rr .nav-links a {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.rr .nav-links a:hover, .rr .nav-links a:focus-visible { border-bottom-color: var(--murram); }
.rr .nav-links a.nav-cta {
  background: var(--marigold);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 9px 22px;
  font-weight: 700;
  transition: background-color 150ms ease;
}
.rr .nav-links a.nav-cta:hover, .rr .nav-links a.nav-cta:focus-visible { background: var(--marigold-deep); }
.rr .has-dropdown { position: relative; }
.rr .dropdown-arrow { font-size: 0.7em; margin-left: 4px; }
.rr .dropdown-menu {
  position: absolute; top: 100%; left: -12px;
  min-width: 230px;
  background: var(--chalk);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--murram);
  padding: 8px 0; margin: 0; list-style: none;
  display: none;
  box-shadow: 0 10px 24px -12px rgba(43, 29, 22, 0.35);
}
.rr .has-dropdown:hover .dropdown-menu,
.rr .has-dropdown:focus-within .dropdown-menu,
.rr .has-dropdown.dropdown-open .dropdown-menu { display: block; }
.rr .has-dropdown.dropdown-suppressed .dropdown-menu { display: none; }
.rr .dropdown-menu a {
  display: block; padding: 9px 18px; border-bottom: none; font-weight: 500;
}
.rr .dropdown-menu a:hover, .rr .dropdown-menu a:focus-visible {
  background: rgba(155, 61, 32, 0.08); color: var(--murram);
}
.rr .hamburger { display: none; background: none; border: none; padding: 10px; }
.rr .hamburger span {
  display: block; width: 24px; height: 3px; background: var(--ink); margin: 4px 0;
}

/* ==== §4 hero ==== */
/* ---- hero ---------------------------------------------------------------- */
.rr-hero { position: relative; }
.rr-hero img.rr-hero-img {
  width: 100%;
  height: clamp(520px, 76vh, 740px);
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
}
.rr-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43, 29, 22, 0) 30%, rgba(43, 29, 22, 0.82) 100%);
}
.rr-hero-content {
  position: absolute; inset-inline: 0; bottom: 48px;
}
.rr-hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  color: var(--chalk);
  max-width: 12ch;
  margin-bottom: 14px;
}
.rr-hero .rr-hero-sub {
  color: var(--chalk);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 500;
  margin-bottom: 26px;
  max-width: 44ch;
}
.rr-hero .rr-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==== §5 start line ==== */
/* painted start line */
.rr-startline {
  position: relative;
  height: 14px;
  background-color: var(--murram);
  background-image: repeating-linear-gradient(90deg, var(--chalk) 0 26px, transparent 26px 52px);
}
.rr-startline-label {
  position: absolute; left: var(--pad-x); bottom: 100%;
  background: var(--chalk); color: var(--ink);
  font-weight: 750; font-stretch: 72%; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 10px;
}

/* ==== §6 trust strip ==== */
/* ---- trust strip ---------------------------------------------------------- */
.rr-trust {
  border-bottom: 1px solid var(--hairline);
  background: var(--chalk);
}
.rr-trust .container {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  padding-block: 16px;
}
.rr-trust-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--rift);
  color: var(--rift);
  font-weight: 640; font-stretch: 90%;
  font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 3px;
}
.rr-trust-chip a { color: var(--rift); text-decoration-thickness: 1.5px; }
.rr-trust-chip a:hover, .rr-trust-chip a:focus-visible { color: var(--ink); }

/* ==== §7 route rail ==== */
/* ---- route grid ------------------------------------------------------------
   RAIL-CONTINUITY: padding only. No margins anywhere inside .rr-route. */
.rr-route {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.rr-seg {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  column-gap: var(--rail-gap);
  margin: 0;
}
.rr-rail { position: relative; margin: 0; }
/* The road: a centered 3px dashed murram line. Dash length is fixed in px,
   so the texture is identical in every segment at every viewport — and the
   50%-centered column satisfies the continuity contract by construction. */
.rr-rail::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; transform: translateX(-50%);
  background-image: repeating-linear-gradient(180deg, var(--murram) 0 8px, transparent 8px 14px);
}
/* JS-gated covered state: without html.js the road ships fully drawn */
.js .rr-seg:not(.revealed) .rr-rail::before { clip-path: inset(0 0 100% 0); }
.js .rr-seg.revealed .rr-rail::before { clip-path: inset(0 0 0 0); transition: clip-path 600ms ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .js .rr-seg:not(.revealed) .rr-rail::before { clip-path: none; }
}

.rr-post {
  position: relative; z-index: 2;
  width: 32px; height: 32px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--murram);
  border: 2px solid var(--chalk);
  outline: 2px solid var(--murram);
  color: var(--chalk);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  top: 86px; /* aligns with section eyebrow line */
}
.rr-seg-body { padding-block: 80px 56px; margin: 0; min-width: 0; }
.rr-seg-title {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  margin-bottom: 22px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Entrance fades were cut deliberately: content is never hidden pending an
   observer callback. The road reveal is the single sanctioned scroll motion. */

/* ==== §8 splits ==== */
/* ---- splits ----------------------------------------------------------------- */
.rr-splits { border-top: 2px solid var(--ink); max-width: 720px; }
.rr-split-row {
  display: flex; align-items: baseline; gap: 14px;
  padding-block: 16px;
  border-bottom: 1px solid var(--hairline);
}
.rr-split-label { font-weight: 600; font-size: 1rem; }
.rr-split-leader { flex: 1; border-bottom: 2px dotted var(--dust); transform: translateY(-6px); }
.rr-split-value {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: var(--murram);
  line-height: 1;
}

/* ==== §9 waypoint cards ==== */
/* ---- waypoint program cards -------------------------------------------------- */
.rr-waypoints {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 30px;
}
.rr-card { position: relative; margin: 0; }
.rr-card-imgwrap {
  position: relative;
  border: 1px solid var(--hairline);
  background: #fff;
  padding: 8px;
}
.rr-card-imgwrap::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 18px; height: 18px; background: var(--murram); z-index: 1;
}
.rr-card-img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
}
.rr-card-marker {
  position: absolute; top: -12px; right: 14px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--murram); border: 2px solid var(--chalk); outline: 1.5px solid var(--murram);
  color: var(--chalk);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
}
.rr-card h3 { font-size: 1.18rem; font-weight: 800; margin: 16px 0 8px; }
.rr-card h3 a {
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.rr-card h3 a:hover, .rr-card h3 a:focus-visible { border-bottom-color: var(--murram); }
.rr-card p { font-size: 0.95rem; color: var(--ink); }

/* ==== §10 voices band ==== */
/* ---- voices band (Dusk) -------------------------------------------------------- */
.rr-voices { background: var(--dusk); color: var(--chalk); }
.rr-voices .rr-eyebrow { color: var(--dust-on-dark); }
.rr-voices .rr-seg-title { color: var(--chalk); }
.rr-voices-feature blockquote {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 350;
  line-height: 1.45;
  max-width: 30ch;
  border-left: 3px solid var(--murram);
  padding-left: 22px;
}
.rr-voices-feature figcaption, .rr-voice figcaption { margin-top: 14px; font-size: 0.9rem; }
.rr-voices .rr-voice-name { font-weight: 700; color: var(--chalk); display: block; }
.rr-voices .rr-voice-title { color: var(--dust-on-dark); }
.rr-voices-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 26px; padding-top: 38px;
}
.rr-voice { margin: 0; border-top: 1px solid var(--hairline-dark); padding-top: 18px; }
.rr-voice blockquote { font-size: 0.98rem; line-height: 1.6; }
.rr-voices .rr-proof {
  display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: baseline;
  border-block: 1px solid var(--hairline-dark);
  padding-block: 20px; margin-top: 44px;
}
.rr-proof-item { display: flex; align-items: baseline; gap: 12px; }
.rr-proof-value { font-size: 1.9rem; color: var(--chalk); line-height: 1; }
.rr-proof-label { font-size: 0.88rem; color: var(--dust-on-dark); max-width: 30ch; }
.rr-voices a.rr-proof-link { color: var(--chalk); }

/* ==== §11 races, partner strip, quotes ==== */
/* ---- races ------------------------------------------------------------------------ */
.rr-races {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px;
}
.rr-race {
  border: 1px solid var(--hairline); border-top: 4px solid var(--murram);
  background: #fff; padding: 20px;
}
.rr-race h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.rr-race .rr-race-meta { font-size: 0.88rem; color: var(--dust); }
/* A race the team has closed. Information, not decoration: a runner needs to
   know before they read the fundraising minimum. Design law 4 keeps marigold
   for donate actions, so this borrows the card rule. It is a class, not an
   inline style, because rr11-page-fixture.ts bans [style] on these pages. */
.rr-race-badge {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  border: 1.5px solid var(--dust); color: var(--dust); border-radius: var(--radius-chip);
  padding: 2px 8px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.rr-race-closed { margin-top: 14px; font-size: .9rem; color: var(--dust); }
.rr-race-join { margin-top: 14px; }
.rr-races-empty { display: block; }
.rr-races-empty p { color: var(--dust); }

.rr-race .rr-race-min {
  display: inline-block; margin-top: 14px;
  border: 1.5px solid var(--murram); color: var(--murram); border-radius: 3px;
  padding: 4px 10px; font-size: 0.95rem;
}
.rr-partner-strip {
  border-block: 1px solid var(--hairline);
  padding-block: 14px; margin-top: 40px;
  font-size: 0.9rem; color: var(--dust);
}
.rr-quotes-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; padding-top: 34px; }
.rr-quote-sm { margin: 0; border-left: 3px solid var(--murram); padding-left: 16px; }
.rr-quote-sm blockquote { font-size: 0.98rem; }
.rr-quote-sm figcaption { font-size: 0.85rem; color: var(--dust); margin-top: 8px; }

/* ==== §12 news teaser ==== */
/* ---- news --------------------------------------------------------------------------- */
.rr-news { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px; }
.rr-news-item { border-top: 2px solid var(--ink); padding-top: 14px; }
.rr-news-date {
  font-weight: 640; font-stretch: 90%; font-size: 0.76rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dust);
}
.rr-news-item h3 { font-size: 1.08rem; font-weight: 800; margin-block: 6px 8px; }
.rr-news-item p { font-size: 0.92rem; }

/* ==== §13 finish band ==== */
/* ---- FINISH band ----------------------------------------------------------------------- */
.rr-finish { background: var(--dusk); color: var(--chalk); }
.rr-finishline {
  height: 22px;
  background-image:
    repeating-linear-gradient(90deg, var(--chalk) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(90deg, transparent 0 14px, var(--chalk) 14px 28px);
  background-size: 100% 11px;
  background-position: 0 0, 0 11px;
  background-repeat: repeat-x;
}
.rr-finish .container { padding-block: 64px 72px; text-align: center; }
.rr-finish-label {
  display: inline-block;
  font-weight: 750; font-stretch: 72%; font-size: 0.78rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dust-on-dark);
  margin-bottom: 14px;
}
.rr-finish h2 { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--chalk); margin-bottom: 10px; }
.rr-finish .rr-finish-sub { color: var(--dust-on-dark); margin-inline: auto; margin-bottom: 40px; }
.rr-finish .rr-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.rr-frequency {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  min-width: 0; margin: 0 0 28px; padding: 0; border: 0;
  color-scheme: dark;
}
.rr-frequency legend {
  width: 100%; padding: 0; margin-bottom: 12px;
  color: var(--dust-on-dark); font-size: 0.95rem; font-weight: 600;
}
.rr-frequency-option {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--dust-on-dark); border-radius: var(--radius-ctl);
  color: var(--chalk); cursor: pointer;
}
.rr-frequency-option:hover { border-color: var(--chalk); }
.rr-frequency-option input {
  width: 18px; height: 18px; margin: 0; flex-shrink: 0;
  accent-color: var(--chalk);
}
.rr-frequency-option input:focus-visible {
  outline: 3px solid var(--chalk); outline-offset: 3px;
}
.rr-tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px; text-align: left; margin-bottom: 40px;
}
.rr-tier {
  background: var(--chalk); color: var(--ink);
  padding: 20px; border-radius: 4px;
  display: block; text-decoration: none;
  border: 1.5px solid transparent;
}
a.rr-tier:hover, a.rr-tier:focus-visible { border-color: var(--marigold); color: var(--ink); }
.rr-tier-amount { font-size: 2rem; color: var(--murram); line-height: 1.1; }
.rr-tier p { font-size: 0.88rem; margin-top: 8px; }
.rr-finish .btn-donate { font-size: 1.15rem; padding: 16px 44px; }
.rr-finish .rr-trustline { margin-top: 34px; font-size: 0.82rem; color: var(--dust-on-dark); letter-spacing: 0.05em; }
.rr-finish .rr-trustline a { color: var(--dust-on-dark); }

/* ==== §14 footer ==== */
/* ---- footer ------------------------------------------------------------------------------ */
.rr .site-footer {
  background: var(--dusk); color: var(--dust-on-dark);
  border-top: 1px solid var(--hairline-dark);
  font-size: 0.92rem;
}
.rr .site-footer .container { padding-block: 56px 28px; }
.rr .footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px;
}
.rr .footer-col h2 {
  color: var(--chalk); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px;
}
.rr .footer-col p { margin-bottom: 10px; }
.rr .site-footer a { color: var(--chalk); }
.rr .footer-col ul { margin: 0; padding: 0; list-style: none; }
.rr .footer-col li { margin-bottom: 8px; }
.rr .footer-col li a { color: var(--dust-on-dark); text-decoration: none; }
.rr .footer-col li a:hover, .rr .footer-col li a:focus-visible { color: var(--chalk); text-decoration: underline; }
.rr .newsletter-form { display: flex; gap: 0; margin-top: 6px; }
.rr .newsletter-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px;
  background: var(--chalk); color: var(--ink);
  border: 1.5px solid var(--chalk); border-radius: 4px 0 0 4px;
}
.rr .newsletter-btn {
  min-height: 44px; padding: 8px 16px;
  background: transparent; color: var(--chalk);
  border: 1.5px solid var(--chalk); border-left: none; border-radius: 0 4px 4px 0;
  font-weight: 700;
}
.rr .newsletter-btn:hover, .rr .newsletter-btn:focus-visible { background: rgba(250, 245, 238, 0.14); }
.rr .footer-ein { margin-top: 12px; font-size: 0.85rem; opacity: 0.85; }
.rr .footer-seal { margin-top: 4px; font-size: 0.85rem; }
.rr .footer-seal a { color: inherit; text-decoration: underline; }
.rr .footer-bottom {
  border-top: 1px solid var(--hairline-dark);
  margin-top: 40px; padding-top: 20px;
  font-size: 0.82rem; text-align: center;
}

/* ==== §15 inner pages: hero, breadcrumb, clinical register, plain stats, milestones, gallery, benefits, celebs ==== */
/* ==========================================================================
   INNER PAGES (red-road/hospital.html, run-with-us.html, donate.html)
   ========================================================================== */

/* shared inner hero */
.rr-page-hero { position: relative; }
.rr-page-hero img {
  width: 100%; height: clamp(320px, 46vh, 480px); object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
}
.rr-page-hero .rr-hero-scrim {
  background: linear-gradient(180deg, rgba(43, 29, 22, 0.05) 30%, rgba(43, 29, 22, 0.8) 100%);
}
.rr-page-hero .rr-hero-content { bottom: 36px; }
.rr-page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--chalk); max-width: 20ch; margin-bottom: 8px; }
.rr-page-hero .rr-hero-sub {
  color: var(--chalk); font-size: clamp(1rem, 1.8vw, 1.2rem); max-width: 50ch; margin-bottom: 0;
}
.rr-page-hero .rr-hero-sub:empty, .rr-page-hero .rr-hero-sub[hidden] { display: none; }
/* per-page focal defaults; an inline style="--focal-y:…" on the img still wins. schools 30% is the
   live value (style.css:1428–1441). runWithUs 20% is a deliberate re-crop, not a port: the live hero
   was a 16/7 box positioned `top`; in the shorter clamp(320px, 46vh, 480px) box above, 20% keeps
   the team's faces in frame (issue #136). */
.rr-page-hero[data-page="schools"] img { --focal-y: 30%; }
.rr-page-hero[data-page="runWithUs"] img { --focal-y: 20%; }
.rr-breadcrumb { font-size: 0.85rem; color: var(--dust); padding-block: 14px; }
.rr-breadcrumb a { color: var(--dust); }
.rr-breadcrumb a:hover, .rr-breadcrumb a:focus-visible { color: var(--murram); }

/* CLINICAL REGISTER (body.rr-clinical): no race semantics.
   Plain markers, plain stated stats, slab only in the H1. */
.rr-clinical .rr-post { background: var(--ink); outline-color: var(--ink); }
.rr-clinical .rr-seg-title { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.01em; }
/* clinical register: the rail remains but the race texture drops — solid, quiet */
.rr-clinical .rr-rail::before {
  background-image: none;
  background-color: rgba(43, 29, 22, 0.4);
  width: 2px;
}
.rr-stats-plain {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
  max-width: 860px;
}
.rr-stat-plain { background: var(--chalk); padding: 22px 20px; }
.rr-stat-plain .rr-stat-value { font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.rr-stat-plain .rr-stat-label { font-size: 0.85rem; color: var(--dust); margin-top: 4px; }
.rr-status-chip {
  display: inline-block; border: 1.5px solid var(--rift); color: var(--rift);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 3px; margin-left: 10px; vertical-align: middle;
}
.rr-quote-block {
  border-left: 3px solid var(--rift); padding-left: 22px; max-width: 640px; margin: 0;
}
.rr-quote-block blockquote { font-size: 1.25rem; line-height: 1.5; font-weight: 350; }
.rr-quote-block figcaption { margin-top: 10px; color: var(--dust); font-size: 0.9rem; }
.rr-milestones { max-width: 720px; border-top: 2px solid var(--ink); }
.rr-milestone {
  display: grid; grid-template-columns: 86px 1fr; gap: 18px;
  padding-block: 14px; border-bottom: 1px solid var(--hairline);
}
.rr-milestone-year { font-weight: 750; font-stretch: 80%; color: var(--murram); font-size: 1.05rem; }
.rr-clinical .rr-milestone-year { color: var(--ink); }
.rr-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 22px; }
.rr-gallery figure { margin: 0; }
.rr-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  border: 1px solid var(--hairline); background: #fff; padding: 6px;
}
.rr-gallery figcaption { font-size: 0.85rem; color: var(--dust); margin-top: 8px; }

/* run-with-us extras */
.rr-benefits { columns: 2; column-gap: 44px; max-width: 900px; padding-left: 20px; list-style: disc; } /* list-style is the one non-verbatim declaration: base.css resets classed lists (at zero specificity, so this wins) */
.rr-benefits li { margin-bottom: 10px; break-inside: avoid; }
.rr-celebs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; }
.rr-celeb { margin: 0; }
.rr-celeb img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  border: 1px solid var(--hairline); background: #fff; padding: 6px;
}
.rr-celeb figcaption { font-size: 0.88rem; margin-top: 8px; }
.rr-celeb .rr-voice-name { font-weight: 700; display: block; color: var(--ink); }
.rr-celeb .rr-voice-title { color: var(--dust); }

/* ==== §16 donate page ==== */
/* ---- donate page (route line never enters: arriving here IS the finish) ---- */
.rr-donate-main { background: var(--chalk); }
/* §13 draws the checker in chalk because it sits on the Dusk finish band. Here it
   sits on the chalk ground, where chalk-on-chalk is invisible — the preview had the
   same gap — so the squares are ink instead. */
.rr-donate-main > .rr-finishline {
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(90deg, transparent 0 14px, var(--ink) 14px 28px);
}
.rr-page-head, .rr-donate-head { text-align: center; padding-block: 48px 8px; }
.rr-page-head h1, .rr-donate-head h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 8px; }
.rr-page-head p, .rr-donate-head p { margin-inline: auto; color: var(--dust); }
.rr-page-head .rr-finish-label { color: var(--dust); }
.rr .donate-card {
  max-width: 540px; margin: 36px auto 0;
  background: #fff; border: 1px solid var(--hairline); border-top: 4px solid var(--murram);
  border-radius: 6px; padding: 36px 32px;
}
.rr .donate-card-title { font-weight: 800; font-size: 1.35rem; text-align: center; margin-bottom: 4px; }
.rr .donate-card-sub { text-align: center; color: var(--dust); font-size: 0.9rem; margin-bottom: 24px; }
.rr .donate-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.rr .donate-amt-btn {
  padding: 14px 0; border: 1.5px solid var(--hairline); border-radius: 6px;
  font-size: 1.12rem; font-weight: 750; font-stretch: 85%;
  color: var(--ink); background: var(--chalk);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.rr .donate-amt-btn:hover, .rr .donate-amt-btn:focus-visible { border-color: var(--murram); }
.rr .donate-amt-btn.active { background: var(--marigold); border-color: var(--ink); }
.rr .donate-field { margin-bottom: 14px; }
.rr .donate-field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 5px; }
.rr .donate-field input, .rr .donate-field textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--hairline); border-radius: 6px;
  font-size: 1rem; background: #fff; color: var(--ink);
  transition: border-color 150ms ease;
}
.rr .donate-field input:focus-visible, .rr .donate-field textarea:focus-visible {
  outline: 2px solid var(--murram); outline-offset: 1px; border-color: var(--murram);
}
.rr .donate-field textarea { resize: vertical; min-height: 60px; }
.rr .donate-custom-wrap {
  display: flex; align-items: center; border: 1.5px solid var(--hairline); border-radius: 6px;
  overflow: hidden; transition: border-color 150ms ease; background: #fff;
}
.rr .donate-custom-wrap:focus-within { border-color: var(--murram); }
.rr .donate-custom-wrap span {
  padding: 11px 14px; background: var(--chalk); font-weight: 750; color: var(--murram);
  border-right: 1.5px solid var(--hairline);
}
.rr .donate-custom-wrap input { flex: 1; padding: 11px 14px; border: none; font-size: 1.05rem; outline: none; background: transparent; }
.rr .donate-recurring {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: rgba(47, 82, 51, 0.08); border: 1px solid rgba(47, 82, 51, 0.35);
  border-radius: 6px; cursor: pointer; margin-bottom: 18px; font-size: 0.95rem;
}
.rr .donate-recurring input { min-width: 18px; min-height: 18px; cursor: pointer; }
.rr .donate-submit {
  width: 100%; padding: 16px; background: var(--marigold); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 6px;
  font-size: 1.15rem; font-weight: 700;
  transition: background-color 150ms ease;
}
.rr .donate-submit:hover { background: var(--marigold-deep); }
.rr .donate-submit:active { transform: scale(0.99); }
.rr .donate-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.rr .donate-secure { text-align: center; margin-top: 14px; font-size: 0.82rem; color: var(--dust); }
/* Cheques, stock and matching gifts are documented in the unlisted /info/
   library. Those pages stay out of the nav, the sitemap and robots.txt on
   purpose, so this line is the only route a donor has to them. */
.rr .donate-other-ways { text-align: center; margin-top: 18px; font-size: 0.85rem; color: var(--dust); }
.rr .donate-error {
  display: none; background: #FBEDE8; color: #7C2D12; border: 1px solid rgba(155, 61, 32, 0.4);
  padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem;
}
.rr .impact-grid, .rr .ways-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px;
}
.rr .impact-card { background: #fff; border: 1px solid var(--hairline); border-top: 4px solid var(--murram); padding: 20px; }
.rr .impact-icon { display: none; } /* emoji icons retired in this candidate */
.rr .impact-amount { font-weight: 750; font-stretch: 80%; font-size: 1.7rem; color: var(--murram); }
.rr .impact-desc { font-size: 0.92rem; margin-top: 6px; }
.rr .way-card { border-top: 2px solid var(--ink); padding-top: 14px; }
.rr .way-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }
.rr .way-card p { font-size: 0.93rem; }

/* ==== §17 sections/transparency ==== */
.rr-section { padding-block: 64px; }
.rr-section-tight { padding-block: 40px; }
.rr-section h2.rr-h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 24px; }
.rr-transparency {
  background: var(--rift); color: var(--chalk);
}
.rr-transparency .container { padding-block: 48px; text-align: center; }
.rr-transparency h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--chalk); margin-bottom: 12px; }
.rr-transparency p { margin-inline: auto; max-width: 70ch; }

/* ==== §18 long-form article — filled by RR-07 ==== */
/* ---- long-form article: /news/<slug>, /info/<slug>, a-trip-of-a-lifetime. The emitted vocabulary
   is frozen (news-html.ts, site-pages-html.ts, markdown.ts) — restyle it, never rename it ---- */
.rr .container-narrow { max-width: var(--content-narrow); }
.rr .news-article { padding-block: 40px 56px; }
.rr .article-hero { margin: 0 0 32px; background: var(--paper); border: 1px solid var(--hairline); padding: 8px; }
.rr .article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); display: block; }
.rr .article-header { border-bottom: 2px solid var(--ink); padding-bottom: 22px; margin-bottom: 32px; }
.rr .article-header .news-category { display: block; margin-bottom: 10px; font-weight: 640; font-stretch: 90%; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--murram); }
.rr .article-header h1 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 12px; }
.rr-clinical .article-header h1 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.01em; }
.rr .article-header .news-date { font-weight: 640; font-stretch: 90%; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.rr .article-body { font-size: 1.08rem; line-height: 1.7; }
.rr .article-body > * + * { margin-top: 1.1em; }
.rr .article-body p { max-width: none; }                                  /* the 760px column is the measure */
.rr .article-body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.15; margin-top: 2em; }
.rr-clinical .article-body h2 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.01em; }
.rr .article-body h3 { font-weight: 800; font-size: 1.25rem; margin-top: 1.8em; }
.rr .article-body h4 { font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dust); margin-top: 1.6em; }
.rr .article-body ul, .rr .article-body ol { padding-left: 1.4em; } .rr .article-body ul { list-style: disc; } .rr .article-body ol { list-style: decimal; }
.rr .article-body li + li { margin-top: .4em; } .rr .article-body li::marker { color: var(--murram); font-weight: 700; }
.rr .article-body blockquote { border-left: 3px solid var(--murram); padding-left: 22px; font-size: 1.2rem; font-weight: 350; line-height: 1.5; color: var(--ink); }
.rr-clinical .article-body blockquote { border-left-color: var(--rift); }
.rr .article-body blockquote p { max-width: 36ch; }
.rr .article-body hr { border: 0; height: 14px; margin-block: 2.2em; background-color: var(--murram);
  background-image: repeating-linear-gradient(90deg, var(--chalk) 0 26px, transparent 26px 52px); }   /* the start-line motif as a section break */
.rr-clinical .article-body hr { height: 1px; background: var(--hairline); }
.rr .article-body strong { font-weight: 750; } .rr .article-body em { font-style: italic; }
.rr .article-body a { color: var(--murram); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .rr .article-body a:hover { color: var(--ink); }
.rr .article-body img { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--hairline); padding: 6px; margin-block: 1.6em; }
.rr .article-back { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: .92rem; }
@media (max-width: 767px) { .rr .news-article { padding-block: 24px 40px; } .rr .article-body { font-size: 1.02rem; } .rr .article-body blockquote { padding-left: 16px; font-size: 1.1rem; } }

/* ==== §19 news grid + archive — filled by RR-07 ==== */
/* ---- news index: card grid plus the year-archive accordion. js/news.js mirrors this class contract ---- */
.rr .news-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 30px; }
.rr .news-page-card { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; border-top: 2px solid var(--ink); padding-top: 14px; }
.rr .news-page-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  background: var(--paper); border: 1px solid var(--hairline); padding: 6px; margin-bottom: 14px; }
.rr .news-page-card-body { display: flex; flex-direction: column; gap: 6px; }
.rr .news-category { display: inline-block; margin: 0; font-weight: 640; font-stretch: 90%; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--murram); }
.rr .news-date { font-weight: 640; font-stretch: 90%; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.rr .news-page-card h3 { font-size: 1.12rem; font-weight: 800; }
.rr a.news-page-card:hover h3, .rr a.news-page-card:focus-visible h3 { text-decoration: underline; text-decoration-color: var(--murram); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rr .news-page-card p { font-size: .93rem; }
.rr .archive-year { border-top: 2px solid var(--ink); }
.rr .archive-year:last-child { border-bottom: 2px solid var(--ink); }
.rr .archive-year-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 4px;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.rr .archive-year-header > span:first-child { font-weight: 750; font-stretch: 80%; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.rr .archive-year-header:hover > span:first-child, .rr .archive-year-header:focus-visible > span:first-child { color: var(--murram); }
.rr .archive-chevron { font-size: .7rem; color: var(--dust); transition: transform 200ms ease; }   /* js/news.js rotates it inline */
.rr .archive-year-content { padding: 4px 4px 20px; }
.rr .archive-item { display: grid; grid-template-columns: 110px 1fr; gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.rr .archive-item .news-category { grid-column: 1; align-self: start; }
.rr .archive-item-title { grid-column: 2; font-weight: 700; font-size: 1rem; } .rr .archive-item-title a { color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; } .rr .archive-item-title a:hover, .rr .archive-item-title a:focus-visible { border-bottom-color: var(--murram); }
.rr .archive-item-date { grid-column: 2; font-size: .78rem; color: var(--dust); text-transform: uppercase; letter-spacing: .08em; }
.rr .archive-item-excerpt { grid-column: 2; font-size: .92rem; color: var(--ink); }
@media (max-width: 767px) { .rr .archive-item { grid-template-columns: 1fr; } .rr .archive-item > * { grid-column: 1; } }

/* ==== §20 pillars — filled by RR-08 ==== */
/* ---- pillars: hairline grid of numbered cards (about) ---- */
.rr-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.rr-pillar { background: var(--chalk); padding: 22px 20px 26px; }
.rr-pillar-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--murram); color: var(--chalk); font-size: .72rem; margin-bottom: 14px; }
.rr-pillar h3 { font-weight: 800; font-size: 1.1rem; margin-bottom: 6px; } .rr-pillar p { font-size: .93rem; }

/* ==== §21 school card — filled by RR-08 ==== */
/* ---- school card: photo plate beside body, sides alternating (schools) ---- */
.rr-schools { display: grid; gap: 40px; }
.rr-school { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.rr-school:nth-child(even) .rr-plate { order: 2; }               /* alternate photo side */
.rr-school .rr-plate { position: relative; }
.rr-school .rr-eyebrow { color: var(--dust); } .rr-school .rr-eyebrow b { color: var(--murram); font-weight: inherit; }
.rr-school h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.15; margin-bottom: 8px; }
.rr-school-meta { font-size: .88rem; color: var(--dust); margin-bottom: 12px; font-weight: 600; font-stretch: 90%; }
@media (max-width: 767px) { .rr-school { grid-template-columns: 1fr; gap: 16px; } .rr-school:nth-child(even) .rr-plate { order: 0; } }

/* ==== §22 roster — filled by RR-08 ==== */
/* ---- roster: multi-column name/description list (graduates, board, ambassadors without photos) ---- */
.rr-roster, .amb-roster, .graduates-grid { columns: 3; column-gap: 40px; border-top: 2px solid var(--ink); padding-top: 4px; }
.rr-roster li, .amb-roster li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--hairline); display: block; }
.rr-roster-name, .amb-roster-name { display: block; font-weight: 800; font-size: 1rem; }
.rr-roster-desc, .amb-roster-desc { display: block; font-size: .86rem; color: var(--dust); }
.rr-roster-note { display: block; font-size: .86rem; color: var(--murram); font-style: italic; }   /* graduates[].note */
@media (max-width: 1023px) { .rr-roster, .amb-roster { columns: 2; } } @media (max-width: 479px) { .rr-roster, .amb-roster { columns: 1; } }

/* ==== §23 feature row — filled by RR-08 ==== */
/* ---- feature row: photo plate beside body, alternating (nutrition, empowerment) ---- */
.rr-features { display: grid; gap: 44px; }
.rr-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.rr-feature:nth-child(even) .rr-plate { order: 2; }
.rr-feature h3 { font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin-bottom: 10px; }
.rr-feature .rr-eyebrow:empty { display: none; }
@media (max-width: 767px) { .rr-feature { grid-template-columns: 1fr; gap: 14px; } .rr-feature:nth-child(even) .rr-plate { order: 0; } }

/* ==== §24 bigstat + lede — filled by RR-08 ==== */
/* ---- big stat: one number carrying a sentence ---- */
.rr-bigstat { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; border-block: 2px solid var(--ink); padding-block: 22px; margin-top: 28px; max-width: 720px; }
.rr-bigstat-value { font-size: clamp(3rem, 7vw, 5rem); line-height: 1; color: var(--murram); }
.rr-bigstat-label { font-size: 1rem; max-width: 32ch; }

/* ---- lede: a <p>, not a blockquote — attributed text stays .rr-quote-block ---- */
.rr-lede { font-size: 1.15rem; line-height: 1.6; font-weight: 350; border-left: 3px solid var(--murram); padding-left: 22px; max-width: 640px; }
.rr-clinical .rr-lede { border-left-color: var(--rift); }

/* ==== §25 register — filled by RR-09 ==== */
/* ---- register: clinical year / photo / body rows (health-village facilities) ---- */
.rr-register { border-top: 2px solid var(--ink); max-width: 960px; }
.rr-register-row { display: grid; grid-template-columns: 86px 180px minmax(0, 1fr); gap: 20px; padding-block: 18px; border-bottom: 1px solid var(--hairline); align-items: start; }
.rr-register-year { font-weight: 750; font-stretch: 80%; font-size: 1.05rem; color: var(--ink); padding-top: 4px; }
.rr-register-row h3 { font-weight: 800; font-size: 1.05rem; margin-bottom: 4px; } .rr-register-row p { font-size: .93rem; }
@media (max-width: 767px) { .rr-register-row { grid-template-columns: 64px minmax(0, 1fr); } .rr-register-row .rr-plate { grid-column: 2; max-width: 240px; } .rr-register-row > div:last-child { grid-column: 2; } }

/* ==== §26 endorsement + profile — filled by RR-09 ==== */
/* ---- endorsement: portrait beside a quote block (all4running) ---- */
.rr-endorsement { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 34px; max-width: 860px; }
.rr-endorsement .rr-quote-block { border-left-color: var(--murram); }
@media (max-width: 479px) { .rr-endorsement { grid-template-columns: 1fr; } .rr-endorsement .rr-plate { max-width: 200px; } }

/* ---- profile: the founder (about), Chelimo Saina (empowerment) ---- */
.rr-profile { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 860px; }
.rr-profile h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.12; margin-bottom: 10px; }
@media (max-width: 479px) { .rr-profile { grid-template-columns: 1fr; } .rr-profile .rr-plate { max-width: 220px; } }

/* ==== §27 celebs--square, solid hero, figure/two-up — filled by RR-10 ==== */
/* ---- celebs, square variant: the legacy ambassador portraits are of mixed orientation ---- */
.rr-celebs--square { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.rr-celebs--square .rr-celeb img { aspect-ratio: 1 / 1; }

/* ---- solid hero: dusk, no image, no scrim, content height ---- */
.rr-page-hero--solid { background: var(--dusk); color: var(--chalk); }
.rr-page-hero--solid .container { padding-block: 72px 56px; position: static; }
.rr-page-hero--solid .rr-eyebrow { color: var(--dust-on-dark); }
.rr-page-hero--solid h1 { color: var(--chalk); font-size: clamp(2rem, 5vw, 3.4rem); max-width: 20ch; margin-bottom: 8px; }
.rr-page-hero--solid .rr-hero-sub { color: var(--dust-on-dark); font-size: clamp(1rem, 1.8vw, 1.2rem); max-width: 50ch; }
.rr-page-hero--solid .rr-hero-sub:empty, .rr-page-hero--solid .rr-hero-sub[hidden] { display: none; }
.rr-clinical .rr-page-hero--solid h1 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.01em; }
@media (max-width: 767px) { .rr-page-hero--solid .container { padding-block: 48px 40px; } }

/* ---- figure and two-up (a-trip-of-a-lifetime) ---- */
.rr-figure { margin: 28px 0; } .rr-figure .rr-plate { padding: 8px; } .rr-figure figcaption { font-size: .88rem; color: var(--dust); margin-top: 8px; }
.rr-two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; } @media (max-width: 599px) { .rr-two-up { grid-template-columns: 1fr; } }

/* ==== §28 contact/offices, race panel, auth layout, utility shell — filled by RR-11 ==== */
/* ---- contact and offices: no rail here (rule 2) ---- */
.rr-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding-block: 56px; }
.rr-contact h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 16px; }
.rr-offices { margin-top: 28px; display: grid; gap: 24px; }
.rr-office { border-top: 2px solid var(--ink); padding-top: 14px; }
.rr-office h3 { font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; }
.rr-office dl { display: grid; grid-template-columns: 84px 1fr; gap: 6px 14px; font-size: .95rem; }
.rr-office dt { font-weight: 640; font-stretch: 90%; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); padding-top: 3px; }
.rr-office dd { margin: 0; } .rr-office dd a { color: var(--murram); }
.rr-contact-form { background: var(--paper); border: 1px solid var(--hairline); border-top: 4px solid var(--murram); padding: 32px; }
@media (max-width: 1023px) { .rr-contact { grid-template-columns: 1fr; gap: 32px; } }

/* ---- race panel: what you are signing up for, above the run-signup form ---- */
.rr-race-panel { background: var(--paper); border: 1px solid var(--hairline); border-top: 4px solid var(--murram); padding: 18px 20px; margin-bottom: 22px; display: grid; gap: 4px; }
.rr-race-panel #race-name { font-weight: 800; font-size: 1.15rem; } .rr-race-panel #race-date, .rr-race-panel #race-location { font-size: .9rem; color: var(--dust); }
.rr-race-panel #race-goal { margin-top: 8px; display: inline-block; justify-self: start; border: 1.5px solid var(--murram); color: var(--murram); border-radius: var(--radius-chip); padding: 4px 10px; font-size: .92rem; font-weight: 750; font-stretch: 80%; }

/* ---- auth layout: form card beside a dusk aside; run-signup and the portal auth pages ---- */
.auth-wrapper { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: start; padding-block: 56px 72px; }
.auth-card { background: var(--paper); border: 1px solid var(--hairline); border-top: 4px solid var(--murram); padding: 36px 32px; max-width: 520px; }
.auth-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.1; margin-bottom: 6px; }
.auth-subtitle { color: var(--dust); margin-bottom: 26px; }
.auth-divider { position: relative; text-align: center; margin: 24px 0; } .auth-divider::before { content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--hairline); }
.auth-divider span { position: relative; background: var(--paper); padding: 0 14px; color: var(--dust); font-size: .85rem; }
.auth-switch { text-align: center; color: var(--dust); } .auth-switch a { color: var(--murram); font-weight: 700; }
.auth-side { background: var(--dusk); color: var(--chalk); padding: 40px 36px; position: sticky; top: 88px; }
.auth-side h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--chalk); margin-bottom: 14px; }
.auth-side p { color: var(--dust-on-dark); margin-bottom: 26px; }
.auth-side ul.rr-benefits { color: var(--chalk); columns: 1; padding-left: 20px; } .auth-side li::marker { color: var(--dust-on-dark); }   /* never marigold */
.auth-stats { display: flex; gap: 32px; flex-wrap: wrap; border-top: 1px solid var(--hairline-dark); padding-top: 22px; }
.auth-stat-number { font-size: 1.9rem; line-height: 1; color: var(--chalk); font-weight: 750; font-stretch: 72%; font-variant-numeric: tabular-nums; }
.auth-stat-label { font-size: .78rem; color: var(--dust-on-dark); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.password-strength ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; list-style: none; padding: 0; }
.password-strength li { font-size: .8rem; padding-left: 20px; position: relative; } .password-strength li::before { position: absolute; left: 0; font-weight: 700; }
.password-strength li.rule-pass { color: var(--ok); } .password-strength li.rule-pass::before { content: '\2713'; }
.password-strength li.rule-fail { color: var(--danger); } .password-strength li.rule-fail::before { content: '\2717'; }
@media (max-width: 767px) { .auth-wrapper { grid-template-columns: 1fr; gap: 28px; } .auth-side { position: static; order: -1; } .auth-card { max-width: none; } }

/* ---- utility shell: one centred card (unsubscribe, donation-success) ---- */
.rr-utility { padding-block: 72px 96px; }
.rr-utility-card { max-width: 560px; margin-inline: auto; text-align: center; background: var(--paper); border: 1px solid var(--hairline); border-top: 4px solid var(--murram); padding: 44px 36px; }
.rr-utility-mark { display: inline-block; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 20px; background: var(--ok); position: relative; }
.rr-utility-mark::after { content: ''; position: absolute; left: 20px; top: 12px; width: 12px; height: 24px; border: solid var(--chalk); border-width: 0 3px 3px 0; transform: rotate(45deg); }   /* CSS check, no emoji */
.rr-utility-mark--danger { background: var(--danger); } .rr-utility-mark--danger::after { content: '!'; border: 0; transform: none; left: 0; top: 0; width: 56px; height: 56px; line-height: 56px; color: var(--chalk); font-weight: 800; font-size: 1.6rem; }
.rr-utility-mark--info { background: var(--dust); } .rr-utility-mark--info::after { content: '?'; border: 0; transform: none; left: 0; top: 0; width: 56px; height: 56px; line-height: 56px; color: var(--chalk); font-weight: 800; font-size: 1.6rem; }
.rr-utility h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 14px; } .rr-utility p { margin-inline: auto; color: var(--ink); margin-bottom: 12px; }
.rr-utility-actions { margin-top: 24px; }
@media (max-width: 479px) { .rr-utility { padding-block: 40px 64px; } .rr-utility-card { padding: 32px 20px; } }

/* ==== §29 campaign family + browse — filled by RR-12 ==== */
/* ---- browse controls (fundraise) ---- */
.rr-browse { padding-block: 24px; border-bottom: 1px solid var(--hairline); }
.rr-browse-form { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; }
.rr-browse-form .form-group { margin: 0; }
@media (max-width: 599px) { .rr-browse-form { grid-template-columns: 1fr; } }

/* ---- campaign card and the progress amounts ---- */
.rr .campaigns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 28px; }
.rr .campaign-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--hairline); border-top: 4px solid var(--murram); padding: 22px; }
.rr .campaign-card-title { font-weight: 800; font-size: 1.15rem; line-height: 1.3; margin-bottom: 4px; }
.rr .campaign-card-fundraiser { font-size: .88rem; color: var(--dust); margin-bottom: 18px; }
.rr .campaign-card-progress { margin-top: auto; }
.rr .campaign-card-stats strong { color: var(--ink); font-weight: 750; font-stretch: 80%; }
.rr .campaign-card-link { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--murram); text-decoration: none; border-bottom: 2px solid transparent; } .rr .campaign-card-link:hover, .rr .campaign-card-link:focus-visible { border-bottom-color: var(--murram); }
.rr .campaign-progress-amounts, .rr .campaign-progress-text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rr .campaign-raised-large { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--murram); line-height: 1; font-weight: 750; font-stretch: 72%; font-variant-numeric: tabular-nums; }
.rr .campaign-raised { font-weight: 750; font-stretch: 80%; color: var(--murram); }
.rr .campaign-goal-text, .rr .campaign-goal, .rr .campaign-progress-meta, .rr .campaign-card-stats { font-size: .88rem; color: var(--dust); font-variant-numeric: tabular-nums; }

/* ---- campaign hero: dusk, with the fundraiser avatar ---- */
.rr .campaign-hero { background: var(--dusk); color: var(--chalk); }
.rr .campaign-hero-inner { display: flex; align-items: center; gap: 28px; padding-block: 56px 48px; flex-wrap: wrap; }
.rr .campaign-fundraiser-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--paper); padding: 4px; flex-shrink: 0; }
.rr .campaign-fundraiser-photo img, .rr .campaign-fundraiser-photo .donor-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; font-size: 2rem; }
.rr .campaign-fundraiser-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; color: var(--chalk); }
.rr .campaign-event-name { font-size: 1.15rem; color: var(--chalk); margin-top: 6px; } .rr .campaign-event-date { color: var(--dust-on-dark); font-size: .92rem; }
.rr .campaign-badge { display: inline-block; margin-top: 14px; border: 1.5px solid var(--dust-on-dark); color: var(--dust-on-dark); border-radius: var(--radius-chip); padding: 4px 10px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
@media (max-width: 767px) { .rr .campaign-hero-inner { flex-direction: column; text-align: center; padding-block: 40px 32px; } }

/* ---- campaign status banner ---- */
.rr .campaign-status-banner { text-align: center; font-weight: 700; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.rr .campaign-status-banner-paused { background: var(--warn-bg); color: var(--warn); }
.rr .campaign-status-banner-completed { background: var(--ok-bg); color: var(--ok); }

/* ---- campaign layout, progress card, donate grid, message, share, donors, about ---- */
.rr .campaign-main-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: 40px; padding-block: 48px; }
.rr .campaign-progress-card, .rr .campaign-donors-card, .rr .campaign-about-card { background: var(--paper); border: 1px solid var(--hairline); padding: 24px; }
.rr .campaign-progress-card { border-top: 4px solid var(--murram); }
.rr .campaign-donate-section { margin-top: 40px; } .rr .campaign-donate-section h2, .rr .campaign-share-section h2, .rr .campaign-message-section h2, .rr .campaign-sidebar h3 { font-weight: 800; font-size: 1.2rem; margin-bottom: 14px; }
.rr .campaign-donate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.rr .campaign-donate-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; background: var(--chalk); border: 1.5px solid var(--hairline); border-radius: var(--radius-ctl); cursor: pointer; font: inherit; color: var(--ink); transition: border-color 150ms ease, background-color 150ms ease; }
.rr .campaign-donate-btn:hover, .rr .campaign-donate-btn:focus-visible { border-color: var(--murram); }
.rr .campaign-donate-btn.selected { background: var(--marigold); border-color: var(--ink); }           /* donate action: Marigold allowed */
.rr .campaign-donate-amount { font-size: 1.15rem; font-weight: 750; font-stretch: 85%; } .rr .campaign-donate-desc { font-size: .78rem; color: var(--dust); text-align: center; }
.rr .donate-form { margin-top: 12px; } .rr .donate-form-row { margin-bottom: 14px; }        /* controls inherit the form kit via .rr-form on #donate-form */
.rr .donate-recurring-label { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.rr .campaign-donate-submit { width: 100%; padding: 16px; background: var(--marigold); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius-ctl); font-size: 1.15rem; font-weight: 700; transition: background-color 150ms ease; }
.rr .campaign-donate-submit:hover, .rr .campaign-donate-submit:focus-visible { background: var(--marigold-deep); } .rr .campaign-donate-submit:disabled { opacity: .7; cursor: not-allowed; }
.rr .campaign-message-section { margin-top: 40px; } .rr .campaign-message-section p { margin-bottom: 1em; }
.rr .campaign-donor-list { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
.rr .campaign-donor-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.rr .campaign-donor-name { font-weight: 700; } .rr .campaign-donor-amount-inline { color: var(--murram); font-weight: 750; font-stretch: 80%; margin-left: 6px; }
.rr .campaign-donor-time { font-size: .8rem; color: var(--dust); } .rr .campaign-donor-msg { font-size: .9rem; margin-top: 4px; font-style: italic; }
.rr .campaign-see-all-btn { display: block; width: 100%; margin-top: 14px; padding: 7px 14px; font-size: .88rem; font-weight: 700; color: var(--ink); background: transparent; border: 1.5px solid var(--ink); border-radius: var(--radius-ctl); }
.rr .campaign-about-card { margin-top: 24px; font-size: .93rem; } .rr .campaign-about-tax { color: var(--dust); font-size: .85rem; margin-top: 10px; } .rr .campaign-about-link { color: var(--murram); font-weight: 700; }
.rr .campaign-share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }               /* children are .portal-btn.portal-btn-small (+ -outline) = .btn-sm ghost */
.rr .campaign-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
@media (max-width: 1023px) { .rr .campaign-main-layout { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .rr .campaign-donate-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==== §30 seg-media + homepage extras — filled by RR-03 ==== */
/* ---- segment media: text beside a photo plate (homepage 01 The Origin; any text+photo
   segment). 7/5 grid, plate on the right; stacks under 768px with the plate first. ---- */
.rr-seg-media {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 36px;
  align-items: start;
}
.rr-seg-media > div { min-width: 0; }
.rr-seg-media p + p { margin-top: 14px; }
.rr-seg-body .rr-seg-link { margin-top: 26px; }
.rr-seg-media .rr-seg-link { margin-top: 18px; }

/* ---- homepage news: the live #news-grid / .news-card contract (kept for
   tests/frontend/home-news.test.ts) styled as the Red Road news item (§12, §8.1.13:
   date › h3 › p, no photograph). Red Road has no skeleton styling — the placeholders
   are invisible and .rr-news min-height alone limits CLS while the API loads. ---- */
.rr .news-grid.rr-news { min-height: 200px; }
.rr .news-card {
  display: block;
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  color: var(--ink);
  text-decoration: none;
}
.rr .news-card h3 { font-size: 1.08rem; font-weight: 800; margin-block: 6px 8px; color: var(--ink); }
.rr .news-card p { font-size: 0.92rem; }
.rr a.news-card:hover h3, .rr a.news-card:focus-visible h3 { color: var(--murram); }
.rr .news-card-skeleton { visibility: hidden; }

/* ---- recommended tier (#41): an ink top rule inside the chalk card plus an eyebrow,
   never marigold, never murram on the dusk band (§3.2). Drawn as an inset shadow so the
   1.5px border stays and all four tiers keep the same size. ---- */
.rr-tier--recommended {
  box-shadow: var(--focus-ring-shadow, 0 0 0 0 transparent), inset 0 3px 0 0 var(--ink);
}
.rr-tier-eyebrow {
  display: block;
  font-weight: 750; font-stretch: 72%; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--murram);
  margin-bottom: 6px;
}

/* ---- subordinate Give / Join links after a segment (#43) ---- */
.rr-seg-body .rr-give-link { margin-top: 30px; }
.rr-voices .rr-give-link { margin-top: 34px; }

/* ---- finish: the "Choose your own amount" text link under the donate button ---- */
.rr-finish .rr-finish-custom { margin-top: 18px; font-size: 0.95rem; }
.rr-finish .rr-finish-custom a { color: var(--chalk); }

@media (max-width: 767px) {
  .rr-seg-media { grid-template-columns: 1fr; }
  .rr-seg-media .rr-plate { order: -1; }
}

/* ==== §31 responsive ==== */
/* ---- responsive --------------------------------------------------------------- */
@media (max-width: 1023px) {
  .rr-benefits { columns: 1; }
}
@media (max-width: 767px) {
  :root { --rail-w: 28px; --rail-gap: 16px; }
  .rr .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--chalk); border-bottom: 1px solid var(--hairline);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0;
  }
  .rr .nav-links.active { display: flex; }
  .rr .nav-links li { border-top: 1px solid var(--hairline); }
  .rr .nav-links a { display: block; padding: 13px var(--pad-x); border-bottom: none; }
  .rr .nav-links a.nav-cta { margin: 12px var(--pad-x); text-align: center; }
  .rr .dropdown-menu {
    position: static; display: none; border: none; box-shadow: none;
    border-top: none; background: rgba(155, 61, 32, 0.05); min-width: 0;
  }
  .rr .has-dropdown:hover .dropdown-menu,
  .rr .has-dropdown:focus-within .dropdown-menu { display: none; }
  .rr .has-dropdown.dropdown-open .dropdown-menu { display: block; }
  .rr .dropdown-menu a { padding-left: calc(var(--pad-x) + 16px); }
  .rr .hamburger { display: block; }
  .rr-post { width: 20px; height: 20px; font-size: 0; top: 92px; }
  .rr-seg-body { padding-block: 64px 44px; }
  .rr-hero img.rr-hero-img { height: clamp(440px, 72vh, 560px); }
  .rr-hero-content { bottom: 36px; }
  .rr .donate-amounts { grid-template-columns: repeat(2, 1fr); }
  .rr-milestone { grid-template-columns: 64px 1fr; gap: 12px; }
}
@media (max-width: 479px) {
  .rr-tiers { grid-template-columns: 1fr 1fr; }
  .rr-races { grid-template-columns: 1fr; }
}