/* Saudi Women's Football — hub landing, v3
   ============================================================================
   Built on the one asset the federation supplied: the SAFF brand gradient.
   Everything on this page is derived from it and nothing is invented.

   The gradient was measured off the supplied artwork rather than eyeballed.
   Sampled on a 9x9 grid with the logo masked out, it resolves to a clean
   four-corner mesh:

       top-left  #87393F   top-right #4F709D
       bot-left  #1E0236   bot-right #14104B

   and a vertical falloff that is NOT linear — it holds near full strength for
   the first quarter, falls away between 0.35 and 0.75, and is flat black-purple
   for the last eighth. Those measured stops are in --ramp below, so the warm
   and cool ends sit at the same height on the page as they do in the artwork.

   The artwork also carries a low-poly facet field at about ±5 levels of
   luminance. That is reproduced as assets/brand/facets.svg — 660 jittered
   triangles at 0.4–7.5% alpha — rather than as a raster tile, so it scales to
   any viewport without a seam and costs ~15 KB over the wire.

   Why this looks nothing like v1 or v2: the gradient IS the identity, so the
   page carries no third colour of its own. Every surface is glass — white at
   5–9% with a hairline — and the ground reads through all of it. The league
   colour coding is pulled back into the gradient too: the Premier League takes
   the warm end, the U-17 league the cool one. Nothing neon, nothing on paper.

   Type: 29LT Bukra, the family the brand book publishes. Four weights, no
   Black, so nothing here goes above 700.                                     */

@font-face{font-family:Bukra;src:url(assets/fonts/29LTBukra-Light-Crg3LNJn.otf) format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:Bukra;src:url(assets/fonts/29LTBukra-DVLtNXDS.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Bukra;src:url(assets/fonts/29LTBukra-Medium-Bf6wkqex.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:Bukra;src:url(assets/fonts/29LTBukra-Bold-BITvp0ab.otf) format("opentype");font-weight:700;font-display:swap}

:root{
  /* the four measured mesh corners, verbatim */
  --g-tl:#87393F; --g-tr:#4F709D; --g-bl:#1E0236; --g-br:#14104B;

  /* The artwork's vertical falloff was measured too — full strength to 0.25,
     away between 0.35 and 0.75, flat for the last eighth — but nothing uses it:
     the ground reads left-to-right, not top-to-bottom, so the field stays
     constant at every height. The ground rule below says why. */

  /* the two ends of the gradient, lifted to hold type on the deep ground.
     #D98A8F is 6.9:1 and #9DC2E8 is 9.8:1 against the page floor — both clear
     AA for body text, not just for large. The raw corner colours are far too
     dark to set type in and are only ever used as fields. */
  --ember:#87393F; --ember-lt:#D98A8F;
  --steel:#4F709D; --steel-lt:#9DC2E8;
  /* Both ends of the federation gradient are spoken for, so the third league
     takes the violet its own key visual is built on — #63237D sampled off the
     artwork, lifted to #C9A4E8 (8.9:1 on the floor, between the other two).
     The crimson in that key visual is too close to the warm end to code a
     league with; it stays in the artwork, directly above the card's rule. */
  --orchid:#63237D; --orchid-lt:#C9A4E8;

  /* grounds */
  --deep:#17063E; --deep2:#14104B; --floor:#12093A;

  /* glass — every panel on the page is one of these, never a solid */
  --glass:rgba(255,255,255,.055);
  --glass2:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.14);
  --line2:rgba(255,255,255,.28);

  /* ink */
  --white:#fff;
  --ink-md:rgba(255,255,255,.76);
  --ink-lo:rgba(255,255,255,.56);

  --pad:clamp(20px,5vw,120px); --maxw:1800px;
  --r:8px;
  /* one facet cut, reused: the corner clip that echoes the low-poly field */
  --cut:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section,footer{scroll-margin-top:112px}

/* iOS Safari paints the overscroll gutter with the canvas colour, and the
   canvas is propagated from <html>. Both ends of this page are deep, so the
   gutter is invisible at either end. It has to stay on <html>: give <body> a
   background and it paints a real background box, which lands ABOVE the
   fixed ground layer and the ground disappears. */
html{background:var(--floor)}
body{
  margin:0;background:transparent;
  font-family:Bukra,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--white);-webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------------ ground
   The ground is a fixed, viewport-sized layer rather than a background on
   <body>. A body background sized `cover` is sized to the whole DOCUMENT, so
   on a phone — where this page is ten screens tall — it gets blown up about 4x
   and the facets go to mush. `background-attachment:fixed` sizes to the
   viewport but iOS Safari will not scroll it properly. A fixed pseudo element
   is the only thing that is both viewport-sized and stable on iOS.

   The two ends of the brand gradient split LEFT and RIGHT — ember one side,
   steel the other — at every screen size, the same arrangement as the bar at
   the top of the page. It is a pure 90deg ramp over a flat base: no tilt and
   no vertical component, so the field is identical at every height and a line
   of body copy sits on the same ground on the first screen and on the last.
   Only the reach changes with the viewport, never the composition.

   It took three goes to get here, and the two dead ends are worth recording.
   Two radial pools anchored to the top corners trace the artwork more closely,
   but they size themselves against the viewport WIDTH: on a 375px phone they
   shrank to a third of their desktop reach, and everything below the hero was
   left on the base alone — three deep purples within twenty levels of each
   other, which read as flat and is what the client sent back. Running the two
   ends top-to-bottom instead restored the colour and cost the reading: a
   column of copy crossed two different fields on its way down and the eye
   re-adjusted at every paragraph. The horizontal ramp is the one arrangement
   that holds the colour and the reading at the same time.

   Alphas are set by the text, not by taste, and the steel end is the binding
   constraint: #4F709D is far lighter than the maroon, so it always runs about
   a quarter weaker than the ember end. At these values the worst case on the
   page — muted ink on a card over either edge — measures 4.58:1 against the
   desktop card fill and 4.81:1 against the phone's. Both clear of AA, so the
   inks need no lightening at any width.                                     */
body::before{
  content:"";position:fixed;inset:0;z-index:-10;pointer-events:none;
  background:
    url(assets/brand/facets.svg) center/cover no-repeat,
    linear-gradient(90deg,
      rgba(135,57,63,.46) 0%,
      rgba(135,57,63,.27) 22%,
      rgba(135,57,63,.08) 41%,
      rgba(79,112,157,.08) 59%,
      rgba(79,112,157,.21) 78%,
      rgba(79,112,157,.35) 100%),
    #1B0940;
}
/* The ground carries the identity, and on a phone there is very little of it
   left to see: the cards go full width, so all that shows is the gutter and
   the gaps between them. Thinning the fill by two points and letting the
   hairline do more of the work gives the gradient back a good third of the
   screen. */
@media (max-width:900px){
  .card,.lcard,.vscard,.faq details{background:rgba(255,255,255,.032)}
  .faq details[open]{background:rgba(255,255,255,.06)}
}

img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;width:auto;height:auto;clip:auto;margin:0;
  inset-inline-start:8px;top:8px;background:var(--white);color:var(--deep);
  padding:10px 16px;z-index:99;text-decoration:none;font-weight:700}

/* ------------------------------------------------------------------ type */
h1,h2,h3,h4,h5{margin:0;letter-spacing:-.01em;line-height:.96}
.h{font-size:clamp(28px,3vw,46px);text-transform:uppercase}
/* The section sub-line is no longer a filled chip. On glass a filled chip
   reads as a second, competing panel; a hairline rule carries the same job
   and lets the ground through, which is the whole point of this build. */
.sub{display:inline-block;margin:14px 0 0;padding:0 0 0 16px;
  border-inline-start:2px solid var(--ember-lt);
  color:var(--ink-md);font-size:clamp(13px,1vw,20px);font-weight:400;
  text-transform:uppercase;letter-spacing:.06em}
.sec{padding:clamp(38px,4.4vw,72px) 0}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,1.6vw,26px);backdrop-filter:blur(10px)}

/* Nothing above 700 — Bukra Black is not in the brand book. */
h1,h2,h3,h4,h5,.btn,.whynum b,.whynum em,
.gs figcaption b,.bt b,.tonight li b,.tonight li div,
.lcta .from,.final h2,.hero h1,.kicker,
.fgrid h5,.mark b,.cmp thead th,.cmp td,.faq summary{font-weight:700}

/* --------------------------------------------------------------- buttons
   White on the gradient is the federation's own contrast pair — the supplied
   artwork sets the whole lockup in white on exactly this field — and it is the
   only fill that holds at the same strength over the warm end, the cool end
   and the deep floor. A coloured button would only work on one third of it. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--white);color:var(--deep);text-decoration:none;
  padding:14px 26px;border-radius:4px;font-size:19px;letter-spacing:.01em;
  text-transform:uppercase;transition:transform .12s,box-shadow .16s,background .12s}
.btn:hover{background:#fff;transform:translateY(-1px);
  box-shadow:0 8px 26px -10px rgba(0,0,0,.75),0 0 0 3px rgba(255,255,255,.16)}
.btn:focus-visible{outline:3px solid var(--ember-lt);outline-offset:3px}
.btn-lg{padding:20px 34px;font-size:clamp(19px,1.5vw,26px)}
.btn-sm{padding:10px 20px;font-size:17px}
.btn-o{background:none;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn-o:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px var(--white)}

/* ------------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:clamp(14px,2vw,52px);
  padding:0 var(--pad);height:96px;background:rgba(18,9,58,.72);
  backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:13px;text-decoration:none;line-height:1}
/* The lockup's ink is not centred inside its own box: the crest fills the full
   height while the SAFF wordmark and its two sub-lines are inset, sitting a
   little low. Centring the BOXES leaves a big gap above the SAFF type and a
   small one below, which reads as the logo hanging off the bottom of our own
   two lines. So the crest tracks the two-line block and is lifted by a share
   of its own height until the two type blocks share a centre line. */
.mark .crest{height:clamp(32px,calc(2.32vw + 3px),40px);width:auto;flex:0 0 auto;
  transform:translateY(-3.4%)}
.mark .word{display:flex;flex-direction:column;gap:3px;padding-inline-start:13px;
  border-inline-start:1px solid var(--line2)}
footer .mark .crest{height:44px}
@media (max-width:560px){.mark .word{display:none}
  .mark .crest{height:34px;transform:none}}
/* 22px and 16px are the two sizes where this font's optical overshoot on the
   round caps (O S C G, drawn 16/1000 em taller than the flat ones) lands on
   the wrong side of a pixel boundary at 1x, so O and S rasterise a whole pixel
   shorter than H and E and the word looks like it dips. 21 and 17 land clean.
   Retina never showed it; most of our desktop traffic is not retina. */
.mark b{font-size:clamp(15px,1.4vw,21px);text-transform:uppercase;letter-spacing:-.01em}
.mark .word>span{font-weight:500;font-size:clamp(10px,.75vw,13px);color:var(--ember-lt);
  text-transform:uppercase;letter-spacing:.14em}
.nav nav{display:flex;gap:clamp(14px,2.4vw,52px);margin-left:auto}
.nav nav a{font-weight:700;font-size:17px;color:var(--ink-md);text-decoration:none;
  text-transform:uppercase;padding:4px 0;transition:color .14s}
.nav nav a:hover{color:#fff}
.nav nav a.on{color:#fff;box-shadow:inset 0 -3px 0 var(--white)}
.navr{display:flex;align-items:center;gap:22px;margin-left:auto}
.lang{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--ink-lo)}
.lang b{color:#fff}.lang i{color:var(--line2);font-style:normal}
.lang a{text-decoration:none;font-size:19px}
.lang a:hover{color:#fff}
@media (max-width:1180px){.nav nav{display:none}}
@media (max-width:640px){.nav .btn{display:none}}

/* ------------------------------------------------------------------ hero
   The video keeps its place, but the scrim over it is the brand mesh rather
   than a flat purple: ember pooling from the top-left, steel from the top-
   right, both over a deep floor that is heaviest where the copy sits. The
   fixture card on the right needs a legible field under it too, so the scrim
   never drops below .52 on that side. */
.hero{position:relative;min-height:min(84vh,820px);display:flex;align-items:center;
  overflow:hidden;isolation:isolate}
.herov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 120% at 0% 0%,rgba(135,57,63,.72),transparent 62%),
    radial-gradient(85% 115% at 100% 0%,rgba(79,112,157,.62),transparent 60%),
    linear-gradient(92deg,rgba(23,6,62,.95) 0%,rgba(23,6,62,.80) 44%,rgba(20,16,75,.52) 100%);
}
/* a hairline of the gradient across the foot of the hero, the way the brand
   artwork resolves from warm to cool across its own width */
.hero::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--g-tl),#6B5480,var(--g-tr))}
/* .hero is a flex row, so .heroin sized itself to its own content and was then
   centred by the auto margins it inherits from .wrap — floating the copy up to
   130px right of the rail the masthead, the section headings and the fixture
   card all stand on. Filling the line hands the gutter back to .wrap. */
.heroin{width:100%;flex:1 1 100%;
  padding-top:40px;padding-bottom:40px;padding-right:min(40vw,600px)}
.kicker{margin:0 0 14px;color:var(--ember-lt);font-size:clamp(14px,1.2vw,24px);
  letter-spacing:.1em;text-transform:uppercase}
.hero h1{font-size:clamp(44px,6.6vw,104px);text-transform:uppercase}
.lede{margin:26px 0 34px;font-size:clamp(15px,1.5vw,26px);color:var(--ink-md);
  letter-spacing:.02em;text-transform:uppercase;font-weight:400}
/* The card is positioned against the hero, which is full-bleed, so pinning it
   to --pad alone parked it on the viewport gutter — while everything else on
   the page stops at the wrap, which is capped at --maxw and centred. Past
   1800px those two are not the same line, and the card hung up to ~190px
   outside the column the league cards below it stand in. Adding back the
   wrap's own centring margin puts it on that column at every width: below
   --maxw the term is zero and this is the old rule exactly. */
.tonight{position:absolute;top:50%;translate:0 -50%;width:min(430px,38vw);
  right:calc((100% - min(100%,var(--maxw))) / 2 + var(--pad));
  background:rgba(18,9,58,.58);border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(140%);
  border-radius:var(--r);padding:22px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.tonight h2{font-size:15px;color:var(--steel-lt);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:12px}
.tonight ul{list-style:none;margin:0;padding:0}
.tonight li{display:grid;grid-template-columns:78px 1fr;gap:4px 14px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--line)}
.tonight li b{font-size:21px;text-transform:uppercase}
.tonight li span{grid-column:1;color:var(--ink-lo);font-size:15px}
.tonight li div{grid-column:2;grid-row:1/3;font-size:17px;line-height:1.25}
.tonight li em{display:block;color:var(--ink-lo);font-style:normal;font-weight:400;font-size:14px;margin-top:3px}
.tonight li div a{text-decoration:none}
.tonight li div a:hover{color:var(--steel-lt)}
.tonight .upl[hidden],.tonight .upsoon[hidden]{display:none}
.tonight .upsoon p{margin:0 0 14px;color:var(--ink-md);font-size:16px;line-height:1.45}
@media (max-width:1100px){.tonight{position:static;translate:0;width:auto;margin:0 var(--pad) 40px}
  .hero{display:block;padding-top:40px}
  /* the desktop rule parks the copy left of the fixture card; once that card
     drops below, the padding goes back to the wrap gutter — not to zero, or
     the headline sits flush against the right edge of the screen. */
  .heroin{padding-right:var(--pad)}}

/* --------------------------------------------------------------- leagues
   Both league banners are supplied at exactly 5:2 (2560x1024 and 1920x768)
   and carry the league lockup baked in at the edges, so the frame honours
   that ratio and nothing is cropped — an off-ratio box eats the mark.

   Colour coding is no longer green-vs-blue. On a federation page the two
   leagues take the two ends of the federation's own gradient: the senior
   league the warm end, the U-17 league the cool one.                       */
.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:18px;margin-top:26px}
.lcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);
  transition:transform .16s,border-color .16s,background .16s}
.lcard:hover{transform:translateY(-3px);border-color:var(--ember-lt);background:var(--glass2)}
/* the accent rule along the top edge is the card's half of the gradient */
.lcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--g-tl),var(--ember-lt))}
.lshot{position:relative;aspect-ratio:5/2;overflow:hidden;background:rgba(10,4,30,.5)}
.lshot img.kv{width:100%;height:100%;object-fit:contain}
.lstatus{position:absolute;right:16px;top:16px;z-index:2;
  background:rgba(255,255,255,.92);color:var(--deep);
  font-size:12px;font-weight:700;letter-spacing:.08em;
  padding:6px 12px;border-radius:14px;text-transform:uppercase}
.lstatus.soon{background:none;box-shadow:inset 0 0 0 2px var(--ember-lt);color:var(--ember-lt)}
.lcard.u17:hover{border-color:var(--steel-lt)}
.lcard.u17::before{background:linear-gradient(90deg,var(--g-tr),var(--steel-lt))}
.lcard.u17 .lcta .from{color:var(--steel-lt)}
.lcard.fdl:hover{border-color:var(--orchid-lt)}
.lcard.fdl::before{background:linear-gradient(90deg,var(--orchid),var(--orchid-lt))}
.lcard.fdl .lcta .from{color:var(--orchid-lt)}
.lbody{padding:clamp(18px,1.5vw,24px);display:flex;flex-direction:column;flex:1;gap:14px}
.lbody h3{font-size:clamp(19px,1.5vw,26px);text-transform:uppercase}
.lbody p{margin:0;color:var(--ink-md);font-size:clamp(14px,.95vw,17px);line-height:1.45}
.lcta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding-top:14px;border-top:1px solid var(--line)}
.lcta .from{color:var(--ember-lt);font-size:18px}

/* the next league in — a real card, not a hole in the grid */
.lcard.next,.lcard.next:hover{background:
  radial-gradient(120% 90% at 10% 0%,rgba(135,57,63,.28),transparent 60%),
  radial-gradient(120% 90% at 92% 8%,rgba(79,112,157,.22),transparent 58%),
  var(--glass);
  border:1px dashed var(--line2);transform:none}
.lcard.next::before{display:none}
.nextin{display:flex;flex-direction:column;justify-content:center;flex:1;gap:16px;
  padding:clamp(28px,3vw,48px);text-align:left}
.nextin .pip{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  box-shadow:inset 0 0 0 2px var(--line2);color:var(--white);border-radius:15px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px}
.nextin .pip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ember-lt);
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.nextin h3{font-size:clamp(22px,2vw,34px);text-transform:uppercase;max-width:18ch}
.nextin p{margin:0;color:var(--ink-md);font-size:clamp(15px,1.1vw,19px);line-height:1.45;max-width:40ch}
.nextin .dots{display:flex;gap:8px;margin-top:4px}
.nextin .dots i{width:34px;height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.nextin .dots i:first-child{background:var(--ember-lt)}
.nextin .dots i:nth-child(2){background:rgba(217,138,143,.45)}

/* --------------------------------------------------------------- compare
   Two spec cards side by side rather than a table: it reads as two things
   being chosen between, it scales to a third league without a new column,
   and the rows still line up because every card carries the same keys.    */
.vsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:18px;margin-top:26px}
.vscard{position:relative;display:flex;flex-direction:column;background:var(--glass);
  border:1px solid var(--line);backdrop-filter:blur(10px);
  border-radius:var(--r);overflow:hidden;transition:border-color .16s,background .16s}
.vscard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--g-tl),var(--ember-lt))}
.vscard.youth::before{background:linear-gradient(90deg,var(--g-tr),var(--steel-lt))}
.vscard.first::before{background:linear-gradient(90deg,var(--orchid),var(--orchid-lt))}
.vscard:hover{border-color:var(--ember-lt);background:var(--glass2)}
.vscard.youth:hover{border-color:var(--steel-lt)}
.vscard.first:hover{border-color:var(--orchid-lt)}
.vshead{padding:clamp(20px,1.8vw,26px) clamp(18px,1.6vw,24px) 14px}
.vskind{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-lt);margin-bottom:12px}
.vscard.youth .vskind{color:var(--steel-lt)}
.vscard.first .vskind{color:var(--orchid-lt)}
.vshead h3{font-size:clamp(18px,1.4vw,25px);text-transform:uppercase}
.vslist{margin:0;padding:0 clamp(18px,1.6vw,24px)}
.vsrow{display:grid;grid-template-columns:minmax(92px,32%) 1fr;gap:8px 16px;
  padding:11px 0;border-top:1px solid var(--line);align-items:baseline}
.vsrow dt{color:var(--ink-lo);font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.vsrow dd{margin:0;font-weight:700;font-size:clamp(14px,.95vw,17px);line-height:1.3}
.vsfoot{margin-top:auto;padding:16px clamp(18px,1.6vw,24px) clamp(18px,1.8vw,24px);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;border-top:1px solid var(--line)}
.vsfoot .host{color:var(--ink-lo);font-size:15px}
@media (max-width:520px){.vsrow{grid-template-columns:1fr;gap:4px}}

/* ------------------------------------------------------------------ info */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
/* The plate was carrying the low-poly facet cut — one corner clipped off. At
   44px the cut is smaller than the icon inside it, so it did not read as a
   motif; it read as a corner that had failed to render. The cut needs room to
   be legible as a deliberate shape, and this plate has none, so the plate is
   a plain rounded square and the facet language stays where it has the size
   to work: the ground, and the fixture card in the hero. */
.bt .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  border:1px solid var(--line2);background:var(--glass2);color:var(--white);
  margin-bottom:14px;transition:border-color .2s,background .2s,color .2s}
.bt .ic svg{width:22px;height:22px}
.bt:hover .ic{border-color:var(--ember-lt);background:rgba(217,138,143,.16);color:var(--ember-lt)}
.bt b{display:block;font-size:clamp(15px,1.05vw,19px);text-transform:uppercase;margin-bottom:8px}
.bt p{margin:0;color:var(--ink-md);font-size:15px;line-height:1.45}
@media (max-width:900px){.bgrid{grid-template-columns:1fr}}

/* ------------------------------------------------------------------- why */
.whygrid{display:grid;grid-template-columns:minmax(280px,500px) 1fr;gap:18px;margin-top:24px;
  align-items:stretch}
/* The gallery keeps its 16/9 box (align-self:start, so the row height does
   not stretch it and crop the frame); the stat card stretches to match it,
   with the counts line pinned to the bottom so both columns end level. */
.whynum{display:flex;flex-direction:column;position:relative;overflow:hidden}
/* the big number sits over a pool of the warm end — the only place on the page
   where the gradient is allowed to come forward inside a panel */
.whynum::before{content:"";position:absolute;inset:auto auto -30% -20%;width:75%;
  aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(135,57,63,.5),transparent 68%);pointer-events:none}
.whynum>*{position:relative}
.whynum b{display:block;font-size:clamp(74px,9vw,150px);line-height:.82;letter-spacing:-.03em}
.whynum em{display:block;margin-top:10px;color:var(--ember-lt);font-style:normal;
  font-size:clamp(16px,1.4vw,24px);text-transform:uppercase}
.whynum p{color:var(--ink-md);font-size:clamp(14px,1vw,18px);line-height:1.45;max-width:46ch}
.whynum .counts{margin-top:auto;padding-top:22px;color:#fff;font-weight:700;letter-spacing:.06em}
.gal{position:relative;border-radius:var(--r);overflow:hidden;background:rgba(10,4,30,.6);
  border:1px solid var(--line);
  /* Capping the height while the width stayed at 100% broke the 16/9 box and
     `cover` trimmed the top and bottom of every frame — that is what cut the
     players' heads off. The cap is expressed as a width instead: the slides are
     absolutely positioned, so an auto width would collapse the box to nothing.
     16/9 of the height we want to allow. */
  aspect-ratio:16/9;min-height:0;
  width:100%;max-width:calc(min(46vh,420px) * 1.778);justify-self:center;align-self:start}
.gs{margin:0;position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.gs.on{opacity:1;pointer-events:auto}
.gs img{width:100%;height:100%;object-fit:cover}
.gs figcaption{position:absolute;inset:auto 0 0 0;padding:26px 28px;
  background:linear-gradient(180deg,rgba(23,6,62,0),rgba(18,9,58,.94) 62%)}
.gs figcaption b{display:block;font-size:clamp(20px,2vw,32px);text-transform:uppercase;letter-spacing:.02em}
.gs figcaption span{display:block;margin-top:4px;color:var(--ink-md);font-size:15px}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;border:1px solid var(--line2);background:rgba(13,6,32,.5);
  backdrop-filter:blur(6px);
  color:#fff;font-size:26px;font-family:inherit;cursor:pointer;line-height:1;z-index:3}
.gnav:hover{background:rgba(255,255,255,.18);border-color:#fff}
.gprev{left:14px}.gnext{right:14px}
.gdots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:9px}
.gd{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.42)}
.gd.on{background:#fff;width:24px;border-radius:5px}
@media (max-width:1000px){.whygrid{grid-template-columns:1fr}
  .gal{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);border-radius:0;
    border-inline:0;max-width:none}
  .gs figcaption{padding-left:var(--pad);padding-right:var(--pad)}}
@media (max-width:760px){.gs figcaption{padding:16px var(--pad)}
  .gs figcaption b{font-size:clamp(17px,5.4vw,24px)}
  .gnav{width:44px;height:44px;font-size:21px}
  .gd{width:11px;height:11px}.gd.on{width:26px}.gdots{bottom:10px}}
@media (max-width:420px){.gal{max-width:none}}

/* ---------------------------------------------------------------- social */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin-top:30px}
.sgrid .card{display:flex;flex-direction:column;gap:12px}
.sgrid .card em{font-style:normal;color:var(--steel-lt);font-weight:700;font-size:clamp(19px,1.6vw,28px)}
.sgrid .card p{margin:0;color:var(--ink-md);font-size:16px}
.sgrid .card a{margin-top:auto;align-self:flex-start}

/* ------------------------------------------------------------------- faq */
.faq{margin-top:24px;display:grid;gap:6px}
.faq details{background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;backdrop-filter:blur(10px)}
.faq details[open]{background:var(--glass2);box-shadow:inset 4px 0 0 var(--ember-lt)}
.faq summary{cursor:pointer;list-style:none;padding:16px 22px;
  font-size:clamp(15px,1.15vw,21px);text-transform:uppercase;display:flex;
  justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"▾";color:var(--ink-lo);font-size:.7em;flex:0 0 auto}
.faq details[open] summary::after{content:"▴";color:var(--ember-lt)}
/* A <details> body cannot be transitioned — the browser flips it between
   display:none and block — so the answer sits in a grid row that runs
   0fr -> 1fr, and hub.js holds the panel open until the close has finished. */
.faqin{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.faq details[open] .faqin{grid-template-rows:1fr}
.faqin>div{overflow:hidden;min-height:0}
.faq summary::after{transition:transform .32s cubic-bezier(.4,0,.2,1)}
.faq p{margin:0;padding:0 22px 20px;color:var(--ink-md);font-size:clamp(14px,1vw,18px);
  line-height:1.5;max-width:100ch}
.faq a{color:var(--steel-lt);font-weight:700}

/* ----------------------------------------------------------------- final
   The closing field is the brand gradient at full strength — the one place
   on the page where the artwork is reproduced as the client supplied it,
   warm to cool across the width, deep at the foot. */
.final{position:relative;overflow:hidden;isolation:isolate;padding:clamp(46px,6vw,104px) 0}
.final video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.final::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 130% at 2% 0%,rgba(135,57,63,.80),transparent 62%),
    radial-gradient(85% 120% at 100% 4%,rgba(79,112,157,.66),transparent 58%),
    linear-gradient(92deg,rgba(23,6,62,.93),rgba(23,6,62,.72) 58%,rgba(20,16,75,.58));
}
.final::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--g-tl),#6B5480,var(--g-tr))}
.final h2{font-size:clamp(34px,4.6vw,74px);text-transform:uppercase}
.final .lede{margin-bottom:30px}

/* ---------------------------------------------------------------- footer */
footer{position:relative;background:rgba(12,5,34,.72);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:clamp(40px,4vw,64px) 0 30px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
.fgrid h5{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--ember-lt)}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fgrid a{color:var(--ink-md);text-decoration:none;font-size:16px}
.fgrid a:hover{color:#fff}
.fgrid .mark{margin-bottom:14px;align-items:center}
.fnote{color:var(--ink-md);font-size:15px;line-height:1.5;max-width:40ch}
.pays{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pays img{height:26px;width:auto;border-radius:3px}
.fbot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-lo);font-size:14px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}

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

/* ------------------------------------------------------------- instagram
   One strip, six reels, no account headers — so the grid carries the gap under
   the sub-line that the old per-account block used to. Tiles are 9/16 because
   every one of them is a reel: a square crop cut the top and bottom off each. */
.iggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1320px;
  margin-top:26px}
.igt{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:5px;
  background:rgba(10,4,30,.5);border:1px solid var(--line)}
.igt img,.igt video{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.igt:hover{border-color:var(--line2)}
.igt:hover img,.igt:hover video{transform:scale(1.05)}
.igt .vb{position:absolute;right:10px;top:10px;width:24px;height:24px;border-radius:50%;
  background:rgba(13,6,32,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  display:grid;place-items:center;pointer-events:none}
/* A border triangle's box is as wide as its base plus whatever the opposite
   border reserves, and the ink itself tapers — its centre of mass sits a third
   in from the flat edge. Centring that box parks the glyph visibly back from
   the middle of the circle. The opposite border is dropped so the box is the
   triangle, then the whole thing is pushed out by a sixth of the base, which
   puts the centroid on the circle's centre. */
.igt .vb::after{content:"";width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:9px solid #fff;
  transform:translateX(1.5px)}
@media (max-width:1000px){.iggrid{grid-template-columns:repeat(3,1fr);margin-top:20px}}
@media (max-width:560px){.iggrid{gap:10px}}

/* A laptop with a bookmarks bar leaves about 680px under our header, and a
   section the reader cannot take in at a glance loses its context. Below that
   height everything tightens one more notch rather than growing scrollbars. */
@media (min-width:1000px) and (max-height:820px){
  .sec{padding:34px 0}
  .h{font-size:clamp(26px,2.4vw,38px)}
  .sub{margin-top:10px;font-size:14px}
  .lgrid,.vsgrid,.bgrid,.whygrid{margin-top:20px}
  .whynum b{font-size:clamp(64px,7vw,110px)}
  .gal{max-width:calc(38vh * 1.778)}
  .faq summary{padding:13px 20px}
  .faq p{padding:0 20px 16px}
  .iggrid{margin-top:18px;max-width:1080px}
}

@media (min-width:1000px) and (max-height:700px){
  .sec{padding:24px 0}
  .h{font-size:clamp(24px,2vw,32px)}
  .lbody{padding:14px 16px;gap:10px}
  /* the blurb is supporting copy — two lines is enough when the window is this
     short, and it beats letting the card push the button off screen */
  .lbody p{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .iggrid{max-width:780px;gap:10px;margin-top:14px}
  .vsrow{padding:8px 0}
  .vshead{padding:16px 18px 10px}
  .vsfoot{padding:12px 18px 16px}
  .card{padding:14px}
  .bt p{font-size:14px}
  .bt .ic{width:38px;height:38px;margin-bottom:10px}
  .faq summary{padding:11px 18px}
  .final{padding:34px 0}
}

/* ------------------------------------------------------------ mobile fit */
@media (max-width:760px){
  .sub{padding-inline-start:12px;margin-top:12px;font-size:14px;line-height:1.35}
  .card{padding:20px 18px}
  .lbody,.vshead,.vslist,.vsfoot{padding-left:18px;padding-right:18px}
  /* backdrop-filter on a dozen panels at once is the single biggest paint cost
     on a mid-range Android, and at this width the panels are full-bleed anyway,
     so the blur buys nothing. The glass is carried by the fill alone. */
  .card,.lcard,.vscard,.faq details,.tonight{backdrop-filter:none}
  .tonight{background:rgba(18,9,58,.9)}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(34px,10vw,44px)}
  .final h2{font-size:clamp(30px,9vw,42px)}
  [dir=rtl] .hero h1{font-size:clamp(30px,8.4vw,40px)}
}

/* ------------------------------------------------------------------- rtl */
[dir=rtl] .nav nav,[dir=rtl] .navr{margin-left:0;margin-right:auto}
[dir=rtl] .cmp th,[dir=rtl] .cmp td{text-align:right}
/* the mirror of the LTR rule: the copy is parked left of the fixture card, so
   the padding swaps sides — but the gutter it swaps with is the wrap's, not
   zero. It read as zero for as long as .heroin sized itself to its content and
   was held off the edge by its own auto margin; now that it fills the line,
   the gutter has to be written out. */
[dir=rtl] .heroin{padding-right:var(--pad);padding-left:min(40vw,600px)}
[dir=rtl] .tonight{right:auto;left:calc((100% - min(100%,var(--maxw))) / 2 + var(--pad));
  clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
[dir=rtl] .lstatus{right:auto;left:16px}
[dir=rtl] .faq details[open]{box-shadow:inset -4px 0 0 var(--ember-lt)}
[dir=rtl] .gprev{left:auto;right:14px}
[dir=rtl] .gnext{right:auto;left:14px}
[dir=rtl] .nextin{text-align:right}
[dir=rtl] .igt .vb{right:auto;left:10px}
/* mirrored for RTL, and the nudge rides along in the flipped frame */
[dir=rtl] .igt .vb::after{transform:scaleX(-1) translateX(1.5px)}
[dir=rtl] .mark .word>span{letter-spacing:0}
/* the gradient reads warm-to-cool left-to-right in the artwork; in an RTL
   frame the reading order flips, so the accent rules flip with it */
[dir=rtl] .hero::before,[dir=rtl] .final::before{
  background:linear-gradient(270deg,var(--g-tl),#6B5480,var(--g-tr))}
[dir=rtl] .lcard::before,[dir=rtl] .vscard::before{
  background:linear-gradient(270deg,var(--g-tl),var(--ember-lt))}
[dir=rtl] .lcard.u17::before,[dir=rtl] .vscard.youth::before{
  background:linear-gradient(270deg,var(--g-tr),var(--steel-lt))}
[dir=rtl] .lcard.fdl::before,[dir=rtl] .vscard.first::before{
  background:linear-gradient(270deg,var(--orchid),var(--orchid-lt))}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .h,[dir=rtl] .lede,[dir=rtl] .kicker,
[dir=rtl] .sub,[dir=rtl] .btn,
[dir=rtl] .fgrid h5,[dir=rtl] .bt b,[dir=rtl] .tonight h2,
[dir=rtl] .gs figcaption b,[dir=rtl] .nextin .pip,[dir=rtl] .lstatus,
[dir=rtl] .faq summary,[dir=rtl] .vshead h3,
[dir=rtl] .vskind,[dir=rtl] .vsrow dt{text-transform:none;letter-spacing:0}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{line-height:1.12}
[dir=rtl] .hero h1{font-size:clamp(38px,5.4vw,86px)}
[dir=rtl] .final h2{font-size:clamp(32px,4.6vw,76px)}
@media (max-width:1100px){
  /* the base rtl rule zeroes padding-right to mirror the desktop layout;
     once the fixture card drops below, both gutters come back. */
  [dir=rtl] .heroin{padding-left:var(--pad);padding-right:var(--pad)}
  [dir=rtl] .tonight{left:auto}}

/* SAFF Women's Cup (on sale 11 Oct 2026) */
.lcard.cup:hover,.vscard.cup:hover{border-color:var(--steel-lt)}
.lcard.cup::before,.vscard.cup::before{background:linear-gradient(90deg,var(--ember-lt),var(--steel-lt))}
[dir=rtl] .lcard.cup::before,[dir=rtl] .vscard.cup::before{background:linear-gradient(270deg,var(--ember-lt),var(--steel-lt))}
.lcard.cup .lcta .from,.vscard.cup .vskind{color:var(--steel-lt)}