/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================
   Think of these like global variables. We define all brand
   colors once here so if anything needs to change, you update
   ONE place. Every element that uses `var(--brand-red)` will
   automatically update.
   ============================================================ */
:root {
  /* === MN BRAND COLORS (from logo) === */
  --brand-red:        #FF0000;
  --brand-navy:       #0A0A8C;
  --dark-bg:          #07073D;   /* Deep navy — hero sections */
  --mid-bg:           #0F0F6B;   /* Slightly lighter navy — cards, mid-sections */
  --surface:          #F5F5F5;   /* Off-white — content area backgrounds */
  --text-dark:        #0D0D0D;   /* Near-black — body text on light backgrounds */
  --text-light:       #FFFFFF;   /* White — text on dark backgrounds */
  --text-muted:       #6B6B8A;   /* Gray-purple — secondary/caption text */
  --accent-red:       #FF0000;
  --accent-hover:     #CC0000;   /* Darker red for hover states */

  /* === FIELD STATUS COLORS === */
  --status-open:      #22C55E;   /* Green */
  --status-closed:    #FF0000;   /* Red — also pulses via animation */
  --status-modified:  #F59E0B;   /* Amber */
  --status-tbd:       #6B7280;   /* Gray */

  /* === TYPOGRAPHY === */
  /* These font variables get filled by Google Fonts loaded in functions.php */
  --font-heading:    'Barlow Condensed', sans-serif;
  --font-subheading: 'Barlow Semi Condensed', sans-serif;
  --font-body:       'Nunito', sans-serif;

  /* === SPACING & SHAPE === */
  --radius:     0.5rem;
  --radius-lg:  1rem;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* 110% of the visitor's own default (17.6px for most): everything sized
     in rem follows, and a larger browser text setting still applies. */
  font-size: 110%;
}

body {
  font-family: var(--font-body);
  background: var(--dark-bg);
  color: var(--text-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   TYPOGRAPHY — Headings use Barlow Condensed (athletic/sports)
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1.1;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 640px)  { .container { padding: 0 2rem; } }
@media (min-width: 1024px) { .container { padding: 0 2.5rem; } }

.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }

.font-heading    { font-family: var(--font-heading);    font-weight: 700; text-transform: uppercase; }
.font-subheading { font-family: var(--font-subheading); font-weight: 600; }
.font-body       { font-family: var(--font-body); }

.text-brand-red   { color: var(--brand-red); }
.text-brand-navy  { color: var(--brand-navy); }
.text-dark        { color: var(--text-dark); }
.text-light       { color: var(--text-light); }
.text-muted       { color: var(--text-muted); }

.bg-dark-bg   { background: var(--dark-bg); }
.bg-mid-bg    { background: var(--mid-bg); }
.bg-surface   { background: var(--surface); }
.bg-brand-navy { background: var(--brand-navy); }
.bg-brand-red { background: var(--brand-red); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn-red {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
}
.btn-red:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: scale(1.03);
}
.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}
.btn-outline-white:hover {
  border-color: var(--brand-red);
  background: rgba(255,0,0,0.1);
}
.btn-navy {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
}
.btn-navy:hover {
  background: var(--dark-bg);
  transform: scale(1.03);
}
.btn-white {
  background: #fff;
  color: var(--brand-navy);
  border-color: #fff;
}
.btn-white:hover {
  background: var(--surface);
}

/* ============================================================
   SKIP TO MAIN CONTENT (Accessibility)
   Screen-reader and keyboard users use this to skip past nav.
   ============================================================ */
.skip-link {
  position: absolute;
  top: -60px;
  left: 1rem;
  z-index: 9999;
  background: var(--brand-red);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font-subheading);
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ============================================================
   NAVIGATION
   Position: fixed — stays at top as user scrolls.
   Starts transparent, turns solid when scrolled (.scrolled class
   added by JavaScript in nav.js).
   ============================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 80px;
  display: flex;
  align-items: center;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
#site-header.scrolled {
  background: rgba(7,7,61,0.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-logo img,
.nav-logo svg {
  height: 48px;
  width: auto;
}
.nav-logo-text {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.nav-logo-text small {
  display: block;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-family: var(--font-subheading);
}
/* Desktop nav links */
.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links a {
  font-family: var(--font-subheading);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.2s;
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brand-red);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav-links a:hover,
.nav-links a.current-menu-item { color: #fff; }
.nav-links a:hover::after,
.nav-links a.current-menu-item::after { transform: scaleX(1); }

/* Dropdown menu */
.nav-links .menu-item-has-children { position: relative; }
.nav-links .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: var(--mid-bg);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 0.5rem 0;
  min-width: 200px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  list-style: none;
}
.nav-links .menu-item-has-children:hover .sub-menu { display: block; }
.nav-links .sub-menu a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}
.nav-links .sub-menu a::after { display: none; }
.nav-links .sub-menu a:hover {
  color: var(--brand-red);
  background: rgba(255,0,0,0.1);
}

/* Register CTA button in nav */
.nav-register { display: none; }
@media (min-width: 1024px) { .nav-register { display: block; } }

/* Hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
  background: none;
  border: none;
  color: #fff;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: all 0.3s;
}
@media (min-width: 1024px) { .nav-hamburger { display: none; } }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--dark-bg);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.mobile-menu a:hover { color: var(--brand-red); }
.mobile-menu-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: none; border: none;
  color: #fff; font-size: 2rem;
  cursor: pointer; line-height: 1;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark-bg);
}
.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: kenBurns 20s ease-out forwards;
}
/* Ken Burns = slow zoom. Named after the documentarian famous for it. */
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(7,7,61,0.7) 0%,
    rgba(7,7,61,0.5) 40%,
    rgba(7,7,61,0.85) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 900px;
}
.hero-logo { width: 160px; height: auto; margin: 0 auto 2rem; }
@media (min-width: 640px)  { .hero-logo { width: 200px; } }
@media (min-width: 1024px) { .hero-logo { width: 240px; } }
.hero-title {
  font-size: clamp(2.25rem, 7.92vw, 5.4rem); /* h1: 10% under the site-wide size */
  color: #fff;
  margin-bottom: 0.5rem;
  animation: fadeInUp 0.7s 0.2s ease-out both;
}
.hero-tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3.3vw, 2rem);
  color: var(--brand-red);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  animation: fadeInUp 0.7s 0.35s ease-out both;
}
.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  animation: fadeInUp 0.7s 0.5s ease-out both;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.7s 0.65s ease-out both;
}
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.4);
  font-family: var(--font-subheading);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  animation: bounce 2s 1.5s ease-in-out 2; /* two bounces, then rests (WCAG 2.2.2) */
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-scroll svg { color: rgba(255,255,255,0.4); }
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* Hero background patterns (from globals.css) */
.hero-gradient-mesh {
  background: linear-gradient(135deg, var(--dark-bg) 0%, var(--mid-bg) 50%, var(--dark-bg) 100%);
  position: relative;
}
.hero-gradient-mesh::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,0,0,0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(10,10,140,0.25) 0%, transparent 50%);
  pointer-events: none;
}
.hero-gradient-mesh > * { position: relative; z-index: 2; }

.hero-lines::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255,255,255,0.04) 60px, rgba(255,255,255,0.04) 61px),
    repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,255,255,0.04) 60px, rgba(255,255,255,0.04) 61px);
  pointer-events: none;
}
.hero-lines > * { position: relative; z-index: 2; }

.hero-field-radial::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255,0,0,0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 50% -20%, rgba(10,10,140,0.3) 0%, transparent 50%);
  pointer-events: none;
}
.hero-field-radial > * { position: relative; z-index: 2; }

/* ============================================================
   FADE IN UP ANIMATION
   Used via JavaScript IntersectionObserver when elements scroll
   into the viewport. Elements start invisible (opacity 0) and
   slide up into position.
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-section {
  background: var(--mid-bg);
  padding: 4rem 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-item { text-align: center; }
.stat-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  color: #fff;
  line-height: 1;
  display: block;
}
.stat-suffix { color: var(--brand-red); }
.stat-label {
  font-family: var(--font-subheading);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.4rem;
  display: block;
}

/* ============================================================
   PROGRAMS SECTION
   ============================================================ */
.programs-section { background: var(--surface); padding: 5rem 0; }
.programs-section h2 { color: var(--brand-navy); }
.programs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (min-width: 640px)  { .programs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .programs-grid { grid-template-columns: repeat(4, 1fr); } }
.program-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  color: var(--text-dark);
}
.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.program-card-header {
  padding: 1.5rem;
  color: #fff;
}
.program-card-header.navy { background: var(--brand-navy); }
.program-card-header.red  { background: var(--brand-red); }
.program-card-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.program-icon svg { width: 40px; height: 40px; color: rgba(255,255,255,0.8); }
.travel-badge {
  padding: 3px 10px;
  background: rgba(255,255,255,0.2);
  font-family: var(--font-subheading);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 20px;
  color: #fff;
}
.program-card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.program-card-ages {
  font-family: var(--font-subheading);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.25rem;
}
.program-card-body { padding: 1.5rem; }
.program-card-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.program-card-link {
  font-family: var(--font-subheading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s, color 0.2s;
}
.program-card:hover .program-card-link { gap: 12px; color: var(--brand-red); }

/* ============================================================
   QUICK LINKS STRIP (For Families)
   ============================================================ */
.quick-links-section { background: var(--brand-navy); padding: 1.5rem 0; }
.quick-links-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
}
.quick-links-label {
  width: 100%;
  text-align: center;
  font-family: var(--font-subheading);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
@media (min-width: 640px) { .quick-links-label { width: auto; } }
.quick-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: #fff;
  font-family: var(--font-body);
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}
.quick-link-btn:hover { background: var(--brand-red); }
.quick-link-btn svg { width: 16px; height: 16px; }

/* ============================================================
   HIGHLIGHTS SECTION
   ============================================================ */
.highlights-section { background: var(--dark-bg); padding: 5rem 0; }
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) { .highlights-grid { grid-template-columns: repeat(3, 1fr); } }
.highlight-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--mid-bg);
  cursor: pointer;
}
.highlight-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.highlight-item:hover img { transform: scale(1.1); }
.highlight-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.highlight-item:hover .highlight-overlay { opacity: 1; }
.highlight-caption {
  font-family: var(--font-subheading);
  font-size: 0.85rem;
  color: #fff;
}
.highlight-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mid-bg);
  color: rgba(255,255,255,0.2);
  font-size: 0.7rem;
  font-family: var(--font-subheading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-direction: column;
  gap: 8px;
}
.highlights-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* Lightbox */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lightbox-overlay.open { display: flex; }
.lightbox-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: none; border: none;
  color: #fff; font-size: 2rem;
  cursor: pointer; line-height: 1;
  transition: color 0.2s;
}
.lightbox-close:hover { color: var(--brand-red); }
.lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius); }

/* ============================================================
   FIELD STATUS SECTION
   ============================================================ */
.field-status-section { background: var(--surface); padding: 5rem 0; }
.field-status-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 3rem;
}
.field-status-header h2 { color: var(--brand-navy); }
.fields-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px)  { .fields-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fields-grid { grid-template-columns: repeat(4, 1fr); } }
.field-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.field-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.field-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.field-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--text-dark);
  text-transform: uppercase;
  line-height: 1.2;
}
/* Status badge classes — controlled by ACF in production */
.badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: var(--font-subheading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.badge-closed   { background: var(--status-closed); animation: pulseRed 1.8s ease-in-out 2; }
.badge-modified { background: var(--status-modified); }
.badge-tbd      { background: var(--status-tbd); }
/* Pulse animation for closed fields — draws attention */
@keyframes pulseRed {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
.field-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.field-location svg { width: 14px; height: 14px; flex-shrink: 0; }
.field-notes {
  font-size: 0.82rem;
  color: var(--text-dark);
  background: var(--surface);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border-left: 3px solid var(--brand-red);
}
.field-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--surface);
}
.field-updated {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.field-updated svg { width: 12px; height: 12px; }
.field-directions {
  font-family: var(--font-subheading);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-navy);
  transition: color 0.2s;
}
.field-directions:hover { color: var(--brand-red); }

/* Full fields page grid */
.fields-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px)  { .fields-page-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fields-page-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   NEWS SECTION
   ============================================================ */
.news-section { background: var(--dark-bg); padding: 5rem 0; }
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card {
  background: var(--mid-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.news-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.news-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%; /* Tall graphics: keep heads and titles in frame. */
  transition: transform 0.5s ease;
}
.news-card:hover .news-card-thumb img { transform: scale(1.05); }
.news-card-thumb-placeholder {
  width: 100%; height: 100%;
  background: var(--dark-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.news-category-badge {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  padding: 3px 10px;
  font-family: var(--font-subheading);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 3px;
}
.news-card-body { padding: 1.5rem; }
.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.news-meta svg { width: 14px; height: 14px; }
.news-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  transition: color 0.2s;
  display: block;
}
.news-card:hover .news-title { color: var(--brand-red); }
.news-excerpt {
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.news-readmore {
  font-family: var(--font-subheading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-red);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.news-readmore:hover { gap: 12px; }

/* ============================================================
   REGISTRATION CTA SECTION
   ============================================================ */
.reg-cta-section {
  position: relative;
  background: var(--brand-navy);
  padding: 5rem 0;
  text-align: center;
  overflow: hidden;
}
.reg-cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.reg-cta-section > * { position: relative; z-index: 1; }
.reg-cta-section h2 { color: #fff; }
.reg-cta-section .highlight { color: var(--brand-red); }
.reg-cta-subtitle {
  color: rgba(255,255,255,0.8);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}
.reg-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ============================================================
   SPONSORS CAROUSEL
   Auto-scrolling strip — pauses on hover/focus.
   "requestAnimationFrame" is used in JS for smooth performance.
   ============================================================ */
.sponsors-section { background: var(--surface); padding: 3rem 0; border-top: 1px solid #e8e8f0; }
.sponsors-section h2 { color: var(--brand-navy); }
.sponsors-carousel-wrap { overflow: hidden; }
.sponsors-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
}
.sponsor-logo-item {
  flex-shrink: 0;
  width: 140px;
  height: 64px;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid #e8e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  opacity: 0.6;
  transition: opacity 0.25s, border-color 0.25s;
  font-family: var(--font-subheading);
  font-size: 0.8rem;
  color: var(--text-dark);
  text-align: center;
}
.sponsor-logo-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor-logo-item:hover { opacity: 1; border-color: var(--brand-navy); }

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: var(--dark-bg);
  padding: 4rem 0 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin-top: 1rem;
  max-width: 280px;
}
.footer-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer-social a {
  width: 36px; height: 36px;
  background: var(--mid-bg);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: background 0.2s;
}
.footer-social a:hover { background: var(--brand-red); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h2,
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--brand-red); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.75rem;
}
.footer-contact-item svg { width: 16px; height: 16px; color: var(--brand-red); flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
}
.footer-bottom a { color: rgba(255,255,255,0.3); transition: color 0.2s; }
.footer-bottom a:hover { color: var(--brand-red); }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  list-style: none;
}
.breadcrumb a:hover { color: var(--brand-red); }
.breadcrumb li::after { content: '/'; margin-left: 0.5rem; color: var(--text-muted); }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb li:last-child { color: #fff; }

/* ============================================================
   PAGE-SPECIFIC: ABOUT
   ============================================================ */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card {
  background: var(--dark-bg);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.value-icon {
  width: 64px; height: 64px;
  background: var(--brand-red);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.value-icon svg { width: 32px; height: 32px; color: #fff; }
.value-card h3 { color: #fff; font-size: 1.5rem; margin-bottom: 1rem; }
.value-card p { color: var(--text-muted); line-height: 1.6; }

.board-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 640px)  { .board-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .board-grid { grid-template-columns: repeat(4, 1fr); } }
.board-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.board-avatar {
  width: 56px; height: 56px;
  background: var(--brand-navy);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: #fff;
}
.board-card h3 { font-size: 0.85rem; color: var(--brand-navy); margin-bottom: 0.25rem; }
.board-card .role { font-size: 0.75rem; color: var(--brand-red); font-family: var(--font-subheading); margin-bottom: 0.5rem; }
.board-card .email { font-size: 0.72rem; color: var(--text-muted); }
.board-card .email:hover { color: var(--brand-red); }

/* ============================================================
   PAGE-SPECIFIC: PROGRAMS (inner pages)
   ============================================================ */
.page-hero {
  padding: 8rem 0 4rem;
  position: relative;
  background: var(--dark-bg);
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
}
.page-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.page-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--dark-bg) 40%, rgba(7,7,61,0.5) 100%);
}
.page-hero-content { position: relative; z-index: 2; }
.program-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--brand-navy);
  color: #fff;
  font-family: var(--font-subheading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.quick-info-bar {
  background: var(--brand-navy);
  padding: 1.5rem 0;
}
.quick-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .quick-info-grid { grid-template-columns: repeat(3, 1fr); } }
.quick-info-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
}
.quick-info-item svg { width: 32px; height: 32px; color: var(--brand-red); flex-shrink: 0; }
.quick-info-item .label { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.quick-info-item .value { font-family: var(--font-heading); font-size: 1.1rem; }

.divisions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px)  { .divisions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .divisions-grid { grid-template-columns: repeat(3, 1fr); } }
.division-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.25s ease;
}
.division-card:hover { transform: translateY(-3px); }
.division-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.division-name { font-family: var(--font-heading); font-size: 1.15rem; color: var(--brand-navy); }
.division-ages {
  padding: 3px 10px;
  background: rgba(10,10,140,0.08);
  color: var(--brand-navy);
  font-family: var(--font-subheading);
  font-size: 0.75rem;
  border-radius: 20px;
}
.division-desc { font-size: 0.87rem; color: var(--text-muted); line-height: 1.6; }

/* ============================================================
   PAGE-SPECIFIC: REGISTER
   ============================================================ */
.reg-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) { .reg-cards-grid { grid-template-columns: repeat(2, 1fr); } }
.reg-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.reg-card-header { padding: 1.5rem 2rem; color: #fff; }
.reg-card-header.navy { background: var(--brand-navy); }
.reg-card-header.red  { background: var(--brand-red); }
.reg-card-header h2 { font-size: 1.4rem; margin-bottom: 0.25rem; }
.reg-card-header p { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.reg-card-body { padding: 1.5rem 2rem; }
.reg-card-body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.reg-card-body li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-dark);
}
.reg-card-body li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.reg-card.navy li::before { background: var(--brand-navy); }
.reg-card.red  li::before { background: var(--brand-red); }

.security-disclaimer {
  background: var(--mid-bg);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.security-disclaimer svg { width: 32px; height: 32px; color: var(--brand-red); flex-shrink: 0; margin-top: 4px; }
.security-disclaimer h3 { color: #fff; font-size: 1.1rem; margin-bottom: 0.5rem; }
.security-disclaimer p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; }

.faq-item {
  background: var(--mid-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-subheading);
  font-size: 1rem;
  color: #fff;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg {
  width: 20px; height: 20px;
  color: var(--brand-red);
  flex-shrink: 0;
  transition: transform 0.3s;
}
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-answer {
  padding: 0 1.5rem 1.5rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.9rem;
}

/* ============================================================
   PAGE-SPECIFIC: SPONSORS
   ============================================================ */
.sponsor-tiers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .sponsor-tiers-grid { grid-template-columns: repeat(3, 1fr); } }
.sponsor-tier-card {
  background: var(--dark-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sponsor-tier-header {
  padding: 1rem;
  text-align: center;
  color: #fff;
}
.sponsor-tier-header h3 { font-size: 1.25rem; }
.sponsor-tier-header.gold   { background: #F59E0B; }
.sponsor-tier-header.silver { background: #9CA3AF; }
.sponsor-tier-header.community { background: #D97706; }
.sponsor-tier-body { padding: 1.5rem; }
.sponsor-tier-price {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
  margin-bottom: 1.5rem;
}
.sponsor-tier-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sponsor-tier-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.sponsor-tier-benefits li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brand-red);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

/* ============================================================
   SECTION LABEL (small uppercase tag above headings)
   ============================================================ */
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-subheading);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 0.75rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: var(--brand-red);
}

/* ============================================================
   SECTION HEADING ROW (heading + "view all" link)
   ============================================================ */
.section-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.section-heading-row h2 { margin: 0; }
.section-heading-row .view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-subheading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s;
}
.section-heading-row .view-all:hover { color: var(--brand-red); }
.section-heading-row .view-all.dark { color: var(--brand-navy); }
.section-heading-row .view-all.dark:hover { color: var(--brand-red); }

/* ============================================================
   CARD HOVER LIFT (shared utility)
   ============================================================ */
.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* ============================================================
   STAT SUMMARY PILLS (used on fields page header)
   ============================================================ */
.status-summary { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-family: var(--font-subheading);
  font-size: 0.85rem;
  color: #fff;
}
.status-pill-dot { width: 10px; height: 10px; border-radius: 50%; }
.status-pill.open   { background: rgba(34,197,94,0.15); }
.status-pill.closed { background: rgba(255,0,0,0.15); }

/* ============================================================
   WORDPRESS-SPECIFIC OVERRIDES
   WordPress adds some default classes we need to handle.
   ============================================================ */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }
.alignwide  { width: 100%; }
.alignfull  { width: 100vw; margin-left: calc(-50vw + 50%); }
.sticky { /* sticky posts — no special treatment needed */ }
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */
@media (max-width: 639px) {
  .hide-mobile { display: none !important; }
  h1 { font-size: 2.25rem; }
}
@media (min-width: 640px) {
  .show-mobile-only { display: none !important; }
}

/* ============================================================
   ACCESSIBILITY CORRECTIONS
   ============================================================
   The design above is the approved reference, copied verbatim.
   This block is the ONLY thing changed, and it changes exactly
   two values plus adds one media query.

   Why: the project brief lists "accessible typography",
   "appropriate contrast", and "avoid excessive animation" as
   stated requirements. These three edits satisfy that without
   altering the palette, the textures, or a single animation.

   If you disagree with any of it, delete this block — nothing
   else depends on it.
   ============================================================ */

:root {
  /*
   * --text-muted was #6B6B8A. On --dark-bg (#07073D) that measures
   * about 3.2:1, and on --mid-bg (#0F0F6B) about 2.7:1 — both below
   * the 4.5:1 minimum for body text. It was being used for hero
   * subtitles and card descriptions, i.e. real reading copy.
   *
   * #9B9BC4 keeps the same gray-purple character and measures
   * roughly 6:1 on dark navy. Visually near-identical, legible in
   * sunlight at a ballfield.
   */
  --text-muted: #9B9BC4;

  /*
   * The original muted tone, kept for use on LIGHT backgrounds
   * where it passes comfortably.
   */
  --text-muted-on-light: #55556F;

  /*
   * Pure #FF0000 measures about 4.0:1 on white — fine for large
   * display type (3:1 threshold) but a fail for small text.
   * --brand-red stays #FF0000 everywhere it appears large or on
   * dark. This deeper red is for small red text on light only.
   */
  --brand-red-text: #D40000;
}

/* Muted text sitting on light surfaces uses the darker tone. */
.programs-section .program-card-desc,
.field-status-section p,
.sponsors-section p,
.bg-surface p {
  color: var(--text-muted-on-light);
}

/* Small red links on light backgrounds get the deeper red. */
.program-card-link:hover,
.field-directions,
a.text-brand-red:not(h1):not(h2):not(h3) {
  color: var(--brand-red-text);
}

/*
 * Respect prefers-reduced-motion.
 *
 * This does NOT remove the animations — everyone else still gets
 * the Ken Burns zoom, the staggered fade-ups, the counting stats,
 * the card lifts, and the bouncing scroll cue exactly as designed.
 * It only stands them down for visitors whose operating system
 * asks for reduced motion, which is a small group for whom motion
 * causes real nausea.
 *
 * Elements that animate in are forced to their final visible state
 * so nothing ends up stuck at opacity 0.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-on-scroll,
  .hero-title,
  .hero-tagline,
  .hero-subtitle,
  .hero-ctas {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-bg-image { animation: none !important; }
  .hero-scroll   { animation: none !important; }
}

/* ============================================================
   ADDITIONS FOR THE LIVE CLOSURE SYSTEM
   ============================================================
   The reference theme had no site-wide closure banner — it showed
   field status only in its homepage section. The league asked for
   a banner on every page, so these are new, styled to match.
   ============================================================ */

.mnbl-alert {
  background: var(--status-closed);
  color: #fff;
  border-bottom: 4px solid rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 60;
}
.mnbl-alert--modified { background: var(--status-modified); }

.mnbl-alert__inner {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.9rem 0;
}
.mnbl-alert__icon { font-size: 1.4rem; line-height: 1.2; }

.mnbl-alert__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.42vw, 1.4rem);
  color: #fff;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mnbl-alert__list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.35rem; }
.mnbl-alert__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.93rem; }
.mnbl-alert__field { color: #fff; font-weight: 700; text-decoration: none; }
.mnbl-alert__field:hover { text-decoration: underline; color: #fff; }
.mnbl-alert__reason { color: rgba(255,255,255,0.9); }
.mnbl-alert__detail { flex-basis: 100%; font-size: 0.88rem; color: rgba(255,255,255,0.92); }
.mnbl-alert__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.88);
}
.mnbl-alert__link { color: #fff; font-weight: 700; text-decoration: underline; }
.mnbl-alert__more { margin: 0 0 0.4rem; font-size: 0.88rem; }
.mnbl-alert a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Editor-only "needs content" markers. Visitors never see these. */
.mnbl-placeholder {
  display: inline-block;
  background: #FEF3C7;
  border: 1px dashed #B45309;
  color: #78350F;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.85em;
  font-style: italic;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
}
.mnbl-placeholder--block { display: block; padding: 12px 14px; margin: 0.5rem 0; }

/* Status guide key on the fields archive — an addition the league asked for. */
.mnbl-key {
  margin-top: 2.5rem;
  background: #fff;
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(7,7,61,0.08);
}
.mnbl-key__title { font-size: 1.05rem; color: var(--brand-navy); margin-bottom: 0.75rem; }
.mnbl-key__list { margin: 0; display: grid; gap: 0.6rem; }
.mnbl-key__row { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.mnbl-key__row dt { margin: 0; min-width: 6.5rem; }
.mnbl-key__row dd { margin: 0; color: var(--text-muted-on-light); }

/* ============================================================
   BRIDGE CLASSES
   ============================================================
   A handful of class names my templates use that the reference
   stylesheet did not define — mostly for the interior pages and
   the closure system, which the reference did not have.

   All values are pulled from the reference's own tokens so these
   sit in the same design language rather than beside it.
   ============================================================ */

/* --- Section bands --- */

.section-light {
  background: var(--surface);
  padding: 5rem 0;
}
.section-navy {
  background: var(--brand-navy);
  padding: 5rem 0;
  color: var(--text-light);
}
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }

.section-title {
  color: var(--brand-navy);
  font-size: clamp(1.75rem, 4.4vw, 2.75rem);
  margin-bottom: 0.4em;
}
.section-navy .section-title,
.news-section .section-title,
.highlights-section .section-title { color: #fff; }

.section-lede {
  color: var(--text-muted-on-light);
  margin: 0;
  max-width: 640px;
}
.section-navy .section-lede,
.news-section .section-lede,
.highlights-section .section-lede { color: var(--text-muted); }

.text-light { color: #fff !important; }

/* --- Interior page headers --- */

.page-hero-title {
  color: #fff;
  font-size: clamp(1.8rem, 5.45vw, 3.375rem); /* h1: 10% under the site-wide size */
  margin: 0 0 0.4rem;
  position: relative;
  z-index: 2;
}
.page-hero-subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Interior heroes get the gradient mesh so they don't read as flat navy. */
.page-hero {
  background: linear-gradient(135deg, var(--dark-bg) 0%, var(--mid-bg) 55%, var(--dark-bg) 100%);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(255,0,0,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(10,10,140,0.28) 0%, transparent 55%);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 2; }

/* --- Long-form content --- */

.prose { max-width: 52rem; }
.prose h2 {
  color: var(--brand-navy);
  margin-top: 2.25rem;
  font-size: clamp(1.35rem, 3.3vw, 1.9rem);
}
.prose h3 { color: var(--brand-navy); margin-top: 1.75rem; }
.prose p, .prose li { color: var(--text-dark); }
/* The global reset zeroes paragraph margins; long-form text needs them back
   or consecutive paragraphs run together into one block. */
.prose p { margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 + p, .prose h3 + p { margin-top: 0.4rem; }
.prose ul, .prose ol { margin: 0 0 1.25rem 1.25rem; }
.section-navy .prose p,
.section-navy .prose li { color: rgba(255,255,255,0.85); }

/* --- Tables --- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.75rem;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(7,7,61,0.07);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #e8e8f0;
  vertical-align: top;
}
.data-table th {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-navy);
  background: var(--surface);
  font-size: 0.9rem;
}
.data-table tr:last-child td { border-bottom: 0; }

/* --- Extra button variant --- */

.btn-outline-navy {
  background: transparent;
  color: var(--brand-navy);
  border: 2px solid var(--brand-navy);
}
.btn-outline-navy:hover {
  background: var(--brand-navy);
  color: #fff;
}

/* --- Sponsor carousel pause control --- */

.sponsors-pause {
  font-family: var(--font-subheading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Footer logo --- */

.footer-logo { margin-bottom: 1rem; }

/* --- All-clear notice on the fields page --- */

.mnbl-allclear {
  background: rgba(34,197,94,0.12);
  border-left: 4px solid var(--status-open);
  padding: 0.9rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.75rem;
  color: var(--text-dark);
}
.mnbl-allclear strong { color: #15803D; }

/* --- Field detail page --- */

.mnbl-fieldpage__closure {
  background: rgba(255,0,0,0.07);
  border-left: 5px solid var(--status-closed);
  padding: 1.1rem 1.35rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 2rem;
}
.mnbl-fieldpage__closure--modified {
  background: rgba(245,158,11,0.1);
  border-left-color: var(--status-modified);
}
.mnbl-fieldpage__closure h2 { color: #B91C1C; margin-bottom: 0.4em; font-size: 1.3rem; }
.mnbl-fieldpage__closure--modified h2 { color: #B45309; }
.mnbl-fieldpage__updated,
.mnbl-fieldpage__reopen { font-size: 0.9rem; color: var(--text-muted-on-light); margin: 0; }

.mnbl-fieldpage__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .mnbl-fieldpage__grid { grid-template-columns: repeat(2, 1fr); } }
.mnbl-fieldpage h2 { color: var(--brand-navy); font-size: 1.2rem; margin-top: 1.5rem; }
.mnbl-fieldpage h2:first-child { margin-top: 0; }
.mnbl-fieldpage__list { margin: 0 0 1rem 1.2rem; }
.mnbl-fieldpage__address { font-size: 1.05rem; }

/* --- Board members / people --- */

.mnbl-person {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(7,7,61,0.08);
  padding: 1.25rem;
  text-align: center;
}
.mnbl-person__photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.75rem;
}
.mnbl-person__initials {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}
.mnbl-person__name { font-size: 1rem; margin: 0 0 0.15rem; color: var(--brand-navy); }
.mnbl-person__role {
  margin: 0 0 0.4rem;
  font-family: var(--font-subheading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--brand-red-text);
}
.mnbl-person__email { margin: 0; font-size: 0.82rem; word-break: break-word; }
.mnbl-person__bio { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--text-muted-on-light); text-align: left; }

/* --- Registration page --- */

.mnbl-regstatus { padding: 1.5rem 0; background: var(--brand-navy); color: #fff; }
.mnbl-regstatus--open { background: #15803D; }
.mnbl-regstatus--closed { background: var(--status-tbd); }
.mnbl-regstatus--opening-soon,
.mnbl-regstatus--waitlist { background: #B45309; }
.mnbl-regstatus__label {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}
.mnbl-datelist {
  margin: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .mnbl-datelist { grid-template-columns: repeat(4, 1fr); } }
.mnbl-datelist dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
  margin: 0;
  font-family: var(--font-subheading);
}
.mnbl-datelist dd { margin: 0; font-weight: 700; font-size: 1.05rem; }

.mnbl-regcard {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(7,7,61,0.08);
  padding: 1.5rem;
  border-top: 5px solid var(--brand-navy);
}
.mnbl-regcard--softball { border-top-color: var(--brand-red); }
.mnbl-regcard__title { color: var(--brand-navy); font-size: 1.4rem; }

.mnbl-securitynote {
  margin-top: 2rem;
  background: #fff;
  border-left: 4px solid var(--brand-navy);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.25rem;
}
.mnbl-securitynote__title { font-size: 1rem; color: var(--brand-navy); margin-bottom: 0.4em; }
.mnbl-securitynote p { margin: 0; font-size: 0.92rem; }

/* --- FAQ accordion (native details/summary) --- */

.mnbl-faq { display: grid; gap: 0.5rem; }
.mnbl-faq__item {
  background: #fff;
  border: 1px solid #e8e8f0;
  border-radius: var(--radius);
}
.mnbl-faq__q {
  cursor: pointer;
  padding: 0.9rem 2.5rem 0.9rem 1.1rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-navy);
  list-style: none;
  position: relative;
}
.mnbl-faq__q::-webkit-details-marker { display: none; }
.mnbl-faq__q::after {
  content: '+';
  position: absolute;
  right: 1.1rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--brand-red);
  line-height: 1;
}
.mnbl-faq__item[open] .mnbl-faq__q::after { content: '\2013'; }
.mnbl-faq__q:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: -2px; }
.mnbl-faq__a { padding: 0 1.1rem 1rem; }
.mnbl-faq__a p:last-child { margin-bottom: 0; }

/* --- Sponsorship tiers --- */

.mnbl-tier {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(7,7,61,0.08);
  padding: 1.5rem;
  border-top: 5px solid var(--brand-red);
  display: flex;
  flex-direction: column;
}
.mnbl-tier__name { color: var(--brand-navy); font-size: 1.3rem; margin-bottom: 0.2em; }
.mnbl-tier__price {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--brand-red-text);
  margin: 0 0 0.5rem;
}
.mnbl-tier__price--hidden { font-size: 1rem; color: var(--text-muted-on-light); }
.mnbl-tier__desc { color: var(--text-muted-on-light); }

.mnbl-testimonial { margin: 0; }
.mnbl-testimonial p { font-size: 1.25rem; font-style: italic; color: #fff; }
.mnbl-testimonial__author {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
}

/* --- Checklists, definition lists, misc --- */

.mnbl-checklist { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.mnbl-checklist li { position: relative; padding-left: 1.5rem; }
.mnbl-checklist li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-red);
}
.section-navy .mnbl-checklist li::before,
.reg-cta-section .mnbl-checklist li::before { background: #fff; }

.mnbl-deflist { margin: 0 0 1.5rem; display: grid; gap: 0.5rem; }
.mnbl-deflist__row {
  display: flex; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e8e8f0;
}
.mnbl-deflist__row dt { margin: 0; font-weight: 700; min-width: 9rem; color: var(--brand-navy); }
.mnbl-deflist__row dd { margin: 0; }

.mnbl-gallery {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .mnbl-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .mnbl-gallery { grid-template-columns: repeat(4, 1fr); } }
.mnbl-gallery__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

.mnbl-contactgrid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
@media (max-width: 820px) { .mnbl-contactgrid { grid-template-columns: 1fr; } }
.mnbl-contactgrid__aside {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(7,7,61,0.08);
  padding: 1.5rem;
  align-self: start;
}
.mnbl-contactgrid__aside h2 { font-size: 1.05rem; color: var(--brand-navy); margin-top: 1.25rem; }
.mnbl-contactgrid__aside h2:first-child { margin-top: 0; }

.mnbl-quote {
  font-size: 1.2rem;
  line-height: 1.5;
  border-left: 4px solid var(--brand-red);
  padding: 0.25rem 0 0.25rem 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--brand-navy);
}

.mnbl-key { background: #fff; }
.mnbl-key__title { color: var(--brand-navy); }
.mnbl-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius);
}

/* --- Mobile menu without JavaScript --- */
.no-js .mobile-menu { display: block; position: static; }
.no-js .nav-hamburger { display: none; }

/* ============================================================
   FIXES — v0.3.1
   ============================================================ */

/* ------------------------------------------------------------
   1. Text colour on light sections
   ------------------------------------------------------------
   body sets color:var(--text-light) because the design is
   dark-dominant. That's correct for the hero and the dark bands,
   but it means ANY content dropped onto a light section renders
   white-on-grey and effectively disappears.

   The reference theme never hit this because its light sections
   only ever contained pre-styled cards. Interior pages have
   plain prose, so light bands need to set their own text colour.
   ------------------------------------------------------------ */

/*
 * v0.4.1 — the element list that used to follow these four selectors has
 * been removed. It read:
 *
 *     .section-light p, .section-light li, .section-light dd,
 *     .section-light td, .section-light span:not(...)
 *
 * Every one of those was redundant. The band already sets `color` on
 * itself, and colour inherits, so an untouched paragraph inside a light
 * band was going to be dark either way. What the list DID do was outrank
 * every card's own colour rule — a descendant selector with a class and a
 * type (0,1,1) beats a lone class (0,1,0) — so it repainted the insides
 * of dark cards near-black. Deleting it lets each component keep its own
 * colours and costs nothing.
 */
.section-light,
.programs-section,
.sponsors-section,
.field-status-section {
  color: var(--text-dark);
}

/* Headings on light bands take navy, not white. */
.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.programs-section h2,
.programs-section h3:not(.program-card-title),
.field-status-section h2,
.sponsors-section h2 {
  color: var(--brand-navy);
}

/* Links on light bands need the accessible red, not inherited white. */
.section-light a:not(.btn):not(.program-card):not(.field-name a):not(.news-title):not(.news-readmore),
.programs-section a:not(.btn):not(.program-card),
.field-status-section a:not(.btn):not(.field-name a) {
  color: var(--brand-red-text);
}

/* The card interiors keep their own colours — don't let the rules above
   bleed into them. */
.program-card-header,
.program-card-header * { color: #fff; }
.program-card-title { color: #fff; }
.program-card-ages  { color: rgba(255,255,255,0.75); }
.field-card .field-name,
.field-card .field-name a { color: var(--brand-navy); }
.field-card .field-location,
.field-card .field-updated { color: var(--text-muted-on-light); }
.badge { color: #fff !important; }

/* ------------------------------------------------------------
   2. Breadcrumbs
   ------------------------------------------------------------
   The reference styles .breadcrumb as a flex list. My markup wraps
   an <ol> in <nav class="breadcrumb">, so list-style:none landed on
   the nav and the browser rendered "1." "2." markers on the list
   inside it — which read as broken rather than deliberate.
   ------------------------------------------------------------ */

.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb ol li { list-style: none; }
.breadcrumb ol li::marker { content: none; }
.breadcrumb,
.breadcrumb ol li { color: rgba(255,255,255,0.6); }
.breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-red); }
.breadcrumb ol li:last-child { color: #fff; }
.breadcrumb ol li::after { content: '/'; margin-left: 0.5rem; color: rgba(255,255,255,0.35); }
.breadcrumb ol li:last-child::after { display: none; }

/* ------------------------------------------------------------
   3. Stat number and suffix on one line
   ------------------------------------------------------------
   .stat-number was display:block, which pushed the "+" onto its
   own line — so "850+" rendered as "850" with a stray "+" beneath
   it. Grouping them on a shared baseline gives the intended
   "850+" and keeps the label underneath.
   ------------------------------------------------------------ */

.stat-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-number {
  display: inline;
}
.stat-number,
.stat-suffix {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1;
}
.stat-suffix {
  color: var(--brand-red);
  display: inline;
}
/* Wrapper so number + suffix share a baseline and centre together. */
.stat-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.02em;
}
.stat-label {
  display: block;
  margin-top: 0.5rem;
  max-width: 12rem;
}

/* ------------------------------------------------------------
   4. Interior page headers — more grounded
   ------------------------------------------------------------
   The page headers felt like they floated because the band ended
   abruptly into the light section. A red keyline at the bottom ties
   it to the brand and gives the eye a definite edge to land on.
   ------------------------------------------------------------ */

.page-hero {
  border-bottom: 4px solid var(--brand-red);
  padding: 7rem 0 3.5rem;
}
.page-hero-title { letter-spacing: 0.02em; }
.page-hero-subtitle { color: rgba(255,255,255,0.72); }

/* First light section after a page header shouldn't have a huge gap. */
/* (Not the page-template header, which keeps its original spacing now that it sits inside <main>.) */
.page-hero:not(.page-hero--template) + .section-light,
.page-hero:not(.page-hero--template) + .programs-section { padding-top: 3.5rem; }

/* ------------------------------------------------------------
   5. Archive grids — REMOVED in v0.3.2
   ------------------------------------------------------------
   This block used to override .fields-grid / .programs-grid /
   .news-grid with repeat(auto-fit, minmax(min(100%, Nrem), 1fr)).

   That was the cause of the page-sized cards, via three compounding
   problems:

   1. The reference grids are mobile-first: `1fr` by default, with
      extra columns added inside media queries. MEDIA QUERIES DO NOT
      ADD SPECIFICITY — so `.section-light .news-grid` (0,2,0) beat
      `@media (...) { .news-grid }` (0,1,0) at every viewport width.
      The reference's column rules were never applied at all.

   2. A percentage inside min() inside minmax() inside
      repeat(auto-fit, ...) leaves the repetition count indeterminate,
      and the browser falls back to a single track.

   3. One column, at container width, multiplied by
      `.news-card-thumb { aspect-ratio: 16/9 }` produces a thumbnail
      roughly 675px tall. That is the "page-sized card".

   The tell was that the homepage looked correct: its news section is
   `.news-section`, not `.section-light`, so the override never
   matched there. Anywhere the override DID match, the grid collapsed.

   The reference's own grids are correct and responsive. They are left
   to do their job.
   ------------------------------------------------------------ */

/* Grouped archive headings ("In House" / "Travel") need breathing room. */
.programs-group { margin-bottom: 3.5rem; }
.programs-group:last-child { margin-bottom: 0; }
.programs-group__title {
  color: var(--brand-navy);
  font-size: clamp(1.5rem, 3.85vw, 2.25rem);
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid #e8e8f0;
}

/* ============================================================
   REMAINING COMPONENT CLASSES — v0.3.1
   ============================================================
   Wrappers and page-specific pieces that had no styling yet.
   ============================================================ */

/* Layout wrappers with no visual of their own. */
.mnbl-main { display: block; }
.mnbl-alert__body { flex: 1 1 auto; min-width: 0; }
.mnbl-alert__updated { white-space: nowrap; }
.mnbl-contactgrid__form { min-width: 0; }
.mnbl-fieldpage__col { min-width: 0; }
.mnbl-regcard--baseball { border-top-color: var(--brand-navy); }
.mnbl-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.mnbl-nav__item { list-style: none; }
.mnbl-nav__link { color: #fff; text-decoration: none; }

/* Page header photo band. */
.mnbl-pagehero { max-height: 360px; overflow: hidden; }
.mnbl-pagehero img { width: 100%; object-fit: cover; }

/* Centred call-to-action blocks. */
.mnbl-cta { text-align: center; max-width: 44rem; margin-inline: auto; }
.mnbl-cta__title { color: #fff; font-size: clamp(1.75rem, 4.95vw, 3rem); margin-bottom: 0.5rem; }
.mnbl-cta__text { font-size: 1.1rem; color: rgba(255,255,255,0.82); margin-bottom: 1.75rem; }
.section-light .mnbl-cta__title { color: var(--brand-navy); }
.section-light .mnbl-cta__text { color: var(--text-muted-on-light); }

/* Core values cards on the About page. */
.mnbl-valuecard {
  background: var(--dark-bg);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  border-top: 4px solid var(--brand-red);
}
.mnbl-valuecard__title { color: #fff; font-size: 1.3rem; margin-bottom: 0.5rem; }
.mnbl-valuecard__text { color: var(--text-muted); margin: 0; }

/* Gallery thumbnails act as lightbox triggers. */
.mnbl-gallery__link,
.js-lightbox {
  display: block;
  border: 0;
  padding: 0;
  background: none;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
.js-lightbox:focus-visible,
.mnbl-gallery__link:focus-visible {
  outline: 3px solid var(--brand-red);
  outline-offset: 3px;
}

/* Tiered sponsor display on the Sponsors page. */
.sponsor-tier-group { margin-bottom: 3rem; }
.sponsor-tier-group:last-child { margin-bottom: 0; }
.sponsor-tier-heading {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--brand-navy);
  font-size: 1.2rem;
  padding-bottom: 0.6rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid #e8e8f0;
}
.sponsor-tier-price {
  font-family: var(--font-subheading);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-red-text);
}
.sponsor-tier-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .sponsor-tier-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sponsor-tier-grid { grid-template-columns: repeat(5, 1fr); } }
/* Tier tiles sit at full opacity — on a dedicated sponsors page the logos are
   the content, not a background texture, so the carousel's grayscale
   treatment would be wrong here. */
.sponsor-tier-grid .sponsor-logo-item {
  width: auto;
  height: 84px;
  opacity: 1;
}
.sponsor-tier-grid .sponsor-logo-item:hover { border-color: var(--brand-red); }

/* ============================================================
   DEDICATED GRIDS — v0.3.2
   ============================================================
   These components were borrowing .fields-grid / .programs-grid
   because an earlier find-and-replace remapped their class names
   generically. That coupling meant a change to the field grid
   silently changed the registration cards and the board list.

   Each now has its own class. Explicit breakpoint columns, matching
   the reference's approach — no auto-fit.
   ============================================================ */

/* Registration page: two paths, side by side. */
.reg-paths-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .reg-paths-grid { grid-template-columns: repeat(2, 1fr); } }

/* Board members and other people cards. */
.people-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 768px)  { .people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .people-grid { grid-template-columns: repeat(4, 1fr); } }

/* Sponsorship tier comparison cards. */
.tiers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px)  { .tiers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiers-grid { grid-template-columns: repeat(3, 1fr); } }

/*
 * The reference's .values-grid is reused for core values on the About page.
 * It is already defined above; nothing to add.
 */

/* ============================================================
   CONTRAST FIXES — v0.4.1
   ============================================================
   THE BUG, STATED ONCE.

   NOTE TO FUTURE ME: no code samples with comment markers in here.
   CSS comments do NOT nest — an inner marker ends the outer comment
   early and everything after it parses as garbage. That mistake cost a
   whole release. Specificity is written as (a,b,c) in plain prose below.

   The light-band rules added in v0.3.0 look like this, at (0,1,1):

       .section-light p   -> color: var(--text-dark)
       .section-light h3  -> color: var(--brand-navy)

   Every card component styles itself with a single class, at (0,1,0):

       .news-excerpt       -> color: var(--text-muted)
       .program-card-title -> color: #fff

   A descendant selector with one class AND one type (0,1,1) outranks
   one class alone (0,1,0). So on every page built from `.section-light`,
   the band rules reached inside cards that have their own dark or
   coloured background and repainted their text near-black or navy.

   Worst cases found: navy `.program-card-title` on a navy card header
   (1.00:1 — literally invisible) and near-black `.news-excerpt` on a
   mid-navy news card (1.20:1).

   THE FIX. Two parts, in this order:

   1. Cards that paint their own background get their text colour back,
      at a specificity that actually wins — every selector below carries
      at least two classes.
   2. A few colour values genuinely failed WCAG AA on their own merits,
      regardless of the cascade. Those are corrected with new tokens
      rather than by changing --brand-red, which is also the border,
      the logo stroke, and the section-label bar.

   AA thresholds: 4.5:1 for body text, 3:1 for text 24px+ or 19px bold.
   ------------------------------------------------------------ */

:root {
  /* Red surfaces that carry white TEXT. Pure #FF0000 gives white only
     4.0:1, which fails. #CC0000 gives 5.89:1 and is already the
     established hover shade, so the palette does not grow a new hue. */
  --brand-red-surface: #CC0000;

  /* Red TEXT on a dark card. #FF0000 on mid-navy is 4.04:1 — just under.
     #FF5C5C clears every dark surface the theme uses. */
  --brand-red-on-dark: #FF5C5C;

  /* Secondary text on dark cards. --text-muted (#6B6B8A) is a
     light-background colour and only reaches 3.15:1 on mid-navy. */
  --text-muted-on-dark: #9B9BC4;

  /* Status colours strong enough to carry white text.
     The originals stay for dots, borders, and washes. */
  --status-open-strong:     #15803D;   /* white 5.02:1 */
  --status-closed-strong:   #CC0000;   /* white 5.89:1 */
  --status-modified-strong: #B45309;   /* white 5.02:1 */
  --status-tbd-strong:      #4B5563;   /* white 7.56:1 */
}

/* ------------------------------------------------------------
   1. Self-coloured cards keep their own text
   ------------------------------------------------------------ */

/* News cards are mid-navy even on a light band. */
.section-light .news-card,
.section-light .news-card * { color: var(--text-light); }
.section-light .news-title,
.section-light .news-title a { color: #fff; }
.section-light .news-excerpt,
.section-light .news-meta,
.section-light .news-meta *,
.section-light .news-card time { color: var(--text-muted-on-dark); }
.section-light .news-readmore { color: var(--brand-red-on-dark); }
.news-readmore { color: var(--brand-red-on-dark); }
.news-excerpt,
.news-meta { color: var(--text-muted-on-dark); }

/* Program card headers are navy or red on every page they appear. */
.section-light .program-card-header,
.section-light .program-card-header *,
.programs-section .program-card-header,
.programs-section .program-card-header *,
.section-light .program-card-title,
.programs-section .program-card-title { color: #fff; }
.section-light .program-card-ages,
.programs-section .program-card-ages { color: rgba(255,255,255,0.92); }
.section-light .travel-badge,
.programs-section .travel-badge { color: #fff; }

/* Board initials sit in a navy circle. */
.section-light .mnbl-person__initials,
.people-grid .mnbl-person__initials { color: #fff; }

/* Category chips are coloured surfaces, not body text. */
.section-light .news-category-badge,
.news-section .news-category-badge { color: #fff; }

/* Field cards on a light band keep the reference's own colours. */
.section-light .field-card .field-notes,
.field-status-section .field-card .field-notes { color: var(--text-muted-on-light); }

/* ------------------------------------------------------------
   2. Colour values that failed on their own merits
   ------------------------------------------------------------ */

/* Status badges. White on the original green was 2.28:1 and on the
   original amber 2.15:1 — both unreadable at badge size. The hues are
   deepened, not changed, so the traffic-light reading survives. */
/*
 * .badge-open is gone. "Open" stopped being a status in v0.4.1 — a field
 * with nothing wrong shows no badge at all — so a green chip has nothing
 * left to label. Leaving it defined would invite someone to use it.
 */
.badge-closed   { background: var(--status-closed-strong); }
.badge-modified { background: var(--status-modified-strong); }
.badge-tbd      { background: var(--status-tbd-strong); }

/* The sitewide closure banner. This is the most important component on
   the site and it was running at 3.24:1 for its own timestamp. */
.mnbl-alert { background: var(--brand-red-surface); }
.mnbl-alert__meta,
.mnbl-alert__updated,
.mnbl-alert__reason,
.mnbl-alert__detail { color: #FFFFFF; }
/* Full white: at 0.92 opacity the timestamp blended to 4.4:1 on the red (v0.8.0). */
.mnbl-alert__meta,
.mnbl-alert__updated { opacity: 1; }

/* Red on a light band needs the darker text red, not the accent red. */
.section-light .news-readmore.on-light,
.field-directions { color: var(--brand-red-text); }
.field-directions:hover { color: var(--brand-red-text); text-decoration: underline; }

/* Red highlight inside the navy registration band. */
.reg-cta-section .highlight { color: var(--brand-red-on-dark); }

/* The hero's scroll cue was 3.66:1 against the deep navy. */
.hero-scroll { color: #8A8AB0; }

/* Buttons. White on pure red is 4.0:1 — fine for the large display
   buttons the reference uses, short of AA for the small ones. Deepening
   the fill costs nothing visually and fixes both. */
.btn-red,
.skip-link { background: var(--brand-red-surface); }
.btn-red:hover { background: #B00000; }

/* Program card red header, same reasoning. */
.program-card-header.red { background: var(--brand-red-surface); }
.reg-card-header.red { background: var(--brand-red-surface); }

/* Division age chips: navy on an 8% navy wash over white reads fine,
   but the wash sits on cards that are sometimes white and sometimes
   off-white. Pin the surface so the ratio is not left to chance. */
.division-ages { background: #E8E8F4; color: var(--brand-navy); }

/* Decorative fill inside empty highlight tiles — not text, so it is
   exempt from AA, but it was being read as text by contrast tooling. */
.highlight-placeholder { color: rgba(255,255,255,0.35); }

/* Program card description was --text-muted (#9B9BC4), a dark-background
   colour, sitting on the card's white body — 2.67:1. */
.program-card-desc { color: var(--text-muted-on-light); }

/* ------------------------------------------------------------
   3. Card action links — "Learn More →"
   ------------------------------------------------------------
   These were 0.8rem uppercase with 0.1em letter-spacing, sitting under
   body copy set at 0.9rem. Uppercase and letter-spaced text reads
   noticeably larger than its point size, so the call to action was
   competing with the content it was meant to point at.

   Dropped to 0.68rem with tighter tracking and a smaller chevron. Still
   a clear affordance, no longer the loudest thing in the card.

   Tap target is preserved: the whole card is the link on program and
   news cards, so shrinking the label costs nothing in usability. Where
   the label IS the only link, padding keeps it above 44px.
   ------------------------------------------------------------ */

.program-card-link,
.news-readmore,
.field-directions {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  gap: 4px;
  font-weight: 600;
}

.program-card-link svg,
.news-readmore svg,
.field-directions svg,
.section-heading-row .view-all svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

/* The section-level "View All" is a navigation control, not card
   furniture — it stays a little larger, but not by much. */
.section-heading-row .view-all {
  font-size: 0.74rem;
  letter-spacing: 0.07em;
}

/* Standalone links need a real tap target even when the label is small. */
.field-directions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}

/* ------------------------------------------------------------
   4. Footer fine print
   ------------------------------------------------------------
   The copyright line and the Privacy / Terms links were
   rgba(255,255,255,0.3) on deep navy — 2.52:1, at 12px.

   Small, low-priority text is exactly where low contrast is most
   tempting and least defensible: it is the text a screen-reader user
   skips and a sighted user has to squint at. Privacy and Terms are
   also the two links most likely to matter legally.
   ------------------------------------------------------------ */
.footer-bottom,
.footer-bottom a { color: rgba(255,255,255,0.62); }
.footer-bottom a:hover,
.footer-bottom a:focus-visible { color: #fff; text-decoration: underline; }

/* ============================================================
   FIELD STATUS — "no notice" is the default (v0.4.1)
   ============================================================
   Open is no longer a status. A field with nothing wrong shows no
   badge at all, so `.badge-open` has nothing left to style. It stays
   defined only so an old cached page does not render an unstyled chip.

   The legend needs a way to show "no badge" as a legend entry, which
   is the one thing a badge cannot do. An outlined chip reads as the
   absence of a filled one.
   ------------------------------------------------------------ */
.mnbl-key__nobadge {
  display: inline-block;
  padding: 3px 10px;
  border: 1px dashed #9a9ab5;
  border-radius: 3px;
  font-family: var(--font-subheading);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted-on-light);
  background: transparent;
}

/* The all-clear notice carries the explanation now, so it needs room
   for a second sentence. */
.mnbl-allclear { line-height: 1.6; }
.mnbl-allclear strong { display: block; margin-bottom: 0.15rem; }

/* ============================================================
   BACKGROUND TEXTURE — v0.4.2
   ============================================================
   A field of faint plus signs, lifted out of the reference build's
   registration band. It is the cheapest thing on that page and it does
   more than anything else to stop flat colour blocks reading like a
   template — you feel it rather than see it.

   WHERE IT GOES

   v0.4.1 put it on every band. That was too much: at that density it
   stopped being texture and became pattern, and the light grey bands in
   particular looked busy rather than deep.

   It now appears ONLY on the two lighter blues:

       --brand-navy  #0A0A8C   .section-navy, .reg-cta-section,
                               .quick-links-section
       --mid-bg      #0F0F6B   .stats-section

   Not on the deep navy (--dark-bg #07073D), where the marks would be
   nearly invisible anyway, and not on any light band. Restraint is the
   whole point: it should read as an accent on a few blocks, not as
   wallpaper on all of them.

   HOW IT IS BUILT

   An inline SVG data URI, not an image file — no HTTP request, and it
   scales at any density without a @2x asset.

   Declared as background-image on its own, NOT the background shorthand.
   The shorthand would wipe out the background-colour set earlier in the
   file; the longhand layers on top of it.

   CONTRAST IS UNAFFECTED. White at 4% over --mid-bg shifts the surface
   from rgb(15,15,107) to rgb(25,25,113): white text goes 16.14:1 to
   14.85:1, and the muted grey 6.06:1 to 5.57:1. Worst case across both
   blues is 5.14:1, clear of AA. Measured, not assumed.
   ------------------------------------------------------------ */

:root {
  --texture-plus: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.section-navy,
.reg-cta-section,
.quick-links-section,
.stats-section {
  background-image: var(--texture-plus);
  background-repeat: repeat;
}

/*
 * Two tile sizes so two textured bands never stack in perfect register.
 * When they align, the eye starts reading a grid, which is the opposite
 * of the point.
 */
.section-navy,
.quick-links-section { background-size: 60px 60px; }

.reg-cta-section,
.stats-section { background-size: 84px 84px; }

/*
 * Explicitly cleared. v0.4.1 textured these; leaving the declarations
 * here rather than deleting them documents the decision, and protects
 * against a stale cached stylesheet.
 */
.news-section,
.page-hero,
.hero-section,
.section-light,
.programs-section,
.sponsors-section,
.field-status-section,
#site-footer { background-image: none; }

/*
 * The closure banner stays plain. It is the one component whose entire
 * job is to be read instantly in a car park in the rain, and decoration
 * behind urgent text is a cost with no benefit.
 */
.mnbl-alert { background-image: none; }

/*
 * Anyone who has asked their operating system for more contrast has told
 * us, in effect, that faint decorative marks work against them.
 */
@media (prefers-contrast: more) {
  .section-navy,
  .reg-cta-section,
  .quick-links-section,
  .stats-section { background-image: none; }
}

/*
 * The reference painted this same texture on .reg-cta-section via a
 * ::before overlay. That layer is now redundant — both together would
 * double the opacity on the one band that already had it.
 */
.reg-cta-section::before { background-image: none; }

/* ------------------------------------------------------------
   Status legend — v0.4.2
   ------------------------------------------------------------
   The chip column was 6.5rem wide against pill-shaped badges that are
   only about 5rem, so the labels floated. A fixed column plus a right
   edge keeps the three coloured chips in a straight line under the
   dashed "no badge" chip, which is what makes the legend scannable:
   colour on the left, meaning on the right.
   ------------------------------------------------------------ */
.mnbl-key__row { align-items: center; }
.mnbl-key__row dt {
  min-width: 7.5rem;
  display: flex;
  justify-content: flex-start;
}

/* ============================================================
   BASEBALL-CARD PROGRAM CARDS — v0.4.3
   ============================================================
   Alternative program card, switched on with MNBL_USE_BASEBALL_CARDS
   in functions.php. Front: framed photo window and a name plate, like
   a collectible card. Back: a stat line and the program details.

   Both faces share one grid cell, so the card is always as tall as
   its taller face — flipping never changes the height and nothing
   below it shifts. Hover only lifts the card; flipping is a click,
   tap, or keypress (assets/js/program-cards.js).
   ------------------------------------------------------------ */
.bb-card {
  perspective: 1400px;
  color: var(--text-dark);
  transition: translate 0.3s ease;
}
.bb-card:hover { translate: 0 -4px; }

.bb-card__inner {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  /* Symmetric easing: the card is edge-on at exactly half the time, which is
     when the faces swap (below). */
  transition: transform var(--bb-flip, 0.6s) cubic-bezier(0.45, 0, 0.55, 1);
}
.bb-card.is-flipped .bb-card__inner { transform: rotateY(180deg); }

.bb-card__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}
.bb-card:hover .bb-card__face { box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.bb-card__back { transform: rotateY(180deg); }

/*
 * Safari ignores backface-visibility on parts of a face that get their own
 * layer (the photo, the name plate, the pennant), so they showed through the
 * other side mirrored, and covered the bottom of the details. The face that
 * is turned away is hidden outright instead, switching halfway through the
 * turn when the card is edge-on. The swap time must match the turn's easing:
 * with an ease-out turn the card went edge-on early and both faces were
 * hidden until the swap, so the card vanished mid-flip.
 */
.bb-card__front,
.bb-card__back { transition: box-shadow 0.3s ease, visibility 0s linear calc(var(--bb-flip, 0.6s) / 2); }
@media (prefers-reduced-motion: reduce) {
  /* The turn is instant here, so the swap must be too. */
  .bb-card__front,
  .bb-card__back { transition-delay: 0s !important; }
}
.bb-card__back,
.bb-card.is-flipped .bb-card__front { visibility: hidden; }
.bb-card.is-flipped .bb-card__back { visibility: visible; }

/* --- Front --- */
.bb-card__front {
  background: var(--brand-navy);
  padding: 0.625rem;
}
.bb-card--red .bb-card__front { background: var(--brand-red-surface); }

.bb-card__photo {
  position: relative;
  flex: 1;
  min-height: 13rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: calc(var(--radius-lg) - 0.375rem);
}
.bb-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bb-card__icon svg { width: 5.5rem; height: 5.5rem; color: rgba(255,255,255,0.85); }

.bb-card__pennant {
  position: absolute;
  top: 0.75rem;
  left: 0;
  z-index: 3;
  padding: 0.3rem 1.1rem 0.3rem 0.75rem;
  background: var(--brand-red-surface);
  color: #fff;
  font-family: var(--font-subheading);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.5rem) 50%, 100% 100%, 0 100%);
}
.bb-card--red .bb-card__pennant { background: var(--brand-navy); }

/* Name plate overlaps the bottom of the photo window. */
.bb-card__plate {
  position: relative;
  z-index: 3;
  margin: -1.5rem 0.5rem 0;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  text-align: center;
}
.bb-card__title,
.programs-section h3.bb-card__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--brand-navy);
}
.bb-card__ages {
  margin-top: 0.2rem;
  font-family: var(--font-subheading);
  font-size: 0.8rem;
  color: var(--text-muted-on-light);
}

/* --- Flip control (one on each face) --- */
.bb-card__flip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 44px;
  margin-top: 0.5rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-subheading);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.bb-card__flip-icon { font-size: 1.05rem; line-height: 1; }
.bb-card__flip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bb-card__flip--back { color: var(--brand-navy); margin-top: 0.75rem; }
.bb-card__flip--back:focus-visible { outline-color: var(--brand-navy); }

/* --- Back --- */
.bb-card__back {
  background: #fff;
  border: 6px solid var(--brand-navy);
  padding: 1rem 1rem 0.5rem;
}
.bb-card--red .bb-card__back { border-color: var(--brand-red-surface); }

.bb-card__back-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-navy);
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--brand-red-surface);
}

/* The "stat line" — the box of numbers on the back of a trading card. */
.bb-card__statline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0.85rem 0 0;
  border: 1px solid #D9D9E6;
  border-radius: var(--radius);
  text-align: center;
}
.bb-card__statline > div { padding: 0.45rem 0.25rem; }
.bb-card__statline > div + div { border-left: 1px solid #D9D9E6; }
.bb-card__statline dt {
  font-family: var(--font-subheading);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-on-light);
}
.bb-card__statline dd {
  margin: 0.1rem 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--brand-navy);
}

.bb-card__desc {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted-on-light);
}

.bb-card__subhead {
  margin-top: 0.85rem;
  font-family: var(--font-subheading);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-red-text);
}
.bb-card__divisions {
  list-style: none;
  margin-top: 0.3rem;
  font-size: 0.82rem;
}
.bb-card__divisions li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px dotted #D9D9E6;
}
.bb-card__div-ages { color: var(--text-muted-on-light); white-space: nowrap; }

.bb-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
}
.bb-card__btn {
  flex: 1 1 auto;
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
}

/* --- Without JavaScript: no flipping, both faces stacked and readable. --- */
.no-js .bb-card__inner { transform: none; }
.no-js .bb-card__face {
  grid-area: auto;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  cursor: auto;
}
.no-js .bb-card__back { transform: none; margin-top: 0.75rem; visibility: visible; }
.no-js .bb-card__flip { display: none; }

/* ------------------------------------------------------------
   "Serving the Community Since …" line under the stats band.
   Same type treatment as the stat labels, so it reads as part of
   the band rather than a separate announcement.
   ------------------------------------------------------------ */
.stats-since {
  margin-top: 2.5rem;
  text-align: center;
  font-family: var(--font-subheading);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stats-since span { color: #fff; }

/* ------------------------------------------------------------
   News posts copied from Facebook — v0.4.3
   A quiet source tag on the card, and a link back to the
   original on the article. Otherwise identical to any news post.
   ------------------------------------------------------------ */
.news-source { white-space: nowrap; }
.news-fb-link { margin-top: 2rem; }
.news-fb-link .btn svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------
   Sponsor carousel — logos at an equal visual size (v0.4.3)
   ------------------------------------------------------------
   Every tile is the same size. Inside it, mnbl_sponsor_logo()
   sizes each logo to the same area for its proportions and hands
   the result over as --logo-w / --logo-h, so a square crest and a
   long wordmark carry the same visual weight. On small screens the
   whole row scales down together.
   ------------------------------------------------------------ */
.sponsors-track .sponsor-logo-item {
  width: 180px;
  height: 88px;
}
.sponsors-track .sponsor-logo-img {
  --logo-scale: 1;
  width: calc(var(--logo-w) * var(--logo-scale) * 1px);
  height: calc(var(--logo-h) * var(--logo-scale) * 1px);
  object-fit: contain;
}
@media (max-width: 639px) {
  .sponsors-track .sponsor-logo-item { width: 150px; height: 78px; }
  .sponsors-track .sponsor-logo-img { --logo-scale: 0.82; }
}

/*
 * Keep the carousel's off-screen labels inside it. The screen-reader
 * text in each tile is absolutely positioned; without a positioned
 * ancestor it escaped the overflow clip and made the page thousands of
 * pixels wide, which some phones let visitors pan into.
 */
.sponsors-carousel-wrap { position: relative; }

/* Site credit — its own line on phones, after the copyright on wider screens. */
@media (max-width: 639px) {
  .footer-credit { display: block; margin-top: 0.25rem; }
  .footer-credit__sep { display: none; }
}

/* ------------------------------------------------------------
   Grand Slam sponsor cards — above the homepage carousel
   ------------------------------------------------------------
   About one and a half times a carousel tile, at full strength
   rather than the carousel's dimmed resting state, with a red top
   edge to mark the top tier. Logos use the same equal-area sizing
   as the carousel, scaled up.
   ------------------------------------------------------------ */
.sponsors-featured {
  margin-bottom: 2.25rem;
  text-align: center;
}
.sponsors-featured__label {
  margin-bottom: 0.9rem;
  font-family: var(--font-subheading);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Colour comes from the section's muted text, which keeps it quieter
     than the red "Our Sponsors" label above. */
}
.sponsors-featured__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}
.sponsor-featured-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 136px;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e8e8f0;
  border-top: 3px solid var(--brand-red-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.sponsor-featured-card:hover,
a.sponsor-featured-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
}
a.sponsor-featured-card:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 3px; }
.sponsor-featured-card .sponsor-logo-img {
  --logo-scale: 1.55;
  width: calc(var(--logo-w) * var(--logo-scale) * 1px);
  height: calc(var(--logo-h) * var(--logo-scale) * 1px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sponsor-featured-card__name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--brand-navy);
}
@media (max-width: 639px) {
  .sponsors-featured__list { gap: 0.75rem; flex-wrap: nowrap; }
  .sponsors-featured__list li { flex: 1 1 0; min-width: 0; }
  .sponsor-featured-card { width: 100%; height: 104px; padding: 0.75rem; }
  .sponsor-featured-card .sponsor-logo-img { --logo-scale: 1.05; }
}

/* ------------------------------------------------------------
   Program cards — photos, overlay, centring (v0.4.5)
   ------------------------------------------------------------ */

/* Photos keep the league's red-and-blue wash from the placeholder
   artwork, laid over the image so the cards stay on-brand. */
.bb-card__photo--image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,0,0,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(10,10,140,0.40) 0%, transparent 55%),
    linear-gradient(135deg, rgba(7,7,61,0.45) 0%, rgba(15,15,107,0.10) 50%, rgba(7,7,61,0.50) 100%);
}
.bb-card__photo--image .bb-card__img { object-position: center 22%; }

/* Fewer cards than columns? Centre them instead of leaving a gap on the right. */
.programs-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.programs-grid > * { flex: 0 1 100%; min-width: 0; }
@media (min-width: 640px)  { .programs-grid > * { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1024px) { .programs-grid > * { flex-basis: calc((100% - 4.5rem) / 4); } }

/* ------------------------------------------------------------
   Program cards — real baseball-card proportions (v0.4.5)
   ------------------------------------------------------------
   A trading card is 2.5" x 3.5", i.e. 5:7. Both faces hold that
   shape exactly. The front's photo fills whatever the plate and
   flip control leave; on the back the title and buttons stay put
   and the details between them scroll if a program has a lot.
   ------------------------------------------------------------ */
.bb-card { aspect-ratio: 5 / 7; }
.bb-card__inner,
.bb-card__face { height: 100%; min-height: 0; }
.bb-card__face { overflow: hidden; }
.bb-card__photo { min-height: 0; }

.bb-card__back { padding: 0.85rem 0.9rem 0.25rem; }
.bb-card__back-title { font-size: 1.05rem; padding-bottom: 0.35rem; }
.bb-card__back-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Room for the scrollbar, so it never sits on top of the division ages. */
  margin-right: -0.5rem;
  padding: 0 0.85rem 0.5rem 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}
.bb-card__back-body:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; border-radius: 4px; }
.bb-card__statline { margin-top: 0.6rem; }
.bb-card__statline > div { padding: 0.35rem 0.2rem; }
.bb-card__desc { margin-top: 0.6rem; font-size: 0.8rem; line-height: 1.45; }
.bb-card__subhead { margin-top: 0.6rem; }
.bb-card__divisions { font-size: 0.78rem; }
.bb-card__divisions li { padding: 0.18rem 0; }
.bb-card__actions { margin-top: 0; padding-top: 0.6rem; }
.bb-card__btn { padding: 0.55rem 0.9rem; }
.bb-card__flip { min-height: 40px; margin-top: 0.15rem; }
.bb-card__flip--back { margin-top: 0.2rem; }

/* Card sizes: 300px wide on desktop, never wider than 340px on a phone. */
.programs-grid > .bb-card { max-width: 340px; }
@media (min-width: 1024px) { .programs-grid > .bb-card { flex: 0 1 300px; } }

/* Without JavaScript both faces stack, so the fixed shape has to go. */
.no-js .bb-card { aspect-ratio: auto; }
.no-js .bb-card__inner, .no-js .bb-card__face { height: auto; }
.no-js .bb-card__back-body { overflow: visible; }

/* A fade at the foot of a card back's details while more is below. */
.bb-card__back-body.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* League-wide message in the closure banner (Field Status → Whole League). */
.mnbl-alert__message {
  margin: 0.35rem 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

/* ------------------------------------------------------------
   Header menu at small-laptop widths (v0.4.9)
   With text 10% larger, seven menu items plus Register no longer
   fit between 1024px and 1280px: "Field Status" broke onto two
   lines and the Register button ran off the edge.
   ------------------------------------------------------------ */
.nav-links a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-inner { gap: 1rem; padding: 0 1.25rem; }
  .nav-links { gap: 0.8rem; } /* 0.8 (was 1.1) since "Family" joined the menu, so Register fits at 1024px. */
  .nav-links a { letter-spacing: 0.06em; }
  .nav-register .btn { padding: 0.75rem 1.25rem; }
}

/* Hero: keep its content clear of the fixed 80px header at the top and the
   "Scroll" cue at the bottom. With the larger type the content is nearly a
   full screen tall, and when centred it slid under both. */
.hero-content { padding: calc(80px + 2rem) 1.5rem 7.5rem; }

/* ------------------------------------------------------------
   Little League age chart — [age_chart] (v0.5.0)
   A real table: 12 months + AGE. On a phone it scrolls sideways
   inside its box with the AGE column pinned to the right edge.
   ------------------------------------------------------------ */
.age-chart { margin: 2.5rem 0; }
.prose .age-chart__title { margin-top: 0; }
.age-chart__intro { color: var(--text-muted-on-light); }
.age-chart__lookup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #e2e4ea;
  border-radius: var(--radius);
}
.age-chart__lookup label { font-weight: 700; font-size: 0.9rem; color: var(--brand-navy); }
.age-chart__lookup select {
  min-height: 44px;
  padding: 0 0.6rem;
  font-size: 1rem;
  border: 1px solid #c3c4c7;
  border-radius: 6px;
  background: #fff;
}
.prose .age-chart__result,
.age-chart__result { flex: 1 1 100%; margin: 0; font-weight: 700; color: var(--brand-navy); }
.age-chart__scroll {
  overflow-x: auto;
  border: 1px solid #e2e4ea;
  border-radius: var(--radius);
  background: #fff;
}
.age-chart__scroll:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 2px; }
.age-chart__table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-align: center;
  font-size: 0.85rem;
}
.age-chart__table th,
.age-chart__table td { padding: 0.45rem 0.35rem; border-bottom: 1px solid #eef0f4; }
.age-chart__table thead th {
  background: var(--dark-bg);
  color: #fff;
  font-family: var(--font-subheading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.age-chart__table tbody tr:nth-child(even) td { background: #f7f8fb; }
.age-chart__age {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 3.5rem;
  background: var(--brand-navy) !important;
  color: #fff;
  font-weight: 800;
  box-shadow: -6px 0 8px -6px rgba(0,0,0,0.35);
}
.age-chart__table thead .age-chart__age { background: var(--dark-bg) !important; }
.age-chart__table tr.is-match td { background: #fff4d6 !important; }
.age-chart__table tr.is-match td.is-match { background: var(--brand-red-surface) !important; color: #fff; font-weight: 800; }
.age-chart__table tr.is-match .age-chart__age { background: var(--brand-red-surface) !important; }
.age-chart__note { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted-on-light); }

/* ------------------------------------------------------------
   Announcement strip (v0.5.0)
   Lives inside the fixed header, under the menu. nav.js sets
   --announce-h so the top of each page moves down to match.
   ------------------------------------------------------------ */
.has-announcement #site-header {
  height: auto;
  flex-direction: column;
  align-items: stretch;
}
.has-announcement .nav-inner { height: 80px; }
.site-announcement {
  background: var(--accent-hover); /* #CC0000 — white text passes AA */
  color: #fff;
}
.site-announcement__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.55rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}
.site-announcement__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.site-announcement__link svg { width: 14px; height: 14px; }
.site-announcement__link:hover,
.site-announcement__link:focus-visible { text-decoration-thickness: 2px; }
.site-announcement__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.has-announcement .page-hero { padding-top: calc(7rem + var(--announce-h, 2.5rem)); }
.has-announcement .hero-content { padding-top: calc(80px + 2rem + var(--announce-h, 2.5rem)); }
@media (max-width: 600px) {
  .site-announcement__inner { font-size: 0.875rem; padding: 0.5rem 1rem; }
}

/* ------------------------------------------------------------
   Fields page — grouped by park, with the aerial map (v0.5.0)
   Maps are portrait: beside the cards on wide screens, above
   them on phones.
   ------------------------------------------------------------ */
.park-group { margin-bottom: 3.5rem; }
.park-group + .park-group { padding-top: 2.5rem; border-top: 1px solid rgba(10,10,140,0.12); }
.park-group__head { margin-bottom: 1.25rem; }
.park-group__title {
  color: var(--brand-navy);
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  margin: 0 0 0.35rem;
}
.park-group__address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0;
  color: var(--text-muted-on-light);
}
.park-group__address svg { width: 16px; height: 16px; color: var(--brand-red); }
.park-group__address a { color: var(--brand-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.park-group__body.has-map {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .park-group__body.has-map { grid-template-columns: minmax(260px, 340px) 1fr; }
  .park-group__body.has-map .park-group__fields { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .park-group__body.has-map { grid-template-columns: 360px 1fr; }
}
.park-map { margin: 0; }
.park-map a { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 18px rgba(7,7,61,0.15); }
.park-map a:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 3px; }
.park-map__img { display: block; width: 100%; height: auto; }
.park-map figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted-on-light); }
@media (max-width: 899px) {
  .park-map { max-width: 420px; margin-inline: auto; }
}

/* Snack stands, under each park on the Fields page (v0.5.0) */
.snack-stands { margin-top: 2rem; }
.snack-stands__title { color: var(--brand-navy); font-size: clamp(1.3rem, 3vw, 1.6rem); margin: 0 0 1rem; }
.snack-stands__grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .snack-stands__grid { grid-template-columns: repeat(2, 1fr); } }
.snack-card {
  background: #fff;
  color: var(--text-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(7,7,61,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.snack-card__photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.snack-card__body { padding: 1.25rem; }
.snack-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.snack-card__name { margin: 0; font-size: 1.3rem; color: var(--brand-navy); }
.snack-card__where { display: flex; align-items: center; gap: 0.35rem; margin: 0.4rem 0 0; color: var(--text-muted-on-light); font-size: 0.95rem; }
.snack-card__where svg { width: 14px; height: 14px; color: var(--brand-red); flex-shrink: 0; }
.snack-card__menu { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid rgba(10,10,140,0.1); }
.snack-card__menu li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed rgba(10,10,140,0.12); }
.snack-card__price { font-weight: 700; white-space: nowrap; }
/* Stand badges: green open, grey closed — a closed stand is not an alert. */
.badge-stand-open   { background: #15803d; }
.badge-stand-closed { background: var(--status-tbd-strong, #4b5563); }

/* Highlighted news (v0.5.0) */
.news-highlight-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 20px;
  background: #fff;
  color: var(--brand-navy);
  font-family: var(--font-subheading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* The News page sets every card's text to white (.section-light .news-card *);
   the badge is a white pill, so it needs its navy text back. */
.news-card .news-highlight-badge,
.section-light .news-card .news-highlight-badge { color: var(--brand-navy); }
.news-card.is-highlighted { outline: 3px solid var(--brand-red); outline-offset: -3px; }
.news-highlighted-title { color: var(--brand-navy); font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin: 0 0 1rem; }
.news-grid--highlighted { margin-bottom: 2.5rem; }

/* Volunteer section (v0.5.0): land below the fixed header from #volunteer links */
#volunteer, #volunteer-form { scroll-margin-top: calc(80px + var(--announce-h, 0px) + 1rem); }

/* Become a Sponsor tiers (v0.5.0): limit, preference, note */
.mnbl-tier__limit {
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
  margin: 0.25rem 0 0.75rem;
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(10,10,140,0.08);
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 0.85rem;
}
.mnbl-tier__pref { margin: 0.75rem 0 0; font-size: 0.95rem; }
.mnbl-tier__note { margin: 0.5rem 0 0; font-size: 0.9rem; font-style: italic; color: var(--text-muted-on-light); }

/* Homepage volunteer band (v0.5.5): the label sits at the container's left
   edge like every other section's; the heading, text and buttons are centred. */
/* White, so it reads as its own band between the navy Register section and
   the light-gray Sponsors section, instead of sharing the Sponsors gray. */
.volunteer-band { padding-block: 4rem; background: #fff; }
.volunteer-band h2 { text-align: center; }
.volunteer-band__text { color: var(--text-muted-on-light); margin: 0.75rem auto 1.75rem; max-width: 560px; text-align: center; }
.volunteer-band__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1rem; }
.volunteer-band__actions .mnbl-placeholder { margin: 0; }

/* ------------------------------------------------------------
   Programs page — summary beside the baseball card (v0.5.6)
   Sides alternate down the page; on phones it's one column,
   summary first, card below.
   ------------------------------------------------------------ */
.program-feature {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.program-feature__card { display: flex; justify-content: center; }
.program-feature__card .bb-card,
.program-feature__card > * { width: 100%; max-width: 300px; }
@media (min-width: 900px) {
  .program-feature { grid-template-columns: minmax(0, 1fr) 300px; gap: 4rem; }
  .program-feature--reverse { grid-template-columns: 300px minmax(0, 1fr); }
  .program-feature--reverse .program-feature__card { order: -1; }
}
.program-feature__title { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
.program-feature__title a { color: var(--brand-navy); text-decoration: none; }
.program-feature__title a:hover,
.program-feature__title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.program-feature__ages {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 3px 12px;
  border-radius: 20px;
  background: rgba(10,10,140,0.08);
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 0.9rem;
}
.program-feature__lead { margin: 0 0 0.75rem; font-weight: 700; color: var(--text-dark); }
.program-feature__text { margin: 0 0 1rem; color: var(--text-muted-on-light); line-height: 1.65; }
.program-feature__divisions { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.program-feature__divisions li {
  padding: 4px 10px;
  border: 1px solid rgba(10,10,140,0.2);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--brand-navy);
  background: #fff;
}
.program-feature__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.programs-group .program-feature + .program-feature { margin-top: 3rem; }

/* ------------------------------------------------------------
   Program cards — the site's "+" texture on the coloured frame (v0.5.8)
   Same motif as --texture-plus on the navy bands, but at card scale:
   a 40px tile and 15% white instead of 60px / 4%, so the marks read
   clearly on a 300px card without zooming. Layered with background-image so the navy / red
   background colour underneath is kept.
   ------------------------------------------------------------ */
:root {
  --texture-plus-card: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* The red card's colour is set with the background shorthand, which would
   clear the texture, so it is named here too. */
.bb-card__front,
.bb-card--red .bb-card__front {
  background-image: var(--texture-plus-card);
  background-size: 40px 40px;
  background-repeat: repeat;
}

/* Softball card photo: the player's helmet sits at the very top of the shot,
   so crop from the top to keep it clear of the pennant (v0.5.9). */
.bb-card--red .bb-card__photo--image .bb-card__img { object-position: center top; }

/* ------------------------------------------------------------
   Page not found — "That one went foul" (v0.6.0)
   ------------------------------------------------------------ */
.notfound {
  background: linear-gradient(135deg, var(--dark-bg) 0%, var(--mid-bg) 55%, var(--dark-bg) 100%);
  background-image: var(--texture-plus), linear-gradient(135deg, var(--dark-bg) 0%, var(--mid-bg) 55%, var(--dark-bg) 100%);
  border-bottom: 4px solid var(--brand-red);
  padding: calc(80px + 3.5rem) 0 5rem;
  text-align: center;
  color: #fff;
}
.notfound__inner { max-width: 820px; }
.notfound .section-label { justify-content: center; }
.notfound__code {
  display: flex; align-items: center; justify-content: center; gap: 0.1em;
  margin: 0 0 1rem;
  font-family: var(--font-heading); font-weight: 800; line-height: 1;
  font-size: clamp(6rem, 22vw, 11rem);
  color: #fff;
}
.notfound__ball {
  width: 0.78em; height: 0.78em;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
  animation: notfound-spin 4.5s cubic-bezier(0.2, 0.6, 0.3, 1) 1 both; /* spins and slows to a stop, like a ball rolling to rest (WCAG 2.2.2: under 5s) */
}
@keyframes notfound-spin { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } }
@media (prefers-reduced-motion: reduce) { .notfound__ball { animation: none; } }
.notfound__title { color: #fff; font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 0.25rem 0 1rem; }
.notfound__text { color: rgba(255,255,255,0.78); max-width: 36em; margin: 0 auto 2.25rem; line-height: 1.65; }
.notfound__links {
  list-style: none; margin: 0 0 2.25rem; padding: 0;
  display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  text-align: left;
}
.notfound__links a {
  display: flex; flex-direction: column; gap: 0.2rem; height: 100%;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-left: 3px solid var(--brand-red);
  border-radius: var(--radius);
  color: #fff; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.notfound__links a:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.notfound__links a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.notfound__links strong { font-family: var(--font-heading); font-size: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase; }
.notfound__links span { font-size: 0.9rem; color: rgba(255,255,255,0.72); }
.notfound__home { margin: 0; }

/* ------------------------------------------------------------
   Homepage countdown band (v0.6.1) — News → Homepage Countdown
   ------------------------------------------------------------ */
.countdown-band {
  background-color: var(--dark-bg);
  background-image: var(--texture-plus), linear-gradient(120deg, var(--dark-bg) 0%, var(--mid-bg) 60%, var(--dark-bg) 100%);
  background-size: 40px 40px, auto;
  border-top: 4px solid var(--brand-red);
  border-bottom: 4px solid var(--brand-red);
  color: #fff;
  padding: 3rem 0;
}
.countdown-band__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 960px) {
  .countdown-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
}
.countdown-band__title { color: #fff; margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; }
.countdown-band__when { margin: 0.6rem 0 0; color: rgba(255,255,255,0.85); font-weight: 700; }
.countdown-band__intro { margin: 0.4rem 0 0; color: rgba(255,255,255,0.72); max-width: 34em; }
.countdown-band__clock { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
@media (min-width: 960px) { .countdown-band__clock { align-items: flex-end; } }
.countdown-band__units {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem;
  width: 100%; max-width: 460px;
}
.countdown-band__unit {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.9rem 0.4rem 0.7rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-top: 3px solid var(--brand-red);
  border-radius: var(--radius);
}
.countdown-band__num {
  font-family: var(--font-heading); font-weight: 800; line-height: 1;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  font-variant-numeric: tabular-nums; /* digits don't jiggle as they change */
  color: #fff;
}
.countdown-band__label {
  margin-top: 0.35rem;
  font-family: var(--font-subheading); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.countdown-band__done { margin: 0; font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; }

/* Back to top (v0.6.1): a baseball with an up arrow, bottom-right */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900;
  width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
  transition: transform 0.2s ease, opacity 0.2s ease;
  animation: to-top-in 0.25s ease-out;
}
.to-top[hidden] { display: none; }
.to-top svg { display: block; width: 100%; height: 100%; transition: transform 0.4s ease; }
.to-top:hover { transform: translateY(-3px); }
.to-top:hover svg { transform: rotate(-25deg); }
.to-top:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 3px; }
@keyframes to-top-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top svg { animation: none; transition: none; } }
@media (max-width: 600px) { .to-top { width: 46px; height: 46px; right: 1rem; bottom: 1rem; } }

/* Field Status dot in the main menu (v0.6.2): red = a field is closed, amber = modified. Absent when all open. */
/* Dot plus its ring is as tall as the capital letters and centred on them
   (0.335em lifts its middle to the middle of the caps in this font), so it
   clears the red hover underline. */
.nav-field-dot {
  --dot: 6px;
  display: inline-block;
  width: var(--dot); height: var(--dot);
  margin-left: 0.5em;
  border-radius: 50%;
  vertical-align: calc(0.335em - var(--dot) / 2);
  background: var(--status-closed);
  box-shadow: 0 0 0 2px rgba(255,0,0,0.28);
}
.nav-field-dot--modified { background: var(--status-modified); box-shadow: 0 0 0 2px rgba(245,158,11,0.3); }
.mobile-menu .nav-field-dot { --dot: 10px; box-shadow: 0 0 0 3px rgba(255,0,0,0.28); }
.mobile-menu .nav-field-dot--modified { box-shadow: 0 0 0 3px rgba(245,158,11,0.3); }

/* Phone menu (v0.6.2): sit above the fixed header (z 1000) so the logo and
   hamburger don't show through, and drop the default list bullets. */
.mobile-menu { z-index: 1001; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }

/* Contrast (v0.6.5): small red labels on light backgrounds use a deeper red
   so they pass WCAG AA (5.2:1 on #F5F5F5; bright red was 3.7:1). The dash
   beside them stays brand red — it is decoration, not text. */
.section-light .section-label,
.programs-section .section-label,
.field-status-section .section-label,
.sponsors-section .section-label { color: #D10000; }
.mnbl-allclear strong { color: #166534; } /* 5.9:1 on the pale green */

/* Smooth page changes (v0.6.6): pages fade into each other instead of
   flashing white. Browsers without support just load the page as before. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Countdown "Add to Calendar" (v0.6.6) */
.countdown-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
@media (min-width: 960px) { .countdown-band__actions { justify-content: flex-end; } }
.cal-add { position: relative; }
.cal-add__toggle { list-style: none; }
.cal-add__toggle::-webkit-details-marker { display: none; }
.cal-add__toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.cal-add[open] .cal-add__toggle { border-color: var(--brand-red); background: rgba(255,0,0,0.1); }
.cal-add__menu {
  position: absolute; z-index: 20;
  top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%);
  min-width: 15rem; margin: 0; padding: 0.4rem; list-style: none;
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
@media (min-width: 960px) { .cal-add__menu { left: auto; right: 0; transform: none; } }
.cal-add__menu a {
  display: block; padding: 0.65rem 0.85rem; border-radius: calc(var(--radius) - 2px);
  color: var(--brand-navy); font-weight: 700; text-decoration: none;
}
.cal-add__menu a:hover, .cal-add__menu a:focus-visible { background: #EEF0FA; }
.cal-add__menu a:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: -2px; }
.cal-add__menu small { display: block; font-weight: 400; font-size: 0.8rem; color: #4B5563; }

/* Field Status updates itself (v0.6.6): a quiet line under the page title. */
.field-live-note { margin: 0.75rem 0 0; font-size: 0.85rem; color: rgba(255,255,255,0.72); display: flex; align-items: center; gap: 0.5rem; }
.field-live-note[hidden] { display: none; }
.field-live-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.3); }

/* ------------------------------------------------------------
   The site's own forms (v0.6.8; contact added v0.6.9) — [mnbl_form]
   ------------------------------------------------------------ */
.mnbl-volunteer { max-width: 820px; }
.mnbl-volunteer__intro { margin-bottom: 1.75rem; }
.mnbl-volunteer__intro p { font-size: 1.08rem; }
.mnbl-volunteer__facts {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: 0.75rem; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .mnbl-volunteer__facts { grid-template-columns: repeat(3, 1fr); } }
.mnbl-volunteer__facts li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.9rem 1rem; background: #fff; border-radius: var(--radius);
  border: 1px solid #E3E5EE; border-top: 3px solid var(--brand-red-surface);
}
.mnbl-volunteer__facts svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--brand-navy); margin-top: 2px; }
.mnbl-volunteer__facts strong { display: block; color: var(--brand-navy); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.05em; font-size: 1rem; }
.mnbl-volunteer__facts span { font-size: 0.92rem; color: #4B5563; line-height: 1.4; }
.mnbl-form-card {
  background: #fff; border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 10px 30px rgba(10,10,140,0.08); border: 1px solid #E3E5EE;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.mnbl-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* .mnbl-form prefix: the Contact page sets the form inside article (prose) text, whose paragraph spacing would win. */
.mnbl-form .mnbl-form__note { margin: 0 0 1rem; font-size: 0.88rem; color: #4B5563; }
.mnbl-form__req { color: var(--brand-red-surface); }
.mnbl-form__summary {
  margin: 0 0 1.25rem; padding: 0.85rem 1rem; border-radius: var(--radius);
  background: #FEF2F2; border: 1px solid #FECACA; border-left: 4px solid #B91C1C; color: #7F1D1D; font-weight: 600;
}
.mnbl-form__summary:focus { outline: 2px solid #B91C1C; outline-offset: 2px; }

.mnbl-form__section { border: 0; margin: 0; padding: 1.75rem 0 0.25rem; border-top: 1px solid #E5E7EB; min-width: 0; }
.mnbl-form__section:first-of-type { border-top: 0; padding-top: 0.5rem; }
.mnbl-form__section--plain { border-top: 0; padding-top: 0; }
.mnbl-form-card--contact { margin-top: 1.5rem; }
.mnbl-form__section > legend,
.mnbl-form__group > legend { float: left; width: 100%; padding: 0; }
.mnbl-form__section > legend + *,
.mnbl-form__group > legend + * { clear: both; }
.mnbl-form__section-title {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem;
  font-family: var(--font-heading); font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-navy);
}
.mnbl-form__section-title span {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--brand-red-surface); color: #fff; font-size: 0.95rem; letter-spacing: 0;
}

.mnbl-form__field { margin-bottom: 1.25rem; }
.mnbl-form__field[hidden] { display: none; }
.mnbl-form__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.mnbl-form__label { display: block; margin-bottom: 0.35rem; font-weight: 700; color: var(--brand-navy); }
.mnbl-form .mnbl-form__help { margin: -0.1rem 0 0.5rem; font-size: 0.88rem; color: #4B5563; }
.mnbl-form input[type="text"],
.mnbl-form input[type="email"],
.mnbl-form input[type="tel"],
.mnbl-form textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.85rem;
  font: inherit; font-size: 16px; color: #1F2937; background: #fff;
  border: 1px solid #C9CBD6; border-radius: var(--radius);
}
.mnbl-form textarea { min-height: 110px; resize: vertical; }
.mnbl-form input:focus-visible,
.mnbl-form textarea:focus-visible { outline: none; border-color: var(--brand-navy); box-shadow: 0 0 0 2px rgba(10,10,140,0.25); }

.mnbl-form__choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mnbl-form__choices--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mnbl-choice {
  display: flex; align-items: center; gap: 0.6rem; min-height: 46px; padding: 0.55rem 0.9rem;
  background: #fff; border: 1.5px solid #D5D8E3; border-radius: var(--radius); cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.mnbl-choice:hover { border-color: #9EA3C4; }
.mnbl-choice input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: var(--brand-navy); }
.mnbl-choice:has(input:checked) { border-color: var(--brand-navy); background: #EEF0FA; }
.mnbl-choice:has(input:focus-visible) { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.mnbl-choice--consent { align-items: flex-start; width: 100%; line-height: 1.45; }
.mnbl-choice--consent input { margin-top: 2px; }
.mnbl-form__other { margin-top: 0.6rem; }
.mnbl-form__other[hidden] { display: none; }

.mnbl-form .mnbl-form__error { margin: 0.4rem 0 0; color: #B91C1C; font-size: 0.9rem; font-weight: 600; }
.mnbl-form__error[hidden] { display: none; }
.mnbl-form__field.has-error input[type="text"],
.mnbl-form__field.has-error input[type="email"],
.mnbl-form__field.has-error input[type="tel"],
.mnbl-form__field.has-error textarea,
.mnbl-form__field.has-error .mnbl-choice { border-color: #B91C1C; }

.mnbl-form__submit { padding-top: 1.25rem; border-top: 1px solid #E5E7EB; margin-top: 0.5rem; }
.mnbl-form__submit .btn { min-height: 54px; }
@media (max-width: 600px) { .mnbl-form__submit .btn { width: 100%; } }
.mnbl-form__submit .btn:disabled { opacity: 0.7; cursor: progress; transform: none; }

.mnbl-form-thanks {
  padding: 1.5rem; border-radius: var(--radius);
  background: #ECFDF3; border: 1px solid #A7E3BE; border-left: 5px solid #16A34A; color: #14532D;
}
.mnbl-form-thanks:focus { outline: 2px solid #16A34A; outline-offset: 2px; }
.mnbl-form-thanks h2 { margin: 0 0 0.5rem; color: #14532D; font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
.mnbl-form-thanks p:last-child { margin-bottom: 0; }

/* Grand Slam sponsors (v0.7.0): a band at the top of the Sponsors page, and
   their row in the tier list — larger tiles, centred. */
.sponsor-band { background: var(--surface); padding: 2.5rem 0 2.75rem; border-bottom: 1px solid #e8e8f0; }
.sponsor-band__title,
.sponsor-tier-group--featured .sponsor-tier-heading {
  justify-content: center;
  text-align: center;
}
.sponsor-band__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-subheading); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-navy);
}
.sponsor-featured-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 1.25rem;
}
.sponsor-featured-grid .sponsor-logo-item {
  width: 260px; height: 130px; max-width: calc(50% - 0.625rem);
  padding: 1.1rem 1.4rem;
  opacity: 1;
  box-shadow: 0 6px 18px rgba(10,10,140,0.07);
}
.sponsor-featured-grid .sponsor-logo-item:hover { border-color: var(--brand-red); }
/* Phones: one per row, so they stay clearly bigger than the two-up tiers below. */
@media (max-width: 600px) { .sponsor-featured-grid .sponsor-logo-item { width: min(300px, 100%); max-width: 100%; height: 120px; } }

/* Sponsors page tiles lift on hover like the homepage Grand Slam cards
   (v0.7.1). Linked tiles only — a sponsor without a website isn't clickable. */
.sponsor-tier-grid .sponsor-logo-item,
.sponsor-featured-grid .sponsor-logo-item { transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.sponsor-tier-grid a.sponsor-logo-item:hover,
.sponsor-tier-grid a.sponsor-logo-item:focus-visible,
.sponsor-featured-grid a.sponsor-logo-item:hover,
.sponsor-featured-grid a.sponsor-logo-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
}
@media (prefers-reduced-motion: reduce) {
  .sponsor-tier-grid a.sponsor-logo-item:hover,
  .sponsor-tier-grid a.sponsor-logo-item:focus-visible,
  .sponsor-featured-grid a.sponsor-logo-item:hover,
  .sponsor-featured-grid a.sponsor-logo-item:focus-visible { transform: none; }
}

/* ------------------------------------------------------------
   Family Dashboard (v0.8.0) — page-family.php, assets/js/family.js
   App-style cards on the light surface; one column on phones, two on wide screens.
   ------------------------------------------------------------ */
.family { background: var(--surface); padding-bottom: 3rem; }
.family-head {
  background-color: var(--dark-bg);
  background-image: var(--texture-plus), linear-gradient(120deg, var(--dark-bg) 0%, var(--mid-bg) 60%, var(--dark-bg) 100%);
  background-size: 40px 40px, auto;
  color: #fff; padding: calc(80px + 1.75rem) 0 1.75rem; border-bottom: 4px solid var(--brand-red);
}
.family-head .section-label { color: var(--brand-red-on-dark); }
.family-head__title { color: #fff; margin: 0.25rem 0 0.35rem; font-size: clamp(2rem, 6vw, 3rem); line-height: 1; }
.family-head__sub { margin: 0; color: rgba(255,255,255,0.8); max-width: 36em; }
.family-teams { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.1rem; }
.family-teams[hidden] { display: none; }
.family-teams__label { font-weight: 700; color: rgba(255,255,255,0.9); margin-right: 0.15rem; }
.family-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0.3rem 0.85rem;
  border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: none;
}
button.family-chip, a.family-chip { cursor: pointer; font: inherit; font-weight: 700; font-size: 0.9rem; }
.family-chip--action { background: #fff; color: var(--brand-navy); border-color: #fff; }
.family-chip--action:hover { background: #EEF0FA; }

.family-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); padding-top: 1.25rem; }
@media (min-width: 900px) {
  .family-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .family-span { grid-column: 1 / -1; }
}
.family-grid > [data-live]:empty { display: none; }
.family-card {
  color: var(--text-dark); /* set here: nothing inherited may whiten text on the white cards */
  background: #fff; border-radius: 14px; border: 1px solid #E3E5EE;
  box-shadow: 0 6px 18px rgba(10,10,140,0.06); padding: 1.15rem 1.25rem;
}
.family-card[hidden] { display: none; }
.family-card__label {
  margin: 0 0 0.75rem; font-family: var(--font-subheading); font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-navy);
}
.family-card__more { margin: 0.85rem 0 0; font-weight: 700; }
.family-card__more a { color: var(--brand-navy); text-decoration: none; }
.family-card__more a:hover { text-decoration: underline; }
.family-empty { margin: 0 0 0.75rem; color: #4B5563; }

.family-alert { border-left: 6px solid var(--status-modified); }
.family-alert--closed { border-left-color: #B91C1C; background: #FEF2F2; }
.family-alert__big { margin: 0 0 0.35rem; font-family: var(--font-heading); font-size: 1.6rem; text-transform: uppercase; color: #B91C1C; }
.family-alert p:last-child { margin-bottom: 0; }

/* Next up: the big card. */
.family-next__event { border-radius: 12px; }
.family-next__when { margin: 0; font-family: var(--font-subheading); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: #B00000; }
.family-next__what { margin: 0.15rem 0 0; font-family: var(--font-heading); font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1.05; color: var(--brand-navy); text-transform: uppercase; }
.family-next__team { margin: 0.2rem 0 0.6rem; color: #4B5563; font-weight: 600; }
.family-next__where { margin: 0 0 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 700; }
.family-next__flag { margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: 8px; font-weight: 700; background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.family-next__flag--modified { background: #FFFBEB; color: #78350F; border-color: #FDE68A; }
.family-next__flag--tbd { background: #F3F4F6; color: #374151; border-color: #E5E7EB; }
.family-next__event.is-off .family-next__what { text-decoration: line-through; text-decoration-thickness: 3px; color: #6B7280; }
.family-next__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.family-next__actions .btn { min-height: 46px; padding: 0.6rem 1.25rem; }

.family-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; background: #DCFCE7; color: #14532D; white-space: nowrap;
}
.family-badge--closed { background: #B91C1C; color: #fff; }
.family-badge--modified { background: #FDE68A; color: #78350F; }
.family-badge--tbd { background: #E5E7EB; color: #374151; }

/* The week. */
.family-week__day { margin: 0.9rem 0 0.4rem; font-size: 1rem; color: var(--brand-navy); }
.family-week__day:first-child { margin-top: 0; }
.family-week__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.family-week__item { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: #F7F8FC; }
.family-week__time { font-weight: 800; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.family-week__main { display: flex; flex-direction: column; min-width: 0; }
.family-week__what { font-weight: 700; }
.family-week__meta { font-size: 0.85rem; color: #4B5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-week__item.is-off .family-week__what { text-decoration: line-through; color: #6B7280; }
@media (max-width: 520px) {
  .family-week__item { grid-template-columns: 4.7rem minmax(0, 1fr); }
  .family-week__item > .family-badge { grid-column: 2; justify-self: start; }
}
.family-week__cals { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.family-week__cals .family-chip--action { background: #EEF0FA; border-color: #D5D8E3; }

/* Fields. */
.family-fields__ok { margin: 0 0 0.6rem; font-weight: 700; color: #166534; }
.family-fields__ok span { color: #16A34A; }
.family-fields__park { margin: 0.75rem 0 0.4rem; font-size: 0.95rem; color: var(--brand-navy); }
.family-fields__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.45rem; }
.family-field a {
  display: flex; flex-direction: column; gap: 2px; padding: 0.5rem 0.65rem; border-radius: 10px;
  text-decoration: none; background: #F0FDF4; border: 1px solid #BBF7D0; color: #14532D;
}
.family-field__name { font-weight: 800; text-transform: capitalize; }
.family-field__status { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.family-field--closed a { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.family-field--modified a { background: #FFFBEB; border-color: #FDE68A; color: #78350F; }
.family-field--tbd a { background: #F3F4F6; border-color: #E5E7EB; color: #374151; }
.family-field a:hover { filter: brightness(0.97); }

/* Stands, countdown, links, news. */
.family-stands__list, .family-news__list { list-style: none; margin: 0; padding: 0; }
.family-stands__list li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid #EEF0F5; }
.family-stands__list li:last-child { border-bottom: 0; }
.family-stands__name { font-weight: 700; }
.family-countdown__days { margin: 0; font-family: var(--font-heading); font-size: 2.4rem; line-height: 1; color: var(--brand-navy); text-transform: uppercase; }
.family-countdown__what { margin: 0.3rem 0 0; color: #4B5563; font-weight: 600; }
.family-links__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 900px) { .family-links__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.family-links__grid a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 92px; padding: 0.75rem 0.4rem; border-radius: 12px; background: #F7F8FC; border: 1px solid #E3E5EE;
  color: var(--brand-navy); text-decoration: none; text-align: center; font-weight: 700; font-size: 0.88rem; line-height: 1.2;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.family-links__grid a:hover, .family-links__grid a:focus-visible { border-color: var(--brand-navy); box-shadow: 0 8px 18px rgba(10,10,140,0.1); transform: translateY(-2px); }
.family-links__grid svg { width: 26px; height: 26px; color: var(--brand-red-surface); }
.family-news__list li { border-bottom: 1px solid #EEF0F5; }
.family-news__list li:last-child { border-bottom: 0; }
.family-news__list a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; text-decoration: none; color: inherit; }
.family-news__title { font-weight: 700; color: var(--brand-navy); }
.family-news__date { color: #4B5563; font-size: 0.85rem; white-space: nowrap; }

/* Alerts & app. */
.family-app__body { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .family-app__body { grid-template-columns: 1fr 1fr; } }
.family-app__body h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--brand-navy); }
.family-app__body p { margin: 0 0 0.7rem; color: #374151; }
.family-app__toggle { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; font-weight: 600; cursor: pointer; }
.family-app__toggle input { width: 20px; height: 20px; accent-color: var(--brand-navy); }
.family-app__body .btn { margin-top: 0.4rem; }

/* Team picker. */
.family-picker { width: calc(100% - 24px); max-width: 32rem; max-height: calc(100% - 24px); border: 0; border-radius: 14px; padding: 1.25rem; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.family-picker::backdrop { background: rgba(7,7,61,0.6); }
.family-picker h2 { margin: 0 0 0.3rem; color: var(--brand-navy); font-size: 1.5rem; }
.family-picker__note { margin: 0 0 0.9rem; color: #4B5563; font-size: 0.92rem; }
.family-picker__group { border: 0; margin: 0 0 0.9rem; padding: 0; }
.family-picker__group legend { font-weight: 800; color: var(--brand-navy); margin-bottom: 0.35rem; padding: 0; }
.family-picker__team { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.35rem 0.6rem; border-radius: 8px; cursor: pointer; }
.family-picker__team:hover { background: #F3F4F8; }
.family-picker__team input { width: 20px; height: 20px; accent-color: var(--brand-navy); }
.family-picker__actions { display: flex; gap: 0.6rem; position: sticky; bottom: -1.25rem; background: #fff; padding: 0.75rem 0 0.25rem; }

/* Opened from the home screen: no site footer, more like an app. */
@media (display-mode: standalone) {
  .page-template-page-family #site-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) { .family-links__grid a { transition: none; } .family-links__grid a:hover { transform: none; } }

/* ============================================================
   Client review round (v0.9.0)
   ============================================================ */

/* Programs page: each division links to its program's division table. */
.program-feature__divisions li { padding: 0; border: 0; background: none; }
.program-feature__divisions a,
.section-light .program-feature__divisions a {
  display: block;
  padding: 4px 10px;
  border: 1px solid rgba(10,10,140,0.2);
  border-radius: 6px;
  background: #fff;
  color: var(--brand-navy);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.section-light .program-feature__divisions a:hover,
.section-light .program-feature__divisions a:focus-visible { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
#divisions { scroll-margin-top: 100px; }

/* Program "What to Expect" facts: label and answer side by side on every
   row, however long the answer, so the rows line up. Stacked on phones. */
.mnbl-deflist--facts .mnbl-deflist__row { display: grid; grid-template-columns: 1fr; gap: 0.15rem; }
@media (min-width: 640px) {
  .mnbl-deflist--facts .mnbl-deflist__row { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; }
}
.mnbl-deflist--facts .mnbl-deflist__row dt { min-width: 0; }

/* Field sponsor: a line on Field Status cards, the logo on the field's page. */
.field-sponsor { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--text-muted-on-light); }
.field-sponsor__label { font-family: var(--font-subheading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; }
.field-sponsor__link { color: var(--brand-navy); font-weight: 600; }
.field-sponsor--page { margin: 0.75rem 0 0.5rem; color: rgba(255,255,255,0.8); }
.field-sponsor--page .field-sponsor__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0.4rem 0.9rem; background: #fff; border-radius: var(--radius); color: var(--brand-navy);
}
.field-sponsor--page .sponsor-logo-img { width: calc(var(--logo-w) * 1px); height: calc(var(--logo-h) * 1px); object-fit: contain; }

/* One "Last updated" for the Field Status page, above the parks. */
.fields-last-updated { display: flex; align-items: center; gap: 0.4rem; margin: -0.5rem 0 1.5rem; font-size: 0.85rem; color: var(--text-muted-on-light); }
.fields-last-updated svg { width: 14px; height: 14px; }

/* Homepage sponsor strip: arrow buttons either side to skim faster. */
.sponsors-carousel-frame { position: relative; }
.sponsors-skip {
  position: absolute; top: 50%; z-index: 2; translate: 0 -50%;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid #D9D9E6; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  color: var(--brand-navy); font-size: 1.9rem; line-height: 1; cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.sponsors-skip[hidden] { display: none; }
.sponsors-skip span[aria-hidden] { margin-top: -0.2rem; }
.sponsors-skip:hover { background: var(--brand-navy); color: #fff; }
.sponsors-skip:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 2px; }
.sponsors-skip--prev { left: -6px; }
.sponsors-skip--next { right: -6px; }
@media (min-width: 1280px) {
  .sponsors-skip--prev { left: -56px; }
  .sponsors-skip--next { right: -56px; }
}

/* Highlights: the intro reads as the page's lead-in, the privacy note as small print at the bottom. */
.highlights-intro { padding-bottom: 0; text-align: center; }
.highlights-intro .section-label { justify-content: center; }
.highlights-intro__text { max-width: 42rem; margin: 0 auto; font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.55; color: var(--text-dark); }
.highlights-intro__text p { margin: 0; }
.highlights-intro + .section-light { padding-top: 2rem; }
.highlights-note { padding-top: 0; }
.highlights-note__box {
  max-width: 46rem; margin: 0 auto; padding: 1rem 1.25rem;
  border-left: 3px solid var(--brand-red-surface); background: #fff; border-radius: var(--radius);
  font-size: 0.88rem; line-height: 1.55; color: var(--text-muted-on-light);
}
.highlights-note__box p { margin: 0; }
.highlights-note__box p + p { margin-top: 0.5rem; }
.highlights-note__box a { text-decoration: underline; }

/* About: board member names that link to their email. */
.mnbl-person__name a { color: inherit; text-decoration: none; }
.mnbl-person__name a:hover, .mnbl-person__name a:focus-visible { text-decoration: underline; }

/* About: "Interested in joining our team?" under the board. */
.board-join { display: grid; gap: 1.5rem; margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid #E3E5EE; }
@media (min-width: 900px) { .board-join { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 3rem; align-items: start; } }
.board-join__title { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase; letter-spacing: 0.03em; color: var(--brand-navy); margin: 0 0 0.75rem; }
.board-join__intro p { color: var(--text-muted-on-light); line-height: 1.6; }

/* Become a Sponsor: the request form. */
.mnbl-form-card--sponsor { margin: 2rem 0 1.25rem; }
.mnbl-form-card__title { font-family: var(--font-heading); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--brand-navy); margin: 0 0 1rem; }
.mnbl-sponsor-email { font-size: 0.95rem; color: var(--text-muted-on-light); }
.mnbl-sponsor-email a { word-break: break-all; }

/* Footer: a button to the Contact page. */
.footer-contact-cta { margin-top: 1rem; }

/* ============================================================
   Intro animation (v0.9.1) — inc/intro.php, assets/js/intro.js
   Hidden unless <html> has .mnbl-intro-on (set in the page head before
   the first paint, or by the footer's "Play intro" button).
   ============================================================ */
.mnbl-intro {
  --i-plus: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  display: none;
  position: fixed; inset: 0; z-index: 2147483000;
  overflow: hidden; cursor: pointer;
}
html.mnbl-intro-on .mnbl-intro { display: block; }
html.mnbl-intro-playing { overflow: hidden; }
/* Fail-safe: if the player never starts, the cover goes after 6 seconds. */
html.mnbl-intro-on:not(.mnbl-intro-playing) .mnbl-intro { animation: mnbl-intro-failsafe 0s linear 6s forwards; }
@keyframes mnbl-intro-failsafe { to { visibility: hidden; pointer-events: none; } }

.mnbl-intro__scene { display: none; position: absolute; inset: 0; overflow: hidden; }
html[data-intro="1"] .mnbl-intro__scene[data-scene="1"],
html[data-intro="2"] .mnbl-intro__scene[data-scene="2"],
html[data-intro="3"] .mnbl-intro__scene[data-scene="3"] { display: block; }

.mnbl-intro__skip {
  display: none;
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2147483001;
  padding: 0.55rem 1rem; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px;
  background: rgba(7,7,61,0.55); color: #fff; cursor: pointer;
  font-family: var(--font-subheading); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}
html.mnbl-intro-on .mnbl-intro__skip { display: block; }
html.mnbl-intro-on:not(.mnbl-intro-playing) .mnbl-intro__skip { animation: mnbl-intro-failsafe 0s linear 6s forwards; }
.mnbl-intro__skip:hover { background: rgba(7,7,61,0.85); }
.mnbl-intro__skip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 1 · Stitches + home plate */
[data-scene="1"] { background: #07073D var(--i-plus); background-size: 40px 40px; }
.i1-wrap { position: absolute; inset: 0; display: grid; place-items: center; }
.i1-badge { position: relative; width: min(54vw, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.i1-stitches { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.i1-seam, .i1-stitch { fill: none; stroke: #FF0000; stroke-width: 2.2; stroke-linecap: round; }
.i1-stitch { opacity: 0; }
.i1-badge img { width: 54%; height: auto; transform: scale(.6); opacity: 0; filter: drop-shadow(0 8px 24px rgba(0,0,0,.5)); }
.i1-name {
  position: absolute; left: 0; right: 0; top: calc(50% + min(31vw, 170px)); padding: 0 20px; text-align: center;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(15px, 3vw, 28px); line-height: 1.35;
  letter-spacing: .22em; text-transform: uppercase; color: #fff; opacity: 0;
}
[data-scene="1"].play img { animation: i1-logo .7s cubic-bezier(.2,1.4,.4,1) .1s forwards; }
[data-scene="1"].play .i1-seam { animation: i1-draw .9s ease-out .35s forwards; }
[data-scene="1"].play .i1-stitch { animation: i1-show .25s ease-out forwards; }
[data-scene="1"].play .i1-name { animation: i1-show .5s ease-out .9s forwards; }
@keyframes i1-logo { to { transform: scale(1); opacity: 1; } }
@keyframes i1-draw { to { stroke-dashoffset: 0; } }
@keyframes i1-show { to { opacity: 1; } }
@media (max-width: 600px) { .i1-name { letter-spacing: .14em; } }

/* 2 · The pitch */
[data-scene="2"] { background: radial-gradient(ellipse at 50% 35%, #1a1a7a 0%, #07073D 55%, #03031c 100%); }
.i2-shards { position: absolute; inset: 0; }
.i2-shard { position: absolute; inset: 0; background: #07073D var(--i-plus); background-size: 40px 40px; will-change: transform, opacity; }
.i2-logo { position: absolute; left: 50%; top: 14%; width: 64px; transform: translateX(-50%); opacity: 0; }
[data-scene="2"].play .i2-logo { animation: i2-logo 1.2s ease-out forwards; }
@keyframes i2-logo { 0% { opacity: 0; } 25% { opacity: .9; } 80% { opacity: .9; } 100% { opacity: 0; } }
.i2-ball { position: absolute; left: 50%; top: 45%; width: 120px; height: 120px; margin: -60px 0 0 -60px; transform: scale(.05); opacity: 0; }
.i2-ball svg { display: block; width: 100%; height: 100%; }
.i2-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* 3 · Under the lights */
[data-scene="3"] { background: #020210; }
.i3-tower { position: absolute; top: 6%; z-index: 1; width: 120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; background: #15152a; border-radius: 6px; }
.i3-tower--l { left: 8%; }
.i3-tower--r { right: 8%; }
.i3-bulb { aspect-ratio: 1; border-radius: 50%; background: #2a2a40; transition: background .08s, box-shadow .08s; }
.i3-bulb.on { background: #fffbe8; box-shadow: 0 0 10px 4px #fff6c8, 0 0 40px 14px rgba(255,240,180,.45); }
.i3-beams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.i3-beams.on { opacity: 1; }
.i3-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.i3-center img { display: block; margin: 0 auto; width: min(34vw, 170px); height: auto; opacity: 0; filter: brightness(.3); transition: opacity .6s ease, filter .9s ease; }
.i3-name { margin-top: 18px; padding: 0 16px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 3.4vw, 34px); letter-spacing: .2em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .6s ease .2s; }
.i3-tag { margin-top: 6px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(12px, 1.6vw, 15px); letter-spacing: .5em; text-transform: uppercase; color: #FF0000; opacity: 0; transition: opacity .6s ease .45s; }
[data-scene="3"].lit img { opacity: 1; filter: brightness(1) drop-shadow(0 0 30px rgba(255,240,190,.35)); }
[data-scene="3"].lit .i3-name, [data-scene="3"].lit .i3-tag { opacity: 1; }
.i3-sweep { position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none; }
[data-scene="3"].sweeping .i3-sweep { transition: transform 1s ease-in-out; transform: translateX(100%); }
[data-scene="3"].out { transition: opacity .7s ease; opacity: 0; }
@media (max-width: 600px) {
  .i3-tower { width: 64px; gap: 4px; padding: 5px; }
  .i3-tower--l { left: 6%; }
  .i3-tower--r { right: 6%; }
}

/* Footer "Play intro" button, styled like the footer's text links. */
.footer-intro-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.footer-intro-btn:hover { text-decoration: underline; }
.footer-intro-btn[hidden] { display: none; }