/* ============================================================
   BELFRY BASKETBALL — Page compositions
   ============================================================ */

/* Placeholder marker for details not yet confirmed */
.todo {
  font-style: italic;
  color: var(--on-dark-dim);
  text-decoration: underline dotted var(--hairline);
  text-underline-offset: 3px;
}
.on-light .todo { color: var(--on-light-dim); }

/* ------------------------------------------------------------
   HOME HERO
   ------------------------------------------------------------ */
.hero { position: relative; isolation: isolate; background: var(--black); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* The gym fly-through. It plays itself; the poster carries the frame
   until it loads, and reduced-motion viewers keep the poster (app.js
   pauses it). */
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: kenburns 26s ease-out forwards; }
}
@keyframes kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }

.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,   var(--black) 1%, oklch(0.112 0.008 25 / 0.42) 38%, transparent 74%),
    linear-gradient(to right, oklch(0.112 0.008 25 / 0.90) 4%, oklch(0.112 0.008 25 / 0.42) 44%, oklch(0.112 0.008 25 / 0.18) 100%);
}

.hero__in {
  position: relative;
  display: grid; gap: var(--sp-7);
  align-items: end;
  padding-block: clamp(3.5rem, 2rem + 9vw, 7rem) clamp(2.5rem, 1.5rem + 5vw, 4rem);
  min-height: min(82dvh, 780px);
}
@media (min-width: 1000px) {
  .hero__in { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.85fr); gap: var(--sp-8); }
}

/* Must come after the base .hero__veil and .hero__in, or those win. */
@media (max-width: 720px) {
  /* On a phone the 16:9 clip is cropped to a tall slice, so pull the
     framing to the centre of the court/jersey and keep the veil lighter
     over the upper half so the fly-through actually reads. */
  .hero__video { object-position: 50% 42%; }
  .hero__veil {
    background:
      linear-gradient(to top, var(--black) 1%, oklch(0.112 0.008 25 / 0.52) 34%, oklch(0.112 0.008 25 / 0.12) 72%, transparent 100%),
      linear-gradient(to right, oklch(0.112 0.008 25 / 0.46), oklch(0.112 0.008 25 / 0.14));
  }
  .hero__in { min-height: min(74dvh, 620px); }
}

.hero__kick {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(0.6875rem, 0.62rem + 0.3vw, 0.8125rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--on-dark-mid);
  margin-bottom: var(--sp-4);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--t-hero);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: var(--sp-4);
}
.hero__title span { display: block; }
.hero__title .l1 { color: var(--red); }
.hero__where {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--on-dark-mid);
  padding-bottom: var(--sp-6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

@media (prefers-reduced-motion: no-preference) {
  .js .hero__kick, .js .hero__title span, .js .hero__where, .js .hero__cta, .js .hero__card {
    opacity: 0; transform: translateY(26px);
    animation: rise 900ms var(--ease-out) forwards;
  }
  .js .hero__kick        { animation-delay: 80ms; }
  .js .hero__title .l1   { animation-delay: 170ms; }
  .js .hero__title .l2   { animation-delay: 260ms; }
  .js .hero__where       { animation-delay: 350ms; }
  .js .hero__cta         { animation-delay: 430ms; }
  .js .hero__card        { animation-delay: 380ms; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* Next-game card floating in the hero */
.hero__card {
  background: oklch(0.165 0.010 25 / 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
  align-self: end;
}
.hero__card__top { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.hero__card__bot {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: linear-gradient(140deg, var(--red-ink), oklch(0.165 0.010 25 / 0.4));
  border-top: 1px solid var(--hairline);
  display: grid; gap: var(--sp-3);
}

/* ------------------------------------------------------------
   PAGE HEADER (every inner page)
   ------------------------------------------------------------ */
.phead { position: relative; isolation: isolate; background: var(--surface-1); overflow: hidden; }
.phead__media { position: absolute; inset: 0; z-index: -2; }
.phead__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.phead__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,   var(--black) 5%, oklch(0.112 0.008 25 / 0.72) 34%, oklch(0.112 0.008 25 / 0.38) 100%),
    linear-gradient(to right, oklch(0.112 0.008 25 / 0.90), oklch(0.112 0.008 25 / 0.42) 70%);
}
.phead__in { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(2rem, 1.4rem + 3vw, 3.25rem); display: grid; gap: var(--sp-4); }
.phead h1 { font-size: var(--t-3xl); }
.phead--compact .phead__in { padding-block: clamp(2rem, 1.4rem + 3vw, 3.5rem) clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.phead__sub { max-width: 62ch; font-size: var(--t-md); color: var(--on-dark-mid); }
.phead__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
/* Coach Perry at the bench (square photo): on wide screens hold it to the
   right with a feathered edge so he stands clear of the heading. */
.phead__media--coach img { object-position: 50% 24%; }
/* Narrow screens: blow the photo up past the right edge so he stands large
   on the right instead of shrunk behind the heading. */
@media (max-width: 979px) {
  .phead__media--coach { left: -12%; right: -55%; }
  .phead__media--coach img { object-position: 50% 22%; }
}
@media (min-width: 980px) {
  .phead__media--coach {
    left: 42%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
    mask-image: linear-gradient(to right, transparent, #000 30%);
  }
}
.phead--gold .phead__veil { background: linear-gradient(to top, var(--black) 2%, oklch(0.13 0.012 55 / 0.72) 45%, oklch(0.13 0.012 55 / 0.5) 100%); }

/* ------------------------------------------------------------
   HOMEPAGE — the board
   ------------------------------------------------------------ */
.homeboard { display: grid; gap: var(--sp-7); }
@media (min-width: 900px)  { .homeboard { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .homeboard { grid-template-columns: 1.05fr 1.25fr 0.95fr; gap: var(--sp-6); } }
.homeboard__col { display: grid; align-content: start; gap: var(--sp-4); min-width: 0; }
.featgrid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
@media (min-width: 1200px) { .featgrid { grid-template-columns: 1fr; } }

/* Featured player, wide form used on the homepage column */
.featrow { display: grid; grid-template-columns: 86px 1fr; gap: var(--sp-4); align-items: stretch; background: var(--surface-1); border-radius: var(--r-sm); overflow: hidden; padding-right: var(--sp-4); transition: background var(--dur-2) var(--ease-out); }
.featrow:hover { background: var(--surface-2); }
.featrow .plate { border-radius: 0; align-self: stretch; aspect-ratio: auto; width: 100%; height: 100%; min-height: 108px; }
.featrow > span:last-child { align-self: center; padding-block: var(--sp-3); min-width: 0; }
.featrow__s { flex-wrap: wrap; row-gap: 0.3rem; }
.featrow__n { text-wrap: balance; }
.featrow__n { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); text-transform: uppercase; color: var(--on-dark); line-height: 1.08; }
.featrow__m { font-size: 0.8125rem; color: var(--on-dark-dim); margin-top: 0.15rem; }
.featrow__s { display: flex; gap: var(--sp-4); margin-top: 0.5rem; }
.featrow__s div { display: grid; }
.featrow__s dt { font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-dim); font-weight: 700; }
.featrow__s dd { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--red-bright); line-height: 1.15; }

/* ------------------------------------------------------------
   RECRUITING BAND
   ------------------------------------------------------------ */
.recband { position: relative; isolation: isolate; overflow: hidden; background: var(--red-ink); }
.recband__media { position: absolute; inset: 0; z-index: -2; }
.recband__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
/* Square photo of Coach Perry at the bench. Narrow screens see a vertical
   strip of it: put him right of centre, where the veil is lightest. Wide
   screens hold the photo to the right 60% and feather its left edge, so
   he stands in the gap above the buttons instead of under the copy. */
.recband__media--coach img { object-position: 28% 25%; }
@media (min-width: 980px) {
  .recband__media--coach {
    left: 40%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
    mask-image: linear-gradient(to right, transparent, #000 30%);
  }
  .recband__media--coach img { object-position: 50% 25%; }
}
.recband__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, oklch(0.30 0.112 27 / 0.97) 26%, oklch(0.30 0.112 27 / 0.72) 52%, oklch(0.112 0.008 25 / 0.45) 100%);
}
.recband__in { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 980px) { .recband__in { grid-template-columns: 1.15fr 0.95fr 0.8fr; gap: var(--sp-8); } }
.recband h2 { }
.recband p { color: oklch(0.90 0.02 27); }
.recfeat { display: grid; gap: var(--sp-4); }
.recfeat__row { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); align-items: start; }
.recfeat__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid oklch(1 0 0 / 0.35); color: #fff; }
.recfeat__ico svg { width: 19px; height: 19px; }
.recfeat__t { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.recfeat__x { font-size: 0.875rem; color: oklch(0.88 0.02 27); margin-top: 0.15rem; }
.recband__cta { display: grid; gap: var(--sp-3); align-content: center; }

/* ------------------------------------------------------------
   SHOP BAND
   ------------------------------------------------------------ */
.shopband { position: relative; isolation: isolate; overflow: hidden; background: var(--surface-1); }
.shopband__media { position: absolute; inset: 0; z-index: -2; opacity: 0.4; }
.shopband__media img { width: 100%; height: 100%; object-fit: cover; }
.shopband__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--black) 12%, oklch(0.112 0.008 25 / 0.6) 60%, oklch(0.112 0.008 25 / 0.85)); }
.shopband__in { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .shopband__in { grid-template-columns: 0.95fr 1.25fr; gap: var(--sp-8); } }

/* ------------------------------------------------------------
   TEAM PAGE — roster beside the profile
   ------------------------------------------------------------ */
.teamlayout { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 1080px) { .teamlayout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); gap: var(--sp-7); } }
.rostergrid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 1080px) { .rostergrid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); } }
/* Team page: fewer, larger columns so the headshots read big */
.rostergrid--team { gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px)  { .rostergrid--team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .rostergrid--team { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1240px) { .rostergrid--team { grid-template-columns: repeat(5, 1fr); } }
.rosterbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.rosterbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* The profile panel */
.profile { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; position: relative; isolation: isolate; }

/* ------------------------------------------------------------
   ACTION FRAME
   A player's own game photograph filling the whole dark stage
   behind their profile card. The picture is held low and masked
   out toward the edges so it dissolves into the page rather than
   ending on a hard line; the panels above it are translucent
   rather than transparent, so the frame reads through the card
   without ever costing the text its contrast.
   ------------------------------------------------------------ */
.pstage { position: relative; isolation: isolate; overflow: hidden; }
.pstage > .wrap { position: relative; z-index: 1; }
.pstage__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: 50% 24%;
  opacity: 0.28;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 44%, #000 34%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 44%, #000 34%, transparent 100%);
}
/* Sits above the picture but below the card, so the frame dissolves into
   the sections either side instead of ending on a line. Kept off .pstage__bg
   itself, where the layer's own opacity would dilute it. */
.pstage--on::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--black) 0%, var(--black) 9%, transparent 22%, transparent 74%, var(--black) 100%);
}

.profile__head, .profile__hero, .profile__body { position: relative; z-index: 1; }

.profile--action                { background: oklch(0.165 0.010 25 / 0.55); }
.profile--action .profile__sec  { background: oklch(0.165 0.010 25 / 0.80); }
.profile--action .statcell      { background: oklch(0.214 0.011 25 / 0.72); }
.profile--action .profile__head {
  background: linear-gradient(120deg, oklch(0.30 0.112 27 / 0.92), oklch(0.145 0.010 25 / 0.80) 64%);
}
.profile--action .note { background: oklch(0.165 0.010 25 / 0.80); }
.profile__head { padding: var(--sp-5); display: grid; gap: var(--sp-3); background: linear-gradient(120deg, var(--red-ink), var(--surface-1) 62%); }
.profile__namerow { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.profile__num {
  display: grid; place-items: center; min-width: 3.2rem; padding: 0.25rem 0.6rem;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); line-height: 1.15;
  border-radius: var(--r-xs);
}
.profile__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.6rem); line-height: 0.98; letter-spacing: 0; text-transform: uppercase; color: var(--on-dark); }
.profile__facts { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; font-size: 0.9375rem; color: var(--on-dark-mid); }
.profile__facts span:not(:last-child)::after { content: "|"; margin-left: 0.75rem; color: var(--hairline); }
.profile__social { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.profile__x { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 700; font-size: 0.9375rem; color: var(--on-dark); text-decoration: none; }
.profile__x svg { width: 17px; height: 17px; flex: none; }
.profile__x:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* X and Instagram in their own colours, like the app icons. */
.brandico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; flex: none; color: #fff; }
.brandico--x { background: #000; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.3); }
.brandico--ig { background: #d6249f radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.brandico svg,
.profile__x .brandico svg,
.coachlinks .brandico svg,
.infocard__row .coachlinks .brandico svg { width: 15px; height: 15px; margin: 0; color: #fff; }
.profile__body { display: grid; gap: 1px; background: var(--hairline); }
/* The profile hero: the player's picture at its natural portrait ratio,
   with the season averages filling the space beside it. A real headshot
   letterboxed across the full width becomes a floating head. */
.profile__hero { display: grid; gap: 1px; background: var(--hairline); }
@media (min-width: 560px) {
  .profile__hero { grid-template-columns: minmax(170px, 260px) minmax(0, 1fr); }
}
.profile__portrait { background: var(--surface-1); }
.profile__portrait .plate { aspect-ratio: 3/4; border-radius: 0; height: 100%; }
.profile__portrait .plate__num { font-size: clamp(3rem, 2rem + 5vw, 4.6rem); }
.profile__portrait .plate__ghost {
  inset: auto 0 6% 0;
  font-size: 0.6875rem; letter-spacing: 0.26em;
  color: oklch(1 0 0 / 0.6); font-weight: 700;
}
/* On a wide panel the portrait would tower over the stats beside it,
   so cap it and let the picture fill the cap. */
@media (min-width: 560px) {
  .profile__portrait .plate { aspect-ratio: auto; min-height: 260px; }
  .profile__portrait { position: relative; }
  .profile__portrait .plate { position: absolute; inset: 0; }
}
.profile__sec { background: var(--surface-1); padding: var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; }
.profile__sec h4 { font-size: var(--t-md); letter-spacing: 0.06em; }
@media (min-width: 560px) { .profile__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); } }
/* Film & Contact across the full card: film and email side by side, NCAA ID beneath. */
.profile__contact { display: grid; gap: var(--sp-3); align-items: center; }
@media (min-width: 560px) { .profile__contact { grid-template-columns: 1fr 1fr; } }
.profile__nofilm { margin: 0; }
.profile__ncaa { justify-self: start; display: inline-flex; align-items: baseline; gap: 0.6rem; margin: 0; padding: 0.45rem 0.8rem; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface-2); }
.profile__ncaa span { font-family: var(--font-display); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-mid); }
.profile__ncaa b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--on-dark); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.statcells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.statcell { background: var(--surface-2); padding: var(--sp-4) var(--sp-2); text-align: center; display: grid; gap: 0.1rem; }
.statcell b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); color: var(--on-dark); line-height: 1; }
.statcell span { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-dim); font-weight: 700; }

/* Season averages: newest year is the big button, earlier years are
   smaller buttons in a row beneath it (full profile). */
.yeartabs { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.yeartab { display: grid; gap: 0.15rem; place-items: center; text-align: center; background: var(--surface-2); color: var(--on-dark-mid); border: 1px solid var(--hairline); border-radius: var(--r-sm); transition: background 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.yeartab__cls { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.03em; line-height: 1; }
.yeartab__yr { font-size: 0.5625rem; letter-spacing: 0.06em; color: var(--on-dark-dim); font-variant-numeric: tabular-nums; }
.yeartab:hover:not([aria-selected="true"]) { background: var(--surface-3); color: var(--on-dark); border-color: var(--surface-3); }
.yeartab[aria-selected="true"] { background: var(--red); color: var(--on-dark); border-color: var(--red); }
.yeartab[aria-selected="true"] .yeartab__yr { color: var(--on-dark); }

/* The newest year — the big primary button on top */
.yeartab--lead { min-height: 66px; padding: 0.7rem 0.9rem; gap: 0.25rem; }
.yeartab--lead .yeartab__cls { font-size: 1.1875rem; letter-spacing: 0.04em; }
.yeartab--lead .yeartab__yr { font-size: 0.6875rem; }

/* The earlier years — smaller, side by side underneath */
.yeartabs__rest { display: flex; gap: 6px; }
.yeartab--mini { flex: 1 1 0; min-height: 46px; padding: 0.4rem 0.35rem; }
.yeartab--mini .yeartab__cls { font-size: 0.75rem; }

.yearpanel__empty { font-size: 0.9375rem; color: var(--on-dark-mid); padding: var(--sp-5) 0; }

.honorlist { display: grid; gap: 0.55rem; }
.honorlist li { position: relative; padding-left: 1.1rem; font-size: 0.9375rem; }
.honorlist li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

/* ------------------------------------------------------------
   COACHING STAFF (team page)
   ------------------------------------------------------------ */
.sec-head--sub { margin-top: var(--sp-8); }
.sec-title--sub { font-size: var(--t-lg); }

/* --- Head coach feature --- */
.coachlead { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) {
  .coachlead { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: clamp(var(--sp-6), 1rem + 3vw, var(--sp-8)); }
}

.coachlead__aside { position: relative; }
@media (min-width: 900px) { .coachlead__aside { position: sticky; top: 92px; } }

.coachlead__portrait {
  position: relative; background: var(--surface-2); aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden;
}
.coachlead__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block; }
.coachlead__ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; color: var(--on-dark-dim); }

/* Record scoreboard beneath the portrait */
.coachscore {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); overflow: hidden; margin-top: var(--sp-3);
}
.coachscore__c { background: var(--surface-2); padding: var(--sp-4) var(--sp-2); text-align: center; display: grid; gap: 0.2rem; align-content: start; }
.coachscore__c b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); color: var(--on-dark); line-height: 1; }
.coachscore__c span { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-dim); font-weight: 700; line-height: 1.2; }

/* --- Editorial column --- */
.coachlead__main { min-width: 0; }

.coachquote { position: relative; margin: 0 0 var(--sp-6); padding-left: clamp(var(--sp-5), 3vw, var(--sp-7)); }
.coachquote__mark {
  position: absolute; left: -0.05rem; top: -0.32em;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(3.5rem, 2rem + 6vw, 6rem); color: var(--red); opacity: 0.55;
}
.coachquote p {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2.2rem); line-height: 1.17;
  letter-spacing: -0.01em; color: var(--on-dark);
}
.coachquote em { color: var(--red-bright); font-style: normal; }

.coachlead__name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--t-2xl); line-height: 0.95; color: var(--on-dark);
}
.coachlead__role {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-bright); margin-top: 0.5rem;
}

.coachhonor {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: var(--sp-5);
  padding: 0.5rem 0.9rem; background: var(--red-wash); border: 1px solid var(--red-line);
  border-radius: var(--r-sm); color: var(--on-red); font-weight: 700; font-size: 0.875rem; line-height: 1.2;
}
.coachhonor svg { width: 18px; height: 18px; flex: none; color: var(--red-bright); }

.coachbio { margin-top: var(--sp-5); max-width: 74ch; }
.coachbio__sum {
  display: flex; align-items: center; gap: 0.9rem; min-height: 68px; padding: 0.75rem 1.25rem 0.75rem 0.9rem;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 1.5rem; color: var(--on-dark);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.coachbio__sum::-webkit-details-marker { display: none; }
.coachbio__sum:hover { border-color: var(--red-bright); background: var(--surface-3); }
.coachbio__ico { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: #fff; flex: none; }
.coachbio__ico svg { width: 22px; height: 22px; transition: transform 200ms var(--ease-out); }
.coachbio[open] .coachbio__ico svg { transform: rotate(90deg); }
.coachbio__hint { margin-left: auto; font-size: 0.75rem; letter-spacing: 0.16em; color: var(--on-dark-mid); }
.coachbio__hint::before { content: "Read"; }
.coachbio[open] .coachbio__hint::before { content: "Close"; }
.coachbio__panel { padding-top: var(--sp-4); padding-bottom: var(--sp-3); }
.coachbio__panel p { margin-top: var(--sp-4); color: var(--on-dark-mid); font-size: 1.0625rem; line-height: 1.7; }
.coachbio__panel p:first-child { margin-top: 0; }
.coachbio__panel .coachbio__lead { font-size: 1.25rem; line-height: 1.6; color: var(--on-dark); }

/* Signature sign-off */
.coachsign { margin: var(--sp-6) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--hairline); max-width: 68ch; }
.coachsign__img { display: block; height: clamp(52px, 7vw, 74px); width: auto; }
.coachsign__cap { display: block; margin-top: var(--sp-3); font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-dim); }
/* Quote + signature as one sign-off, under the Bio: the signature sits
   right beneath the quote, lined up with its text. */
.coachcredo { margin-top: var(--sp-7); }
.coachcredo .coachquote { margin: 0; }
.coachcredo .coachsign { margin-top: var(--sp-4); padding-top: 0; border-top: 0; padding-left: clamp(var(--sp-5), 3vw, var(--sp-7)); }

.coachlead__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sp-6); }

/* A coach's phone, X and Instagram (also on Recruiting and Contact) */
.coachlinks { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.coachlinks a { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; font-weight: 600; font-size: 0.9375rem; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.coachlinks a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.coachlinks svg, .infocard__row .coachlinks svg { width: 18px; height: 18px; margin: 0; flex: none; color: var(--red-bright); }
.coachlead .coachlinks a { color: var(--on-dark-mid); }
.coachlead .coachlinks a:hover { color: var(--on-dark); }
.coachcard .coachlinks { margin-top: 0; }
.infocard .coachlinks { flex-direction: column; margin-top: 0.3rem; }
@media (min-width: 700px) { .infocard .coachlinks a { min-height: 34px; } }

/* --- Assistants & support staff ---
   Same grid, gap and 3:4 picture as the player tiles above, so a coach's
   square is exactly a player's square at every width. */
.staffcards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px)  { .staffcards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .staffcards { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1240px) { .staffcards { grid-template-columns: repeat(5, 1fr); } }
.staffcard {
  background: var(--surface-1);
  border-radius: var(--r-sm); overflow: hidden;
  transition: transform 220ms var(--ease-out), background 220ms var(--ease-out);
}
.staffcard:hover { transform: translateY(-3px); background: var(--surface-2); }
.staffcard__ph { position: relative; aspect-ratio: 3 / 4; background: var(--surface-3); }
.staffcard__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.staffcard__fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); color: var(--on-dark-dim); }
.staffcard__body { padding: 0.7rem 0.75rem 0.85rem; }
.staffcard__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.9375rem; line-height: 1.1; color: var(--on-dark); }
.staffcard__role { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red-bright); margin-top: 0.25rem; }
.staffcard__mail { display: inline-block; font-size: 0.75rem; margin-top: 0.4rem; overflow-wrap: anywhere; }

/* --- Official Scorekeeper & Statistician (Team page, under the coaches) --- */
.scorekeeper { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) {
  .scorekeeper { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(var(--sp-6), 1rem + 3vw, var(--sp-8)); }
  .scorekeeper__aside { position: sticky; top: 92px; }
}
.scorekeeper__photo {
  position: relative; aspect-ratio: 3 / 2; background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden;
}
.scorekeeper__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.scorekeeper__main { min-width: 0; }
.scorekeeper__kick { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-mid); margin-bottom: var(--sp-3); }
.scorekeeper__bio { margin-top: var(--sp-5); max-width: 62ch; font-size: 1.0625rem; line-height: 1.7; color: var(--on-dark-mid); }
.scorekeeper__facts { margin: var(--sp-5) 0 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; max-width: 62ch; }
.scorekeeper__facts li { position: relative; padding-left: 1.4rem; font-size: 0.9375rem; line-height: 1.55; color: var(--on-dark-mid); }
.scorekeeper__facts li::before { content: ""; position: absolute; left: 0.15rem; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--red); }
.scorekeeper__memory { margin: var(--sp-6) 0 0; padding: var(--sp-5); max-width: 62ch; background: var(--surface-1); border-left: 3px solid var(--red); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.scorekeeper__memlabel { font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-bright); }
.scorekeeper__memtext { margin: var(--sp-2) 0 var(--sp-3); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); line-height: 1.3; color: var(--on-dark); }
.srow { scroll-margin-top: 150px; }

/* "Coaching Staff — scroll down" cue at the top of the roster */
.staffcue {
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 52px; padding: 0.45rem 0.9rem 0.45rem 0.5rem; margin-bottom: var(--sp-5);
  background: linear-gradient(100deg, var(--red-ink), var(--surface-1) 70%);
  border: 1px solid var(--red-line); border-radius: var(--r-sm);
  color: var(--on-dark); text-decoration: none;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.staffcue:hover { border-color: var(--red-bright); transform: translateY(-1px); }
.staffcue__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-xs); background: var(--red); color: #fff; flex: none; }
.staffcue__ico svg { width: 20px; height: 20px; }
.staffcue__txt { display: grid; line-height: 1.15; }
.staffcue__txt b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem; }
.staffcue__txt span { font-size: 0.75rem; color: var(--on-dark-mid); margin-top: 0.15rem; }
.staffcue__arrow { display: grid; place-items: center; color: var(--red-bright); }
.staffcue__arrow svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .staffcue__arrow svg { animation: cuebob 1.6s ease-in-out infinite; }
}
@keyframes cuebob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
#coaching-staff { scroll-margin-top: 84px; }

/* Team page: the cue sits where the intro line was, and the roster
   starts right under the header. */
.phead--roster .phead__in { padding-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
/* Phone: zoom into the middle of the anthem line so the faces read across
   390px, and give them a row of their own above the title. */
@media (max-width: 699px) {
  .phead--roster .phead__media img { object-position: 50% 30%; transform: scale(1.35); }
  .phead--roster .phead__in { padding-top: 7rem; }
}
.phead--roster .staffcue { margin-bottom: 0; justify-self: start; }
.band--roster { padding-top: clamp(1.25rem, 1rem + 1.5vw, 2rem); }

/* ------------------------------------------------------------
   STATS PAGE
   ------------------------------------------------------------ */
.leaders { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Stats sections collapse into dropdowns on phones. On desktop (>=700px)
   they are always open and the header is a plain, non-interactive heading. */
.statfold > summary.statfold__head { align-items: center; flex-wrap: nowrap; cursor: pointer; list-style: none; }
.statfold > summary.statfold__head .sec-title { min-width: 0; }  /* long titles wrap, chevron stays beside */
.statfold > summary.statfold__head::-webkit-details-marker { display: none; }
.statfold__ico { flex: none; color: var(--on-dark-dim); transition: transform var(--dur-2) var(--ease-out); }
.statfold__ico svg { width: 26px; height: 26px; display: block; }
.statfold > summary.statfold__head:hover .statfold__ico { color: var(--on-dark); }
.statfold[open] > .statfold__head .statfold__ico { transform: rotate(180deg); color: var(--red-bright); }
.statfold:not([open]) > .statfold__head { margin-bottom: 0; }
.statfold__body { padding-top: 0; }
.statfold__action { display: flex; justify-content: flex-end; margin-bottom: var(--sp-4); }
@media (min-width: 700px) {
  .statfold > summary.statfold__head { cursor: default; pointer-events: none; }
  .statfold__ico { display: none; }
}

/* ------------------------------------------------------------
   HISTORY PAGE
   ------------------------------------------------------------ */
.casegrid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 980px) { .casegrid { grid-template-columns: 0.85fr 1fr; gap: var(--sp-7); } }
.wallhead { text-align: center; margin-bottom: var(--sp-6); }
.wallhead h2 { font-family: var(--font-plate); font-weight: 700; letter-spacing: 0.02em; font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem); color: var(--gold); text-transform: none; }
.wallhead p { margin-top: var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-dark-dim); }
.wallrule { display: flex; align-items: center; gap: var(--sp-4); color: var(--gold); max-width: 30rem; margin: var(--sp-4) auto 0; }
.wallrule::before, .wallrule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(to right, transparent, var(--gold-line), transparent); }
.wallrule svg { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------
   RECRUITING PAGE
   ------------------------------------------------------------ */
.reccols { display: grid; gap: var(--sp-6); align-items: start; }
/* Side by side, the coach card runs the full height of the left column
   and its photo takes up whatever height the contact details leave. */
@media (min-width: 920px) { .reccols { grid-template-columns: 1.25fr 0.85fr; gap: var(--sp-8); align-items: stretch; } }
.coachcard { background: linear-gradient(150deg, var(--red-ink), var(--surface-1) 65%); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
/* The whole headshot, never cropped, no effects. Stacked, it runs full
   width at its own 4:5 shape. Side by side it takes whatever height the
   contact details leave and sits centred at that height. */
.coachcard__photo { margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-1); }
.coachcard__img { display: block; width: 100%; height: auto; border-radius: var(--r-sm) var(--r-sm) 0 0; }
@media (min-width: 920px) {
  .coachcard__photo { margin: 0; flex: 1 1 300px; min-height: 300px; position: relative; }
  .coachcard__img {
    position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    width: auto; height: 100%; max-width: 100%; object-fit: contain; border-radius: var(--r-sm);
  }
}
.coachcard__id { display: grid; gap: var(--sp-1); }
.steps { display: grid; gap: var(--sp-5); counter-reset: s; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); align-items: start; }
.step__n { display: grid; place-items: center; width: 44px; height: 44px; background: var(--red); color: #fff; border-radius: var(--r-xs); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.step__t { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); text-transform: uppercase; color: var(--on-dark); }
.on-light .step__t { color: var(--on-light); }
.step__x { display: block; margin-top: 0.25rem; font-size: 0.9375rem; }

/* ------------------------------------------------------------
   NEWS PAGE
   ------------------------------------------------------------ */
.newsgrid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.article { max-width: 68ch; margin-inline: auto; }
.article h1 { font-size: var(--t-2xl); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }
.article__fig { margin-block: var(--sp-6); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.article__body { font-size: var(--t-md); }
.article__body p + p { margin-top: 1.1em; }
.article__credit { padding: var(--sp-2) var(--sp-3); font-size: var(--t-xs); color: var(--on-dark-mid); }
.article__source { margin-top: var(--sp-6); }

/* ------------------------------------------------------------
   CONTACT PAGE
   ------------------------------------------------------------ */
.contactgrid { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) { .contactgrid { grid-template-columns: 1fr 0.85fr; gap: var(--sp-8); } }
.form { display: grid; gap: var(--sp-4); }
.field-group { display: grid; gap: 0.4rem; }
@media (min-width: 560px) { .form__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
.infocard { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.infocard__row { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); align-items: start; font-size: 0.9375rem; }
.infocard__row svg { width: 17px; height: 17px; margin-top: 0.25rem; color: var(--red-bright); }

/* Homepage result + what's next strip */
.resultstrip { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) {
  .resultstrip { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr); gap: var(--sp-7); }
}
.resultpanel {
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: var(--sp-5);
}
.resultpanel .score { justify-content: center; }
.resultpanel .gmeta__row { justify-content: center; font-size: 0.8125rem; color: var(--on-dark-dim); }


/* Stacked rows inside the homepage featured-player link */
.featrow__n, .featrow__m, .featrow__s { display: block; }
.featrow__s { display: flex; }
.recfeat__t, .recfeat__x { display: block; }
.upnext__o, .upnext__t { display: block; }


/* The single coach card must not vanish into a same-tone section */


/* A stat grid whose values are words, not figures — the display size
   and tight tracking are wrong for prose. */
.statgrid--words { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1200px) { .statgrid--words { grid-template-columns: repeat(2, 1fr); } }
.statgrid--words .stat__v {
  font-size: var(--t-md); line-height: 1.15;
  letter-spacing: 0; text-transform: uppercase;
}

/* ============================================================
   THE RECORD BOOK (history page)
   ============================================================ */
.rbsec { scroll-margin-top: 4.5rem; }
.rbsec__lead { max-width: 60ch; color: var(--on-dark-mid); margin: calc(-1 * var(--sp-3)) 0 var(--sp-6); }

/* Collapsible section (everything below the Leaders block) */
.rbfold__head { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; list-style: none; }
.rbfold__head::-webkit-details-marker { display: none; }
.rbfold__ico {
  margin-left: auto; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  border: 1px solid var(--hairline); border-radius: 50%; color: var(--on-dark-mid);
  transition: transform 260ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.rbfold__ico svg { width: 20px; height: 20px; }
.rbfold__head:hover .rbfold__ico { color: var(--on-dark); border-color: var(--red-line); }
.rbfold[open] > .rbfold__head .rbfold__ico { transform: rotate(180deg); color: var(--red-bright); border-color: var(--red-line); }
.rbfold__body { padding-top: var(--sp-6); }
.rbfold__body .rbsec__lead { margin-top: 0; }

/* ---- Masthead ---- */
.rbhero { position: relative; isolation: isolate; background: var(--black); overflow: hidden; border-bottom: 1px solid var(--hairline); }
.rbhero__bg {
  position: absolute; inset: 0; z-index: -1; background-color: var(--black);
  background-image:
    radial-gradient(120% 90% at 50% 120%, oklch(0.430 0.168 27 / 0.35), transparent 60%),
    radial-gradient(80% 60% at 85% 0%, oklch(0.800 0.126 84 / 0.08), transparent 70%),
    linear-gradient(to bottom, oklch(0.10 0 0 / 0.62), oklch(0.08 0 0 / 0.78)),
    url(../assets/img/hist-old.jpg);
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, 50% 28%;
  background-repeat: no-repeat;
}
.rbhero__in { padding-block: clamp(3rem, 2rem + 6vw, 5.5rem) clamp(2.5rem, 1.5rem + 4vw, 3.5rem); text-align: center; }
.rbhero__kick {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(0.6875rem, 0.62rem + 0.3vw, 0.8125rem);
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-4);
}
.rbhero__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem); line-height: 0.92; letter-spacing: -0.01em; color: var(--on-dark);
}
.rbhero__sub { max-width: 52ch; margin: var(--sp-4) auto 0; color: var(--on-dark-mid); font-size: var(--t-md); }
.rbhero__credit { margin-top: var(--sp-6); font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-dim); }

.rbstats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md);
  overflow: hidden; max-width: 54rem; margin: var(--sp-7) auto 0;
}
@media (min-width: 760px) { .rbstats { grid-template-columns: repeat(6, 1fr); } }
.rbstat { background: oklch(0.165 0.010 25 / 0.9); padding: var(--sp-4) var(--sp-2); display: grid; gap: 0.2rem; }
.rbstat b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1; color: var(--gold); }
.rbstat span { font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-dim); font-weight: 700; }

/* ---- In-page sticky nav ---- */
.rbnav {
  position: sticky; top: 0; z-index: 20;
  background: oklch(0.112 0.008 25 / 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.rbnav__in { display: flex; gap: var(--sp-2); scrollbar-width: none; padding-block: 0.25rem; }
.rbnav__in::-webkit-scrollbar { display: none; }
.rbnav__link {
  flex: none; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 0.8rem; border-radius: var(--r-xs);
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-dim); white-space: nowrap;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.rbnav__link:hover { color: var(--on-dark); }
.rbnav__link[aria-current="true"] { color: var(--on-dark); background: var(--red); }

/* ---- Featured scoring leaders (podium) ---- */
.podium { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .podium { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
/* Gold, silver, bronze for 1st, 2nd, 3rd. */
.pod {
  --medal: var(--gold);
  position: relative; border: 2px solid var(--medal);
  background: linear-gradient(160deg, color-mix(in oklch, var(--medal) 8%, transparent), var(--surface-1) 55%), var(--surface-1);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--medal) 18%, transparent), 0 14px 34px -22px color-mix(in oklch, var(--medal) 55%, transparent);
  border-radius: var(--r-md); overflow: hidden; display: grid; grid-template-columns: auto 1fr;
}
.pod--2 { --medal: var(--silver); }
.pod--3 { --medal: var(--bronze); }
@media (min-width: 720px) { .pod { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }
.pod__rank {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  min-width: 2.6rem; height: 1.7rem; padding: 0 0.55rem; display: grid; place-items: center; border-radius: 999px;
  background: var(--medal); color: var(--black); box-shadow: 0 2px 8px oklch(0 0 0 / 0.45);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em;
}
.pod__frame { position: relative; aspect-ratio: 4 / 5; background: var(--surface-2); width: 7.5rem; }
@media (min-width: 720px) { .pod__frame { width: 100%; } }
.pod__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pod__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem);
  color: var(--on-dark-dim);
  background: radial-gradient(120% 90% at 50% 120%, oklch(0.430 0.168 27 / 0.45), transparent 62%);
}
.pod__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); align-self: center; }
.pod__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--t-lg); line-height: 1; color: var(--on-dark); }
.pod__pts { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.6rem; }
.pod__pts b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); line-height: 1; color: var(--medal); }
.pod__pts span { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-dim); font-weight: 700; }
.pod__meta { margin-top: 0.55rem; font-size: 0.8125rem; color: var(--on-dark-mid); }
.pod__note { color: var(--on-dark-dim); font-size: 0.75rem; }
.tagnow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark); background: var(--red); padding: 0.1rem 0.4rem; border-radius: var(--r-xs); vertical-align: middle; }

/* ---- 1,000 Point Club list ---- */
.club { columns: 1; margin-top: var(--sp-5); }
@media (min-width: 680px) { .club { columns: 2; column-gap: var(--sp-6); } }
.clubrow {
  break-inside: avoid; display: grid; grid-template-columns: 2rem 1fr auto auto; align-items: baseline;
  gap: var(--sp-3); padding: 0.6rem 0; border-bottom: 1px solid var(--hairline-soft);
}
.clubrow__rank { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--on-dark-dim); text-align: right; }
.clubrow__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.9375rem; color: var(--on-dark); letter-spacing: 0.01em; }
.clubrow__note { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.6875rem; color: var(--on-dark-dim); }
.clubrow__grad { font-size: 0.75rem; color: var(--on-dark-dim); font-variant-numeric: tabular-nums; }
.clubrow__pts { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.clubrow--one .clubrow__rank, .clubrow--one .clubrow__name { color: var(--gold); }
.clubrow--now .clubrow__name { color: var(--red-bright); }

.watch { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md); display: grid; gap: var(--sp-3); }
.watch:empty { display: none; }
.watch__lead { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-dim); }
.watch__lead svg { width: 15px; height: 15px; }
.watchrow { display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: var(--sp-4); }
@media (max-width: 520px) { .watchrow { grid-template-columns: 1fr auto; } .watchrow__bar { grid-column: 1 / -1; order: 3; } }
.watchrow__n { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.875rem; color: var(--on-dark); }
.watchrow__bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.watchrow__bar i { display: block; height: 100%; background: linear-gradient(to right, var(--red-deep), var(--gold)); }
.watchrow__v { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.watchrow__v em { font-style: normal; font-weight: 400; font-family: var(--font-body); font-size: 0.6875rem; color: var(--on-dark-dim); }

/* ---- Record book switcher ---- */
.rbbook { margin-top: var(--sp-5); }
.rbbook__controls { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.seg { display: inline-flex; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 3px; gap: 3px; width: max-content; }
.seg__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 1rem; border-radius: var(--r-xs); font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-dim); }
.seg__btn[aria-pressed="true"] { background: var(--red); color: var(--on-dark); }
.rbbook__cats { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rbbook__cats::-webkit-scrollbar { display: none; }
.rbchip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem; border: 1px solid var(--hairline); border-radius: var(--r-xs); background: var(--surface-1); color: var(--on-dark-mid); font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.rbchip:hover { color: var(--on-dark); border-color: var(--red-line); }
.rbchip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--on-dark); }
.rbboard { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); }
.rbboard__head { margin-bottom: var(--sp-4); }
.rbboard__head h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--t-lg); color: var(--on-dark); }
.rbboard__head p { font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-bright); margin-top: 0.25rem; }
.rbboard__list { list-style: none; columns: 1; }
@media (min-width: 640px) { .rbboard__list { columns: 2; column-gap: var(--sp-7); } }
.rbrow { break-inside: avoid; display: grid; grid-template-columns: 1.8rem 1fr auto; align-items: baseline; gap: var(--sp-3); padding: 0.5rem 0; border-bottom: 1px solid var(--hairline-soft); }
.rbrow__rank { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--on-dark-dim); text-align: right; }
.rbrow__name { font-size: 0.9375rem; color: var(--on-dark); }
.rbrow__v { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.rbrow--one .rbrow__rank, .rbrow--one .rbrow__v { color: var(--gold); }
.rbrow--one .rbrow__name { color: var(--gold); font-family: var(--font-display); font-weight: 700; }

/* ---- Team records grid ---- */
.trgrid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px) { .trgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .trgrid { grid-template-columns: repeat(4, 1fr); } }
.trcard { background: var(--surface-1); border: 1px solid var(--hairline); border-top: 2px solid var(--gold-line); border-radius: var(--r-sm); padding: var(--sp-4); display: grid; gap: 0.3rem; }
.trcard__v { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1; color: var(--gold); }
.trcard__k { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark); }
.trcard__d { font-size: 0.75rem; color: var(--on-dark-dim); line-height: 1.3; }

/* ---- Banners ---- */
.banners { }
.bannerrow { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, 1fr); max-width: 44rem; }
.banner {
  position: relative; text-align: center; padding: var(--sp-5) var(--sp-3) calc(var(--sp-6) + 0.6rem);
  background: linear-gradient(180deg, oklch(0.800 0.126 84 / 0.14), oklch(0.165 0.010 25 / 0.6));
  border-top: 3px solid var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
}
.banner__k { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.banner__y { display: block; margin: 0.4rem 0 0.3rem; font-family: var(--font-plate); font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 2.5vw, 2.8rem); color: var(--gold); line-height: 1; }
.banner__s { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-dim); }
.banners__note { margin-top: var(--sp-5); color: var(--on-dark-mid); font-size: 0.875rem; }

.yearlead { font-size: 0.9375rem; color: var(--on-dark-mid); margin-bottom: var(--sp-4); }
.yearlead b { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--gold); vertical-align: -0.05em; margin-right: 0.3rem; }
.yearchips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.yearchip { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--gold); background: oklch(0.800 0.126 84 / 0.1); border: 1px solid var(--gold-line); border-radius: var(--r-xs); padding: 0.25rem 0.5rem; font-variant-numeric: tabular-nums; }

/* ---- Ledger rows (classics / post-season / honors) ---- */
.led { }
.led__row { display: flex; align-items: baseline; gap: var(--sp-3); padding: 0.55rem 0; border-bottom: 1px solid var(--hairline-soft); }
.led__k { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; color: var(--on-dark); letter-spacing: 0.01em; }
.led__d { margin-left: auto; text-align: right; font-size: 0.75rem; color: var(--on-dark-dim); font-variant-numeric: tabular-nums; }
.led__d--wide { max-width: 60%; }
.led__v { margin-left: var(--sp-3); font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.asTag { font-family: var(--font-display); font-weight: 700; font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-mid); border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 0.05rem 0.35rem; margin-left: 0.4rem; vertical-align: middle; }
.asTag--gold { color: var(--gold); border-color: var(--gold-line); }
.honored .led__v, #honored .led__v { color: var(--on-dark); }

/* ---- Season by season ---- */
.seasonbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.filter--toggle[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--black); }
.seasontable { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.srow {
  background: oklch(0.165 0.010 25 / 0.6); display: grid; grid-template-columns: 4.5rem 3rem 1fr auto; align-items: center; gap: var(--sp-3);
  padding: 0.6rem var(--sp-4); min-height: 44px; width: 100%; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
@media (min-width: 720px) { .srow { grid-template-columns: 5rem 3.2rem minmax(60px, 10rem) 4.5rem 1fr auto; } }
.srow:hover { background: oklch(0.215 0.012 25 / 0.85); }
.srow[aria-expanded="true"] { background: var(--surface-2); }
.srow__more { display: grid; place-items: center; color: var(--red-bright); }
.srow__more svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.srow[aria-expanded="true"] .srow__more svg { transform: rotate(90deg); }

/* One season's games, opened under its row */
.sgames { background: var(--surface-1); padding: var(--sp-4) var(--sp-4) var(--sp-5); }
@media (min-width: 720px) { .sgames { padding: var(--sp-5) var(--sp-6) var(--sp-6); } }
.sgames__wait { color: var(--on-dark-mid); font-size: 0.875rem; }
.sgames__sum { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-bottom: var(--sp-3); font-size: 0.8125rem; color: var(--on-dark-mid); }
.sgames__sum span:first-child { color: var(--on-dark); font-weight: 700; }
.sgtable { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.sgtable th { text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-mid); padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--hairline); }
.sgtable td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--hairline-soft); vertical-align: top; color: var(--on-dark); }
.sgtable tr:last-child td { border-bottom: 0; }
.sgtable th:first-child, .sgtable td:first-child { padding-left: 0; }
.sgtable th:last-child, .sgtable td:last-child { padding-right: 0; }
.sg__d { white-space: nowrap; color: var(--on-dark-mid) !important; width: 4.25rem; }
.sg__at { color: var(--on-dark-mid); font-size: 0.75rem; }
.sg__ev { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--on-dark-mid); }
.sg__r { white-space: nowrap; text-align: right !important; }
.sg__r .chip { padding: 0.15rem 0.4rem; letter-spacing: 0.04em; }
.sg__x { font-family: var(--font-display); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-mid); }
.sg__rec { width: 3.5rem; text-align: right !important; color: var(--on-dark-mid) !important; }
@media (max-width: 479px) { .sgtable .sg__rec { display: none; } .sgtable td.sg__r { padding-right: 0; } }
.sgames__notes { margin-top: var(--sp-4); padding-left: 1.1rem; list-style: disc; font-size: 0.8125rem; color: var(--on-dark-mid); }
.sgames__notes li + li { margin-top: 0.35rem; }
.sgames__src { margin-top: var(--sp-3); font-size: 0.75rem; color: var(--on-dark-mid); }
.srow--title { background: oklch(0.800 0.126 84 / 0.06); }
.srow__yr { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.srow__rec { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.srow__bar { display: none; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.srow__pts { display: none; font-size: 0.75rem; color: var(--on-dark-dim); font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .srow__bar, .srow__pts { display: block; } }
.srow__bar i { display: block; height: 100%; background: var(--red); }
.srow--title .srow__bar i { background: var(--gold); }
.srow__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.sbadge { font-family: var(--font-display); font-weight: 700; font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-dim); border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 0.1rem 0.35rem; white-space: nowrap; }
.sbadge--red { color: var(--on-dark); background: var(--red); border-color: var(--red); }
.sbadge--gold { color: var(--black); background: var(--gold); border-color: var(--gold); }

/* ---- Coaches ledger ---- */
.coachtable { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; margin-top: var(--sp-4); }
.crow { background: oklch(0.165 0.010 25 / 0.6); display: grid; grid-template-columns: 1fr 3rem 3.5rem; align-items: center; gap: var(--sp-3); padding: 0.6rem var(--sp-4); }
@media (min-width: 680px) { .crow { grid-template-columns: 1.6fr 1fr 4rem 3.5rem; } }
.crow--head { background: var(--surface-2); }
.crow--head span { font-family: var(--font-display); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-dim); }
.crow--now { background: var(--red-wash); }
.crow__n { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.875rem; color: var(--on-dark); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.crow__sp { display: none; font-size: 0.75rem; color: var(--on-dark-dim); font-variant-numeric: tabular-nums; }
@media (min-width: 680px) { .crow__sp { display: block; } }
.crow__rec { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.crow__pct { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--on-dark-mid); font-variant-numeric: tabular-nums; text-align: right; }
.coystar svg { width: 14px; height: 14px; color: var(--gold); }

/* ---- Milestone timeline ---- */
.mline { list-style: none; position: relative; margin-top: var(--sp-5); padding-left: 1.5rem; max-width: 46rem; }
.mline::before { content: ""; position: absolute; left: 0.45rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: linear-gradient(to bottom, var(--gold-line), var(--hairline)); }
.mline__item { position: relative; display: grid; grid-template-columns: 4rem 1fr; gap: var(--sp-4); align-items: baseline; padding: 0.7rem 0; }
.mline__item::before { content: ""; position: absolute; left: -1.5rem; top: 1rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--black); transform: translateX(0.1rem); }
.mline__n { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--gold); }
.mline__body { display: grid; gap: 0.15rem; }
.mline__game { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.875rem; color: var(--on-dark); }
.mline__date { font-size: 0.75rem; color: var(--on-dark-dim); }

.casegrid--even { grid-template-columns: 1fr; }
@media (min-width: 860px) { .casegrid--even { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------
   GAME PAGE (recap / box score — game.html)
   ------------------------------------------------------------ */
.gamewrap { max-width: 64rem; margin-inline: auto; }

.gboard {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4);
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7)) var(--sp-5); margin-top: var(--sp-4);
}
.gboard__side { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.gboard__badge { display: grid; place-items: center; }
.gboard__mark { width: 64px; height: auto; }
.gboard__team { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--t-md); color: var(--on-dark); line-height: 1.1; }
.gboard__score { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 4vw, 4rem); line-height: 0.9; color: var(--on-dark); }
.gboard__score--lose { color: var(--on-dark-dim); }
.gboard__mid { display: grid; justify-items: center; gap: 0.3rem; padding-inline: var(--sp-3); }
.gboard__vs { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.18em; color: var(--on-dark-dim); }
.gboard__status { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--red-bright); white-space: nowrap; }
.gboard__tip { font-size: 0.8125rem; color: var(--on-dark-mid); }

.gfacts { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: center; margin-top: var(--sp-5); }
.gfacts__item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; color: var(--on-dark-mid); }
.gfacts__item svg { width: 16px; height: 16px; color: var(--on-dark-dim); flex: none; }
.gfacts__item .game__event { color: var(--gold); font-weight: 600; }

.grow { margin-top: var(--sp-6); max-width: 24rem; margin-inline: auto; display: grid; gap: 0.75rem; }

.gsec { margin-top: var(--sp-7); }
.gsec__h { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--t-lg); letter-spacing: 0.02em; color: var(--on-dark); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--red); margin-bottom: var(--sp-4); }
.gcopy p { color: var(--on-dark-mid); margin-top: var(--sp-4); font-size: 1.0625rem; line-height: 1.7; }
.gcopy p:first-child { margin-top: 0; }
.gcopy__todo { color: var(--on-dark-dim); font-size: 0.9375rem; }

.box { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 34rem; }
.box th, .box td { padding: 0.6rem 0.5rem; text-align: center; border-bottom: 1px solid var(--hairline); font-size: 0.875rem; }
.box thead th { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--on-dark-dim); }
.box tbody td { color: var(--on-dark-mid); }
.box .box__name { text-align: left; white-space: nowrap; color: var(--on-dark); font-weight: 600; }
.box tbody tr:hover { background: var(--surface-2); }

@media (max-width: 560px) { .gboard { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* Live — while the admin's Stat Tracker has a game on */
.livepill {
  display: inline-flex; align-items: center; gap: 0.35rem; vertical-align: middle;
  font-family: var(--font-display); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--red); padding: 0.2rem 0.5rem 0.2rem 0.4rem; border-radius: var(--r-xs);
}
.livepill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
@media (prefers-reduced-motion: no-preference) { .livepill::before { animation: livepulse 1.8s ease-out infinite; } }
.gboard--live { border-color: var(--red-line); box-shadow: inset 0 0 0 1px var(--red-line); }
.gboard__status .livepill { font-size: 0.6875rem; }
.hero__card--live { border-color: var(--red-line); }
.livescore { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); }
.livescore__side { display: grid; justify-items: center; gap: 0.3rem; text-align: center; }
.livescore__side b { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 0.9; color: var(--on-dark); }
.livescore__side > span:last-child { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; color: var(--on-dark-mid); }
.livescore__mark { width: 44px; height: auto; }
.livescore__dash { color: var(--on-dark-dim); font-size: 1.5rem; }

/* Game page — line score */
.linescore { width: 100%; max-width: 40rem; margin: var(--sp-4) auto 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.linescore th, .linescore td { padding: 0.55rem 0.6rem; text-align: center; border-bottom: 1px solid var(--hairline); font-size: 0.875rem; color: var(--on-dark-mid); }
.linescore thead th { font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-dim); }
.linescore tbody th { text-align: left; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--on-dark); white-space: nowrap; }
.linescore .ls__t { font-family: var(--font-display); font-weight: 700; color: var(--on-dark); font-size: 1rem; }

/* Game page — leaders + team stats */
.gsplit { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 860px) { .gsplit { grid-template-columns: 1fr 1fr; } }
.gpanel { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-5); }
.gpanel__h { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.08em; color: var(--on-dark); padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); border-bottom: 2px solid var(--red); }
.glead { display: grid; grid-template-columns: 4.25rem 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline); }
.glead:last-child { border-bottom: 0; }
.glead__fig .plate { aspect-ratio: 1; border-radius: 50%; }
.glead__fig .plate__badge { display: none; }
.glead__fig .plate::after { display: none; }
.glead__body { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); align-items: baseline; }
.glead__cat { grid-column: 1 / -1; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-bright); }
.glead__val { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.glead__who { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.875rem; color: var(--on-dark); }
.glead__sub { grid-column: 1 / -1; font-size: 0.75rem; color: var(--on-dark-dim); margin-top: 0.2rem; }

/* Game leaders, both teams side by side */
.gl2 { padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline); }
.gl2:last-child { border-bottom: 0; }
.gl2__cat { display: block; text-align: center; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-bright); margin-bottom: 0.4rem; }
.gl2__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.gl2__p { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.gl2__p--opp { justify-content: flex-end; text-align: right; }
.gl2__fig { flex: none; width: 2.75rem; }
.gl2__fig .plate { aspect-ratio: 1; border-radius: 50%; }
.gl2__fig .plate__badge, .gl2__fig .plate::after { display: none; }
.gl2__fig--opp { display: grid; place-items: center; }
.gl2__body { display: grid; min-width: 0; }
.gl2__val { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.gl2__who { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; color: var(--on-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl2__sub { font-size: 0.6875rem; color: var(--on-dark-dim); }
.gl2__none { color: var(--on-dark-dim); }
@media (max-width: 420px) { .gl2__fig { display: none; } }
.box__gap { height: var(--sp-6); }
.box--opp thead th.box__name { color: var(--on-dark-mid); }

.tstat__heads { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-dim); margin: var(--sp-2) 0 var(--sp-1); }
.tstat__heads span:first-child { color: var(--red-bright); }
.tstat { padding: 0.6rem 0; border-bottom: 1px solid var(--hairline); }
.tstat:last-child { border-bottom: 0; }
.tstat__line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: var(--sp-3); }
.tstat__k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--on-dark-mid); text-align: center; white-space: nowrap; }
.tstat__v { font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--on-dark-dim); }
.tstat__v b { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--on-dark); }
.tstat__v--them { text-align: right; }
.tstat__bar { margin-top: 0.4rem; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.tstat__bar span { display: block; height: 100%; background: var(--red); border-radius: 3px 0 0 3px; }

/* Game page — box score extras */
.box a { color: var(--on-dark); text-decoration: none; }
.box a:hover { color: var(--red-bright); }
/* Each player's name links to his profile; the link fills the row so it
   is a proper tap target (44px on a phone). */
.box tbody .box__name { padding-block: 0; }
.box tbody .box__name a { display: inline-flex; align-items: center; min-height: 34px; }
@media (max-width: 700px) { .box tbody .box__name a { min-height: 44px; } }
.box td b { font-family: var(--font-display); color: var(--on-dark); }
.box tfoot th, .box tfoot td { border-bottom: 0; border-top: 2px solid var(--hairline); color: var(--on-dark); font-weight: 700; }
.box tfoot .box__pct td, .box tfoot .box__pct th { border-top: 0; padding-top: 0; color: var(--on-dark-dim); font-weight: 600; font-size: 0.75rem; }

.previewbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem var(--sp-4);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  background: oklch(0.800 0.126 84 / 0.10); border: 1px solid var(--gold-line); border-radius: var(--r-sm);
  font-size: 0.875rem; color: var(--on-dark-mid);
}
.previewbar strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--gold); }
.previewbar .link { margin-left: auto; }

/* Stats — a leader category nobody has scored in yet */
.leader--tbd .leader__who { color: var(--on-dark-dim); }
.plate--tbd { display: grid; place-items: center; }
.plate--tbd img { position: static; width: 38%; height: auto; object-fit: contain; opacity: 0.55; z-index: 1; }

/* ------------------------------------------------------------
   Social copy blocks (Social Media page rows)
   ------------------------------------------------------------ */
.fbband__kick { font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-bright); }
.fbband__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--t-2xl); line-height: 0.95; color: var(--on-dark); margin-top: var(--sp-3); }
.fbband__text { margin-top: var(--sp-4); max-width: 44ch; color: var(--on-dark-mid); }
.fbband__btn { margin-top: var(--sp-5); }

/* A platform's own Follow button: its colour and its mark. The flat
   background-colour under Instagram's gradient keeps the white text
   readable (and gives contrast checkers a real colour to measure). */
.btn-brand {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65em;
  min-height: 48px; padding: 0.85rem 1.4rem; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-decoration: none;
  transition: filter var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn-brand:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-brand svg { width: 1.3em; height: 1.3em; flex: none; }
.btn-brand--fb { background: #166FE5; }
.btn-brand--ig { background: #C13584 linear-gradient(45deg, #f58529 0%, #dd2a7b 36%, #8134af 72%, #515bd4 100%); }
.btn-brand--x  { background: #000; }

/* ------------------------------------------------------------
   SOCIAL MEDIA page — one row per platform, alternating sides
   ------------------------------------------------------------ */
.socband { background: var(--black); }
/* X's own button is black; on this black band it flips to X's white version. */
.socband .btn-brand--x { background: #fff; color: #000; }
.socstack { display: grid; gap: var(--sp-8); }
.socrow { display: grid; gap: var(--sp-6); align-items: center; }
.socrow + .socrow { padding-top: var(--sp-8); border-top: 1px solid var(--hairline); }
/* Each feed is a compact card, not a wall: capped width here, capped
   heights in pages.js (Facebook) and below (X). */
@media (min-width: 900px) {
  .socrow { grid-template-columns: minmax(240px, 1fr) minmax(0, 460px); gap: var(--sp-8); }
  .socrow--flip { grid-template-columns: minmax(0, 460px) minmax(240px, 1fr); }
  .socrow--flip .socrow__copy { order: 2; }
}
.socrow__btn { margin-top: var(--sp-5); }
.socrow .fbfeed { max-width: 460px; justify-self: center; }
.socrow .fbfeed__host { min-height: 420px; }
.socrow .xshot { max-height: 560px; }
@media (max-width: 699px) { .socrow .xshot { max-height: 460px; } }

/* X: shown when X won't draw its timeline for a signed-out visitor */
.fbfeed__host.feed--x { background: #000; border-color: #000; }
.xcard {
  display: grid; justify-items: center; align-content: center; gap: var(--sp-3);
  width: 100%; min-height: 420px; padding: var(--sp-7) var(--sp-5); text-align: center;
  color: #fff; text-decoration: none; background: radial-gradient(80% 70% at 50% 0%, #1d1d1d, #000 70%);
}
.xcard > svg { width: 64px; height: 64px; }
.xcard__h { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.xcard__p { max-width: 38ch; font-size: 0.9375rem; color: #c8c8c8; }
.xcard__go { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.xcard__go svg { width: 1em; height: 1em; }
.xcard:hover .xcard__go { text-decoration: underline; }
.fbfeed__host { position: relative; }

/* X: a picture of the profile, cropped to a sensible height with a fade
   into a "See all posts on X" pill. The whole picture is the link. */
.fbfeed__host.feed--xshot { display: block; min-height: 0; background: #fff; }
/* overflow: clip (not just hidden) so nothing — find-in-page, a script —
   can scroll the picture inside its frame. */
.xshot { position: relative; display: block; max-height: 1040px; overflow: hidden; overflow: clip; padding: 18px 18px 0; text-decoration: none; }
.xshot img { display: block; width: 100%; height: auto; }
.xshot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 190px; pointer-events: none;
  background: linear-gradient(to top, #fff 34%, rgb(255 255 255 / 0));
}
.xshot__more {
  position: absolute; z-index: 1; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px; padding: 0 1.3rem;
  border-radius: 999px; background: #000; color: #fff; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform var(--dur-1) var(--ease-out);
}
.xshot__more svg { width: 1.1em; height: 1.1em; flex: none; }
.xshot:hover .xshot__more { transform: translateX(-50%) translateY(-2px); }
.fbfeed { justify-self: stretch; width: 100%; max-width: 780px; }
.fbfeed__host {
  min-height: 640px; border-radius: var(--r-md); overflow: hidden;
  background: #fff; border: 1px solid var(--paper-line);
  box-shadow: 0 18px 40px -24px oklch(0.2 0.02 25 / 0.45);
  display: grid; place-items: center;
}
/* Facebook's plugin stops at 500px wide, so on a wide column the frame is
   zoomed up to fill it (pages.js sets the zoom from the column width). */
.fbfeed__frame { display: block; border: 0; transform-origin: 0 0; }
.fbfeed__wait { color: var(--on-light-mid); font-size: 0.875rem; padding: var(--sp-5); text-align: center; }