/* ===========================================================================
   Lebanese Basketball Federation — "Negative Space"
   ---------------------------------------------------------------------------
   The whole design comes out of one observation about the federation's mark:
   the cedar is not drawn ON the ball, it is CUT OUT of it. The white of the
   flag is the white of the ball. So the site never draws a cedar as a decal —
   it knocks shapes out of colour and lets the ground read through.

   Three devices, used consistently:
     .seam        a ball-seam arc that sweeps between sections
     .knock       a colour block with the cedar removed from it
     .portrait    a circular crop with a seam arc cut through its ring

   Palette is sampled from the artwork itself, not eyeballed:
     cedar green #0C723E · ball red #EE3A44 / #D4353E · ink #050708
   =========================================================================== */

@import url('/fonts/fonts.css');

:root {
  --red: #ee3a44;
  --red-deep: #d4353e;
  --red-ink: #a3252d;
  --green: #0c723e;
  --green-deep: #08542d;
  --ink: #050708;
  --ink-2: #0b0d10;
  --ink-3: #14181d;
  --paper: #ffffff;
  --paper-2: #f6f6f4;
  --paper-3: #eceae5;
  --rule: #dedbd4;
  --rule-dark: #262b32;
  --muted: #6b7280;
  --muted-dark: #98a2b0;

  /* Archivo (Omnibus-Type) is a grotesque in the same lineage as the logo's own
     wordmark, and it carries a width axis -- so headlines can run EXPANDED while
     small caps-y labels stay normal, from one variable file. Inter for text.
     Both OFL, both self-hosted; no third-party font requests at runtime. */
  --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wide: 'wdth' 112;
  --wider: 'wdth' 122;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(64px, 9vw, 132px);

  /* One fluid scale, used everywhere. Nothing is sized ad hoc. */
  --t-mega: clamp(2.8rem, 8.5vw, 7rem);
  --t-h1: clamp(2.1rem, 4.9vw, 4rem);
  --t-h2: clamp(1.7rem, 3.4vw, 2.7rem);
  --t-h3: clamp(1.2rem, 1.8vw, 1.55rem);
  --t-lead: clamp(1.06rem, 1.5vw, 1.3rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-kicker: 0.78rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  -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-variation-settings: var(--wide);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
/* The two biggest sizes go wider still -- an expanded grotesque at scale is the
   whole point of choosing a face with a width axis. */
.hero h1, .head h2 { font-variation-settings: var(--wider); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - var(--gut) * 2, 1440px); margin-inline: auto; }

.section { padding-block: var(--sec); position: relative; }
.section--dark { background: var(--ink-2); color: var(--paper); }
.section--paper { background: var(--paper-2); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------- kicker */
.kicker {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100;
  font-weight: 700;
  font-size: var(--t-kicker);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.kicker::before {
  content: '';
  width: 34px; height: 2px;
  background: var(--red);
  flex: none;
}
.section--dark .kicker { color: var(--red); }

/* =========================================================== the seam
   A ball seam drawn as an SVG arc. It is the site's connective tissue:
   it closes one section and opens the next, the way a seam wraps a ball.  */
.seam {
  display: block;
  width: 100%;
  height: clamp(48px, 7vw, 110px);
  color: var(--red);
}
.seam path { fill: none; stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke; }
.seam .seam-hair { stroke-width: 1.5; opacity: 0.4; }

/* ==================================================== the cedar knock-out
   A colour plate with the federation's own cedar removed from it. The mask is
   the real silhouette lifted out of the mark by scripts/brand.py, not a redraw. */
.knock {
  -webkit-mask-image: url('/img/cedar-mask.png');
  mask-image: url('/img/cedar-mask.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: currentColor;
}

/* Oversized watermark cedar. Deliberately clipped by its container — the mark
   itself is a clipped cedar, so a half-visible one is on-brand, not an error. */
.watermark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  color: var(--ink);
  top: -4%;
  bottom: -4%;
  /* Bled off the right edge, like .plate__cedar and for the same reason: the
     silhouette is a clipped cedar, so it must read as a crop, not as a shape
     someone centred and hoped for the best with. */
  right: clamp(-260px, -14vw, -90px);
  width: clamp(260px, 36vw, 580px);
  -webkit-mask-position: right center;
  mask-position: right center;
}
.section--dark .watermark { color: #fff; opacity: 0.05; }

/* =============================================================== header */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5, 7, 8, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
}
.hdr__in {
  display: flex; align-items: center; gap: 28px;
  min-height: 86px;
}
.hdr__logo { flex: none; display: flex; align-items: center; }
/* A fixed-height box holding artwork needs real units on the <img> plus
   object-fit — max-height alone is not enough inside a flex item, whose
   default min-height:auto leaves the percentage height indefinite. */
.hdr__logo img { width: auto; height: 52px; object-fit: contain; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  padding: 9px 14px;
  border-radius: 3px;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.nav a:hover { color: #fff; }
.nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease;
}
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: #fff; }

.burger {
  margin-left: auto; display: none;
  background: none; border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; border-radius: 4px; padding: 9px 12px;
  font-family: var(--display); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 0.8rem; cursor: pointer;
}

@media (max-width: 1120px) {
  .burger { display: block; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink);
    border-bottom: 3px solid var(--red);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0 14px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px var(--gut); font-size: 1.15rem; }
  .nav a::after { display: none; }
}

/* ================================================================= hero */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 120px) 0;
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__kicker {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-kicker); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--red); margin: 0 0 20px;
}
.hero h1 { font-size: var(--t-h1); }
/* The one place the two brand colours meet in type. */
.hero h1 em { font-style: normal; color: var(--red); }
.hero h1 b { font-weight: 800; color: #37b46c; }

.hero__sub {
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
  margin: 26px 0 34px;
  line-height: 1.6;
}

/* The ball, oversized and bled off the right edge. It is the artwork, so it
   gets to be big — no photography anywhere on this site by choice. */
.hero__ball {
  position: relative;
  justify-self: center;
  width: clamp(240px, 38vw, 460px);
  aspect-ratio: 1;
}
.hero__ball img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.hero__ball::after {
  content: '';
  position: absolute; inset: -14%;
  border: 1px solid rgba(238, 58, 68, 0.32);
  border-radius: 50%;
  animation: spin 44s linear infinite;
  border-left-color: transparent; border-right-color: transparent;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__ball::after { animation: none; } }

.hero__strip {
  position: relative; z-index: 2;
  margin-top: clamp(40px, 6vw, 78px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 760px) { .hero__strip { grid-template-columns: repeat(2, 1fr); } }
.hero__stat {
  /* Cells need inside padding or the caption butts straight up against the
     divider to its left. First cell stays flush with the grid. */
  padding: 26px 26px 34px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.hero__stat:first-child { padding-left: 0; }
@media (max-width: 760px) { .hero__stat:nth-child(odd) { padding-left: 0; } }
.hero__stat:last-child { border-right: 0; }
@media (max-width: 760px) {
  .hero__stat:nth-child(2n) { border-right: 0; }
  .hero__stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
}
.hero__stat b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1; letter-spacing: -0.01em;
  color: #fff;
}
.hero__stat span {
  display: block; margin-top: 8px;
  font-size: var(--t-small); color: var(--muted-dark);
  letter-spacing: 0.02em;
}

/* =============================================================== buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-variation-settings: 'wdth' 100; font-weight: 700;
  font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border: 0; border-radius: 2px;
  background: var(--red); color: #fff;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}
.btn:hover { background: var(--red-deep); transform: translateY(-1px); }
.btn--ghost {
  background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--ghost:hover { background: var(--red); color: #fff; box-shadow: none; }
.btn--green { background: var(--green); }
.btn--green:hover { background: var(--green-deep); }

/* ============================================================== headings */
.head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 56px); position: relative; z-index: 1; }
.head h2 { font-size: var(--t-h2); }
.head p { margin-top: 18px; font-size: var(--t-lead); color: var(--muted); }
.section--dark .head p { color: var(--muted-dark); }

.prose { max-width: 68ch; }
.prose p { font-size: var(--t-lead); line-height: 1.72; }
.prose p + p { margin-top: 1.1em; }

/* ============================================================== pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; background: var(--rule); }
.section--dark .pillars { background: var(--rule-dark); }
.pillar { background: var(--paper); padding: clamp(26px, 3vw, 40px); position: relative; }
.section--dark .pillar { background: var(--ink-2); }
.pillar h3 { font-size: var(--t-h3); margin-bottom: 12px; }
.pillar p { color: var(--muted); font-size: 0.96rem; }
.section--dark .pillar p { color: var(--muted-dark); }
.pillar::before {
  content: ''; position: absolute; top: 0; left: 0; width: 42px; height: 3px; background: var(--red);
}
.pillar:nth-child(2)::before { background: var(--green); }
.pillar:nth-child(3)::before { background: var(--ink); }
.section--dark .pillar:nth-child(3)::before { background: #fff; }

/* ============================================ portraits (seam-cut circles)
   A circular crop whose ring is broken by a seam arc — the same gesture as the
   white seam cutting across the ball in the mark. */
.portrait {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-3);
  isolation: isolate;
}
.section--dark .portrait { background: var(--ink-3); }
.portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  /* The source portraits are a TV screengrab, a holiday selfie and several
     studio shots — every one a different colour cast, light and background.
     Desaturating is what makes them read as one set instead of a scrapbook.
     Colour returns on hover, so nothing is actually lost. */
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.3s ease;
}
.person:hover .portrait img,
.term:hover .portrait img,
.lead-card:hover .portrait img { filter: grayscale(0) contrast(1); }
.portrait--empty::after {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800;
  font-size: 2rem; letter-spacing: 0.04em;
  color: var(--muted);
}
.portrait__ring {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: 50%;
  /* Two arcs with a gap: a ring cut by a seam. */
  background:
    conic-gradient(from 210deg, var(--red) 0 118deg, transparent 118deg 142deg,
                   var(--red) 142deg 300deg, transparent 300deg 360deg);
  /* closest-side is load-bearing: a radial-gradient defaults to farthest-corner,
     whose radius is ~1.41x the inscribed circle, so `50%` lands at ~35% of the
     width and the "3px ring" renders as a thick disc. */
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity: 0.9;
}

/* ===================================================== committee grid */
.lead-card {
  display: grid;
  grid-template-columns: clamp(160px, 22vw, 260px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(26px, 3.5vw, 48px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--red);
  margin-bottom: clamp(34px, 4vw, 56px);
  position: relative;
}
@media (max-width: 660px) { .lead-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.lead-card__role {
  font-family: var(--display); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  font-size: var(--t-kicker); color: var(--red); margin-bottom: 10px;
}
.lead-card h3 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.lead-card p { margin-top: 16px; color: var(--muted); max-width: 52ch; }

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(22px, 3vw, 40px);
}
.person { text-align: center; }
.person .portrait { margin: 0 auto 18px; width: 100%; max-width: 200px; }
.person h4 {
  font-size: 1.22rem; letter-spacing: 0; line-height: 1.1;
  text-transform: none; font-weight: 700;
}
.person span {
  display: block; margin-top: 7px;
  font-family: var(--display); font-weight: 600;
  font-size: 0.86rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted);
}
.section--dark .person span { color: var(--muted-dark); }

/* ======================================================= presidents rail
   A horizontal spine of terms. The federation's continuity is the story, so
   the line is drawn once and every president hangs off it. */
.rail {
  position: relative;
  /* The portraits are square and fluid, so the timeline's vertical position has
     to be derived from their width — a fixed offset put the rule and its dots
     straight through everyone's face. */
  --term-w: clamp(140px, 17vw, 178px);
  --rail-y: calc(var(--term-w) + 13px);   /* mid-way down the 26px gap below */
}
.rail::before {
  content: ''; position: absolute; left: 0; right: 0; top: var(--rail-y); height: 2px;
  background: linear-gradient(90deg, transparent, var(--rule) 6%, var(--rule) 94%, transparent);
}
.section--dark .rail::before {
  background: linear-gradient(90deg, transparent, var(--rule-dark) 6%, var(--rule-dark) 94%, transparent);
}
.rail__scroll {
  display: flex; gap: clamp(18px, 2.6vw, 34px);
  overflow-x: auto;
  padding-bottom: 20px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rail__scroll::-webkit-scrollbar { height: 6px; }
.rail__scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.term {
  flex: 0 0 auto; width: var(--term-w);
  scroll-snap-align: start; text-align: center; position: relative;
}
.term .portrait { width: 100%; margin-bottom: 26px; }
.term::after {
  content: ''; position: absolute; left: 50%; top: var(--rail-y);
  width: 11px; height: 11px; margin-left: -5.5px; margin-top: -5.5px;
  background: var(--paper); border: 2px solid var(--red); border-radius: 50%;
}
.section--dark .term::after { background: var(--ink-2); }
.term--current::after { background: var(--red); }
.term b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: 1.16rem; letter-spacing: 0.02em; line-height: 1.15;
  text-transform: uppercase;
}
.term span { display: block; margin-top: 6px; font-size: 0.83rem; color: var(--muted); }
.section--dark .term span { color: var(--muted-dark); }

/* ============================================================ documents */
.docs { border-top: 1px solid var(--rule); }
.section--dark .docs { border-color: var(--rule-dark); }
.doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 30px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background 0.15s ease, padding-inline 0.15s ease;
}
.section--dark .doc { border-color: var(--rule-dark); }
.doc:hover { background: var(--paper-2); padding-inline: 16px; }
.section--dark .doc:hover { background: var(--ink-3); }
.doc__tag {
  font-family: var(--display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--red);
  padding: 6px 10px; border-radius: 2px; white-space: nowrap;
}
.doc h3 { font-size: var(--t-h3); text-transform: none; letter-spacing: -0.005em; }
.doc p { margin-top: 6px; color: var(--muted); font-size: 0.94rem; }
.section--dark .doc p { color: var(--muted-dark); }
.doc__meta {
  font-family: var(--display); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.82rem;
  color: var(--muted); white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
}
.doc__meta svg { width: 18px; height: 18px; }
@media (max-width: 620px) {
  .doc { grid-template-columns: auto minmax(0, 1fr); }
  .doc__meta { grid-column: 2; }
}

/* ============================================================ card grids */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(22px, 2.6vw, 32px);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.section--dark .card { background: var(--ink-2); border-color: var(--rule-dark); }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(5, 7, 8, 0.09); }
.card h3 { font-size: var(--t-h3); margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.95rem; }
.section--dark .card p { color: var(--muted-dark); }
.card__num {
  font-family: var(--display); font-weight: 800;
  font-size: 0.8rem; letter-spacing: 0.16em;
  color: var(--red); margin-bottom: 14px; display: block;
}
.badge {
  display: inline-block; margin-top: 14px;
  font-family: var(--display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px;
  background: var(--paper-3); color: var(--muted);
}
.badge--live { background: rgba(12, 114, 62, 0.12); color: var(--green); }
.badge--soon { background: rgba(238, 58, 68, 0.1); color: var(--red-ink); }

/* =============================================================== gallery */
.grid-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 22vw, 260px), 1fr));
  gap: 6px;
}
.shot {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--paper-3);
}
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.shot:hover img { transform: scale(1.05); }
.shot figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(5, 7, 8, 0.82));
  color: #fff; font-size: 0.84rem; line-height: 1.35;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.shot:hover figcaption, .shot:focus-within figcaption { opacity: 1; transform: none; }

/* =============================================================== partners */
.logos { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: center; justify-content: center; }
.logos a, .logos span { display: block; }
/* Cap logos in PIXELS with width/height auto. Several federation partner marks
   are tiny originals — upscaling them to a uniform box is what makes a partner
   strip look cheap. */
.logos img { max-height: 54px; max-width: 190px; width: auto; height: auto; object-fit: contain; }

/* ================================================================ contact */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 68px);
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.info dt {
  font-family: var(--display); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red); margin-bottom: 6px;
}
.info dd { margin: 0 0 26px; font-size: 1.06rem; line-height: 1.55; }
.info dd a { text-decoration: none; }
.info dd a:hover { text-decoration: underline; }

.map { border: 0; width: 100%; aspect-ratio: 16 / 10; }

.field { margin-bottom: 18px; }
.field label {
  display: block; margin-bottom: 7px;
  font-family: var(--display); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 1rem;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent;
}
.note { font-size: var(--t-small); color: var(--muted); margin-top: 14px; }

.flash { padding: 14px 18px; border-radius: 2px; margin-bottom: 22px; font-size: 0.95rem; }
.flash--ok { background: rgba(12, 114, 62, 0.1); color: var(--green-deep); border-left: 3px solid var(--green); }
.flash--err { background: rgba(238, 58, 68, 0.1); color: var(--red-ink); border-left: 3px solid var(--red); }

/* ================================================================= footer */
.ftr { background: var(--ink); color: #fff; padding-block: clamp(48px, 6vw, 82px) 30px; }
.ftr__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 880px) { .ftr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr__logo img { width: auto; height: 52px; object-fit: contain; margin-bottom: 20px; }
.ftr p { color: var(--muted-dark); font-size: 0.94rem; max-width: 38ch; }
.ftr h4 {
  font-size: 0.8rem; letter-spacing: 0.18em; color: var(--red);
  margin-bottom: 16px; font-weight: 700;
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 10px; }
.ftr a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.95rem; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.social { display: flex; gap: 10px; margin-top: 4px; }
.social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.social a:hover { background: var(--red); border-color: var(--red); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.fiba { display: inline-block; margin-top: 24px; opacity: 0.9; transition: opacity 0.15s ease; }
.fiba:hover { opacity: 1; }
.fiba img { width: auto; height: 40px; object-fit: contain; }
.ftr__base {
  margin-top: clamp(34px, 4vw, 56px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: 0.85rem; color: var(--muted-dark);
}

/* ========================================================= scroll reveal
   Gated on a .js class so content is visible when JS never runs, plus a hard
   failsafe in site.js that reveals everything after 3s regardless. Invisible
   content is the worst possible failure mode. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.in { transition: none; }
}

/* =============================================================== utility */
.empty {
  padding: clamp(34px, 5vw, 64px); text-align: center;
  border: 1px dashed var(--rule); color: var(--muted);
}
.section--dark .empty { border-color: var(--rule-dark); color: var(--muted-dark); }
.center { text-align: center; }
.mt { margin-top: clamp(28px, 3.5vw, 48px); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ====================================================== page head (inner)
   Inner pages open on the same dark ground as the home hero, so the header
   never floats over a colour change mid-scroll. */
.phead {
  background: var(--ink);
  color: #fff;
  padding-top: clamp(48px, 7vw, 92px);
  position: relative;
}
.phead h1 { font-size: var(--t-h1); }
.phead__lead {
  margin-top: 20px; max-width: 54ch;
  font-size: var(--t-lead); color: rgba(255, 255, 255, 0.72);
}

/* ============================================== about block + cedar plate */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; }
  .plate { order: -1; }
}
.about-lead {
  font-size: var(--t-h2);
  max-width: 18ch;
  margin-top: 4px;
}

/* THE thesis element: a red plate with the cedar taken out of it. The cedar is
   not drawn — it is the page showing through, exactly as in the federation's
   own mark, where the tree is the white of the flag inside the ball. */
.plate {
  position: relative;
  aspect-ratio: 4 / 5;
  isolation: isolate;
  background: var(--red);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.plate::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.16), transparent 60%);
}
.plate__cedar {
  /* Oversized and bled off three edges ON PURPOSE. The cedar in the mark is
     clipped by the ball's rim, so presented whole and centred it reads as an
     unidentifiable blob; presented as a crop, it reads as a crop. */
  position: absolute;
  top: -8%; right: -18%;
  width: 104%; height: 116%;
  color: var(--paper);   /* .knock paints currentColor through the cedar mask */
  -webkit-mask-position: right center;
  mask-position: right center;
}
.section--paper .plate__cedar { color: var(--paper-2); }

/* ============================================================== cta band */
.cta { padding-block: 0 clamp(64px, 8vw, 110px); background: var(--paper); text-align: center; }
.cta h2 { font-size: var(--t-h2); margin-top: clamp(24px, 4vw, 46px); }

/* ============================================================ group head */
.group-head {
  font-size: var(--t-h3);
  padding-bottom: 12px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
  border-bottom: 2px solid var(--red);
  display: inline-block;
}

/* card image (venues) */
.card__img {
  width: 100%; height: 170px; object-fit: cover;
  margin: calc(-1 * clamp(22px, 2.6vw, 32px)) calc(-1 * clamp(22px, 2.6vw, 32px)) 20px;
  width: calc(100% + 2 * clamp(22px, 2.6vw, 32px));
  max-width: none;
}

/* lead card on a dark section */
.lead-card--dark { background: var(--ink-3); border-color: var(--rule-dark); }
.lead-card--dark p { color: var(--muted-dark); }

/* ======================================================== nav dropdown
   The old site put the accreditation PDFs behind a menu rather than a page, and
   the federation hands those links out directly. Opens on hover AND on
   :focus-within, so it works from the keyboard without any JavaScript. */
.nav__item { position: relative; display: inline-flex; }
.nav__caret { font-size: 0.7em; opacity: 0.6; margin-left: 2px; }
.nav__sub {
  position: absolute;
  top: 100%; left: 0;
  min-width: 300px;
  background: var(--ink);
  border-top: 2px solid var(--red);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  padding: 10px 0 12px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 20;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a {
  display: block;
  padding: 9px 20px;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.8);
  white-space: normal;
}
.nav__sub a::after { display: none; }
.nav__sub a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav__subhead {
  margin: 8px 20px 4px;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.nav__subhead:first-child { margin-top: 0; }

@media (max-width: 1120px) {
  /* The dropdown is a desktop convenience and nothing more. Expanded inline it
     added six rows to a six-item menu, which is worse than the one extra tap of
     going to the Documents page — so on small screens "Documents" is just a link. */
  .nav__item { display: block; }
  .nav__sub { display: none; }
  .nav__caret { display: none; }
}

/* ============================================================ PDF viewer
   Documents open inside the site rather than dumping the reader into a bare
   browser tab. The embed is the browser's own PDF renderer; the download button
   above it is the fallback for iOS Safari, which only renders page one here. */
.viewer__bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.viewer__bar .btn--back { margin-right: auto; }
.viewer__size {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.viewer {
  width: 100%;
  height: min(84vh, 1100px);
  min-height: 460px;
  border: 1px solid var(--rule);
  background: var(--paper-3);
  display: block;
}
.viewer__note { text-align: center; margin-top: 14px; }
.viewer__note a { color: var(--red-ink); }
/* Hand-off card — the mobile counterpart of the embed. Only one of the two is
   ever shown. */
.viewer__handoff {
  display: none;
  text-align: center;
  padding: clamp(30px, 7vw, 48px) clamp(20px, 5vw, 36px);
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.viewer__handoff svg { width: 46px; height: 46px; margin: 0 auto 18px; color: var(--red); }
.viewer__handoff h3 { font-size: var(--t-h3); margin-bottom: 8px; }
.viewer__handoff p { color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; }
.viewer__dl {
  display: block; margin-top: 16px;
  font-size: 0.9rem; color: var(--muted);
}

@media (max-width: 860px) {
  .viewer, .viewer__note { display: none; }
  .viewer__handoff { display: block; }
  /* The bar's own download button is redundant next to the card. */
  .viewer__bar .btn:not(.btn--back) { display: none; }
}

/* ================================================ national team fixtures
   Pulled from FIBA. A played game shows the score with the winner emphasised;
   an upcoming one shows "vs" instead — never a 0–0, which is what FIBA returns
   for a game that has not happened. */
.fx__label {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  margin: clamp(18px, 2.4vw, 26px) 0 10px;
}
.fxlist { border-top: 1px solid var(--rule); }
.fx {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.3fr) auto minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: clamp(10px, 1.8vw, 22px);
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background 0.15s ease, padding-inline 0.15s ease;
}
a.fx:hover { background: var(--paper); padding-inline: 14px; }
.fx__when { font-size: 0.88rem; color: var(--muted); }
.fx__when em { display: block; font-style: normal; font-size: 0.76rem; color: var(--muted); opacity: 0.75; }
.fx__team {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 600; font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.01em;
}
.fx__team--away { text-align: right; }
.fx__team--win { font-weight: 800; color: var(--ink); }
.fx__score { text-align: center; white-space: nowrap; }
.fx__score b {
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  background: var(--ink); color: #fff; padding: 4px 11px; border-radius: 3px;
}
.fx__vs { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.fx__venue { font-size: 0.82rem; color: var(--muted); text-align: right; }
@media (max-width: 800px) {
  .fx { grid-template-columns: 1fr auto 1fr; grid-template-areas: 'when when when' 'h s a' 'v v v'; }
  .fx__when { grid-area: when; margin-bottom: 6px; }
  .fx__team { grid-area: h; }
  .fx__score { grid-area: s; }
  .fx__team--away { grid-area: a; }
  .fx__venue { grid-area: v; text-align: left; margin-top: 6px; }
}

/* live game */
.fx__score--live { background: var(--red) !important; }
.fx__live {
  display: block; margin-top: 5px;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red); white-space: nowrap;
}
.fx__live i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-right: 4px; vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.25 } }
@media (prefers-reduced-motion: reduce) { .fx__live i { animation: none } }

/* ==================================================== home national band */
.gband { background: var(--ink-2); color: #fff; padding-block: clamp(34px, 5vw, 56px); }
.gband__head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.gband__all {
  margin-left: auto; text-decoration: none;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.gband__all:hover { color: #fff; }
.gband__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.gcard {
  display: block; text-decoration: none;
  background: var(--ink-3); border: 1px solid var(--rule-dark);
  border-left: 3px solid var(--red);
  padding: 20px 22px;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.gcard:hover { transform: translateY(-2px); border-color: #39414c; border-left-color: var(--red); }
.gcard__label {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-dark); margin: 0 0 14px;
}
.gcard__live { color: var(--red); }
.gcard__live i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-right: 5px; vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}
.gcard__row { display: flex; align-items: baseline; gap: 14px; padding: 5px 0; }
.gcard__team {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.01em;
}
.gcard__pts {
  margin-left: auto; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1;
}
.gcard__meta { margin: 14px 0 0; font-size: 0.8rem; color: var(--muted-dark); }
.gcard__go {
  display: inline-block; margin-top: 14px;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red);
}

/* ======================================================== match centre */
.gh { background: var(--ink); color: #fff; padding-top: clamp(34px, 5vw, 62px); position: relative; }
.gh__meta {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red); margin: 0 0 clamp(20px, 3vw, 34px);
}
.gh__board {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 3vw, 40px);
  align-items: center;
}
.gh__side { display: flex; align-items: center; gap: 18px; }
.gh__side--away { flex-direction: row-reverse; }
.gh__side > div { min-width: 0; }
.gh__side h1 { font-size: clamp(1.4rem, 3.4vw, 2.7rem); }
.gh__side--away { text-align: right; }
.gh__side--win h1 { color: #fff; }
.gh__side:not(.gh__side--win) h1 { color: rgba(255, 255, 255, 0.62); }
.gh__code {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.2em; color: var(--muted-dark); margin-bottom: 6px;
}
.gh__side--away .gh__code, .gh__side--away h1 { text-align: right; }
.gh__score { text-align: center; white-space: nowrap; }
.gh__score b {
  font-family: var(--display); font-variation-settings: 'wdth' 112;
  font-weight: 800; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1;
}
.gh__score span { font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--muted-dark); margin: 0 8px; }
.gh__vs { font-family: var(--display); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.gh__final, .gh__live {
  display: block; margin-top: 10px;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.gh__final { color: var(--muted-dark); }
.gh__live { color: var(--red); }
.gh__live i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-right: 5px; vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}
.gh__where {
  margin: clamp(22px, 3vw, 34px) 0 0; text-align: center;
  color: var(--muted-dark); font-size: 0.9rem;
}
.gh__facts { display: flex; flex-wrap: wrap; gap: 12px 34px; justify-content: center; }
.gh__facts span { color: var(--muted); font-size: 0.86rem; }
.gh__facts b { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--ink); margin-right: 5px; }

/* quarter table */
.qtr table { width: 100%; border-collapse: collapse; }
.qtr th, .qtr td { padding: 12px 10px; border-bottom: 1px solid var(--rule); text-align: center; }
.qtr thead th {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.qtr tbody th {
  text-align: left; font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 600; font-size: 1rem; text-transform: uppercase;
}
.qtr td { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.qtr__tot { background: var(--paper-2); font-weight: 800 !important; }
.qtr--win th, .qtr--win td { color: var(--ink); }
.qtr tbody tr:not(.qtr--win) th, .qtr tbody tr:not(.qtr--win) td { color: var(--muted); }

/* box score */
.box { margin-top: clamp(22px, 3vw, 34px); }
.box__title {
  font-size: var(--t-h3); padding-bottom: 10px; margin-bottom: 0;
  border-bottom: 2px solid var(--ink);
}
.box__scroll { overflow-x: auto; }
.box__table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 1180px; }
.box__table th {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding: 11px 7px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
.box__table th:first-child { text-align: left; }
.box__table td { padding: 10px 7px; text-align: center; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.box__table tbody tr:hover td { background: var(--paper-2); }
.box__name { text-align: left !important; white-space: nowrap; font-weight: 600; }
.box__num {
  display: inline-block; min-width: 22px; margin-right: 9px;
  font-family: var(--display); font-weight: 700; color: var(--muted); font-size: 0.8rem;
}
.box__star { color: var(--red); font-style: normal; margin-left: 6px; font-size: 0.72rem; }
.box__dnp td { color: var(--rule); }
.box__dnp .box__name { color: var(--muted); font-weight: 500; }
@media (max-width: 700px) {
  .gh__board { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .gh__side--away { text-align: center; }
  .gh__side--away .gh__code { text-align: center; }
}

/* ===================================================== flags, pills, form */
/* Every flag occupies the SAME box. Sized by aspect ratio with width:auto, a
   very wide flag (Qatar is 11:28) renders two-thirds wider than a square-ish one
   and the row looks lumpy. A fixed 7:5 box with object-fit:cover normalises the
   footprint; 7:5 sits close to the 3:2 most flags use, so the crop is slight. */
.flag {
  width: 28px; height: 20px; flex: none;
  border-radius: 3px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.section--dark .flag, .gband .flag, .gh .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); }

.pill--w, .pill--l, .pill--d, .pill--ha {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 800; font-size: 0.68rem; letter-spacing: 0;
}
.pill--w { background: var(--green); color: #fff; }
.pill--l { background: var(--paper-3); color: var(--muted); }
.pill--d { background: var(--rule); color: var(--muted); }
.pill--ha {
  background: transparent; color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--rule); font-size: 0.62rem;
}

.teamhead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form { display: inline-flex; align-items: center; gap: 5px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.form em {
  font-style: normal; font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-right: 4px;
}
.form i {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px;
  font-style: normal; font-family: var(--display); font-weight: 800; font-size: 0.66rem;
}
.form__w { background: var(--green); color: #fff; }
.form__l { background: var(--paper-3); color: var(--muted); }

/* fixture row now carries flags + a trailing pill cluster */
.fx__team { display: flex; align-items: center; gap: 10px; }
/* The away side is written name-then-flag so the flag sits on the OUTSIDE edge.
   row-reverse would have pulled it back inside next to the score. */
.fx__team--away { justify-content: flex-end; }
.fx__end { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.fx__end .fx__venue { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) {
  .fx__end { grid-area: v; justify-content: flex-start; }
}

/* home card rows */
.gcard__row { gap: 10px; }
.gcard__row--win .gcard__team, .gcard__row--win .gcard__pts { color: #fff; }
.gcard__row:not(.gcard__row--win) .gcard__team { color: rgba(255, 255, 255, 0.66); }

/* match-centre extras */
/* Set BOTH dimensions. The base rule pins width:28px, so overriding only the
   height turned these into tall narrow boxes. */
.gh__side .flag { width: 64px; height: 46px; }

.gh__w {
  display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 0.6rem; margin-left: 8px;
  vertical-align: middle; transform: translateY(-1px);
  letter-spacing: 0;   /* inherits the code's tracking otherwise, off-centring the W */
}
.qtr tbody th { display: flex; align-items: center; gap: 10px; }
.box__title { display: flex; align-items: center; gap: 11px; }
.leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.leader {
  border: 1px solid var(--rule); border-left: 3px solid var(--red);
  padding: 15px 18px; background: var(--paper-2);
}
.leader__tag {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px;
}
.leader__tag .flag { height: 15px; }
.leader b { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.leader__n { display: block; margin-top: 3px; color: var(--red); font-weight: 700; font-size: 0.9rem; }
@media (max-width: 700px) {
  .gh__side--away .flag { margin: 0 auto 12px; }
}

/* ============================================ match centre — mobile board
   The desktop board is home | score | away. Collapsed to one column that reads
   "QATAR / 74-75 / FINAL / LEBANON", which gives no clue whose score is whose.
   Phones get a stacked row layout instead: flag, team, score per line. */
.gh__rows { display: none; }   /* superseded: mobile keeps the desktop board */
.ghr {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ghr:first-child { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.ghr__name {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 600; font-size: 1.12rem; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62); line-height: 1.15;
}
.ghr__pts {
  margin-left: auto;
  font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1;
  color: rgba(255, 255, 255, 0.62);
}
.ghr--win .ghr__name, .ghr--win .ghr__pts { color: #fff; }
.ghr__status {
  margin: 14px 0 0; text-align: center;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-dark);
}

@media (max-width: 760px) {
  .gh { padding-top: 26px; }
  /* Keep the desktop arrangement — team | score | team. The country CODE leads
     on narrow screens because a full name wraps and wrecks the three columns. */
  .gh__board { grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
  .gh__side h1 { display: none; }
  .gh__side .flag { width: 46px; height: 33px; margin-bottom: 8px; }
  
  .gh__code {
    font-family: var(--display); font-variation-settings: 'wdth' 100;
    font-weight: 800; font-size: 1.25rem; letter-spacing: 0.08em; color: #fff;
  }
  .gh__side:not(.gh__side--win) .gh__code { color: rgba(255, 255, 255, 0.6); }
  .gh__side--away .gh__code, .gh__side--away h1 { text-align: right; }
  .gh__score b { font-size: 2.6rem; }
  .gh__score span { font-size: 1.3rem; margin: 0 4px; }
  .gh__meta { margin-bottom: 18px; font-size: 0.66rem; line-height: 1.5; }
  .gh__where { text-align: center; }
  .gh__where { margin-top: 18px; font-size: 0.82rem; line-height: 1.5; }
  /* Keep the player column visible while the stats scroll sideways. */
  /* `opacity` on the DNP row made a stacking context, so the scrolling stats
     showed straight through the pinned cell. Dim with colour, never opacity. */
  .box__name, .box__table thead th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--paper); box-shadow: 1px 0 0 var(--rule);
  }
  .box__table thead th:first-child { background: var(--paper); }
  .box__table tbody tr:hover .box__name { background: var(--paper-2); }
  .box__scroll { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .qtr table { font-size: 0.9rem; }
  .qtr th, .qtr td { padding: 10px 6px; }
  .leaders { gap: 10px; }
}

/* ============================================================ match cards
   A date rail, the two teams stacked so each score sits against its own name,
   and a quiet footer. Numerals are tabular so scores align down the column —
   the detail that makes a results list read as a scoreboard rather than prose. */
/* Separators come from each card's own ring, not from a coloured container.
   A tinted container shows through wherever auto-fill leaves a trailing empty
   cell, which reads as a broken grey block at the end of the list. */
.mclist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1px;
}
.mc { box-shadow: 0 0 0 1px var(--rule); }
.mc {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  background: var(--paper);
  text-decoration: none;
  position: relative;
  transition: background 0.16s ease;
}
.mc::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: transparent; transition: background 0.16s ease;
}
.mc:hover { background: var(--paper-2); }
.mc--w::before { background: var(--green); }
.mc--l::before { background: var(--rule); }
.mc--live::before { background: var(--red); }

.mc__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 18px 0;
  border-right: 1px solid var(--rule);
  background: var(--paper-2);
}
.mc__date b {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 800; font-size: 1.32rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.mc__date span {
  font-family: var(--display); font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.14em; color: var(--red);
}
.mc__date em {
  font-style: normal; font-size: 0.6rem; color: var(--muted); letter-spacing: 0.06em;
}

.mc__body { padding: 14px 16px 12px; min-width: 0; }
.mc__top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 11px;
}
.mc__round, .mc__status {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted);
}
.mc__status { margin-left: auto; color: var(--ink); }
.mc__live { color: var(--red); white-space: nowrap; }
.mc__live i {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--red); margin-right: 4px; vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}

.mc__teams { display: grid; gap: 7px; }
.mc__team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mc__name {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc__pts {
  margin-left: auto; flex: none;
  font-family: var(--display); font-weight: 800; font-size: 1.28rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.mc__team.is-win .mc__name, .mc__team.is-win .mc__pts { color: var(--ink); }

.mc__foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--rule);
}
.mc__venue {
  font-size: 0.76rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc__tags { margin-left: auto; display: flex; gap: 5px; flex: none; }
.tag {
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 4px;
  font-style: normal; font-family: var(--display); font-weight: 800; font-size: 0.6rem;
  background: var(--paper-3); color: var(--muted);
}
.tag--w { background: var(--green); color: #fff; }
.tag--l { background: var(--paper-3); color: var(--muted); }

@media (max-width: 600px) {
  .mclist { grid-template-columns: 1fr; }
  .mc { grid-template-columns: 54px minmax(0, 1fr); }
}

/* ================================================== home feature cards */
.gband { background: var(--ink); }
.gband__grid { gap: 1px; }
.gc {
  display: block; text-decoration: none; position: relative;
  background: var(--ink-2);
  box-shadow: 0 0 0 1px var(--rule-dark);
  padding: 22px 24px 18px;
  transition: background 0.18s ease;
}
.gc::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--red); opacity: 0.85;
}
.gc:hover { background: var(--ink-3); }
.gc__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.gc__label, .gc__round {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.gc__label { color: var(--red); }
.gc__round { margin-left: auto; color: var(--muted-dark); }
.gc__livetag i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-right: 5px; vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}
.gc__teams { display: grid; gap: 12px; }
.gc__team { display: flex; align-items: center; gap: 13px; min-width: 0; }
.gc__team .flag { width: 34px; height: 24px; }
.gc__name {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.58);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gc__pts {
  margin-left: auto; flex: none;
  font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.58);
}
.gc__team.is-win .gc__name, .gc__team.is-win .gc__pts { color: #fff; }
.gc__foot {
  display: flex; align-items: flex-end; gap: 14px;
  margin-top: 20px; padding-top: 15px;
  border-top: 1px solid var(--rule-dark);
}
.gc__when { font-size: 0.82rem; color: var(--muted-dark); line-height: 1.45; }
.gc__when em { display: block; font-style: normal; opacity: 0.72; }
.gc__go {
  margin-left: auto; flex: none;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red); white-space: nowrap;
}

/* ========================================================== sticky score
   Appears once the hero scrolls out of view. Toggled by IntersectionObserver in
   site.js rather than by scroll position, so it costs nothing while idle. */
/* Sits BELOW the header in the stacking order (the header is z-index 100) and is
   offset by the header's measured height, so it can never paint over the nav
   even if the measurement is momentarily stale. */
.stickybar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99;
  background: rgba(5, 7, 8, 0.94);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateY(-100%);
  transition: transform 0.24s cubic-bezier(0.3, 0.8, 0.3, 1);
  color: #fff;
}
.stickybar.on { transform: none; }
@media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } }
.stickybar__in {
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 46px);
  min-height: 56px;
}
.stickybar__side { display: flex; align-items: center; gap: 11px; }
.stickybar__side b {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; color: var(--muted-dark);
}
.stickybar__side span {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6);
}
.stickybar__side span.is-win { color: #fff; }
.stickybar__mid {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.64rem; letter-spacing: 0.2em; color: var(--muted-dark);
}
.stickybar__live { font-style: normal; color: var(--red); white-space: nowrap; }
.stickybar__live i {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--red); margin-right: 4px; vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}

/* =========================================================== team stats */
.ts { border-top: 1px solid var(--rule); }
.ts__head, .ts__row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px;
  align-items: center; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.ts__head {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--muted);
}
.ts__head span { display: flex; align-items: center; gap: 8px; }
.ts__head span:last-child { justify-content: flex-end; }
.ts__row b {
  font-family: var(--display); font-weight: 800; font-size: 1.02rem;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.ts__row b:last-child { text-align: right; }
.ts__row b.is-win { color: var(--ink); }
.ts__label {
  text-align: center; font-size: 0.8rem; color: var(--muted);
}
.ts__bar {
  display: block; margin-top: 7px; height: 4px; border-radius: 2px;
  background: var(--paper-3); overflow: hidden;
}
.ts__bar u {
  display: block; height: 100%; background: var(--red); text-decoration: none;
  transition: width 0.4s ease;
}
@media (max-width: 560px) {
  .ts__head, .ts__row { grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 10px; }
  .ts__row b { font-size: 0.9rem; }
  .ts__label { font-size: 0.72rem; }
}

/* ================================================ categorised team stats */
.tsg { margin-top: 26px; }
.tsg__title {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 800; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); margin-bottom: 6px;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.ts__head {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px;
  align-items: center; gap: 16px; padding: 0 0 12px;
  border-bottom: 2px solid var(--ink);
}

/* Game flow reads as headline figures, not a two-column comparison. */
.flow { margin-top: 30px; }
.flow__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 14px;
}
.flow__cell { background: var(--paper); padding: 16px 18px; }
.flow__cell span {
  display: block; font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px;
}
.flow__cell b {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.flow__cell b .flag { width: 24px; height: 17px; }
.flow__cell em { display: block; margin-top: 7px; font-style: normal; font-size: 0.76rem; color: var(--muted); }

/* ================================================================ lead dash */
.dash__key {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 14px 0 10px; font-size: 0.78rem; color: var(--muted);
}
.dash__key span { display: flex; align-items: center; gap: 7px; }
.dash__key em { margin-left: auto; font-style: normal; color: var(--muted-2, var(--muted)); }
.dash__sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.dash__sw--h { background: var(--red); }
.dash__sw--a { background: var(--ink); }
.dash__svg {
  width: 100%; height: clamp(150px, 22vw, 210px); display: block;
  background: var(--paper-2); border: 1px solid var(--rule);
}
.dash__home { fill: var(--red); fill-opacity: 0.85; stroke: none; }
.dash__away { fill: var(--ink); fill-opacity: 0.85; stroke: none; }
.dash__zero { stroke: var(--ink); stroke-width: 1; opacity: 0.45; vector-effect: non-scaling-stroke; }
.dash__q { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash__axis {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin-top: 7px;
}
.dash__axis span {
  text-align: center; font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.64rem; letter-spacing: 0.14em; color: var(--muted);
}

/* ============================================================ event page */
.evstat {
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  margin-top: clamp(18px, 2.6vw, 28px);
}
.evstat span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.62); }
.evstat b {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 800; font-size: 1.5rem; color: #fff; margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.teamhead__link { display: inline-block; text-decoration: none; }
.teamhead__link:hover { color: var(--red); }
.gh__meta a { text-decoration: none; }
.gh__meta a:hover { text-decoration: underline; }

/* ============================================ competitions — categories */
.cat {
  font-size: var(--t-h3);
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
.cat__block { margin-top: clamp(38px, 5vw, 62px); }
.cat__group { margin-top: 24px; }
.cat__sub {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); margin-bottom: 12px;
}

/* league card with the competition's own badge */
.lglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1px; }
.lg {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center; gap: 18px;
  padding: 18px 20px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
  text-decoration: none;
  transition: background 0.16s ease;
}
.lg:hover { background: var(--paper-2); }
.lg__badge { display: grid; place-items: center; height: 58px; }
.lg__badge img { max-width: 96px; max-height: 58px; width: auto; height: auto; object-fit: contain; }
.lg__nobadge {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper-3); display: block;
}
.lg__body { min-width: 0; }
.lg h4 {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 1.02rem; line-height: 1.25; text-transform: uppercase;
  letter-spacing: 0.005em;
}
.lg__meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 9px; font-size: 0.8rem; color: var(--muted);
}
.lg__rec b {
  font-family: var(--display); font-weight: 800; font-size: 0.95rem; color: var(--ink);
  margin-right: 4px; font-variant-numeric: tabular-nums;
}
.lg__go {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--red);
}
@media (max-width: 520px) {
  .lglist { grid-template-columns: 1fr; }
  .lg { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 13px; padding: 15px 16px; }
  .lg__badge { height: 44px; }
  .lg__badge img { max-width: 68px; max-height: 44px; }
}

/* competition badge in the event hero */
.evhead { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); flex-wrap: wrap; }
.evhead__badge {
  flex: none; display: grid; place-items: center;
  background: #fff; border-radius: 6px;
  padding: 12px 16px;
}
.evhead__badge img {
  width: auto; height: clamp(52px, 7vw, 76px);
  max-width: 200px; object-fit: contain;
}
@media (max-width: 560px) {
  .evhead { gap: 14px; }
  .evhead__badge { padding: 9px 12px; }
}

/* ===========================================================================
   MATCH CENTRE v2 — "the score field"
   ---------------------------------------------------------------------------
   No plate, no container: the scoreline stands free in the hero's dark ground
   as colossal numerals — the winner SOLID in its team colour (home red, away
   white), the loser the same glyph hollowed to a stroke. Behind them the
   game's own lead history is drawn faint, so the score stands on the game
   that produced it. The same free-standing duality reappears at card size on
   the home page and as the record on the competition page — one system,
   three scales.
   =========================================================================== */

.ghx {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 46%) 1fr;
  gap: clamp(16px, 3.4vw, 52px);
  align-items: center;
}
.ghx__side {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; min-width: 0;
}
.ghx__side--away { align-items: flex-end; text-align: right; }
.ghx__side .flag { width: 62px; height: 44px; }
.ghx__code {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.76rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--muted-dark);
}
.ghx__side h1 {
  font-size: clamp(1.35rem, 2.6vw, 2.3rem);
  line-height: 1.03;
}
.ghx__side--win h1 { color: #fff; }
.ghx__side:not(.ghx__side--win) h1 { color: rgba(255, 255, 255, 0.55); }
.ghx__mid { min-width: 0; }

.cut__num {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: var(--wider);
  font-size: 165px; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.ghx__status {
  margin: 12px 0 0; text-align: center;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-dark);
}
.ghx__live { font-style: normal; color: var(--red); white-space: nowrap; }
.ghx__live i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-right: 5px; vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .ghx__live i { animation: none; } }

/* The theatrical numbers — crowd, lead changes, time in front — as a strip on
   the hero itself, in the same register as the home hero's stats. */
.ghx__facts {
  margin-top: clamp(24px, 3.6vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-wrap: wrap; justify-content: center;
}
.ghx__facts span {
  display: flex; align-items: baseline; gap: 9px;
  padding: 16px 24px 4px;
  font-size: 0.8rem; color: var(--muted-dark); letter-spacing: 0.02em;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.ghx__facts span:last-child { border-right: 0; }
.ghx__facts b {
  font-family: var(--display); font-weight: 800; font-size: 1.35rem;
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}

@media (max-width: 760px) {
  /* Three columns at every width; the CODE carries each side because a full
     country name wraps and wrecks the board. */
  .ghx { grid-template-columns: 1fr minmax(150px, 46vw) 1fr; gap: 12px; }
  .ghx__side h1 { display: none; }
  .ghx__side .flag { width: 44px; height: 31px; }
  .ghx__code { font-size: 1.15rem; letter-spacing: 0.08em; font-weight: 800; color: #fff; }
  .ghx__side:not(.ghx__side--win) .ghx__code { color: rgba(255, 255, 255, 0.6); }
  .ghx__facts span { padding: 12px 14px 2px; font-size: 0.72rem; }
  .ghx__facts b { font-size: 1.05rem; }
}

/* ------------------------------------------------------------ match tabs
   Pure CSS tabs: three hidden radios, three labels, three panes. The panes are
   later siblings of the radios, so `:checked ~` does all the switching — the
   page works identically with scripting disabled. site.js only syncs the URL
   hash on top. */
.tabs { margin-top: clamp(30px, 4vw, 50px); }
.tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.tabs__bar {
  display: flex;
  border-bottom: 2px solid var(--ink);
}
.tabs__bar label {
  flex: 0 0 auto;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 800; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  padding: 13px 26px;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.tabs__bar label:hover { color: var(--ink); }
/* The selected label is knocked INTO the ink rule — a solid block, no underline. */
#t-ov:checked ~ .tabs__bar label[for='t-ov'],
#t-box:checked ~ .tabs__bar label[for='t-box'],
#t-ts:checked ~ .tabs__bar label[for='t-ts'] { background: var(--ink); color: #fff; }
#t-ov:focus-visible ~ .tabs__bar label[for='t-ov'],
#t-box:focus-visible ~ .tabs__bar label[for='t-box'],
#t-ts:focus-visible ~ .tabs__bar label[for='t-ts'] { outline: 2px solid var(--red); outline-offset: 2px; }
.tabs__pane { display: none; }
#t-ov:checked ~ .tabs__pane--ov,
#t-box:checked ~ .tabs__pane--box,
#t-ts:checked ~ .tabs__pane--ts { display: block; }
@media (max-width: 560px) {
  .tabs__bar label { flex: 1; text-align: center; padding: 12px 6px; font-size: 0.68rem; letter-spacing: 0.1em; }
}

/* Quarter won: the higher score in each column gets an ink numeral and a red
   underline tick, so the quarter-by-quarter rhythm reads at a glance. */
.qtr tbody tr td.qtr__w {
  color: var(--ink); font-weight: 800;
  box-shadow: inset 0 -2px 0 var(--red);
}
.qtr td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- leaders as duels
   Top performer per category, face to face across a centre chip. */
.duels { border-top: 1px solid var(--rule); }
.duel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.duel__side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.duel__side--away { flex-direction: row-reverse; text-align: right; }
.duel__side b {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--muted); flex: none;
}
.duel__side.is-top b { color: var(--red); }
.duel__side > span { min-width: 0; }
.duel__side em {
  display: block; font-style: normal; font-weight: 600; font-size: 0.95rem;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.duel__side.is-top em { color: var(--ink); }
.duel__side i {
  display: flex; align-items: center; gap: 6px;
  font-style: normal; margin-top: 3px;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.duel__side--away i { justify-content: flex-end; }
.duel__side .flag { width: 17px; height: 12px; }
.duel__cat {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 5px 12px; white-space: nowrap;
}
@media (max-width: 560px) {
  .duel { gap: 8px; }
  .duel__side { gap: 9px; }
  .duel__side b { font-size: 1.3rem; }
  .duel__side em { font-size: 0.84rem; }
  .duel__side i { font-size: 0.54rem; }
  .duel__cat { padding: 4px 8px; font-size: 0.54rem; }
}

/* =========================================================================
   HOME FEATURE CARDS v2 — the match hero at card size
   ========================================================================= */
.gc__main {
  display: grid; grid-template-columns: minmax(0, 1fr) 116px;
  gap: 18px; align-items: stretch;
}
.gc__teams { grid-template-rows: 1fr 1fr; gap: 0; align-content: stretch; }
.gc__team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gc__name {
  font-size: 1.42rem; letter-spacing: 0.06em; flex: none;
  overflow: visible;
}
.gc__long {
  font-size: 0.76rem; color: var(--muted-dark); font-family: var(--body);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 3px;
}
.gc__team.is-win .gc__long { color: var(--muted-dark); }
/* The chip belongs to the TEAM, so it sits right after the name — margin-left
   auto shoved it across the row to float beside the plate, which is what read
   as broken. */
.gc__w {
  margin-left: 2px; flex: none;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-style: normal; font-family: var(--display); font-weight: 800; font-size: 0.6rem;
  letter-spacing: 0;
}
.gc__cut {
  width: 116px; height: auto; display: block; align-self: center;
}
.gc__num {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: var(--wider);
  font-size: 56px; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.gc__mon {
  font-family: var(--display); font-weight: 800;
  font-size: 30px; letter-spacing: 0.08em;
}
@media (max-width: 400px) {
  .gc__main { grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
  .gc__cut { width: 96px; }
  .gc__long { display: none; }
}

/* =========================================================================
   COMPETITION PAGE v2 — record plate, campaign spine, stat strip
   ========================================================================= */
.evcut {
  margin-left: auto; flex: none;
  width: clamp(140px, 18vw, 210px);
  text-align: center;
}
.evcut svg { width: 100%; height: auto; display: block; }
.evcut__num {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: var(--wider);
  font-size: 84px; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.evcut em {
  display: block; margin-top: 9px; font-style: normal;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted-dark);
}
@media (max-width: 640px) {
  .evcut { margin-left: 0; width: 128px; }
}

/* The campaign spine: every game, in order, as a chip you can walk. */
.spine {
  display: flex; gap: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 2px 12px;
  margin-top: clamp(20px, 3vw, 32px);
}
.spine::-webkit-scrollbar { height: 5px; }
.spine::-webkit-scrollbar-thumb { background: var(--rule-dark); border-radius: 3px; }
.spine__g {
  flex: none; min-width: 88px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px;
  align-items: center; align-content: center;
  text-decoration: none;
  background: var(--ink-3);
  border: 1px solid var(--rule-dark);
  border-top: 3px solid rgba(255, 255, 255, 0.22);
  padding: 9px 13px 8px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.spine__g:hover { transform: translateY(-2px); border-color: #39414c; }
.spine__g .flag { width: 20px; height: 14px; }
.spine__g b {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff;
}
.spine__g span {
  grid-column: 1 / -1; margin-top: 4px;
  font-size: 0.72rem; color: var(--muted-dark);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap;
}
.spine__g--w { border-top-color: var(--green); }
.spine__g--l { border-top-color: #4a525d; }
.spine__g--l b { color: rgba(255, 255, 255, 0.62); }
.spine__g--live { border-top-color: var(--red); }
.spine__g--live span { color: var(--red); font-weight: 700; }

/* Campaign stat strip — the same register as the home hero's strip. */
.evstrip {
  margin-top: clamp(20px, 3vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.evstrip__stat {
  padding: 18px 20px 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.evstrip__stat:first-child { padding-left: 0; }
.evstrip__stat:last-child { border-right: 0; }
.evstrip__stat b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.05;
  letter-spacing: -0.01em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.evstrip__stat span {
  display: block; margin-top: 7px;
  font-size: 0.78rem; color: var(--muted-dark); letter-spacing: 0.02em;
}
@media (max-width: 560px) {
  .evstrip { grid-template-columns: repeat(2, 1fr); }
  .evstrip__stat { padding: 14px 14px 18px; }
  .evstrip__stat:nth-child(odd) { padding-left: 0; }
  .evstrip__stat:nth-child(2n) { border-right: 0; }
}

/* ============================================ centre-out comparison bars
   Home grows LEFT from the centre line in red, away grows RIGHT in ink — the
   same duality as the lead dash. Counting rows scale to the larger value;
   .duo--pct rows fill an absolute 100% track (visible as the full rail), so the
   two bar types read differently at a glance. Bars are dimmed with COLOUR on
   the losing side, never opacity. */
.duo { display: flex; margin-top: 7px; height: 6px; }
.duo__half { position: relative; flex: 1 1 50%; background: transparent; overflow: hidden; }
.duo--pct .duo__half { background: var(--paper-3); }
.duo__half u {
  position: absolute; top: 0; bottom: 0; display: block; text-decoration: none;
  transition: width 0.4s ease;
}
.duo__half--h { border-right: 2px solid var(--ink); border-radius: 3px 0 0 3px; }
.duo__half--a { border-radius: 0 3px 3px 0; }
.duo__half--h u { right: 0; background: var(--red); }
.duo__half--a u { left: 0; background: var(--ink); }
.duo__half--h.duo__half--dim u { background: #f5b8bc; }
.duo__half--a.duo__half--dim u { background: #c3c8cf; }

/* ===========================================================================
   THE SCORE FIELD — free-standing numerals over the game's own story
   =========================================================================== */
.sf { width: 100%; height: auto; display: block; }
/* Faint lead history behind the numerals: embers of the red where the home
   side led, lifted ink where the away side did. */
.sf__back line { stroke: rgba(255, 255, 255, 0.07); }
.sf__bh { fill: #43141a; }
.sf__ba { fill: #262d34; }
.sf__zero { stroke: rgba(255, 255, 255, 0.16); }
.sf__seam path { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 2.5; }
.sf__seam .sf__hair { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
/* Winner solid in its colour with a breath of glow; loser hollowed to a
   stroke of the same colour — present, but subordinate. */
.sf__num--h { fill: var(--red); filter: drop-shadow(0 0 28px rgba(238, 58, 68, 0.4)); }
.sf__num--a { fill: #fff; filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.22)); }
.sf__num--h-out { fill: none; stroke: var(--red); stroke-width: 3; }
.sf__num--a-out { fill: none; stroke: rgba(255, 255, 255, 0.66); stroke-width: 3; }
.sf__num--vs { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2.5; }
@media (prefers-reduced-motion: reduce) { .sf__num--h, .sf__num--a { filter: none; } }

/* Home cards: the same duality at card scale. */
.gc__seam path { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 2; }
.gc__seam .gc__hair { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.gc__num--h { fill: var(--red); filter: drop-shadow(0 0 14px rgba(238, 58, 68, 0.35)); }
.gc__num--a { fill: #fff; filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.2)); }
.gc__num--h-out { fill: none; stroke: var(--red); stroke-width: 2; }
.gc__num--a-out { fill: none; stroke: rgba(255, 255, 255, 0.62); stroke-width: 2; }
.gc__num--d { fill: #fff; }
.gc__num--vs { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; }
.gc__mon { fill: var(--red); }

/* Competition record: wins solid red, losses hollowed. */
.evcut__seam path { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 2; }
.evcut__seam .evcut__hair { stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.evcut__w { fill: var(--red); }
.evcut__d { fill: rgba(255, 255, 255, 0.32); }
.evcut__l { fill: none; stroke: rgba(255, 255, 255, 0.66); stroke-width: 2.5; }

/* ===========================================================================
   GAME STATS — three families, three instruments
   ---------------------------------------------------------------------------
   The structural idea of FIBA's match centre (stat families read differently)
   rebuilt in this site's own language:
     key stats    — plate bars, value cut out of the fill, seam-slash tips;
     shooting     — the ball itself as the gauge, filling to its percentage;
     situational  — thin centre-out balance instruments.
   =========================================================================== */

/* -------------------------------------------------- key stats: cut plates */
.kbars { display: grid; gap: 9px; padding-top: 6px; }
.kbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 150px) minmax(0, 1fr);
  align-items: center; gap: 12px;
}
.kbar__label {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  text-align: center;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.kbar__label i { font-style: normal; color: var(--red); font-size: 0.58rem; }
/* Hairline track through the middle; the plate rides it. */
.kbar__track {
  position: relative; height: 30px; min-width: 0;
  background: linear-gradient(var(--rule), var(--rule)) center / 100% 1px no-repeat;
}
.kbar__track--h { display: flex; justify-content: flex-end; }
.kbar__track--a { display: flex; justify-content: flex-start; }
.kbar__fill {
  position: relative; height: 100%;
  display: flex; align-items: center;
}
.kbar__fill b {
  font-family: var(--display); font-weight: 800; font-size: 0.92rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--paper);   /* the ground colour: the value reads as CUT OUT */
}
/* Home plates grow leftward from the centre; the slanted tip is the seam
   slash. Winner keeps the solid plate (value cut through); the beaten side is
   printed on a pale plate in its own colour. */
.kbar__track--h .kbar__fill {
  background: var(--red);
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%);
  justify-content: flex-start; padding-left: 18px;
}
.kbar__track--a .kbar__fill {
  background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 100%, 0 100%);
  justify-content: flex-end; padding-right: 18px;
}
.kbar__track--h .kbar__fill--off { background: #f6d2d4; }
.kbar__track--h .kbar__fill--off b { color: var(--red-ink); }
.kbar__track--a .kbar__fill--off { background: #dcdee0; }
.kbar__track--a .kbar__fill--off b { color: #565d66; }
/* A plate too short to hold its numeral pushes it out past the tip, printed
   in the team colour instead of cut. */
.kbar__track--h .kbar__fill--slim { padding-left: 0; }
.kbar__track--a .kbar__fill--slim { padding-right: 0; }
.kbar__track--h .kbar__fill--slim b {
  position: absolute; right: calc(100% + 8px); color: var(--red);
}
.kbar__track--h .kbar__fill--off.kbar__fill--slim b { color: var(--red-ink); }
.kbar__track--a .kbar__fill--slim b {
  position: absolute; left: calc(100% + 8px); color: var(--ink);
}
.kbar__track--a .kbar__fill--off.kbar__fill--slim b { color: #565d66; }
@media (max-width: 560px) {
  .kbar { grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 8px; }
  .kbar__track { height: 24px; }
  .kbar__fill b { font-size: 0.8rem; }
  .kbar__track--h .kbar__fill { padding-left: 13px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%); }
  .kbar__track--a .kbar__fill { padding-right: 13px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%); }
  .kbar__label { font-size: 0.56rem; letter-spacing: 0.08em; }
}

/* --------------------------------------------- shooting: the ball gauges */
.bgauge { display: block; }
.shoot { padding-top: 6px; }
.shoot__hero {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 16px; align-items: center;
  padding: 16px 0 22px;
}
.shoot__team { display: flex; align-items: center; gap: 18px; min-width: 0; }
.shoot__team--a { flex-direction: row-reverse; text-align: right; }
.shoot__team > .bgauge { width: clamp(78px, 10vw, 118px); height: auto; flex: none; }
.shoot__nums { min-width: 0; }
.shoot__nums b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.shoot__nums b i { font-style: normal; font-size: 0.55em; margin-left: 2px; }
.shoot__team.is-top .shoot__nums b { color: var(--red); }
.shoot__team--a.is-top .shoot__nums b { color: var(--ink); }
.shoot__nums span {
  display: block; margin-top: 6px;
  font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.shoot__nums em {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-style: normal;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.shoot__team--a .shoot__nums em { justify-content: flex-end; }
.shoot__nums .flag { width: 17px; height: 12px; }
.shoot__cat {
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 5px 12px; white-space: nowrap;
}
.shoot__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.shoot__cell { background: var(--paper); padding: 14px 16px; }
.shoot__label {
  display: block; margin-bottom: 10px;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.shoot__row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.shoot__row > .bgauge { width: 26px; height: auto; flex: none; }
.shoot__row b {
  font-family: var(--display); font-weight: 800; font-size: 1.02rem;
  font-variant-numeric: tabular-nums; color: var(--muted);
  min-width: 58px;
}
.shoot__row b i { font-style: normal; font-size: 0.62em; margin-left: 1px; }
.shoot__row.is-top b { color: var(--red); }
.shoot__row--a.is-top b { color: var(--ink); }
.shoot__row span { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.shoot__row em {
  margin-left: auto; font-style: normal;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 700px) {
  .shoot__hero {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'cat cat' 'h a';
    row-gap: 14px;
  }
  .shoot__cat { grid-area: cat; justify-self: center; }
  .shoot__team { grid-area: h; flex-direction: column; align-items: flex-start; gap: 10px; }
  .shoot__team--a { grid-area: a; align-items: flex-end; }
  .shoot__team > .bgauge { width: 64px; }
}

/* --------------------------------------- situational: balance instruments */
.insts { border-top: 1px solid var(--rule); }
.inst {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px;
  gap: 14px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.inst__v {
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.inst__v--h { color: var(--red); }
.inst__v--a { color: var(--ink); }
.inst__v:last-child { text-align: right; }
.inst__mid { min-width: 0; }
.inst__label {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 0.74rem; color: var(--muted); margin-bottom: 6px; text-align: center;
}
.inst__label i { font-style: normal; color: var(--red); font-size: 0.6rem; }
/* Hairline with a centre notch; the beam deviates toward whoever has more,
   by their excess share — a balance needle, not a bar race. */
.inst__track { position: relative; display: block; height: 9px; }
.inst__track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
  background: var(--rule);
}
.inst__track::after {
  content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 9px;
  background: var(--muted);
}
.inst__beam { position: absolute; top: 3px; height: 3px; }
.inst__beam--h { right: 50%; background: var(--red); }
.inst__beam--a { left: 50%; background: var(--ink); }
/* The seam slash at the beam's tip. */
.inst__beam::after {
  content: ''; position: absolute; top: -3px; width: 2px; height: 9px;
  transform: skewX(-18deg); background: inherit;
}
.inst__beam--h::after { left: -2px; }
.inst__beam--a::after { right: -2px; }
@media (max-width: 560px) {
  .inst { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
  .inst__v { font-size: 0.9rem; }
  .inst__label { font-size: 0.68rem; }
}

/* ===========================================================================
   PUBLIC SITE ELEVATION — the score-field era across every page
   ---------------------------------------------------------------------------
   Consistency pass: the original "Negative Space" pages raised to the same
   register as the match surfaces. Free elements in dark grounds, colossal
   type, ghost numerals, hairline arcs — no structural changes.
   =========================================================================== */

/* ------------------------------------------------------------ home hero */
.hero__cedar {
  position: absolute; z-index: 0; pointer-events: none;
  top: -8%; bottom: -12%;
  left: clamp(-340px, -16vw, -120px);
  width: clamp(340px, 44vw, 660px);
  color: #0b0e11;   /* one breath above the ink ground: depth, not decoration */
  -webkit-mask-position: left center;
  mask-position: left center;
}
.hero__kicker {
  display: flex; align-items: center; gap: 12px;
}
.hero__kicker::before {
  content: ''; width: 34px; height: 2px; background: var(--red); flex: none;
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); letter-spacing: -0.025em; }
/* A soft red aura behind the mark — the ball sits IN the ground, not on it. */
.hero__ball::before {
  content: ''; position: absolute; inset: 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(238, 58, 68, 0.26), transparent 72%);
}
.hero__orbit {
  position: absolute; inset: -22%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: spin 70s linear infinite reverse;
}
.hero__orbit b {
  position: absolute; top: 50%; left: -4px;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px rgba(238, 58, 68, 0.8);
}
@media (prefers-reduced-motion: reduce) { .hero__orbit { animation: none; } }
.hero__stat b {
  font-variation-settings: 'wdth' 112;
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  font-variant-numeric: tabular-nums;
}
.hero__stat span { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; }

/* -------------------------------------------------- page heads: free arcs */
.phead { overflow: hidden; }
.phead .wrap { position: relative; z-index: 1; }
.phead__arcs {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
.phead__arcs path {
  fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.phead__arcs .phead__hair { stroke: rgba(255, 255, 255, 0.045); stroke-width: 1; }
.phead h1 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); font-variation-settings: var(--wider); }
.phead__lead { margin-top: 22px; }

/* ------------------------------------------------ pillars: ghost ordinals */
.pillars { counter-reset: pil; }
.pillar { counter-increment: pil; }
.pillar::after {
  content: counter(pil, decimal-leading-zero);
  position: absolute; top: 14px; right: 18px;
  font-family: var(--display); font-weight: 800;
  font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em;
  color: var(--paper-3);
  font-variant-numeric: tabular-nums;
}
.section--dark .pillar::after { color: var(--ink-3); }

/* --------------------------------------- presidents rail: numbered terms */
.term__idx {
  display: block; margin-bottom: 7px;
  font-style: normal;
  font-family: var(--display); font-weight: 800;
  font-size: 0.82rem; letter-spacing: 0.1em;
  color: #dedbd4;   /* ghost on the light section */
  font-variant-numeric: tabular-nums;
}
.term--current .term__idx { color: var(--red); }
.term:hover .term__idx { color: var(--muted); }
.term--current:hover .term__idx { color: var(--red); }

/* -------------------------------------------------- documents: ghost index */
.doc--n { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.doc__idx {
  font-family: var(--display); font-weight: 800;
  font-size: 1.6rem; line-height: 1; letter-spacing: -0.02em;
  color: var(--paper-3);
  font-variant-numeric: tabular-nums;
}
.section--dark .doc__idx { color: var(--ink-3); }
.doc { position: relative; }
.doc::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: transparent; transition: background 0.15s ease;
}
.doc:hover::before { background: var(--red); }
.doc h3 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); }
@media (max-width: 620px) {
  .doc--n { grid-template-columns: auto auto minmax(0, 1fr); }
  .doc--n .doc__meta { grid-column: 3; }
}

/* ------------------------------------------- document viewer: dark handoff */
.viewer { border: 1px solid var(--rule); box-shadow: 0 18px 44px rgba(5, 7, 8, 0.08); }
.viewer__handoff {
  background: var(--ink); color: #fff; border: 0;
  position: relative; overflow: hidden;
}
.viewer__handoff h3 { color: #fff; }
.viewer__handoff p { color: var(--muted-dark); }
.viewer__dl { color: var(--muted-dark); }
.viewer__dl:hover { color: #fff; }

/* ----------------------------------------------- gallery: the empty frames */
.gempty {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 20px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.gempty__frames {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(10px, 2vw, 18px);
  margin-bottom: clamp(24px, 4vw, 38px);
}
.gempty__frame {
  display: block; position: relative; overflow: hidden;
  width: min(190px, 26vw); aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.gempty__frame svg { width: 100%; height: 100%; display: block; }
.gempty__frame path {
  fill: none; stroke: var(--rule); stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.gempty__frame--cedar { background: var(--paper); }
.gempty__cedar {
  position: absolute; top: -12%; right: -26%;
  width: 96%; height: 124%;
  color: var(--paper-3);
  -webkit-mask-position: right center;
  mask-position: right center;
}
.gempty h3 { font-size: var(--t-h3); margin-bottom: 10px; }
.gempty p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* --------------------------------------------- contact & sponsor: the form */
.contact-grid form {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  padding: clamp(22px, 3vw, 36px);
}
.field input, .field textarea, .field select { padding: 14px 16px; }
.info { border-top: 1px solid var(--rule); padding-top: 22px; }
.info dd { padding-bottom: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.info dd:last-of-type { border-bottom: 0; margin-bottom: 0; }
/* The map stays full colour — it is information, not decoration. */
.map { border: 1px solid var(--rule); margin-top: 4px; }

/* ------------------------------------------------------------ cta band */
.cta h2 { font-variation-settings: var(--wider); }

/* ------------------------------------------------------------- timezone marks
   Every tip-off on this site is printed in Beirut time. Saying so beside the
   number is what stops an away game — 19:30 in Zhuji, 14:30 here — from
   reading as a mistake. Deliberately quiet: a footnote, not a label. */
.tz {
  font-style: normal;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
  white-space: nowrap;
}
.tz-alt {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted-dark);
  opacity: 0.8;
}