/* ==========================================================================
   Al Khaldiya SC — design system
   Full-bleed sections, contained text. Mobile-first, fluid type.
   ========================================================================== */

:root{
  --gold:#E8D44D;
  --gold-hi:#F5EAA0;
  --gold-deep:#B8912F;
  --gold-grad:linear-gradient(135deg,#B8912F,#F5EAA0 45%,#C9A227 70%,#F2E14C);

  --bg:#08080A;
  --bg-alt:#0C0C0E;
  --surface:#111113;
  --surface-2:#16161A;
  --line:rgba(255,255,255,.08);
  --line-gold:rgba(232,212,77,.22);

  --text:#EDEDEA;
  --muted:#9C978A;
  --dim:#6E6A5F;
  --faint:#4E4B45;

  --win:#8FD48A;
  --loss:#E08C8C;

  --cond:'Barlow Condensed',sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:1.25rem;          /* page gutter, grows at md */
  --maxw:1280px;
  --radius:14px;
  --radius-lg:20px;
  --header-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (min-width:768px){ :root{ --gut:2rem; --header-h:76px; } }
@media (min-width:1200px){ :root{ --gut:2.5rem; } }

/* --------------------------------------------------------------- reset --- */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
html[dir=rtl] body{ font-family:'Noto Kufi Arabic',var(--body); }
img{ max-width:100%; display:block; }
button,input,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:var(--gold); text-decoration:none; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ------------------------------------------------------------- layout --- */

/* The one rule that makes "full-bleed section, contained text" work:
   sections span the viewport, .wrap holds the readable column. */
.wrap{ width:min(100% - (var(--gut) * 2), var(--maxw)); margin-inline:auto; }
.wrap-narrow{ width:min(100% - (var(--gut) * 2), 860px); margin-inline:auto; }

section{ position:relative; }
.band{ padding-block:clamp(2.75rem,6vw,5rem); }
.band-alt{ background:var(--bg-alt); }
.band-line{ border-top:1px solid var(--line); }

/* -------------------------------------------------------------- type --- */

.kicker{
  font-family:var(--cond); font-size:.7rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep);
}
.display{
  font-family:var(--cond); font-weight:700; line-height:.95;
  letter-spacing:.01em; text-transform:uppercase;
  font-size:clamp(2.6rem,7.5vw,5.75rem); text-wrap:balance;
}
.h1{
  font-family:var(--cond); font-weight:700; line-height:1.02;
  letter-spacing:.02em; text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.4rem);
}
.h2{
  font-family:var(--cond); font-weight:700; line-height:1.05;
  letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
}
.h3{
  font-family:var(--cond); font-weight:600; line-height:1.12;
  letter-spacing:.04em; text-transform:uppercase;
  font-size:clamp(1.1rem,1.6vw,1.35rem);
}
.lede{ font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.6; color:var(--muted); max-width:62ch; }
.meta{ font-size:.8rem; color:var(--dim); }
.num{ font-family:var(--cond); font-weight:700; font-variant-numeric:tabular-nums; }

/* Numbers, scores and Latin names stay LTR inside Arabic copy.
   direction:ltr also resets text-align to "start" = left, which pulls block
   elements away from the RTL edge — so realign them, minus the centred cases. */
.ltr{ direction:ltr; unicode-bidi:isolate; }
html[dir=rtl] .ltr{ text-align:right; }
html[dir=rtl] .stats .ltr,
html[dir=rtl] .countdown .ltr,
html[dir=rtl] .center .ltr,
html[dir=rtl] .ltr.center{ text-align:center; }
html[dir=rtl] .kv .ltr{ text-align:left; }   /* value column sits at the row end */

/* Arabic is a connected script — the wide Latin tracking used all over the UI
   (.12em–.3em) pulls the joins apart. Zero it in RTL, then restore it for the
   .ltr runs, which are Latin and still want their letterspacing. */
html[dir=rtl] *{ letter-spacing:0; }
html[dir=rtl] .ltr{ letter-spacing:.04em; }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:clamp(1.25rem,2.5vw,2rem);
}
.section-head .link{
  font-family:var(--cond); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  white-space:nowrap; padding-bottom:.2rem; border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.section-head .link:hover{ border-color:var(--gold); }

/* ------------------------------------------------------------ buttons --- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--cond); font-weight:700; font-size:.95rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1rem 1.9rem; border-radius:999px; min-height:48px;
  transition:transform .18s var(--ease), filter .18s var(--ease), background-color .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-gold{ background:var(--gold-grad); color:#14120A; }
.btn-gold:hover{ filter:brightness(1.08); }
.btn-ghost{ border:1px solid var(--line-gold); color:var(--gold); }
.btn-ghost:hover{ background:rgba(232,212,77,.09); }
.btn-quiet{ border:1px solid var(--line); color:var(--muted); }
.btn-quiet:hover{ border-color:rgba(255,255,255,.22); color:var(--text); }
.btn-block{ display:flex; width:100%; }
.btn-sm{ padding:.6rem 1.1rem; font-size:.78rem; min-height:38px; letter-spacing:.14em; }

.pill{
  font-family:var(--cond); font-weight:600; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.55rem 1.05rem; border-radius:999px; min-height:40px;
  border:1px solid var(--line); color:var(--dim); white-space:nowrap;
  display:inline-flex; align-items:center;
  transition:all .18s var(--ease);
}
.pill:hover{ color:var(--muted); border-color:rgba(255,255,255,.2); }
.pill[aria-pressed=true]{ border-color:rgba(232,212,77,.55); background:rgba(232,212,77,.12); color:var(--gold); }

/* ------------------------------------------------------------- header --- */

/* Header and tabbar sit ABOVE the drawer so the burger and "More" stay
   tappable to close it — otherwise the drawer traps you on touch devices. */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,10,.72); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.at-top{ background:transparent; border-color:transparent; }
.site-header .bar{
  display:flex; align-items:center; gap:1rem; height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand img{ height:38px; width:auto; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-txt b{
  font-family:var(--cond); font-weight:700; font-size:1.05rem;
  letter-spacing:.12em; text-transform:uppercase; color:#F0EDE2;
}
.brand-txt span{
  font-family:var(--cond); font-weight:500; font-size:.6rem; margin-top:.25rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--dim);
}
@media (max-width:400px){ .brand-txt span{ display:none; } }

.nav-desktop{ display:none; }
.header-actions{ margin-inline-start:auto; display:flex; align-items:center; gap:.5rem; }

.lang-btn{
  font-family:var(--cond); font-weight:600; font-size:.8rem; letter-spacing:.14em;
  border:1px solid var(--line-gold); color:var(--gold);
  border-radius:999px; padding:.5rem .85rem; min-height:40px; min-width:44px;
  transition:background-color .18s var(--ease);
}
.lang-btn:hover{ background:rgba(232,212,77,.1); }

.burger{
  width:44px; height:44px; border:1px solid var(--line); border-radius:999px;
  display:grid; place-content:center; gap:4px;
}
.burger span{ display:block; width:17px; height:1.5px; background:var(--text); transition:transform .25s var(--ease), opacity .2s; }
.burger span:last-child{ width:11px; background:var(--gold); justify-self:start; }
.burger[aria-expanded=true] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded=true] span:nth-child(2){ opacity:0; }
.burger[aria-expanded=true] span:nth-child(3){ width:17px; transform:translateY(-5.5px) rotate(-45deg); }

.header-rule{
  height:2px;
  background:linear-gradient(90deg,#7A5E1B,#F5EAA0,#C9A227,#F2E14C,#7A5E1B);
  background-size:200% 100%; animation:shine 7s linear infinite;
}
@keyframes shine{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(6,6,8,.97); backdrop-filter:blur(8px);
  padding:calc(var(--header-h) + 1.5rem) var(--gut) 2rem;
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer.open{ display:block; animation:fade .18s var(--ease); }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.drawer a{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:1.05rem .25rem; border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--cond); font-weight:600; font-size:1.55rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text);
  animation:riseIn .32s var(--ease) both;
}
.drawer a small{ font-family:var(--cond); font-size:.7rem; letter-spacing:.2em; color:var(--faint); }
.drawer a[aria-current=page]{ color:var(--gold); }
.drawer .btn{ margin-top:1.5rem; }
@keyframes riseIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

@media (min-width:1080px){
  .nav-desktop{ display:flex; align-items:center; gap:clamp(.9rem,1.5vw,1.6rem); margin-inline-start:clamp(1rem,3vw,2.5rem); }
  .nav-desktop a{
    font-family:var(--cond); font-weight:600; font-size:.83rem;
    letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
    white-space:nowrap; padding-block:.4rem; position:relative;
    transition:color .18s var(--ease);
  }
  .nav-desktop a:hover{ color:var(--text); }
  .nav-desktop a::after{
    content:''; position:absolute; inset-inline:0; bottom:-2px; height:2px;
    background:var(--gold); transform:scaleX(0); transition:transform .22s var(--ease);
  }
  .nav-desktop a[aria-current=page]{ color:var(--gold); }
  .nav-desktop a[aria-current=page]::after{ transform:scaleX(1); }
  .burger{ display:none; }
  .header-cta{ display:inline-flex !important; }
}
.header-cta{ display:none; }

/* ------------------------------------------------------------- tabbar --- */

/* Fixed bottom tab bar on phones/tablets; the desktop nav replaces it at 1080px.
   --tabbar-h feeds the body padding so nothing hides behind it. */
:root{ --tabbar-h:60px; }

.tabbar{
  position:fixed; inset-inline:0; bottom:0; z-index:95;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:rgba(10,10,12,.94); backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid var(--line-gold);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a,.tabbar button{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--tabbar-h); padding:.5rem .25rem;
  font-family:var(--cond); font-weight:600; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  border-top:2px solid transparent; margin-top:-1px;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.tabbar .on{ color:var(--gold); border-top-color:var(--gold); }
.tabbar a:active,.tabbar button:active{ background:rgba(232,212,77,.06); }

@media (max-width:1079px){
  body{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  /* Keep the store's sticky total clear of the bar. */
  .bag-bar{ bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .75rem); }
  .drawer{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 2rem); }
}
@media (min-width:1080px){ .tabbar{ display:none; } }

/* --------------------------------------------------------------- hero --- */

.hero{
  position:relative; min-height:clamp(520px,88svh,880px);
  display:flex; align-items:flex-end;
  margin-top:calc(var(--header-h) * -1);   /* photo runs under the header */
  padding-top:var(--header-h);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  animation:heroIn 1.4s var(--ease) both;
}
@keyframes heroIn{ from{ transform:scale(1.07); opacity:0 } to{ transform:none; opacity:1 } }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(8,8,10,.72) 0%,rgba(8,8,10,.18) 30%,rgba(8,8,10,.72) 72%,var(--bg) 100%),
    linear-gradient(90deg,rgba(8,8,10,.8) 0%,rgba(8,8,10,.15) 60%);
}
html[dir=rtl] .hero-media::after{
  background:
    linear-gradient(180deg,rgba(8,8,10,.72) 0%,rgba(8,8,10,.18) 30%,rgba(8,8,10,.72) 72%,var(--bg) 100%),
    linear-gradient(270deg,rgba(8,8,10,.8) 0%,rgba(8,8,10,.15) 60%);
}
.hero-body{ position:relative; z-index:2; padding-block:clamp(2.5rem,6vw,4.5rem); width:100%; }
/* Section eyebrows stay small, but the hero one sits under a ~92px headline
   and reads undersized at the default .7rem — scale it with the display type. */
.hero-body .kicker{
  font-size:clamp(.82rem,1.15vw,1.15rem);
  letter-spacing:.26em; color:var(--gold);
}
.hero-body .display{ margin-top:.75rem; }
.hero-body .display em{ font-style:normal; color:var(--gold); display:block; }
.hero-body .lede{ margin-top:1.1rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.5rem,3vw,2.25rem); }
.hero-cta .btn{ flex:1 1 auto; min-width:180px; }
@media (min-width:640px){ .hero-cta .btn{ flex:0 0 auto; } }

/* honours ribbon under the hero copy */
.ribbon{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.ribbon span{
  font-family:var(--cond); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-gold); border-radius:999px; padding:.45rem .85rem; color:#D8D2C3;
}
.ribbon span b{ color:var(--gold); font-weight:600; }

/* Page hero for interior pages. The header is sticky, so it still takes up
   flow space — do NOT add --header-h here or the gap doubles. */
.page-head{
  padding-top:clamp(2rem,5vw,3.25rem);
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
  position:relative; overflow:hidden;
}
.page-head::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(90% 130% at 15% 0%,rgba(232,212,77,.10) 0%,transparent 60%);
  pointer-events:none;
}
html[dir=rtl] .page-head::before{ background:radial-gradient(90% 130% at 85% 0%,rgba(232,212,77,.10) 0%,transparent 60%); }
.page-head .wrap,.page-head .wrap-narrow{ position:relative; }
.page-head .lede{ margin-top:.85rem; }

/* ----------------------------------------------------- countdown card --- */

.next-match{
  position:relative; z-index:3;
  margin-top:clamp(-3rem,-4vw,-2rem);
}
.next-card{
  background:linear-gradient(160deg,#16150F,#0E0E10 70%);
  border:1px solid var(--line-gold); border-radius:var(--radius-lg);
  padding:clamp(1.25rem,3vw,2rem);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  display:grid; gap:1.5rem;
}
@media (min-width:900px){
  .next-card{ grid-template-columns:1fr auto; align-items:center; gap:2.5rem; }
}
.fixture{ display:flex; align-items:center; justify-content:center; gap:clamp(1rem,3vw,2.5rem); }
.fixture .side{ display:flex; flex-direction:column; align-items:center; gap:.6rem; flex:1; text-align:center; }
.fixture .crest{
  width:clamp(48px,7vw,66px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--line-gold); display:grid; place-content:center;
  font-family:var(--cond); font-weight:700; font-size:clamp(.85rem,1.4vw,1.05rem); color:var(--gold);
}
.fixture .side.away .crest{ border-color:var(--line); color:var(--muted); }
.fixture .vs{ font-family:var(--cond); font-size:.85rem; letter-spacing:.24em; color:var(--dim); }

.countdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
@media (min-width:900px){ .countdown{ min-width:400px; } }
.countdown div{
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:12px; padding:.75rem .3rem; text-align:center;
}
.countdown b{
  display:block; font-family:var(--cond); font-weight:700; color:#F2E14C;
  font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1; font-variant-numeric:tabular-nums;
}
.countdown small{
  display:block; margin-top:.4rem; font-family:var(--cond);
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}

/* --------------------------------------------------------------- grids --- */

.grid{ display:grid; gap:clamp(.75rem,1.5vw,1.15rem); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-auto-220{ grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); }
.g-auto-260{ grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); }
.g-auto-300{ grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); }
.g-auto-340{ grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); }

/* News tops out at three across — four makes the headlines wrap badly. */
.g-news{ grid-template-columns:1fr; }
@media (min-width:620px){ .g-news{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .g-news{ grid-template-columns:repeat(3,1fr); } }

/* Two-column band. Below 1000px the halves stack and need their own gap. */
.split-results{ display:grid; gap:clamp(2.25rem,5vw,3.5rem); align-items:start; }
@media (min-width:1000px){
  .split-results{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
}

/* --------------------------------------------------------------- cards --- */

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
a.card:hover,button.card:hover{ border-color:rgba(232,212,77,.35); transform:translateY(-2px); }
.card-pad{ padding:clamp(.9rem,1.6vw,1.2rem); }

.result-card{ padding:clamp(.9rem,1.6vw,1.15rem); display:block; }
.result-card .top{ display:flex; justify-content:space-between; gap:.75rem; align-items:baseline; }
.result-card .comp{ font-family:var(--cond); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }
.result-card .row{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-top:.7rem; }
.result-card .opp{ font-family:var(--cond); font-size:clamp(1rem,1.5vw,1.2rem); letter-spacing:.03em; text-transform:uppercase; }
.result-card .score{ font-family:var(--cond); font-weight:700; font-size:clamp(1.15rem,1.8vw,1.45rem); white-space:nowrap; }
.score.w{ color:var(--win); } .score.l{ color:var(--loss); } .score.d{ color:#C9C4B8; }

/* league table */
.table{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.table .thead,.table .trow{
  display:grid; grid-template-columns:2rem 1fr 2.2rem 2.6rem; gap:.5rem;
  align-items:center; padding:.7rem .9rem;
}
.table.full .thead,.table.full .trow{ grid-template-columns:2rem 1fr 2.2rem 2.2rem 2.2rem 2.2rem 2.8rem; }
.table .thead{
  font-family:var(--cond); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); background:rgba(255,255,255,.02); border-bottom:1px solid var(--line);
}
.table .trow{ border-bottom:1px solid rgba(255,255,255,.05); border-inline-start:2px solid transparent; }
.table .trow:last-child{ border-bottom:0; }
.table .trow.me{ background:rgba(232,212,77,.07); color:var(--gold); }
.table .trow.me .team{ font-weight:700; }
.table .trow.ucl{ border-inline-start-color:var(--gold-deep); }
.table .trow.rel{ border-inline-start-color:#5A2E2E; }
.table .pos{ font-family:var(--cond); color:var(--dim); }
.table .team{ font-size:.92rem; }
.table .st{ text-align:center; font-size:.85rem; color:var(--muted); }
.table .pts{ text-align:center; font-family:var(--cond); font-weight:700; font-size:1rem; color:var(--text); }
.table-scroll{ overflow-x:auto; }
@media (max-width:520px){ .table.full{ min-width:460px; } }

/* news */
.news-card{ display:flex; flex-direction:column; height:100%; }
.news-card .shot{ aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); }
.news-card .shot img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-card:hover .shot img{ transform:scale(1.05); }
.news-card .body{ padding:clamp(.9rem,1.6vw,1.15rem); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.news-card .tagline{ font-family:var(--cond); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); }
.news-card h3{ text-wrap:pretty; }
.news-card p{ font-size:.9rem; color:var(--muted); }
.news-card .when{ margin-top:auto; padding-top:.5rem; font-size:.75rem; color:var(--faint); }

/* Stand-in for an article without a photograph. A crest debossed into an olive
   wash — reads as a designed panel rather than a missing image. */
.crest-panel{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 100% at 20% 0%,rgba(232,212,77,.14),transparent 60%),
    linear-gradient(155deg,#423C24 0%,#2A2718 45%,#17160F 100%);
  display:grid; place-items:center;
}
.crest-panel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,8,10,.55));
}
.crest-panel img{
  width:46%; max-width:130px; height:auto;
  mix-blend-mode:multiply; opacity:.92;
  transform:rotate(-4deg);
}

/* feature split (store / academy) */
.feature{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  min-height:260px; display:flex; align-items:flex-end; padding:clamp(1.25rem,2.5vw,2rem);
  border:1px solid var(--line);
}
.feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.feature:hover img{ transform:scale(1.05); }
.feature::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.25),rgba(8,8,10,.9));
}
.feature .fc{ position:relative; z-index:2; }
.feature p{ color:var(--muted); font-size:.92rem; margin-top:.4rem; max-width:40ch; }
.feature .go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-family:var(--cond); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }

/* stat strip */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media (min-width:720px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stats div{ background:var(--bg); padding:clamp(1.25rem,3vw,2.25rem) 1rem; text-align:center; }
.stats b{ display:block; font-family:var(--cond); font-weight:700; font-size:clamp(2rem,4.5vw,3.25rem); line-height:1; color:var(--gold); }
.stats small{ display:block; margin-top:.5rem; font-family:var(--cond); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

/* partners */
.partner-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media (min-width:560px){ .partner-row{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .partner-row{ grid-template-columns:repeat(6,1fr); } }
.partner-row div{
  border:1px solid var(--line); border-radius:12px; min-height:84px;
  display:grid; place-content:center; text-align:center; gap:.35rem; padding:.75rem;
  transition:border-color .2s var(--ease);
}
.partner-row div:hover{ border-color:var(--line-gold); }
.partner-row b{ font-family:var(--cond); font-weight:600; font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.partner-row small{ font-family:var(--cond); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }

/* squad */
/* No player photography yet, so the shirt number carries the card:
   an oversized outlined numeral on a raked gold wash. */
.player{ display:flex; flex-direction:column; }
.player .shot{
  aspect-ratio:4/5; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(115deg,rgba(232,212,77,.05) 0 2px,transparent 2px 13px),
    linear-gradient(165deg,#221F13 0%,#131318 60%,#0E0E11 100%);
  display:grid; place-items:center;
}
.player .shot .no{
  font-family:var(--cond); font-weight:700; line-height:.8;
  font-size:clamp(4.5rem,11vw,7rem);
  color:transparent; -webkit-text-stroke:1.5px rgba(232,212,77,.55);
  transition:-webkit-text-stroke-color .3s var(--ease), color .3s var(--ease);
}
.player:hover .shot .no{ color:rgba(232,212,77,.12); -webkit-text-stroke-color:rgba(232,212,77,.85); }
.player .body{ padding:.85rem .9rem 1rem; }
.player .body b{ display:block; font-family:var(--cond); font-weight:600; font-size:1.02rem; letter-spacing:.03em; text-transform:uppercase; line-height:1.15; }
.player .body small{ display:block; margin-top:.35rem; font-family:var(--cond); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }

/* filters row */
.filters{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.35rem; margin-bottom:1.5rem; scrollbar-width:none; }
.filters::-webkit-scrollbar{ display:none; }

/* list rows (fixtures, stands, plans, academy, contact) */
.row-card{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:clamp(.9rem,1.8vw,1.25rem); width:100%; text-align:start; }
.row-card .rc-main b{ display:block; font-family:var(--cond); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.25rem); letter-spacing:.05em; text-transform:uppercase; }
.row-card .rc-main small{ display:block; margin-top:.3rem; font-size:.8rem; color:var(--dim); }
.row-card .rc-side{ font-family:var(--cond); font-weight:700; font-size:1.15rem; color:var(--gold); white-space:nowrap; }
.row-card[aria-pressed=true]{ border-color:rgba(232,212,77,.45); background:rgba(232,212,77,.05); }

/* forms */
.field{ display:block; }
.field span{ display:block; font-family:var(--cond); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:.4rem; }
.field input{
  width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:.85rem 1rem; min-height:48px; color:var(--text); font-size:1rem;
  transition:border-color .18s var(--ease);
}
.field input::placeholder{ color:var(--faint); }
.field input:focus{ outline:none; border-color:rgba(232,212,77,.5); }

/* stepper */
.steps{ display:flex; gap:.4rem; margin-bottom:1.75rem; }
.steps i{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.1); transition:background-color .3s var(--ease); }
.steps i.on{ background:var(--gold); }

/* ticket / confirmation */
.ticket-stub{
  background:var(--surface); border:1px solid var(--line-gold);
  border-radius:var(--radius-lg); overflow:hidden; margin-top:1.5rem;
}
.ticket-stub .tsb{ padding:clamp(1rem,2.5vw,1.5rem); }
.ticket-stub .perf{ border-top:1px dashed rgba(232,212,77,.3); position:relative; }
.ticket-stub .qr{
  height:120px; margin:1.25rem auto; width:120px;
  background:
    repeating-linear-gradient(90deg,#EDEDEA 0 6px,transparent 6px 12px),
    repeating-linear-gradient(0deg,#EDEDEA 0 6px,transparent 6px 12px);
  background-color:#14120A; border-radius:6px;
}
.confirm-mark{
  width:64px; aspect-ratio:1; border-radius:50%; margin-inline:auto;
  background:var(--gold-grad); display:grid; place-content:center;
  color:#14120A; font-size:1.85rem; font-weight:700;
  animation:pop .45s var(--ease) both;
}
@keyframes pop{ from{ transform:scale(.6); opacity:0 } to{ transform:none; opacity:1 } }

.kv{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; font-size:.92rem; }
.kv + .kv{ border-top:1px solid rgba(255,255,255,.05); }
.kv dt{ color:var(--dim); }
.kv dd{ margin:0; text-align:end; }

.qty{ display:flex; align-items:center; gap:.35rem; }
.qty button{
  width:42px; height:42px; border:1px solid var(--line); border-radius:10px;
  font-size:1.2rem; color:var(--text); display:grid; place-content:center;
}
.qty button:hover{ border-color:var(--line-gold); color:var(--gold); }
.qty b{ min-width:2.5rem; text-align:center; font-family:var(--cond); font-size:1.3rem; }

/* article */
.article-hero{ aspect-ratio:16/9; max-height:60vh; overflow:hidden; }
.article-hero img{ width:100%; height:100%; object-fit:cover; }
.article-body p{ font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.75; color:#C4BFB4; }
.article-body p + p{ margin-top:1.1rem; }
.article-body p:first-child{ color:var(--text); font-size:clamp(1.08rem,1.4vw,1.25rem); }

/* pitch map */
.pitch{
  aspect-ratio:1.55; border:1px dashed rgba(232,212,77,.28); border-radius:12px;
  position:relative; background:
    radial-gradient(60% 80% at 50% 50%,rgba(232,212,77,.05),transparent 70%),
    var(--surface);
  display:grid; place-content:center;
}
.pitch::before{
  content:''; position:absolute; inset:18%; border:1px solid rgba(255,255,255,.09); border-radius:4px;
}
.pitch span{ font-family:var(--cond); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

/* shop */
.product .shot{ aspect-ratio:1; background:linear-gradient(160deg,#1B1A14,#101012); display:grid; place-content:center; }
.product .shot .kit{
  width:58%; aspect-ratio:1; border-radius:14px;
  background:linear-gradient(135deg,rgba(232,212,77,.9),rgba(184,145,47,.55));
  mask:radial-gradient(circle at 50% 12%,transparent 12%,#000 13%);
}
.bag-bar{
  position:sticky; bottom:0; z-index:40; margin-top:1.5rem;
  background:rgba(12,12,14,.94); backdrop-filter:blur(12px);
  border:1px solid var(--line-gold); border-radius:var(--radius);
  padding:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

/* footer */
.site-footer{ border-top:1px solid var(--line); background:var(--bg-alt); padding-block:clamp(2.5rem,5vw,4rem) 2rem; margin-top:clamp(3rem,6vw,5rem); }
.footer-grid{ display:grid; gap:2rem; }
@media (min-width:720px){ .footer-grid{ grid-template-columns:1.5fr 1fr 1fr; gap:3rem; } }
.footer-grid h4{ font-family:var(--cond); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); margin-bottom:.9rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer-grid a{ color:var(--muted); font-size:.92rem; }
.footer-grid a:hover{ color:var(--gold); }
.footer-note{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between; color:var(--faint); font-size:.8rem; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* utility */
.stack{ display:grid; gap:clamp(.75rem,1.5vw,1rem); }
.mt-1{ margin-top:.75rem } .mt-2{ margin-top:1.25rem } .mt-3{ margin-top:2rem }
.center{ text-align:center }
.gold{ color:var(--gold) }
.muted{ color:var(--muted) }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.scroll-x{ display:flex; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; scrollbar-width:none; }
.scroll-x::-webkit-scrollbar{ display:none; }
.scroll-x > *{ scroll-snap-align:start; flex:0 0 min(78%,290px); }
@media (min-width:900px){
  .scroll-x{ display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; }
  .scroll-x > *{ flex:initial; }
}