/* ==========================================================================
   WORLD 03 — BA FC
   A football club. Loud, condensed, black and yellow, diagonal cuts and
   shirt numbers. It should feel like a club shop and a matchday programme.
   ========================================================================== */
:root{
  --ink:#F2F2F0;
  --paper:#0C0C0D;
  --surface:#161618;
  --surface-2:#1F1F22;
  --muted:#9C9C9F;
  --line:rgba(255,255,255,.16);
  --brand:#FFD400;
  --brand-ink:#0C0C0D;
  --accent:#FFD400;
  --pitch:#0E6B3D;
  --red:#E4322B;
  --focus:#FFD400;
  --foot-bg:#000;
  --foot-fg:#F2F2F0;

  --font-display:"Anton", "Archivo", "Arial Narrow", Impact, sans-serif;
  --font-body:"Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  --header-h:72px;
}
h1,h2,h3,h4{ font-weight:400; text-transform:uppercase; letter-spacing:-.005em; line-height:.92; }
h1{ font-size:var(--step-7); }
h2{ font-size:var(--step-5); }
.eyebrow,.link-arrow,.card__kicker{ color:var(--brand); }
.site-header{ background:rgba(12,12,13,.86); border-bottom-color:rgba(255,255,255,.14); }
.site-header.is-stuck{ background:#0C0C0D; }
.drawer{ background:#0C0C0D; }
.worldbar{ background:#000; color:var(--ink); }
.worldmark{ font-family:var(--font-display); letter-spacing:.02em; font-size:1.35rem; }
.card,.panel{ background:var(--surface); }
.btn{ border-radius:var(--r-xs); text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.btn--solid{ --btn-bg:#fff; --btn-fg:#0C0C0D; }
.btn--ghost{ --btn-fg:var(--ink); }
.imgph{ --ph-a:#FFD400; --ph-b:#111; }
.nav__link{ text-transform:uppercase; font-weight:700; letter-spacing:.06em; }

/* --------------------------------------------------------- STRIPE MOTIF */
.stripes{
  height:6px;
  background:repeating-linear-gradient(90deg, var(--brand) 0 42px, #0C0C0D 42px 84px);
}

/* --------------------------------------------------------------- HERO */
.fhero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:min(86svh, 760px);
  display:flex; align-items:flex-end;
  padding-block:clamp(4rem,10vw,7rem) clamp(2rem,5vw,3.5rem);
}
.fhero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, #0C0C0D 3%, rgba(12,12,13,.68) 42%, rgba(12,12,13,.28) 100%);
}
.fhero__in{ position:relative; z-index:2; width:100%; }
.fhero h1{ font-size:var(--step-8); line-height:.86; margin-bottom:.6rem; }
.fhero h1 span{ color:var(--brand); display:block; }
.fhero .lede{ color:rgba(255,255,255,.84); max-width:48ch; }

/* ---------------------------------------------------------- MATCH CARDS */
.match{
  background:var(--surface); border:1px solid var(--line);
  border-left:5px solid var(--brand);
  padding:1.2rem 1.4rem;
  display:grid; gap:.7rem;
}
.match__meta{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
  font-size:var(--step--2); letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--muted);
}
.match__teams{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; }
.match__team{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-display); font-size:var(--step-1); text-transform:uppercase; }
.match__team--away{ justify-content:flex-end; text-align:right; }
.match__crest{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:linear-gradient(140deg,#2A2A2E,#151517);
  border:1px solid var(--line); display:grid; place-items:center;
  font-family:var(--font-body); font-size:.6rem; font-weight:800; color:var(--muted);
}
.match__crest--ba{ background:var(--brand); color:#0C0C0D; border-color:transparent; }
.match__score{
  font-family:var(--font-display); font-size:var(--step-3); letter-spacing:.02em;
  padding:.15rem .8rem; background:#0C0C0D; border:1px solid var(--line); border-radius:var(--r-xs);
  min-width:5.2rem; text-align:center;
}
.match__score--tbc{ font-size:var(--step-0); color:var(--muted); }

.nextfix{
  background:linear-gradient(120deg,var(--brand) 0%, #FFE566 100%);
  color:#0C0C0D; border-radius:var(--r-md);
  padding:clamp(1.5rem,4vw,2.6rem);
  display:grid; gap:1rem;
}
.nextfix h2{ font-size:var(--step-4); margin:0; }
.nextfix .ni{ color:#3A2F00; border-color:rgba(0,0,0,.4); background:rgba(0,0,0,.06); }
.countdown{ display:flex; gap:.7rem; flex-wrap:wrap; }
.countdown div{
  background:rgba(0,0,0,.1); border:1px solid rgba(0,0,0,.2); border-radius:var(--r-xs);
  padding:.6rem 1rem; text-align:center; min-width:72px;
}
.countdown b{ font-family:var(--font-display); font-size:var(--step-2); display:block; line-height:1; }
.countdown span{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; }

/* ------------------------------------------------------------- SQUAD */
.squad{ display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr)); border:1px solid var(--line); }
.player{
  background:var(--surface); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:280px; padding:1.1rem; text-decoration:none; color:inherit;
  transition:background var(--dur) var(--ease);
}
.player .imgph{ position:absolute; inset:0; border-radius:0; z-index:0; filter:grayscale(.35); }
.player::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(12,12,13,.95) 12%, rgba(12,12,13,.35) 60%, transparent);
}
.player > *{ position:relative; z-index:2; }
.player__num{
  position:absolute; top:.6rem; right:.9rem; z-index:2;
  font-family:var(--font-display); font-size:var(--step-5); line-height:1;
  color:var(--brand); opacity:.9;
}
.player__pos{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--brand); }
.player__name{ font-family:var(--font-display); font-size:var(--step-1); text-transform:uppercase; margin:.2rem 0 0; }
.player:hover{ background:var(--surface-2); }
.player:hover .imgph{ filter:grayscale(0); }

/* ------------------------------------------------------------ STORIES */
.newscard{
  display:block; text-decoration:none; color:inherit; position:relative;
  background:var(--surface); border:1px solid var(--line); overflow:hidden;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.newscard:hover{ transform:translateY(-4px); border-color:var(--brand); }
.newscard .imgph{ border-radius:0; }
.newscard__body{ padding:1.3rem; }
.newscard__tag{
  display:inline-block; background:var(--brand); color:#0C0C0D;
  font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:.28rem .6rem; margin-bottom:.7rem;
}
.newscard h3{ font-size:var(--step-1); margin:.2rem 0 .4rem; }

/* --------------------------------------------------------------- BANDS */
.band-yellow{ background:var(--brand); color:#0C0C0D; }
.band-yellow .eyebrow,.band-yellow .link-arrow{ color:#0C0C0D; }
.band-yellow .lede,.band-yellow p{ color:rgba(12,12,13,.82); }
.band-yellow .ni{ color:#3A2F00; border-color:rgba(0,0,0,.45); background:rgba(0,0,0,.06); }
.band-yellow .btn--ghost{ --btn-fg:#0C0C0D; border-color:rgba(0,0,0,.35); }
.band-yellow .stats{ background:rgba(0,0,0,.2); border-color:rgba(0,0,0,.25); }
.band-yellow .stat{ background:var(--brand); }
.band-yellow .stat__label{ color:rgba(12,12,13,.75); }
.band-surface{ background:var(--surface); }
.band-pitch{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 78px, transparent 78px 156px),
    var(--pitch);
  color:#fff;
}
.band-pitch .eyebrow{ color:var(--brand); }

/* ------------------------------------------------------------ GALLERY */
.gallery{ display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.gallery .imgph{ border-radius:0; }

/* ------------------------------------------------------------ CLUB TEXT */
.statement{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:var(--step-4); line-height:.98; max-width:20ch;
}
.kit-note{ font-size:var(--step--2); letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--muted); }

/* ------------------------------------------------------------ TABLE */
.ftable{ width:100%; border-collapse:collapse; font-size:var(--step--1); }
.ftable th{ text-align:left; padding:.7rem .8rem; border-bottom:2px solid var(--brand);
  font-size:var(--step--2); letter-spacing:.12em; text-transform:uppercase; font-weight:800; }
.ftable td{ padding:.8rem; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }