/* ============================================================
   JDD Website — site.css
   Shared across all pages. One stylesheet for consistency.
   ============================================================ */

/* ------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------ */
:root {
  --ink:        #111827;
  --muted:      #596274;
  --paper:      #f4f5f7;
  --white:      #ffffff;
  --navy:       #07102f;
  --navy-rgb:   7, 16, 47;
  --gold:       #f7bd2a;
  --gold-rgb:   247, 189, 42;   /* same gold, for rgba(var(--gold-rgb), a) */
  --green-hero: #acdc75;   /* hero title "Johnny Drip Drip" only */
  --line:       rgba(17, 24, 39, 0.14);

  /* Navy frame around the bright lake (header, homepage bands) */
  --tree-tone:  #11225a;   /* pixel evergreens, a step lighter than --navy */
  --header-glow: var(--gold);   /* glow on the nav edge + logo ring */

  /* ONE see-through setting shared by the homepage nav bar and the
     four preview cards, so they match. Raise the last number of
     --glass for more tint (0 = clear, 1 = solid navy). */
  --glass:      rgba(var(--navy-rgb), 0.12);
  --glass-blur: blur(3px) saturate(1.3);

  /* Logo red (sampled from jdd-logo.png), ready to use as an accent */
  --red:        #ca0103;
  --red-rgb:    202, 1, 3;
  --logo-blue:  #010199;   /* logo blue: for text/outlines only, not backgrounds */

  /* Team colours, one pair per team, named by the team page slug
     (team-<slug>.html). The base colour is the logo colour (bars,
     borders). The -text colour is a lighter step of the same hue so
     it stays readable on navy. Wired to [data-team="<slug>"] in
     "Stat tables"; to add a team, add a pair here and one rule there. */
  --team-big-time-bologna:       #e8b84b;
  --team-big-time-bologna-text:  #e8b84b;
  --team-dingin-dillos:          #d9a066;
  --team-dingin-dillos-text:     #e6b585;
  --team-mobster-lobsters:       #c0392b;
  --team-mobster-lobsters-text:  #ff7466;
  --team-six-mile-slammers:      #5b3fa0;
  --team-six-mile-slammers-text: #b79cff;

  /* Heading outline: a thin DARK stroke painted behind white letters
     (paint-order: stroke fill) so the letterforms stay crisp against
     both navy and busy art. A dark edge sharpens white text; the old
     thin gold edge muddied it, straining the eye at small sizes.
     The gold personality now lives in the GLOW on large display
     headings, and in accent fills (e.g. the "Drip" script), not in a
     hard-to-read hairline outline on every heading. */
  --neon-stroke: 3px rgba(var(--navy-rgb), 0.9);   /* ~1.5px shows outside the letters */

  /* Large display headings: dark outline + a plain dark drop. The gold
     glow was removed — it tinted white headings yellow. Gold lives in
     borders and accent fills, never in a halo around white text. */
  --neon-glow: 0 2px 6px rgba(var(--navy-rgb), 0.6);

  /* Smaller headings (wordmark, card titles): dark outline + a plain
     dark drop for pop, no gold hairline fuzz. */
  --neon-glow-soft: 0 2px 6px rgba(var(--navy-rgb), 0.6);

  /* Fluid page gutters + header sizing. The header is sized by its
     content (logo + padding); --header-h mirrors that for layout math. */
  --gutter:          clamp(16px, 4vw, 56px);
  --header-pad-y:    clamp(4px, 0.1rem + 0.35vw, 8px);
  --brand-logo-size: clamp(40px, 2rem + 0.5vw, 48px);
  /* Tallest header item is the logo or a 44px nav touch target */
  --header-h:        calc(max(var(--brand-logo-size), 44px) + 2 * var(--header-pad-y) + 2px);

  /* Height of the pixel treeline / lake-reflection bands on the homepage */
  --shore-h:         clamp(40px, 4.5vw, 80px);

  /* Breathing room above the bottom edge of the hero's water. The
     bottom of the preview cards (wide screens)
     both sit this far above the hero's last pixel row. */
  --hero-edge-gap:   clamp(20px, 2.6vw, 40px);

  /* ONE scale unit for the whole first screen on desktop (>= 900px).
     The title, tagline and preview cards are all sized
     as multiples of --u (see section 16), so the first view keeps the
     same proportions on every monitor. It is 1% of the window width,
     but never more than the window HEIGHT allows (2.1svh), so on a
     short window everything shrinks together instead of overlapping. */
  --u: min(1vw, 2.1svh);

  /* Tileable pixel-art evergreen silhouette (64x18 grid). Used as a
     mask so each band can tint it with background-color. */
  --pixel-trees: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 18' shape-rendering='crispEdges'%3E%3Cpath d='M4 5h1v1h-1zM4 6h1v1h-1zM3 7h3v1h-3zM3 8h3v1h-3zM2 9h5v1h-5zM3 10h3v1h-3zM1 11h7v1h-7zM1 12h7v1h-7zM1 13h7v1h-7zM0 14h9v1h-9zM4 15h1v2h-1zM11 1h1v1h-1zM11 2h1v1h-1zM10 3h3v1h-3zM10 4h3v1h-3zM9 5h5v1h-5zM10 6h3v1h-3zM8 7h7v1h-7zM8 8h7v1h-7zM8 9h7v1h-7zM7 10h9v1h-9zM6 11h11v1h-11zM7 12h9v1h-9zM5 13h13v1h-13zM5 14h13v1h-13zM11 15h1v2h-1zM18 7h1v1h-1zM18 8h1v1h-1zM17 9h3v1h-3zM17 10h3v1h-3zM16 11h5v1h-5zM17 12h3v1h-3zM15 13h7v1h-7zM15 14h7v1h-7zM18 15h1v2h-1zM25 3h1v1h-1zM25 4h1v1h-1zM24 5h3v1h-3zM24 6h3v1h-3zM23 7h5v1h-5zM24 8h3v1h-3zM22 9h7v1h-7zM22 10h7v1h-7zM22 11h7v1h-7zM21 12h9v1h-9zM20 13h11v1h-11zM21 14h9v1h-9zM25 15h1v2h-1zM33 0h1v1h-1zM33 1h1v1h-1zM32 2h3v1h-3zM32 3h3v1h-3zM31 4h5v1h-5zM32 5h3v1h-3zM30 6h7v1h-7zM30 7h7v1h-7zM30 8h7v1h-7zM29 9h9v1h-9zM28 10h11v1h-11zM29 11h9v1h-9zM27 12h13v1h-13zM27 13h13v1h-13zM27 14h13v1h-13zM33 15h1v2h-1zM40 6h1v1h-1zM40 7h1v1h-1zM39 8h3v1h-3zM39 9h3v1h-3zM38 10h5v1h-5zM39 11h3v1h-3zM37 12h7v1h-7zM37 13h7v1h-7zM37 14h7v1h-7zM40 15h1v2h-1zM47 2h1v1h-1zM47 3h1v1h-1zM46 4h3v1h-3zM46 5h3v1h-3zM45 6h5v1h-5zM46 7h3v1h-3zM44 8h7v1h-7zM44 9h7v1h-7zM44 10h7v1h-7zM43 11h9v1h-9zM42 12h11v1h-11zM43 13h9v1h-9zM41 14h13v1h-13zM47 15h1v2h-1zM54 5h1v1h-1zM54 6h1v1h-1zM53 7h3v1h-3zM53 8h3v1h-3zM52 9h5v1h-5zM53 10h3v1h-3zM51 11h7v1h-7zM51 12h7v1h-7zM51 13h7v1h-7zM50 14h9v1h-9zM54 15h1v2h-1zM60 0h1v1h-1zM60 1h1v1h-1zM59 2h3v1h-3zM59 3h3v1h-3zM58 4h5v1h-5zM59 5h3v1h-3zM57 6h7v1h-7zM57 7h7v1h-7zM57 8h7v1h-7zM56 9h9v1h-9zM-8 9h9v1h-9zM55 10h11v1h-11zM-9 10h11v1h-11zM56 11h9v1h-9zM-8 11h9v1h-9zM54 12h13v1h-13zM-10 12h13v1h-13zM54 13h13v1h-13zM-10 13h13v1h-13zM54 14h13v1h-13zM-10 14h13v1h-13zM60 15h1v2h-1zM0 17h64v1h-64z'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  /* In-page anchors (#about, #watch…) land below the sticky header */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4, p {
  margin-top: 0;
}

/* No orphans: body text never strands one word on its last line, and
   headings balance their lines. Browsers without support ignore it. */
p, li, figcaption, label { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

a {
  color: inherit;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Site header / nav
   Full-width navy bar above every page. Sticky so the nav stays in
   reach; sized by its content (logo + padding), never a fixed height.
   The nav collapses into a "Menu" panel whenever the links no longer
   fit beside the brand: scripts/site.js measures the fit and adds
   .is-collapsed (no device breakpoint). Without JS the nav simply
   wraps onto its own row and the dropdowns open on hover/focus.
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding: var(--header-pad-y) var(--gutter);
  color: var(--white);
  /* Navy bar with a crisp gold bottom edge — the brand accent, but no
     colour glow (the glow strained the eyes). A soft dark shadow gives
     separation from the content below. */
  background: linear-gradient(180deg, var(--navy), var(--navy));
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  isolation: isolate;
}

/* Homepage only (the page has a .hero): the bar is see-through so the
   top of the picture, clouds included, shows behind it. It turns solid
   again once the page scrolls (.is-scrolled, set by site.js). */
.site-header:has(~ main > .hero) {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}

.site-header.is-scrolled:has(~ main > .hero) {
  background: linear-gradient(180deg, var(--navy), var(--navy));
}

/* With so little tint, a thin dark shadow keeps the nav words readable
   over bright clouds (only while the bar is see-through). */
.site-header:has(~ main > .hero):not(.is-scrolled) .nav-label,
.site-header:has(~ main > .hero):not(.is-scrolled) .nav-toggle-label {
  text-shadow: 0 1px 3px rgba(var(--navy-rgb), 0.9), 0 0 8px rgba(var(--navy-rgb), 0.6);
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(8px, 0.4rem + 0.4vw, 14px);
  border-radius: 999px;
  text-decoration: none;
}

.brand:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.brand-logo {
  width: var(--brand-logo-size);
  height: var(--brand-logo-size);
  object-fit: cover;
  border-radius: 50%;
}

/* Crest mode — wide screens with the full nav showing: the round logo
   grows into a badge that hangs below the slim bar, like a team crest.
   A negative bottom margin keeps its layout box bar-sized, so the bar
   doesn't get taller. Once the page scrolls (.is-scrolled, set by
   scripts/site.js) it tucks back into the bar. */
@media (min-width: 1024px) {
  .site-header:not(.is-collapsed) .brand-logo {
    --crest-size: clamp(76px, 3.2vw + 40px, 104px);
    position: relative;
    z-index: 1;
    align-self: flex-start;
    width: var(--crest-size);
    height: var(--crest-size);
    margin-bottom: calc(var(--brand-logo-size) - var(--crest-size));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
    transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease;
  }

  .site-header.is-scrolled:not(.is-collapsed) .brand-logo {
    --crest-size: var(--brand-logo-size);
  }

  /* Keyboard focus rings the crest itself (it overflows the link box) */
  .site-header:not(.is-collapsed) .brand:focus-visible .brand-logo {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
  }
}

.brand-text {
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.1rem, 0.8rem + 0.9vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;   /* mixed case as written: DripDripBaseball.com */
  color: var(--white);
  -webkit-text-stroke: var(--neon-stroke);
  paint-order: stroke fill;
  text-shadow: var(--neon-glow-soft);
}

.main-nav {
  flex: 0 0 auto;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1rem, 0.88rem + 0.3vw, 1.2rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;      /* anchor for its dropdown */
}

.main-nav a,
.nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;        /* comfortable touch target */
  padding: 0 clamp(8px, 0.8vw, 12px);
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--white);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  cursor: pointer;
}

.main-nav a:focus-visible,
.nav-parent:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Nav items respond with GOLD TEXT on hover, keyboard focus, open, or
   active page (replaces the old sliding underline). */
.nav-label {
  position: relative;
  transition: color 0.18s ease;
}

.main-nav a:hover .nav-label,
.main-nav a:focus-visible .nav-label,
.main-nav a[aria-current="page"] .nav-label,
.nav-parent:hover .nav-label,
.nav-parent:focus-visible .nav-label,
.nav-parent[aria-expanded="true"] .nav-label,
.has-active > .nav-parent .nav-label {
  color: var(--gold);
}

.nav-caret {
  font-size: 0.72em;
  line-height: 1;
  transition: transform 0.15s;
}

.nav-parent[aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
}

/* Dropdown panels (full-width bar). Shown via .is-open (site.js);
   without JS, hover / focus-within opens them instead. */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 11rem;
  margin: 0;
  padding: 6px;
  list-style: none;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--navy);
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

/* Last menu sits near the right edge — align its panel to the right */
.nav-item:last-child > .nav-dropdown {
  left: auto;
  right: 0;
}

.nav-item.is-open > .nav-dropdown,
html:not(.js) .has-dropdown:hover > .nav-dropdown,
html:not(.js) .has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.main-nav .nav-dropdown a {
  display: flex;
  width: 100%;
  padding: 0 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.main-nav .nav-dropdown a:hover,
.main-nav .nav-dropdown a:focus-visible,
.main-nav .nav-dropdown a.is-active {
  background: rgba(255, 255, 255, 0.07);
  color: var(--gold);
}

/* Menu toggle — only shown once the nav is collapsed */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(var(--gold-rgb), 0.6);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: var(--gold);
}

.nav-toggle:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.nav-toggle-bars {
  display: grid;
  gap: 4px;
}

.nav-toggle-bars span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.18s, opacity 0.18s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Collapsed nav: Menu button + full-width drop panel --- */
.site-header.is-collapsed .nav-toggle {
  display: inline-flex;
}

.site-header.is-collapsed .main-nav {
  position: absolute;
  top: calc(100% + 2px);   /* just below the cyan border */
  left: 0;
  right: 0;
  display: none;
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  padding: 6px var(--gutter) 14px;
  background: var(--navy);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.site-header.is-collapsed.is-menu-open .main-nav {
  display: block;
}

.site-header.is-collapsed .nav-list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.site-header.is-collapsed .nav-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header.is-collapsed .nav-item:last-child {
  border-bottom: 0;
}

.site-header.is-collapsed .main-nav a,
.site-header.is-collapsed .nav-parent {
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 4px;
}

/* Sub-links expand in place (accordion) instead of floating */
.site-header.is-collapsed .nav-dropdown {
  position: static;
  display: none;
  min-width: 0;
  padding: 0 0 10px 14px;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}

.site-header.is-collapsed .nav-item.is-open > .nav-dropdown {
  display: block;
}

.site-header.is-collapsed .nav-dropdown a {
  min-height: 46px;
  padding: 0 12px;
}

/* Very narrow phones: keep the brand readable, icon-only Menu button */
@media (max-width: 359px) {
  .nav-toggle {
    padding: 0 12px;
  }

  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Short landscape phones: let the header scroll away so it doesn't
   eat a big slice of a ~375px-tall screen. */
@media (orientation: landscape) and (max-height: 480px) {
  .site-header {
    position: relative;
  }

  html {
    scroll-padding-top: 12px;
  }
}

/* ------------------------------------------------------------
   Hero — homepage only
   The pixel lake fills the whole hero as a backdrop (cover), so there
   are no empty side strips on any screen. Over it: the title, then the
   drone flyover in a framed 16:9 panel, then the CTA. A dark scrim
   keeps the white text and video frame readable over the bright lake.
   Height grows with the content and is capped so the header + hero
   still fit most screens at launch.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Hero height tracks the image's shape: the scene fills the width
     (cover), so at most viewports nothing is cropped top/bottom. Capped
     so a short, wide window doesn't make it tiny or oversized. */
  /* The hero starts at the very top of the page and the header floats
     over it (the negative margin pulls it up under the bar), so the
     picture is full size. Top padding keeps the title below the bar. */
  margin-top: calc(-1 * var(--header-h));
  /* 16:9 scene, but never taller than the window: on ultrawide / short
     windows the hero stops at the window bottom, so the cards
     (pinned to the hero's bottom) stay on screen.
     38vw is a floor so a very short window can't squash it to a strip. */
  min-height: max(26rem, 38vw, min(56.25vw, 100svh));
  padding: calc(var(--header-h) + clamp(20px, 3vw, 40px)) var(--gutter) 0;
  color: var(--white);
  background: var(--navy);
}

/* Pixel lake backdrop — covers the whole hero, edge to edge. Anchored
   toward the top (16%) so the clouds stay whole. The hero is never
   shorter than 88% of the picture's height, so at most ~12% is
   cropped, mostly off the bottom. */
.hero-bg-img {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  pointer-events: none;
}

/* Gentle shade in the sky band behind the title — keeps the lower
   lake and dock bright. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 40% 0;
  background: linear-gradient(180deg, rgba(var(--navy-rgb), 0.4), rgba(var(--navy-rgb), 0.12) 60%, transparent);
  pointer-events: none;
}

/* Title block sits in the upper sky, above the treeline, and never
   rides down into the dock. */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-top: clamp(8px, 4vh, 48px);
  text-align: center;
}



/* Hero title — one size drives both lines (Johnny : Baseball ≈ 2.2 : 1).
   Grows with width but is capped by height, so ultrawide and short
   screens don't get an oversized title. */
h1 {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.4vh, 16px);
  margin: 0 0 clamp(14px, 2vh, 22px);
  line-height: 0.88;
  text-transform: uppercase;
}

.hero h1 {
  --title-size: clamp(2.5rem, min(1rem + 6vw, 11svh), 6.5rem);
  gap: calc(var(--title-size) * 0.16);
  margin: 0;
}

.title-johnny {
  display: block;
  font-family: "Creepster", "Inter", Arial, sans-serif;
  font-size: var(--title-size, clamp(3.5rem, 5.5vw, 7rem));
  font-weight: 400;
  letter-spacing: 0.02em;
  text-wrap: balance;
  color: var(--green-hero);
  transform: scaleY(1.1);
  text-shadow:
    0 3px 0  rgba(3, 39, 24, 1),
    0 7px 0  rgba(3, 39, 24, 0.84),
    0 0  12px rgba(220, 255, 180, 0.24),
    0 14px 28px rgba(0, 0, 0, 0.52);
}

.title-baseball {
  display: block;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: max(1.2rem, calc(var(--title-size, 6rem) * 0.46));
  font-weight: 900;
  letter-spacing: 0.07em;
  /* Gold letters with a logo-blue drop-back */
  color: var(--gold);
  transform: skew(-5deg) scaleX(1.12);
  text-shadow:
    0 4px 0 var(--logo-blue),
    0 8px 24px rgba(0, 0, 0, 0.46);
}

/* Tagline */
.hero-tagline {
  margin: clamp(12px, 1.6vw, 22px) 0 0;
  font-size: clamp(0.85rem, min(0.7rem + 0.75vw, 3.2svh), 1.45rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--white);
  text-shadow:
    0 2px 0 rgba(var(--navy-rgb), 0.85),
    0 0 16px rgba(var(--navy-rgb), 0.55);
}

/* ============================================================
   7. SHARED WIDGETS — social icon links, buttons
   ============================================================ */

/* Theme song toggle — small gold pill under the tagline with a speaker
   icon: muted speaker (x) when off, speaker with sound waves when on. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-top: clamp(10px, 1.6vh, 16px);
  padding: 0 16px 0 12px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: rgba(var(--navy-rgb), 0.55);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  color: var(--white);
  font: 800 0.76rem/1 "Inter", Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: background 0.18s ease, color 0.18s ease;
}

.theme-toggle:hover,
.theme-toggle.is-playing {
  background: var(--gold);
  color: var(--navy);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* "(JDD)" in the About heading: the hero title's green Creepster
   brand script, so the shorthand reads as the league's own mark. */
.jdd-mark {
  font-family: "Creepster", "Anton", Impact, sans-serif;
  font-size: 1.4em;
  line-height: 0.9;
  vertical-align: -0.08em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--green-hero);
}

.theme-toggle-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle-icon .spk { fill: currentColor; }

/* Off: muted (x). On: sound waves. */
.theme-toggle-icon .spk-on { display: none; }
.theme-toggle.is-playing .theme-toggle-icon .spk-off { display: none; }
.theme-toggle.is-playing .theme-toggle-icon .spk-on { display: inline; }

/* Site footer — small, quiet legal notice at the very bottom of every
   page. Present but deliberately low-key. */
.site-footer {
  padding: 8px var(--gutter) 10px;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Short copyright line on top, wider usage notice underneath. Tiny and
   dim on purpose so it never competes with the page. */
.site-footer-copy,
.site-footer-legal {
  max-width: 150ch;
  margin: 0 auto;
  font-size: 0.6rem;
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, 0.38);
}

.site-footer-copy {
  margin-bottom: 1px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}

/* Phones: a touch smaller still. */
@media (max-width: 600px) {
  .site-footer-copy,
  .site-footer-legal { font-size: 0.56rem; }
}

.site-footer-legal { text-wrap: pretty; }

/* Social icon links — used in the homepage "Follow the Season" block
   and the Media page. */
.hero-socials {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-socials a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s;
}

.hero-socials a:hover,
.hero-socials a:focus-visible {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.36);
}

.hero-socials a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.hero-socials img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  /* Brand-colored icons via cdn.simpleicons.org — no invert filter. */
}

/* ============================================================
   Buttons — THE canonical action button for the whole site.

   One base (.btn: size, radius, 2px border, uppercase bold label,
   hover fade) plus a small, fixed set of variants. Every call-to-
   action across every page uses .btn + exactly one variant:

     .btn-primary  solid gold fill, dark label  (main CTA)
     .btn-outline  translucent white border, white label (secondary)
     .btn-gold     transparent fill, gold border + gold label, gold
                   wash on hover (matches the .panel gold edge)

   Add a new look as a .btn-<name> variant here — never restyle a
   button inline or per page.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn:hover,
.btn:focus-visible {
  opacity: 0.88;
}

/* Size variant: a larger, more prominent CTA (e.g. "Read the full
   rules"). Combine with any colour variant: .btn .btn-primary .btn-lg */
.btn-lg {
  min-height: 56px;
  padding: 0 34px;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
}

.btn-primary {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.92);
  color: #241805;
}

.btn-outline {
  border-color: rgba(255, 255, 255, 0.76);
  color: var(--white);
}

/* Gold-outline variant — matches the gold border used on the cards,
   team tiles, and media plugs. Transparent fill, gold border + text. */
.btn-gold {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold);
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background: rgba(var(--gold-rgb), 0.12);
  opacity: 1;
}

/* ------------------------------------------------------------
   Coming soon — placeholder pages
   ------------------------------------------------------------ */
.coming-soon {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-items: center;
  justify-items: center;
  padding: clamp(40px, 8vh, 96px) clamp(20px, 6vw, 86px) clamp(60px, 8vh, 86px);
  background: var(--navy);
  color: var(--white);
  text-align: center;
}

.coming-soon h1 {
  display: block;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  transform: none;
  text-shadow: none;
  color: var(--white);
  margin-bottom: 16px;
}

.coming-soon p {
  max-width: 480px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 1.08rem;
  line-height: 1.65;
  margin-bottom: 32px;
}

/* ------------------------------------------------------------
   Responsive
   (Header collapse is content-driven — see .is-collapsed above.)
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .btn {
    width: 100%;
  }

  /* The hero CTA stays a compact button, not a full-width bar */
  .btn-play {
    width: auto;
  }

  .hero-socials {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* No sliding underlines, lifting cards, or fading panels */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .btn-play:hover,
  .btn-play:focus-visible,
  .preview-card:hover,
  .preview-card:focus-visible {
    transform: none;
  }

  /* Never animate scroll-reveal for users who asked for reduced motion. */
  [data-reveal],
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   Page header — interior pages
   ------------------------------------------------------------ */
.page-shell {
  min-height: 100vh;
  background:
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.82), rgba(var(--navy-rgb), 0.76)),
    url("../assets/images/shared/hero-pixel-lake-v4.jpg") center / cover no-repeat;
  color: var(--white);
}

.page-header {
  padding: clamp(68px, 9vh, 82px) clamp(20px, 6vw, 86px) clamp(8px, 1vh, 14px);
  text-align: center;
}

/* Content container for interior pages — mirrors .teams-page-inner */
.page-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(20px, 4vh, 40px) clamp(20px, 5vw, 48px) clamp(48px, 7vh, 96px);
}

/* The page's own top padding is the gap under the header; the first
   section adds none on top of it (that doubled up to ~116px). */
.page-inner > .section-block:first-child { padding-top: 0; }

/* ------------------------------------------------------------
   Interior page primitives — subhero, sections, stats
   Reusable across any text-forward interior page.
   ------------------------------------------------------------ */

/* ============================================================
   .panel — THE canonical box for the whole site.
   One source of truth for the signature "neon box": the same
   glowing edge as the nav bar and the hero section cards —
   a solid 2px border in the accent colour, a two-layer colour
   glow, and a frosted translucent-navy surface.

   Use it on ANY new box so every card/panel stays consistent.
   Layout (padding, size, radius) belongs to the element's own
   class; .panel only owns the border + surface + glow.

   --panel-glow  accent colour of the edge + glow (default gold).
                 Override per context, e.g. a team page sets it to
                 --team-accent so its panels glow in the team colour.
   ============================================================ */
.panel {
  /* --panel-accent is the box's accent colour (gold by default, the
     team colour on team pages). It is NOT painted as a glowing halo
     anymore — the glow strained the eyes. Instead the box has a calm
     neutral border by default that brightens to the accent on hover. */
  --panel-accent: var(--gold);
  /* Surface tint over the blur. Default is readable for content-heavy
     panels; airy contexts (the hero previews) lower it to --glass. */
  --panel-tint: rgba(var(--navy-rgb), 0.42);
  /* Crisp gold border by default — the brand accent, matching the nav
     line. No glow anywhere (the halo strained the eyes). */
  border: 1px solid var(--panel-accent);
  border-radius: 12px;
  background: var(--panel-tint);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  /* Depth only — a soft DARK shadow, never a colour halo. */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--white);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

/* Interactive boxes (links/buttons) brighten their border to the
   accent and lift slightly on hover/focus — the accent shows on
   intent, not as a constant glow. */
a.panel:hover,
a.panel:focus-visible,
button.panel:hover,
button.panel:focus-visible {
  border-color: var(--panel-accent);
  transform: translateY(-4px);
}

/* Documented context variants. Everything else is layout, owned by the
   element's own class. Apply alongside .panel in the HTML. */

/* Airy: hero preview cards sit over the bright lake and want the
   see-through glass — the same setting the nav bar uses. */
.panel--airy { --panel-tint: var(--glass); }

/* Gold: a box we deliberately feature keeps a crisp gold border
   (no glow). */
.panel--gold { border-color: var(--gold); }

/* Accent: team pages carry the team's own colour as a crisp border,
   with a deeper tint so the long About copy stays readable over busy
   team background art. --team-accent is set per team on .team-page. */
.panel--accent {
  --panel-accent: var(--team-accent, var(--gold));
  --panel-tint: rgba(var(--navy-rgb), 0.62);
  border-color: var(--team-accent, var(--gold));
}

/* Subhero — page-opening block (heading + intro + two-image media lockup) */
.subhero {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: 0 0 clamp(28px, 5vh, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.subhero-copy {
  flex: 1 1 52%;
  min-width: 0;
}

/* Two-image lockup: framed lake photo with the logo badge overlapping a corner */
.subhero-media {
  position: relative;
  flex: 1 1 44%;
  margin: 0;
  min-width: 0;
}

.subhero-lake {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.subhero-badge {
  position: absolute;
  bottom: -22px;
  right: -18px;
  width: clamp(84px, 12vw, 128px);
  height: auto;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--navy);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

@media (max-width: 720px) {
  .subhero {
    flex-direction: column;
    align-items: stretch;
  }
  .subhero-media {
    margin-top: 8px;
  }
  .subhero-badge {
    right: 10px;
  }
}

.subhero-title {
  display: block;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(2.1rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.04;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 clamp(14px, 2vh, 22px);
  transform: none;
  text-shadow: none;
}

/* Two-tone brand treatment — echoes the homepage hero's title split.
   Lead line is the normal Anton block in white; the name pops in gold Creepster script. */
.subhero-title-lead {
  display: block;
  font-size: 0.62em;
  letter-spacing: 0.03em;
  color: var(--white);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.5);
}

.subhero-title-accent {
  display: block;
  font-family: "Creepster", "Inter", Arial, sans-serif;
  font-weight: 400;
  font-size: 0.92em;
  white-space: nowrap;
  color: var(--gold);
  transform: skew(-5deg);
  transform-origin: center;
  text-shadow:
    0 3px 0 rgba(var(--navy-rgb), 0.9),
    0 8px 22px rgba(0, 0, 0, 0.46);
}

.subhero-intro {
  max-width: 54ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1.02rem, 1.8vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

/* Section block — kicker + heading + body copy */
.section-block {
  padding: clamp(28px, 5vh, 52px) 0 0;
}

.section-heading {
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
  -webkit-text-stroke: var(--neon-stroke);
  paint-order: stroke fill;
  text-shadow: var(--neon-glow);
  margin: 0 0 clamp(14px, 2vh, 20px);
}

/* Lede paragraph — slightly larger body copy on dark pages */
.lede {
  max-width: 68ch;
  margin: 0 0 clamp(14px, 2vh, 20px);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.section-block p:last-child {
  margin-bottom: 0;
}

/* How far we've come — then/now comparison, images side by side */
.evolution-pair {
  display: grid;
  /* Both pictures share one height; the Now column is a little wider */
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
  margin-top: 0;
  /* Same card theme as the About section: both photos in one .panel. */
  padding: clamp(22px, 3.5vw, 48px);
}

.evolution-figure {
  margin: 0;
  min-width: 0;
}

.evolution-figure img {
  display: block;
  width: 100%;
  height: clamp(16rem, 32vw, 28rem);
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
}

/* The sketch is a small portrait image: show all of it on a navy mat
   instead of cropping it to match the landscape booth photo. */
.evolution-figure:first-of-type img {
  object-fit: contain;
  background: rgba(var(--navy-rgb), 0.55);
}

.evolution-figure figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.evolution-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--gold);
  color: #1a1a1a;
  font-family: "Anton", Impact, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 560px) {
  .evolution-pair {
    grid-template-columns: 1fr;
  }

  .evolution-figure img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ------------------------------------------------------------
   Rule book flipper
   ------------------------------------------------------------ */
.flipper-section {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(24px, 4vh, 40px) clamp(60px, 8vw, 120px) clamp(16px, 2vh, 24px);
}

.flipper-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 580px;
}

.flipper-page {
  display: block;
  width: 100%;
  max-height: calc(100svh - var(--header-h) - 100px);
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

/* Prev / Next arrow buttons */
.flipper-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  /* Same round gold-ringed arrows as the homepage rules scroller */
  width: 44px;
  height: 44px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(var(--navy-rgb), 0.85);
  color: var(--white);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.flipper-arrow:hover:not(:disabled),
.flipper-arrow:focus-visible {
  background: var(--gold);
  color: var(--navy);
}

.flipper-arrow:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.flipper-arrow:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.flipper-prev {
  left: 8px;
}

.flipper-next {
  right: 8px;
}

/* Arrow icons via CSS */
.flipper-arrow span {
  display: block;
  width: 12px;
  height: 12px;
  border-top: 3px solid currentColor;
  border-left: 3px solid currentColor;
}

.flipper-prev span {
  transform: rotate(-45deg) translate(2px, 2px);
}

.flipper-next span {
  transform: rotate(135deg) translate(2px, 2px);
}

/* Page counter */
.flipper-counter {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.54);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flipper-download { margin: 8px 0 0; }

/* Page dots — same gold dots as the homepage rules scroller */
.flipper-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 580px;
}

.flipper-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.flipper-dot.is-active { background: var(--gold); }

.flipper-dot:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* On small screens — keep arrows on image, just smaller */
@media (max-width: 680px) {
  .flipper-arrow {
    width: 38px;
    height: 38px;
  }

  .flipper-prev { left: 6px; }
  .flipper-next { right: 6px; }
}

/* ============================================================
   Teams page
   ============================================================ */

/* ------------------------------------------------------------
   Teams page shell
   ------------------------------------------------------------ */
.teams-page {
  min-height: 100vh;
  background:
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.82), rgba(var(--navy-rgb), 0.76)),
    url("../assets/images/shared/hero-pixel-lake-v4.jpg") center / cover no-repeat;
  color: var(--white);
  padding-top: clamp(8px, 2vh, 24px);
}

.teams-page-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 48px) clamp(40px, 6vh, 80px);
}

/* ------------------------------------------------------------
   Page heading
   ------------------------------------------------------------ */
.teams-heading {
  padding: 0 0 clamp(16px, 2vh, 28px);
  text-align: center;
}

.teams-title {
  display: block;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 6px;
  line-height: 1;
  text-shadow: none;
  transform: none;
}

.teams-subtitle {
  font-size: clamp(0.82rem, 1.4vw, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.54);
  margin: 0;
}

/* ------------------------------------------------------------
   Team selector
   ------------------------------------------------------------ */
.team-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 clamp(20px, 3vh, 36px);
  padding: 0;
}

.team-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  position: relative;
}

.team-tile:hover,
.team-tile:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.24);
  outline: none;
}

.team-tile.is-selected {
  border-color: var(--gold);
  border-width: 3px;
  background: rgba(var(--gold-rgb), 0.1);
  box-shadow: 0 4px 24px rgba(var(--gold-rgb), 0.2);
}

.team-tile-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 160px;
}

.team-tile-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.team-tile-name {
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(0.7rem, 1.4vw, 1rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
  text-align: center;
  line-height: 1.2;
}

.team-tile-selected-badge {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  background: var(--gold);
  color: #1a1a1a;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
  border: 2px solid #1a1a1a;
}

/* Divider between selector and roster */
.team-selector::after {
  content: none;
}

/* ------------------------------------------------------------
   Roster section
   ------------------------------------------------------------ */
.roster-section {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: clamp(24px, 4vh, 44px);
}

.roster-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: clamp(20px, 3vh, 32px);
}

.roster-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roster-team-name {
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  margin: 0;
  line-height: 1;
  border-left: 5px solid var(--team-accent, var(--gold));
  padding-left: 14px;
}

.roster-label {
  margin: 0;
  padding-left: 19px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
}

/* Search field */
.roster-search-wrap {
  flex-shrink: 0;
}

.roster-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid #d8cebc;
  border-radius: 6px;
  background: #fffdf7;
}

.search-icon {
  color: #aaa;
  flex-shrink: 0;
}

.roster-search-input {
  border: none;
  background: transparent;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.9rem;
  color: #1a1a1a;
  width: 200px;
  outline: none;
}

.roster-search-input::placeholder {
  color: #bbb;
}

/* Empty states */
.roster-empty {
  grid-column: 1 / -1;
  padding: 32px;
  text-align: center;
  color: #aaa;
  font-size: 0.94rem;
  font-weight: 600;
}

/* Hint */
.roster-hint {
  margin-top: 24px;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #bbb;
}

/* ------------------------------------------------------------
   Player grid
   ------------------------------------------------------------ */
.player-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.player-card-wrap {
  display: contents;
}

/* ── Shared card styles ── */
.player-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 14px;
  border: 1.5px solid #d8cebc;
  border-radius: 8px;
  background: #fffdf7;
  width: 100%;
  text-align: center;
}

.player-card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  overflow: hidden;
  background: #eae4d8;
}

.player-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Placeholder shown when card has no image OR image fails to load */
.player-card-placeholder {
  position: absolute;
  inset: 0;
  display: none; /* hidden by default */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: #eae4d8;
}

.player-card-placeholder-logo {
  width: 52%;
  max-width: 80px;
  opacity: 0.18;
  filter: grayscale(1);
  object-fit: contain;
}

.player-card-placeholder span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #bbb;
}

/* Show placeholder when image fails */
.player-card.img-error .player-card-img {
  display: none;
}
.player-card.img-error .player-card-placeholder {
  display: flex;
}

/* ── Available card (button) ── */
.player-card.is-available {
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.player-card.is-available:hover,
.player-card.is-available:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
  outline: none;
}

.player-card.is-available:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ── Placeholder card (div, not interactive) ── */
.player-card.is-placeholder {
  cursor: default;
  opacity: 0.82;
}

.player-card.is-placeholder .player-card-placeholder {
  display: flex;
}

/* Card name + number */
.player-card-name {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(0.72rem, 1.2vw, 0.9rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1a1a1a;
  line-height: 1.2;
}

.player-card-number {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   Card viewer (modal / lightbox)
   ------------------------------------------------------------ */
.card-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.card-viewer[hidden] {
  display: none;
}

.card-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 4, 0.78);
  cursor: pointer;
}

.card-viewer-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-height: 90vh;
}

.card-viewer-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(10, 8, 4, 0.82);
  color: var(--white);
  font-size: 0.9rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s;
}

.card-viewer-close:hover,
.card-viewer-close:focus-visible {
  background: rgba(10, 8, 4, 1);
}

.card-viewer-image-wrap {
  max-height: calc(90vh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-viewer-img {
  display: block;
  max-width: min(85vw, 420px);
  max-height: calc(90vh - 90px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}

.card-viewer-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.card-viewer-name {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
}

.card-viewer-flip {
  font-size: 0.78rem;
  min-height: 34px;
  padding: 0 14px;
}

/* ------------------------------------------------------------
   Teams page — responsive
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .player-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .team-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster-header {
    flex-direction: column;
    align-items: stretch;
  }

  .roster-search-field {
    width: 100%;
  }

  .roster-search-input {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .player-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-card.is-available {
    transition: none;
  }
}

/* ------------------------------------------------------------
   Watch page — photo grid, socials, featured videos
   Built on the shared interior primitives (.page-inner, .subhero,
   .section-block). Scoped classes only; no shared rules touched.
   ------------------------------------------------------------ */

/* Curated photo grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(20px, 3vh, 32px) 0 0;
}

.photo-grid figure {
  margin: 0;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
}

@media (max-width: 720px) {
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
}

/* Photos page (photos.html): full gallery, built by scripts/photos.js */
.photo-grid--page {
  gap: clamp(14px, 2vw, 22px);
  margin: 0;
}

.photo-tile {
  margin: 0;
}

.photo-tile[hidden] {
  display: none;
}

.photo-tile a {
  display: block;
  border-radius: 12px;
  transition: transform 0.15s;
}

.photo-tile a:hover {
  transform: translateY(-3px);
}

.photo-tile a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.photo-tile figcaption {
  margin: 8px 2px 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.photo-tile a {
  cursor: zoom-in;
}

/* Photo lightbox (scripts/photos.js) */
.lightbox {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: rgba(var(--navy-rgb), 0.92);
}

.lightbox-figure {
  margin: 0;
  max-width: calc(100vw - 140px);
  text-align: center;
}

.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 100px);
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  margin-top: 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.lightbox-btn {
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(var(--navy-rgb), 0.7);
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-btn:hover {
  border-color: var(--gold);
}

.lightbox-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.lightbox-prev,
.lightbox-next {
  margin: 0 12px;
}

.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
}

/* Phones: photo full width, arrows in a row below it (never on top
   of the photo). Swipe also works. */
@media (max-width: 640px) {
  .lightbox[open] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 16px 0;
    padding: 80px 12px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .lightbox-figure {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 100%;
  }

  .lightbox-img {
    max-height: calc(100vh - 220px);
  }

  .lightbox-prev,
  .lightbox-next {
    grid-row: 2;
    margin: 0;
  }

  .lightbox-prev {
    grid-column: 1;
    justify-self: start;
  }

  .lightbox-next {
    grid-column: 2;
    justify-self: end;
  }
}

/* Media page "Follow the Drip" block: the heading and buttons are
   centered, so center the intro paragraph to match. */
#socials .lede {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ============================================================
   MEDIA PAGE — social buttons + video sections.
   Reuses the clean .team-info-tile look (navy tile, subtle border,
   lift on hover) rather than the frosted preview cards, so the
   social links read like tidy app buttons.
   ============================================================ */

/* --- Social row: four horizontal "app button" tiles ---------------
   Icon on the left, platform name + @handle stacked on the right.
   Four across on desktop, 2 x 2 on tablets, one per row on phones. */
/* 2 x 2 grid of app-button tiles. Two per row gives each button enough
   width that the longest handle (@JohnnyDripDripBaseball) fits on one
   line; collapses to a single column on the narrowest phones. */
.social-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: clamp(16px, 3vh, 24px) auto 0;
  max-width: 44rem;
  padding: 0;
  list-style: none;
}

.social-row > li {
  min-width: 0;
  display: flex;
}

.social-btn {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 14px);
  width: 100%;
  min-width: 0;
  padding: clamp(12px, 1.3vw, 16px) clamp(14px, 1.4vw, 18px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(var(--navy-rgb), 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: var(--white);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.social-btn:hover,
.social-btn:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(var(--gold-rgb), 0.5);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

.social-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.social-btn img {
  flex: 0 0 auto;
  width: clamp(44px, 5vw, 60px);
  height: clamp(44px, 5vw, 60px);
  object-fit: contain;
  /* Icons served pre-colored per brand via cdn.simpleicons.org (YouTube
     red, Instagram magenta, Linktree green). TikTok's brand color is black,
     so its URL asks for the white variant (/tiktok/white) to stay visible. */
}

.social-btn-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.social-btn-name {
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
}

.social-btn-handle {
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  font-weight: 700;
  color: var(--gold);
  /* Never clip the handle — wrap within the button if it must. */
  overflow-wrap: anywhere;
}

/* One per row on the narrowest phones, where even half the width is
   too tight for two side by side. */
@media (max-width: 460px) {
  .social-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Featured video: one big video on its own, thumb + copy -------- */
.video-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  margin: clamp(16px, 3vh, 24px) 0 0;
}

.video-feature-copy .video-feature-title {
  margin: 0 0 10px;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
}

.video-feature-copy .video-feature-eyebrow {
  margin: 0 0 6px;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.video-feature-copy .video-desc {
  margin: 0;
}

@media (max-width: 760px) {
  .video-feature {
    grid-template-columns: 1fr;
  }
}

/* --- Video grid: the rest of the games, three to a row ------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(16px, 3vh, 24px) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 820px) {
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Video card: shared by the feature and the grid --------------- */
.video-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Border + frosted surface + glow come from the shared .panel rule. */
  overflow: hidden;
}

.video-card .video-player,
.video-feature .video-player {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  text-decoration: none;
}

.video-player .video-player-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Coming-soon placeholder: a non-clickable frame (no video yet). The
   neutral image is dimmed under a navy wash so it reads as a backdrop,
   not a playable thumbnail, and a gold badge marks the status. */
.video-player--soon { cursor: default; }

.video-player--soon .video-player-thumb {
  /* Show the whole trophy, centered on the navy frame rather than
     cropped to fill the wide 16:9 box. */
  object-fit: contain;
  padding: clamp(12px, 3vw, 28px);
  background: var(--navy);
  filter: brightness(0.92);
}

.video-soon-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: rgba(var(--navy-rgb), 0.72);
  color: var(--gold);
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(0.9rem, 2.4vw, 1.15rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Red YouTube-style play badge centered on the thumbnail. */
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(46px, 16%, 64px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: #ff0000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 42% no-repeat;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease;
}

.video-player:hover .video-play-btn,
.video-player:focus-visible .video-play-btn {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-card .video-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 18px;
}

.video-card .video-meta h3 {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.video-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------
   Homepage front-page sections
   Teaser sections below the hero. Dark backdrop reuses the
   .page-shell gradient so the homepage reads as one page.
   Built on shared primitives (.section-heading,
   .lede, .stat-grid/.stat-card, .btn, .hero-socials); only the
   home-prefixed classes below are new.
   ------------------------------------------------------------ */
/* --- Previews band: three link cards right below the hero --- */
.home-previews {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 3.5vw, 56px) var(--gutter) calc(var(--shore-h) + clamp(16px, 2vw, 32px));
  background: var(--navy);
  color: var(--white);
}

/* Pixel evergreens along the bottom of the band (decorative) */
.home-previews::after,
.home-sections::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--shore-h);
  background: var(--tree-tone);
  opacity: 0.75;
  -webkit-mask:
    var(--pixel-trees) 0 bottom / auto 100% repeat-x,
    var(--pixel-trees) 57px bottom / auto 60% repeat-x;
          mask:
    var(--pixel-trees) 0 bottom / auto 100% repeat-x,
    var(--pixel-trees) 57px bottom / auto 60% repeat-x;
  pointer-events: none;
}

/* Centred, capped container — cards never stretch across a big monitor */
.home-previews-inner {
  container-type: inline-size;
  max-width: 84rem;
  margin: 0 auto;
}

/* Four cards: one centred column on phones, a 2 x 2 grid once two fit
   side by side, four across when all four stay readable. Four always
   divides evenly, so there's never a lonely orphan on the last row. */
.preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 28rem);
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@container (min-width: 36rem) {
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 26rem));
  }
}

@container (min-width: 70rem) {
  .preview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Phones — 2x2 grid instead of a tall stacked column. Two cards per
   row keeps each one wide enough for the title + artwork to read, while
   still fitting a narrow screen. Overrides the container-query defaults
   above. */
@media (max-width: 640px) {
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Cards in a 2-up row stretch to equal height, but each art window
     is locked to 4:3, so a shorter card's leftover height pooled below
     the art and left its contents (e.g. the team logos on "Meet the
     Teams") bunched up at the top. Centre the art block in that spare
     space with equal auto margins top and bottom; the footer stays
     pinned at the bottom of the card. */
  .preview-media {
    margin-top: auto;
    margin-bottom: auto;
  }

  .preview-footer {
    margin-top: 0;
  }
}

.preview-grid > li {
  display: flex;
  min-width: 0;
}

.preview-card {
  container-type: inline-size;   /* lets the title scale to the card's width */
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Card padding lives in two variables so the overlap layout (section
     15) only changes the numbers, never the padding rule itself. The
     bottom is deliberately deeper: breathing room under the footer row. */
  --card-pad:        clamp(14px, 1.4vw, 20px);
  --card-pad-bottom: clamp(28px, 2.6vw, 36px);
  padding: var(--card-pad) var(--card-pad) var(--card-pad-bottom);
  /* Border + frosted surface + glow come from the shared .panel rule. */
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.preview-card:hover,
.preview-card:focus-visible {
  /* Lift only — a deeper DARK shadow, no gold halo. The border
     brightens to the accent via the shared a.panel:hover rule. */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.preview-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.preview-title {
  margin: 0 0 clamp(10px, 1.1vw, 16px);
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.05rem, 8.6cqi, 1.6rem);   /* "Discover the Players" stays on one line */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--white);
  -webkit-text-stroke: var(--neon-stroke);
  paint-order: stroke fill;
  text-shadow: var(--neon-glow-soft);
}

/* Every card's art sits in the same 4:3 window, so the four cards
   keep matching proportions at any width. */
.preview-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin: 0 0 clamp(12px, 1.2vw, 16px);
}

/* Team logos — a spaced 2 x 2 grid of tiles. Two tiles plus one gap
   (2 x (37.5% - gap/2) + gap = 75% of the width) exactly fill the
   height of the 4:3 window. */
.preview-media--teams {
  --tile-gap: clamp(8px, 4.5cqi, 16px);
  flex-wrap: wrap;
  align-content: center;
  gap: var(--tile-gap);
}

.preview-media--teams img {
  width: calc(37.5% - var(--tile-gap) / 2);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease;
}

.preview-card:hover .preview-media--teams img,
.preview-card:focus-visible .preview-media--teams img {
  transform: translateY(-3px);
}

/* Player cards — four cards fanned like a hand, one per team.
   The branded tile behind each image is the fallback if a card file
   is missing (site.js hides the broken image). */
.preview-tcard {
  position: absolute;
  top: 20%;
  width: 30%;
  aspect-ratio: 822 / 1122;
  overflow: hidden;
  border-radius: 7px;
  background:
    url("../assets/images/shared/jdd-logo.png") center / 62% no-repeat,
    linear-gradient(160deg, var(--tree-tone), var(--navy));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.preview-tcard:nth-child(1) {
  left: 10.25%;
  transform: translateY(7%) rotate(-12deg);
}

.preview-tcard:nth-child(2) {
  left: 26.75%;
  transform: rotate(-4deg);
}

.preview-tcard:nth-child(3) {
  left: 43.25%;
  transform: rotate(4deg);
}

.preview-tcard:nth-child(4) {
  left: 59.75%;
  transform: translateY(7%) rotate(12deg);
}

/* Hover / focus: the hand spreads open a little */
.preview-card:hover .preview-tcard:nth-child(1),
.preview-card:focus-visible .preview-tcard:nth-child(1) {
  transform: translate(-8%, 7%) rotate(-15deg);
}

.preview-card:hover .preview-tcard:nth-child(2),
.preview-card:focus-visible .preview-tcard:nth-child(2) {
  transform: translate(-3%, -4%) rotate(-5deg);
}

.preview-card:hover .preview-tcard:nth-child(3),
.preview-card:focus-visible .preview-tcard:nth-child(3) {
  transform: translate(3%, -4%) rotate(5deg);
}

.preview-card:hover .preview-tcard:nth-child(4),
.preview-card:focus-visible .preview-tcard:nth-child(4) {
  transform: translate(8%, 7%) rotate(15deg);
}

.preview-tcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-tcard img[hidden] {
  display: none;
}

/* Video — the whole 16:9 frame (nothing cropped) with the game's
   name underneath, centred in the 4:3 window. */
.preview-media--video {
  flex-direction: column;
  gap: clamp(8px, 3cqi, 14px);
}

.preview-video-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.preview-video-frame img {
  width: 100%;
  height: 100%;
  /* YouTube's hqdefault thumbnail is 4:3 with black bars above and
     below the 16:9 picture; cover in a 16:9 frame trims exactly the
     bars and keeps the full picture. */
  object-fit: cover;
  transition: transform 0.3s ease;
}

.preview-video-caption {
  font-size: clamp(0.72rem, 4.4cqi, 0.9rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}

.preview-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(44px, 18%, 64px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(var(--navy-rgb), 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  transition: background 0.18s;
}

.preview-play::after {
  content: "";
  position: absolute;
  inset: 30% 25% 30% 37%;
  background: var(--white);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.preview-card:hover .preview-video-frame img,
.preview-card:focus-visible .preview-video-frame img {
  transform: scale(1.04);
}

/* Photo grid — four equal tiles, 2 x 2 */
.preview-media--photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(4px, 2cqi, 8px);
}

.preview-media--photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  transition: filter 0.2s ease;
}

.preview-card:hover .preview-media--photos img,
.preview-card:focus-visible .preview-media--photos img {
  filter: brightness(1.1) saturate(1.1);
}

/* Phones: the four featured photos are landscape (~3:2), so the fixed
   4:3 window squeezes each 2x2 cell near-square and crops them hard.
   Drop the forced aspect ratio here and give the rows their own
   landscape proportion so the shots read properly with far less crop.
   Only the photos preview is affected; the other previews keep 4:3. */
@media (max-width: 640px) {
  .preview-media--photos {
    aspect-ratio: auto;
    grid-template-rows: auto auto;   /* rows sized by the tiles themselves */
  }

  .preview-media--photos img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;             /* landscape tiles, far less crop */
    min-width: 0;                    /* let the tile shrink inside its grid track */
  }
}

.preview-card:hover .preview-play,
.preview-card:focus-visible .preview-play {
  background: var(--gold);
}

.preview-card:hover .preview-play::after,
.preview-card:focus-visible .preview-play::after {
  background: var(--navy);
}

/* Footer row: cyan rule, light-cyan label, arrow */
.preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: clamp(10px, 1vw, 14px);
}

.preview-label {
  font-size: clamp(0.74rem, 0.7rem + 0.15vw, 0.84rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(var(--navy-rgb), 0.95), 0 0 8px rgba(var(--navy-rgb), 0.6);   /* keeps it readable over the lake */
}

.preview-arrow {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--white);
  transition: transform 0.18s ease, color 0.18s ease;
}

.preview-card:hover .preview-arrow,
.preview-card:focus-visible .preview-arrow {
  color: var(--gold);
  transform: translateX(4px);
}

/* ============================================================
   15a. MOBILE OVERLAP (max-width: 899px) — lake fills the first screen,
   the 2x2 card grid rides over the bottom of the hero.
   On load the phone shows only the lake (hero = full viewport height);
   scrolling (or the About nav) reveals the cards, which overlap the
   lower water the same way the desktop cards do.
   ============================================================ */
@media (max-width: 899px) {
  /* Width of the 2 x 2 card grid. The hero reserves the grid's height
     from this (cards are 1.1x as tall as wide) so the title can be
     centred in the sky above them. 1.1 = card shape (section 15b). */
  :root {
    --m-grid-w: min(0.88 * (100vw - 2 * var(--gutter)), 20rem);
    --m-grid-h: calc(1.1 * (var(--m-grid-w) - 10px) + 10px);
  }

  /* Lake fills the screen on load. svh tracks the *visible* viewport so
     the mobile browser's address bar doesn't leave a navy sliver. The
     bottom padding keeps the cards' space clear; if a short phone can't
     fit both, the hero grows instead of the cards covering the title. */
  .hero {
    min-height: 100svh;
    padding-bottom: calc(var(--m-grid-h) + var(--hero-edge-gap) + 12px);
  }

  /* Title block centred in the sky between the header and the cards */
  .hero-content {
    margin-block: auto;
    padding-top: 0;
  }

  /* Same anchoring as the desktop overlap (section 15): the band's
     inner box has zero height and the grid is pinned to it from below,
     so the cards END just above the hero's bottom edge and grow upward
     over the lake. Only difference from desktop: 2 x 2, not 4 across. */
  .home-previews.is-overlap {
    z-index: 1;
    padding-top: 0;
  }

  .home-previews.is-overlap .home-previews-inner {
    position: relative;
    height: 0;
  }

  .home-previews.is-overlap .preview-grid {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--hero-edge-gap);
    width: var(--m-grid-w);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    pointer-events: none;              /* only the cards take taps */
  }

  /* Compact cards so the 2 x 2 fits under the title on a phone screen */
  .home-previews.is-overlap .preview-card {
    --card-pad:        10px;
    --card-pad-bottom: 12px;
    pointer-events: auto;
  }

  .home-previews.is-overlap .preview-title {
    font-size: clamp(0.7rem, 8.6cqi, 1.1rem);
    margin-bottom: 6px;
  }

  .home-previews.is-overlap .preview-media {
    margin-bottom: 6px;
  }

  .home-previews.is-overlap .preview-video-caption {
    font-size: 0.6rem;
  }

  .home-previews.is-overlap .preview-footer {
    gap: 4px;
    padding-top: 4px;
  }

  .home-previews.is-overlap .preview-label {
    font-size: 0.6rem;
    letter-spacing: 0.05em;
  }

  .home-previews.is-overlap .preview-arrow {
    font-size: 0.95rem;
  }
}

/* ============================================================
   15. OVERLAP LAYOUT (min-width: 900px) — cards ride over the hero's water
   Two cards on each side with an open gap in the middle for the dock
   (the gap is ~26% of the window width, about the dock's width), so
   the cards show at launch without covering the dock or platform.
   Needs a wide, reasonably tall window; everything else keeps the
   cards below the hero. Remove .is-overlap in index.html to undo.

   How it is anchored: the band starts exactly at the hero's bottom
   edge (the seam where the water ends and the navy begins). Its inner
   box has ZERO height, and the card grid is pinned to that box with
   `bottom: var(--hero-edge-gap)`. So the cards always END a fixed
   distance above the seam and grow upward, whatever their height
   (text wrapping, width). Nothing is measured, nothing is guessed.
   Padding inside the cards is NOT set here, only the two variables
   --card-pad / --card-pad-bottom (defined on .preview-card).
   ============================================================ */
@media (min-width: 900px) {
  .home-previews.is-overlap {
    z-index: 1;
    padding-top: 0;
  }

  .home-previews.is-overlap .home-previews-inner {
    position: relative;
    height: 0;
    max-width: none;                   /* cards grow with the dock gap */
  }

  /* Four cards in one row: two each side of the open dock gap. */
  .home-previews.is-overlap .preview-grid {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--hero-edge-gap);
    /* The row is a fixed 97 units wide, centred. 26 units is the open
       dock gap; the four cards share the rest. */
    width: calc(var(--u) * 97);
    margin-inline: auto;
    grid-template-columns: 1fr 1fr calc(var(--u) * 26) 1fr 1fr;
    align-content: end;
    align-items: stretch;              /* all four cards the same height */
    justify-content: stretch;
    pointer-events: none;              /* only the cards take clicks; the gap between them lets the scene show */
  }

  .home-previews.is-overlap .preview-grid > li:nth-child(3) {
    grid-column: 4;
    grid-row: 1;
  }

  .home-previews.is-overlap .preview-grid > li:nth-child(4) {
    grid-column: 5;
    grid-row: 1;
  }

  /* Bigger, squarer cards: the space the dock gap leaves is shared by
     four cards, so claw back width from the margins and gaps, trim
     the padding inside each card, and let the art fill more of it. */
  .home-previews.is-overlap {
    padding-inline: 0;
  }

  .home-previews.is-overlap .preview-grid {
    column-gap: var(--u);
  }

  /* Everything inside a card is a multiple of --u, so a card is a
     scaled copy of itself at every monitor size. The art window is a
     4:3 box taken from the card's width, so it scales on its own. */
  .home-previews.is-overlap .preview-card {
    --card-pad:        var(--u);
    --card-pad-bottom: calc(var(--u) * 2.2);
    border-radius: calc(var(--u) * 0.7);
    pointer-events: auto;
  }

  .home-previews.is-overlap .preview-title {
    font-size: 8.2cqi;                 /* "Discover the Players" stays on one line */
    margin-bottom: calc(var(--u) * 0.7);
  }

  /* Cards are equal height (align-items: stretch), but the art window
     was locked to 4:3 and the footer's margin-top:auto pinned it to the
     bottom, so a shorter card's spare height pooled below the art and
     left it floating high (dead space on Meet the Teams, Watch, Relive).
     Fix 1 — centre the art block in the spare height so the gap is even,
     not bottom-heavy. Fix 2 — grow the art window itself so it actually
     uses the room (bigger logos/thumbs) instead of leaving a gap. */
  .home-previews.is-overlap .preview-media {
    aspect-ratio: auto;
    flex: 1 1 auto;                     /* fill the leftover card height */
    min-height: calc(var(--u) * 12);    /* keep roughly the old 4:3 floor */
    margin-top: 0;
    margin-bottom: calc(var(--u) * 0.8);
  }

  .home-previews.is-overlap .preview-footer {
    margin-top: 0;                      /* stop it hogging the spare height */
  }

  /* Width-based art (team logos, fanned cards) centres in the taller
     window; the photo grid and video frame stretch to fill it. The
     teams 2x2 gets a touch more gap so the bigger window reads evenly. */
  .home-previews.is-overlap .preview-media--teams {
    --tile-gap: clamp(10px, 5cqi, 20px);
  }

  .home-previews.is-overlap .preview-video-caption {
    font-size: max(8.5px, 5.2cqi);
  }

  .home-previews.is-overlap .preview-footer {
    gap: var(--u);
    padding-top: var(--u);
  }

  .home-previews.is-overlap .preview-label {
    font-size: max(9px, calc(var(--u) * 0.95));
    letter-spacing: 0.08em;
  }

  .home-previews.is-overlap .preview-arrow {
    font-size: calc(var(--u) * 1.3);
  }

  .home-previews.is-overlap .preview-tcard {
    top: 18%;
    width: 36%;
  }

  .home-previews.is-overlap .preview-tcard:nth-child(1) { left: 2%; }
  .home-previews.is-overlap .preview-tcard:nth-child(2) { left: 22%; }
  .home-previews.is-overlap .preview-tcard:nth-child(3) { left: 42%; }
  .home-previews.is-overlap .preview-tcard:nth-child(4) { left: 62%; }
}

/* ============================================================
   15b. CARD SHAPE — phones and desktop
   Every preview card has the SAME fixed shape: 10 wide x 11 tall
   (height = 1.1 x width). Title and footer take what they need; the
   art window fills the rest, so there is no empty band anywhere.
   The art window is a size container so each kind of art (logos,
   fanned cards, video, photos) sizes itself to fit it.
   To change the shape, change the one aspect-ratio value below (and
   the 1.1 in --m-grid-h in section 15a).
   ============================================================ */
.home-previews.is-overlap .preview-grid {
  align-items: start;                 /* shape comes from aspect-ratio, not stretch */
}

.home-previews.is-overlap .preview-grid > li {
  align-items: flex-start;
}

.home-previews.is-overlap .preview-card {
  aspect-ratio: 10 / 11;
}

.home-previews.is-overlap .preview-media {
  container-type: size;
  aspect-ratio: auto;
  flex: 1 1 0;
  min-height: 0;
  margin-top: 0;
}

.home-previews.is-overlap .preview-footer {
  margin-top: 0;
}

/* Team logos: 2 x 2, each tile as big as the window allows */
.home-previews.is-overlap .preview-media--teams {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-content: center;
}

.home-previews.is-overlap .preview-media--teams img {
  width: min(calc(37.5cqw - var(--tile-gap) / 2), calc(50cqh - var(--tile-gap) / 2));
}

/* Fanned player cards: sized to the window, centred vertically */
.home-previews.is-overlap .preview-tcard {
  width: min(30cqw, 55cqh);
  top: calc(50% - min(30cqw, 55cqh) * 1.365 / 2);
}

/* Video: frame shrinks to leave room for a one-line caption */
.home-previews.is-overlap .preview-video-frame {
  width: min(100%, calc((100cqh - 22px) * 16 / 9));
}

.home-previews.is-overlap .preview-video-caption {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Photos: 2 x 2 tiles fill the window and can never spill out of it.
   Phone browsers (Safari especially) let an image grid item grow to its
   own picture height unless its minimum size is zeroed, which pushed the
   tiles past the card. min-height: 0 + clipping keeps them inside. */
/* Safari sizes a grid item's height:100% against the whole box instead of
   its row, so the bottom photos covered the top ones. Give each photo an
   exact height instead: half the window (100cqh, the .preview-media size
   container) minus the gap. No percentages, same result in every browser. */
.home-previews.is-overlap .preview-media--photos {
  --ph-gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-content: center;
  gap: var(--ph-gap);
  overflow: hidden;
}

.home-previews.is-overlap .preview-media--photos img {
  width: 100%;
  height: calc((100cqh - var(--ph-gap)) / 2);
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
}

/* ============================================================
   16. DESKTOP FIRST SCREEN — one scale for the whole hero (>= 900px)
   The hero is exactly one window tall, and the title, tagline, cards
   (section 15) are sized from --u (see :root), so the
   first view is the same picture, just scaled, on any monitor. Phones
   and narrow windows (< 900px) keep the flowing layout instead.
   This block sits AFTER the base hero / title / cue rules on purpose:
   it overrides them at equal specificity.
   ============================================================ */
@media (min-width: 900px) {
  :root {
    --hero-edge-gap: calc(var(--u) * 2.2);
  }

  .hero {
    min-height: min(100svh, 56.25vw);
    padding-top: calc(var(--header-h) + var(--u) * 3);
  }

  .hero-content {
    padding-top: calc(var(--u) * 1.9);
  }

  .hero h1 {
    --title-size: calc(var(--u) * 5.3);
  }

  .title-baseball {
    font-size: calc(var(--title-size) * 0.46);
  }

  .hero-tagline {
    margin-top: calc(var(--u) * 1.6);
    font-size: calc(var(--u) * 1.5);
  }

}

/* --- Drone reel: closes the About section, a bit narrower than the text column --- */
/* The "controlled chaos" line leads into the drone reel: centered and
   capped to a comfortable measure, sitting just above the video. */
.home-reel {
  max-width: 52rem;
  margin: clamp(20px, 3vw, 32px) auto 0;
}

.hero-video-frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  /* Showcase element: a thicker gold border than the boxes, but no
     glow — crisp gold everywhere, just like the nav and panels. */
  border: 4px solid var(--gold);
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy);
  box-shadow:
    0 0 0 1px rgba(var(--navy-rgb), 0.6),
    0 18px 46px rgba(0, 0, 0, 0.5);
}

.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   ABOUT SECTION (index.html #about.home-about.about) — a
   sports-documentary editorial story. Scoped under .about so
   nothing here affects other pages. Hierarchy comes from
   spacing, alignment, and real photos — not gold boxes.
   ============================================================ */
.about {
  --about-max: 1120px;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 7vh, 88px);
}

/* Each block shares one fluid, capped, centered measure. */
.about > * {
  width: 100%;
  max-width: var(--about-max);
  margin-inline: auto;
}

.about-eyebrow {
  margin: 0 0 6px;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}


/* --- 1) Opening story: alternating editorial rows --- */
.about-story {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4.5vw, 56px);
}

/* Each row is ONE card (.panel on the row): copy and photo share the
   same box, the same top and bottom edges, and the photo fills its
   side of the card to the copy's height. Copy gets the wider column. */
.about-story-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: visible;           /* the sticker hangs off the corner */
}

.about-story-row--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.about-story-row--reverse .about-story-copy { order: 2; }
.about-story-row--reverse .about-story-media { order: 1; }

.about-story-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  padding: clamp(22px, 3.5vw, 48px);
}

.about-story-copy p {
  margin: 0;
  max-width: none;
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  text-align: left;
}

/* Story photos use the shared .panel box; the image insets slightly and
   clips to a softer inner radius so it matches the site's framed look. */
.about-story-media {
  margin: 0;
  min-width: 0;
  display: flex;
  padding: clamp(8px, 1vw, 12px);
}

.about-story-media img {
  display: block;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  border-radius: 8px;
}

/* JDD logo "sticker" on the lead photo's bottom-right corner, over the
   open grass, tilted like a real sticker. */
/* The sticker's centre sits exactly on the frame's bottom-right corner,
   so it overlaps the border and hangs half off the box. */
.about-story-media.has-sticker {
  position: relative;
  overflow: visible;
}

.about-story-media img.about-sticker {
  --sticker: clamp(90px, 11vw, 140px);
  min-height: 0;
  position: absolute;
  /* Sits inside the photo's bottom-right corner, so it never hangs
     into the next row when the cards stack on mobile. */
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  width: var(--sticker);
  height: var(--sticker);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: contain;
  transform: rotate(-10deg);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  z-index: 2;
}

/* --- 2) League facts: compact, consistent, content-height tiles --- */
/* Always a 2 x 2, centred and capped so the tiles stay compact. */
.about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  list-style: none;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

/* Facts use the shared .panel box (crisp gold border + frosted surface)
   to match the rest of the site; only padding/layout live here. */
.about-fact {
  position: relative;
  min-width: 0;
  padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 18px);
}

.about-fact-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.about-fact-num {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1;
  color: var(--white);
}

/* The supporting words under "1" (Format) — smaller, wraps by word. */
.about-fact-sub {
  display: block;
  margin-top: 4px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  overflow-wrap: break-word;
}

/* Prize title: a title-sized word block, smaller than the numerals. */
.about-fact-title {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.55rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
  overflow-wrap: break-word;
}

/* --- 2b) The Essentials: the four things you need to play, 2 x 2 ---
   Same .panel box as the facts. Every tile has an identical square
   photo window (light, because the bat & ball art has a white
   background) with the name underneath. */
.about-essentials {
  max-width: 26rem;
  /* Sits under the "From a sketch" card, same gap as between About cards. */
  margin: clamp(28px, 4.5vw, 56px) auto 0;
  text-align: center;
}

.essentials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.essential {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: clamp(8px, 1vw, 12px);
}

.essential-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(var(--navy-rgb), 0.6);   /* same dark window on every tile */
  overflow: hidden;
}

.essential-media img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

/* "4 Passionate Teams": the four logos in a 2 x 2 inside the window. */
.essential-media--teams {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6%;
  padding: 10%;
  background: rgba(var(--navy-rgb), 0.6);
}

.essential-media--teams img {
  width: 100%;
  height: 100%;
}

.essential-media.is-placeholder {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  background: rgba(var(--navy-rgb), 0.5);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px;
}

.essential-name {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(0.82rem, 0.75rem + 0.4vw, 1rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

/* --- 3) How the game works: rules copy + Purple Truck photo --- */
/* Same card as the About story rows (.about-story-row.panel): copy on
   the left, the rules scroller on the right, heading above like the
   Starter Pack. Only the scroller's inset is specific here. */
.about-subheading { margin: 0 0 clamp(12px, 2vh, 18px); }

/* Section headings live INSIDE their card (.panel), across the top.
   In the two-column grid cards the heading spans both columns. */
.home-section .panel > .card-heading {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
}

/* Grid cards (story rows, rules) have no padding of their own, so the
   heading carries the card's top inset and the columns tuck under it. */
.about-story-row > .card-heading {
  padding: clamp(22px, 3.5vw, 48px) clamp(22px, 3.5vw, 48px) 0;
}
.about-story-row > .card-heading ~ .about-story-copy { padding-top: clamp(12px, 2vw, 20px); }

/* Padded cards (Starter Pack, closing, evolution): space under heading. */
.home-section .about-essentials > .card-heading,
.home-section .evolution-pair > .card-heading { margin-bottom: clamp(4px, 1vw, 10px); }

.about-essentials.panel { padding: clamp(16px, 2.4vw, 28px); }

/* Sits under the rules scroller's dots, centred. */
.about-rules-cta {
  margin: clamp(14px, 2vh, 20px) 0 0;
  text-align: center;
}

/* Trophy figure uses the shared .panel box like the rest of the site;
   padding insets the photo, layout only here. */
.about-rules-media {
  margin: 0;
  min-width: 0;
  padding: clamp(10px, 1.4vw, 16px);
}

.about-rules-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

.about-rules-media figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: rgba(239, 230, 255, 0.78);
  text-align: center;
}

/* Quick rules scroller: one 4:5 rule card at a time, arrows on the
   sides, dots underneath. Overrides the old 4:3 trophy photo sizing. */
.rules-scroller {
  position: relative;
  max-width: 28rem;
  justify-self: center;
  align-self: center;
  width: 100%;
  padding: clamp(16px, 2.4vw, 32px);   /* inset inside the shared card */
}

.rules-scroller-track { position: relative; }

.about-rules-media .rules-slide {
  width: 100%;
  height: auto;
  aspect-ratio: 819 / 1024;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.rules-slide[hidden] { display: none; }

.rules-arrow {
  position: absolute;
  top: calc(50% - 22px);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(var(--navy-rgb), 0.8);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.rules-arrow--prev { left: -8px; }
.rules-arrow--next { right: -8px; }

.rules-arrow:hover,
.rules-arrow:focus-visible {
  background: var(--gold);
  color: var(--navy);
}

.rules-arrow:focus-visible,
.rules-dot:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.rules-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.rules-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.rules-dot.is-active { background: var(--gold); }

/* --- 4) Closing sentiment + wide drone shot --- */
/* Same card theme as the story rows: heading above, then one .panel
   holding the copy and the drone reel. Stacked (copy on top, video
   full card width) so the video stays the biggest thing on the page. */
.about-closing-card {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vw, 28px);
  padding: clamp(22px, 3.5vw, 48px);
}

.about-closing-copy {
  margin: 0;
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  text-align: left;
}

.about-reel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}

/* Phones: a taller frame so the drone shot is not a thin strip. */
@media (max-width: 600px) {
  .about-reel { aspect-ratio: 4 / 3; }
}

/* Tablet: features collapse to one column before text gets cramped;
   facts become 2x2. */
@media (max-width: 860px) {
  .about-story-row,
  .about-rules {
    grid-template-columns: 1fr;
  }
  /* Stacked rows read copy-then-photo regardless of desktop side. */
  .about-story-row--reverse .about-story-copy,
  .about-story-row--reverse .about-story-media { order: 0; }

}

/* --- Lower page: same navy background --- */
/* The top of the lower page is "lake": the treeline's mirrored
   reflection (::before). The white shimmer dashes were removed. */
.home-sections {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: var(--white);
}

/* Lake reflection: the treeline above, flipped upside down, fading
   with depth and broken into ripple lines (decorative). */
.home-sections::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: var(--shore-h);
  background: linear-gradient(to top, var(--tree-tone), transparent);
  opacity: 0.6;
  transform: scaleY(-1);
  -webkit-mask:
    repeating-linear-gradient(#000 0 3px, transparent 3px 5px),
    var(--pixel-trees) 0 bottom / auto 100% repeat-x,
    var(--pixel-trees) 57px bottom / auto 60% repeat-x;
  -webkit-mask-composite: source-in, source-over, source-over;
          mask:
    repeating-linear-gradient(#000 0 3px, transparent 3px 5px),
    var(--pixel-trees) 0 bottom / auto 100% repeat-x,
    var(--pixel-trees) 57px bottom / auto 60% repeat-x;
          mask-composite: intersect, add, add;
  pointer-events: none;
}

.home-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: calc(var(--shore-h) + clamp(12px, 2vw, 32px)) clamp(20px, 5vw, 48px) clamp(96px, 11vw, 160px);
}

.home-section {
  padding: clamp(40px, 6vh, 64px) 0 0;
}

.home-section:first-child {
  padding-top: 0;
}

.home-section .section-heading {
  margin-bottom: clamp(18px, 2.4vh, 28px);
  text-align: center;
  text-wrap: balance;
}

.evolution > p:last-child,
.home-cta {
  text-align: center;
}

.home-cta .lede {
  margin-inline: auto;
}

/* --- Teams strip --- */
.home-teams-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(18px, 2.5vh, 28px) 0 0;
  padding: 0;
}

.home-team-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 16px 12px 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.home-team-tile:hover,
.home-team-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.home-team-tile:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.home-team-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 160px;
}

.home-team-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-team-name {
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(0.7rem, 1.4vw, 1rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
  text-align: center;
  line-height: 1.2;
}

/* --- Featured cards --- */
.home-cards-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(18px, 2.5vh, 28px) 0 0;
  padding: 0;
}

.home-card-frame {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 5 / 7;
  padding: 14px;
  border: 2px solid var(--gold);
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.72), rgba(var(--navy-rgb), 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}

.home-card-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

.home-card-caption {
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

/* --- As Seen On / Sponsored By --- */
.home-asseenon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
  margin: clamp(18px, 2.5vh, 28px) 0 0;
}

.home-asseenon-group {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(var(--navy-rgb), 0.42);
}

.home-asseenon-label {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.home-logo-slots {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.home-logo-slot {
  flex: 1 1 120px;
  min-height: 64px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

/* Waboba sponsor group — a real photo + genuine blurb, not just a logo. */
.home-sponsor-figure {
  margin: 0 0 14px;
  border-radius: 10px;
  overflow: hidden;
}

.home-sponsor-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.home-sponsor-blurb {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.home-sponsor-blurb a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}

.home-sponsor-blurb a:hover,
.home-sponsor-blurb a:focus-visible {
  text-decoration: underline;
}

/* The lone Waboba logo shouldn't stretch full width under the blurb. */
.home-sponsor .home-logo-slots {
  justify-content: flex-start;
}

.home-sponsor .home-logo-slot {
  flex: 0 1 160px;
}

/* --- Footer CTA --- */
.home-cta .hero-socials {
  margin-top: clamp(14px, 2vh, 20px);
  gap: clamp(14px, 1.6vw, 20px);
}

/* Bigger social tiles + icons in the Follow the Season block. */
.home-cta .hero-socials a {
  width: clamp(60px, 6vw, 76px);
  height: clamp(60px, 6vw, 76px);
}

.home-cta .hero-socials img {
  width: clamp(32px, 3.4vw, 42px);
  height: clamp(32px, 3.4vw, 42px);
}

/* Breathing room between the icons and the photos button. */
.home-cta-photos {
  margin: clamp(22px, 3.5vh, 36px) 0 0;
}

/* Same card theme as the sections above: heading inside one .panel. */
.home-cta-card { padding: clamp(22px, 3.5vw, 48px); }
.home-section .home-cta-card > .card-heading { margin-bottom: clamp(12px, 2vh, 18px); }

/* Reflow homepage grids on smaller screens */
@media (max-width: 640px) {
  .home-teams-grid,
  .home-cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-asseenon {
    grid-template-columns: 1fr;
  }
}

/* --- Scroll reveal (progressive; only active once JS adds .js-reveal) --- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Team info tiles — static (non-interactive) team showcase
   Used on teams.html (general team information page).
   ============================================================ */
.team-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
  margin-top: clamp(20px, 3vh, 32px);
}

.team-info-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  padding: clamp(12px, 1.4vw, 18px);
  /* Border + frosted surface + glow come from the shared .panel rule
     (apply class="panel panel--accent" in the HTML). Layout only here. */
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.team-info-tile:hover,
.team-info-tile:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

.team-info-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* No cap — fill the full tile width so the logo dominates the card. */
}

.team-info-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.team-info-name {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  /* Each team's name matches its logo color (set per tile via --team-accent):
     mustard / burgundy / red / purple. Falls back to white. */
  color: var(--team-accent, var(--white));
}

.team-info-blurb {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* Narrower viewports: 4-up becomes a 2x2 grid rather than a single column. */
@media (max-width: 820px) {
  .team-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   Cards page — 2025 trading-card gallery (flip + front-only)
   ------------------------------------------------------------ */
.cards-page {
  min-height: 100vh;
  background:
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.82), rgba(var(--navy-rgb), 0.76)),
    url("../assets/images/shared/hero-pixel-lake-v4.jpg") center / cover no-repeat;
  color: var(--white);
  padding-top: clamp(8px, 2vh, 24px);
}

.cards-page-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 48px) clamp(40px, 6vh, 80px);
}

.cards-heading {
  padding: 0 0 clamp(16px, 2vh, 28px);
  text-align: center;
}

.cards-title {
  display: block;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 6px;
  line-height: 1;
}

.cards-subtitle {
  font-size: clamp(0.82rem, 1.4vw, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.54);
  margin: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* 3D flip stage — flip cards only */
.card__flip {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.card.is-flipped .card__flip {
  transform: rotateY(180deg);
}

/* Faces */
.card__face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #eae4d8;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face--back {
  transform: rotateY(180deg);
}

/* Front-only cards: single face, no 3D context */
.card--single .card__face {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.card__face img {
  width: 100%;
  height: 100%;
  /* cover, not contain: 2025 files are 822x1122 (print bleed), slightly
     wider than the 5:7 box. Contain left off-white bars top and bottom. */
  object-fit: cover;
  display: block;
}

.card__name {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(0.72rem, 1.2vw, 0.9rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  line-height: 1.2;
  text-align: center;
}

/* Filtered-out cards (scripts/cards.js sets [hidden]); .card's
   display:flex would otherwise override the attribute. */
.card[hidden] {
  display: none;
}

/* Season label in the caption — only shown on the "All" tab. */
.card__year {
  display: none;
  color: var(--gold);
}

.card-grid.is-all-years .card__year {
  display: inline;
}

/* ------------------------------------------------------------
   Cards page controls: year tabs, search, sort, result count
   ------------------------------------------------------------ */
.cards-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 clamp(16px, 2.5vh, 24px);
}

.cards-years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cards-year {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(var(--navy-rgb), 0.6);
  color: var(--white);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cards-year:hover {
  border-color: var(--gold);
}

.cards-year[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.cards-year:focus-visible,
.cards-field input:focus-visible,
.cards-field select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.cards-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cards-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cards-field-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.cards-field input,
.cards-field select {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(var(--navy-rgb), 0.6);
  color: var(--white);
  font: inherit;
  font-size: 0.9rem;
}

.cards-field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.cards-field select option {
  color: var(--ink);
}

.cards-field--search input {
  width: 220px;
}

.cards-count {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.cards-empty {
  padding: clamp(24px, 5vh, 48px) 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}

.cards-empty[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .cards-tools,
  .cards-field--search {
    flex: 1 1 100%;
  }

  .cards-field--search input {
    width: 100%;
  }
}

/* Flip affordance — interactive cards only */
.card--flip {
  cursor: pointer;
}

.card--flip:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .card__flip {
    transition: none;
  }
}

/* ------------------------------------------------------------
   Homepage "About" fold-in (#about)
   The About content from about.html now lives inline on the home
   page. The hero "Learn More" buttons scroll here. Because the
   site header is position:fixed, offset the anchor target so the
   section heading isn't tucked under the header on scroll.
   ------------------------------------------------------------ */
/* (Anchor offset for the sticky header lives on html: scroll-padding-top.) */

/* When the About link jumps here, clear the sticky header and leave a
   comfortable gap above the (two-line) heading so it isn't tucked up
   against the nav bar. */
#about.home-about {
  scroll-margin-top: calc(var(--header-h) + clamp(24px, 4vh, 48px));
}

/* ------------------------------------------------------------
   Media page — featured video, click-to-play players,
   per-year photo blocks, and the "As Seen On" plug.
   ------------------------------------------------------------ */

/* Featured video: large player on the left, copy on the right.
   Stacks on narrow screens. */
/* Year subheading inside the Watch section (JDD 2026 / JDD 2025).
   Sits a step below .section-heading: gold Anton block with a short
   underline accent, with extra top space to separate year groups. */
.section-subheading {
  margin: clamp(28px, 4vh, 44px) 0 clamp(8px, 1.5vh, 12px);
  padding-bottom: 6px;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 2px solid rgba(var(--gold-rgb), 0.35);
}

.video-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin: clamp(16px, 3vh, 28px) 0 clamp(28px, 4vh, 44px);
}

.video-feature-copy .video-feature-title {
  margin: 4px 0 10px;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
}

@media (max-width: 760px) {
  .video-feature {
    grid-template-columns: 1fr;
  }
}

/* Coming-soon feature: no video frame yet. Drop the two-column grid so
   the copy uses the full width instead of being scrunched into the left
   column, and let the description span the whole block. */
.video-feature--soon {
  display: block;
}

.video-feature--soon .video-desc {
  max-width: none;
}

/* Click-to-play button: shows the YouTube thumbnail with a play badge;
   JS replaces it with the iframe on click (see scripts/site.js). */
.video-player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  text-decoration: none;
}

.video-player-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s, filter 0.3s;
}

.video-player:hover .video-player-thumb,
.video-player:focus-visible .video-player-thumb {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* Small red YouTube-style play badge, centered on the thumbnail. */
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f00;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s, background 0.2s;
}

.video-play-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
}

.video-player:hover .video-play-btn,
.video-player:focus-visible .video-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  background: #ff1a1a;
}

.video-player:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Per-year photo blocks on the Media page. */
.photo-year {
  margin-top: clamp(22px, 3.5vh, 36px);
}

.photo-year-heading {
  margin: 0 0 14px;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* "As Seen On" / Atmosphere TV plug — uses the shared .panel box
   (border + frosted surface + glow). Layout only here. */
.media-plug {
  margin-top: clamp(22px, 3.5vh, 36px);
  padding: clamp(18px, 2.4vw, 28px);
}

.media-plug-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.media-plug-title {
  margin: 2px 0 10px;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
}

/* Split plug — copy on the left, logo/photo on the right, sharing one
   box. Stacks on narrow screens. */
.media-plug--split {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
}

.media-plug--split .media-plug-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.media-plug--split .media-plug-copy > *:last-child {
  margin-bottom: 0;
}

/* Atmosphere plug logo — the Wildcard Sports banner. In the split layout
   it sits to the right of the copy; capped so it never dominates. */
.media-plug-logo {
  display: block;
  flex: 0 0 auto;
  margin-top: clamp(12px, 1.6vh, 16px);
}

.media-plug--split .media-plug-logo {
  margin-top: 0;
}

.media-plug-logo img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 8px;
}

/* Photo variant (Waboba raft game) — a real photo rather than a logo
   banner, so it gets more room and a wider cap. */
.media-plug-logo--photo {
  flex-basis: 40%;
}

.media-plug-logo--photo img {
  max-width: 320px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 640px) {
  .media-plug--split {
    flex-direction: column;
    align-items: flex-start;
  }
  .media-plug--split .media-plug-logo {
    margin-top: clamp(12px, 1.6vh, 16px);
  }
}

/* Podcast plug — compact Spotify player above the copy. Capped so the
   player stays a tidy strip on wide screens and the long description
   reads at a comfortable measure; fills the width on phones. */
.media-plug-embed {
  margin: clamp(14px, 2vh, 20px) 0;
  max-width: 520px;
  border-radius: 12px;
  overflow: hidden;
  /* Spotify's own player is rounded; this clips the iframe to match. */
}

.media-plug-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

.media-plug--podcast .btn {
  margin-top: 4px;
}

.media-plug--podcast p:last-child {
  margin-bottom: 0;
}

/* One-line variant of the two-tone subhero title: keeps the orange
   lead + green accent fonts/colors but sets them side by side on a
   single line (used on the Media page "Follow the Drip" heading). */
.subhero-title--inline .subhero-title-lead,
.subhero-title--inline .subhero-title-accent {
  display: inline;
}

/* --- Featured cards + sponsor logos: filled-slot styling --- */
.home-card-frame a {
  display: block;
  width: 100%;
  height: 100%;
}

.home-card-frame:has(img) {
  align-items: stretch;
  padding: 8px;
}

.home-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

/* Once a logo slot holds a real logo, drop the dashed placeholder look. */
.home-logo-slot:has(a) {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.18);
  display: flex;
}

.home-logo-slot a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
}

.home-logo-slot a:hover,
.home-logo-slot a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.home-logo-slot img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

/* Wide full-color banner logo (e.g. Wildcard Sports) — fills the slot
   edge to edge, no white chip. */
.home-logo-slot--banner {
  flex: 1 1 100%;
}

.home-logo-slot--banner a {
  padding: 0;
}

.home-logo-slot--banner img {
  max-width: 100%;
  max-height: none;
  width: 100%;
  height: auto;
  background: none;
  padding: 0;
  border-radius: 6px;
}

/* ------------------------------------------------------------
   Stats page (stats.html) — career table + leaderboards
   ------------------------------------------------------------ */
.stats-section {
  margin: 0 0 clamp(32px, 5vh, 56px);
}

.cards-heading + .stats-section {
  margin-top: clamp(16px, 3vh, 32px);
}

.stats-section .cards-empty {
  padding: 16px 0;
  text-align: left;
}

/* Pages that are mostly a table use nearly the whole window instead of
   the usual reading width. Add .is-wide next to the page's inner class. */
.cards-page-inner.is-wide,
.page-inner.is-wide {
  max-width: min(96vw, 2200px);
}

.stats-table-wrap {
  overflow-x: auto;
  /* Border + frosted surface + glow come from the shared .panel rule
     (apply class="panel" in the HTML). Layout only here. */
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  /* Text and cell padding grow with the window, so the columns fill the
     wider page instead of leaving gaps. Phones still scroll sideways. */
  font-size: clamp(0.8rem, 0.5rem + 0.5vw, 1.15rem);
  white-space: nowrap;
}

.stats-table th,
.stats-table td {
  padding: clamp(7px, 0.6vw, 14px) clamp(8px, 1vw, 22px);
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.07);   /* column lines */
}

.stats-table th:last-child,
.stats-table td:last-child {
  border-right: 0;
}

/* Faint banding so a row is easy to follow across 12+ columns. */
.stats-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

/* The column being sorted gets a gold tint. */
.stats-table td.is-sorted,
.stats-table tbody th.is-sorted {
  background: rgba(var(--gold-rgb), 0.08);
}

.stats-table thead th {
  position: sticky;
  top: 0;
  background: var(--navy);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.stats-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.08);
}

.stats-table tbody th {
  font-weight: 700;
}

.stats-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stats-sort {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.stats-sort:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Every header shows a faint up/down arrow so it reads as clickable;
   the sorted column's arrow turns solid and points the way it is sorted. */
.stats-sort::after {
  content: " \2195";
  opacity: 0.35;
}

.stats-sort:hover {
  color: var(--white);
}

.stats-sort:hover::after {
  opacity: 0.8;
}

[aria-sort] .stats-sort {
  color: var(--white);
}

[aria-sort] .stats-sort::after {
  opacity: 1;
}

[aria-sort="descending"] .stats-sort::after { content: " \25BE"; }
[aria-sort="ascending"]  .stats-sort::after { content: " \25B4"; }

/* Tall sheets scroll inside the box so the sticky header stays visible. */
[data-stats-table] .stats-table-wrap {
  max-height: 70vh;
}

/* Keep the player name visible while scrolling sideways. */
.stats-table tbody th,
.stats-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--navy);
}

.stats-table thead th:first-child {
  z-index: 2;
}

.stats-legend {
  margin: 12px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.stats-legend b {
  color: var(--gold);
}

/* Team page player stats (scripts/team-stats.js) */
.team-stats {
  margin: clamp(24px, 4vh, 40px) 0 clamp(32px, 5vh, 56px);
}

[data-team-stats] {
  display: grid;
  gap: clamp(20px, 3vh, 28px);
}

.team-stats .cards-years {
  margin-bottom: 14px;
}

.team-notes {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

/* ---- Stat tables: team colours ------------------------------
   Anything with data-team="<slug>" (a league-table row, the team
   page's roster) picks up that team's colours. Set in :root. */
[data-team="big-time-bologna"]   { --team: var(--team-big-time-bologna);   --team-text: var(--team-big-time-bologna-text); }
[data-team="dingin-dillos"]      { --team: var(--team-dingin-dillos);      --team-text: var(--team-dingin-dillos-text); }
[data-team="mobster-lobsters"]   { --team: var(--team-mobster-lobsters);   --team-text: var(--team-mobster-lobsters-text); }
[data-team="six-mile-slammers"]  { --team: var(--team-six-mile-slammers);  --team-text: var(--team-six-mile-slammers-text); }

/* League table: team name in the team's colour, plus a colour bar on the row's left edge. */
.stats-team {
  font-weight: 700;
  color: var(--team-text, inherit);
}

.stats-table tbody tr[data-team] > th:first-child {
  box-shadow: inset 4px 0 0 var(--team, transparent);
}

/* Team page: every player is on this team, so the player names carry the colour. */
[data-team-stats][data-team] .stats-table tbody th {
  color: var(--team-text);
  box-shadow: inset 4px 0 0 var(--team);
}

.stats-table tfoot th,
.stats-table tfoot td {
  border-top: 2px solid rgba(255, 255, 255, 0.28);
  border-bottom: 0;
  font-weight: 800;
  color: var(--gold);
}

.stats-legend a {
  color: var(--gold);
  font-weight: 700;
}

/* ============================================================
   TEAM DETAIL PAGES (team-*.html)
   Hero + About + Roster + Trophies + Highlights, rendered from
   data/team-pages.js by scripts/team-page.js. Per-team accent via
   --team-accent on .team-page.
   ============================================================ */
.team-page {
  min-height: 100vh;
  background:
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.82), rgba(var(--navy-rgb), 0.76)),
    url("../assets/images/shared/hero-pixel-lake-v4.jpg") center / cover no-repeat;
  color: var(--white);
}

/* Shared section rhythm + headings for the rendered sections. */
.team-page .page-inner,
.team-section {
  max-width: 1040px;
  margin-inline: auto;
}

/* The roster & stats card lives in the full-width .is-wide container
   (the stats table needs the room for 12+ columns), so let it fill that
   width instead of the narrower reading cap above. */
.page-inner.is-wide .team-section {
  max-width: none;
}

/* Below-hero sections read as translucent "glass" cards over the team
   background: a dark frosted panel with an accent-tinted border, so each
   block is visually grouped instead of floating as bare text. The accent
   comes from --team-accent (set per team on .team-page). */
.team-section {
  /* Border + frosted surface + glow come from the shared .panel rule
     (apply class="panel panel--accent" in the HTML). --panel-glow is the
     team accent via .panel--accent. Layout + the deeper lift shadow only. */
  position: relative;
  margin-block: clamp(22px, 4vh, 40px);
  margin-inline: auto;
  width: calc(100% - 2 * clamp(16px, 4vw, 40px));
  padding: clamp(24px, 3.5vh, 38px) clamp(22px, 4vw, 44px);
  border-radius: 18px;   /* softer corners than the default 12px */
  /* A deeper DARK drop shadow so large section cards still lift off the
     busy team background. No colour halo (removed with the glow). The
     team-colour border comes from .panel--accent. */
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.team-section-heading {
  margin: 0 0 clamp(14px, 2vh, 20px);
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  border-left: 5px solid var(--team-accent, var(--gold));
  padding-left: 14px;
}

/* --- Hero: team art backdrop + logo + name + tagline --- */
.team-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(48px, 9vh, 104px) clamp(20px, 6vw, 56px);
  text-align: center;
  overflow: hidden;
  border-bottom: 3px solid var(--team-accent, var(--gold));
}

/* Team art as the hero backdrop — a real <img> that covers the hero. */
.team-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A dark gradient over the art keeps the logo and text legible while
   the art's own motifs still read through. */
.team-hero.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(rgba(var(--navy-rgb), 0.35), rgba(var(--navy-rgb), 0.72));
}

.team-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vh, 22px);
  max-width: 820px;
}

/* Logo keeps its full silhouette (contain), never cropped. */
.team-hero-logo {
  width: clamp(150px, 24vw, 260px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6));
}

.team-hero-name {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.6);
}

.team-hero-tagline {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 1.6vw, 1rem);
  color: var(--team-accent, var(--gold));
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* --- About --- */
/* Easy-read body copy, same on every team page: regular weight, a
   modest size (15px phone -> 16px desktop), normal line spacing, and a
   ~62-character line so the eye doesn't get lost crossing the panel. */
.team-about-body {
  max-width: 62ch;
  font-size: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.team-about-body p { margin: 0 0 1em; }   /* clear paragraph breaks, esp. on phones */
.team-about-body p:last-child { margin-bottom: 0; }
.team-about-placeholder { color: rgba(255, 255, 255, 0.55); font-style: italic; }

/* --- Purple Truck Trophy case ---
   One small card per championship: the truck, then the year in big gold
   Anton so it's the first thing you read. Compact, not a hero moment. */
.team-trophy-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Small emblem: round purple badge with the truck inside, year below. */
.team-trophy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  text-align: center;
}

.team-trophy-art {
  display: grid;
  place-items: center;
  width: 68px;
  aspect-ratio: 1;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(123, 84, 214, 0.55), rgba(var(--navy-rgb), 0.85) 75%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.team-trophy-img {
  display: block;
  width: 78%;
  height: auto;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}

.team-trophy-year {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--gold);
}

/* Title stays in the markup for screen readers; the badge says it visually. */
.team-trophy-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.team-trophy-empty { margin: 0; color: rgba(255, 255, 255, 0.6); font-style: italic; }

/* --- Shared empty slot (highlight) --- */
.team-slot {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  border: 2px dashed rgba(var(--team-accent-rgb, 247, 189, 42), 0.4);
  border-radius: 12px;
}

.team-slot .slot-icon { color: rgba(255, 255, 255, 0.45); }
.team-slot .slot-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Highlights gallery --- */
.team-highlights-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.team-highlights-viewall {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  color: var(--team-accent, var(--gold));
  text-decoration: none;
  white-space: nowrap;
}
.team-highlights-viewall:hover,
.team-highlights-viewall:focus-visible { text-decoration: underline; }

.team-highlight-grid {
  display: grid;
  /* Four equal tiles in a 2 x 2 on every screen size */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 20px);
  margin-top: clamp(14px, 2vh, 20px);
}

.team-highlight-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(var(--navy-rgb), 0.5);
}

.team-highlight-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;   /* tall photos crop from the bottom, keeping faces */
  display: block;
}

.team-highlight-tile.is-placeholder {
  border: 0;
  background: transparent;
}

.team-highlight-tile.is-placeholder .team-slot { min-height: 100%; }

.team-highlight-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  font-size: 0.82rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}

.team-page-back {
  padding: clamp(28px, 5vh, 52px) clamp(20px, 5vw, 48px) clamp(40px, 7vh, 80px);
  text-align: center;
}

.team-empty { padding: 40px; text-align: center; color: rgba(255,255,255,0.7); }



/* ============================================================
   CONTACT PAGE (contact.html) — intake form + direct email cards.
   Form fields share one dark input style; 2 columns on desktop,
   1 on phones. Scoped classes only.
   ============================================================ */
/* Headings sit INSIDE their card, same theme as the homepage. */
.contact-card {
  padding: clamp(20px, 3.5vw, 40px);
}

/* Divider heading between page parts: gold label centered between two
   thin gold rules, so it reads as a chapter break, not another card. */
.page-divider {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin: 0 0 clamp(16px, 2.6vh, 24px);
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-divider::before,
.page-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--gold-rgb), 0.55);
}

/* Top-of-page shortcut card: heading-style line, one sentence, and the
   standard gold button that jumps to #contact. */
.contact-jump {
  padding: clamp(18px, 3vw, 32px);
  text-align: center;
}

.contact-jump p { margin: 0; }

.contact-jump-title {
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.contact-jump .contact-jump-copy {
  margin: 6px 0 clamp(14px, 2.2vh, 20px);
  color: rgba(255, 255, 255, 0.82);
}

.contact-card > .contact-heading {
  margin: 0 0 clamp(8px, 1.4vh, 12px);
  text-align: center;
}

.contact-intro {
  margin: 0 auto clamp(18px, 3vh, 26px);
  text-align: center;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.contact-field--full { grid-column: 1 / -1; }

.contact-field label {
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.contact-optional {
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(var(--navy-rgb), 0.7);
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.18s ease;
}

.contact-field textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-field select option { background: var(--navy); color: var(--white); }

.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
  outline: 3px solid rgba(var(--gold-rgb), 0.55);
  outline-offset: 1px;
  border-color: var(--gold);
}

/* Send button centered under the form, like every other card CTA. */
.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.contact-status {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
}

.contact-status:empty { display: none; }

/* "Rather write your own?" — a quiet block under Send, inside the form
   card. Divider above, one row per inbox: label, address, copy icon.
   The block is a size container so each address stays on ONE line and
   its font shrinks to fit narrow phones (cqi), capped at 1rem. */
.contact-direct {
  container-type: inline-size;
  margin-top: clamp(20px, 3vh, 28px);
  padding-top: clamp(16px, 2.4vh, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
}

.contact-direct p { margin: 0; }

.contact-direct-lead {
  margin-bottom: 10px;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}

.contact-direct-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-direct-list li {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  white-space: nowrap;
}

.contact-direct-who {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.contact-direct-email {
  font-weight: 700;
  font-size: min(1rem, calc((100cqi - 150px) / 22));
  color: var(--white);
  text-decoration: none;
}

.contact-direct-email:hover,
.contact-direct-email:focus-visible { text-decoration: underline; }

/* Phones: label above, address + copy icon on one line below. */
@media (max-width: 520px) {
  .contact-direct-list li {
    grid-template-columns: auto auto;
    justify-content: center;
    row-gap: 2px;
  }
  .contact-direct-who { grid-column: 1 / -1; }
  .contact-direct-email { font-size: min(1rem, calc((100cqi - 50px) / 22)); }
}

.contact-copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 4px;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.15s ease;
}

.contact-copy svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.contact-copy:hover,
.contact-copy:focus-visible { background: rgba(var(--gold-rgb), 0.12); }

.contact-copy:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.contact-copy.is-copied { color: var(--green-hero); border-color: var(--green-hero); }

.contact-direct .contact-copied {
  min-height: 1.2em;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--green-hero);
}

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

/* ------------------------------------------------------------
   The Crew (top of contact.html)
   ------------------------------------------------------------ */
/* Founder: page title across the top, Carmine's card on the left and
   the tribute on the right, all in one card. Stacks on phones. */
.crew-founder {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(18px, 3.5vw, 40px);
  padding: clamp(20px, 3.5vw, 40px);
}

.crew-founder-title { grid-column: 1 / -1; margin: 0; }

.crew-founder-card {
  width: 100%;
  max-width: 300px;
  height: auto;
  justify-self: center;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  transform: rotate(-3deg);
}

.crew-founder-copy p {
  margin: 0 0 0.9em;
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.18rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}

.crew-founder-copy p:last-child { margin-bottom: 0; }

.crew-founder-copy .crew-role {
  margin-bottom: 2px;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--gold);
}

.crew-founder-copy .crew-founder-name {
  font-family: "Creepster", "Inter", Arial, sans-serif;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.05;
  color: var(--green-hero);
}

/* Shared role label + link styles (founder and crew grid). */
.crew-role {
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}

.crew-link {
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
}

.crew-link:hover,
.crew-link:focus-visible { text-decoration: underline; }

/* Crew grid: one tile per role, card image on top. */
.crew-card {
  padding: clamp(20px, 3.5vw, 40px);
  text-align: center;
}

.crew-card > .section-heading {
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  text-align: center;
}

/* Fixed 4 columns (2 on phones) so every crew card is the same size.
   The Commentary row spans the full width and reuses those columns
   (subgrid); the Site Architect sits alone, centered, one column wide. */
.crew-grid {
  --crew-gap: clamp(16px, 2.4vw, 26px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--crew-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crew-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 10px;
  padding-top: var(--crew-gap);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.crew-group > p { grid-column: 1 / -1; margin: 0; }

.crew-group-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--crew-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crew-group-more {
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
}

.crew-pair {
  grid-column: 1 / -1;
  padding-top: var(--crew-gap);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.crew-row { grid-column: 1 / -1; }

.crew-pair > .crew-group-role { margin: 0 0 10px; }

.crew-pair-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--crew-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crew-pair-list > .crew-member { width: calc((100% - 3 * var(--crew-gap)) / 4); }

.crew-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.crew-member p { margin: 0; }

.crew-member > img {
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 657;
  margin-bottom: 8px;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.crew-name {
  font-weight: 700;
  line-height: 1.4;
  color: var(--white);
}

.crew-member .crew-link { font-size: 0.9rem; }

@media (max-width: 700px) {
  .crew-founder { grid-template-columns: 1fr; text-align: center; }
  .crew-founder-card { max-width: 220px; }
  .crew-founder-copy p { text-align: center; }
}

@media (max-width: 600px) {
  .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-pair-list > .crew-member { width: calc((100% - var(--crew-gap)) / 2); }
}

/* ============================================================
   BEHIND THE SITE (stack.html) — same card theme: every heading
   sits inside its .panel card, centered. Scoped classes only.
   ============================================================ */
.stack-card {
  padding: clamp(20px, 3.5vw, 40px);
  text-align: center;
}

.stack-card > .section-heading {
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  text-align: center;
}

.stack-card > .subhero-title { margin-bottom: clamp(10px, 1.6vh, 16px); }

.stack-intro,
.stack-cta .lede {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
}

.stack-cta .lede { margin-bottom: clamp(16px, 2.4vh, 22px); }
.stack-cta p:last-child { margin-bottom: 0; }

/* Pipeline: four steps in a row with arrows between; a column with
   down arrows on phones. */
.stack-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.stack-step img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

.stack-step + .stack-step::before {
  content: "\2192";
  position: absolute;
  top: 12px;
  left: calc(-1 * clamp(18px, 3vw, 36px));
  width: clamp(18px, 3vw, 36px);
  text-align: center;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--gold);
}

.stack-step-name {
  margin: 0;
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}

.stack-step-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

/* Tool tiles: icon left, name + role right. */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.stack-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(var(--navy-rgb), 0.55);
  color: var(--white);
  text-decoration: none;
  transition: border-color 0.18s ease;
}

.stack-tile:hover,
.stack-tile:focus-visible { border-color: var(--gold); }

.stack-tile:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.stack-tile img {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
}

.stack-tile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stack-tile-name { font-weight: 800; }

.stack-tile-role {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Numbers: big gold figure over a small label. */
.stack-numbers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.stack-numbers dt {
  font-family: "Anton", Impact, Arial, sans-serif;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  line-height: 1;
  color: var(--gold);
}

.stack-numbers dd {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Principles: left-aligned list, centered block. */
.stack-principles {
  max-width: 62ch;
  margin: 0 auto;
  padding-left: 1.2em;
  text-align: left;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

.stack-principles li + li { margin-top: 8px; }
.stack-principles strong { color: var(--gold); }

@media (max-width: 760px) {
  .stack-flow { grid-template-columns: 1fr; }

  .stack-step + .stack-step::before {
    content: "\2193";
    top: calc(-1 * clamp(18px, 3vw, 36px));
    left: 0;
    width: 100%;
  }

  .stack-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
}