/*
 * Atletico Mustang team page styles.
 *
 * Mobile first. This page gets opened from a text message, one handed, in the
 * sun, at the edge of a soccer field. Big type, high contrast, fat tap targets.
 *
 * Fonts are self hosted. The site runs under a self-only Content-Security-Policy
 * so there is no request to Google Fonts or to any other host at runtime.
 */

/* ---------------------------------------------------------------------------
 * Fonts. Both files are variable, so one file covers every weight we use.
 * ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/oswald-variable-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
 * Tokens.
 * ------------------------------------------------------------------------ */

:root {
  --red: #C8102E;
  --red-dark: #9A0B22;
  --red-wash: #FDECEF;
  --ink: #161616;
  --ink-soft: #3A3A3A;
  --muted: #5F5F5F;
  --paper: #FFFFFF;
  --bone: #F4F1ED;
  --rule: #DCD6CF;
  --cup: #1F3A5F;
  --cup-wash: #EAF0F7;
  --tourn: #1D6B3C;
  --tourn-wash: #E6F2EA;
  --applied: #8A5A00;
  --applied-wash: #FFF4E3;

  --display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius: 10px;
  --border: 3px solid var(--ink);
  --lift: 5px 5px 0 var(--ink);
  --lift-red: 5px 5px 0 var(--red);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --speed: 180ms;
}

/* ---------------------------------------------------------------------------
 * Base.
 * ------------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

body.is-drawer-open { overflow: hidden; }

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3) var(--space-4);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------------
 * Hero. Black slab, red diagonal, both crests.
 * ------------------------------------------------------------------------ */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  border-bottom: 6px solid var(--red);
}

/* The red wedge. Decorative only, so it stays out of the document flow. */
.hero::after {
  content: '';
  position: absolute;
  inset: -40% -30% auto auto;
  width: 90%;
  height: 220%;
  background: var(--red);
  transform: rotate(18deg);
  opacity: 0.9;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

/* The crest IS the identity: transparent artwork sitting embossed on the page
 * (Cam directive: 1.5x bigger, no white box, small shadow hugging the shape).
 * The tight shadow does the emboss; the soft one lifts it off the band. */
.hero__shield {
  width: clamp(204px, 29vw, 300px);
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
  position: relative;
  z-index: 2;
  margin-bottom: -56px;
}

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(38px, 12vw, 76px);
  line-height: 0.95;
  margin: 0;
}

.hero__subtitle {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.hero__pill {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  padding: 5px 12px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
}

.hero__club {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Solid ink so the chip reads on both the black and red hero zones. */
  background: var(--ink);
  border: 2px solid #fff;
  border-radius: 999px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Chip sized per Cam: 30% up from the 40px/12px original. */
.hero__clubmark { width: 52px; height: 52px; object-fit: contain; }

/* The parent-club crest mirrors the team shield on the right at wide widths
 * (Cam directive: same size). Phones keep the single-crest stack: the hero is
 * tall there already and the club chip above carries the mark. No negative
 * margin: only the left shield overlaps the title on the stacked layout. */
.hero__crest--club { display: none; }
.hero__shield--club { margin-bottom: 0; }

/* Title, pills and club chip stack with one rhythm inside the words column. */
.hero__words { display: grid; gap: var(--space-3); justify-items: center; }
@media (min-width: 620px) { .hero__words { justify-items: start; } }

.hero__clubline {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * NEXT UP strip. The one thing a parent came here to read.
 * ------------------------------------------------------------------------ */

.nextup { background: var(--red); }

.nextup__button {
  display: grid;
  gap: 2px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-4);
  background: none;
  border: 0;
  color: var(--paper);
  transition: background var(--speed) var(--ease);
}

.nextup__button:hover { background: var(--red-dark); }

.nextup__kicker {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  opacity: 0.9;
}

.nextup__title {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(22px, 6vw, 32px);
  line-height: 1.1;
}

.nextup__when { font-weight: 700; font-size: 15px; }
.nextup__where { font-size: 14px; opacity: 0.92; }

.nextup__more {
  justify-self: start;
  margin-top: var(--space-2);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  border-bottom: 2px solid currentColor;
}

.nextup__empty { margin: 0; padding: var(--space-4); color: var(--paper); }

/* ---------------------------------------------------------------------------
 * Sections.
 * ------------------------------------------------------------------------ */

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.section__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1;
  margin: 0 0 var(--space-2);
}

/* The red underscore that ties every heading back to the crest. */
.section__title::after {
  content: '';
  display: block;
  width: 64px;
  height: 6px;
  margin-top: var(--space-2);
  background: var(--red);
}

.section__sub {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 18px;
  margin: var(--space-6) 0 var(--space-1);
}

.section__lede { margin: 0 0 var(--space-4); color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------------------
 * Crests. The initials disc is always painted. The image only appears once it
 * has actually loaded, so missing opponent art degrades to a finished badge.
 * ------------------------------------------------------------------------ */

.crest {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}

.crest__badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.5px;
}

.crest__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.crest--image .crest__badge { opacity: 0; }
.crest--image .crest__img { opacity: 1; }

/* ---------------------------------------------------------------------------
 * Schedule cards.
 * ------------------------------------------------------------------------ */

.cards { display: grid; gap: var(--space-4); }

/* The card is a <button>, so the snack sign-up cannot be nested inside it.
   This wrapper is the grid child now, holding the card and its snack row as
   siblings. It stretches so two cards of different heights in the same row
   still line their snack rows up along the bottom. */
.cardstack { display: grid; gap: var(--space-2); align-content: start; }

.card {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.card:hover, .card:focus-visible {
  transform: translate(-2px, -3px);
  box-shadow: 8px 9px 0 var(--ink);
}

.card:active { transform: translate(1px, 2px); box-shadow: 3px 3px 0 var(--ink); }

.card--camp { box-shadow: var(--lift-red); }
.card--camp:hover, .card--camp:focus-visible { box-shadow: 8px 9px 0 var(--red); }
.card--tournament { box-shadow: 5px 5px 0 var(--tourn); }
.card--tournament:hover, .card--tournament:focus-visible { box-shadow: 8px 9px 0 var(--tourn); }

.card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
}

.card__type {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--red);
}

.badge {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--bone);
  color: var(--ink);
}

.badge--confirmed { background: var(--tourn-wash); border-color: var(--tourn); color: var(--tourn); }
.badge--date-set { background: var(--red-wash); border-color: var(--red); color: var(--red-dark); }
.badge--save-the-date { background: var(--cup-wash); border-color: var(--cup); color: var(--cup); }
/* Applied-but-not-accepted. Deliberately NOT the cup palette: navy already means
   "State Cup" everywhere else, and one colour meaning two things is how a badge
   stops being information. Amber reads as "in progress" without reading as alarm.
   save-the-date deliberately keeps the cup palette it already had. */
.badge--applied { background: var(--applied-wash); border-color: var(--applied); color: var(--applied); }

.badge--cancelled { background: #EFEBE6; border-color: #8A8279; color: #5A5A5A; }

/* Month-grid chips have no room for a text badge, so an unsettled status shows
   as a dashed outline instead. Without this an applied tournament looked exactly
   like a confirmed fixture in the grid. */
.ev.is-applied { border-style: dashed; opacity: .82; }


/* Cancelled treatment. The strike goes on the TITLE, never on the word
   "Cancelled" itself, which reads as a double negative and looks like a
   rendering bug. Applied to all three surfaces that can list a fixture. */
.card.is-cancelled { opacity: 0.62; }
.card.is-cancelled .side__name,
.card.is-cancelled .solo__title { text-decoration: line-through; }
.ev.is-cancelled { opacity: 0.55; text-decoration: line-through; }
.agenda__row.is-cancelled { opacity: 0.62; }
.agenda__row.is-cancelled .agenda__label { text-decoration: line-through; }

/* Played treatment. Same dim as a cancellation and deliberately NO strike: a
   line through a played game says it did not happen, which is the opposite of
   what a final score means. The dim retires the card; the score chip below
   keeps the record. */
.card.is-played { opacity: 0.62; }
.ev.is-played { opacity: 0.5; }

/* Score chip. Built on the .badge shape so a final score reads as the same
   class of object as a status, tinted from OUR side of the fixture: the same
   green, amber and stone the badges already use, no new palette. */
.card__score {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--bone);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card__score--win { background: var(--tourn-wash); border-color: var(--tourn); color: var(--tourn); }
.card__score--draw { background: var(--applied-wash); border-color: var(--applied); color: var(--applied); }
.card__score--loss { background: var(--red-wash); border-color: var(--red); color: var(--red-dark); }

.matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--space-2);
}

.side { display: grid; justify-items: center; gap: var(--space-1); text-align: center; }

.side__name {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
  font-size: 13px;
}

.side__role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.matchup__center { display: grid; justify-items: center; gap: 2px; padding-top: var(--space-1); }

.matchup__vs {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 20px;
  color: var(--red);
  line-height: 1;
}

.matchup__date {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 15px;
  white-space: nowrap;
}

.matchup__time { font-size: 12px; color: var(--muted); text-align: center; }

/* Mobile agenda: replaces the month grid under 640px (44px+ tap targets). */
.agenda { display: none; }
.agenda__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule, #ddd);
  border-left-width: 4px;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.agenda__row--league { border-left-color: var(--red); }
.agenda__row--tournament { border-left-color: var(--red-dark, #9a0b22); }
.agenda__row--camp { border-left-color: var(--ink); }
.agenda__row--cup-hold, .agenda__row--makeup-hold { border-left-style: dashed; border-left-color: #1f3a5f; }
.agenda__row--practice { border-left-color: var(--muted); }
.agenda__date {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.agenda__label { font-size: 14px; }
.agenda__empty { font-size: 14px; color: var(--muted); margin: 0; }

/* The Cup note is the most schedule-disrupting fact on the page (games are on
 * SUNDAYS); it must not read like just another bullet. */
.notes__item--cup {
  border-left-color: var(--red);
  background: #FDF0F2;
  font-weight: 600;
}

/* Forward-looking announcement, visually distinct from warnings. */
.notes__item--announce {
  border-left-style: dashed;
  border-left-color: var(--muted);
  background: #F4F2EE;
  font-style: italic;
}

@media (max-width: 639px) {
  .month .grid { display: none; }
  .agenda { display: grid; gap: var(--space-2); }
  /* Overlap is a desktop flourish; on phones it collides with the title.
   * 192px = the old 128px mobile size scaled by the same 1.5x as desktop. */
  .hero__shield { width: 154px; margin-bottom: 0; }
}

.solo { display: flex; align-items: center; gap: var(--space-3); }
.solo__words { display: grid; gap: 2px; }

/* Calendar-tile date badge for opponent-less cards (camp, tournaments). */
.datetile {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  min-width: 64px;
  border-radius: 12px;
  padding: 8px 10px 10px;
  color: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}
.datetile--tournament { background: var(--red); }
.datetile--camp { background: var(--ink); }
.datetile__month {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
}
.datetile__days {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}

.solo__title {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.1;
}

.solo__date { font-weight: 700; font-size: 14px; }
.solo__time { font-size: 13px; color: var(--muted); }

.card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px dotted var(--rule);
  padding-top: var(--space-2);
}

.card__where { font-size: 13px; color: var(--ink-soft); }
.card__match { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
 * Save the date holds.
 * ------------------------------------------------------------------------ */

.holds { display: grid; gap: var(--space-2); }

.hold {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border: 2px dashed var(--cup);
  border-radius: var(--radius);
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.hold:hover, .hold:focus-visible { background: var(--cup-wash); transform: translateY(-2px); }
.hold--makeup-hold { border-color: var(--red); }
.hold--makeup-hold:hover, .hold--makeup-hold:focus-visible { background: var(--red-wash); }

.hold__date {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  color: var(--cup);
}

.hold--makeup-hold .hold__date { color: var(--red-dark); }
.hold__title { font-size: 14px; }

/* ---------------------------------------------------------------------------
 * Calendar.
 * ------------------------------------------------------------------------ */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  font-size: 12px;
}

.legend__item { display: inline-flex; align-items: center; gap: 6px; }

.legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 2px solid var(--ink);
}

.legend__swatch--league { background: var(--red); border-color: var(--red); }
.legend__swatch--cup-hold { background: transparent; border: 2px dashed var(--cup); }
.legend__swatch--makeup-hold { background: transparent; border: 2px dashed var(--red); }
.legend__swatch--camp { background: var(--ink); }
.legend__swatch--tournament { background: var(--tourn-wash); border-color: var(--tourn); }
.legend__swatch--practice { background: var(--bone); border-color: var(--muted); }

.months { display: grid; gap: var(--space-5); }

.month {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.month__name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 3px solid var(--red);
}

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

.dow {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  padding-bottom: 2px;
}

.day {
  min-height: 58px;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.day--empty { border: 0; }
.day--weekend { background: var(--bone); }
.day--today { border: 2px solid var(--red); background: var(--red-wash); }

.day__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1;
}

.ev {
  display: block;
  width: 100%;
  min-height: 20px;
  padding: 2px 3px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 9.5px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  /* Chips wrap rather than truncate. An ellipsis lands mid word at this size and
     turns "Sycamore Valley" into something a parent cannot read at a glance. */
  word-break: normal;
  transition: filter var(--speed) var(--ease);
}

.ev:hover, .ev:focus-visible { filter: brightness(0.88); }

.ev--league { background: var(--red); color: var(--paper); border-color: var(--red-dark); }
.ev--camp { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ev--tournament { background: var(--tourn-wash); color: var(--tourn); border-color: var(--tourn); }
.ev--cup-hold { background: transparent; color: var(--cup); border: 1px dashed var(--cup); }
.ev--makeup-hold { background: transparent; color: var(--red-dark); border: 1px dashed var(--red); }

.ev--practice {
  background: var(--bone);
  color: var(--ink-soft);
  border-left: 3px solid var(--muted);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Team.
 * ------------------------------------------------------------------------ */

.people { display: grid; gap: var(--space-3); }

.person {
  display: grid;
  gap: 2px;
  padding: var(--space-4);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  border-left: 8px solid var(--red);
}

.person--open { border-left-color: var(--cup); background: var(--cup-wash); }

.person__role {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--red);
}

.person--open .person__role { color: var(--cup); }

.person__name {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.1;
}

.person__fullname { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0.3px; }
.person__blurb { font-size: 14px; color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
 * Notes and footer.
 * ------------------------------------------------------------------------ */

.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.notes__item {
  background: var(--paper);
  border-left: 8px solid var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-3) var(--space-4);
  font-size: 15px;
}

.load-error {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
  font-size: 18px;
  font-weight: 600;
}

.footer {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: var(--space-5) var(--space-4);
  border-top: 6px solid var(--red);
}

.footer p {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 14px;
}

/* Quiet link to the coaching page (and back). The footer is dark ink, so the
   link needs its own muted color to stay legible without shouting. */
.footer__coaching {
  display: inline-block;
  margin-top: var(--space-1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Deliberately quiet text, but the tap target still has to clear 44px. */
  padding: 14px 16px;
}

.footer__coaching:hover { color: var(--paper); }

/* ---------------------------------------------------------------------------
 * Drawer. Bottom sheet on a phone, side panel on a desktop.
 * ------------------------------------------------------------------------ */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 90;
}

.drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper);
  border-top: 6px solid var(--red);
  border-radius: 18px 18px 0 0;
  padding: var(--space-5) var(--space-4) var(--space-7);
  animation: sheet-up 220ms var(--ease);
}

.drawer[hidden], .drawer-backdrop[hidden] { display: none; }

.drawer__close {
  float: right;
  min-height: 44px;
  min-width: 88px;
  margin-left: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  text-align: center;
}

.drawer__close:hover { background: var(--red); }

.drawer__kicker {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 12px;
  color: var(--red);
}

.drawer__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(24px, 7vw, 34px);
  line-height: 1.05;
  margin: var(--space-1) 0 var(--space-3);
}

.detail {
  margin: var(--space-4) 0 0;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--space-2) var(--space-3);
  clear: both;
}

.detail__term {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--muted);
  padding-top: 3px;
}

.detail__value { margin: 0; font-size: 15px; }

@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * Hero entrance. Small, once, on load. Nothing loops.
 * ------------------------------------------------------------------------ */

@keyframes rise {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.hero__title, .hero__subtitle, .hero__club {
  animation: rise 520ms var(--ease) both;
}

/* Embossed treatment sits flat, so the shield shares the plain rise entrance. */
.hero__shield { animation: rise 520ms var(--ease) both; }

.hero__title { animation-delay: 70ms; }
.hero__subtitle { animation-delay: 140ms; }
.hero__club { animation-delay: 210ms; }

/* ---------------------------------------------------------------------------
 * Larger screens.
 * ------------------------------------------------------------------------ */

@media (min-width: 620px) {
  .hero__inner {
    /* Two balanced columns: crest | words. The club chip lives INSIDE the
     * words column now, so the right side has no orphaned floater and no
     * dead red expanse beneath the title. */
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    text-align: left;
    align-items: center;
    padding: var(--space-6) var(--space-5);
  }
  .hero__subtitle { justify-content: flex-start; }
  .hero__words > .hero__club { justify-self: start; }
  .hero__crest--club { display: block; justify-self: end; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .holds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: var(--space-7) var(--space-5); }
  .day { min-height: 66px; }
  .ev { font-size: 10.5px; }
}

@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .holds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .months { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .drawer {
    left: auto;
    top: 0;
    width: 440px;
    max-height: 100vh;
    border-radius: 0;
    border-top: 0;
    border-left: 6px solid var(--red);
    animation: panel-in 220ms var(--ease);
  }

  @keyframes panel-in {
    from { transform: translateX(28px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
}

/* ---------------------------------------------------------------------------
 * Motion preferences. Anyone who asked the OS to calm down gets a still page.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover, .card:focus-visible, .hold:hover, .hold:focus-visible { transform: none; }
  .subscribe__btn:hover, .subscribe__btn:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------------
 * Subscribe card. Same paper slab, ink border and hard lift as the schedule
 * cards, so the loudest call to action on the page still looks native to it.
 * Everything here is full width and stacked on a phone; the desktop rule at the
 * bottom puts the two calendar buttons side by side the way the card grids do.
 * ------------------------------------------------------------------------ */

.subscribe__card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--lift-red);
}

/* 44px minimum everywhere: this gets tapped one handed at the edge of a field. */
.subscribe__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  border-radius: var(--radius);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
  text-decoration: none;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}

.subscribe__btn:hover, .subscribe__btn:focus-visible { transform: translate(-2px, -3px); }
.subscribe__btn:active { transform: translate(1px, 2px); }

.subscribe__btn--primary {
  background: var(--red);
  color: var(--paper);
  font-size: clamp(17px, 4.6vw, 21px);
  min-height: 64px;
  box-shadow: var(--lift);
}

.subscribe__btn--primary:hover, .subscribe__btn--primary:focus-visible {
  background: var(--red-dark);
  box-shadow: 8px 9px 0 var(--ink);
}

.subscribe__btn--secondary {
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  box-shadow: var(--lift);
}

.subscribe__btn--secondary:hover, .subscribe__btn--secondary:focus-visible {
  background: var(--bone);
  box-shadow: 8px 9px 0 var(--ink);
}

.subscribe__btn--copy {
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border-width: 2px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  box-shadow: none;
}

.subscribe__btn--copy:hover, .subscribe__btn--copy:focus-visible {
  background: var(--red);
  box-shadow: none;
}

.subscribe__fine { margin: 0; font-size: 13px; color: var(--muted); }
.subscribe__note { margin: 0; font-size: 13px; color: var(--ink-soft); }

/* Deliberately NOT a grid container. Browsers still disagree about how a legend
   participates in a flex or grid fieldset, so the options carry their own
   spacing and the legend keeps its normal rendering everywhere. */
.subscribe__choices {
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bone);
}

.subscribe__legend {
  padding: 0 var(--space-2);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--red);
}

.subscribe__choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}

.subscribe__choice:hover { border-color: var(--ink); }
.subscribe__choice:focus-within { border-color: var(--red); }

.subscribe__radio {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  accent-color: var(--red);
  margin: 0;
}

.subscribe__choicetext { font-size: 15px; line-height: 1.35; }

.subscribe__urlblock { display: grid; gap: var(--space-2); }

.subscribe__urllabel {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--ink-soft);
}

.subscribe__urlrow { display: grid; gap: var(--space-2); }

/* Readonly, but still selectable: the fallback when the clipboard API is gone
   is to select this text, so it must never be disabled. */
.subscribe__url {
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--bone);
  color: var(--ink);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Deliberately small: the whole address should fit on a phone. The usual
     16px iOS anti-zoom rule does not apply, nothing here is typed into. */
  font-size: 13px;
  text-overflow: ellipsis;
}

.subscribe__status {
  margin: 0;
  min-height: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tourn);
}

@media (min-width: 620px) {
  .subscribe__card { padding: var(--space-5); gap: var(--space-4); }
  .subscribe__urlrow { grid-template-columns: 1fr auto; align-items: center; }
  .subscribe__url { font-size: 14px; }
}

/* ---------------------------------------------------------------------------
 * Snack sign-up. Deliberately built from the same card + primary-button shape
 * as the subscribe block rather than a new visual language: both are "tap this
 * once and you are done" calls to action, and a parent should recognise the
 * second one from having already used the first.
 * ------------------------------------------------------------------------ */

.snack__card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--lift-red);
}

/* Same 52px-plus tap target rule as the subscribe buttons: this gets pressed
   one handed, outdoors, often while holding something else. */
.snack__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  background: var(--red);
  color: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 4.6vw, 21px);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
  box-shadow: var(--lift);
}

.snack__btn:hover, .snack__btn:focus-visible {
  background: var(--red-dark);
  box-shadow: 8px 9px 0 var(--ink);
}

.snack__btn:active { transform: translate(1px, 2px); }

.snack__fine { margin: 0; font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  .snack__card { padding: var(--space-5); gap: var(--space-4); }
}

/* ---------------------------------------------------------------------------
 * Inline snack row, sitting under its game card inside .cardstack.
 *
 * Restyled from .snack__btn rather than invented: a parent who has used the
 * big red sign-up button once should recognise this instantly as the same
 * action, only attached to one game. Smaller, because there is one per card.
 * ------------------------------------------------------------------------ */

.snackrow { display: grid; gap: var(--space-2); }

.snackrow__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  background: var(--red);
  color: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

.snackrow__btn:hover, .snackrow__btn:focus-visible { background: var(--red-dark); }
.snackrow__btn:active { transform: translate(1px, 2px); }
.snackrow__btn[disabled] { opacity: 0.6; cursor: default; }

/* The backup spot is the secondary ask, so it reads as an outline of the
   primary rather than a second equally loud red button. */
.snackrow__btn--ghost { background: var(--paper); color: var(--red-dark); }
.snackrow__btn--ghost:hover, .snackrow__btn--ghost:focus-visible { background: var(--red-wash); color: var(--red-dark); }

.snackrow__btn--small { min-height: 48px; font-size: 14px; }

.snackrow__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bone);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
}

.snackrow__who { font-size: 14px; font-weight: 700; color: var(--ink); }

/* Deliberately quiet. Handing a game back is a rare, deliberate act, and a
   button as loud as the sign-up invites a mis-tap that undoes somebody's yes. */
.snackrow__undo {
  min-height: 44px;
  padding: 0 var(--space-2);
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--body);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.snackrow__undo:hover, .snackrow__undo:focus-visible { color: var(--red-dark); }
.snackrow__undo[disabled] { opacity: 0.6; cursor: default; }

.snackrow__box {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
}

.snackrow__label { font-size: 13px; font-weight: 700; color: var(--ink); }

/* 16px minimum: anything smaller makes iOS zoom the page on focus, and the
   parent then has to pinch back out to find the Sign me up button. */
.snackrow__input {
  min-height: 48px;
  padding: 0 var(--space-3);
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}

.snackrow__actions { display: flex; gap: var(--space-2); align-items: stretch; }
.snackrow__actions .snackrow__btn { flex: 1; }

.snackrow__cancel {
  min-height: 48px;
  padding: 0 var(--space-3);
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--body);
  font-size: 14px;
  cursor: pointer;
}

.snackrow__cancel:hover, .snackrow__cancel:focus-visible { border-color: var(--ink); color: var(--ink); }

/* Server-written, parent-facing copy. Rendered verbatim, so it has to be
   readable rather than tucked away as fine print. */
.snackrow__msg {
  margin: 0;
  font-size: 13px;
  color: var(--red-dark);
}