/* Gladiator Dash — one stylesheet for the whole site.
   Navy, black, white. Hard edges, heavy rules, grain over everything.
   Nothing here is rounded and nothing is soft: it's a mud run. */

:root {
  /* Ground */
  --ink:       #06090e;   /* black */
  --navy-deep: #0c1826;
  --navy:      #16283f;
  --navy-line: #2b4666;
  --navy-edge: #3b5c82;

  /* Light */
  --white:  #ffffff;
  --paper:  #e9edf1;
  --steel:  #93a7bd;

  /* Metals. Only for the tier and package names on the Sponsors page. */
  --gold:   #d4af37;
  --silver: #c7ced6;
  --bronze: #cd7f32;

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  clamp(2rem, 4.2vw, 3.25rem);
  --fs-hero: clamp(2rem, 8.4vw, 4rem);

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem;
  --sp-4: 1rem;   --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;
  --sp-12: 3rem;  --sp-16: 4rem;  --sp-24: 6rem; --sp-32: 8rem;

  --wrap: 1400px;
  --measure: 62ch;

  /* Dirt. Sits over the whole page at low opacity. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Base ============ */

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

/* iOS 26 paints the scrolled document into the status-bar strip above a sticky
   header, so page content used to show through above the nav bar. Scrolling body
   instead of the document keeps content clipped to the viewport, and the strip
   then takes body's background — hence --ink here and on body, matching the bar.
   main carries the page navy so nothing else changes. */
html { -webkit-text-size-adjust: 100%; height: 100%; overflow: hidden; background: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  body { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
  background: var(--ink);
  color: var(--steel);
  font-family: var(--font);
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* The grain layer. */
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: var(--grain);
  opacity: .085;
  pointer-events: none;
  z-index: 9999;
}

main { flex: 1 0 auto; background: var(--navy-deep); }

h1, h2, h3 {
  margin: 0 0 var(--sp-4);
  color: var(--white);
  font-variation-settings: "wdth" 125, "wght" 800;
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
h1 { font-size: var(--fs-hero); overflow-wrap: break-word; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); line-height: 1.12; letter-spacing: -.01em; }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }

a { color: var(--white); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--white); text-decoration-color: var(--navy-edge); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }

:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; background: var(--white); color: var(--ink); padding: var(--sp-3) var(--sp-4); z-index: 10000; font-weight: 700; }
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-6); }

/* ============ Header — the tabs are slabs ============ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  border-bottom: 3px solid var(--navy-line);
}
.site-header__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 0 var(--sp-6); min-height: 104px;
  display: flex; align-items: stretch; gap: 0;
}
/* The brand is the Home tab: same slab, same colors, same hover as the rest. */
.site-header__brand {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-shrink: 0; text-decoration: none;
  color: var(--steel);
  padding: 0 var(--sp-4);
  border-bottom: 5px solid transparent;
  transition: color .12s linear, background-color .12s linear;
}
.site-header__brand img { width: 52px; height: auto; }
.site-header__brand span {
  color: inherit; font-size: 1.0625rem;
  font-variation-settings: "wdth" 118, "wght" 700;
  letter-spacing: .045em; text-transform: uppercase;
}
.site-header__brand:hover { color: var(--white); background: var(--navy); }
.site-header__brand[aria-current="page"] { color: var(--white); border-bottom-color: var(--white); }

/* Only shown once the tabs collapse into the drawer — see the media query below. */
.site-header__current { display: none; }

.site-nav { flex: 1; display: flex; align-items: stretch; }
.site-nav__list { flex: 1; display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-nav__list li { flex: auto; display: flex; border-left: 1px solid var(--navy-line); }
/* The drawer's Home row — redundant on desktop, where the mark is the Home tab.
   Needs the li in the selector to outweigh the .site-nav__list li rule above. */
.site-nav__list li.site-nav__home { display: none; }

/* Stencil-style signage — the vernacular of the event itself. */
.site-nav__list a {
  display: flex; align-items: center; justify-content: center; flex: 1;
  padding: 0 var(--sp-4);
  color: var(--steel);
  font-size: 1.0625rem;
  font-variation-settings: "wdth" 118, "wght" 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 5px solid transparent;
  transition: color .12s linear, background-color .12s linear;
}
.site-nav__list a:hover { color: var(--white); background: var(--navy); }
.site-nav__list a[aria-current="page"] { color: var(--white); border-bottom-color: var(--white); }

/* Register: a tab like the rest, set as a solid white block. */
.site-nav__cta {
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-6);
  background: var(--white); color: var(--ink);
  font-size: 1.0625rem;
  font-variation-settings: "wdth" 118, "wght" 700;
  letter-spacing: .045em; text-transform: uppercase; text-decoration: none;
  border-bottom: 5px solid transparent;
  transition: color .12s linear, background-color .12s linear;
}
.site-nav__cta:hover { background: var(--paper); color: var(--ink); }

.nav-toggle { display: none; }

/* The full tab row needs ~1300px; below that it goes to the drawer. */
@media (max-width: 1320px) {
  .site-header__inner { min-height: 76px; align-items: center; }
  .site-header__brand { padding: var(--sp-3) 0; border-bottom: 0; }
  /* The mark keeps its link home, so "Home" stays as the link's name for screen
     readers while the slab beside it names the page the visitor is actually on. */
  .site-header__brand-label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .site-header__current {
    display: block; min-width: 0;
    margin-left: var(--sp-4); padding-left: var(--sp-4);
    border-left: 2px solid var(--navy-line);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--white); font-size: 1.0625rem;
    font-variation-settings: "wdth" 118, "wght" 700;
    letter-spacing: .045em; text-transform: uppercase;
  }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    margin-left: auto; width: 52px; height: 52px;
    background: none; border: 2px solid var(--navy-line); cursor: pointer;
    padding: 0 12px;
  }
  .nav-toggle span { display: block; height: 3px; background: var(--white); }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--ink); border-bottom: 3px solid var(--navy-line);
    padding: 0 0 var(--sp-6); display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; }
  .site-nav__list li { border-left: 0; border-top: 1px solid var(--navy-line); }
  .site-nav__list { flex: none; }
  .site-nav__list li { flex: none; }
  .site-nav__list li.site-nav__home { display: flex; }
  .site-nav__list a { justify-content: flex-start; padding: var(--sp-5) var(--sp-6); font-size: var(--fs-lg); border-bottom: 0; }
  .site-nav__cta { margin: var(--sp-6) var(--sp-6) 0; padding: var(--sp-4) var(--sp-8); border-bottom: 0; }
}

/* ============ Buttons ============ */

.btn {
  display: inline-block;
  padding: var(--sp-4) var(--sp-8);
  border: 2px solid transparent;
  font-size: var(--fs-sm);
  font-variation-settings: "wdth" 115, "wght" 800;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}
.btn--primary { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--primary:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--ghost { background: transparent; border-color: var(--navy-edge); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); background: var(--navy); color: var(--white); }
.btn--lg { padding: var(--sp-4) var(--sp-12); font-size: var(--fs-lg); }

/* ============ Facts ============ */

.facts { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--navy-line); }
.facts > div {
  display: grid; grid-template-columns: 8rem 1fr; gap: var(--sp-6);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--navy-line);
}
.facts dt {
  color: var(--steel); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .07em;
  font-variation-settings: "wdth" 105, "wght" 600;
}
.facts dd { margin: 0; color: var(--white); font-variation-settings: "wdth" 108, "wght" 700; }
.facts dd span { display: block; color: var(--steel); font-variation-settings: "wdth" 100, "wght" 400; }
@media (max-width: 560px) { .facts > div { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* ============ Interior pages (empty for now) ============ */

.page-head { background: var(--ink); border-bottom: 3px solid var(--navy-line); padding: var(--sp-12) 0; }
.page-head h1 { margin-bottom: var(--sp-2); font-size: clamp(2.5rem, 7vw, 5.5rem); }
.page-head p { color: var(--steel); font-size: var(--fs-lg); margin: 0; }

.section { padding: var(--sp-24) 0; }
.stub { border: 2px dashed var(--navy-line); padding: var(--sp-16); color: var(--steel); }

/* ============ Sponsors — the logo wall ============ */
/* Logos rest as grayscale marks on black. Hover or keyboard focus drops a plate behind the
   tile (white, or navy for logos drawn in white) and lets the sponsor's own colors through.
   Linked sponsors also lift, flash a name tag and offer "Visit site". Family names invert. */

/* overflow-x: clip keeps a long pop-out name tag from widening the page; tags still rise above the row. */
.sponsor-tier { padding: var(--sp-16) 0; border-bottom: 3px solid var(--navy-line); overflow-x: clip; }
.sponsor-tier:nth-of-type(even) { background: var(--ink); }
.sponsor-tier__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-12);
}
.sponsor-tier__head h2 { margin: 0; }
.sponsor-tier__count {
  margin: 0; color: var(--steel); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .08em;
  font-variation-settings: "wdth" 110, "wght" 600;
}

/* Rules are the grid showing through 2px gaps; every tier has an even count so rows fill. */
.sponsor-grid {
  --cols: 4; --tile-h: 190px; --logo-w: 230px; --logo-h: 92px;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 2px; background: var(--navy-line); border: 2px solid var(--navy-line);
}
.sponsor-grid--title  { --cols: 2; --tile-h: clamp(220px, 22vw, 300px); --logo-w: 440px; --logo-h: 150px; }
.sponsor-grid--silver { --tile-h: 170px; --logo-w: 220px; --logo-h: 88px; }
.sponsor-grid--bronze { --cols: 8; --tile-h: 132px; --logo-w: 132px; --logo-h: 60px; }
.sponsor-grid > li { display: flex; min-width: 0; }

.sponsor {
  position: relative; flex: 1; min-width: 0; min-height: var(--tile-h);
  display: grid; place-items: center; padding: var(--sp-6) var(--sp-4);
  background: var(--ink); color: var(--steel); text-decoration: none;
  transition: background-color .18s cubic-bezier(.23,1,.32,1), color .18s cubic-bezier(.23,1,.32,1), transform .18s cubic-bezier(.23,1,.32,1);
}
.sponsor__logo {
  width: auto; height: auto; max-width: min(100%, var(--logo-w)); max-height: var(--logo-h);
  object-fit: contain; opacity: .72;
  filter: grayscale(1) invert(0);
  transition: filter .18s cubic-bezier(.23,1,.32,1), opacity .18s cubic-bezier(.23,1,.32,1);
}
.sponsor__logo--invert { filter: grayscale(1) invert(1); }

.sponsor:hover, .sponsor:focus-visible { background: var(--white); color: var(--ink); z-index: 2; }
.sponsor:focus-visible { outline: 3px solid var(--ink); outline-offset: -9px; }
.sponsor--plate-dark:hover, .sponsor--plate-dark:focus-visible {
  background: var(--navy); color: var(--white);
  outline: 3px solid var(--white); outline-offset: -3px;
}
.sponsor:hover .sponsor__logo, .sponsor:focus-visible .sponsor__logo { filter: grayscale(0) invert(0); opacity: 1; }

.sponsor--name {
  font-size: var(--fs-lg); line-height: 1.1; text-align: center;
  text-transform: uppercase; letter-spacing: .02em;
  font-variation-settings: "wdth" 118, "wght" 700;
}

.sponsor__role, .sponsor__cta {
  position: absolute; bottom: var(--sp-3);
  font-size: .75rem; line-height: 1; color: inherit;
  text-transform: uppercase; letter-spacing: .08em;
  font-variation-settings: "wdth" 118, "wght" 700;
}
.sponsor__role { left: var(--sp-4); }
.sponsor__cta {
  right: var(--sp-4); opacity: 0; transform: translateY(4px);
  transition: opacity .18s cubic-bezier(.23,1,.32,1), transform .18s cubic-bezier(.23,1,.32,1);
}
a.sponsor:hover .sponsor__cta, a.sponsor:focus-visible .sponsor__cta { opacity: 1; transform: none; }

/* The name tag and the lift only exist where there is a real pointer. */
.sponsor__tag {
  display: none;
  position: absolute; left: var(--sp-4); top: 0; z-index: 1;
  padding: var(--sp-1) var(--sp-3);
  background: var(--ink); color: var(--white); border: 2px solid var(--white);
  font-size: .8125rem; line-height: 1.2; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .06em;
  font-variation-settings: "wdth" 122, "wght" 800;
  transform-origin: left bottom;
  transform: translateY(-50%) rotate(-6deg) scale(.95);
  opacity: 0; filter: blur(4px); pointer-events: none;
  transition: opacity .16s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1), filter .16s cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
  .sponsor__tag { display: block; }
  a.sponsor:hover, a.sponsor:focus-visible { transform: translateY(-4px); }
  a.sponsor:hover .sponsor__tag, a.sponsor:focus-visible .sponsor__tag {
    opacity: 1; filter: blur(0); transform: translateY(-80%) rotate(-6deg) scale(1);
  }
}
/* On touch screens there is no hover, so say up front that the tile opens the site. */
@media (hover: none) { a.sponsor .sponsor__cta { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  a.sponsor:hover, a.sponsor:focus-visible { transform: none; }
  .sponsor__tag, a.sponsor:hover .sponsor__tag, a.sponsor:focus-visible .sponsor__tag {
    transform: translateY(-80%) rotate(-6deg); filter: none;
  }
}

@media (max-width: 1200px) { .sponsor-grid--bronze { --cols: 4; } }
@media (max-width: 900px) {
  .sponsor-grid { --cols: 2; }
  .sponsor-grid--bronze { --cols: 4; }
}
@media (max-width: 560px) {
  .sponsor-tier { padding: var(--sp-12) 0; }
  .sponsor-grid--title { --cols: 1; }
  .sponsor-grid--bronze { --cols: 2; --tile-h: 120px; }
  .sponsor--name { font-size: var(--fs-base); }
}

/* Sponsorship packages at the foot of the page. Informational, so the cards don't lift or
   invert like the logo tiles. Package and tier names are the one place the metal colors appear. */
.pkg-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px; background: var(--navy-line); border: 2px solid var(--navy-line);
}
.pkg { display: flex; flex-direction: column; background: var(--ink); }
.pkg__head { display: grid; gap: var(--sp-3); padding: var(--sp-8) var(--sp-6) var(--sp-6); border-bottom: 2px solid var(--navy-line); }
.pkg__tier { margin: 0; font-size: var(--fs-2xl); }
/* Shared by the tier headings on the wall and the package names below. */
.metal--gold   { color: var(--gold); }
.metal--silver { color: var(--silver); }
.metal--bronze { color: var(--bronze); }
.pkg__price {
  margin: 0; color: var(--white); font-size: clamp(2.5rem, 4.2vw, 3.75rem); line-height: .9; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 125, "wght" 800;
}
.pkg__price span { margin-left: .06em; color: var(--steel); }
.pkg__list { list-style: none; margin: 0; padding: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; }
.pkg__list li { position: relative; padding-left: var(--sp-5); line-height: 1.45; }
.pkg__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--white); }
.pkg__list strong { color: var(--white); font-variation-settings: "wdth" 100, "wght" 700; }

.pkg-contact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--sp-8) var(--sp-12); align-items: start;
  margin-top: var(--sp-16); padding-top: var(--sp-12); border-top: 3px solid var(--navy-line);
}
.pkg-contact h3 { margin: 0 0 var(--sp-4); font-size: clamp(2rem, 4vw, 3.25rem); }
.pkg-contact p { margin: 0; font-size: var(--fs-lg); }
/* The email address is too long to share a row with a phone tile. */
.pkg-contact .contact-tiles li:last-child { grid-column: 1 / -1; }
.pkg-contact .contact-tile__value { overflow-wrap: normal; }

@media (max-width: 1000px) {
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg-contact { grid-template-columns: 1fr; }
}

/* ============ Content bands — shared by Giveback, FAQ and Raffle ============ */

.band { padding: var(--sp-16) 0; border-bottom: 3px solid var(--navy-line); }
.band--ink { background: var(--ink); }
.band__head { display: grid; gap: var(--sp-3); max-width: 46rem; margin-bottom: var(--sp-12); }
.band__head h2 { margin: 0; text-wrap: balance; }
.band__head p { margin: 0; color: var(--steel); font-size: var(--fs-lg); }
.eyebrow {
  margin: 0; color: var(--steel); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .1em;
  font-variation-settings: "wdth" 110, "wght" 700;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
/* Anchored sections clear the sticky header when a jump link lands on them. */
.anchor-target { scroll-margin-top: 120px; }

/* Contact tiles (performativeUI "CommunityBadge", square and without counts). */
.contact-tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4);
}
.contact-tile {
  display: grid; gap: var(--sp-1); height: 100%;
  padding: var(--sp-6); background: var(--ink); border: 2px solid var(--navy-line);
  color: var(--white); text-decoration: none;
  transition: transform .18s cubic-bezier(.23,1,.32,1), border-color .18s cubic-bezier(.23,1,.32,1), background-color .18s cubic-bezier(.23,1,.32,1);
}
.contact-tile:hover, .contact-tile:focus-visible { transform: translateY(-3px); border-color: var(--white); background: var(--navy); color: var(--white); }
.contact-tile__label {
  color: var(--steel); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
  font-variation-settings: "wdth" 110, "wght" 700;
}
.contact-tile__value { font-size: var(--fs-lg); font-variation-settings: "wdth" 108, "wght" 700; overflow-wrap: anywhere; }

/* Status flag (performativeUI "StatusDot" + "EyebrowPill"): a square marker that pulses. */
.live-flag {
  display: inline-flex; align-items: center; gap: var(--sp-3); margin: 0;
  color: var(--white); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
  font-variation-settings: "wdth" 110, "wght" 700;
}
.live-flag__mark { position: relative; flex: none; width: 10px; height: 10px; background: var(--white); }
.live-flag__mark::after {
  content: ""; position: absolute; inset: -5px; border: 2px solid var(--white);
  animation: live-pulse 1.6s cubic-bezier(.23,1,.32,1) infinite;
}
@keyframes live-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

/* ============ Giveback ============ */

.gb-hero { background: var(--ink); border-bottom: 3px solid var(--navy-line); }
.gb-hero__bar {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
  gap: var(--sp-12); padding-block: var(--sp-16);
}
/* Sized so "Organization" always fits its column: it is about 10 em wide at this width axis.
   The column stops growing at the 1400px wrap (~658px), so the cap has to stay under ~66px. */
.gb-hero__title { margin: var(--sp-4) 0 var(--sp-3); font-size: clamp(2rem, 4.2vw, 4rem); text-wrap: balance; }
.gb-hero__lede { margin: 0 0 var(--sp-8); color: var(--steel); font-size: var(--fs-lg); }
.gb-hero .btn--lg { padding-inline: var(--sp-8); }
.gb-hero__photo { margin: 0; border: 3px solid var(--navy-line); background: var(--navy); }
.gb-hero__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; }

.gb-roll__line {
  margin: 0; max-width: none; color: var(--white);
  font-size: clamp(1.75rem, 4.4vw, 3.5rem); line-height: 1.15; letter-spacing: -.02em;
  text-transform: uppercase; font-variation-settings: "wdth" 118, "wght" 800;
}
.gb-roll__muted { color: var(--steel); }
/* Word roll (performativeUI "WordRoll"): all words share one grid cell, so the box is as wide as
   the longest word and the sentence never shifts while the words change. */
.word-roll { display: inline-grid; vertical-align: top; overflow: hidden; padding-bottom: .12em; }
.word-roll__word {
  grid-area: 1 / 1; justify-self: start; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: .14em;
  transform: translateY(105%); opacity: 0;
  transition: transform .5s cubic-bezier(.23,1,.32,1), opacity .5s cubic-bezier(.23,1,.32,1);
}
.word-roll__word.is-active { transform: none; opacity: 1; }
.word-roll__word.is-past { transform: translateY(-105%); opacity: 0; }

.gb-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px; background: var(--navy-line); border: 2px solid var(--navy-line);
}
.gb-step { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-8) var(--sp-6); background: var(--ink); }
.gb-step__num {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-3);
  background: var(--white); color: var(--ink); font-size: var(--fs-xl);
  font-variation-settings: "wdth" 125, "wght" 800;
}
.gb-step h3 { margin: 0; font-size: var(--fs-xl); }
.gb-step p { margin: 0; }
.gb-example { display: flex; flex-wrap: wrap; align-self: flex-start; margin-top: var(--sp-2); border: 2px dashed var(--navy-edge); }
.gb-example span, .gb-example strong { padding: var(--sp-2) var(--sp-3); text-transform: uppercase; }
.gb-example span {
  color: var(--steel); font-size: .8125rem; letter-spacing: .08em; border-right: 2px dashed var(--navy-edge);
  font-variation-settings: "wdth" 110, "wght" 700;
}
.gb-example strong { color: var(--white); letter-spacing: .04em; font-variation-settings: "wdth" 118, "wght" 800; }

.gb-cats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px; background: var(--navy-line); border: 2px solid var(--navy-line);
}
.gb-cat {
  display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8) var(--sp-6);
  background: var(--ink); color: var(--steel);
  transition: background-color .18s cubic-bezier(.23,1,.32,1), color .18s cubic-bezier(.23,1,.32,1);
}
.gb-cat h3 { margin: 0; color: var(--white); font-size: var(--fs-xl); transition: color .18s cubic-bezier(.23,1,.32,1); }
.gb-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.gb-cat li { position: relative; padding-left: var(--sp-5); }
.gb-cat li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; background: currentColor; }
.gb-cat__prize {
  margin: auto 0 0; padding-top: var(--sp-4); border-top: 2px solid var(--navy-line);
  color: var(--white); font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1;
  font-variation-settings: "wdth" 125, "wght" 800;
  transition: color .18s cubic-bezier(.23,1,.32,1), border-color .18s cubic-bezier(.23,1,.32,1);
}
.gb-cat:hover { background: var(--white); color: var(--ink); }
.gb-cat:hover h3, .gb-cat:hover .gb-cat__prize { color: var(--ink); border-color: var(--ink); }

@media (max-width: 1100px) { .gb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .gb-hero__bar { grid-template-columns: 1fr; gap: var(--sp-8); padding-block: var(--sp-12); }
  .gb-hero__title { font-size: min(3.5rem, calc((100vw - 3rem) / 10.5)); }
  /* A short strip on phones so the photo doesn't fill the screen. */
  .gb-hero__photo img { aspect-ratio: 16 / 9; object-position: 50% 45%; }
  .gb-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gb-cats { grid-template-columns: 1fr; }
  .gb-hero .btn--lg { flex: 1 1 100%; padding-inline: var(--sp-4); font-size: var(--fs-base); text-align: center; }
}

/* ============ FAQ ============ */

/* Jump tabs: the header's slab tabs, one size down. */
.jump-tabs { background: var(--ink); border-bottom: 3px solid var(--navy-line); overflow-x: auto; }
.jump-tabs ul {
  list-style: none; margin: 0 auto; padding: 0 var(--sp-6);
  display: flex; width: max-content; min-width: min(100%, var(--wrap)); max-width: var(--wrap);
}
.jump-tabs li { display: flex; border-left: 1px solid var(--navy-line); }
.jump-tabs li:last-child { border-right: 1px solid var(--navy-line); }
.jump-tabs a {
  display: flex; align-items: center; padding: var(--sp-4) var(--sp-6); white-space: nowrap;
  color: var(--steel); text-decoration: none; text-transform: uppercase; letter-spacing: .045em;
  font-variation-settings: "wdth" 118, "wght" 700;
  border-bottom: 5px solid transparent;
  transition: color .12s linear, background-color .12s linear, border-color .12s linear;
}
.jump-tabs a:hover, .jump-tabs a:focus-visible { color: var(--white); background: var(--navy); border-bottom-color: var(--white); }

.faq-group { padding: var(--sp-16) 0; border-bottom: 3px solid var(--navy-line); }
.faq-group--ink { background: var(--ink); }
.faq-group__inner { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--sp-8) var(--sp-16); align-items: start; }
.faq-group__head h2 { margin: 0 0 var(--sp-2); font-size: clamp(1.5rem, 2.2vw, 2rem); overflow-wrap: anywhere; text-wrap: balance; }
.faq-group__head p {
  margin: 0; color: var(--steel); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
  font-variation-settings: "wdth" 110, "wght" 700;
}

.faq-list { border-top: 2px solid var(--navy-line); }
.faq-item { border-bottom: 2px solid var(--navy-line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-5) 0; list-style: none; cursor: pointer;
  color: var(--white); font-size: var(--fs-lg); line-height: 1.25;
  font-variation-settings: "wdth" 108, "wght" 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline-offset: 4px; }
/* Square +/− marker: two bars; the vertical one turns flat when the answer is open. */
.faq-item__icon {
  position: relative; flex: none; width: 34px; height: 34px;
  border: 2px solid var(--navy-edge);
  transition: background-color .18s cubic-bezier(.23,1,.32,1), border-color .18s cubic-bezier(.23,1,.32,1);
}
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px;
  background: var(--white); transform: translate(-50%, -50%);
  transition: transform .18s cubic-bezier(.23,1,.32,1), background-color .18s cubic-bezier(.23,1,.32,1);
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item summary:hover .faq-item__icon { border-color: var(--white); }
.faq-item[open] .faq-item__icon { background: var(--white); border-color: var(--white); }
.faq-item[open] .faq-item__icon::before, .faq-item[open] .faq-item__icon::after { background: var(--ink); }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item__a { padding: 0 0 var(--sp-6); }
.faq-item__a p { max-width: var(--measure); }
.faq-item__a p:last-child { margin-bottom: 0; }

@media (max-width: 900px) { .faq-group__inner { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ============ Raffle ============ */
/* Most prize photos and donor logos come with white baked in, so each one sits on a small
   white tile inset in a black card. The white stays in the tiles, never the whole card. */

.raffle-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); margin-bottom: var(--sp-16); }
.raffle-intro .band__head { margin-bottom: 0; }

/* Grand prize: photo tile on the left, name and value on the right. */
.raffle-grand {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--sp-6);
  margin-bottom: var(--sp-12); padding: var(--sp-6);
  background: var(--ink); border: 2px solid var(--navy-line);
}
.raffle-grand__media { display: grid; place-items: center; padding: var(--sp-6); background: var(--white); }
.raffle-grand__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 290px; }
.raffle-grand__body { display: grid; align-content: center; justify-items: start; gap: var(--sp-4); padding: var(--sp-6) var(--sp-8); }
.raffle-grand__body h3 { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.75rem); text-wrap: balance; }
.raffle-grand__body p { margin: 0; }
.raffle-grand__value {
  display: grid; gap: var(--sp-2); justify-self: stretch;
  margin: var(--sp-2) 0 var(--sp-4); padding-top: var(--sp-6); border-top: 2px solid var(--navy-line);
}
.raffle-grand__body .raffle-grand__amount {
  color: var(--white); font-size: clamp(3rem, 6vw, 5rem); line-height: .9; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 125, "wght" 800;
}
.raffle-grand__unit, .prize__value {
  margin: 0; color: var(--steel); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
  font-variation-settings: "wdth" 110, "wght" 700;
}

/* Separate cards with real gaps; 12 of them, so rows fill at 4, 3, 2 and 1 across. */
.prize-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6);
}
.prize { display: flex; flex-direction: column; background: var(--ink); border: 2px solid var(--navy-line); }
.prize__media {
  display: grid; place-items: center; height: 200px; margin: var(--sp-4) var(--sp-4) 0; padding: var(--sp-5);
  background: var(--white); overflow: hidden;
}
.prize__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; }
/* Logos share one box so a tall mark and a wide wordmark read at the same weight. */
.prize__media--logo img { max-width: min(100%, 210px); max-height: min(100%, 110px); }
/* Real photos fill the tile edge to edge instead of floating like a logo. */
.prize__media--photo { padding: 0; }
.prize__media--photo img { width: 100%; height: 100%; object-fit: cover; }
.prize__body { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.prize__body h3 { margin: 0; font-size: var(--fs-lg); line-height: 1.15; }
.prize__body p { margin: 0; font-size: var(--fs-sm); }

/* The last card is the cause, not a prize: navy, no tile, button at the foot. */
.prize--cause { justify-content: space-between; background: var(--navy); }
.prize--cause .prize__body { padding: var(--sp-8) var(--sp-6); gap: var(--sp-3); }
.prize--cause h3 { font-size: var(--fs-xl); }
.prize--cause p { color: var(--paper); font-size: var(--fs-base); }
.prize--cause .btn { margin: 0 var(--sp-6) var(--sp-6); text-align: center; }

@media (max-width: 1200px) { .prize-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .raffle-grand { grid-template-columns: 1fr; }
  .raffle-grand__media img { max-height: 240px; }
  .raffle-grand__body { padding: var(--sp-4) var(--sp-2) var(--sp-2); }
}
@media (max-width: 560px) {
  .prize-grid { grid-template-columns: 1fr; }
  .raffle-grand { padding: var(--sp-4); }
}

/* ============ Mercuria ============ */
/* Both photos run in their own colors; a dark gradient under the text keeps it readable. */

.merc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.merc-hero, .merc-work { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); border-bottom: 3px solid var(--navy-line); }
.merc-hero::after, .merc-work::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.merc-hero::after {
  background: linear-gradient(180deg, transparent 0%, transparent 25%, color-mix(in srgb, var(--ink) 60%, transparent) 60%, color-mix(in srgb, var(--ink) 90%, transparent) 100%);
}
.merc-hero__photo { object-position: 70% 40%; }
/* Tall frame with the headline pinned to the bottom, so the photo gets the top of the screen. */
.merc-hero__inner {
  position: relative; z-index: 2;
  display: grid; justify-items: start; align-content: end; gap: var(--sp-6);
  min-height: clamp(520px, 82vh, 920px);
  min-height: clamp(520px, 82svh, 920px);
  padding-block: var(--sp-24) var(--sp-16);
}

.merc-hero__title { margin: 0; max-width: 12ch; font-size: clamp(2.5rem, 8vw, 6.5rem); line-height: .9; letter-spacing: -.035em; text-wrap: balance; }
.merc-hero__lede { margin: 0; color: var(--paper); font-size: var(--fs-lg); }

@media (prefers-reduced-motion: no-preference) {
  .merc-hero__title, .merc-hero__lede { opacity: 0; animation: hero-line .6s cubic-bezier(.2,.9,.3,1) forwards; }
  .merc-hero__title { animation-delay: .08s; }
  .merc-hero__lede { animation-delay: .22s; }
}

.merc-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); align-items: start; }
.merc-who__plate { display: grid; place-items: center; padding: clamp(var(--sp-8), 4vw, var(--sp-12)) var(--sp-6); background: var(--white); }
.merc-who__plate img { width: clamp(200px, 70%, 340px); }
.merc-who h2 { margin-bottom: var(--sp-6); }
.merc-who__text p { color: var(--paper); font-size: var(--fs-lg); }
.merc-who__text p:last-child { margin-bottom: 0; }
.merc-facts > div { grid-template-columns: 10rem 1fr; }

.merc-work::after {
  background: linear-gradient(180deg, transparent 0%, transparent 30%, color-mix(in srgb, var(--ink) 94%, transparent) 78%);
}
.merc-work__inner { position: relative; z-index: 2; padding-block: clamp(var(--sp-24), 16vw, 14rem) var(--sp-16); }
.merc-work h2 { margin-bottom: var(--sp-4); }
.merc-work__lede { margin-bottom: var(--sp-12); color: var(--paper); font-size: var(--fs-lg); }
.merc-work__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px; background: var(--navy-line); border: 2px solid var(--navy-line);
}
.merc-work__list li { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-8) var(--sp-6); background: var(--ink); }
.merc-work__list h3 { margin: 0; font-size: var(--fs-xl); }
.merc-work__list p { margin: 0; }

.merc-cta { padding: var(--sp-16) 0; background: var(--navy); }
.merc-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8) var(--sp-12); align-items: end; }
.merc-cta h2 { margin: 0 0 var(--sp-4); font-size: clamp(2.25rem, 5vw, 4rem); text-wrap: balance; }
.merc-cta p { margin: 0; color: var(--paper); font-size: var(--fs-lg); }

@media (max-width: 900px) {
  .merc-who, .merc-cta__inner { grid-template-columns: 1fr; gap: var(--sp-12); align-items: start; }
  .merc-work__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .merc-facts > div { grid-template-columns: 1fr; }
  /* The sign runs right across the photo, so a tall frame crops it to "RCURIA":
     cover reveals only width/(height x 1.52) of the picture, and the wordmark is
     55.8% of it. A 112vw frame shows 58.7% — the whole word with a little air —
     and the 27% offset is what puts that window over the word rather than the
     doorway. Type is pinned to two lines so it lands under the sign, not across
     it. Retune both together: a taller frame drops letters. */
  .merc-hero__inner { min-height: min(112vw, 560px); padding-block: var(--sp-12) var(--sp-8); }
  .merc-hero__photo { object-position: 27% 50%; }
  .merc-hero__title { font-size: 2.25rem; max-width: 16ch; }
  .merc-hero__lede { font-size: 1rem; }
}

/* ============ Home: video hero ============ */

.home-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--ink);
  border-bottom: 3px solid var(--navy-line);
  overflow: hidden;
  padding: 0;
}

.home-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Navy wash over the footage so white type stays readable on every frame. */
.home-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,9,14,.70) 0%, rgba(12,24,38,.34) 42%, rgba(6,9,14,.88) 100%),
    linear-gradient(90deg, rgba(12,24,38,.35) 0%, rgba(12,24,38,0) 60%);
}
.home-hero__scrim::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: .12;
}

.home-hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: var(--sp-32) var(--sp-6) var(--sp-16);
}

/* The lockup already carries the name and the date, so it *is* the headline. */
.home-hero__mark { margin: 0 0 var(--sp-6); max-width: 1080px; width: 92%; }
.home-hero__mark img { width: 100%; }

.home-hero__claim {
  margin: 0 0 var(--sp-8); max-width: none;
  color: var(--white);
  font-size: clamp(1.25rem, 3.2vw, 2.1rem);
  font-variation-settings: "wdth" 120, "wght" 800;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1;
}
.home-hero__claim span { display: inline-block; }
.home-hero__claim span + span { margin-left: .6em; }

@media (prefers-reduced-motion: no-preference) {
  .home-hero__mark, .home-hero__claim span, .home-hero__actions {
    opacity: 0; animation: hero-line .6s cubic-bezier(.2,.9,.3,1) forwards;
  }
  .home-hero__mark { animation-delay: .08s; }
  .home-hero__claim span:nth-child(1) { animation-delay: .30s; }
  .home-hero__claim span:nth-child(2) { animation-delay: .38s; }
  .home-hero__claim span:nth-child(3) { animation-delay: .46s; }
  .home-hero__actions { animation-delay: .58s; }
}
@keyframes hero-line { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }

/* Facts pinned along the bottom of the frame. */
.home-hero__strip {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.18);
  background: rgba(6,9,14,.55);
  backdrop-filter: blur(4px);
}
.home-hero__strip dl {
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--sp-6);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
  text-align: left;
}
.home-hero__strip dt {
  color: var(--steel); font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .1em;
  font-variation-settings: "wdth" 105, "wght" 600;
  margin-bottom: var(--sp-1);
}
.home-hero__strip dd {
  margin: 0; color: var(--white); font-size: var(--fs-lg);
  font-variation-settings: "wdth" 115, "wght" 700;
}
.home-hero__strip dd span { display: block; color: var(--steel); font-size: var(--fs-sm); font-variation-settings: "wdth" 100, "wght" 400; }

@media (max-width: 760px) {
  .home-hero__strip dl { grid-template-columns: 1fr; gap: var(--sp-4); }
  .home-hero__inner { padding: var(--sp-24) var(--sp-6) var(--sp-12); }
  .home-hero__claim span { display: block; }
  .home-hero__claim span + span { margin-left: 0; }
}

/* ============ Real imagery ============ */

.home-figure { margin: 0; }
.home-figure img { width: 100%; border: 2px solid var(--navy-line); }
.home-figure figcaption { margin-top: var(--sp-3); color: var(--steel); font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em; }

/* Logo marks sit on dark, so knock them back to flat white. */
.mark-white { filter: brightness(0) invert(1); }

.home-cause__logo { display: block; width: 220px; max-width: 100%; margin: 0 auto var(--sp-6); }

/* Title-sponsor band straight under the hero. Split slab: Mercuria's LNG terminal in its own
   colors with their mark on top; the credit and a link to the Mercuria tab on the right. */
.home-presenter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--ink); border-bottom: 3px solid var(--navy-line);
}
.home-presenter__media {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; min-height: 360px; padding: var(--sp-12) var(--sp-8);
  border-right: 3px solid var(--navy-line);
}
.home-presenter__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Darken just behind the mark so it reads; the edges keep the photo's full color. */
.home-presenter__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ink) 62%, transparent) 0%, transparent 72%);
}
.home-presenter__mark { position: relative; z-index: 2; width: min(100%, 340px); height: auto; }

.home-presenter__body {
  display: grid; align-content: center; justify-items: start; gap: var(--sp-4);
  padding: var(--sp-12) clamp(var(--sp-6), 5vw, var(--sp-16));
}
.home-presenter__body h2 { margin: 0; }
.home-presenter__body p { margin: 0; max-width: 34rem; }
.home-presenter__body .btn { margin-top: var(--sp-4); }

@media (max-width: 900px) {
  .home-presenter { grid-template-columns: 1fr; }
  .home-presenter__media { min-height: 240px; border-right: 0; border-bottom: 3px solid var(--navy-line); }
  .home-presenter__mark { width: min(70%, 280px); }
  .home-presenter__body { padding: var(--sp-12) var(--sp-6); }
}

/* ============ Home: sections ============ */
/* Bands alternate navy and black so the page reads as strata, not cards. */

/* Slim band at the foot of the page: last year's results and photos, one line of copy and two buttons. */
.home-recap { padding: var(--sp-12) 0; background: var(--ink); border-top: 3px solid var(--navy-line); border-bottom: 3px solid var(--navy-line); }
.home-recap__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6) var(--sp-12); }
.home-recap h2 { margin: var(--sp-2) 0 0; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }

.home-section { padding: var(--sp-24) 0; }
.home-section--dark { background: var(--ink); }
.home-section__head { max-width: var(--measure); margin-bottom: var(--sp-12); }
.home-section__head p { color: var(--steel); margin-bottom: 0; }

.home-cause__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-16); align-items: start; }
.home-cause__figure { margin: 0; }
.home-cause__well {
  aspect-ratio: 3 / 2;
  background: linear-gradient(150deg, var(--navy) 0%, var(--ink) 120%);
  border: 2px solid var(--navy-line);
  display: grid; place-items: center;
  color: var(--navy-edge); font-size: var(--fs-sm); text-align: center; padding: var(--sp-6);
}
.home-raised {
  font-size: clamp(3rem, 8vw, 6rem);
  font-variation-settings: "wdth" 125, "wght" 800;
  line-height: .9; letter-spacing: -.04em; color: var(--white); margin: 0 0 var(--sp-4);
  font-variant-numeric: tabular-nums; /* digits hold their width while counting */
}
.home-raised + p { color: var(--white); font-size: var(--fs-lg); }
@media (max-width: 900px) { .home-cause__grid { grid-template-columns: 1fr; gap: var(--sp-12); } }

/* Race day is a genuine sequence, so the timeline earns its markers. */
.home-schedule { list-style: none; margin: 0; padding: 0; max-width: 820px; border-top: 3px solid var(--navy-line); }
.home-schedule li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-6); padding: var(--sp-6) 0; border-bottom: 1px solid var(--navy-line); }
.home-schedule time {
  color: var(--white); font-variation-settings: "wdth" 118, "wght" 800;
  font-size: var(--fs-lg); line-height: 1.2; text-transform: uppercase; letter-spacing: .02em;
}
.home-schedule h3 { margin-bottom: var(--sp-1); }
.home-schedule p { margin: 0; color: var(--steel); }
@media (max-width: 640px) { .home-schedule li { grid-template-columns: 1fr; gap: var(--sp-2); } }

.home-race { position: relative; isolation: isolate; overflow: hidden; }
.home-race__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
/* Text sits on the right so the welcome sign on the left of the photo stays clear. */
.home-race::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(270deg, color-mix(in srgb, var(--ink) 94%, transparent) 0%, color-mix(in srgb, var(--ink) 88%, transparent) 45%, color-mix(in srgb, var(--ink) 25%, transparent) 75%, transparent 100%);
}
.home-race .home-section__head, .home-race .home-schedule { max-width: min(680px, 48%); margin-left: auto; }
/* Tighter than the other home sections so the photo doesn't turn into a tall scroll. */
.home-race { padding: var(--sp-16) 0; }
.home-race .home-section__head { margin-bottom: var(--sp-8); }
.home-race .home-schedule li { padding: var(--sp-4) 0; }
@media (max-width: 1280px) {
  .home-race::before { background: color-mix(in srgb, var(--ink) 90%, transparent); }
  .home-race .home-section__head, .home-race .home-schedule { max-width: none; }
}

.home-obstacles { list-style: none; margin: 0 0 var(--sp-8); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); border-top: 3px solid var(--navy-line); }
.home-obstacles li { border-bottom: 1px solid var(--navy-line); border-right: 1px solid var(--navy-line); }
.home-obstacles a {
  display: block; min-height: 6rem; padding: var(--sp-5) var(--sp-6) var(--sp-4) 0;
  color: var(--white); font-size: var(--fs-lg);
  font-variation-settings: "wdth" 118, "wght" 700;
  text-transform: uppercase; letter-spacing: .01em; text-decoration: none;
}
.home-obstacles a:hover { color: var(--white); background: var(--navy); }
.home-obstacles small { display: block; margin-top: var(--sp-1); color: var(--steel); font-size: .8125rem; text-transform: none; letter-spacing: 0; font-variation-settings: "wdth" 100, "wght" 400; }

.home-welcome__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-16); align-items: start; }
.home-quote { margin: 0; border-left: 5px solid var(--white); padding-left: var(--sp-6); }
.home-quote p { color: var(--white); font-size: var(--fs-lg); line-height: 1.45; }
.home-quote footer { color: var(--steel); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.home-quote cite { font-style: normal; color: var(--white); font-variation-settings: "wdth" 110, "wght" 700; }
@media (max-width: 900px) { .home-welcome__grid { grid-template-columns: 1fr; gap: var(--sp-12); } }

.home-sponsor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); }
.home-sponsor__mark { min-width: 240px; min-height: 100px; border: 2px solid var(--navy-line); display: grid; place-items: center; padding: var(--sp-6); color: var(--navy-edge); font-size: var(--fs-sm); }
.home-sponsor__body { max-width: var(--measure); }
.home-sponsor__body p:last-child { margin-bottom: 0; }

/* ============ Footer ============ */

.site-footer { flex-shrink: 0; background: var(--ink); border-top: 3px solid var(--navy-line); color: var(--steel); font-size: var(--fs-sm); }
.site-footer__inner { max-width: var(--wrap); margin-inline: auto; padding: var(--sp-16) var(--sp-6) var(--sp-12); display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-12); }
@media (max-width: 820px) { .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-8); } }
.site-footer__brand img { width: 250px; height: auto; }
.site-footer__brand a, .site-footer__brand > img { display: block; }

.site-footer__tagline { margin-top: var(--sp-6); max-width: 34ch; }
.site-footer__tagline strong { display: block; color: var(--white); text-transform: uppercase; font-variation-settings: "wdth" 118, "wght" 800; letter-spacing: .03em; }
.site-footer h2 { color: var(--white); font-size: var(--fs-sm); font-variation-settings: "wdth" 110, "wght" 700; letter-spacing: .08em; margin-bottom: var(--sp-4); }
.site-footer__nav { display: flex; gap: var(--sp-12); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer__nav li { margin-bottom: var(--sp-3); }
.site-footer a { color: var(--steel); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer__contact p { margin-bottom: var(--sp-2); }
.site-footer__legal { border-top: 1px solid var(--navy-line); padding: var(--sp-6); text-align: center; color: var(--navy-edge); font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; }
.site-footer__legal p { margin: 0; max-width: none; }

/* Sponsor strip at the top of the footer: Title, Arena and Gold logos on a 30s loop.
   The logo set is written twice; sliding the track -50% lands copy two where copy one began,
   which only works because every item carries the same right margin (not a flex gap). */
.site-footer__sponsors { border-bottom: 3px solid var(--navy-line); }
.logo-marquee {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: var(--sp-6);
  max-width: var(--wrap); margin-inline: auto; padding: var(--sp-8) var(--sp-6);
  text-decoration: none;
}
.logo-marquee__label, .logo-marquee__cta {
  font-size: var(--fs-sm); line-height: 1; text-transform: uppercase; letter-spacing: .08em;
  font-variation-settings: "wdth" 110, "wght" 700;
}
.logo-marquee__label { color: var(--white); }
.logo-marquee__cta { color: var(--steel); transition: color .18s cubic-bezier(.23,1,.32,1); }
.logo-marquee:hover .logo-marquee__cta, .logo-marquee:focus-visible .logo-marquee__cta { color: var(--white); }

/* The mask only reads alpha, so the ink token stands in for the reference's #000. */
.logo-marquee__viewport {
  grid-column: 1 / -1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
}
.logo-marquee__track { display: flex; width: max-content; animation: logo-marquee 30s linear infinite; }
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-visible .logo-marquee__track { animation-play-state: paused; }
@keyframes logo-marquee { to { transform: translateX(-50%); } }

.logo-marquee__group { display: flex; align-items: center; }
.logo-marquee__item {
  display: flex; align-items: center;
  margin-right: 56px; padding: var(--sp-2) var(--sp-3);
  background: transparent; transition: background-color .18s cubic-bezier(.23,1,.32,1);
}
.logo-marquee__logo {
  width: auto; height: auto; max-width: 140px; max-height: 52px; /* fit a box, so wide and square logos read at a similar size */
  opacity: .8; filter: grayscale(1) invert(0);
  transition: filter .18s cubic-bezier(.23,1,.32,1), opacity .18s cubic-bezier(.23,1,.32,1);
}
.logo-marquee__logo--invert { filter: grayscale(1) invert(1); }
/* Same reveal as the Sponsors page: a white plate, then the sponsor's own colors. */
.logo-marquee__item:hover { background: var(--white); }
.logo-marquee__item:hover .logo-marquee__logo { filter: grayscale(0) invert(0); opacity: 1; }

@media (max-width: 560px) {
  .logo-marquee__logo { max-width: 104px; max-height: 38px; }
  .logo-marquee__item { margin-right: 36px; }
  .logo-marquee__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 12%, var(--ink) 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, var(--ink) 12%, var(--ink) 88%, transparent);
  }
}
/* Without motion: one still, centered row of the ten logos. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; width: auto; }
  .logo-marquee__group { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-4); width: 100%; }
  .logo-marquee__group[aria-hidden="true"] { display: none; }
  .logo-marquee__item { margin-inline: 28px; }
  .logo-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
}


/* ============ About: editorial layout ============ */
body[data-page="about"] main > .about-section > .wrap { max-width: 1200px; }

.about-section { padding: clamp(44px, 6vw, 80px) 0; }
.about-section + .about-section > .wrap { position: relative; }
.about-section + .about-section > .wrap::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(44px, 6vw, 80px));
  left: var(--sp-6);
  right: var(--sp-6);
  border-top: 1px solid var(--navy-line);
}
.about-title {
  margin: 0 0 var(--sp-8);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.about-title span {
  display: block;
  margin-top: var(--sp-3);
  color: var(--steel);
  font-size: var(--fs-sm);
  font-variation-settings: "wdth" 105, "wght" 500;
  letter-spacing: .1em;
  line-height: 1.5;
}
.about-text p { max-width: none; margin-bottom: var(--sp-4); line-height: 1.65; }
.about-text p:last-child { margin-bottom: 0; }
.about-intro .about-text { width: 100%; }
.about-intro .about-text p + p { margin-top: 1.65em; }
.about-intro strong { font-variation-settings: "wdth" 100, "wght" 700; }
.about-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.about-row--image-left { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.about-row--image-left .about-row__image { grid-column: 1; grid-row: 1; }
.about-row--image-left .about-row__text { grid-column: 2; grid-row: 1; align-self: center; }
.about-row__text { min-width: 0; }
.about-row__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy);
}
.about-row__image img { width: 100%; height: 100%; object-fit: cover; }
.about-link { color: var(--paper); text-underline-offset: 5px; }

@media (max-width: 900px) {
  .about-row { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--sp-8); }
  .about-row--image-left { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .about-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .about-row--image-left .about-row__image,
  .about-row--image-left .about-row__text { grid-column: auto; grid-row: auto; }
  .about-row__image { max-width: 400px; }
  .about-title { margin-bottom: var(--sp-6); }
}