/*
Theme Name: Coach Logan Wells Foundation
Theme URI: https://coachloganwellsfoundation.org
Author: Etch & Anchor
Author URI: https://etchandanchor.com/
Description: Custom theme for the Coach Logan Wells Foundation, a nonprofit giving student athletes the chance to play sports when they might not otherwise have the means to. Dusk-ballpark palette kin to Bay Area Baseball's teal accent, with a script wordmark and a photo-mosaic hero built to hold real camp photos.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: clwf
*/

@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/yellowtail400.woff2') format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/kalam700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlowcond500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlowcond600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlowcond700.woff2') format('woff2');
}

:root {
  /* Near-black dusk, kin to bayareaprobaseball.com's #101010 canvas.
     Blue leads green in all four of these on purpose (navy-teal, not
     turf-green) -- Logan's feedback (2026-07-29): shift the green hue
     more toward teal/navy. */
  --dusk-deep: #0D1B22;
  --dusk-mid: #163542;
  --dusk-glow: #1D4C5E;
  /* Card/surface fill one step lighter than dusk-glow, so panels (tier
     cards, photo frames) read as raised surfaces against the dusk-deep/
     dusk-mid section backgrounds instead of blending flat into them. */
  --surface: #235568;
  --chalk: #EEEFE5;
  --chalk-dim: #DCDECF;
  /* Teal is the family link to BAPB's #3BBFD4 accent, shifted a touch
     greener/muted so the two sites are kin, not a reskin. Logan's own
     feedback (2026-07-28): he likes teal + navy, not the cream/gray
     content-section look this theme started with -- see body/section
     backgrounds below, now navy throughout instead of alternating light. */
  --teal: #3FB6C0;
  --teal-bright: #63D2DB;
  /* Clay stays CLWF's own -- the human/kids warmth BAPB doesn't need.
     Logan said he doesn't mind green but prefers teal, didn't flag clay
     either way, so it stays as a minor secondary accent only. */
  --clay: #C2703A;
  --clay-bright: #D68A50;
  /* Bright green, used only for the Donate nav link so it stands out
     from the teal Golf Tournament link (Shawn's request, 2026-08-03). */
  --donate-green: #4ADE80;
  --line: rgba(238, 239, 229, 0.16);
  --shadow: 0 24px 60px rgba(5, 12, 11, 0.45);
  --script: 'Yellowtail', 'Segoe Script', cursive;
  --label: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: -apple-system, 'Segoe UI', ui-sans-serif, Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1180px;
}

/* This site commits deliberately to one atmosphere, navy dusk with a
   teal accent, throughout, not just the hero, so it doesn't invert for
   a viewer's light/dark toggle. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--dusk-deep);
  color: var(--chalk);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

a { color: inherit; }

/* Forces a line break only at mobile widths (e.g. between two short
   sentences in a heading), invisible otherwise so desktop keeps its
   natural wrap. Reusable anywhere a heading needs a deliberate mobile
   break instead of letting the browser wrap wherever it wants. */
.mobile-line-break { display: none; }
@media (max-width: 640px) {
  .mobile-line-break { display: block; }
}

.eyebrow {
  font-family: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
}

/* ================= SITE HEADER (nav) =================
   Default: a normal static dark bar (inner pages, no hero behind it).
   .site-header--floating (front page only): absolutely positioned,
   transparent, sitting on top of the hero mosaic/scrim instead. */
.site-header {
  position: relative;
  z-index: 10;
  padding: 22px 0;
  background: var(--dusk-deep);
}
.site-header--floating {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  padding: 26px 0;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo {
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--chalk);
  text-decoration: none;
  line-height: 1;
}
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(238,239,229,0.4);
  color: var(--chalk);
  border-radius: 3px;
  padding: 8px 12px;
  font-size: 20px;
  cursor: pointer;
}
.primary-nav ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  font-family: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 13.5px;
  color: var(--chalk);
  text-decoration: none;
  opacity: 0.85;
}
.primary-nav a:hover { opacity: 1; color: var(--teal); }
.primary-nav a[href*="golf-tournament"] { color: var(--teal); opacity: 1; }
.primary-nav a[href*="golf-tournament"]:hover { color: var(--clay-bright); }
.primary-nav a[href*="/donate"] { color: var(--donate-green); opacity: 1; animation: donate-flash 2s ease-in-out infinite; }
.primary-nav a[href*="/donate"]:hover { color: var(--teal-bright); animation: none; }
@keyframes donate-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav a[href*="/donate"] { animation: none; }
}
@media (max-width: 700px) {
  .menu-toggle { display: inline-block; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--dusk-deep);
    padding: 16px 24px;
    max-height: calc(100svh - 90px);
    overflow-y: auto;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 22px; }
}

/* ================= NAV DROPDOWN (Get Involved) =================
   Desktop: CSS-only hover/focus-within reveal, so it works via mouse
   AND keyboard tabbing with no JS. Mobile: no separate toggle -- the
   sub-menu just renders inline, indented, under its parent, since the
   whole nav is already a single scrollable vertical list there and a
   second interactive layer would be one more thing to get stuck on. */
.menu-item-has-children { position: relative; }
.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 701px) {
  .sub-menu {
    position: absolute;
    top: 100%;
    /* Right-anchored, not centered under the parent link (2026-08-11
       fix -- centering via left:50%/translateX(-50%) pushed the
       dropdown ~7px past the viewport's right edge at 1280px, since
       "Get Involved" sits near the right end of the nav bar and the
       centered 190px-wide panel had nowhere to go but off-screen.
       Anchoring to the parent's right edge means it only ever grows
       leftward, which is always in-bounds since the parent itself is
       always inside the nav.) */
    right: 0;
    min-width: 190px;
    margin-top: 14px;
    padding: 10px 0;
    background: var(--dusk-mid);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    /* opacity + pointer-events, not visibility: visibility is a discrete
       (non-interpolable) property, and transitioning it relies on
       step-timing behavior that's inconsistently implemented across
       browser engines -- a real source of "the dropdown just doesn't
       show" bugs. Opacity animates cleanly everywhere; pointer-events
       does the "hidden means unclickable" job visibility was doing. */
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;
  }
  /* Small invisible bridge so the mouse can travel from the parent link
     down into the dropdown without the gap closing it first. */
  .menu-item-has-children::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 14px;
  }
  .menu-item-has-children:hover .sub-menu,
  .menu-item-has-children:focus-within .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .sub-menu li { display: block; }
  .sub-menu a {
    display: block;
    padding: 9px 20px;
    white-space: nowrap;
    opacity: 0.85 !important;
    animation: none !important;
  }
  .sub-menu a:hover, .sub-menu a:focus { opacity: 1 !important; background: rgba(63, 182, 192, 0.1); }
}
@media (max-width: 700px) {
  .sub-menu {
    margin: 14px 0 0 18px;
    padding-left: 14px;
    border-left: 2px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .sub-menu a { opacity: 0.75 !important; animation: none !important; font-size: 12.5px; }
}

/* The trailing "Give a Kid Their Shot" nav item: a real button, not a
   text link like the rest of the nav -- overrides the .primary-nav
   a[href*="/donate"] flash animation that would otherwise also apply
   here (the Get Involved dropdown's own Donate item keeps that flash;
   this one is already visually loud enough as a filled button). */
.primary-nav a.nav-cta {
  display: inline-block;
  background: var(--teal);
  color: var(--dusk-deep) !important;
  padding: 9px 18px;
  border-radius: 4px;
  opacity: 1 !important;
  animation: none !important;
}
.primary-nav a.nav-cta:hover { background: var(--teal-bright); color: var(--dusk-deep) !important; }
@media (max-width: 700px) {
  .primary-nav a.nav-cta { display: inline-block; text-align: center; margin-top: 4px; }
}

/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: 100svh;
  color: var(--chalk);
  overflow: hidden;
  background: var(--dusk-deep);
}

/* Photo mosaic -- a proof-sheet of the shots this hero is built to hold.
   Each tile is a real slot (see mosaic-label) so the placeholder reads as
   "photos incoming," not as a broken/unfinished page. Swap in <img src>
   per tile once real camp photos are in hand; object-fit:cover holds the
   crop, nothing else about the layout needs to change. */
.hero-mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  background: var(--dusk-deep);
}
.mosaic-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 7px);
  background-blend-mode: overlay;
}
.mosaic-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Unify tone across photos pulled from different sources -- desaturate
     and darken slightly so the color-grade tint below reads consistently
     rather than fighting each photo's own original lighting. */
  filter: saturate(0.8) brightness(0.82) contrast(1.05);
  transition: opacity 0.4s ease;
}
.mosaic-tile .mosaic-label { transition: opacity 0.4s ease; }
.mosaic-tile.is-fading img,
.mosaic-tile.is-fading .mosaic-label {
  opacity: 0;
}
.mosaic-tint {
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  pointer-events: none;
}
.mosaic-tile::before,
.mosaic-tile::after {
  /* viewfinder corner marks -- explicit z-index keeps these above the
     photo + tint layers, which paint at the default stacking level */
  content: "";
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(238, 239, 229, 0.4);
  opacity: 0.7;
}
.mosaic-tile::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.mosaic-tile::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.mosaic-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(238, 239, 229, 0.65);
}
/* Grid placement + a fallback background-color (shows briefly while the
   photo loads, and if a photo is ever removed without replacement). Each
   tile's actual color-grade lives on its .mosaic-tint child (see above),
   blended over the photo with mix-blend-mode so tone stays consistent
   across photos pulled from different sources. */
.mosaic-a { grid-column: 1 / 3; grid-row: 1 / 3; background-color: var(--dusk-mid); }
.mosaic-b { grid-column: 3 / 5; grid-row: 1 / 2; background-color: var(--dusk-glow); }
.mosaic-c { grid-column: 3 / 4; grid-row: 2 / 4; background-color: var(--clay); }
.mosaic-d { grid-column: 4 / 5; grid-row: 2 / 3; background-color: var(--dusk-mid); }
.mosaic-e { grid-column: 4 / 5; grid-row: 3 / 4; background-color: var(--clay-bright); }
.mosaic-f { grid-column: 1 / 3; grid-row: 3 / 4; background-color: var(--dusk-glow); }

.mosaic-a .mosaic-tint { background: linear-gradient(135deg, var(--dusk-mid), var(--dusk-glow)); }
.mosaic-b .mosaic-tint { background: linear-gradient(155deg, var(--dusk-glow), #12303A); }
.mosaic-c .mosaic-tint { background: linear-gradient(200deg, var(--clay) -20%, var(--dusk-deep) 90%); }
.mosaic-d .mosaic-tint { background: linear-gradient(120deg, #1F4F5E, var(--dusk-deep)); }
.mosaic-e .mosaic-tint { background: linear-gradient(150deg, var(--clay-bright) -30%, var(--dusk-deep) 85%); }
.mosaic-f .mosaic-tint { background: linear-gradient(170deg, var(--dusk-mid), var(--dusk-deep)); }

@media (max-width: 700px) {
  .hero-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .mosaic-a { grid-column: 1 / 3; grid-row: 1 / 2; }
  .mosaic-b { grid-column: 1 / 2; grid-row: 2 / 3; }
  .mosaic-c { grid-column: 2 / 3; grid-row: 2 / 4; }
  .mosaic-d { display: none; }
  .mosaic-e { display: none; }
  .mosaic-f { grid-column: 1 / 2; grid-row: 3 / 4; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(14, 27, 25, 0.35), rgba(14, 27, 25, 0.72) 72%),
    linear-gradient(180deg, rgba(14, 27, 25, 0.55) 0%, rgba(14, 27, 25, 0.4) 30%, rgba(14, 27, 25, 0.55) 65%, var(--dusk-deep) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 140px 24px 100px;
}
.hero-eyebrow {
  color: var(--teal);
  margin-bottom: 22px;
  opacity: 0.92;
}
.badge-501c3 {
  display: inline-block;
  font-family: var(--label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk);
  background: rgba(63, 182, 192, 0.12);
  border: 1px solid rgba(63, 182, 192, 0.4);
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: 22px;
}
.hero-name {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 8.2rem);
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
  color: var(--chalk);
  text-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.hero-name .amp { color: var(--teal); }

/* Small script signature line, sits between the 501c3 badge and the
   big headline. Added 2026-08-10 when the hero's main H1 stopped being
   the org name (moved to the mission statement below) and started
   being "Every Kid Deserves a Shot." -- the header logo already
   carries the org name at nav scale, so this is just a brand touch,
   not the primary identifier. */
.hero-signature {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--teal-bright);
  margin: 0 0 6px;
}
/* Mission-statement variant of .hero-name: bold condensed caps instead
   of script. A rallying cry reads stronger in the label font than in
   cursive -- script stays reserved for .hero-signature and the CTA
   band headlines where a softer touch fits. */
.hero-name--headline {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2.6rem, 7.5vw, 5.4rem);
  text-shadow: none;
}

/* Interior-page hero variant (e.g. Golf Tournament) -- same
   mosaic/scrim mechanism as the homepage hero, and now the same big
   Yellowtail script treatment as the foundation's own name. */
.hero-content--plain .tournament-eyebrow { color: var(--teal); }
/* Condensed bold, not script (2026-08-11 final pass): only user of
   .hero-content--plain is the Golf Tournament page, and "Coach Logan
   Wells Foundation Golf Tournament" in the wide cursive script this
   rule used to set wrapped to 3 lines at ~400px tall -- visually heavy
   for a page title. Same reasoning as .hero-name--headline: condensed
   sans is far more space-efficient than script at this word count. */
.hero-content--plain h1 {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  line-height: 1.1;
  color: var(--chalk);
  text-shadow: none;
  text-wrap: balance;
  margin: 14px 0 20px;
}

.stitch {
  width: min(420px, 70vw);
  height: 22px;
  margin: 18px auto 26px;
  opacity: 0.85;
}
.stitch path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
}

.hero-mission {
  max-width: 640px;
  font-family: 'Kalam', 'Segoe Script', cursive;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.55;
  color: var(--chalk-dim);
  text-wrap: balance;
  margin: 0 0 34px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Phones: keep the hero's pair on one line instead of stacking. Scoped
   to .hero deliberately -- the CTA band reuses .hero-actions with four
   buttons, and forcing those onto one row crushes them to ~86px. */
@media (max-width: 560px) {
  .hero .hero-actions {
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
  }
  .hero .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14px;
    white-space: nowrap;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: 3px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.btn-primary {
  background: var(--teal);
  color: var(--dusk-deep);
  box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--teal-bright); }
.btn-ghost {
  border-color: rgba(238,239,229,0.4);
  color: var(--chalk);
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

/* Reduced size/opacity 2026-08-11 (stakeholder feedback): #IAMchange
   stays -- established brand element, on Foundation merchandise -- but
   should read as supporting identity below the CTAs, not compete with
   "Give a Kid Their Shot" for attention. */
.hero-tag {
  margin-top: 40px;
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.6;
}

/* ================= SPONSOR BAR ================= */
.sponsor-bar {
  background: var(--dusk-deep);
  border-bottom: 1px solid var(--line);
}
.sponsor-bar-section-heading {
  text-align: center;
  color: var(--teal);
  margin: 20px 0 0;
}
.sponsor-row { padding: 24px 0; }
.sponsor-row + .sponsor-row { border-top: 1px solid var(--line); }
.sponsor-bar-heading {
  display: block;
  text-align: center;
  color: var(--chalk-dim);
  margin-bottom: 18px;
}
/* Title tier (Leslie Wells Realty, Bay Area Baseball, SHOW Bats) gets
   top billing: larger logos than the regular sponsor tier (TSI). */
.sponsor-row-title .sponsor-item img { max-height: 84px; }
.sponsor-row-title .sponsor-badge-fallback { font-size: 22px; padding: 13px 22px; }
.sponsor-logo-invert { filter: invert(1); }
.sponsor-track {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sponsor-track-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  padding: 0 32px;
}
.sponsor-track.is-looping .sponsor-track-inner {
  animation: sponsor-scroll 22s linear infinite;
}
.sponsor-track:not(.is-looping) .sponsor-track-inner {
  justify-content: center;
  width: 100%;
}
.sponsor-track:hover .sponsor-track-inner { animation-play-state: paused; }
@keyframes sponsor-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.sponsor-item {
  flex: none;
  display: flex;
  align-items: center;
}
.sponsor-item img {
  max-height: 64px;
  width: auto;
}
.sponsor-badge-fallback {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  color: var(--sponsor-color, var(--teal));
  border: 2px solid var(--sponsor-color, var(--teal));
  border-radius: 4px;
  padding: 10px 18px;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .sponsor-track.is-looping .sponsor-track-inner {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}

/* ================= MISSION / QUOTE ================= */
.section { padding: 100px 0; }
.section-tight { padding: 76px 0; }
.mission {
  text-align: center;
}
.mission .eyebrow { color: var(--clay); display: block; margin-bottom: 18px; }
.mission blockquote {
  margin: 0 auto;
  max-width: 780px;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.32;
  font-weight: 400;
  text-wrap: balance;
  color: var(--chalk);
}
.mission cite {
  display: block;
  margin-top: 22px;
  font-style: normal;
  font-family: var(--label);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}
.mission-legal {
  margin: 28px auto 0;
  max-width: 620px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--chalk-dim);
}

/* ================= TRACK RECORD (trust strip) ================= */
.track-record {
  padding: 56px 0;
  text-align: center;
  background: var(--dusk-mid);
  border-bottom: 1px solid var(--line);
}
.track-record-eyebrow { color: var(--teal); }

/* Standalone umbrella label (Impact page's "Real Stories" heading over
   the Nelson + testimonials sections) -- no vertical padding of its
   own on purpose, it sits in the gap the adjacent .section-tight
   sections already provide, so it doesn't stack extra whitespace on
   top of theirs. */
.impact-section-label { text-align: center; }
.impact-section-label .eyebrow { color: var(--teal); }
.track-record-heading {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 10px 0 20px;
  color: var(--chalk);
}
.track-record-intro {
  max-width: 640px;
  margin: 0 auto 40px;
  color: var(--chalk-dim);
  line-height: 1.65;
  font-size: 15.5px;
}
.track-record-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
}
.track-record-stat { display: flex; flex-direction: column; gap: 8px; }
.track-record-number {
  font-family: var(--label);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--teal);
  line-height: 1;
}
.track-record-label {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--chalk-dim);
}
@media (max-width: 700px) {
  .track-record-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
}

/* ================= ABOUT =================
   (.about-section / .about / .about-photo / .facets removed 2026-08-11
   refinement pass -- the homepage Coach Wells section they styled was
   cut per stakeholder feedback, and nothing else in the theme used
   them. .course-feature-grid below is the actively-used photo+text
   pattern; reuse that for any future photo+text page section.) */
.course-feature-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) { .course-feature-grid { grid-template-columns: 1fr; gap: 28px; } }
@media (min-width: 801px) {
  .course-feature-grid-reverse { grid-template-columns: 1.1fr 0.9fr; }
  .course-feature-grid-reverse .course-feature-photo { order: 2; }
  .course-feature-grid-reverse .course-feature-copy { order: 1; }
}
.course-feature-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(63, 182, 192, 0.25);
  box-shadow: var(--shadow);
}
.course-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* nelson-batting.jpg is a tall 900x1200 portrait crop being fit into
   this box's 4:3 landscape aspect-ratio -- center positioning (the
   default) cropped off the top of his head to fill the width. Biasing
   toward the top keeps his face in frame at the cost of cropping more
   off the bottom (legs/cleats), the right tradeoff for a "meet the
   person" story photo. */
.course-feature-photo--top img { object-position: top; }
.course-feature-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dusk-deep);
}
.course-feature-photo span {
  font-family: var(--label);
  color: var(--chalk-dim);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.course-feature-copy h2 {
  font-family: var(--label);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 6px 0 16px;
  color: var(--chalk);
}
.course-feature-copy p {
  color: var(--chalk-dim);
  line-height: 1.6;
  margin: 0 0 16px;
}
.about-link {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  border-bottom: 2px solid var(--teal);
  padding-bottom: 3px;
  text-decoration: none;
}

/* ================= HOMEPAGE: MISSION INTRO =================
   Short intro right after the hero; the full mission story lives on
   /mission/. Reuses .page-content's paragraph color/line-height via a
   plain <p>, just centred and width-capped for a homepage band. */
.home-mission {
  text-align: center;
  background: var(--dusk-mid);
}
.home-mission h2 {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 10px 0 20px;
  color: var(--chalk);
}
.home-mission p {
  max-width: 700px;
  margin: 0 auto 24px;
  color: var(--chalk-dim);
  line-height: 1.7;
  font-size: 16px;
}

/* .solution-card is reused by the "Need Help / Bigger Impact" mini
   cards further down (see MINI CTA CARDS) -- its h3/p styling stays
   here since both call sites need it. */
.solution-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 24px;
}
.solution-card h3 {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--chalk);
}
.solution-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--chalk-dim);
  margin: 0 0 14px;
}
/* "How We Help" 4-up grid on /mission/ -- same .solution-card chrome,
   4 columns down to 1 on mobile. */
.mission-help-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}
@media (max-width: 900px) { .mission-help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .mission-help-grid { grid-template-columns: 1fr; } }

/* ================= HOMEPAGE: NELSON ================= */
.nelson-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.nelson-cta-row .about-link { margin-top: 0; }

/* ================= HOMEPAGE: WHAT YOUR GIFT CAN DO =================
   Redesigned 2026-08-11 (final pass) from 4 individual bordered pricing
   cards (each with its own "Give $X" button) to a single row of
   selectable "pills" plus one primary CTA below -- the amount itself is
   now the clickable control instead of pricing-table-style repetition.
   Each pill is still a plain <a> to a prefilled /donate/ URL (see
   front-page.php); nothing about the underlying Jotform prefill
   mechanism changed, only the visual treatment. */
.amount-selector {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}
.amount-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--chalk);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.amount-pill:hover, .amount-pill:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
}
/* The suggested/default amount -- filled rather than outlined, so it
   reads as "the one most people pick" without a separate label saying
   so. Not a real selection state (nothing is selected until clicked),
   just a visual nudge. */
.amount-pill-featured {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--dusk-deep);
}
.amount-pill-featured:hover, .amount-pill-featured:focus-visible {
  background: var(--teal-bright);
  border-color: var(--teal-bright);
  color: var(--dusk-deep);
}
.gift-section-cta { margin-top: 36px; }

/* ================= HOMEPAGE: GOLF TEASER CTA ROW ================= */
.golf-teaser-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* Centered "read more" link under a grid -- used on /impact/ below the
   testimonials grid. */
.social-proof-more { text-align: center; margin-top: 40px; }
.social-proof-more .about-link { margin-top: 0; }

/* ================= HOMEPAGE: FINAL CTA ================= */
.btn-large {
  font-size: 19px;
  padding: 18px 40px;
}
.final-cta-lead {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--chalk-dim);
  margin: 0 0 34px;
}

/* ================= GOLF TOURNAMENT TEASER ================= */
.golf-teaser {
  background: var(--dusk-mid);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.golf-teaser .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 800px) { .golf-teaser .wrap { grid-template-columns: 1fr; gap: 32px; } }
/* Same reasoning as .tournament-banner: no forced square, so the flyer
   is never cropped to fit. The min-height keeps the "artwork missing"
   fallback from collapsing when the file isn't present. */
.golf-teaser-art {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(63, 182, 192, 0.25);
  box-shadow: var(--shadow);
  background:
    linear-gradient(160deg, var(--surface), var(--dusk-deep)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 6px);
  display: flex;
  align-items: flex-end;
  min-height: 120px;
}
.golf-teaser-art img { width: 100%; height: auto; display: block; }
.golf-teaser-art:has(span) { padding: 20px; aspect-ratio: 1 / 1; }
.golf-teaser-art span {
  font-family: var(--label);
  color: var(--chalk-dim);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.golf-teaser-date {
  color: var(--teal);
  display: block;
  margin-bottom: 14px;
}
.golf-teaser h2 {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 14px;
}
.golf-teaser p { line-height: 1.7; color: var(--chalk-dim); margin: 0 0 26px; font-size: 16px; max-width: 46ch; }

/* ================= CTA BAND ================= */
.cta-band {
  background: linear-gradient(180deg, var(--dusk-deep), var(--dusk-mid));
  color: var(--chalk);
  text-align: center;
}
.cta-band h2 {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 0 14px;
}
.cta-band p {
  color: var(--chalk-dim);
  max-width: 560px;
  margin: 0 auto 34px;
  line-height: 1.6;
}
.cta-band p.cta-disclosure {
  margin: 40px auto 0;
  font-size: 12.5px;
  color: var(--chalk-dim);
  opacity: 0.65;
}

/* ================= FOOTER ================= */
.site-footer {
  background: var(--dusk-deep);
  color: var(--chalk-dim);
  padding: 56px 0 34px;
}

/* ================= MOBILE DONATE BAR =================
   Persistent, always-visible on phones (see footer.php for markup and
   why it's pure CSS with no JS). Fixed to the viewport bottom; the
   matching body padding-bottom is what stops it from ever covering the
   real footer or page content, so nothing needs scroll-tracking JS to
   "avoid" it. env(safe-area-inset-bottom) keeps it clear of the home
   indicator on notched iPhones. */
.mobile-donate-bar { display: none; }
@media (max-width: 700px) {
  body { padding-bottom: 78px; }
  .mobile-donate-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--dusk-deep);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(5, 12, 11, 0.4);
  }
  .mobile-donate-bar-text {
    font-family: var(--label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 14px;
    color: var(--chalk);
  }
  .mobile-donate-bar .btn {
    padding: 10px 22px;
    font-size: 14px;
    flex-shrink: 0;
  }
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(238,239,229,0.14);
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  /* Stay in columns on phones rather than collapsing to one long stack.
     The three link blocks pair up two-across; the mission block spans
     the full width above them, since its paragraph is unreadable in a
     ~160px column. */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
    text-align: left;
  }
  .footer-col-mission {
    grid-column: 1 / -1;
    text-align: center;
  }
  .footer-col .footer-links { align-items: flex-start; }
  .footer-col .footer-links-icons { justify-content: flex-start; }
  .footer-sig { font-size: 1.9rem; }
  /* Four blocks into two columns leaves Connect orphaned on its own row
     with dead space beside it. It's only an icon row, so let it run full
     width and centre as a closing element. */
  .footer-col:last-child {
    grid-column: 1 / -1;
    text-align: center;
  }
  .footer-col:last-child .footer-links-icons { justify-content: center; }
}
.footer-sig {
  font-family: var(--script);
  font-size: 2.1rem;
  color: var(--chalk);
  margin-bottom: 12px;
}
.footer-mission-text {
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
  margin: 0;
}
.footer-col-heading {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--chalk);
  margin: 0 0 16px;
}
.footer-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13.5px;
}
.footer-col .footer-links {
  flex-direction: column;
  gap: 10px;
}
.footer-links a { text-decoration: none; opacity: 0.85; }
.footer-links a:hover { opacity: 1; color: var(--teal); }
/* Two-class specificity, so this beats `.footer-col .footer-links`'s
   column direction -- otherwise the social icons stack vertically and
   centre themselves against the left-aligned text around them. */
.footer-col .footer-links-icons { align-items: center; gap: 18px; flex-direction: row; }
.footer-links-icons a { display: flex; }
.footer-icon { color: var(--chalk); }
.footer-links-icons a:hover .footer-icon { color: var(--teal); }
.footer-donate-btn {
  display: inline-flex;
  padding: 10px 22px;
  font-size: 13px;
  margin-bottom: 16px;
}
.footer-phone {
  display: block;
  font-family: var(--label);
  font-weight: 700;
  font-size: 16px;
  color: var(--chalk);
  text-decoration: none;
  margin-bottom: 10px;
}
.footer-phone:hover { color: var(--teal); }
.footer-tax-id {
  font-size: 12.5px;
  opacity: 0.7;
  margin: 0;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  font-size: 12.5px;
  opacity: 0.6;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ================= GOLF TOURNAMENT PAGE ================= */
.page-hero {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(63, 182, 192, 0.14), transparent 60%),
    linear-gradient(180deg, var(--dusk-deep) 0%, var(--dusk-mid) 100%);
  color: var(--chalk);
  padding: 150px 0 60px;
  text-align: center;
}
.page-hero .eyebrow { color: var(--teal); }
/* Breadcrumbs: small, muted label line ABOVE the eyebrow/H1, on its
   own line. display:block (not inline-flex -- that was a bug: an
   inline-level nav never forces the next sibling, the eyebrow span,
   onto a new line, so the two rendered side by side as one run of
   text). The link/separator/current-page inside stay plain inline
   elements rather than flex items, so they naturally follow whatever
   text-align its parent hero already uses -- centered on the shared
   .page-hero-mosaic band, left-aligned on Donate/Golf Tournament's
   .hero-content -- without needing separate alignment rules per hero
   type. */
.breadcrumbs {
  display: block;
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--chalk-dim);
  opacity: 0.65;
  margin: 0 0 10px;
}
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--teal); text-decoration: underline; }
.breadcrumb-sep { opacity: 0.6; margin: 0 6px; }
.page-hero h1 {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  margin: 14px 0 20px;
}
.page-hero-sub {
  color: var(--chalk-dim);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: 17px;
}
/* Tournament Registration's hero-sub is a longer sentence (measures
   656px at this font-size) than the shared 620px cap allows, so
   "place." was wrapping to its own second line -- widened for this
   page only, desktop only (mobile already wraps the way Shawn wants,
   untouched here), rather than loosening the shared .page-hero-sub
   rule every other page-hero-mosaic page also uses. */
@media (min-width: 641px) {
  .tournament-registration-sub { max-width: 680px; }
}

/* Mosaic band variant of .page-hero (see clwf_page_hero_mosaic()).
   Same tile treatment as the homepage hero at band height, so child
   pages share the homepage's visual language without inheriting its
   100svh height -- content stays near the top of the page. */
/* Contact form posts to Jotform but is styled entirely by us (see
   page-contact.php). Inherits .review-form for the field styling; the
   hidden iframe below is the post target, never shown. */
#clwf-contact-target {
  display: none;
}
.contact-form button[disabled] {
  opacity: 0.6;
  cursor: default;
}
.contact-success {
  margin-bottom: 20px;
}
.page-hero--mosaic {
  position: relative;
  overflow: hidden;
  background: var(--dusk-deep);
}
.page-hero--mosaic .wrap {
  position: relative;
  z-index: 2;
}
.page-hero-mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1.3fr 1fr;
  gap: 3px;
  background: var(--dusk-deep);
}
/* Two-class specificity beats the homepage's .mosaic-a..f placement
   rules, so the band lays out as a single row without !important. */
.page-hero-mosaic .mosaic-tile {
  grid-column: auto;
  grid-row: auto;
}
/* The corner viewfinder marks read as clutter at band scale. */
.page-hero-mosaic .mosaic-tile::before,
.page-hero-mosaic .mosaic-tile::after {
  display: none;
}
.page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Tuned to keep the h1 legible while still letting the photos read --
     the tiles already carry brightness(0.82) from .mosaic-tile img, so
     a heavy scrim on top of that flattens them to near-black. */
  background:
    radial-gradient(ellipse 70% 65% at 50% 52%, rgba(14, 27, 25, 0.34), rgba(14, 27, 25, 0.62) 78%),
    linear-gradient(180deg, rgba(14, 27, 25, 0.52) 0%, rgba(14, 27, 25, 0.3) 45%, var(--dusk-deep) 100%);
}
@media (max-width: 700px) {
  .page-hero-mosaic { grid-template-columns: 1.3fr 1fr 1.1fr; }
  .page-hero-mosaic .mosaic-d,
  .page-hero-mosaic .mosaic-e,
  .page-hero-mosaic .mosaic-f { display: none; }
}

/* Generic long-form page content (About, and the page.php fallback
   used for any page without its own dedicated template). */
.page-content { max-width: 760px; }
.page-content h1 {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 24px;
}
.page-content h2 {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin: 0 0 16px;
}
.page-content .section-heading-spaced { margin-top: 48px; }
.page-content p { line-height: 1.7; color: var(--chalk-dim); margin: 0 0 16px; font-size: 16px; }
.page-content .page-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  color: var(--chalk);
  border-left: 3px solid var(--teal);
  padding-left: 20px;
  margin: 0 0 34px;
}
.page-content strong { color: var(--chalk); }

/* Logan's personal/founder-associated logo mark (About page only) --
   deliberately secondary to the Foundation's own institutional
   identity in the header/nav. Floated within the "More Than a Coach"
   paragraph so it reads as a supporting detail inside Logan's story,
   not a competing hero banner. The source artwork has a solid black
   background baked in (not true transparency), so it's framed in the
   same bordered-card treatment already used for real photos elsewhere
   (.course-feature-photo: rounded corners, subtle teal border,
   shadow) -- that reads as an intentional dark card rather than a
   stray black rectangle, reusing the site's existing visual language
   instead of inventing a new style just for this. */
.logan-logo-badge {
  float: right;
  width: 240px;
  max-width: 42%;
  margin: 4px 0 20px 28px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(63, 182, 192, 0.25);
  box-shadow: var(--shadow);
}
.logan-logo-badge img { display: block; width: 100%; height: auto; }
@media (max-width: 800px) {
  .logan-logo-badge { width: 190px; }
}
@media (max-width: 640px) {
  .logan-logo-badge {
    float: none;
    width: 160px;
    max-width: 60%;
    margin: 0 auto 20px;
  }
}
.event-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.golf-hero-cta-row { margin-top: 34px; }
.event-meta-chip {
  font-family: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  color: var(--chalk);
  border: 1px solid rgba(238,239,229,0.35);
  border-radius: 3px;
  padding: 9px 16px;
}
.event-meta-chip strong { color: var(--teal); }
.hero-callout {
  margin: 26px 0 0;
  font-family: var(--script);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--chalk);
}

/* No forced aspect-ratio: the flyer sets its own height, so a portrait
   or oddly-sized poster shows in full instead of being cropped to a
   square by object-fit: cover. */
.tournament-banner {
  margin: -30px auto 0;
  max-width: 480px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(63, 182, 192, 0.25);
  box-shadow: var(--shadow);
  background:
    linear-gradient(160deg, var(--surface), var(--dusk-deep)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tournament-banner img { width: 100%; height: auto; display: block; }
.tournament-banner span {
  font-family: var(--label);
  color: var(--chalk-dim);
  font-size: 14px;
  letter-spacing: 0.05em;
}

.tier-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}
.tier-intro p { color: var(--chalk-dim); line-height: 1.7; font-size: 16px; }
.tier-intro h2 {
  font-family: var(--label);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 6px 0 16px;
  color: var(--chalk);
}
/* One line on desktop for the short sponsorship-intro sentence only
   (per Logan's request) -- the guest-section intro is a longer
   sentence and just uses the default wrapping .tier-intro above. */
@media (min-width: 640px) {
  .tier-intro-nowrap { max-width: none; }
  .tier-intro-nowrap p { white-space: nowrap; }
}
@media (max-width: 639px) {
  .tier-intro-nowrap { max-width: 480px; }
}

.guest-section {
  background: var(--dusk-mid);
  position: relative;
  overflow: hidden;
}
.guest-mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  background: var(--dusk-deep);
  opacity: 0.5;
}
.guest-section-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--dusk-mid) 0%, rgba(22, 53, 66, 0.85) 40%, var(--dusk-mid) 100%);
}
.guest-section-content { position: relative; z-index: 1; }
.guest-section .tier-intro { text-align: left; margin-left: 0; }
@media (min-width: 801px) {
  .guest-section-content {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: start;
  }
  .guest-section-content .guest-grid {
    order: 1;
    margin: 0;
    max-width: none;
    justify-content: flex-start;
  }
  .guest-section-content .tier-intro {
    order: 2;
    margin: 0;
    max-width: none;
  }
}
.guest-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .guest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .guest-chip {
    justify-content: center;
    text-align: center;
    padding: 12px 10px;
  }
}
.guest-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 10px 16px 10px 18px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.guest-chip:hover { border-color: var(--teal); transform: translateY(-1px); }
.guest-chip-static { cursor: default; }
.guest-chip-static:hover { border-color: var(--line); transform: none; }
.guest-name {
  font-family: var(--label);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: var(--chalk);
}
.guest-league {
  font-family: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--teal);
}
.guest-ig-icon { color: var(--chalk-dim); flex-shrink: 0; }
.guest-chip:hover .guest-ig-icon { color: var(--teal); }

.tier-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tier-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 30px;
  background: var(--surface);
}
.tier-card.tier-featured {
  border-color: var(--teal);
  border-width: 2px;
  background: linear-gradient(180deg, rgba(63,182,192,0.22), var(--surface) 60%);
}
.tier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.tier-name {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 19px;
  color: var(--chalk);
}
.tier-price {
  font-family: var(--label);
  font-weight: 700;
  font-size: 26px;
  color: var(--teal);
}
.tier-availability {
  display: inline-block;
  font-family: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11.5px;
  color: var(--clay);
  margin-bottom: 14px;
}
.tier-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
@media (max-width: 560px) { .tier-benefits { grid-template-columns: 1fr; } }
.tier-benefits li {
  font-size: 14.5px;
  color: var(--chalk-dim);
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}
.tier-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.tier-cta-row {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.tier-cta-row .btn { padding: 12px 26px; font-size: 13.5px; }

.registration-band {
  background: var(--dusk-mid);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.registration-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  text-align: center;
}
.registration-chip .amount {
  display: block;
  font-family: var(--label);
  font-weight: 700;
  font-size: 30px;
  color: var(--clay);
}
.registration-chip .label {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12.5px;
  color: var(--chalk-dim);
}
.registration-cta { text-align: center; margin-top: 36px; }

.tournament-contact {
  text-align: center;
}
.tournament-contact .phone {
  display: inline-block;
  font-family: var(--label);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--teal);
  text-decoration: none;
  margin: 10px 0 22px;
}

/* ================= REVIEWS ================= */
.star-rating { display: inline-flex; gap: 2px; font-size: 16px; }
.star-rating .star { color: rgba(238, 239, 229, 0.2); }
.star-rating .star-filled { color: var(--teal); }

.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 700px) { .review-grid { grid-template-columns: 1fr; } }
.review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 28px;
}
.review-name {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 16px;
  color: var(--chalk);
  margin: 12px 0 12px;
}
.review-role {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--chalk-dim);
  margin-top: 3px;
}
.review-text { color: var(--chalk-dim); line-height: 1.6; font-size: 15px; margin: 0; }

.review-form-section { background: var(--dusk-mid); }
.review-form-section .page-content { max-width: 640px; }
.review-form-error {
  color: var(--clay-bright);
  font-weight: 600;
  background: rgba(194, 112, 58, 0.12);
  border: 1px solid rgba(194, 112, 58, 0.35);
  border-radius: 4px;
  padding: 12px 16px;
}
.review-form p { margin: 0 0 20px; }
.review-form label {
  display: block;
  font-family: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12.5px;
  color: var(--chalk-dim);
  margin-bottom: 8px;
}
.review-form input[type="text"],
.review-form input[type="email"],
.review-form input[type="tel"],
.review-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--dusk-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--chalk);
  font-family: var(--body);
  font-size: 15px;
}
.review-form input[type="text"]:focus,
.review-form input[type="email"]:focus,
.review-form input[type="tel"]:focus,
.review-form textarea:focus {
  outline: none;
  border-color: var(--teal);
}
.review-form-note { font-size: 12.5px; color: var(--chalk-dim); opacity: 0.75; margin-top: 14px; }

/* CSS-only star picker: markup order is 5,4,3,2,1 on purpose,
   combined with row-reverse this lets the sibling combinator fill
   "this star and everything to its left" using only :checked/:hover,
   no JS required. */
.star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.star-input input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.star-input label {
  font-size: 30px;
  line-height: 1;
  color: rgba(238, 239, 229, 0.2);
  cursor: pointer;
  transition: color 0.15s ease;
}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label {
  color: var(--teal);
}
.star-input input:focus-visible + label {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Honeypot field on the review form: off-screen rather than
   display:none, some bots specifically skip display:none fields. A
   real visitor never sees or fills this in. */
.clwf-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ================= STORE ================= */
.store-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 700px) { .store-grid { grid-template-columns: 1fr; } }
.store-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.store-card-photo {
  aspect-ratio: 4 / 3;
  background: var(--dusk-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.store-card-photo span { font-family: var(--label); color: var(--chalk-dim); font-size: 13px; }
.store-card-body { padding: 22px 24px; }
.store-card-name {
  font-family: var(--label);
  font-weight: 700;
  font-size: 17px;
  color: var(--chalk);
  margin: 0 0 8px;
}
.store-card-desc {
  color: var(--chalk-dim);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.store-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.store-card-price {
  font-family: var(--label);
  font-weight: 700;
  font-size: 18px;
  color: var(--teal);
}
.store-note {
  text-align: center;
  color: var(--chalk-dim);
  font-size: 13px;
  margin: 36px 0 0;
}

/* ================= TEAM ================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 700px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card { text-align: center; }
.team-card-photo {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  max-width: 140px;
}
.team-card-photo span {
  font-family: var(--label);
  color: var(--chalk-dim);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 0 10px;
}
.team-card-name {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  color: var(--chalk);
  margin: 0 0 4px;
}
.team-card-role {
  font-size: 13px;
  color: var(--teal);
  margin: 0;
}
.team-tbd-shaded { background: var(--dusk-mid); }

/* ================= JOTFORM FRAME ================= */
/* Jotform's own form content renders at a fixed intrinsic width (this
   form measures ~590px regardless of how much space the iframe gives
   it) and left-aligns within whatever wider space it's given, rather
   than centering itself -- confirmed by loading the form directly.
   That's Jotform's own cross-origin rendering, unreachable from our
   CSS, so instead of stretching the iframe to fill the full page
   column (leaving room for that left-alignment to look off-center),
   this caps the iframe's own container to roughly the form's natural
   width and centers the container itself. Modifier per form since
   different Jotform forms can have different natural widths --
   --registration is sized for form 262049138095056. */
.jotform-frame { margin: 0 auto; }
/* Exactly 590px, not a rounder/safer number with buffer: tested that
   buffer first (610px) and it wasn't enough -- the form's cover image
   and its "form-all" card (the teal box) don't behave identically
   inside extra space. The image centers itself with a small margin as
   the container gets wider; the card is flush left with zero margin
   and pushes all the slack to the right. Any width wider than the
   form's own 590px leaves the two mismatched by that same amount.
   Confirmed by loading the form directly at exactly 590px: both the
   image wrapper and .form-all measure left:0, right:590, i.e. flush
   at both edges with nothing left over for either one to drift. */
.jotform-frame--registration { max-width: 590px; }

/* ================= FAQ ================= */
.faq-search {
  max-width: 480px;
  margin: 0 auto 28px;
}
.faq-search-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--dusk-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--chalk);
  font-family: var(--body);
  font-size: 15px;
}
.faq-search-input:focus { outline: none; border-color: var(--teal); }
.faq-search-input::placeholder { color: var(--chalk-dim); opacity: 0.7; }
.faq-no-results {
  max-width: 720px;
  margin: 24px auto 0;
  text-align: center;
  color: var(--chalk-dim);
}
.faq-no-results a { color: var(--teal); }
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 24px;
}
.faq-question {
  /* Flex, not float -- a floated marker drops onto its own line once the
     question wraps, which it does on most phone widths. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--chalk);
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--teal);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
}
.faq-item[open] .faq-question::after { content: '\2212'; }
.faq-item[open] { border-color: rgba(63, 182, 192, 0.4); }
.faq-answer {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--chalk-dim);
  line-height: 1.65;
}
.faq-answer a { color: var(--teal); }

/* ================= FINANCIAL ASSISTANCE PAGE ================= */
.fa-intro .page-lead { max-width: none; }
/* Faint alternating band so the page reads as distinct sections while
   scanning/scrolling, without needing card borders on every block. */
.fa-block-alt { background: rgba(63, 182, 192, 0.05); }
.fa-subhead {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: var(--teal);
  margin: 28px 0 10px;
}
.fa-steps {
  list-style: none;
  counter-reset: fa-step;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.fa-steps li {
  counter-increment: fa-step;
  position: relative;
  padding-left: 46px;
  color: var(--chalk-dim);
  line-height: 1.6;
}
.fa-steps li::before {
  content: counter(fa-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--dusk-deep);
  font-family: var(--label);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.fa-steps strong { color: var(--chalk); }
.fa-proof p { font-style: italic; }
.contact-phone-line {
  font-size: 16px;
  margin: 0 0 30px;
}
.contact-phone-line .phone-link {
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
}

/* ================= FEATURED STORY ================= */
.featured-story {
  max-width: 760px;
}
.featured-story-photo {
  margin: 0 0 32px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(63, 182, 192, 0.25);
  box-shadow: var(--shadow);
}
.featured-story-photo img { width: 100%; display: block; }
.featured-story-placeholder {
  text-align: center;
  color: var(--chalk-dim);
  font-size: 16px;
  font-style: italic;
}
.featured-story-name {
  margin: 0 0 4px;
  font-size: 30px;
}
.featured-story-role {
  margin: 0 0 26px;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--teal);
}
.featured-story-quote {
  margin: 0;
  padding: 0 0 0 26px;
  border-left: 3px solid var(--teal);
}
.featured-story-quote p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.7;
}
.featured-story-quote p:last-child { margin-bottom: 0; }
.featured-story-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 36px;
}
.featured-story-gallery figure {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(63, 182, 192, 0.25);
}
.featured-story-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .featured-story-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .featured-story-gallery figure:last-child { display: none; }
}
.featured-story-cta {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(63, 182, 192, 0.25);
  text-align: center;
}
.featured-story-cta p {
  margin: 0 0 20px;
  color: var(--chalk-dim);
}
@media (max-width: 700px) {
  .featured-story-quote { padding-left: 18px; }
  .featured-story-quote p { font-size: 16px; }
}

/* ================= DONATE ================= */
.donate-embed {
  max-width: 780px;
  margin: 0 auto;
}
.donate-amounts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
}
.donate-amount {
  min-width: 120px;
  justify-content: center;
  font-size: 20px;
  /* These are <button>s now, not links -- they reveal the prefilled form
     in place rather than navigating. Match the .btn link metrics so the
     row looks identical to how it did as anchors. */
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.donate-amount.is-selected {
  outline: 2px solid var(--chalk);
  outline-offset: 2px;
}
.donate-heading {
  text-align: center;
  margin: 0 0 24px;
}
.donate-form-wrap {
  max-width: 760px;
  margin: 36px auto 0;
}
.donate-form-selected {
  text-align: center;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--teal);
  margin: 0 0 14px;
}
.donate-form-selected:empty {
  display: none;
}
#clwf-donate-iframe {
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 800px;
  border: none;
}
.donate-note {
  text-align: center;
  color: var(--chalk-dim);
  font-size: 14px;
  margin: 20px 0 0;
}
.donate-phone {
  font-family: var(--label);
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
}