/* Final polish layer: professional revision loaded after the legacy stylesheet. */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-stretch: normal;
}

h1,
h2,
.banner span,
.banner strong,
.gallery-word {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  letter-spacing: 0;
}

h3,
.brand,
.nav,
.button,
.race-label,
.partner-grid span,
.countdown {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  display: none;
}

.hero {
  height: clamp(420px, 38vw, 560px);
  min-height: 0;
  max-height: none;
  background: #15191a;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  content: "";
  mix-blend-mode: soft-light;
  opacity: 0.22;
  pointer-events: none;
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(16, 21, 22, 0.52), transparent 36%, rgba(16, 21, 22, 0.2)),
    linear-gradient(180deg, rgba(16, 21, 22, 0.16), rgba(16, 21, 22, 0.42));
}

.hero-collage {
  height: 100%;
  min-height: 0;
  max-height: none;
  opacity: 1;
}

.race-badge::before,
.date-tile::before,
.banner::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.2;
}

.hero-copy {
  bottom: 34px;
  left: clamp(28px, 5vw, 72px);
  width: min(410px, calc(100vw - 56px));
}

.hero-copy h1 {
  margin-bottom: 8px;
  font-size: clamp(1.45rem, 2.15vw, 2.35rem);
}

.hero-copy > p:not(.eyebrow) {
  margin-bottom: 16px;
  font-size: clamp(0.86rem, 1vw, 1rem);
  line-height: 1.35;
}

.countdown {
  right: clamp(28px, 5vw, 72px);
  bottom: 34px;
  left: auto;
  grid-template-columns: repeat(3, 82px);
  color: var(--white);
}

.countdown span {
  min-height: 76px;
  padding: 12px;
  background: rgba(16, 21, 22, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
}

.countdown strong {
  font-size: 1.9rem;
}

.course-section {
  padding-top: clamp(78px, 8vw, 126px);
  padding-bottom: clamp(92px, 9vw, 140px);
}

.course-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1160px;
  gap: 24px;
}

.course-card {
  min-height: 560px;
}

.course-card img {
  aspect-ratio: 1 / 0.78;
}

.course-card div {
  min-height: 230px;
  padding: 30px;
}

.course-card span {
  margin-bottom: 14px;
  font-size: 0.76rem;
}

.course-card h3 {
  max-width: 360px;
  margin-bottom: 16px;
  font-size: clamp(1.32rem, 2vw, 1.82rem);
  line-height: 1.04;
}

.course-card p {
  max-width: 360px;
  font-size: 1rem;
  line-height: 1.55;
}

#register {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: 44px;
}

#register > div,
#register > form {
  width: min(1180px, calc(100vw - 64px));
}

.register-section h2 {
  font-size: clamp(2rem, 3.6vw, 4rem);
}

.register-section p {
  max-width: 760px;
  font-size: clamp(1rem, 1.4vw, 1.28rem);
  line-height: 1.45;
}

.interest-form {
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) minmax(210px, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin-top: 34px;
}

input,
select {
  min-height: 58px;
  padding: 16px 18px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(16, 21, 22, 0.16);
  font-size: 1rem;
  font-weight: 700;
}

input::placeholder {
  color: #7d878b;
  opacity: 1;
}

select:invalid {
  color: #7d878b;
}

.interest-form .button {
  min-height: 58px;
  padding-right: 30px;
  padding-left: 30px;
  font-size: 0.86rem;
}

.form-note {
  grid-column: 1 / -1;
  text-align: center;
}

.partners {
  padding-top: 30px;
  padding-bottom: clamp(82px, 9vw, 128px);
}

.partners h2 {
  margin-bottom: 36px;
  font-size: 1rem;
}

.partner-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 44px;
  max-width: 1040px;
}

.partner-grid span {
  display: inline-flex;
  min-height: 0;
  padding: 0;
  color: rgba(16, 21, 22, 0.58);
  border: 0;
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  text-transform: uppercase;
}

.partner-grid .partner-primary {
  color: var(--ink);
  font-size: clamp(1.08rem, 1.7vw, 1.55rem);
}

@media (max-width: 920px) {
  .hero {
    height: auto;
    min-height: 690px;
  }

  .hero-collage {
    height: 460px;
  }

  .hero-copy {
    top: 490px;
    bottom: auto;
    color: var(--ink);
  }

  .hero-copy h1,
  .hero-copy > p:not(.eyebrow) {
    color: var(--ink);
  }

  .countdown {
    top: 594px;
    right: 28px;
    bottom: auto;
    left: 28px;
    grid-template-columns: repeat(3, 1fr);
    color: var(--ink);
  }

  .countdown span {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(16, 21, 22, 0.12);
  }

  .course-grid,
  .race-grid,
  .interest-form {
    grid-template-columns: 1fr;
  }

  .course-card {
    min-height: 0;
  }
}

/* ============================================================
   HUMAN PASS — warmer paper, Fraunces serif, polaroid hero,
   sticker buttons, hand-drawn underline accents.
   This is the final cascade layer; it intentionally wins.
   ============================================================ */
:root {
  --paper-warm: #f6efe2;
  --paper-warmer: #efe5d2;
  --ink-warm: #1a1612;
  --coral: #ee5b48;
  --coral-dark: #c9402f;
  --hand: "Caveat", "Bradley Hand", cursive;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
}

body {
  background: var(--paper-warm) !important;
  color: var(--ink-warm) !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-stretch: normal !important;
  position: relative;
}

/* Subtle paper grain across the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

/* Headlines: warm serif with personality, mixed case (not all caps) */
h1, h2,
.hero-copy h1,
.race-card h3,
.banner span,
.banner strong,
.gallery-word {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  font-style: italic !important;
  font-variation-settings: "SOFT" 100, "opsz" 144 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

h1 { font-weight: 700 !important; }

.race-card h3,
.split-section h2,
.register-section h2,
.faq-section h2 {
  font-style: italic !important;
}

/* Eyebrows / labels stay tight sans, but warmer */
.eyebrow,
.race-label,
.course-card span,
.quick-facts span {
  font-family: var(--hand) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--coral-dark) !important;
}

/* Section backgrounds: warm paper */
.race-section,
.gallery-section,
#register,
.partners,
.faq-section {
  background: var(--paper-warm) !important;
}

.race-section,
.gallery-section {
  background: var(--paper-warmer) !important;
}

/* Brand mark: warm coral */
.brand-mark {
  background: var(--coral) !important;
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
}
.button.primary,
.nav-cta {
  background: var(--coral) !important;
  box-shadow: 3px 3px 0 var(--ink-warm) !important;
  border-radius: 999px !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
.button.primary:hover,
.nav-cta:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 5px 5px 0 var(--ink-warm) !important;
  background: var(--coral-dark) !important;
}

/* HERO — polaroid scatter feel.
   The existing layout uses CSS grid; we keep the grid but rotate
   tiles slightly and add a paper frame so it reads as a collage. */
.hero {
  background: var(--paper-warm) !important;
  height: auto !important;
  min-height: 640px !important;
  padding: 64px 0 96px !important;
  position: relative !important;
}
.hero::before,
.hero::after { display: none !important; }

.hero-collage {
  grid-template-columns: 1fr 0.9fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 18px !important;
  padding: 0 clamp(20px, 5vw, 64px) !important;
  min-height: 540px !important;
  height: auto !important;
  max-height: none !important;
  background: transparent !important;
  opacity: 1 !important;
}

.tile.polaroid {
  background: #fffdf7 !important;
  padding: 12px 12px 36px !important;
  box-shadow: 0 12px 28px rgba(26, 22, 18, 0.18), 0 2px 4px rgba(26, 22, 18, 0.08) !important;
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 2px !important;
}
.tile.polaroid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  flex: 1 1 auto !important;
  filter: saturate(0.92) contrast(1.02) !important;
}
.tile.polaroid figcaption {
  position: absolute !important;
  bottom: 6px !important;
  left: 0;
  right: 0;
  text-align: center !important;
  font-family: var(--hand) !important;
  font-size: 1.15rem !important;
  color: var(--ink-warm) !important;
  pointer-events: none;
}
.tile.polaroid::after { display: none !important; }

.swim-tile.polaroid { transform: rotate(-2.2deg); }
.bike-tile.polaroid { transform: rotate(1.5deg); }
.run-tile.polaroid  { transform: rotate(-1.4deg); }
.river-tile.polaroid { transform: rotate(2.4deg); display: block !important; }

.race-badge,
.date-tile {
  background: var(--ink-warm) !important;
  color: #fffdf7 !important;
  border-radius: 4px !important;
  transform: rotate(1.1deg);
  box-shadow: 0 12px 28px rgba(26, 22, 18, 0.22) !important;
}
.race-badge { transform: rotate(-1.4deg); }
.race-badge::before,
.date-tile::before { display: none !important; }
.race-badge span {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
.race-badge strong,
.date-tile strong,
.date-tile span {
  font-family: var(--hand) !important;
  text-transform: none !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
}
.date-tile span { font-size: 1.15rem !important; opacity: 0.8; }

/* Hero copy — sits below the collage, light cream paper */
.hero-copy {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: 880px !important;
  margin: 32px auto 0 !important;
  padding: 0 clamp(20px, 5vw, 64px) !important;
  color: var(--ink-warm) !important;
  text-align: center !important;
}
.hero-copy h1 {
  color: var(--ink-warm) !important;
  font-size: clamp(2.6rem, 6vw, 5rem) !important;
  line-height: 1 !important;
  max-width: none !important;
  margin-bottom: 14px !important;
}
.hero-copy > p:not(.eyebrow) {
  color: var(--ink-warm) !important;
  opacity: 0.78;
  font-size: 1.05rem !important;
  margin: 0 auto 22px !important;
  max-width: 560px !important;
}

/* Countdown — make it feel hand-stuck rather than UI-y */
.countdown {
  position: relative !important;
  inset: auto !important;
  display: inline-grid !important;
  margin: 0 auto !important;
  grid-template-columns: repeat(3, minmax(72px, 90px)) !important;
  gap: 8px !important;
  color: var(--ink-warm) !important;
}
.countdown span {
  background: #fffdf7 !important;
  color: var(--ink-warm) !important;
  border: 1px solid rgba(26,22,18,0.12) !important;
  border-radius: 4px !important;
  box-shadow: 2px 2px 0 var(--ink-warm) !important;
  backdrop-filter: none !important;
  font-family: var(--hand) !important;
  font-size: 0.95rem !important;
  text-transform: none !important;
}
.countdown strong {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 1.8rem !important;
}

/* Section headings — hand-drawn underline behind h2 */
.section-heading h2,
#register h2,
#included-title,
#faq-title {
  position: relative;
  display: inline-block;
}
.section-heading h2::after,
#register h2::after,
#included-title::after,
#faq-title::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -10px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M2 9 C 50 2, 110 14, 160 7 S 270 4, 298 9' fill='none' stroke='%23ee5b48' stroke-width='3' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Course cards — softer, cream not charcoal */
.course-card {
  background: #fffdf7 !important;
  color: var(--ink-warm) !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 24px rgba(26,22,18,0.10) !important;
}
.course-card span { color: var(--coral-dark) !important; }
.course-card h3 {
  color: var(--ink-warm) !important;
  font-style: italic !important;
}
.course-card p {
  color: rgba(26,22,18,0.68) !important;
}

/* Race cards — warm cream, featured = coral */
.race-card,
.race-card.featured {
  background: #fffdf7 !important;
  color: var(--ink-warm) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(26,22,18,0.08) !important;
  box-shadow: 0 8px 18px rgba(26,22,18,0.06) !important;
}
.race-card.featured {
  background: var(--coral) !important;
  color: #fffdf7 !important;
  border-color: transparent !important;
}
.race-card.featured .race-label,
.race-card.featured h3 { color: #fffdf7 !important; }
.race-card.featured dt { color: rgba(255,253,247,0.7) !important; }
.race-card.featured p:not(.race-label) { color: rgba(255,253,247,0.85) !important; }
.race-card dl div,
.featured dl div { background: transparent !important; }
.race-card h3 {
  font-size: clamp(1.6rem, 2.6vw, 2rem) !important;
}

/* Banner — coral instead of rainbow */
.banner {
  background: var(--coral) !important;
  color: #fffdf7 !important;
}
.banner::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E") !important;
  mix-blend-mode: soft-light !important;
  opacity: 0.25 !important;
}
.banner span,
.banner strong {
  font-family: var(--serif) !important;
  font-style: italic !important;
  text-transform: none !important;
}

/* Gallery word — warm serif behind */
.gallery-word {
  color: rgba(26,22,18,0.06) !important;
  font-style: italic !important;
  text-transform: none !important;
}
.image-strip img {
  border-radius: 3px;
  box-shadow: 0 14px 30px rgba(26,22,18,0.16) !important;
  filter: saturate(0.95) !important;
}
.image-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.image-strip img:nth-child(1) { transform: rotate(-1.5deg); height: clamp(220px, 30vw, 380px) !important; }
.image-strip img:nth-child(2) { transform: rotate(1.2deg);  height: clamp(180px, 26vw, 330px) !important; }
.image-strip img:nth-child(3) { transform: rotate(-0.6deg); height: clamp(200px, 28vw, 350px) !important; }
.image-strip img:nth-child(4) { transform: rotate(2deg);    height: clamp(160px, 24vw, 300px) !important; }
@media (max-width: 920px) {
  .image-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .image-strip img,
  .image-strip img:nth-child(1),
  .image-strip img:nth-child(2),
  .image-strip img:nth-child(3),
  .image-strip img:nth-child(4) { height: 220px !important; }
}

/* Split section photo — paper frame */
.split-section figure {
  background: #fffdf7;
  padding: 14px 14px 28px;
  box-shadow: 0 18px 36px rgba(26,22,18,0.16) !important;
  transform: rotate(-1.2deg);
  border-radius: 2px;
}

/* Form inputs — warm cream */
input, select {
  background: #fffdf7 !important;
  border: 1px solid rgba(26,22,18,0.18) !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
}

/* Partners — mismatched feel, the joke gets bigger */
.partner-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px 32px !important;
  justify-content: center !important;
}
.partner-grid span {
  border: 0 !important;
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: rgba(26,22,18,0.6) !important;
  font-size: 1.15rem !important;
}
.partner-grid .partner-primary {
  color: var(--ink-warm) !important;
  font-weight: 700 !important;
  font-size: 1.55rem !important;
}
.partner-grid span:nth-child(5) { font-family: var(--hand) !important; font-size: 1.6rem !important; transform: rotate(-2deg); }
.partner-grid span:nth-child(6) { font-family: var(--hand) !important; font-size: 1.45rem !important; transform: rotate(1.5deg); }
.partner-grid span:nth-child(7) { transform: rotate(-1deg); }
.partner-grid span:nth-child(8) { font-family: var(--hand) !important; font-size: 1.5rem !important; }
.partner-grid span:nth-child(9) { transform: rotate(2deg); }
.partner-grid span:nth-child(10) { font-family: var(--hand) !important; font-size: 1.6rem !important; transform: rotate(-1.5deg); color: var(--coral-dark) !important; }

/* Header — solid warm paper instead of translucent over hero */
.site-header {
  position: sticky !important;
  background: rgba(246, 239, 226, 0.92) !important;
  border-bottom: 1px solid rgba(26,22,18,0.08) !important;
}
.site-header .brand,
.site-header .brand strong,
.site-header .nav { color: var(--ink-warm) !important; }
.site-header .brand em { color: rgba(26,22,18,0.6) !important; }
.site-header .nav-cta { color: #fffdf7 !important; }

/* Footer stays dark for contrast */
.footer { background: var(--ink-warm) !important; }

/* Quick-facts — bring back, warm */
.quick-facts { display: grid !important; background: var(--paper-warmer) !important; border-color: rgba(26,22,18,0.08) !important; }
.quick-facts article { background: transparent !important; border-color: rgba(26,22,18,0.08) !important; }
.quick-facts strong {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* FAQ section visible & warm */
.faq-section { display: block !important; }
details { background: #fffdf7 !important; border-color: rgba(26,22,18,0.08) !important; border-radius: 4px !important; }
summary { font-family: var(--serif) !important; font-style: italic !important; font-weight: 600 !important; text-transform: none !important; }

@media (max-width: 920px) {
  .hero-collage {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
  }
  .tile.polaroid { min-height: 220px !important; }
  .swim-tile.polaroid,
  .bike-tile.polaroid,
  .run-tile.polaroid,
  .river-tile.polaroid {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .hero-copy { margin-top: 28px !important; }
  .countdown {
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    margin: 18px auto 0 !important;
  }
}

/* ============================================================
   v2 — HERO REWORK + ANIMATED FAQ
   Headline-first hero so a visitor knows what this is in <500ms.
   ============================================================ */

/* Hero: split layout, copy on the left, smaller collage on the right */
.hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(28px, 5vw, 72px) !important;
  min-height: 0 !important;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 96px) !important;
}

.hero-copy {
  position: relative !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 600px !important;
}

.hero-kicker {
  font-family: var(--hand) !important;
  color: var(--coral-dark) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  margin: 0 0 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.hero-copy h1 {
  font-family: var(--serif) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: clamp(2.8rem, 6.5vw, 5.6rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 18px !important;
  color: var(--ink-warm) !important;
  max-width: none !important;
}

.hero-copy h1 em {
  font-style: italic !important;
  color: var(--coral) !important;
  font-weight: 700 !important;
  position: relative;
  display: inline-block;
}

.hero-copy h1 em::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -4px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 1, 80 11, 120 5 S 180 4, 198 8' fill='none' stroke='%23ee5b48' stroke-width='3' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.hero-sub {
  font-size: 1.1rem !important;
  line-height: 1.5 !important;
  color: rgba(26,22,18,0.72) !important;
  margin: 0 0 28px !important;
  max-width: 520px !important;
  font-family: "Inter", sans-serif !important;
  opacity: 1 !important;
}

.hero-copy .button.primary {
  font-size: 0.95rem !important;
  padding: 14px 28px !important;
  min-height: 50px !important;
}

/* Countdown — sits under the CTA, left aligned */
.hero-copy .countdown {
  display: inline-grid !important;
  grid-template-columns: repeat(3, minmax(72px, 86px)) !important;
  gap: 8px !important;
  margin: 28px 0 0 !important;
  position: relative !important;
}

/* Hero collage on the right — tighter, no race-badge/date-tile (we have the headline now) */
.hero-collage {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 14px !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: clamp(380px, 45vw, 540px) !important;
  max-height: 540px !important;
}

/* Hide badges in the collage now that headline carries the message */
.hero-collage .race-badge,
.hero-collage .date-tile {
  display: none !important;
}

.hero-collage .swim-tile,
.hero-collage .bike-tile,
.hero-collage .run-tile,
.hero-collage .river-tile {
  grid-column: auto !important;
  grid-row: auto !important;
}

.hero-collage .swim-tile  { transform: rotate(-2deg) !important; }
.hero-collage .bike-tile  { transform: rotate(1.6deg)  !important; }
.hero-collage .run-tile   { transform: rotate(-1.2deg) !important; }
.hero-collage .river-tile { transform: rotate(2.2deg)  !important; }

@media (max-width: 920px) {
  .hero {
    grid-template-columns: 1fr !important;
    padding-top: 40px !important;
    padding-bottom: 56px !important;
  }
  .hero-copy { max-width: none !important; }
  .hero-copy h1 { font-size: clamp(2.4rem, 11vw, 3.6rem) !important; }
  .hero-collage {
    height: clamp(360px, 70vw, 480px) !important;
  }
  .hero-copy .countdown {
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100%;
  }
}

/* ============================================================
   FAQ — animated, cleaner cards, chevron rotation
   ============================================================ */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

.faq-section {
  display: block !important;
  padding-top: clamp(56px, 7vw, 96px) !important;
  padding-bottom: clamp(72px, 9vw, 120px) !important;
}

.faq-section .section-heading { margin-bottom: 48px !important; }

.faq-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

details {
  background: #fffdf7 !important;
  border: 1px solid rgba(26,22,18,0.08) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden;
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

details:hover {
  border-color: rgba(238, 91, 72, 0.35) !important;
  box-shadow: 0 6px 18px rgba(26,22,18,0.06);
}

details[open] {
  border-color: rgba(238, 91, 72, 0.5) !important;
  box-shadow: 0 10px 28px rgba(26,22,18,0.08);
}

details summary {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 22px 26px !important;
  cursor: pointer !important;
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
  text-transform: none !important;
  color: var(--ink-warm) !important;
  user-select: none;
  transition: color 200ms ease;
}

details summary::-webkit-details-marker,
details summary::marker {
  display: none !important;
  content: "" !important;
}

details[open] summary { color: var(--coral-dark) !important; }

/* Chevron — rotates on open */
.faq-chevron {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper-warmer);
  display: inline-grid;
  place-items: center;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms ease;
}
.faq-chevron::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-warm);
  border-bottom: 2px solid var(--ink-warm);
  transform: rotate(45deg);
  margin-top: -3px;
}
details[open] .faq-chevron {
  transform: rotate(180deg);
  background: var(--coral);
}
details[open] .faq-chevron::before {
  border-color: #fffdf7;
}

/* Animated content reveal.
   Approach: ::details-content (modern) for true height-auto animation,
   plus a wrapper-fade fallback that always works. */
.faq-body {
  padding: 0 26px 22px !important;
  color: rgba(26,22,18,0.72) !important;
}
.faq-body p {
  margin: 0 !important;
  color: inherit !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}

/* Modern: animate the implicit content using ::details-content */
@supports selector(::details-content) {
  details::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size 320ms cubic-bezier(0.4, 0, 0.2, 1),
      content-visibility 320ms allow-discrete,
      opacity 220ms ease;
    interpolate-size: allow-keywords;
  }
  details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* Fallback fade for browsers without ::details-content */
@supports not selector(::details-content) {
  .faq-body {
    animation: faqOpen 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes faqOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   v3 — COMPREHENSIVE MOBILE PASS
   Earlier passes left absolute-positioning rules on hero-copy
   and .countdown that fight the v2 grid layout. This block is
   the final word on mobile — it normalizes positioning, stacks
   everything cleanly, tightens type, and prevents h-overflow.
   ============================================================ */

/* No horizontal scroll, ever, on any device */
html, body { max-width: 100vw; overflow-x: hidden; }

@media (max-width: 920px) {
  /* ---- HERO: kill all legacy absolute positioning ---- */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 28px 20px 48px !important;
    gap: 28px !important;
    background: var(--paper-warm) !important;
  }
  .hero::before, .hero::after { display: none !important; }

  .hero-copy {
    position: static !important;
    inset: auto !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ink-warm) !important;
    text-align: left !important;
    order: 1;
  }
  .hero-copy h1 {
    font-size: clamp(2.4rem, 10vw, 3.4rem) !important;
    line-height: 1 !important;
    margin: 0 0 14px !important;
    color: var(--ink-warm) !important;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .hero-copy h1 em::after { bottom: -2px; height: 9px; }
  .hero-kicker { font-size: 1.15rem !important; margin-bottom: 10px !important; }
  .hero-sub {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: rgba(26,22,18,0.72) !important;
    margin-bottom: 22px !important;
    max-width: none !important;
  }
  .hero-copy .button.primary {
    min-height: 50px !important;
    padding: 14px 26px !important;
    font-size: 0.92rem !important;
  }

  /* Countdown — back into normal flow, full width */
  .hero-copy .countdown,
  .countdown {
    position: static !important;
    inset: auto !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
    max-width: 320px;
    gap: 8px !important;
    margin: 22px 0 0 !important;
    color: var(--ink-warm) !important;
  }
  .countdown span {
    background: #fffdf7 !important;
    color: var(--ink-warm) !important;
    border: 1px solid rgba(26,22,18,0.12) !important;
    box-shadow: 2px 2px 0 var(--ink-warm) !important;
    padding: 10px !important;
    min-height: 0 !important;
    text-align: center;
  }
  .countdown strong { font-size: 1.45rem !important; }

  /* Collage — small, tidy 2x2 below copy, less rotation so nothing overflows */
  .hero-collage {
    order: 2;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px !important;
    width: 100%;
  }
  .hero-collage .tile.polaroid {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 200px !important;
    padding: 8px 8px 28px !important;
  }
  .hero-collage .swim-tile  { transform: rotate(-1.5deg) !important; }
  .hero-collage .bike-tile  { transform: rotate(1.2deg)  !important; }
  .hero-collage .run-tile   { transform: rotate(-0.8deg) !important; }
  .hero-collage .river-tile { transform: rotate(1.4deg)  !important; }
  .hero-collage .race-badge,
  .hero-collage .date-tile { display: none !important; }
  .tile.polaroid figcaption { font-size: 0.95rem !important; bottom: 4px !important; }

  /* ---- HEADER ---- */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    padding: 12px 18px !important;
  }

  /* ---- QUICK FACTS: clean 2x2 grid ---- */
  .quick-facts {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .quick-facts article {
    padding: 18px 20px !important;
    border-right: 1px solid rgba(26,22,18,0.08) !important;
    border-bottom: 1px solid rgba(26,22,18,0.08) !important;
  }
  .quick-facts article:nth-child(2n) { border-right: 0 !important; }
  .quick-facts article:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .quick-facts strong { font-size: 1.2rem !important; }

  /* ---- SECTION SPACING ---- */
  .section { padding: 56px 20px !important; }
  .course-section { padding: 56px 20px !important; }
  #register { padding: 56px 20px 32px !important; }
  .partners { padding: 16px 20px 56px !important; }
  .gallery-section { padding: 48px 20px 64px !important; }

  /* ---- COURSE CARDS ---- */
  .course-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 100% !important;
  }
  .course-card {
    min-height: 0 !important;
  }
  .course-card img {
    aspect-ratio: 16 / 11 !important;
  }
  .course-card div {
    min-height: 0 !important;
    padding: 22px !important;
  }
  .course-card h3 { font-size: 1.4rem !important; }
  .course-card p { font-size: 0.96rem !important; }
  .tall-card { transform: none !important; }

  /* ---- RACE CARDS ---- */
  .race-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 100% !important;
  }
  .race-card, .race-card.featured {
    padding: 24px !important;
    min-height: 0 !important;
  }
  .race-card h3 {
    font-size: 1.8rem !important;
    margin-bottom: 6px !important;
  }
  .race-card dl {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 16px 0 !important;
  }
  .race-card dd { font-size: 1.1rem !important; }

  /* ---- BANNER ---- */
  .banner { padding: 40px 22px !important; }
  .banner div {
    display: block !important;
    text-align: left !important;
  }
  .banner span { font-size: clamp(2rem, 9vw, 2.6rem) !important; line-height: 1; }
  .banner strong {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important;
    margin-top: 12px !important;
    text-align: left !important;
    max-width: none !important;
  }

  /* ---- SPLIT (community) ---- */
  .split-section {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    max-width: 100% !important;
  }
  .split-section figure {
    transform: rotate(-1deg) !important;
    aspect-ratio: 4 / 3 !important;
    padding: 10px 10px 22px !important;
  }
  .split-section h2 {
    font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
    margin-bottom: 14px !important;
  }
  .split-section p { font-size: 1rem !important; }
  .check-list li { font-size: 0.96rem !important; }

  /* ---- GALLERY ---- */
  .image-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .image-strip img,
  .image-strip img:nth-child(1),
  .image-strip img:nth-child(2),
  .image-strip img:nth-child(3),
  .image-strip img:nth-child(4) {
    height: 200px !important;
  }
  .gallery-word { font-size: clamp(4rem, 22vw, 7rem) !important; }

  /* ---- REGISTER FORM ---- */
  .register-section {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  .register-section h2 {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
    margin-bottom: 10px !important;
  }
  .register-section p {
    margin: 0 !important;
    font-size: 1rem !important;
    text-align: left !important;
    max-width: none !important;
  }
  .interest-form {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .interest-form label {
    font-size: 0.78rem !important;
    text-transform: uppercase;
    color: var(--ink-warm) !important;
    font-weight: 700;
  }
  .interest-form input,
  .interest-form select {
    min-height: 52px !important;
    font-size: 1rem !important;
    padding: 14px 16px !important;
  }
  .interest-form .button {
    min-height: 52px !important;
    width: 100%;
    margin-top: 4px;
  }
  .form-note {
    grid-column: 1 !important;
    text-align: left !important;
    font-size: 0.92rem !important;
  }

  /* ---- PARTNERS: smaller text on mobile so they don't blow out ---- */
  .partners h2 { font-size: 0.85rem !important; }
  .partner-grid {
    gap: 14px 22px !important;
    max-width: 100% !important;
  }
  .partner-grid span,
  .partner-grid .partner-primary {
    font-size: 1rem !important;
  }
  .partner-grid .partner-primary { font-size: 1.15rem !important; }
  .partner-grid span:nth-child(5),
  .partner-grid span:nth-child(6),
  .partner-grid span:nth-child(8),
  .partner-grid span:nth-child(10) { font-size: 1.25rem !important; }

  /* ---- FAQ ---- */
  .faq-section { padding: 56px 20px 72px !important; }
  .faq-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  details summary {
    padding: 18px 20px !important;
    font-size: 1.05rem !important;
    gap: 12px !important;
  }
  .faq-body { padding: 0 20px 18px !important; }
  .faq-body p { font-size: 0.95rem !important; }
  .faq-chevron { width: 22px; height: 22px; }

  /* ---- SECTION HEADINGS underline scaling ---- */
  .section-heading h2,
  #register h2,
  #included-title,
  #faq-title {
    font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
  }
  .section-heading h2::after,
  #register h2::after,
  #included-title::after,
  #faq-title::after {
    bottom: -6px;
    height: 9px;
  }

  /* ---- FOOTER ---- */
  .footer {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 36px 20px !important;
    text-align: left !important;
  }
  .footer p {
    justify-self: start !important;
    text-align: left !important;
    max-width: none !important;
  }
  .footer-links {
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  /* ---- BRAND MARK ---- */
  .brand-mark { width: 36px !important; height: 36px !important; }
  .brand strong, .brand em { font-size: 0.78rem !important; }
}

@media (max-width: 480px) {
  .hero-copy h1 { font-size: clamp(2.2rem, 11vw, 3rem) !important; }
  .hero-collage .tile.polaroid { min-height: 165px !important; }
  .hero-sub { font-size: 0.96rem !important; }
  .countdown strong { font-size: 1.3rem !important; }
  .quick-facts strong { font-size: 1.05rem !important; }
  .race-card h3 { font-size: 1.5rem !important; }
  .image-strip img,
  .image-strip img:nth-child(1),
  .image-strip img:nth-child(2),
  .image-strip img:nth-child(3),
  .image-strip img:nth-child(4) {
    height: 170px !important;
  }
  details summary { font-size: 1rem !important; padding: 16px 18px !important; }
  .faq-body { padding: 0 18px 16px !important; }
}

/* ============================================================
   v3 — MOBILE OVERFLOW SAFETY NET
   Some legacy rules and layouts have min-widths that force
   horizontal overflow on small viewports. Clamp everything.
   ============================================================ */
@media (max-width: 920px) {
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }
  main, section, .hero, .hero-copy, .hero-collage,
  .quick-facts, .quick-facts article,
  .course-grid, .course-card,
  .race-grid, .race-card, .race-card.featured,
  .banner, .banner div,
  .split-section, .split-section figure, .split-section > div,
  .image-strip,
  .gallery-section,
  .register-section, .interest-form,
  .partner-grid,
  .faq-grid, details,
  .footer, .footer p, .footer-links {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Kill min-widths from earlier passes that force layouts wider than viewport */
  .hero-copy, .brand, .nav, p, h1, h2, h3, span, dl, dd, dt {
    min-width: 0 !important;
  }
  /* Hero copy should fill its column on mobile */
  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-sub, .hero-copy p, .race-card p, .course-card p,
  .split-section p, .register-section p, .faq-body p {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  /* Hide grain fixed overlay from causing scroll on mobile (it shouldn't but just in case) */
  body::after { contain: paint; }
}