/* ============================================================================
   BRONX — STYLESHEET
   Black, white, and exactly one grey. Mobile-first.
   ----------------------------------------------------------------------------
   Contents
     1.  Tokens
     2.  Reset & base
     3.  Layout helpers
     4.  Header / nav
     5.  Hero
     6.  Cards & panels
     7.  Next Game
     8.  Stats strip
     9.  Results (list + table)
     10. Fixtures
     11. Team / players
     12. Spotlight
     13. About / timeline / gallery
     14. Cherry nights
     15. Footer
     16. Wider screens
   ========================================================================== */

/* -- 1. Tokens ------------------------------------------------------------ */
:root {
  --black: #000000;
  --white: #ffffff;
  --grey: #8c8c8c;              /* the one permitted grey tone */

  --bg: var(--black);
  --fg: var(--white);

  /* Greyscale surfaces derived from white — no new hues introduced. */
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.42);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-hi: rgba(255, 255, 255, 0.09);

  --display: "Anton", "Arial Narrow", Impact, "Haettenschweiler", sans-serif;
  --ui: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;

  --gutter: 20px;
  --maxw: 1180px;
  --radius: 2px;                /* sharp corners = sporty */
  --header-h: 74px;             /* tall enough for the full badge */
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}

.eyebrow {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 10px;
}

.num { font-family: var(--ui); font-variant-numeric: tabular-nums; }

.muted { color: var(--grey); }

/* Skip link for keyboard users */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--black);
  padding: 10px 16px; font-family: var(--ui); text-transform: uppercase;
}
.skip:focus { left: 8px; top: 8px; }

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

/* -- 3. Layout helpers ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 52px; }
.section + .section { border-top: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.section-head h2 { font-size: clamp(26px, 7vw, 40px); }

.link-more {
  font-family: var(--ui);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.link-more:hover { border-color: var(--white); }

.btn {
  display: inline-block;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 26px;
  border: 2px solid var(--white);
  background: transparent;
  color: var(--white);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--white); color: var(--black); }
.btn--solid { background: var(--white); color: var(--black); }
.btn--solid:hover { background: transparent; color: var(--white); }

/* Diagonal "jersey stripe" rule used as a divider accent */
.stripe {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--white) 0 2px,
    transparent 2px 9px
  );
  opacity: 0.55;
}

/* -- 4. Header / nav ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}

.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The badge carries the BRONX wordmark itself, so the header shows the whole
   logo and no separate text. It is given real height rather than being shrunk
   into a tiny square, which is what made the earlier cropped mark unreadable. */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img {
  height: 58px;
  width: auto;
  display: block;
}

.nav-toggle {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--white);
  width: 42px; height: 38px;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links.is-open {
  display: block;
  position: absolute;
  left: 0; right: 0;
  top: var(--header-h);
  background: var(--black);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter) 20px;
}
.nav-links a {
  display: block;
  font-family: var(--ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--grey);
}
.nav-links a:hover { color: var(--white); }
.nav-links a[aria-current="page"] { color: var(--white); }

/* -- 5. Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: 56px 60px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* Faint scoreboard grid in the background */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.5;
  mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; }

/* The logo carries the wordmark, so it is sized as the hero headline would be. */
.hero-logo {
  width: min(88vw, 300px);
  height: auto;
  margin: 0 auto 10px;
}
.hero h1 {
  font-size: clamp(58px, 21vw, 150px);
  letter-spacing: 0.02em;
  line-height: 0.86;
}

/* Off-screen but still announced by screen readers and read by crawlers. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero-tagline {
  font-family: var(--ui);
  font-size: clamp(15px, 4vw, 20px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 14px 0 0;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 22px;
  font-family: var(--ui);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.hero-meta span { white-space: nowrap; }
.hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Inner-page banner */
.page-head {
  padding-block: 40px 34px;
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: clamp(38px, 12vw, 76px); }
.page-head p { margin: 12px 0 0; max-width: 62ch; color: var(--grey); }

/* -- 6. Cards & panels ---------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 22px;
}

.tag {
  display: inline-block;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  color: var(--grey);
  line-height: 1.5;
}
.tag--solid { background: var(--white); color: var(--black); border-color: var(--white); }

/* -- 7. Next Game --------------------------------------------------------- */
.next-game {
  border: 2px solid var(--white);
  background: var(--surface);
  padding: 24px 20px;
}
.next-game__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.next-game__label {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.next-game__countdown {
  margin-left: auto;
  font-family: var(--ui);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.next-game__date {
  font-family: var(--display);
  font-size: clamp(34px, 10vw, 58px);
  line-height: 0.9;
  text-transform: uppercase;
}
.next-game__time {
  font-family: var(--ui);
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--grey);
  margin-top: 6px;
}
.next-game__vs {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.next-game__opponent {
  font-family: var(--display);
  font-size: clamp(24px, 7vw, 38px);
  line-height: 1;
}
.next-game__vs-label {
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 6px;
}
.next-game__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.next-game__cell dt {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 3px;
}
.next-game__cell dd {
  margin: 0;
  font-family: var(--ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.next-game__cell small { display: block; font-family: var(--body); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--grey); }
.next-game__note {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--grey);
  border-left: 2px solid var(--line-strong);
  padding-left: 12px;
}

/* -- 8. Stats strip ------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line);
}
.stat {
  padding: 20px 14px;
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat:nth-child(2n) { border-right: 0; }
.stat__value {
  font-family: var(--display);
  font-size: clamp(32px, 10vw, 48px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__value sup { font-size: 0.5em; vertical-align: super; }
.stat__label {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 7px;
}

/* Form guide (W/L/D pills) */
.form-guide { display: inline-flex; gap: 5px; }
.form-pill {
  min-width: 28px; height: 26px;
  padding: 0 4px;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--line-strong);
  color: var(--grey);
}
.form-pill--w { background: var(--white); color: var(--black); border-color: var(--white); }
.form-pill--d { border-color: var(--white); color: var(--white); }
.form-pill--l { opacity: 0.75; }

/* -- 9. Results ----------------------------------------------------------- */
.result-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.result-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.result-row__badge {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-family: var(--ui);
  font-size: 18px;
  font-weight: 700;
  border: 1px solid var(--line-strong);
}
.result-row__badge--w { background: var(--white); color: var(--black); border-color: var(--white); }
.result-row__badge--d { border-color: var(--white); }
.result-row__badge--l { color: var(--grey); }
.result-row__body { min-width: 0; }
.result-row__event {
  display: block;
  font-family: var(--ui);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.result-row__meta { display: block; font-size: 13px; color: var(--grey); }
.result-row__score {
  text-align: right;
  font-family: var(--ui);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.result-row__place {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--grey);
  text-transform: uppercase;
}

/* Full results table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
table.data {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--ui);
  font-size: 15px;
}
table.data caption {
  text-align: left;
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 14px 14px 10px;
}
table.data th,
table.data td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
  background: var(--surface-hi);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.data tbody tr:hover { background: var(--surface); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .cell-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .cell-event { font-weight: 600; letter-spacing: 0.02em; }
table.data .cell-notes { font-family: var(--body); font-size: 13px; color: var(--grey); min-width: 190px; }
table.data .cell-rounds { color: var(--grey); letter-spacing: 0.04em; white-space: nowrap; }
/* A night on the calendar we did not attend — kept in the history, dimmed */
table.data tr.row-muted td { color: var(--grey); opacity: 0.72; font-style: italic; }
table.data .season-row td {
  background: var(--white);
  color: var(--black);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 12px;
  padding-block: 8px;
}
.res-flag {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  font-weight: 700; font-size: 13px;
  border: 1px solid var(--line-strong);
}
.res-flag--w { background: var(--white); color: var(--black); border-color: var(--white); }
.res-flag--d { border-color: var(--white); }
.res-flag--l { color: var(--grey); }

.table-hint {
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 10px 0 0;
}

/* -- 10. Fixtures --------------------------------------------------------- */
.fixture-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--white); }
.fixture {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.fixture--next { background: var(--surface); box-shadow: inset 3px 0 0 var(--white); padding-left: 14px; }
.fixture__date {
  text-align: center;
  border-right: 1px solid var(--line);
  padding-right: 10px;
}
.fixture__day {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
}
.fixture__mon {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.fixture__yr { font-family: var(--ui); font-size: 12px; color: var(--grey); letter-spacing: 0.1em; }
.fixture__body { min-width: 0; }
.fixture__title {
  font-family: var(--ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
}
.fixture__sub { font-size: 14px; color: var(--grey); margin-top: 3px; }
.fixture__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-family: var(--ui);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fixture__facts b { font-weight: 600; }
.fixture__facts .k { color: var(--grey); margin-right: 5px; }
.fixture__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  /* On mobile the fixture is a two-column grid, so without this the tags land
     in the narrow date column and get squashed. */
  grid-column: 1 / -1;
}
.fixture__note { font-size: 13px; color: var(--grey); margin: 10px 0 0; }

/* -- 11. Team / players --------------------------------------------------- */
.player-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.player {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.player:hover { border-color: var(--white); transform: translateY(-3px); }
.player__figure { position: relative; aspect-ratio: 1 / 1; background: var(--black); }
.player__figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.player__armband {
  position: absolute;
  z-index: 2;
  left: 8px; top: 8px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--white); color: var(--black);
  font-family: var(--ui); font-weight: 700; font-size: 14px;
}
.player__body { padding: 13px 14px 16px; }
.player__name {
  font-family: var(--display);
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.05;
  /* Reserve two lines so cards stay aligned whether or not a name wraps. */
  min-height: 2.1em;
}
.player__role {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 5px 0 0;
  /* Rendered even when empty so cards with and without a role stay aligned. */
  min-height: 1.15em;
}
.player__fact {
  font-size: 13px;
  color: var(--grey);
  margin: 11px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}

/* Appearance count — the headline number on each card */
.player__stat {
  font-family: var(--ui);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 9px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.player__stat b {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  margin-right: 5px;
}
.player__seasons {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 9px;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.player__season b { font-weight: 600; color: var(--grey); margin-right: 6px; }

/* Occasional players — compact list, no photos */
.occasional-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.occasional {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.occasional__name {
  font-family: var(--ui);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.occasional__count {
  font-family: var(--ui);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}

/* -- 12. Spotlight -------------------------------------------------------- */
.spotlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 20px;
}
.spotlight__photo {
  width: 116px; height: 116px;
  border: 2px solid var(--white);
  object-fit: cover;
  filter: grayscale(1);
  flex-shrink: 0;
}
.spotlight__name { font-size: clamp(28px, 8vw, 40px); margin-top: 12px; }
.spotlight__role {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 4px;
}
.spotlight__blurb { margin: 14px 0 0; color: var(--grey); font-size: 15px; }

/* -- 13. About / timeline / gallery --------------------------------------- */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.fact { padding: 14px 0; border-bottom: 1px solid var(--line); }
.fact dt {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
}
.fact dd {
  margin: 4px 0 0;
  font-family: var(--ui);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.timeline { list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 1px solid var(--line-strong); }
.timeline li { position: relative; padding: 0 0 26px 8px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -29px; top: 7px;
  width: 9px; height: 9px;
  background: var(--white);
}
.timeline__year {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
}
.timeline__title {
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}
.timeline__text { font-size: 14px; color: var(--grey); margin: 5px 0 0; }

/* Milestone photo. No fixed aspect ratio and no object-fit: these are group
   shots, and cropping them to a set shape cuts people out of the frame. */
.timeline__figure {
  margin: 14px 0 0;
  max-width: 460px;
  border: 1px solid var(--line);
}
.timeline__figure img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.04);
}
.timeline__figure figcaption {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 8px 10px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.gallery figure { margin: 0; border: 1px solid var(--line); }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; filter: grayscale(1); }
.gallery figcaption {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 8px 10px;
}

/* -- 14. Cherry nights ---------------------------------------------------- */

/* A night of 50+ points (the threshold lives in BRONX_SCORING) gets a cherry
   and a glow, so a good result is visible from across the room rather than
   being one number among thirty.

   This is the one deliberate exception to the black-and-white rule stated at
   the top of this file. The cherry is red, so the glow is red too - a white
   glow around a red fruit reads as a printing error rather than a choice.
   Nothing else on the site uses this colour, which is what makes it work:
   it means "good night" and nothing else.

   TWO CONSTRAINTS SHAPE HOW THIS IS BUILT
   --------------------------------------------------------------------------
   1. The glow must not leave its row. `body` sets `overflow-x: hidden`, which
      makes the body a clipping box, so a halo spreading outside a row gets
      sliced off at the page edge - which is exactly what the first version
      did. So the glow is INSET: it burns inwards from the row's own edges and
      never crosses them.

   2. Only `opacity` and `transform` may be animated. The first version
      animated `box-shadow`, which forces a full repaint of every glowing row
      on every frame; with eleven qualifying nights on the results page that
      is visibly laggy. Opacity on a separate layer is handed to the
      compositor and costs nothing. */

:root {
  --cherry: #e11d2a;
  --cherry-soft: rgba(225, 29, 42, 0.55);
  --cherry-faint: rgba(225, 29, 42, 0.14);
}

.cherry {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  margin-right: 0.35em;
  /* The artwork is a 3D render with its own soft shading; a drop-shadow in
     the accent colour welds it to the glow behind the number. */
  filter: drop-shadow(0 0 4px var(--cherry-soft));
}

/* -- Home page: a row in Recent Results -- */

/* Note there is no `background` here. The row used to carry a tint of its
   own, which began exactly at the row's left edge while the glow layer below
   extends 14px further out — so the two stacked up over part of their width
   and left a visible vertical seam at the boundary. All the colour now comes
   from the single layer below, which has no edges of its own. */
.result-row--cherry {
  position: relative;
  border-color: var(--cherry-soft);
}

/* The glow itself, as its own layer.

   Gradients rather than an inset box-shadow, because a shadow is strongest
   exactly at the element's edge and then simply stops — which reads as the
   glow having been cut off with a knife. These fade to fully transparent
   before they reach their own edges, so there is no boundary to see.

   That in turn lets the layer be a little LARGER than the row, giving the
   light somewhere to fall off into. The 14px of horizontal overhang is
   deliberately less than the 20px page gutter at its narrowest, so the
   page's `overflow-x: hidden` still never has anything to clip.

   Two pools: one under the placing badge on the left, one under the score on
   the right — the two things worth looking at on a good night. */
.result-row--cherry::after {
  content: "";
  position: absolute;
  /* Vertically flush with the row: any overhang spills onto the results
     above and below, which makes a neighbouring night look faintly marked
     too. Horizontally it still overhangs, because there is only page gutter
     out there and nothing to confuse it with. */
  inset: 0 -14px;
  pointer-events: none;
  border-radius: 5px;
  background:
    radial-gradient(ellipse 70% 150% at 3% 50%,
      rgba(225, 29, 42, 0.52), rgba(225, 29, 42, 0) 74%),
    radial-gradient(ellipse 46% 130% at 98% 50%,
      rgba(225, 29, 42, 0.42), rgba(225, 29, 42, 0) 74%);
  opacity: 0.9;
}

.result-row--cherry .result-row__score {
  position: relative;
  color: var(--white);
  text-shadow:
    0 0 10px var(--cherry-soft),
    0 0 26px rgba(225, 29, 42, 0.35);
}

.result-row--cherry .result-row__event { color: var(--white); }

/* -- Results page: a row in the full history -- */

tr.row-cherry td {
  background: var(--cherry-faint);
  border-top-color: var(--cherry-soft);
  border-bottom-color: var(--cherry-soft);
}

tr.row-cherry .cell-points {
  position: relative;
  color: var(--white);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 0 10px var(--cherry-soft);
}

/* Contained inside the cell for the same reason: the history table scrolls
   sideways on a phone, and anything outside the cell would be clipped by
   that scroller instead. */
tr.row-cherry .cell-points::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Tied to the text rather than filling the cell. A row is only as tall as
     its tallest column, so on a narrow screen — where the venue name wraps
     over three lines — a full-height gradient pools in the empty space below
     the number instead of sitting behind it.

     Anchored to the TOP because these cells are `vertical-align: top`, so the
     number is at the top of the row however tall the row becomes. */
  top: 0;
  height: 2.8em;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(225, 29, 42, 0.45), rgba(225, 29, 42, 0) 70%);
  opacity: 0.8;
}

/* -- The pulse ------------------------------------------------------------
   Slow and shallow on purpose: this sits behind a table people read. A fast
   or high-contrast pulse would make the numbers next to it hard to hold
   still, which is the opposite of drawing attention to them.

   Note what is animated - opacity of the glow layer, and a transform on the
   fruit. Nothing that triggers layout or paint. */

@media (prefers-reduced-motion: no-preference) {
  .result-row--cherry::after,
  tr.row-cherry .cell-points::after {
    animation: cherry-breathe 3.4s ease-in-out infinite;
    will-change: opacity;
  }
  .result-row--cherry .cherry,
  tr.row-cherry .cherry {
    animation: cherry-bob 3.4s ease-in-out infinite;
    will-change: transform;
  }
}

@keyframes cherry-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@keyframes cherry-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-1px) rotate(-4deg); }
}

/* Print: the glow is meaningless on paper, but the cherry still marks the
   row, so keep the fruit and drop the lighting. */
@media print {
  .result-row--cherry,
  tr.row-cherry td,
  tr.row-cherry .cell-points {
    background: none;
    box-shadow: none;
    text-shadow: none;
  }
  .result-row--cherry::after,
  tr.row-cherry .cell-points::after { display: none; }
}

/* -- 15. Footer ----------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-block: 36px 30px;
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.footer-brand { display: flex; align-items: center; }
.footer-brand img { width: 150px; height: auto; display: block; }
.footer-motto { font-family: var(--ui); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin: 12px 0 0; }
.footer-col h3 {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--grey);
  margin-bottom: 10px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 7px; }
.footer-col a {
  font-family: var(--ui);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grey);
}
.footer-col a:hover { color: var(--white); }

/* League mark. The Auksinis Protas logo is gold, so it is desaturated to keep
   the site's black-and-white palette; the brightness lift stops the mid-greys
   disappearing into the background. Delete this filter to show it in full
   colour. */
.league-mark {
  width: 160px;
  max-width: 100%;
  height: auto;
  filter: grayscale(1) brightness(2.1) contrast(1.15);
}

/* The same mark used in place of a "League" text tag, on fixture rows and the
   Next Game card. Sized to sit on the text baseline of the tags beside it. */
.league-mark--tag {
  width: 86px;
  display: block;
  flex-shrink: 0;
}
.footer-league-name {
  font-family: var(--ui);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 9px 0 0;
}
.footer-bottom {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}

/* -- 16. Wider screens ---------------------------------------------------- */
@media (min-width: 620px) {
  :root { --gutter: 28px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; }
  .next-game__grid { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
  .player-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
  .fixture { grid-template-columns: 84px 1fr auto; align-items: center; }
  /* Three columns from here up, so the tags sit in their own column again. */
  .fixture__tags { grid-column: auto; justify-content: flex-end; margin-top: 0; }
  .spotlight { grid-template-columns: 140px 1fr; align-items: center; gap: 24px; }
  .spotlight__photo { width: 140px; height: 140px; }
  .spotlight__name { margin-top: 0; }
}

@media (min-width: 900px) {
  :root { --header-h: 92px; --gutter: 32px; }
  .brand img { height: 74px; }
  .section { padding-block: 72px; }
  .hero { padding-block: 76px 84px; }
  .hero-logo { width: 380px; }
  .nav-toggle { display: none; }
  .nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
  }
  .nav-links a {
    padding: 0;
    border: 0;
    font-size: 16px;
    letter-spacing: 0.2em;
    position: relative;
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -8px;
    height: 3px;
    background: var(--white);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
  }
  .nav-links a:hover::after { transform: scaleX(1); }
  .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

  .home-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 36px;
    align-items: start;
  }
  .next-game { padding: 32px; }
  .player-grid { grid-template-columns: repeat(4, 1fr); }
  /* Four columns with social links, three without (the Follow column is
     omitted when data/site.js lists none). */
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
  .footer-grid--3 { grid-template-columns: 1.6fr 1fr 1.1fr; }
  .about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
  table.data { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Print: white paper, black ink */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .hero::before, .nav-toggle { display: none; }
  table.data thead th { background: #eee; color: #000; }
}