/* ═══════════ Mamelodi Sundowns — Immersive Pass ═══════════
   Direction: Neo Industrial Space Tech — performance systems, motorsport
   telemetry and space-program discipline, filtered through Sundowns.
   Colour ratio: 45% navy · 30% yellow · 18% ivory · 5% blue · 2% green
   Type roles: --display Delirium NCV (headlines, names) · --num Cyber Digital
   (numerals) · --tech JI Lilliwaup (display labels) · --mono Azeret Mono
   (small data) · --condensed Big Shoulders (glanceable supporting text)
   Margin: --m (7vw)  */

/* Self-hosted brand faces. Each stack keeps a webfont fallback behind it because
   these three lack some characters the site relies on — CSS resolves missing
   glyphs per character, so "·", "—" and the arrows come from the fallback. */
@font-face{font-family:"Chinese Rocks";src:url("../assets/fonts/ChineseRocks-Rg.otf") format("opentype");font-weight:400 900;font-display:swap}
@font-face{font-family:"Delirium NCV";src:url("../assets/fonts/DeliriumNcv-Vm5e.ttf") format("truetype");font-weight:400 900;font-display:swap}
@font-face{font-family:"Cyber Digital";src:url("../assets/fonts/CyberDigital-KVgED.otf") format("opentype");font-weight:400 900;font-display:swap}
@font-face{font-family:"JI Lilliwaup";src:url("../assets/fonts/JiLilliwaup-oxMB.ttf") format("truetype");font-weight:400 700;font-display:swap}

:root{
  --yellow:#FFDE00;
  --blue:#1246C8;
  --blue-deep:#0A2A80;
  --blue-ink:#06184F;
  --green:#0B7B3E;
  --ink:#0A1E4D;
  --paper:#F5F2E9;
  --light:#FFF9E0;
  /* .55 measured 3.67:1 on --paper — below the 4.5:1 AA floor for small text,
     and this token carries most micro-labels on the site. .63 is the lowest
     alpha that clears AA on BOTH grounds this token lands on (paper 4.6:1,
     yellow 4.54:1), so the tone is preserved rather than darkened. */
  --ink-muted:rgba(10,30,77,.63);
  --light-muted:rgba(255,249,224,.58);
  --m:7vw;
  --u:8px;
  /* SIGNATURE FACE. Headlines, navbar, player names, section titles, and
     every headline-scale numeral (section indices, scorelines, shirt
     numbers, honour counts). Delirium sits behind it as the previous
     display face; Big Shoulders is the web-safe condensed fallback. */
  --display:"Chinese Rocks","Delirium NCV","Big Shoulders Display",sans-serif;
  --body:"Host Grotesk",sans-serif;
  /* DATA numerals only — league table, player metrics, dials, the countdown
     reel. Deliberately NOT the signature face: these are live readouts and
     the seven-segment cut is what makes them read as instrumentation. */
  --num:"Cyber Digital","Big Shoulders Display",sans-serif;
  /* micro-data only: tiny labels, codes, indices, readout metadata.
     Azeret Mono sits behind it to supply · — – and the arrow glyphs. */
  --tech:"JI Lilliwaup","Azeret Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Legibility fallback. JI Lilliwaup and Cyber Digital both hold up at display
     scale but close up at small sizes, so anything set small and needing to be
     read at a glance uses the condensed face instead. */
  --condensed:"Big Shoulders Display",sans-serif;
  /* One radius for every surface in the matchday module. The section had
     drifted to three (10px result card / 2px board / 0px ticket), which is
     what made three cards in one grid read as three unrelated screens.
     4px is small enough to stay editorial, enough to read as "device". */
  --radius-card:4px;
  /* ── micro-data type system ────────────────────────
     Neo-industrial spec-sheet voice. The brand's --tech face (JI Lilliwaup)
     is a DISPLAY face — the type guide's own note says it closes up small,
     which is why labels kept getting set at .5rem and going mushy. So the
     roles are now split: --tech stays for technical labels set large,
     --mono (Azeret, already loaded) carries genuinely small data.
     --fs-micro puts a floor under it: reference sheets set their spec type
     confidently, never squinting-small. */
  --mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-micro:.7rem;
  --track-micro:.16em;
  --hair:1px solid rgba(10,30,77,.18);
  --hair-light:1px solid rgba(255,249,224,.22);
  /* Easing scale. Entrances decelerate hard (expo-out) so things arrive and
     settle; movement uses a symmetric curve; micro-interactions use a soft
     quad-out; a single restrained overshoot is reserved for hover lifts.
     Nothing here is linear — a flat curve is what reads as "cheap". */
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --ease-move:cubic-bezier(.4,0,.2,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --ease-soft:cubic-bezier(.25,.46,.45,.94);
  --ease-spring:cubic-bezier(.34,1.28,.64,1);
  --duration-micro:140ms;
  --duration-fast:180ms;
  --duration-base:320ms;
  --duration-slow:700ms;
  --duration-drift:1100ms;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--yellow);color:var(--ink);overflow-x:hidden;font-size:16px;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.skip-link{position:fixed;left:var(--m);top:0;z-index:1000;transform:translateY(-140%);background:var(--yellow);color:var(--ink);padding:12px 18px;font-weight:700}
.skip-link:focus{transform:translateY(12px)}
::selection{background:var(--blue);color:var(--yellow)}

/* ── type ─────────────────────────────── */
.display{font-family:var(--display);font-weight:800;font-size:clamp(4rem,9vw,10rem);line-height:.9;text-transform:uppercase;letter-spacing:.005em;color:var(--green)}
.display--light{color:var(--light)}
.meta{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.meta--onblue{color:var(--light-muted)}
.meta-strong{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.muted{color:var(--ink-muted)}
.tlink{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:6px;transition:color .25s var(--ease-soft),border-color .25s var(--ease-soft)}
.tlink::after{content:"\2192";margin-left:.75em;display:inline-block;transition:transform .25s var(--ease-soft)}
.tlink:hover{color:var(--blue)}.tlink:hover::after{transform:translateX(4px)}
.tlink--light{color:var(--light);border-color:var(--light)}
.tlink--light:hover{color:var(--yellow);border-color:var(--yellow)}

.anchor{font-family:var(--mono);position:absolute;font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);z-index:5}
.anchor--bl{left:var(--m);bottom:calc(var(--u)*4)}
.anchor--br{right:var(--m);bottom:calc(var(--u)*4)}
.anchor--light{color:var(--light-muted)}

/* ── nav ─────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;padding:calc(var(--u)*2.5) var(--m);transition:background .4s var(--ease-soft),border-color .4s var(--ease-soft);border-bottom:1px solid transparent}
.nav.scrolled{background:var(--yellow);border-bottom:var(--hair)}
.nav__brand{display:flex;align-items:center;gap:calc(var(--u)*1.5)}
.nav__brand img{width:88px;transition:width .28s cubic-bezier(.2,.8,.2,1)}
.nav__brand span{font-family:var(--condensed);font-weight:800;font-size:.92rem;line-height:1;text-transform:uppercase;letter-spacing:.03em;display:flex;flex-direction:column;gap:2px;transition:font-size .28s cubic-bezier(.2,.8,.2,1)}
.nav__brand em{font-family:var(--body);font-style:normal;font-weight:500;font-size:.6rem;letter-spacing:.18em;color:var(--ink-muted);transition:font-size .28s cubic-bezier(.2,.8,.2,1),letter-spacing .28s}
/* brand expands while a mega panel is open */
body.mega-open .nav__brand img{width:104px}
body.mega-open .nav__brand span{font-size:1.22rem}
body.mega-open .nav__brand em{font-size:.66rem;letter-spacing:.22em}
.nav__links{display:flex;gap:calc(var(--u)*4);margin-left:auto}
.nav__links a{font-family:var(--display);font-size:1.02rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding:10px 8px;transition:color .25s var(--ease-soft),background .25s var(--ease-soft)}
.nav__links a:hover{background:transparent;color:var(--blue-ink)}
.nav__cta{font-family:var(--display);margin-left:calc(var(--u)*5);font-size:.98rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;transition:color .25s var(--ease-soft),border-color .25s var(--ease-soft)}
.nav__cta:hover{color:var(--blue);border-color:var(--blue)}
.nav__burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;margin-left:auto;padding:4px}
.nav__burger span{width:26px;height:2px;background:var(--ink)}
/* ── mega menu (desktop) ─────────────────────────────
   Full-bleed cream panel dropping under the fixed header. Overlays content
   (position:fixed) so opening it never shifts layout. Square corners, no shadow. */
.mega{position:fixed;left:0;right:0;top:var(--nav-h,84px);z-index:99;background:var(--yellow);border-bottom:1px solid rgba(10,30,77,.22);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.mega.is-open{opacity:1;transform:none;pointer-events:auto}
/* invisible bridge so the pointer can cross the header gap without flicker */
.mega::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.mega__panel{display:none;grid-template-columns:42fr 58fr;gap:clamp(2rem,5vw,5rem);padding:clamp(2rem,3.4vw,3.5rem) var(--m) clamp(2.25rem,3.6vw,3.75rem);max-width:1800px;margin:0 auto}
.mega__panel.is-shown{display:grid}
.mega__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--u)*.5)}
.mega__list li{list-style:none}
/* no rules, no markers — hierarchy carries on scale and tracking alone */
.mega__link{font-family:var(--condensed);display:flex;align-items:center;justify-content:space-between;gap:var(--u);padding:calc(var(--u)*1.1) 0;font-weight:700;font-size:clamp(.92rem,1.05vw,1.1rem);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);transition:color .2s,padding-left .24s cubic-bezier(.2,.8,.2,1)}
.mega__link i{font-style:normal;font-size:.85em;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .24s cubic-bezier(.2,.8,.2,1);color:var(--blue)}
.mega__link:hover,.mega__link.is-active{color:var(--blue);padding-left:calc(var(--u)*1.25)}
.mega__link:hover i,.mega__link.is-active i{opacity:1;transform:none}
.mega__link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mega__preview{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,1.6vw,1.75rem)}
.mega__slot{position:relative;min-height:0}
.mega__card{position:relative;display:block;overflow:hidden;background:var(--blue-ink);aspect-ratio:4/5}
.mega__slot .mega__card{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .22s ease}
.mega__slot .mega__card.is-active{opacity:1;pointer-events:auto}
.mega__card figure{position:absolute;inset:0}
.mega__card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mega__card:hover img{transform:scale(1.02)}
.mega__card::after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(180deg,transparent,rgba(6,24,79,.82));pointer-events:none}
.mega__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1rem,1.6vw,1.6rem);display:flex;flex-direction:column;gap:6px;color:var(--light)}
.mega__cat{font-family:var(--condensed);font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}
.mega__title{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,1.8vw,1.75rem);line-height:1.02;text-transform:uppercase}
.mega__cta{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--light-muted);margin-top:2px}
.mega__cta i{font-style:normal;display:inline-block;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.mega__card:hover .mega__cta i{transform:translateX(3px)}
/* open nav item stays underlined + a small chip marks it, as per the reference */
.nav__links a.is-open{color:var(--ink);border-bottom:2px solid var(--blue);padding-bottom:3px}
.nav--hero:not(.scrolled) .nav__links a.is-open{color:var(--light);border-bottom-color:var(--light)}
.nav__links a.is-open:hover{background:transparent;color:var(--blue-ink);border-bottom-color:var(--blue-ink)}
.nav--hero:not(.scrolled) .nav__links a.is-open:hover{background:transparent;color:var(--light);border-bottom-color:var(--yellow)}
body.mega-open .nav{background:var(--yellow);border-bottom:var(--hair)}
body.mega-open .nav__links a,body.mega-open .nav__brand span,body.mega-open .nav__cta{color:var(--ink)}
body.mega-open .nav__links a:hover{background:transparent;color:var(--blue-ink)}
body.mega-open .nav__brand em{color:var(--ink-muted)}

.mobile-menu{display:none}
/* over dark hero */
.nav--hero:not(.scrolled) .nav__brand span,.nav--hero:not(.scrolled) .nav__cta{color:var(--light)}
.nav--hero:not(.scrolled) .nav__brand em,.nav--hero:not(.scrolled) .nav__links a{color:var(--light-muted)}
.nav--hero:not(.scrolled) .nav__links a:hover{background:transparent;color:var(--light)}
.nav--hero:not(.scrolled) .nav__cta{border-color:var(--light)}
.nav--hero:not(.scrolled) .nav__burger span{background:var(--light)}

/* ── 01 hero (slider) ────────────────── */
.hero{position:relative;min-height:100svh;background:var(--blue-ink);overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__video{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,24,79,.88) 0%,rgba(6,24,79,.42) 52%,rgba(6,24,79,.18)),linear-gradient(0deg,rgba(6,24,79,.88),transparent 52%);pointer-events:none}
.calibration{font-family:var(--mono);position:absolute;z-index:3;display:flex;align-items:center;gap:10px;font-size:.52rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--light-muted);pointer-events:none}
/* pitch drawn in plan — rotated to landscape, the way a pitch is actually
   read on a broadcast graphic rather than stood on its end */
.calibration i{width:17px;height:17px;opacity:.85;rotate:90deg;
  background:url("../assets/icons/pitch-mark.svg") center/contain no-repeat}
.calibration--hero{right:var(--m);top:calc(var(--u)*13)}
.hero__slider{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.06);transition:transform 7s ease-out}
.hero__slide.is-active img{transform:scale(1.14)}
.hero__slider::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,24,79,.38) 0%,rgba(6,24,79,.06) 40%,rgba(6,24,79,.55) 78%,rgba(6,24,79,.88) 100%)}
.hero__dots{position:absolute;right:var(--m);bottom:calc(var(--u)*14);z-index:5;display:flex;gap:calc(var(--u)*1.5)}
.hero__dots button{width:34px;height:3px;border:0;background:rgba(255,249,224,.35);cursor:pointer;padding:0;transition:background .3s var(--ease-soft)}
.hero__dots button.is-active{background:var(--yellow)}
.hero__bg{position:absolute;inset:-6% 0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,24,79,.35) 0%,rgba(6,24,79,.05) 40%,rgba(6,24,79,.55) 78%,rgba(6,24,79,.85) 100%)}
.hero__content{position:relative;z-index:2;padding:0 var(--m) calc(var(--u)*15);width:min(78vw,1180px)}
.hero__eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--light);margin-bottom:calc(var(--u)*2)}
.hero__title{font-family:var(--display);font-weight:900;font-size:clamp(5rem,12vw,13rem);line-height:.84;text-transform:uppercase;color:var(--yellow);letter-spacing:-.01em}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line span{display:inline-block;transform:translateY(112%);animation:riseUp 1.1s cubic-bezier(.2,.85,.2,1) forwards}
.hero__title .line:nth-child(2) span{animation-delay:.1s}
.hero__title .line:nth-child(3) span{animation-delay:.2s}
@keyframes riseUp{to{transform:translateY(0)}}
.hero__sub{margin-top:calc(var(--u)*4);max-width:36ch;font-size:.98rem;line-height:1.65;color:var(--light);opacity:.9}
.hero__actions{display:flex;align-items:center;gap:calc(var(--u)*3);margin-top:calc(var(--u)*4)}
.hero__primary{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;background:var(--yellow);color:var(--ink);padding:14px 18px}
.hero__sound{border:0;border-bottom:1px solid rgba(255,249,224,.55);background:transparent;color:var(--light);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 0;cursor:pointer}
.hero__match{position:absolute;right:var(--m);bottom:calc(var(--u)*15);z-index:5;width:min(360px,30vw);padding-top:calc(var(--u)*2);color:var(--light);display:grid;gap:6px}
.hero__match-state,.hero__match>span:last-child{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--light-muted)}
.hero__match-state i{display:inline-block;width:6px;height:6px;margin-right:7px;background:var(--green);border-radius:50%}
.hero__match strong{font-family:var(--condensed);font-size:2.15rem;line-height:1;text-transform:uppercase;color:var(--yellow)}
.hero__match strong b{font-size:.7em;color:var(--light);margin:0 .35em}
.scrollcue{position:absolute;left:50%;bottom:calc(var(--u)*3.5);width:1px;height:46px;background:var(--light-muted);overflow:hidden;z-index:5}
.scrollcue span{position:absolute;inset:0;background:var(--yellow);animation:cue 2.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes cue{0%{transform:translateY(-100%)}50%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* ticker */
.ticker{position:relative;background:var(--blue);color:var(--yellow);overflow:hidden;display:flex;align-items:stretch;border-top:1px solid rgba(255,249,224,.14)}
.ticker__label{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 var(--m);background:var(--blue-ink);font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--light)}
.ticker__label i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s ease-in-out infinite}
.ticker__viewport{overflow:hidden;padding:calc(var(--u)*1.6) 0;flex:1}
.ticker__track{display:flex;width:max-content;white-space:nowrap;animation:tick 70s linear infinite}
.ticker__set{display:flex;align-items:center}
/* Headlines run in the display face (Delirium NCV). It's a condensed
   uppercase cut, so the strip needs a size bump and a little tracking to
   stay readable at speed — set at --body's 0.86rem it would read small. */
.ticker__item{display:inline-flex;align-items:center;font-family:var(--display);font-weight:700;
  font-size:1.18rem;letter-spacing:.03em;text-transform:uppercase;color:var(--yellow)}
.ticker__item::after{content:"◆";font-size:.42em;color:var(--light-muted);margin:0 2.2em}
.ticker__item:hover,.ticker__item:focus-visible{color:var(--light)}
.ticker__loading{font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:.03em;text-transform:uppercase;padding-left:2em}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── 02 matchday (bento) ─────────────── */
.matchday{padding:calc(var(--u)*13) var(--m) calc(var(--u)*16)}
.matchday>.sec-head .sec-head__rule{display:none}
.matchday>.sec-head .sec-head__meta{margin-left:auto}

/* cut-off giant numeral masthead (editorial texture) */
.mc-masthead{position:relative;overflow:hidden;height:clamp(64px,10vw,132px);border-bottom:2px solid var(--green)}
/* Cropped masthead word. Delirium is condensed, so a whole word fits where four
   digits used to — sized down accordingly and still bled off the datum rule. */
.cutnum{font-family:var(--display);position:absolute;left:-.02em;bottom:-.3em;font-weight:900;font-size:clamp(6rem,15vw,15rem);line-height:1;letter-spacing:-.02em;color:var(--green);white-space:nowrap;user-select:none;pointer-events:none}

/* section header: index · label ——— meta */
/* Section header, neo-industrial spec-sheet build. Three changes from the
   old flat bar: the index becomes a real display numeral rather than a
   timid label (scale contrast, the reference sheets' biggest move); the
   row hangs off a shared BASELINE instead of centring, so it reads as
   set on a grid rather than floated; and the meta runs in --mono as
   machine data. Asymmetry comes from the rule being pushed hard right
   by the index's weight rather than sitting evenly between two ends. */
.sec-head{display:flex;align-items:baseline;gap:calc(var(--u)*2.5);
  padding-top:calc(var(--u)*2.5);margin-bottom:calc(var(--u)*5)}
.sec-head__idx{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,3.2vw,2.9rem);
  line-height:.8;color:var(--green);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  flex:0 0 auto;align-self:flex-end}
.sec-head__label{font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--ink);flex:0 0 auto}
.sec-head__rule{flex:1;height:1px;background:rgba(10,30,77,.22);align-self:center}
.sec-head__meta{font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap;flex:0 0 auto}
.sec-head--light .sec-head__idx,.sec-head--light .sec-head__label{color:var(--light)}
.sec-head--light .sec-head__rule{background:rgba(255,249,224,.28)}

/* fully immersive: dark field, edge-to-edge images, no gaps, copy overlaid */
.stories{position:relative;isolation:isolate;overflow:hidden;background:var(--blue-ink);padding:0}
.stories>.sec-head{padding:calc(var(--u)*11) var(--m) calc(var(--u)*4)}
.stories__lead{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);gap:0}
.story{position:relative;display:block;overflow:hidden;background:var(--blue-ink)}
.story figure{position:absolute;inset:0}
.story img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.story:hover img{transform:scale(1.04)}
.story figure::after{content:"";position:absolute;inset:0}
.story--lead{min-height:clamp(440px,56vh,620px)}
.story--lead figure::after{background:linear-gradient(0deg,rgba(6,24,79,.94) 6%,rgba(6,24,79,.2) 52%,rgba(6,24,79,.55))}
.story__copy{position:relative;z-index:2;height:100%;padding:clamp(2rem,4vw,4.5rem);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.story__copy h2,.story--small h3{font-family:var(--display);font-weight:900;text-transform:uppercase}
.story__copy .meta{color:var(--yellow)}
.story__copy h2{font-size:clamp(3.4rem,6vw,6.8rem);line-height:.86;margin:calc(var(--u)*2) 0;color:var(--light)}
.story__copy>p:not(.meta){max-width:40ch;line-height:1.6;color:var(--light-muted)}
.story__link{margin-top:calc(var(--u)*4);font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--light);border-bottom:1px solid var(--light);padding-bottom:6px}
/* story eyebrow as machine data, matching the strand labels in media */
.story__copy .meta{font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:var(--track-micro);text-transform:uppercase}
.stories__side{display:grid;grid-template-rows:1fr 1fr;gap:0}
.story--small{min-height:250px}
.story--small figure::after{background:linear-gradient(0deg,rgba(6,24,79,.95),rgba(6,24,79,.04) 75%)}
.story--small>div{position:absolute;z-index:2;inset:auto calc(var(--u)*3) calc(var(--u)*3)}
.story--small .meta{color:var(--yellow)}
.story--small h3{color:var(--light);font-size:clamp(1.8rem,3vw,3rem);line-height:.9;margin-top:var(--u)}
.sec-head--light .sec-head__meta{color:var(--light-muted)}

/* ── shared "+" field — progressive ────────────────────
   The club registration motif: one evenly-sized mark, tiled at a constant
   pitch, fading along an axis. Two things changed from the old flat tile:

   1. The pattern moved onto its own ::before layer, which means strength is
      now controlled by real layer opacity (--plus-alpha) instead of being
      baked into each SVG's stroke-opacity. That kills the old pattern of
      re-declaring the whole background just to dim it.
   2. That layer is masked, so the field falls away along an axis
      (--plus-fade) rather than tiling evenly to the edges.

   Deliberately ONE scale. Mixed sizes were tried and dropped: varying the
   mark breaks the registration-mark read, which depends on every "+"
   being identical — it's a measuring device, not a decorative texture.
   Direction comes from the mask alone.

   Tune per instance: --plus-bg (base) · --plus-size (pitch)
                      --plus-alpha (strength) · --plus-fade (direction). */
.plus-field{position:relative;background-color:var(--plus-bg,var(--blue-ink))}
.plus-field::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;opacity:var(--plus-alpha,1);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 11v10M11 16h10' stroke='%23FFF9E0' stroke-opacity='0.16' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size:var(--plus-size,32px) var(--plus-size,32px);
  background-repeat:repeat;background-position:center;
  -webkit-mask-image:var(--plus-fade,linear-gradient(155deg,#000 0%,#000 26%,rgba(0,0,0,.34) 68%,transparent 100%));
  mask-image:var(--plus-fade,linear-gradient(155deg,#000 0%,#000 26%,rgba(0,0,0,.34) 68%,transparent 100%))}
/* ultra-macro variant — same orthogonal grid, but the mark is deliberately
   re-proportioned rather than merely scaled: arms fill 60% of the tile (vs 31%)
   and the stroke is 6% (vs 3.75%), so the crosses read thick and close-set.
   At 280px only ~3 crop into a player card, which is the intent — structural
   marks, not texture. Opacity is lower to compensate for the extra ink. */
.plus-field--macro::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cpath d='M140 56v168M56 140h168' stroke='%23FFF9E0' stroke-opacity='0.11' stroke-width='17'/%3E%3C/svg%3E");
  background-size:var(--plus-size,280px) var(--plus-size,280px)}

/* ── live registration field ───────────────────────────
   Bands marked data-plus-live get their marks built as real nodes by main.js so
   each one can react to the cursor. The SVG background stays as the no-JS
   fallback and is dropped only once the nodes exist (.is-live).
   --cell sets the lattice pitch; marks inherit colour via currentColor. */
/* the SVG fallback is dropped once real nodes exist — on the element for
   .plus-grid / .footer__plus (which carry their own background), and on the
   ::before layer for anything using the shared .plus-field system. */
.is-live{background-image:none}
.is-live.plus-field::before{display:none}
.pfield__m{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;pointer-events:none;will-change:transform}
.pfield__m::before,.pfield__m::after{content:"";position:absolute;background:currentColor}
.pfield__m::before{left:50%;top:0;width:1.2px;height:100%;transform:translateX(-50%)}
.pfield__m::after{top:50%;left:0;height:1.2px;width:100%;transform:translateY(-50%)}

/* restrained + pattern (small registration band — club copy + footer) */
.plus-grid{position:relative;overflow:hidden;color:#0B7B3E;margin-top:calc(var(--u)*6);height:clamp(64px,10vw,104px);opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M17 12v10M12 17h10' stroke='%230B7B3E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:clamp(26px,2.6vw,34px) clamp(26px,2.6vw,34px);background-position:left center;background-repeat:repeat;
  /* masked on the element rather than a layer — these bands are empty divs,
     so the fade also carries the live cursor-reactive marks main.js injects */
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 34%,rgba(0,0,0,.3) 76%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 34%,rgba(0,0,0,.3) 76%,transparent 100%)}

/* bento grid */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:calc(var(--u)*2)}
.card{padding:calc(var(--u)*2.75);display:flex;flex-direction:column;gap:calc(var(--u)*1.5);min-height:0}
.card--media{padding:0;overflow:hidden}
.card--paper{background:var(--paper);color:var(--ink)}
.card--yellow{background:var(--yellow);border:1px solid rgba(10,30,77,.14);color:var(--ink)}
.card--blue{background:var(--blue);color:var(--light)}
.card--ink{background:var(--blue-ink);color:var(--light)}
/* --paper-rich: a deeper, warmer cream reserved for this card — the shared
   --paper token stays untouched so the signing/join/partners sections that
   also use it aren't swept up in a fix scoped to this one panel. */
.match-complete{grid-column:span 8;display:grid;grid-template-rows:auto auto;background:#EDE9DA;min-width:0;overflow:hidden}
/* the "digital pane" surface, recoloured as an LCD/calculator screen: a cool
   sage-grey panel with dark segment ink, instead of the site's warm cream +
   navy — scoped entirely to this card via local custom properties (--lcd-*)
   so the shift never leaks into the global --ink/--blue tokens used
   everywhere else on the site. A considered radius (softer than the site's
   usual sharp corners, short of a bubbly SaaS card), a diffused ambient
   shadow, and a hairline glass edge with a soft top sheen — the panel reads
   as a lit screen sitting above the page. Corner registration ticks below
   borrow the small instrumentation marks from technical/schematic reference
   sheets, standing in for "live, measured" rather than decorative. */
.bento__result{--lcd-ink:var(--ink);--lcd-ink-muted:rgba(10,30,77,.63);--lcd-line:rgba(10,30,77,.20);
  justify-content:space-between;position:relative;isolation:isolate;color:var(--lcd-ink);
  /* the panel is top-lit rather than a flat fill — a real backlit display is
     never one even tone. Warm cream keeps it in the site's paper family; the
     segment ink is the brand navy, so the card finally speaks Sundowns
     instead of generic-calculator grey-green. */
  background:linear-gradient(180deg,#F2EFE2 0%,#E7E3D3 100%);
  border-radius:var(--radius-card);border:1px solid rgba(10,30,77,.14);
  /* stacked, outer to inner: ambient contact shadows (the "floating pane"),
     a thin light ring + dark ring just outside the border (the physical edge
     a screen sits inside), then INSET shadows — a top recess as if a lip
     overhangs the glass — so the panel reads as sunk into a housing. */
  box-shadow:
    0 30px 60px -30px rgba(10,30,77,.34),0 10px 24px -16px rgba(10,30,77,.18),
    0 0 0 1px rgba(255,255,255,.6),0 0 0 5px rgba(10,30,77,.05),
    inset 0 3px 6px -2px rgba(10,30,77,.20),
    inset 0 -1px 0 rgba(255,255,255,.5),
    inset 0 1px 0 rgba(255,255,255,.65);
  transition:box-shadow var(--duration-base) var(--ease-soft),transform var(--duration-base) var(--ease-spring),border-color var(--duration-base) var(--ease-soft)}
.bento__result:hover,.bento__result:focus-within{transform:translateY(-3px);border-color:rgba(10,30,77,.22);
  box-shadow:
    0 38px 70px -30px rgba(10,30,77,.4),0 14px 28px -16px rgba(10,30,77,.24),
    0 0 0 1px rgba(255,255,255,.7),0 0 0 5px rgba(10,30,77,.07),
    inset 0 3px 6px -2px rgba(10,30,77,.24),
    inset 0 -1px 0 rgba(255,255,255,.55),
    inset 0 1px 0 rgba(255,255,255,.7)}
/* the "lo-fi screen" layer: top sheen, a diagonal glass-reflection streak,
   fine scanlines, a soft edge vignette (screen curvature) and grain — the
   cues that read as a physical, lit LCD rather than a printed card. */
.bento__result::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.45),transparent 34%),
    linear-gradient(115deg,transparent 36%,rgba(255,255,255,.32) 49%,transparent 60%),
    radial-gradient(120% 85% at 50% 8%,transparent 58%,rgba(10,30,77,.10) 100%),
    repeating-linear-gradient(180deg,rgba(10,30,77,.045) 0px,rgba(10,30,77,.045) 1px,transparent 1px,transparent 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}
/* corner registration ticks — top-left and bottom-right only, restrained.
   A tiny rivet dot at the joint reads as a fixing point on a device housing. */
.bento__result .wtick{position:absolute;z-index:1;width:9px;height:9px;pointer-events:none;
  background:radial-gradient(circle,var(--lcd-line) 1.4px,transparent 1.6px)}
.wtick::before,.wtick::after{content:"";position:absolute;background:var(--lcd-line)}
.wtick::before{width:100%;height:1px;top:0;left:0}
.wtick::after{width:1px;height:100%;top:0;left:0}
.wtick--tl{top:calc(var(--u)*1);left:calc(var(--u)*1)}
.wtick--br{bottom:calc(var(--u)*1);right:calc(var(--u)*1);transform:rotate(180deg)}
.result-board__head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--u)}
/* status reads live via the same .live-dot vocabulary used everywhere else on
   the site (ticker, hero match state) — a pulsing mark and plain type, no
   pill/badge container. */
.wstatus{display:flex;align-items:baseline;gap:calc(var(--u)*1.25)}
.wchip{display:inline-flex;align-items:center;gap:.65em;font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lcd-ink)}
.wchip__dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto;
  animation:pulse 1.6s ease-in-out infinite}
.wstatus__comp{position:relative;padding-left:calc(var(--u)*1.25);font-family:var(--mono);font-size:.62rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lcd-ink-muted)}
.wstatus__comp::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--lcd-line)}
/* always-on tap target (not a hover-only reveal — touch devices have no
   hover), styled as an underlined text link like the rest of the site's
   inline actions, not a boxed button */
.result-board__action{position:relative;display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lcd-ink);
  padding:8px 10px;transition:background var(--duration-fast) var(--ease-soft),color var(--duration-fast) var(--ease-soft)}
.result-board__action::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:right;transition:transform var(--duration-base) var(--ease-enter)}
.result-board__action i{font-style:normal;transition:translate var(--duration-fast) var(--ease-soft)}
.result-board__action:hover{background:transparent;color:var(--blue)}
.result-board__action:hover::after{transform-origin:left}
.result-board__action:hover i{translate:3px 0}
/* the card's own connective tissue: a faint "+" field (same registration motif
   as the rest of the site) plus a thin ink-green rule along the bottom edge —
   the seam that ties this panel into the navy league table beneath it. */
.bento__result::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden;
  background-image:
    linear-gradient(var(--green),var(--green)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 9v10M9 14h10' stroke='%230A1E4D' stroke-opacity='0.07' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size:100% 2px,28px 28px;
  background-position:bottom,center;
  background-repeat:no-repeat,repeat}
.bento__table{justify-content:flex-start}
.bento__next{grid-column:span 4;grid-row:span 2;justify-content:space-between}
/* ── matchday ticket card ─────────────────────────────
   Flat navy carrying the shared "+" field. Hairline-divided sections, no
   gradient container, no shadow. Structure: date · competition / crest-vs-crest /
   title · venue / countdown / two differentiated actions. */
.ticket{color:var(--light);padding:0;display:flex;flex-direction:column;border:1px solid rgba(255,249,224,.16);border-radius:var(--radius-card);overflow:hidden;position:relative;isolation:isolate}
/* pitch photo as the base surface, a dim "+" registration pattern over it (own
   tuned opacity, not the shared .plus-field strength), the existing navy
   gradient (.ticket::after, z-index:-1) rising on top of both. */
.ticket--pitch{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 11v10M11 16h10' stroke='%23FFF9E0' stroke-opacity='0.07' stroke-width='1.2'/%3E%3C/svg%3E"),
    url("../assets/aerial-pitch.jpg");
  background-repeat:repeat,no-repeat;
  background-size:32px 32px,cover;
  background-position:center,center}
.ticket>*{padding:calc(var(--u)*2.5) calc(var(--u)*3)}
.ticket>*+*{border-top:1px solid rgba(255,249,224,.14)}
.ticket__head{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--u)*2);background:var(--blue-ink)}
.ticket__date{display:flex;align-items:flex-start;gap:calc(var(--u)*1.75)}
.ticket__day{font-family:var(--display);font-weight:900;font-size:clamp(4.2rem,7vw,6.4rem);line-height:.78;letter-spacing:-.02em;color:var(--light);font-variant-numeric:tabular-nums}
.ticket__when{display:flex;flex-direction:column;gap:5px;padding-top:6px}
.ticket__when i{font-family:var(--mono);font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--light-muted)}
.ticket__when i:first-child{color:var(--light)}
.ticket__comp{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u));text-align:right}
.ticket__tag{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--light);border:1px solid rgba(255,249,224,.34);padding:5px 9px}
.ticket__round{font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--light-muted)}
/* absorbs the card's spare height so the crests own the centre of the ticket */
.ticket__matchup{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2.25rem);padding-top:calc(var(--u)*3);padding-bottom:calc(var(--u)*3)}
/* fixed box so crests read at one size whatever the source artwork */
.ticket__crest{width:clamp(104px,13vw,176px);height:clamp(104px,13vw,176px);object-fit:contain;flex:0 1 auto;min-width:0}
/* Monogram stand-in for clubs whose crest we don't hold. Deliberately reads as a
   placeholder rather than passing itself off as a real badge. */
.crest-mono{display:inline-grid;place-items:center;flex:0 0 auto;width:clamp(76px,8vw,118px);height:clamp(76px,8vw,118px);
  border:1px solid rgba(10,30,77,.28);font-family:var(--condensed);font-weight:800;
  font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:.04em;color:var(--ink-muted)}
.crest-mono--lg{width:clamp(104px,13vw,176px);height:clamp(104px,13vw,176px);
  border-color:rgba(255,249,224,.3);color:var(--light-muted);font-size:clamp(2.2rem,3.4vw,3.4rem)}
.ticket__vs{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:.06em;color:var(--light-muted);flex:0 0 auto}
.ticket__titles{text-align:center;padding-top:0;border-top:0}
.ticket__title{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.02;text-transform:uppercase;color:var(--light)}
.ticket__title em{font-style:normal;font-weight:500;color:var(--light-muted);margin:0 .25em}
.ticket__venue{font-family:var(--mono);margin-top:calc(var(--u)*1.25);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--light-muted)}
.ticket .counter{justify-content:space-between;background:transparent;backdrop-filter:none;padding:calc(var(--u)*2.5) calc(var(--u)*3)}
.ticket .odo__digit{background:transparent;border:0;backdrop-filter:none}
.ticket__actions{display:flex;gap:calc(var(--u)*1.5);margin-top:auto}
/* differentiated by intent: solid primary, outlined secondary. Square, never pills. */
.tbtn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:calc(var(--u)*1.9) calc(var(--u)*2);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid transparent;transition:background .2s var(--ease-soft),color .2s var(--ease-soft),border-color .2s var(--ease-soft)}
.tbtn--primary{background:var(--yellow);color:var(--blue-ink)}
.tbtn--primary:hover{background:var(--light);color:var(--blue-ink);border-color:var(--light)}
.tbtn--ghost{border-color:rgba(255,249,224,.4);color:var(--light)}
.tbtn--ghost:hover{border-color:var(--light);background:var(--light);color:var(--blue-ink)}
.tbtn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* navy gradient rising from the base to roughly halfway, behind ticket content */
.ticket::after{content:"";position:absolute;inset:50% 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,var(--blue-ink) 0%,rgba(6,24,79,.72) 42%,transparent 100%)}
.ticket>*{position:relative}
/* team names carry the fixture — significantly larger */
.ticket__title{font-size:clamp(1.9rem,3.2vw,3.1rem)!important;line-height:.98}
/* fine "+" texture in a dim yellow behind the top scorer, so the cut-out sits on a
   surface instead of floating. Same registration motif, tuned for a yellow field. */
.scorer__photo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 10.5v9M10.5 15h9' stroke='%23A88E00' stroke-opacity='0.3' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size:30px 30px;background-repeat:repeat}
.scorer__photo img{position:relative;z-index:1}
/* ticket: solid header block, no hairline beneath it */
.ticket__head+*{border-top:0!important}
.ticket>*+*{border-top:0}
/* team names stacked, not side by side */
.ticket__title{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.5)}
.ticket__title em{font-size:.52em;opacity:.75;margin:0}
.bento__pos{grid-column:span 4;min-height:clamp(190px,21vh,240px)}
.bento__scorer{grid-column:span 8;min-height:clamp(230px,27vh,310px)}
.bento__snap{grid-column:span 12;min-height:0;display:grid;grid-template-columns:minmax(190px,.45fr) 1.55fr;align-items:stretch;padding:0}
.card__label{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.card__label--light{color:var(--light-muted)}
.card__label-row{display:flex;align-items:center;justify-content:space-between;gap:var(--u);flex-wrap:wrap}
.card__foot{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--u);flex-wrap:wrap;margin-top:auto}
.bento__result .meta{color:var(--lcd-ink);font-weight:600}

/* fixture (badges + score) */
.fixture__badge{width:clamp(52px,5.5vw,82px);height:clamp(52px,5.5vw,82px);object-fit:contain}
.fixture__score{display:flex;align-items:center;gap:calc(var(--u)*1.5);flex:0 0 auto}
.fixture__score b{font-family:var(--display);font-weight:900;font-size:clamp(3.6rem,7.5vw,7rem);line-height:.8;color:var(--blue)}
.fixture__score b.muted{color:var(--ink-muted)}
.fixture__score i{font-style:normal;font-family:var(--display);font-weight:900;font-size:clamp(2rem,4vw,3.5rem);color:var(--ink-muted);align-self:flex-start}

/* the "dead centre" fix: a large soft tonal circle sat behind the scoreline —
   a sun-disc standing in for the badge's own raised-fist sun motif, at a
   strength that reads as surface texture, not decoration competing with the
   crests/digits sitting above it (z-index:1 via .result-board's own stacking
   context, same convention as the card-level pattern above). */
.result-board{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(.75rem,1.4vw,1.4rem);padding:calc(var(--u)*.5) 0;min-width:0;overflow:hidden;transition:transform var(--duration-fast) var(--ease-move)}
/* two stacked discs: a warm Sundowns-yellow backlight bloom (the lamp behind
   the panel) under a cool navy tonal disc (the sun-motif device). The warm
   layer never reads as "yellow" at this strength — it just stops the centre
   going grey, which is what a real backlit LCD does. */
.result-board::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;translate:-50% -50%;
  width:clamp(220px,30vw,420px);height:clamp(220px,30vw,420px);border-radius:50%;
  background:
    radial-gradient(circle,rgba(10,30,77,.07) 0%,rgba(10,30,77,.05) 46%,transparent 72%),
    radial-gradient(circle,rgba(255,222,0,.20) 0%,rgba(255,222,0,.10) 40%,transparent 70%)}
.result-board>*{position:relative;z-index:1}
.result-board__team{display:flex;align-items:center;justify-content:flex-start;gap:clamp(.75rem,1.3vw,1.25rem)}
.result-board__team--away{justify-content:flex-end;text-align:right;opacity:.86}
.result-board__team .fixture__badge{width:clamp(76px,8vw,118px);height:clamp(76px,8vw,118px)}
.result-board__team>div{display:flex;flex-direction:column}
/* segmented LCD digits — the numerals already run on --num (Cyber Digital,
   the site's one digital/seven-segment-style face), so the calculator read
   comes from colour alone: dark ink on the pale panel instead of brand blue */
/* real LCD/calculator digits show a faint ghost of every unlit segment
   underneath the lit ones — an "8" the display could form but isn't
   currently showing. Reproducing that (a near-invisible 8 behind the actual
   score) is what makes the digit read as a physical segment display rather
   than plain set type, more than any colour choice does. */
.result-board__digit{position:relative;display:inline-block;font-family:var(--display);font-weight:900;
  font-size:clamp(4rem,7vw,6.6rem);line-height:.72;color:var(--lcd-ink);letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.55),0 0 14px rgba(10,30,77,.14)}
.result-board__digit::before{content:"8";position:absolute;inset:0;z-index:-1;color:rgba(10,30,77,.085)}
.result-board__digit--away{opacity:.45;color:var(--lcd-ink-muted)}
.result-board__team span{margin-top:calc(var(--u)*1);font-family:var(--display);font-weight:900;font-size:clamp(1.32rem,2.2vw,2rem);letter-spacing:.01em;line-height:1;text-transform:uppercase;color:var(--lcd-ink)}
/* squared full-time marker, same border-only tag treatment as .ticket__tag
   elsewhere on the site — no fill, no radius, just a hairline box */
.result-board__dash{display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--mono);font-size:clamp(.6rem,.85vw,.68rem);font-weight:700;letter-spacing:.12em;
  color:var(--lcd-ink-muted);border:1px solid var(--lcd-line);padding:.6em .7em}

/* One-time Matchday choreography */
.matchday.motion-ready .match-complete{opacity:0;transform:translateY(18px)}
.matchday.motion-ready .bento__next,.matchday.motion-ready .bento__scorer,.matchday.motion-ready .bento__snap{opacity:0;transform:translateY(18px)}
.matchday.motion-ready.is-choreographed .match-complete{animation:matchSurface var(--duration-base) var(--ease-enter) forwards}
.matchday.motion-ready.is-choreographed .bento__next{animation:matchSurface var(--duration-base) var(--ease-enter) 90ms forwards}
.matchday.motion-ready.is-choreographed .bento__scorer{animation:matchSurface var(--duration-base) var(--ease-enter) 180ms forwards}
.matchday.motion-ready.is-choreographed .bento__snap{animation:matchSurface var(--duration-base) var(--ease-enter) 240ms forwards}
.matchday.motion-ready .result-board__team .fixture__badge{opacity:0;transform:translateY(10px)}
.matchday.motion-ready.is-choreographed .result-board__team .fixture__badge{animation:itemResolve var(--duration-base) var(--ease-enter) 180ms forwards}
.matchday.motion-ready .result-board__digit{display:inline-block;transform:translateY(115%);opacity:0}
.matchday.motion-ready.is-choreographed .result-board__digit{animation:scoreRoll var(--duration-slow) var(--ease-enter) 230ms forwards}
.matchday.motion-ready .result-board__dash{opacity:0;transform:scaleX(.4)}
.matchday.motion-ready.is-choreographed .result-board__dash{animation:dashResolve var(--duration-base) var(--ease-enter) 520ms forwards}
.matchday.motion-ready .result-board__team span{opacity:0;transform:translateY(6px)}
.matchday.motion-ready.is-choreographed .result-board__team span{animation:itemResolve var(--duration-base) var(--ease-enter) 580ms forwards}
@keyframes matchSurface{to{opacity:1;transform:none}}
@keyframes itemResolve{to{opacity:1;transform:none}}
@keyframes scoreRoll{to{opacity:1;transform:translateY(0)}}
@keyframes dashResolve{to{opacity:1;transform:scaleX(1)}}

/* form pills */
.form{display:flex;align-items:center;gap:5px}
.form span{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-right:calc(var(--u))}
.form i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;font-size:.68rem;font-weight:700;color:#fff}
.form i.w{background:var(--green)}.form i.d{background:var(--ink-muted)}.form i.l{background:#C0392B}

.live-dot{font-family:var(--mono);display:inline-flex;align-items:center;gap:.6em;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.6s ease-in-out infinite}
.live-dot--strong{color:var(--yellow)}.live-dot--strong::before{background:var(--yellow)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.5)}}

/* bigstat / snapshot / scorer */
.bigstat{flex:1;display:flex;align-items:center}
.bigstat b{font-family:var(--display);font-weight:900;font-size:clamp(6rem,13vw,11rem);line-height:.82;color:var(--blue);letter-spacing:-.02em}
.bigstat b sup{font-size:.36em;vertical-align:super;font-weight:800}
.season-strip__head{padding:calc(var(--u)*3);display:flex;flex-direction:column;justify-content:space-between;background:rgba(6,24,79,.18)}
.season-strip__head>span{font-size:.58rem;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:var(--light-muted)}
.snap{display:grid;grid-template-columns:repeat(4,1fr)}
.snap>div{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:calc(var(--u)*1.5);align-content:center;padding:calc(var(--u)*3);transition:background-color var(--duration-fast) var(--ease-soft)}
.snap>div:hover{background:rgba(6,24,79,.18)}
.snap svg{grid-row:1/3;width:26px;height:26px;align-self:center;fill:none;stroke:var(--yellow);stroke-width:1.5}
.snap b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2.8rem,5vw,4.6rem);color:var(--yellow);line-height:.78}
.snap span{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--light);margin-top:5px}
.scorer{display:grid;grid-template-columns:36% 1fr;height:100%}
.scorer__photo{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--yellow),#F0CE00)}
.scorer__photo img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.scorer__shirt{position:absolute;top:calc(var(--u));left:calc(var(--u)*1.2);font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1;color:var(--blue)}
.scorer__body{padding:calc(var(--u)*3.25);display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--u)*2)}
.scorer__heading{display:flex;align-items:center;justify-content:space-between;gap:var(--u)}
.scorer__identity{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u)*3)}
.scorer__name{font-family:var(--display);font-weight:900;font-size:clamp(2.8rem,5vw,5.6rem);text-transform:uppercase;line-height:.84}
.scorer__goals{display:flex;align-items:flex-end;gap:calc(var(--u)*1.5);margin-top:calc(var(--u)*1.5)}
.scorer__goals b{font-family:var(--display);font-weight:900;font-size:clamp(4.8rem,8vw,8rem);line-height:.7;color:var(--blue)}
.scorer__goals span{font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);line-height:1.5;padding-bottom:.4em}
.scorer__metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*2.5);padding:calc(var(--u)*1.75) calc(var(--u)*2);background:rgba(18,70,200,.055)}
.scorer__metrics div{padding:0}
.scorer__metrics dt{font-size:.52rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,30,77,.62)}
.scorer__metrics dd{font-family:var(--display);font-size:1.65rem;font-weight:800;line-height:1;color:var(--blue);margin-top:4px}

/* ── league leaderboard — broadcast ranking bands ─────
   Five stacked bands on the plus-field navy texture. Row anatomy: big rank,
   club name over a low-opacity crest watermark, right-aligned P/GD/PTS in the
   tech face, a thin diagonal seam, then the same crest oversized and cropped
   by the row's own overflow so it reads as a dramatic bleed rather than a
   badge in a box. Entrance rides the shared #matchday choreography (same
   stagger pattern that already animates the result card and fixture ticket). */
.bento__table{gap:calc(var(--u)*1.75)}
.board__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--u)}
.card--board{background:transparent;padding:0;gap:0;overflow:hidden}
.card--board>.board__head{padding:calc(var(--u)*2.75) calc(var(--u)*2.75) calc(var(--u)*1.5)}
.card--board>.board__head .card__label--light,
.card--board>.board__head .live-dot{color:var(--blue-ink)}
.card--board>.board__head .live-dot::before{background:var(--green)}
.card--board>.board__head .board__toggle{color:var(--blue-ink);border-color:rgba(10,30,77,.42)}
/* The table carries a lot of its own type and crest imagery, so the texture
   has to recede rather than compete — now a variable, not a duplicated
   background. The fade runs left-to-right so the field is densest under the
   cropped crests and clears away beneath the stats columns, where the mono
   numerals need a quiet ground. */
.board.plus-field{--plus-bg:var(--blue-ink);--plus-size:26px;--plus-alpha:.45;
  --plus-fade:linear-gradient(100deg,#000 0%,#000 30%,rgba(0,0,0,.28) 74%,transparent 100%)}
.board{position:relative;border-radius:var(--radius-card);overflow:hidden}
.board__colrow{display:grid;grid-template-columns:230px 64px 1fr repeat(3,52px);align-items:center;
  gap:0 calc(var(--u)*1.25);padding:0 calc(var(--u)*2.75) calc(var(--u)*1.25) 0;position:relative;z-index:1}
.board__ch{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--light-muted);text-align:right}
.board__ch--rank,.board__ch--club{text-align:left}
.board__ch--crest{text-align:left;padding-left:calc(var(--u)*1.5)}
.board__ch--pts{color:rgba(255,222,0,.7)}
.board__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:calc(var(--u)*1.1);
  padding:calc(var(--u)*1.1) 0}

/* separated "chip" rows rather than a hairline-divided table: each row is its
   own elevated surface (soft shadow) with a faint top highlight standing in
   for a light source above the board — the gloss the reference asked for,
   kept to a single restrained cue rather than a bevel/glow stack. */
.board__row{position:relative;display:grid;grid-template-columns:230px 64px 1fr repeat(3,52px);
  align-items:center;gap:0 calc(var(--u)*1.25);height:140px;padding:0 calc(var(--u)*2.75) 0 0;
  background:linear-gradient(180deg,rgba(255,249,224,.05),rgba(255,249,224,.02) 40%);
  border-radius:var(--radius-card);overflow:visible;isolation:isolate;
  box-shadow:0 1px 0 rgba(255,249,224,.09) inset,0 10px 20px -14px rgba(0,0,0,.55);
  transition:transform var(--duration-base) var(--ease-move),
    background-color var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft)}
.board__row:nth-child(even){background:linear-gradient(180deg,rgba(255,249,224,.08),rgba(255,249,224,.03) 40%)}
.board__row:hover,.board__row:focus-within{transform:translateX(6px)}
.board__row:hover{background:linear-gradient(180deg,rgba(255,249,224,.12),rgba(255,249,224,.05) 40%);
  box-shadow:0 1px 0 rgba(255,249,224,.14) inset,0 14px 26px -14px rgba(0,0,0,.6)}

.board__rank{grid-column:2/3;font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,3vw,3rem);
  color:var(--light-muted);line-height:1;font-variant-numeric:tabular-nums}

.board__club{grid-column:3/4;position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center;
  gap:4px;padding:calc(var(--u)*.75) 0}
/* tonal crest watermark, sat behind the club name */
.board__motif{position:absolute;left:-8px;top:50%;translate:0 -50%;width:110px;height:110px;
  background-image:var(--crest-tint);background-repeat:no-repeat;background-position:left center;background-size:contain;
  opacity:.06;filter:grayscale(1) brightness(3);pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-soft)}
.board__row:hover .board__motif{opacity:.12}
.board__name{position:relative;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.3vw,2.2rem);
  line-height:1.05;color:var(--light);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board__tag{position:relative;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--light-muted);opacity:0;translate:-5px 0;
  transition:opacity var(--duration-fast) var(--ease-soft),translate var(--duration-fast) var(--ease-soft)}
.board__row:hover .board__tag,.board__row:focus-within .board__tag{opacity:1;translate:0}

.board__stats{grid-column:4/7;display:grid;grid-template-columns:repeat(3,52px);text-align:right}
.board__stat{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-variant-numeric:tabular-nums}
.board__stat i{font-family:var(--mono);font-style:normal;font-size:.64rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--light-muted)}
.board__stat b{font-family:var(--num);font-weight:700;font-size:1.25rem;color:var(--light)}
.board__stat--pts b{font-size:1.55rem;font-weight:800;color:var(--yellow)}

/* the crop — a much larger crest, pinned to the extreme left of the row and
   bled off the card's own edge. Level orientation (no rotation): the row's
   overflow:hidden does the cropping — the image is deliberately bigger than
   its frame, so only part of the badge needs to show. */
.board__crestcrop{position:relative;grid-column:1/2;height:100%;overflow:hidden;
  margin-left:calc(var(--u)*-2.75);padding-left:calc(var(--u)*1.5);
  border-radius:var(--radius-card) 0 0 var(--radius-card);
  display:flex;align-items:center;justify-content:flex-start}
/* --crest-x is the per-row resting shift: the entrance keyframe and the
   reduced-motion fallback both read it via var(), so a row's own translate
   tuning (e.g. the focus row below) can't be clobbered by the animation's
   `forwards` fill-mode landing on a hardcoded value instead. */
.board__crestcrop img,.board__crestfallback{width:260px;height:260px;max-width:none;object-fit:contain;flex:0 0 auto;
  --crest-x:-26px;translate:var(--crest-x) 0;filter:drop-shadow(0 8px 18px rgba(6,24,79,.45));
  transition:transform var(--duration-base) var(--ease-spring)}
.board__crestfallback{display:grid;place-items:center;width:130px;height:130px;background:rgba(255,249,224,.08);
  font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--light-muted);translate:-30px 0}
.board__row:hover .board__crestcrop img,.board__row:focus-within .board__crestcrop img{transform:scale(1.05)}
/* badge.png carries far more internal padding than the vector club crests, so
   it reads smaller at matching pixel dimensions — scaled up well past the
   others to land at the same visual weight. The source is high-resolution
   (1365×1152), so the extra cropping this causes costs nothing in sharpness. */
.board__row--focus .board__crestcrop img,.board__row--focus .board__crestfallback{width:460px;height:460px;--crest-x:-175px}

/* the focal Sundowns row — same elevation language as the rest, plus the
   yellow edge and a soft blue glow standing in for the chip's own light */
.board__row--focus{background:linear-gradient(90deg,var(--blue) 0%,var(--blue-deep) 100%);
  box-shadow:inset 3px 0 0 var(--yellow),0 1px 0 rgba(255,249,224,.18) inset,
    0 14px 30px -12px rgba(18,70,200,.55)}
.board__row--focus:nth-child(even){background:linear-gradient(90deg,var(--blue) 0%,var(--blue-deep) 100%)}
.board__row--focus:hover{background:linear-gradient(90deg,#1852db 0%,var(--blue) 100%);
  box-shadow:inset 3px 0 0 var(--yellow),0 1px 0 rgba(255,249,224,.22) inset,
    0 18px 36px -12px rgba(18,70,200,.65)}
.board__row--focus .board__rank{color:var(--yellow)}
.board__row--focus .board__name{font-size:clamp(1.7rem,2.6vw,2.5rem)}
.board__row--focus .board__tag{opacity:1;translate:0;color:var(--yellow)}
.board__row--focus .board__motif{opacity:.1;filter:none;mix-blend-mode:soft-light}
.board__row--focus .board__stat--pts b{font-size:1.8rem}

/* entrance — rides the shared #matchday choreography */
.matchday.motion-ready .board__row{opacity:0;transform:translateX(-16px)}
.matchday.motion-ready.is-choreographed .board__row{
  animation:boardRowIn var(--duration-base) var(--ease-enter) calc(520ms + var(--row-index,0) * 70ms) forwards}
.matchday.motion-ready .board__crestcrop img{opacity:0;translate:-110px 0}
.matchday.motion-ready.is-choreographed .board__crestcrop img{
  animation:boardCrestIn var(--duration-slow) var(--ease-enter) calc(640ms + var(--row-index,0) * 70ms) forwards}
.matchday.motion-ready .board__stat{opacity:0}
.matchday.motion-ready.is-choreographed .board__stat{
  animation:boardStatIn var(--duration-base) var(--ease-soft) calc(700ms + var(--row-index,0) * 70ms) forwards}
@keyframes boardRowIn{to{opacity:1;transform:none}}
@keyframes boardCrestIn{to{opacity:1;translate:var(--crest-x) 0}}
@keyframes boardStatIn{to{opacity:1}}

.live-dot--ink{color:var(--ink-muted)}.live-dot--ink::before{background:var(--green)}

/* mechanical counter (scoreboard/odometer) */
.counter{display:flex;gap:calc(var(--u)*1.5)}
.counter__unit{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.5)}
.counter__unit>span{font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--light-muted)}
.odo{display:flex;gap:3px}
.odo__digit{position:relative;width:clamp(34px,4.4vw,52px);height:clamp(52px,6.4vw,74px);background:rgba(0,0,0,.22);overflow:hidden;color:var(--yellow)}
.odo__digit::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:1px;background:rgba(255,249,224,.18);z-index:2}
.odo__reel{position:absolute;inset:0;display:flex;flex-direction:column;transition:transform .6s cubic-bezier(.3,1.4,.4,1)}
.odo__reel span{font-family:var(--num);flex:0 0 auto;height:clamp(52px,6.4vw,74px);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(2rem,3.2vw,3rem);line-height:1}

/* ── cinematic band ──────────────────── */
.band{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden;background:var(--blue-ink)}
.band__bg{position:absolute;inset:-8% 0}
.band__bg img{width:100%;height:100%;object-fit:cover}
.band--about .band__bg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(6,24,79,.9),rgba(6,24,79,.55) 58%,rgba(6,24,79,.28))}
/* slideshow: stacked frames, opacity cross-fade only */
.band--about .band__bg img{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.band--about .band__bg img.is-on{opacity:1}
.band__crest{width:clamp(64px,6vw,92px);height:auto;margin-bottom:calc(var(--u)*3);display:block}
.band--about .band__sub{max-width:52ch;opacity:.9}
.band--about .tlink{margin-top:calc(var(--u)*4);display:inline-block}
.band__content{position:relative;z-index:2;padding:0 var(--m)}
.band__kicker{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:calc(var(--u)*3)}
.band__title{font-family:var(--display);font-weight:900;font-size:clamp(4.5rem,13vw,13rem);line-height:.86;text-transform:uppercase;color:var(--light)}
.band__sub{margin-top:calc(var(--u)*3);max-width:34ch;color:var(--light);opacity:.85;font-size:.98rem;line-height:1.6}

/* ── 03 new signing (announcement slider) ── */
.signing{position:relative;background:var(--paper);overflow:hidden;padding:calc(var(--u)*14) 0 calc(var(--u)*16)}
.signing__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--u);padding:0 var(--m) calc(var(--u)*5)}
.signing__kicker{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4vw,4rem);line-height:.92;text-transform:uppercase;color:var(--blue);margin-top:calc(var(--u)*1.5)}
.signing__dots{display:flex;gap:calc(var(--u)*1.5)}
.signing__dots button{width:32px;height:3px;border:0;background:rgba(10,30,77,.2);cursor:pointer;padding:0;transition:background .3s var(--ease-soft)}
.signing__dots button.is-active{background:var(--blue)}
.signing__slider{position:relative;height:clamp(420px,64vh,760px);margin:0 var(--m)}
.sslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s;overflow:hidden;background:var(--blue)}
.sslide.is-active{opacity:1;visibility:visible}
/* slide A: full-bleed banner */
.sslide--full img{width:100%;height:100%;object-fit:cover;object-position:center}
/* slide B: split copy + collage */
.sslide--split{display:grid;grid-template-columns:1fr 1fr;background:var(--blue)}
.sslide__copy{padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*2.5);color:var(--light)}
.sslide__name{font-family:var(--display);font-weight:900;font-size:clamp(3rem,6.5vw,7rem);line-height:.9;text-transform:uppercase;color:var(--yellow)}
.sslide__body{max-width:38ch;font-size:1.02rem;line-height:1.6;color:var(--light);opacity:.9}
.sslide__art{overflow:hidden;background:var(--blue-ink);display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2.5rem);min-height:0}
.sslide__art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 20px 50px rgba(6,24,79,.4)}
.tag{align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);background:var(--yellow);padding:calc(var(--u)) calc(var(--u)*1.6)}
.tag--ink{color:var(--yellow);background:var(--blue-ink)}
/* slide C: cutout over skyline */
.sslide--hero{background:var(--yellow);display:flex;align-items:flex-end}
.sslide__skyline{position:absolute;bottom:-2%;left:0;width:100%;opacity:.16;filter:grayscale(1);pointer-events:none}
.sslide__hero-copy{position:relative;z-index:2;padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;gap:calc(var(--u)*2.5);align-self:center}
.sslide__big{font-family:var(--display);font-weight:900;font-size:clamp(3.5rem,9vw,9rem);line-height:.86;text-transform:uppercase;color:var(--blue)}
.sslide__cutout{position:absolute;right:clamp(2%,6vw,9%);bottom:0;height:100%;object-fit:contain;object-position:bottom;z-index:1;filter:drop-shadow(0 24px 40px rgba(10,30,77,.28))}

/* ── 04 club ─────────────────────────── */
.club{display:grid;grid-template-columns:5fr 7fr;gap:var(--m);padding:calc(var(--u)*16) var(--m);align-items:center;background:var(--yellow)}
.club__copy .display{margin:calc(var(--u)*3) 0 calc(var(--u)*5)}
.club__body{max-width:38ch;font-size:1.05rem;line-height:1.65;margin-bottom:calc(var(--u)*5)}
/* The culture film moved to Join / Yellow Nation (community, belonging) and
   the crest-embroidery still moved here to Identity (craft, heritage) — the
   media now matches the narrative each section is actually telling.
   .club__img is a 16:10 figure with a caption; .join__img is a full-height
   stretch column, so the filmbox has to satisfy both. */
.club__img{position:relative;overflow:hidden}
.club__img img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.club__img:hover img{transform:scale(1.018)}
.filmbox{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--blue-ink)}
.filmbox__video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
/* in the join column the film fills the full height instead of a fixed ratio */
.join__img .filmbox{aspect-ratio:auto;height:100%}
.join__img:hover .filmbox__video{transform:scale(1.018)}
.filmbox::after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(0deg,rgba(6,24,79,.55),transparent);pointer-events:none}
.filmbox__marker{left:calc(var(--u)*2.5);bottom:calc(var(--u)*2.5)}
.filmbox__control{position:absolute;right:calc(var(--u)*2.5);bottom:calc(var(--u)*2.5);z-index:3;border:0;border-bottom:1px solid rgba(255,249,224,.7);background:transparent;color:var(--light);padding:6px 0;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.club__img figcaption{margin-top:calc(var(--u)*1.5)}

/* ── 05 squad ────────────────────────── */
.squad{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--blue) 0%,var(--blue-deep) 78%,var(--blue-ink) 100%);color:var(--light);padding:calc(var(--u)*13) var(--m);overflow:hidden}
.squad__head{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--u);margin-bottom:calc(var(--u)*3)}
.squad__head .display{margin-top:calc(var(--u)*1)}
/* right-aligned metadata stack — one shared right edge with the rule below */
.squad__head-meta{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u)*1);padding-top:calc(var(--u)*1.5);border-top:1px solid rgba(255,249,224,.28);text-align:right}
.squad__head-line{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--light-muted);font-variant-numeric:tabular-nums}
.squad__head-meta .tlink{margin-top:calc(var(--u)*1.25)}
/* featured panel — two columns: ~54% portrait / ~46% info */
.player-spotlight{--sx:1;position:relative;display:grid;grid-template-columns:54fr 46fr;min-height:clamp(460px,56vh,600px);margin-bottom:calc(var(--u)*6);background:var(--blue-ink);overflow:hidden;border-top:1px solid rgba(255,249,224,.2);border-bottom:1px solid rgba(255,249,224,.2)}
.player-spotlight[data-dir="prev"]{--sx:-1}
.player-spotlight__portrait{position:relative;overflow:hidden;background:var(--yellow);isolation:isolate}
.player-spotlight__portrait::after{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(0deg,rgba(6,24,79,.7),transparent)}
.player-spotlight__crest{position:absolute;right:-16%;bottom:-20%;width:72%;opacity:.12;z-index:0;pointer-events:none;filter:grayscale(1)}
/* cutout on the yellow field, fractionally right of centre, torso to the base line */
.player-spotlight__portrait img#spotlightImage{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:54% bottom;z-index:1;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.player-spotlight__portrait.is-changing img#spotlightImage{opacity:.22;transform:translateX(calc(var(--sx)*-14px))}
.player-spotlight__portrait.is-incoming img#spotlightImage{transition:none var(--ease-soft);opacity:0;transform:translateX(calc(var(--sx)*16px))}
.player-spotlight__number{font-family:var(--display);position:absolute;left:-.04em;bottom:-.16em;z-index:0;font-weight:900;font-size:clamp(13rem,25vw,28rem);line-height:.75;color:var(--green);letter-spacing:-.06em}
.player-spotlight__marker{left:calc(var(--u)*3);bottom:calc(var(--u)*3);z-index:3;color:rgba(255,249,224,.85)}
.player-spotlight__count{font-family:var(--num);position:absolute;top:calc(var(--u)*3);right:calc(var(--u)*3);z-index:5;font-weight:700;font-size:.86rem;letter-spacing:.1em;color:rgba(255,249,224,.42);font-variant-numeric:tabular-nums}
.player-spotlight__content{padding:clamp(2rem,4vw,4.25rem) clamp(2rem,4vw,4.25rem) clamp(2.5rem,4.5vw,4.75rem);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.player-spotlight__content>*{transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.player-spotlight__content>*:nth-child(2){transition-delay:.06s}
.player-spotlight__content>*:nth-child(3){transition-delay:.11s}
.player-spotlight__content>*:nth-child(4){transition-delay:.16s}
.player-spotlight__content>*:nth-child(5){transition-delay:.2s}
.player-spotlight__content.is-changing>*{opacity:0;transform:translateY(6px)}
.player-spotlight__content.is-incoming>*{transition:none var(--ease-soft);opacity:0;transform:translateY(10px)}
.player-spotlight__content h3{display:flex;flex-direction:column;font-family:var(--display);text-transform:uppercase;color:var(--yellow);margin:calc(var(--u)*2) 0 calc(var(--u)*3)}
.spot-first{font-weight:500;font-size:clamp(1.5rem,2.1vw,2.4rem);line-height:1.02;letter-spacing:.03em;color:rgba(255,222,0,.8)}
.spot-last{font-weight:900;font-size:clamp(4.1rem,5.9vw,7.2rem);line-height:.82;letter-spacing:-.01em;overflow-wrap:anywhere}
.player-spotlight__bio{max-width:50ch;color:var(--light-muted);line-height:1.72;font-size:1rem}
.player-spotlight__stats{display:flex;align-items:flex-start;gap:clamp(2rem,3.6vw,4rem);width:100%;max-width:560px;margin:calc(var(--u)*4.5) 0 calc(var(--u)*4);padding:calc(var(--u)*2.75) 0;border-top:1px solid rgba(255,249,224,.16);border-bottom:1px solid rgba(255,249,224,.16)}
.player-spotlight__stats .pdonut{gap:calc(var(--u)*1.25)}
.player-spotlight__stats .pdonut__ring{width:clamp(80px,7.4vw,100px);height:clamp(80px,7.4vw,100px)}
.player-spotlight__stats .pdonut__track{stroke-width:3.2}
.player-spotlight__stats .pdonut__arc{stroke-width:3.2}
.player-spotlight__stats .pdonut__ring b{font-size:clamp(1.4rem,1.7vw,1.8rem)}
.player-spotlight__stats .pdonut__label{font-size:.58rem}
/* Profile facts as a telemetry readout: auto-numbered channels, each seated on a
   datum hairline, tiny mono labels against display-scale values. Absent fields are
   omitted rather than shown empty, so the channel count varies per player. */
.spot-facts{counter-reset:fact;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*2.75) clamp(1.5rem,3vw,3rem);width:100%;max-width:560px}
.spot-facts div{counter-increment:fact;position:relative;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:calc(var(--u)*1.5)}
/* channel index — 01, 02, 03 … generated, never hand-numbered */
.spot-facts div::before{font-family:var(--condensed);content:counter(fact,decimal-leading-zero);grid-row:span 2;font-weight:500;font-size:.56rem;line-height:1.1;color:var(--yellow);opacity:.8;letter-spacing:.04em}
.spot-facts dt{font-family:var(--condensed);font-size:.54rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--light-muted)}
.spot-facts dd{font-family:var(--condensed);grid-column:2;margin-top:6px;font-weight:700;font-size:clamp(1rem,1.2vw,1.22rem);line-height:1;color:var(--light);text-transform:uppercase;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.spotlight__meta-row{display:flex;align-items:center;gap:calc(var(--u)*1.5)}
.spotlight__flag{width:30px;height:auto;display:block;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,249,224,.25)}
/* featured panel prev/next */
.player-spotlight__nav{position:absolute;top:50%;z-index:6;width:clamp(44px,3.6vw,54px);height:clamp(44px,3.6vw,54px);display:grid;place-items:center;border:0;cursor:pointer;font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1;transform:translateY(-50%);transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
/* invisible extended hit area */
.player-spotlight__nav::before{content:"";position:absolute;inset:-12px}
.player-spotlight__nav--prev{left:calc(var(--u)*2);background:var(--blue-ink);color:var(--yellow)}
.player-spotlight__nav--next{right:calc(var(--u)*2);background:var(--yellow);color:var(--blue-ink)}
.player-spotlight__nav span{display:block;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.player-spotlight__nav:hover{transform:translateY(calc(-50% - 2px));filter:contrast(1.12)}
.player-spotlight__nav--prev:hover span{transform:translateX(-2px)}
.player-spotlight__nav--next:hover span{transform:translateX(2px)}
.player-spotlight__nav:active{transform:translateY(-50%) scale(.96);transition-duration:.12s}
.player-spotlight__nav:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.squad__head .tlink{font-size:.68rem;color:var(--light-muted);border-color:rgba(255,249,224,.38)}
.squad__head .tlink:hover{color:var(--yellow);border-color:var(--yellow)}
/* squad directory (label + filters) */
.squad__directory{display:flex;align-items:center;gap:calc(var(--u)*3);margin-bottom:calc(var(--u)*3);padding-top:calc(var(--u)*3);border-top:1px solid rgba(255,249,224,.2)}
.squad__directory-label{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);white-space:nowrap}
.squad__filter{position:relative;display:flex;gap:calc(var(--u)*1.25);flex-wrap:wrap;justify-content:flex-start}
/* shared yellow selection surface glides between tabs (JS positions it) */
.chip-glide{position:absolute;top:0;left:0;background:var(--yellow);z-index:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1)}
.chip{position:relative;z-index:1;font-family:var(--body);height:42px;display:inline-flex;align-items:center;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--light-muted);background:transparent;border:1px solid rgba(255,249,224,.18);padding:0 calc(var(--u)*2.5);cursor:pointer;transition:color .25s var(--ease-soft),border-color .25s var(--ease-soft)}
.chip:hover{color:var(--light);border-color:rgba(255,249,224,.4)}
.chip.is-active{color:var(--blue);border-color:transparent}
.chip i{font-style:normal;opacity:.55;margin-left:8px;font-variant-numeric:tabular-nums}
.chip:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
/* squad grid */
/* horizontal player rail — immersive card strip with side arrows */
.squad__rail-wrap{position:relative;margin:0 calc(var(--m)*-1)}
.rail-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,249,224,.4);background:rgba(6,24,79,.72);backdrop-filter:blur(8px);color:var(--light);font-family:var(--display);font-weight:900;font-size:1.35rem;line-height:1;cursor:pointer;transition:background .2s var(--ease-soft),color .2s var(--ease-soft),border-color .2s var(--ease-soft),opacity .2s var(--ease-soft)}
.rail-nav--prev{left:calc(var(--m)*.35)}
.rail-nav--next{right:calc(var(--m)*.35)}
.rail-nav:hover:not(:disabled){background:var(--yellow);color:var(--blue-ink);border-color:var(--yellow)}
.rail-nav:disabled{opacity:.25;cursor:default}
.squad__rail{display:flex;gap:calc(var(--u)*2.5);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:var(--m);scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:calc(var(--u)*1.5) var(--m) calc(var(--u)*2.5)}
.squad__rail::-webkit-scrollbar{display:none}
.pcard{position:relative;flex:0 0 clamp(300px,24vw,360px);aspect-ratio:3/5;scroll-snap-align:start;overflow:hidden;background:linear-gradient(rgba(26,78,198,.4),rgba(26,78,198,.4)),var(--blue-deep) url("../assets/pattern/player-card-bg.webp") center/cover no-repeat;border:1px solid rgba(255,249,224,.1);cursor:pointer;opacity:0;translate:0 16px;transition:transform .8s cubic-bezier(.22,.61,.36,1),border-color .26s,opacity .5s ease,translate .55s cubic-bezier(.2,.8,.2,1)}
.pcard.is-in{opacity:1;translate:0 0}
/* slow grow on hover only — 2.2% keeps the card inside the rail's vertical padding
   so no scrollbar appears; z-index lifts it over its neighbours while enlarged */
.pcard:hover{transform:translateY(-3px) scale(1.022);border-color:rgba(255,249,224,.28);z-index:2}
/* top yellow line — draws on hover, full-width on selection */
.pcard::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--yellow);z-index:3;transition:width .28s cubic-bezier(.2,.8,.2,1)}
.pcard:hover::before{width:38%}
/* Editorial crop. Transparent — the club backdrop artwork on .pcard shows through.
   The box runs to the base of the card so the torso reaches the bottom edge; the 5%
   top inset is the breathing room above the hair (sources put the subject at Y 2%). */
.pcard__photo{position:absolute;inset:5% 0 0 0;overflow:hidden}
/* Square source in a 3:5 box, so `cover` scales by width and crops horizontally.
   Subject sits at X 15%–85%; a 26% anchor shows roughly canvas 11%–71%, which keeps
   the whole face in frame and runs the trailing shoulder off the right edge.
   Uniform canvases mean every card crops identically, so the rail stays level.
   Per-player nudge: style="--pos:20% bottom" on the card (lower = more right-crop). */
/* Camera push-in. Origin sits on the face (the 26% anchor puts it ~64% across,
   ~25% down), so the move reads as a lens creeping toward the player rather than
   a flat zoom. Slow on the way in, quicker on the way out — the pull-back timing
   lives here, the push timing on :hover. .pcard__photo clips it to frame. */
.pcard__photo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,26% bottom);transform-origin:64% 25%;transition:transform .7s cubic-bezier(.22,.61,.36,1),translate .3s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .pcard__photo img{transform:scale(1.085);transition:transform 2.6s cubic-bezier(.16,.5,.3,1)}
/* Legibility layer, raised to meet the enlarged crop. Starts at 32% and is
   effectively solid by ~62%, where .pcard__info begins, so the name, stats and
   metadata read cleanly over the torso. */
.pcard__scrim{position:absolute;inset:32% 0 0 0;background:linear-gradient(180deg,transparent 0%,rgba(10,42,128,.38) 28%,rgba(10,42,128,.76) 46%,rgba(10,42,128,.9) 62%,rgba(10,42,128,.94) 100%);z-index:1;pointer-events:none;transition:background .26s var(--ease-soft)}
.pcard__num{font-family:var(--condensed);position:absolute;top:calc(var(--u)*2);left:calc(var(--u)*2.25);font-weight:900;font-size:clamp(2.6rem,3.6vw,3.6rem);line-height:1;color:var(--blue);z-index:3}
.pcard img.pcard__flag{position:absolute;top:calc(var(--u)*2.25);right:calc(var(--u)*2.5);width:30px;height:20px;object-fit:cover;z-index:3;box-shadow:0 0 0 1px rgba(6,24,79,.45)}
.pcard__tag{position:absolute;top:calc(var(--u)*2.25 + 30px);right:calc(var(--u)*2.5);font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--yellow);padding:2px 6px;z-index:3}
.pcard__info{position:absolute;inset:auto 0 0 0;height:38%;padding:calc(var(--u)*2) calc(var(--u)*2.5) calc(var(--u)*2.25);z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--u)*1.25)}
/* name hierarchy — light first name, black surname as the scannable element.
   Fixed block height keeps every row level regardless of name length. */
.pcard__name{display:flex;flex-direction:column;font-family:var(--display);text-transform:uppercase;color:var(--light);min-height:3.05em;justify-content:flex-end;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.pcard__first{font-weight:500;font-size:clamp(.92rem,1.15vw,1.05rem);line-height:1.06;letter-spacing:.04em;color:rgba(255,249,224,.78)}
.pcard__last{font-weight:900;font-size:clamp(1.6rem,2.25vw,2.1rem);line-height:.94;letter-spacing:-.005em;overflow-wrap:anywhere;hyphens:auto}
.pcard:hover .pcard__name{transform:translateY(-2px)}
.pcard__row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u))}
/* one consolidated dial (arc = games played) + goals/assists as text splits */
.pcard__stats{display:flex;align-items:center;gap:calc(var(--u)*2);padding-top:calc(var(--u)*1.5);border-top:1px solid rgba(255,249,224,.14)}
.pcard__stats .pdonut{flex:0 0 auto}
.pcard__stats .pdonut__ring{width:74px;height:74px}
.pcard__stats .pdonut__ring b{font-size:1.32rem}
.pcard__splits{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1.5);flex:1 1 auto;min-width:0}
.pcard__splits dt{font-size:.52rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--light-muted);white-space:nowrap}
.pcard__splits dd{font-family:var(--num);font-weight:800;font-size:1.5rem;line-height:1;color:var(--light);margin-top:4px;font-variant-numeric:tabular-nums;transition:color .24s var(--ease-soft)}
.pcard:hover .pcard__splits dd{color:#fff}
.pdonut{display:grid;justify-items:center;gap:3px}
.pdonut__ring{position:relative;width:54px;height:54px;display:block;transform-origin:50% 50%;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.pdonut__ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pdonut__track{fill:none;stroke:rgba(255,249,224,.15);stroke-width:4}
.pdonut__arc{fill:none;stroke:var(--yellow);stroke-width:4;stroke-dasharray:0 100.5;transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1)}
.in .pdonut__arc,.squad__rail-wrap.in .pdonut__arc{stroke-dasharray:var(--arc) 100.5}
/* ── live-data hover ──────────────────────────────────
   The dial scales up a touch and the arc re-sweeps from --arc-lo back to its
   true value, so it reads as a fresh measurement rather than decoration.
   Ends on the same value it started at, so nothing jumps when it settles. */
@keyframes arcResweep{
  0%{stroke-dasharray:var(--arc-lo,0) 100.5}
  100%{stroke-dasharray:var(--arc) 100.5}
}
@keyframes valueSettle{
  0%{opacity:.45;transform:translateY(1px)}
  100%{opacity:1;transform:none}
}
.pcard:hover .pdonut__ring,.pdonut:hover .pdonut__ring{transform:scale(1.07)}
.pcard:hover .pdonut__arc,.pdonut:hover .pdonut__arc{animation:arcResweep .95s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .pdonut__ring b,.pdonut:hover .pdonut__ring b{animation:valueSettle .6s ease}
/* the three spotlight dials re-measure in sequence, not in unison */
.player-spotlight__stats .pdonut:nth-child(2) .pdonut__arc{animation-delay:.07s}
.player-spotlight__stats .pdonut:nth-child(3) .pdonut__arc{animation-delay:.14s}
.player-spotlight__stats:hover .pdonut__ring{transform:scale(1.05)}
.player-spotlight__stats:hover .pdonut__arc{animation:arcResweep .95s cubic-bezier(.2,.8,.2,1) both}
.player-spotlight__stats:hover .pdonut__ring b{animation:valueSettle .6s ease}
/* the card's splits sharpen alongside the dial */
.pcard:hover .pcard__splits dd{animation:valueSettle .6s ease}
.pdonut__ring b{font-family:var(--num);position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:.98rem;color:var(--light);font-variant-numeric:tabular-nums;transition:color .24s var(--ease-soft)}
.pcard:hover .pdonut__ring b{color:#fff}
.pdonut__label{font-family:var(--mono);font-size:.52rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--light-muted)}
.pcard__role{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,249,224,.72);transition:color .24s var(--ease-soft)}
.pcard__status{display:inline-flex;align-items:center;gap:6px;font-size:.58rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--light-muted)}
.pcard__status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);animation:statusPulse .9s ease 1}
@keyframes statusPulse{0%{box-shadow:0 0 0 0 rgba(0,158,96,.5)}100%{box-shadow:0 0 0 7px rgba(0,158,96,0)}}
.pcard__status--susp{color:#ff7a7a}.pcard__status--susp::before{background:#E03C31}
.pcard__status--out{color:#ffb454}.pcard__status--out::before{background:#ffb454}
.pcard__status--doubt{color:#ffd84d}.pcard__status--doubt::before{background:#ffd84d}
.pcard__record{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u));margin-top:calc(var(--u)*.5);padding-top:calc(var(--u)*1.5);border-top:1px solid rgba(255,249,224,.14)}
.pcard__gp{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--light-muted)}
.pcard__gp b{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--light);margin-left:5px}
/* discipline — literal booking cards (the one place rounded corners are correct,
   because the object being depicted is a rounded card). Count sits inside.
   Never colour alone: the aria-label on .pcard__disc carries the meaning. */
.pcard__disc{display:flex;justify-content:flex-end;gap:6px}
.disc{font-family:var(--num);min-width:17px;height:23px;padding:0 4px;border-radius:3px;display:inline-grid;place-items:center;font-weight:800;font-size:.8rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--blue-ink)}
.disc--y{background:#FFD84D}
.disc--r{background:#E03C31;color:#fff}
.pcard.is-hidden{display:none}
/* selected card — full yellow top rail, brighter dock, raised image, green corner marker */
.pcard.is-selected::before{width:100%}
.pcard.is-selected::after{content:"";position:absolute;top:0;left:0;width:10px;height:10px;background:var(--green);z-index:4}
/* selected: keep the artwork, lift the tone through the scrim rather than repainting the card */
.pcard.is-selected{border-color:rgba(255,249,224,.34)}
.pcard.is-selected .pcard__scrim{background:linear-gradient(180deg,transparent 0%,rgba(30,74,180,.38) 28%,rgba(24,62,158,.76) 46%,rgba(18,52,140,.9) 62%,rgba(18,52,140,.94) 100%)}
.pcard.is-selected .pcard__num{color:var(--yellow)}
.pcard.is-selected .pcard__photo img{translate:0 -4px}
.pcard.is-selected .pcard__role{color:var(--yellow)}
.pcard:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}

/* ── club line-art watermarks ─────────────────────────
   Yellow line drawings on transparent, sat low in the stack as brand texture.
   Kept faint and pointer-inert so they never compete with content. */
.squad::before,.squad__head::before,.stories::before,.footer::before{
  content:"";position:absolute;pointer-events:none;z-index:-1;
  background-repeat:no-repeat;background-size:contain}
/* Chloorkop, the training base — behind the squad */
.squad::before{right:calc(var(--m)*-.25);bottom:0;translate:0 var(--py,0px);width:min(58vw,900px);height:min(38vw,600px);
  opacity:.11;background-image:url("../assets/line-vectors/chloorko-line-02-.png");background-position:right bottom}
/* the team — in the open space beside THE SQUAD masthead */
/* The team, scaled up and pushed off the right edge — .squad clips it, so the
   drawing reads as cropped by the page rather than floated inside it.
   `translate` carries the scroll drift so it composes with the transform above. */
/* The team line drawing used to sit here and didn't work — a photographic
   subject cropped behind a masthead read as an accident rather than a
   device. Replaced with the registration field, faded out to the right so
   the masthead type keeps a clean ground and the texture resolves into
   nothing before it reaches the head-meta. Same motif, same pitch (32px)
   as everywhere else — direction from the mask only. */
.squad__head::before{right:0;top:50%;transform:translateY(-50%);
  translate:0 var(--py,0px);
  width:min(66vw,1000px);height:min(30vw,420px);opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 11v10M11 16h10' stroke='%23FFF9E0' stroke-opacity='0.16' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size:32px 32px;background-repeat:repeat;background-position:right center;
  -webkit-mask-image:linear-gradient(75deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 100%);
  mask-image:linear-gradient(75deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 100%)}
/* Chloorkop, the portrait study — in the From Chloorkop strip */
.stories::before{right:calc(var(--m)*.5);top:0;translate:0 var(--py,0px);width:min(22vw,300px);height:min(30vw,420px);
  opacity:.12;background-image:url("../assets/line-vectors/chloorko-line-03-.png");background-position:right top}
/* Pretoria — a skyline sitting under the footer */
.footer::before{left:0;right:0;bottom:0;translate:0 var(--py,0px);height:min(30vw,420px);
  opacity:.09;background-image:url("../assets/line-vectors/pretoria.png");background-position:center bottom;background-size:cover}

/* ── hover micro-interactions ──────────────────────────
   One shared vocabulary: things lift slightly, images breathe, and underlines
   sweep from the leading edge. Every curve comes from the easing scale, and the
   whole layer is suppressed under prefers-reduced-motion at the foot of the file. */

/* nav + footer links: underline sweeps in from the left */
.nav__links a{position:relative}
.nav__links a::after,.footer a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--duration-base) var(--ease-enter)}
.nav__links a:hover::after,.footer a:not(.btn):hover::after{transform:scaleX(1)}
.nav__links a.is-open::after{display:none}
.footer a:not(.btn){position:relative;transition:color var(--duration-fast) var(--ease-soft)}

/* buttons: a small spring lift */
.btn{transition:transform var(--duration-base) var(--ease-spring),
                background-color var(--duration-fast) var(--ease-soft),
                color var(--duration-fast) var(--ease-soft)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:var(--duration-micro)}

/* crests answer the cursor */
.fixture__badge,.ticket__crest{transition:transform var(--duration-base) var(--ease-spring)}
.card:hover .fixture__badge,.card:hover .ticket__crest{transform:scale(1.05)}

/* stat blocks in the legacy strip */
.stat{transition:transform var(--duration-base) var(--ease-enter)}
.stat:hover{transform:translateY(-4px)}
.stat__cup{transition:transform var(--duration-slow) var(--ease-spring),opacity var(--duration-fast) var(--ease-soft)}
.stat:hover .stat__cup{transform:translateY(-3px) rotate(-4deg)}

/* story cards: the image already scales — add a lift under it */
.story{transition:transform var(--duration-base) var(--ease-enter)}
.story:hover{transform:translateY(-3px)}
.story__memorial img{object-position:74% center;filter:grayscale(1) contrast(1.04)}

/* ── 06 legacy ───────────────────────── */
.legacy{position:relative;overflow:hidden;padding:calc(var(--u)*18) var(--m);color:var(--light)}
.legacy__bg{position:absolute;inset:-8% 0}
.legacy__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.legacy__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,24,79,.92) 0%,rgba(6,24,79,.68) 42%,rgba(6,24,79,.2) 78%),
  linear-gradient(0deg,rgba(6,24,79,.96) 0%,rgba(6,24,79,.5) 48%,rgba(10,42,128,.18) 100%)}
.legacy__content{position:relative;z-index:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*5) calc(var(--u)*4);margin:calc(var(--u)*10) 0 calc(var(--u)*8)}
.stat{padding-top:calc(var(--u)*3);padding-bottom:calc(var(--u)*2);background:linear-gradient(180deg,rgba(255,249,224,.05),transparent 62%)}
.stat b{font-family:var(--display);display:block;font-weight:900;font-size:clamp(7rem,17vw,17rem);line-height:.82;color:var(--yellow);font-variant-numeric:tabular-nums}
/* trophy line-art beside each honour count */
.stat{display:flex;flex-direction:column;align-items:flex-start}
.stat__cup{width:clamp(72px,7vw,116px);height:auto;margin-bottom:calc(var(--u)*1.5);opacity:.92;filter:drop-shadow(0 0 0 transparent)}
.stat span{display:block;margin-top:calc(var(--u)*1.5);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--light-muted)}

/* ── 07 join (full-bleed collage + cream panel) ── */
.join{display:grid;grid-template-columns:1.05fr .95fr;background:var(--yellow);align-items:stretch;padding:0;overflow:hidden}
.join__img{overflow:hidden;min-height:clamp(460px,64vh,800px)}
.join__img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.join__img:hover img{transform:scale(1.04)}
.join__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.25rem,6vw,6rem)}
.join__copy .display{margin:calc(var(--u)*3) 0 calc(var(--u)*5)}
.join__title{color:var(--ink)}
.join__body{max-width:36ch;font-size:1.05rem;line-height:1.65;margin-bottom:calc(var(--u)*5)}

/* ── 08 gallery ──────────────────────── */
.gallery{background:var(--blue-deep);color:var(--light);padding:calc(var(--u)*16) var(--m)}
.gallery__head{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u)*4);margin-bottom:calc(var(--u)*7);flex-wrap:wrap}
.gallery__head .display{margin-top:calc(var(--u)*2)}
.gallery__social{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u)*1.5)}
.gallery__social a{font-size:.8rem;font-weight:500;letter-spacing:.06em;color:var(--light-muted);transition:color .25s var(--ease-soft)}
.gallery__social a:hover{color:var(--yellow)}
.gallery__social .tlink--light{margin-top:calc(var(--u)*1.5)}
/* ── Sundowns TV video wall ───────────────────────────
   Cinematic hero, then equal-weight rows grouped by strand. Captions sit under
   each frame so titles never fight the image. Facades only: the YouTube iframe
   is injected on click, so no third-party frame loads until the user asks. */
.vwall{display:flex;flex-direction:column;gap:calc(var(--u)*7)}
.vtile{position:relative;display:flex;flex-direction:column;gap:calc(var(--u)*1.75);
  opacity:0;translate:0 16px;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.vtile.in{opacity:1;translate:0 0}
/* the frame as a lit panel: hairline edge, a top sheen catching the light,
   and a deepening ambient shadow on hover. Same restrained gloss language
   as the league-table rows — no bevels, no glow. */
.vtile__media{position:relative;overflow:hidden;background:var(--blue-ink);aspect-ratio:16/9;
  border-radius:var(--radius-card);border:1px solid rgba(255,249,224,.1);
  box-shadow:0 18px 34px -24px rgba(0,0,0,.8);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow var(--duration-base) var(--ease-soft),border-color var(--duration-base) var(--ease-soft)}
.vtile__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,249,224,.11),transparent 26%)}
.vtile:hover .vtile__media{transform:translateY(-4px);border-color:rgba(255,249,224,.22);
  box-shadow:0 26px 46px -24px rgba(0,0,0,.9)}
/* hero */
.vtile--hero .vtile__media{aspect-ratio:21/9}
.vtile--hero:hover .vtile__media{transform:none}
/* segment header on the .sec-head model: the strand name as a mono spec
   label rather than a condensed headline, with the count promoted to a
   real numeral so the row carries scale contrast instead of one flat size.
   Hairline rule runs out to the edge — the "measured" read. */
.vrow{display:flex;flex-direction:column;gap:calc(var(--u)*2.5)}
.vrow__head{display:flex;align-items:baseline;gap:calc(var(--u)*2)}
.vrow__label{font-family:var(--mono);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--light);flex:0 0 auto}
.vrow__count{font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,2.2vw,2rem);
  line-height:.8;letter-spacing:-.02em;color:var(--yellow);font-variant-numeric:tabular-nums;
  order:-1;flex:0 0 auto;align-self:flex-end}
.vrow__head::after{content:"";flex:1;height:1px;background:rgba(255,249,224,.16);align-self:center}
/* three across — bigger frames than the previous four */
.vrow__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*3) calc(var(--u)*2.5)}
.vtile__play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;display:block}
.vtile__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
/* sddefault fallback is 4:3 with letterbox bars — crop those out */
.vtile__thumb.is-fallback{transform:scale(1.34)}
.vtile:hover .vtile__thumb{transform:scale(1.05)}
.vtile:hover .vtile__thumb.is-fallback{transform:scale(1.4)}
/* caption under the frame — full contrast, nothing behind it to fight */
.vtile__cap{display:flex;flex-direction:column;gap:9px}
.vtile__tag{font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--yellow)}
/* uppercase display face — titles now read as broadcast supers rather than
   article headlines, which is what the strand actually is */
.vtile__title{font-family:var(--condensed);font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(1.4rem,1.95vw,1.95rem);
  line-height:1.16;color:var(--light);transition:color .24s var(--ease-soft)}
.vtile:hover .vtile__title{color:var(--yellow)}
.vtile__ext{margin-top:2px;font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--light-muted);opacity:0;transform:translateY(-2px);
  transition:opacity .24s var(--ease-soft),transform .24s var(--ease-soft),color .24s var(--ease-soft);align-self:flex-start}
.vtile:hover .vtile__ext,.vtile__ext:focus-visible{opacity:1;transform:none}
.vtile__ext:hover{color:var(--yellow)}
/* hero keeps its overlay — the image is large enough to carry type */
.vtile--hero .vtile__ov{position:absolute;inset:auto 0 0 0;z-index:2;display:flex;flex-direction:column;gap:10px;
  padding:clamp(1.5rem,3.5vw,3.25rem);
  background:linear-gradient(0deg,rgba(6,24,79,.94),rgba(6,24,79,.55) 46%,transparent)}
.vtile--hero .vtile__title{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,3.8vw,3.8rem);
  line-height:1;text-transform:uppercase;text-shadow:0 2px 24px rgba(6,24,79,.5)}
.vtile--hero:hover .vtile__title{color:var(--light)}
.vtile__btn{position:absolute;top:calc(var(--u)*2);left:calc(var(--u)*2);width:52px;height:52px;
  display:grid;place-items:center;background:var(--yellow);
  transition:transform .26s cubic-bezier(.2,.8,.2,1),background .24s}
.vtile__btn svg{width:24px;height:24px;fill:var(--blue-ink)}
.vtile--hero .vtile__btn{width:clamp(60px,5vw,84px);height:clamp(60px,5vw,84px)}
.vtile--hero .vtile__btn svg{width:clamp(28px,2.4vw,38px);height:clamp(28px,2.4vw,38px)}
.vtile:hover .vtile__btn{transform:scale(1.1);background:var(--light)}
.vtile__play:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
/* ── the playing tile takes the stage ── */
.vtile.is-playing{grid-column:1 / -1;animation:takeStage .45s cubic-bezier(.2,.8,.2,1)}
.vtile.is-playing .vtile__media{aspect-ratio:16/9;transform:none}
.vtile.is-playing .vtile__title{color:var(--yellow)}
@keyframes takeStage{from{opacity:.55;transform:scale(.985)}to{opacity:1;transform:none}}
.vtile__close{position:absolute;top:calc(var(--u)*1.5);right:calc(var(--u)*1.5);z-index:4;
  width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;cursor:pointer;
  background:var(--blue-ink);color:var(--light);
  transition:background-color var(--duration-fast) var(--ease-soft),transform var(--duration-base) var(--ease-spring)}
.vtile__close svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.1;fill:none;stroke-linecap:square}
.vtile__close:hover{background:var(--yellow);color:var(--blue-ink);transform:scale(1.08)}
.vtile__close:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.vtile iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.vtile.is-playing .vtile__play{opacity:0;pointer-events:none}

/* ── partners marquee / footer ───────── */
.partners{background:var(--paper);border-top:var(--hair);border-bottom:var(--hair);padding:calc(var(--u)*6) 0;overflow:hidden;position:relative}
.partners__label{padding:0 var(--m) calc(var(--u)*3)}
.marquee2{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee2__track{display:flex;align-items:center;gap:clamp(3rem,7vw,7rem);width:max-content;animation:slidepartners 38s linear infinite}
.partners:hover .marquee2__track{animation-play-state:paused}
/* Per-logo optical sizing — wordmarks read smaller than square marks at the same
   pixel height, so squares are scaled down and wide wordmarks up to balance. */
.marquee2__track img{height:clamp(34px,3.9vw,54px);width:auto;opacity:.66;filter:grayscale(1);transition:opacity .3s var(--ease-soft),filter .3s var(--ease-soft)}
.marquee2__track img[alt="Puma"]{height:clamp(24px,2.6vw,36px)}
.marquee2__track img[alt="Huawei"],.marquee2__track img[alt="Ubuntu-Botho S&E"]{height:clamp(40px,4.6vw,64px)}
.marquee2__track img[alt="Nedbank"],.marquee2__track img[alt="Hyundai"],.marquee2__track img[alt="Herbalife"]{height:clamp(28px,3.1vw,42px)}
.marquee2__track img[alt="Red Bull"],.marquee2__track img[alt="Chery"]{height:clamp(36px,4.1vw,56px)}
/* Biogen ships as dark artwork — invert it so it reads like the rest on cream */
.marquee2__track img[alt="Biogen"]{height:clamp(38px,4.3vw,58px);filter:grayscale(1) invert(1);}
.marquee2__track img[alt="Biogen"]:hover{filter:grayscale(0) invert(1)}
.marquee2__track img:hover{opacity:1;filter:grayscale(0)}
@keyframes slidepartners{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.footer{background:var(--blue-ink);color:var(--light-muted);padding:calc(var(--u)*8) var(--m) calc(var(--u)*4);position:relative;isolation:isolate;overflow:hidden}
/* Chloorkop / Mamelodi data-grid map. The artwork carries its own soft edge,
   so the CSS mask only has to extend that falloff rather than cut a hard
   line — a longer, multi-stop ramp than before so it dissolves into the
   navy instead of ending. A second vertical mask stops the plate colliding
   with the footer's top and bottom rules. */
.footer::before{content:"";position:absolute;z-index:0;inset:-6% 0 -6% auto;width:min(78vw,1260px);pointer-events:none;
  background:url("../assets/pattern/sundowns-map-fade.webp") right center/auto 118% no-repeat;
  opacity:.3;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.02) 24%,rgba(0,0,0,.18) 46%,rgba(0,0,0,.52) 70%,#000 94%),
    linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.02) 24%,rgba(0,0,0,.18) 46%,rgba(0,0,0,.52) 70%,#000 94%),
    linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect}
.footer>*{position:relative;z-index:1}

/* restrained club sign-off */
.footer__masthead{position:relative;margin-bottom:calc(var(--u)*5)}
.footer__ghost{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.015em;font-size:clamp(2.8rem,7vw,7rem);color:var(--light);opacity:.12;text-align:left;pointer-events:none;user-select:none}

/* brand + nav grid */
.footer__grid{display:grid;grid-template-columns:1.1fr 2fr;gap:var(--m);padding-top:calc(var(--u)*4)}
.footer__brand{display:flex;align-items:center;gap:calc(var(--u)*2)}
.footer__brand img{width:56px}
.footer__brand span{font-family:var(--display);font-weight:800;font-size:1.1rem;line-height:1.05;text-transform:uppercase;color:var(--light)}
/* the statement line — the "MOTORSPORT IN ALL ITS MANIFESTATIONS" slot.
   Uppercase mono, wide tracking, opened leading, held to a narrow measure
   so it reads as a declaration rather than body copy. */
.footer__tagline{margin-top:calc(var(--u)*3.5);font-family:var(--mono);font-size:.82rem;
  font-weight:400;line-height:2;letter-spacing:.1em;text-transform:uppercase;
  color:var(--light);max-width:26ch}
.footer__social{display:flex;align-items:center;gap:calc(var(--u)*2);margin-top:calc(var(--u)*4)}
.footer__social a{display:grid;place-items:center;padding:3px 0;color:var(--light-muted);transition:color .2s var(--ease-soft),opacity .2s var(--ease-soft)}
.footer__social a:hover{color:var(--yellow)}
.footer__social a:focus-visible{color:var(--yellow);outline:1px solid currentColor;outline-offset:5px}
.footer__social svg{width:19px;height:19px;fill:currentColor}
.footer__social rect,.footer__social circle{fill:none;stroke:currentColor;stroke-width:1.8}
.footer__social .social-dot{fill:currentColor;stroke:none}
/* Nav columns as a spec list: one mono voice, wide tracking, and leading
   opened right up. The old .6u row padding packed the links tight like a
   utility sitemap; the reference sheets let list items breathe so the
   block reads as considered text, not a link dump. */
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*5)}
.footer__cols h4{font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--yellow);
  margin-bottom:calc(var(--u)*3)}
.footer__cols a{display:block;font-family:var(--mono);font-size:.78rem;font-weight:400;
  letter-spacing:.04em;padding:calc(var(--u)*1.15) 0;transition:color .2s var(--ease-soft),translate .2s var(--ease-soft)}
.footer__cols a:hover{color:var(--light);translate:3px 0}

/* inquiries */
.footer__inquiries{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m);align-items:start;margin-top:calc(var(--u)*7);padding-top:calc(var(--u)*2)}
.footer__ilabel{font-family:var(--mono);display:block;font-size:var(--fs-micro);font-weight:400;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--light-muted);margin-bottom:calc(var(--u)*2)}
.footer__iq a{position:relative;display:inline-block;font-size:.95rem;color:var(--light);padding-bottom:5px;transition:color .2s var(--ease-soft)}
.footer__iq a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--yellow);transition:right .22s ease}
.footer__iq a:hover{color:var(--yellow)}
.footer__iq a:hover::after,.footer__iq a:focus-visible::after{right:0}

/* + pattern negative space */
.footer__plus{position:relative;overflow:hidden;color:var(--light);height:clamp(44px,7vw,72px);opacity:.5;margin-top:calc(var(--u)*6);background-repeat:repeat;background-position:left center;
  background-size:clamp(24px,2.4vw,32px) clamp(24px,2.4vw,32px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 11v10M11 16h10' stroke='%23FFF9E0' stroke-width='1.2'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 34%,rgba(0,0,0,.3) 76%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 34%,rgba(0,0,0,.3) 76%,transparent 100%)}

/* bottom bar */
/* Bottom bar on the ТЯГА model: credits pinned to the extreme corners with
   the field left open between them, rather than three items competing for
   the centre. Legal hangs off the same left axis as everything above it;
   the credit sits far right; "Top" is pushed to its own line-end. Extra
   top margin buys the negative space the reference leans on so heavily. */
.footer__bottom{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;
  gap:calc(var(--u)*2) calc(var(--u)*4);border-top:var(--hair-light);
  margin-top:calc(var(--u)*9);padding-top:calc(var(--u)*3.5);
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em}
.footer__legal{display:flex;gap:calc(var(--u)*3.5);flex-wrap:wrap;text-transform:uppercase}
.footer__legal a{transition:color .2s var(--ease-soft)}.footer__legal a:hover{color:var(--light)}
.footer__credit{color:var(--light-muted);text-transform:uppercase;justify-self:end}
@media (max-width:820px){
  /* lighter plate + the same long falloff as desktop, so the map dissolves
     rather than stopping. Mobile-weight artwork (64K vs 192K). */
  .footer::before{width:100%;opacity:.2;background-size:auto 108%;background-position:72% center;
    background-image:url("../assets/pattern/sundowns-map-fade-mobile.webp");
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 24%,rgba(0,0,0,.26) 52%,#000 92%),
      linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 24%,rgba(0,0,0,.26) 52%,#000 92%),
      linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
  .footer__bottom{grid-template-columns:1fr;gap:calc(var(--u)*2)}
  .footer__credit{justify-self:start}
}
.footer__totop{display:inline-flex;align-items:center;gap:calc(var(--u));font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--light);border:1px solid rgba(255,249,224,.24);padding:calc(var(--u)) calc(var(--u)*1.6);transition:background .25s var(--ease-soft),color .25s var(--ease-soft),border-color .25s var(--ease-soft)}
.footer__totop:hover{background:var(--yellow);color:var(--blue-ink);border-color:var(--yellow)}

/* ── reveal ──────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ── responsive ──────────────────────── */
@media (max-width:1024px){
  .match-complete{grid-column:span 12}
  .bento__result{grid-column:span 12;grid-row:auto}
  .bento__table{grid-column:span 12;grid-row:auto}
  .bento__next{grid-column:span 12;grid-row:auto}
  .bento__pos,.bento__scorer{grid-column:span 12}
  .bento__snap{grid-column:span 12}
  .pcard{flex-basis:clamp(272px,40vw,330px)}
  .player-spotlight{grid-template-columns:52fr 48fr;min-height:clamp(440px,52vh,560px)}
  .vrow__grid{grid-template-columns:repeat(2,1fr)}
  .story--lead{min-height:clamp(420px,50vh,520px)}
}
@media (max-width:640px){
  /* collapse to two rows per club: rank+name+crest on top, stats compacted
     into one aligned group beneath — never wider than the viewport */
  .card--board>.board__head{padding:calc(var(--u)*2.25) calc(var(--u)*1.75) calc(var(--u)*1.25)}
  .board__colrow{display:none}
  .board__row{grid-template-columns:112px 42px minmax(0,1fr);grid-template-rows:auto auto;
    height:auto;min-height:128px;padding:calc(var(--u)*1.75) calc(var(--u)*1.5) calc(var(--u)*1.75) 0;row-gap:calc(var(--u)*1.1);overflow:hidden}
  .board__rank{grid-row:1;grid-column:2/3;font-size:1.9rem}
  .board__club{grid-row:1;grid-column:3/4}
  .board__name{font-size:1.4rem}
  .board__stats{grid-row:2;grid-column:2/4;justify-self:start;grid-template-columns:repeat(3,58px);
    gap:0 calc(var(--u)*1.5)}
  .board__stat{align-items:flex-start}
  .board__stat i{font-size:.6rem}
  .board__stat b{font-size:1.15rem}
  .board__stat--pts b{font-size:1.4rem}
  .board__crestcrop{grid-row:1/3;grid-column:1/2;height:auto;margin-left:0;padding-left:calc(var(--u)*.5)}
  .board__crestcrop img,.board__crestfallback{width:118px;height:118px;--crest-x:-4px}
  .board__row--focus .board__crestcrop img,.board__row--focus .board__crestfallback{width:176px;height:176px;--crest-x:-66px}
  .board__row--focus .board__name{font-size:1.6rem}
  .board__motif{width:70px;height:70px}
  .board__name{font-size:1.05rem;white-space:normal}
  .board__row--focus .board__name{font-size:1.18rem}
}
@media (max-width:820px){
  :root{--m:6vw}
  .ticket>*{padding:calc(var(--u)*2.25) calc(var(--u)*2.5)}
  .ticket__head{flex-direction:column;gap:calc(var(--u)*2)}
  .ticket__comp{align-items:flex-start;text-align:left}
  .ticket__actions{flex-direction:column}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  /* mega menu is desktop-only; tablet/mobile use the drawer accordion below */
  .mega{display:none}
  .mobile-menu{display:none;position:fixed;inset:0;z-index:99;background:var(--blue);flex-direction:column;justify-content:flex-start;padding:calc(var(--nav-h,84px) + var(--u)*3) var(--m) calc(var(--u)*6);gap:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mobile-menu.open{display:flex}
  .mob__top,.mob__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--u);padding:calc(var(--u)*2) 0;border:0;border-bottom:1px solid rgba(255,222,0,.24);background:transparent;text-align:left;font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,8vw,2.6rem);line-height:1;text-transform:uppercase;color:var(--yellow);cursor:pointer}
  .mob__toggle i{font-style:normal;font-size:1.5rem;color:var(--light);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
  .mob__toggle.is-open i{transform:rotate(45deg)}
  .mob__toggle:focus-visible,.mob__top:focus-visible,.mobile-menu a:focus-visible{outline:2px solid var(--light);outline-offset:3px}
  .mob__sub{display:flex;flex-direction:column;padding:calc(var(--u)*1.5) 0 calc(var(--u)*2)}
  .mob__sub a{padding:calc(var(--u)*1.25) 0;font-family:var(--body);font-weight:600;font-size:.94rem;letter-spacing:.1em;text-transform:uppercase;color:var(--light)}
  .mob__sub a:hover{color:var(--yellow)}
  .nav__brand img{width:36px}
  .nav__brand span{font-size:.82rem}
  .ticker__label{padding:0 calc(var(--u)*2);font-size:.55rem}
  .hero{min-height:100svh;align-items:flex-end}
  .hero__video{object-position:58% center}
  .hero__media::after{background:linear-gradient(180deg,rgba(6,24,79,.48) 0%,rgba(6,24,79,.08) 32%,rgba(6,24,79,.88) 76%,rgba(6,24,79,.98) 100%)}
  .hero__content{width:100%;padding:0 var(--m) calc(var(--u)*20)}
  .hero__eyebrow{margin-bottom:calc(var(--u)*1.5)}
  .hero__title{font-size:clamp(4.2rem,22vw,6.5rem);line-height:.82}
  .hero__sub{font-size:.86rem;margin-top:calc(var(--u)*2);text-shadow:0 1px 12px var(--blue-ink)}
  .hero__actions{margin-top:calc(var(--u)*2.5);gap:calc(var(--u)*2)}
  .hero__primary{padding:12px 14px;font-size:.62rem}
  .hero__match{left:var(--m);right:var(--m);bottom:calc(var(--u)*7);width:auto;grid-template-columns:1fr auto;align-items:end}
  .hero__match strong{font-size:1.18rem}
  .hero__match>span:last-child{grid-column:1/-1}
  .hero .anchor,.hero .scrollcue{display:none}
  .calibration--hero{display:none}
  .sec-head{flex-wrap:wrap;gap:calc(var(--u)*1.5)}
  .sec-head__meta{flex-basis:100%;white-space:normal}
  .bento__pos,.bento__scorer,.bento__snap{grid-column:span 12}
  .result-board{gap:calc(var(--u)*.75)}
  .result-board__team{gap:calc(var(--u)*.75)}
  .result-board__team .fixture__badge{width:44px;height:44px}
  .result-board__digit{font-size:clamp(4.4rem,21vw,6rem)}
  .result-board__team span{font-size:1rem;margin-top:var(--u)}
  .bento__next{min-height:680px}
  .bento__snap{grid-template-columns:1fr}
  .season-strip__head{gap:calc(var(--u)*2)}
  .snap{grid-template-columns:repeat(2,1fr)}
  .stories>.sec-head{padding:calc(var(--u)*8) var(--m) calc(var(--u)*3)}
  .stories__lead{grid-template-columns:1fr}
  .story--lead{min-height:clamp(360px,72vw,460px)}
  .story__copy{padding:calc(var(--u)*3)}
  .story__copy h2{font-size:3.4rem}
  .stories__side{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .story--small{min-height:260px}
  .fixture__score b{font-size:clamp(3.4rem,16vw,5rem)}
  .club,.join{grid-template-columns:1fr}
  .sslide--split{grid-template-columns:1fr}
  .sslide--split .sslide__art{display:none}
  .sslide__cutout{right:-6%;opacity:.9}
  .scorer{grid-template-columns:1fr}
  .scorer__photo{min-height:380px}
  .scorer__identity{align-items:flex-start}
  .scorer__name{font-size:3.6rem}
  .scorer__goals b{font-size:5rem}
  .scorer__metrics{grid-template-columns:repeat(2,1fr);gap:calc(var(--u)*1.5);padding:calc(var(--u)*1.5)}
  .player-spotlight{grid-template-columns:1fr;min-height:0}
  .player-spotlight__portrait{min-height:clamp(420px,64vw,540px)}
  .player-spotlight__content{padding:calc(var(--u)*4) calc(var(--u)*3)}
  .player-spotlight__content h3{font-size:clamp(3.4rem,12vw,4.6rem)}
  .player-spotlight__nav{top:clamp(210px,32vw,270px)}
  .player-spotlight__nav--next{background:var(--blue-ink);color:var(--yellow)}
  .squad__directory{flex-direction:column;align-items:flex-start;gap:calc(var(--u)*2)}
  .squad__filter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .squad__filter::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;flex:0 0 auto}
  .rail-nav{width:42px;height:42px;font-size:1.1rem}
  .rail-nav--prev{left:calc(var(--u)*1.5)}
  .rail-nav--next{right:calc(var(--u)*1.5)}
  .pcard{flex-basis:min(82vw,320px)}
  .squad__head-meta{align-items:flex-start;text-align:left;border-top:0;padding-top:0}
  .player-spotlight__count{top:auto;bottom:calc(var(--u)*2);right:calc(var(--u)*2)}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:calc(var(--u)*6)}
  .vrow__grid{grid-template-columns:1fr}
  .vtile--hero .vtile__media{aspect-ratio:16/9}
  .gallery__head{flex-direction:column;align-items:flex-start}
  .gallery__social{flex-flow:row wrap;align-items:center}
  .footer__grid{grid-template-columns:1fr;gap:calc(var(--u)*6)}
  .footer__cols{grid-template-columns:repeat(2,1fr)}
  .footer__ghost{text-align:left}
  .footer__inquiries{grid-template-columns:1fr 1fr;gap:calc(var(--u)*5)}
  .footer__seal{grid-column:1 / -1;justify-self:start}
  .footer__bottom{justify-content:flex-start}
}
@media (max-width:560px){
  .ticket__head{padding:calc(var(--u)*2) calc(var(--u)*2.25)}
  .ticket__day{font-size:3.8rem}
  .ticket__crest{width:88px;height:88px}
  .ticket__title{font-size:clamp(2.35rem,12vw,3.25rem)!important}
  .stories__side{grid-template-columns:1fr}
  .story--small{min-height:320px}
  .footer__inquiries{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .hero__title .line span{transform:none;animation:none}
  .reveal{opacity:1;transform:none}
  /* neutralise the hover-lift layer and any scroll drift */
  .btn:hover,.stat:hover,.story:hover,.card:hover .fixture__badge,.card:hover .ticket__crest,
  .stat:hover .stat__cup{transform:none}
  .nav__links a:hover::after,.footer a:not(.btn):hover::after{transform:scaleX(0)}
  [data-parallax],[data-parallax-var]{transform:none;--py:0px}
  .hero__video{display:none}
  .hero__media{background:url("../assets/hero-stadium.webp") center/cover no-repeat}
  .filmbox__video{display:none}
  .filmbox{background:url("../assets/stadium-epic.webp") center/cover no-repeat}
  .filmbox__control{display:none}
  .matchday.motion-ready .match-complete,.matchday.motion-ready .bento__next,.matchday.motion-ready .bento__scorer,.matchday.motion-ready .bento__snap,.matchday.motion-ready .result-board__team .fixture__badge,.matchday.motion-ready .result-board__digit,.matchday.motion-ready .result-board__dash,.matchday.motion-ready .result-board__team span,.matchday.motion-ready .board__row,.matchday.motion-ready .board__stat{opacity:1;transform:none;animation:none}
  .matchday.motion-ready .board__crestcrop img{opacity:1;translate:var(--crest-x) 0;animation:none}
}

/* ── Neo Industrial Space Tech · system consolidation ─────────────────
   This final layer deliberately corrects legacy rules without destabilising
   the established components above. Yellow is a performance signal; ivory
   and navy carry the page. Small data uses the mono face. */
body{background:var(--paper)}
.nav.scrolled,.mega,body.mega-open .nav{background:var(--paper)}
.club{background:var(--paper)}
.display{color:var(--blue-ink)}
.display--light{color:var(--light)}

/* JI Lilliwaup is a display label face. Azeret Mono owns small machine data. */
.meta,.anchor,.calibration,.hero__match-state,.hero__match>span:last-child,
.wchip,.wstatus__comp,.result-board__action,.ticket__when i,.ticket__tag,
.ticket__round,.ticket__venue,.card__label,.result-board__dash,.live-dot,
.counter__unit>span,.squad__head-line,.pdonut__label,.pcard__role,.pcard__gp,
.board__ch,.board__tag,.board__stat i{font-family:var(--mono);font-size:var(--fs-micro)}
.board__stat b,.stat b{font-family:var(--display)}
.meta-strong,.hero__eyebrow,.hero__primary,.hero__sound,.ticker__label,
.season-strip__head>span,.snap span,.scorer__goals span,.scorer__metrics dt,
.squad__directory-label,.filmbox__control,.gallery__social a,
.footer__totop{font-family:var(--mono);font-size:var(--fs-micro)}

/* Matchday: next fixture first, full-width, with the result demoted. */
.matchday{position:relative;overflow:hidden;isolation:isolate;background:var(--paper)}
.matchday__loftus-line{position:absolute;z-index:0;top:2.5rem;right:var(--m);width:min(52vw,780px);max-width:none;opacity:.16;pointer-events:none;mix-blend-mode:multiply}
.matchday>:not(.matchday__loftus-line){position:relative;z-index:1}
.bento{align-items:stretch}
.bento__next{order:1;grid-column:1/-1;grid-row:auto;min-height:clamp(560px,68vh,760px);
  display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 11v10M11 16h10' stroke='%23FFF9E0' stroke-opacity='0.07' stroke-width='1.2'/%3E%3C/svg%3E"),
    url("../assets/venue/next-match-stadium.webp");
  background-position:center,center 54%;background-size:32px 32px,cover;
  border-color:rgba(255,249,224,.28);
  box-shadow:0 34px 80px -42px rgba(6,24,79,.72),0 14px 32px -22px rgba(6,24,79,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease-soft),border-color .3s var(--ease-soft)}
.bento__next:hover,.bento__next:focus-within{transform:translateY(-3px);border-color:rgba(255,249,224,.42);box-shadow:0 44px 92px -40px rgba(6,24,79,.84),0 20px 40px -24px rgba(6,24,79,.58),inset 0 1px 0 rgba(255,255,255,.28)}
.bento__next::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 22%,rgba(255,255,255,.1) 42%,transparent 58%);transform:translateX(-55%);transition:transform 1.1s var(--ease-soft)}
.bento__next:hover::before,.bento__next:focus-within::before{transform:translateX(45%)}
.bento__next>*{position:relative;z-index:1}
.ticket::after{inset:0;background:linear-gradient(90deg,rgba(6,24,79,.97),rgba(6,24,79,.78) 54%,rgba(6,24,79,.92))}
.ticket__head{grid-column:1/-1;grid-row:1;background:rgba(6,24,79,.72);align-items:center;backdrop-filter:blur(12px) saturate(1.08)}
.ticket__matchup{grid-column:1/7;grid-row:2;justify-content:flex-start;padding:clamp(2rem,5vw,5rem)}
.ticket__titles{grid-column:7/-1;grid-row:2;align-self:center;text-align:left;padding:clamp(2rem,5vw,5rem)}
.ticket__title{align-items:flex-start;font-size:clamp(3rem,6.5vw,7rem)!important;line-height:.78}
.ticket__title em{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em}
.ticket__venue{text-align:left}
.ticket .counter{grid-column:1/9;grid-row:3;justify-content:center;gap:clamp(1rem,3vw,3rem);
  background:var(--blue-ink);border-top:1px solid rgba(255,249,224,.18)}
.ticket__actions{grid-column:9/-1;grid-row:3;margin:0;background:var(--blue-ink);
  border-top:1px solid rgba(255,249,224,.18);border-left:1px solid rgba(255,249,224,.18)}
.ticket__crest{width:clamp(120px,15vw,220px);height:clamp(120px,15vw,220px);filter:drop-shadow(0 16px 18px rgba(0,0,0,.2))}
.ticket__vs{font-family:var(--display);font-size:clamp(2rem,4vw,4rem);color:var(--yellow)}
.ticket .odo__digit{width:clamp(42px,5.4vw,72px);height:clamp(64px,7.8vw,96px)}
.ticket .odo__reel span{height:clamp(64px,7.8vw,96px);font-size:clamp(2.8rem,5vw,5rem)}

.match-complete{order:2;grid-column:span 8;grid-template-rows:auto auto;background:transparent;gap:calc(var(--u)*2)}
.bento__table{order:1}
.bento__result{order:2;min-height:0;padding:calc(var(--u)*2);background:var(--paper);
  box-shadow:none;border-color:rgba(10,30,77,.18)}
.bento__result:hover,.bento__result:focus-within{transform:none;box-shadow:none}
.bento__result::after,.bento__result::before,.bento__result .wtick{display:none}
.bento__result .result-board{padding:0}
.bento__result .result-board::before{display:none}
.bento__result .result-board__team .fixture__badge{width:48px;height:48px}
.bento__result .result-board__digit{font-size:3.6rem}
.bento__result .result-board__team span{font-size:1.2rem}
.bento__result .card__foot{padding-top:var(--u);border-top:var(--hair)}
.bento__scorer{order:3;grid-column:span 4}
.bento__snap{order:4;grid-column:1/-1}
.bento__scorer .scorer{grid-template-columns:1fr}
.bento__scorer .scorer__photo{min-height:320px}
.bento__scorer .scorer__identity{align-items:flex-start}
.bento__scorer .scorer__metrics{grid-template-columns:repeat(2,1fr)}

.board__tools{display:flex;align-items:center;gap:calc(var(--u)*2);flex-wrap:wrap;justify-content:flex-end}
.board__toggle{border:0;border-bottom:1px solid rgba(255,249,224,.48);background:transparent;
  color:var(--light);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--track-micro);
  text-transform:uppercase;padding:4px 8px;cursor:pointer;transition:background .2s var(--ease-soft),color .2s var(--ease-soft),border-color .2s var(--ease-soft)}
.board__toggle:hover{background:transparent;color:var(--blue);border-color:var(--blue);padding-inline:8px}
.board__toggle:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.card--board .board__head .card__label--light,
.card--board .board__head .live-dot,
.card--board .board__head .board__toggle{color:var(--blue-ink)}
.card--board .board__head .live-dot::before{background:var(--green)}
.card--board .board__head .board__toggle{border-color:rgba(10,30,77,.42)}
.card--board .board__head .board__toggle:hover{color:var(--blue);border-color:var(--blue)}

/* Shared telemetry mastheads for the previously editorial-only sections. */
.section-system{grid-column:1/-1}
.club__system{margin-bottom:calc(var(--u)*2)}
.club__system .mc-masthead,.join__system .mc-masthead{height:clamp(58px,8vw,108px)}
.club__system .cutnum,.join__system .cutnum{color:var(--blue-ink);opacity:.12}
.club__system .mc-masthead,.join__system .mc-masthead{border-bottom-color:rgba(10,30,77,.22)}
.legacy__content>.sec-head{margin-bottom:calc(var(--u)*7)}
.join{background:var(--yellow)}
.join__system{padding:calc(var(--u)*10) var(--m) 0}
.join__actions{display:flex;gap:calc(var(--u)*1.5);max-width:440px}
.join__actions .tbtn{flex:1}
.join__copy{position:relative;isolation:isolate;overflow:hidden}
.join__copy::before{content:"";position:absolute;z-index:0;inset:0;background:url("../assets/pattern/sun-system.webp") center/cover no-repeat;opacity:.12;mix-blend-mode:multiply;filter:saturate(.8)}
.join__copy::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(255,222,0,.66),rgba(255,222,0,.92))}
.join__copy>*{position:relative;z-index:2}
.join__img img{object-position:center}
.tbtn--ink{background:var(--blue-ink);color:var(--light);border-color:var(--blue-ink)}
.tbtn--ink:hover{background:var(--blue);border-color:var(--blue)}

@media(max-width:1024px){
  .ticket__matchup{grid-column:1/6}
  .ticket__titles{grid-column:6/-1}
  .match-complete{grid-column:1/-1}
  .bento__scorer{grid-column:1/-1}
  .bento__scorer .scorer{grid-template-columns:36% 1fr}
}
@media(max-width:820px){
  .matchday__loftus-line{top:5rem;right:-34vw;width:125vw;opacity:.1}
  .matchday.motion-ready .board__row,
  .matchday.motion-ready .board__stat{opacity:1;transform:none;animation:none}
  .matchday.motion-ready .board__crestcrop img{opacity:1;translate:var(--crest-x) 0;animation:none}
  .bento__next{min-height:0;display:flex}
  .ticket__head,.ticket__matchup,.ticket__titles,.ticket .counter,.ticket__actions{width:100%}
  .ticket__matchup{justify-content:center;padding:calc(var(--u)*4) calc(var(--u)*2)}
  .ticket__titles{text-align:center;padding:calc(var(--u)*3)}
  .ticket__title{align-items:center;font-size:clamp(2.8rem,14vw,5rem)!important}
  .ticket__venue{text-align:center}
  .ticket .counter{gap:calc(var(--u)*1.25);padding:calc(var(--u)*3) calc(var(--u)*1.5)}
  .ticket__actions{border-left:0}
  .ticket .odo__digit{width:clamp(30px,8.5vw,42px);height:56px}
  .ticket .odo__reel span{height:56px;font-size:2.4rem}
  .bento__scorer .scorer{grid-template-columns:1fr}
  .board__head{align-items:flex-start;flex-direction:column;gap:calc(var(--u)*1.5)}
  .board__tools{width:100%;justify-content:space-between}
  .join__actions{flex-direction:column}
}

/* ── Matchday campaign module ─────────────────────────────
   A four-layer composition: stadium / blue atmosphere / live fixture UI /
   untouched player cut-out. Scoped to the homepage fixture only. */
.ticket--campaign.bento__next{
  min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:0;
  overflow:hidden;background:#1246C8;border:1px solid rgba(245,242,233,.24);
  border-radius:0;box-shadow:none;transform:none}
.ticket--campaign.bento__next:hover,.ticket--campaign.bento__next:focus-within{
  transform:none;border-color:rgba(245,242,233,.36);box-shadow:none}
.ticket--campaign::before,.ticket--campaign::after{display:none}
.ticket--campaign>*{position:relative;z-index:1;padding:0;border:0}

.ticket--campaign .ticket__head{
  min-height:78px;padding:16px clamp(24px,4vw,56px);display:flex;align-items:center;
  background:#1246C8;border-bottom:1px solid rgba(245,242,233,.24);backdrop-filter:none}
.ticket--campaign .ticket__day{color:#FFDE00;font-size:clamp(3.4rem,5vw,5rem)}
.ticket--campaign .ticket__when i{color:rgba(245,242,233,.72)}
.ticket--campaign .ticket__when i:first-child{color:#FFDE00}
.ticket--campaign .ticket__tag{color:#F5F2E9;border-color:rgba(255,222,0,.7)}
.ticket--campaign .ticket__round{color:#FFDE00}

.ticket__visual{
  position:relative;isolation:isolate;overflow:hidden;min-height:clamp(340px,30vw,390px);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;
  gap:clamp(12px,1.6vw,24px);padding:clamp(24px,4vw,56px);background:#1246C8}
.ticket__stadium{position:absolute;z-index:0;inset:0;display:block}
.ticket__stadium img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 58%;
  filter:saturate(.88) contrast(1.04)}
.ticket__visual::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(18,70,200,.98) 0%,rgba(18,70,200,.88) 34%,rgba(18,70,200,.62) 68%,rgba(18,70,200,.42) 100%)}
.ticket__visual::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M17 12v10M12 17h10' stroke='%23F5F2E9' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E");
  background-size:34px 34px;mask-image:linear-gradient(90deg,#000,transparent 40%)}
.ticket__visual>.ticket__matchup,.ticket__visual>.ticket__titles,.ticket__coordinates{
  position:relative;z-index:3}

.ticket--campaign .ticket__matchup{
  grid-column:1/4;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;justify-content:stretch;gap:clamp(10px,1.4vw,22px);padding:0}
.ticket__club{min-width:0;display:grid;justify-items:center;gap:10px;margin:0}
.ticket--campaign .ticket__crest{
  width:clamp(90px,8.6vw,132px);height:clamp(90px,8.6vw,132px);object-fit:contain;
  filter:none;transition:transform .3s var(--ease-spring)}
.ticket__club:nth-child(3) .ticket__crest{mix-blend-mode:screen}
.ticket__club figcaption{
  max-width:15ch;text-align:center;font:600 .52rem/1.35 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(245,242,233,.72)}
.ticket--campaign .ticket__vs{
  font-family:var(--num);font-size:clamp(1.8rem,2.8vw,3rem);color:#FFDE00}

.ticket--campaign .ticket__titles{
  grid-column:4/10;align-self:center;min-width:0;padding:0;text-align:left}
.ticket__occasion{
  margin-bottom:12px;font:700 clamp(.58rem,.75vw,.7rem)/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;color:#FFDE00}
.ticket--campaign .ticket__title{
  display:flex;align-items:flex-start;gap:3px;font-size:clamp(2.9rem,4.6vw,5rem)!important;
  line-height:.77;color:#F5F2E9}
.ticket--campaign .ticket__title em{
  margin:4px 0 2px;font-family:var(--mono);font-size:.16em;line-height:1;
  letter-spacing:.18em;color:#FFDE00;opacity:1}
.ticket--campaign .ticket__venue{
  margin-top:18px;text-align:left;color:rgba(245,242,233,.78);white-space:nowrap}

.ticket__coordinates{
  position:absolute;left:clamp(24px,4vw,56px);top:24px;display:grid;gap:4px;
  font:600 .52rem/1.2 var(--mono);letter-spacing:.12em;color:#FFDE00}
.ticket__coordinates i{position:relative;width:18px;height:18px;margin-bottom:8px;border:1px solid #FFDE00;border-radius:50%}
.ticket__coordinates i::before,.ticket__coordinates i::after{content:"";position:absolute;background:#FFDE00}
.ticket__coordinates i::before{left:50%;top:-6px;bottom:-6px;width:1px}
.ticket__coordinates i::after{top:50%;left:-6px;right:-6px;height:1px}

.ticket__player{position:absolute;z-index:4;right:clamp(12px,2.5vw,40px);top:0;height:168%;pointer-events:none}
.ticket__player img{display:block;width:auto;height:100%;max-width:none;object-fit:contain;object-position:top center;
  filter:none;opacity:1}

.ticket__utility{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(360px,1fr);
  background:#1246C8;border-top:1px solid rgba(245,242,233,.24)}
.ticket--campaign .ticket__utility>.counter,.ticket--campaign .ticket__utility>.ticket__actions{
  grid-column:auto;grid-row:auto}
.ticket--campaign .ticket__utility .counter{
  width:auto;margin:0;padding:22px clamp(24px,4vw,56px);display:grid;
  grid-template-columns:repeat(4,minmax(76px,120px));justify-content:start;gap:clamp(14px,2.6vw,38px);
  background:transparent;border:0}
.ticket--campaign .counter__unit{gap:9px}
.ticket--campaign .counter__unit>span{color:rgba(245,242,233,.72)}
.ticket--campaign .odo__digit{width:clamp(38px,4vw,54px);height:clamp(58px,5.6vw,78px)}
.ticket--campaign .odo__reel span{height:clamp(58px,5.6vw,78px);font-size:clamp(2.5rem,4vw,4.2rem)}
.ticket--campaign .ticket__actions{
  width:auto;margin:0;padding:18px clamp(18px,2.2vw,28px);display:grid;grid-template-columns:1.15fr .85fr;
  align-items:stretch;gap:14px;background:transparent;border-left:1px solid rgba(245,242,233,.24)}
.ticket--campaign .tbtn{min-height:72px;padding:18px;font-family:var(--mono);gap:14px}
.ticket--campaign .tbtn span{transition:transform .22s var(--ease-soft)}
.ticket--campaign .tbtn:hover{transform:translateY(-2px)}
.ticket--campaign .tbtn:hover span{transform:translateX(3px)}

.ticket__info{
  min-height:68px;padding:12px clamp(24px,4vw,56px)!important;display:grid;
  grid-template-columns:minmax(320px,1.8fr) 1fr 1fr;align-items:center;gap:28px;
  background:#FFDE00;color:#06184F;border-top:1px solid rgba(6,24,79,.18)!important;
  font:600 .58rem/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ticket__info>p{justify-self:end}
.ticket__location{display:flex;align-items:center;gap:18px}
.ticket__location>img{flex:0 0 34px;width:34px;height:34px;object-fit:contain;rotate:90deg;
  filter:brightness(0) saturate(100%) invert(9%) sepia(53%) saturate(3144%) hue-rotate(218deg) brightness(77%) contrast(111%)}
.ticket__location span{display:grid}
.ticket__location small{font-size:.45rem;letter-spacing:.14em;opacity:.62}
.ticket__location strong{font-size:.62rem;letter-spacing:.08em}

@media(max-width:1120px){
  .ticket--campaign .ticket__matchup{grid-column:1/5}
  .ticket--campaign .ticket__titles{grid-column:5/10}
  .ticket--campaign .ticket__title{font-size:clamp(2.55rem,4.5vw,4.25rem)!important}
  .ticket__player{right:-16px;height:138%}
  .ticket__utility{grid-template-columns:1.8fr .8fr}
  .ticket--campaign .ticket__utility .counter{padding:20px 24px;grid-template-columns:repeat(4,minmax(58px,1fr));gap:8px}
  .ticket--campaign .odo__digit{width:clamp(32px,3.6vw,46px);height:64px}
  .ticket--campaign .odo__reel span{height:64px;font-size:clamp(2.4rem,3.7vw,3.4rem)}
  .ticket--campaign .ticket__actions{grid-template-columns:1fr}
  .ticket--campaign .tbtn{min-height:54px}
}

@media(max-width:820px){
  .ticket--campaign.bento__next{display:grid}
  .ticket--campaign .ticket__head{min-height:0;padding:18px 20px;flex-direction:row;align-items:flex-start}
  .ticket--campaign .ticket__comp{align-items:flex-end;text-align:right}
  .ticket__visual{min-height:660px;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;
    align-content:start;gap:30px;padding:38px 24px}
  .ticket__visual::before{background:linear-gradient(180deg,rgba(18,70,200,.98) 0%,rgba(18,70,200,.88) 48%,rgba(18,70,200,.58) 100%)}
  .ticket__coordinates{display:none}
  .ticket--campaign .ticket__titles{grid-column:1;grid-row:1;width:100%;padding:0;text-align:left}
  .ticket--campaign .ticket__title{align-items:flex-start;font-size:clamp(3rem,12vw,4.5rem)!important}
  .ticket--campaign .ticket__venue{max-width:26ch;white-space:normal;text-align:left;line-height:1.55}
  .ticket--campaign .ticket__matchup{grid-column:1;grid-row:2;width:min(100%,330px);
    grid-template-columns:1fr auto 1fr;justify-content:start;padding:0}
  .ticket--campaign .ticket__crest{width:92px;height:92px}
  .ticket__club figcaption{font-size:.48rem}
  .ticket__player{right:-40px;top:auto;bottom:-16px;height:62%;opacity:.72}
  .ticket__utility{display:block}
  .ticket--campaign .ticket__utility .counter{width:100%;padding:24px 18px;
    grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .ticket--campaign .odo__digit{width:clamp(30px,8vw,42px);height:56px}
  .ticket--campaign .odo__reel span{height:56px;font-size:2.4rem}
  .ticket--campaign .ticket__actions{width:100%;padding:18px;display:grid;grid-template-columns:1fr;
    border-left:0;border-top:1px solid rgba(245,242,233,.24)}
  .ticket__info{grid-template-columns:1fr 1fr;padding:16px 20px!important;gap:14px 20px}
  .ticket__location{grid-column:1/-1;flex-wrap:wrap}
  .ticket__info>p{justify-self:start}
  .ticket__info>p:last-child{justify-self:end;text-align:right}
}

@media(max-width:480px){
  .ticket--campaign .ticket__head{gap:14px}
  .ticket--campaign .ticket__day{font-size:3.1rem}
  .ticket--campaign .ticket__when i,.ticket--campaign .ticket__round{font-size:.5rem}
  .ticket--campaign .ticket__tag{font-size:.48rem}
  .ticket__visual{min-height:620px;padding:32px 20px}
  .ticket--campaign .ticket__title{font-size:clamp(2.75rem,13vw,3.8rem)!important}
  .ticket--campaign .ticket__matchup{width:260px}
  .ticket--campaign .ticket__crest{width:76px;height:76px}
  .ticket__player{right:-54px;height:56%;opacity:.62}
  .ticket__info{grid-template-columns:1fr}
  .ticket__info>p,.ticket__info>p:last-child{justify-self:start;text-align:left}
}

/* League table — one continuous, premium broadcast surface. */
.card--board.bento__table{
  overflow:hidden;
  background:var(--blue-ink);
  border:1px solid rgba(245,242,233,.16);
  color:var(--light);
}
.card--board>.board__head{
  min-height:126px;
  padding:26px clamp(22px,2.8vw,38px) 22px;
  align-items:flex-end;
  background:#0a205f;
  border-bottom:1px solid rgba(245,242,233,.18);
}
.board__heading{display:flex;flex-direction:column;gap:10px}
.board__heading .card__label--light{color:var(--yellow)!important}
.board__heading h3{
  margin:0;
  font:800 clamp(2.8rem,4.5vw,4.6rem)/.76 var(--display);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--light);
}
.card--board>.board__head .live-dot,
.card--board>.board__head .board__toggle{color:var(--light)}
.card--board>.board__head .board__toggle{border-color:rgba(245,242,233,.45)}
.card--board>.board__head .board__toggle:hover{color:var(--yellow);border-color:var(--yellow)}
.board.plus-field{
  --plus-bg:#07184a;
  --plus-size:32px;
  --plus-alpha:.13;
  --plus-fade:linear-gradient(100deg,#000 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.18) 76%,transparent 100%);
  border-radius:0;
  background:
    radial-gradient(circle at 18% 0%,rgba(43,91,214,.24),transparent 38%),
    linear-gradient(118deg,#0d286f 0%,#081e5a 48%,#061747 100%);
}
.board__cols{
  background:rgba(0,0,0,.12);
  border-bottom:1px solid rgba(245,242,233,.12);
}
.board__colrow{
  grid-template-columns:190px 58px 1fr repeat(3,52px);
  padding:12px 34px 12px 0;
}
.board__body{gap:1px;padding:0;background:rgba(245,242,233,.09)}
.board__row{
  grid-template-columns:190px 58px 1fr repeat(3,52px);
  height:122px;
  padding:0 34px 0 0;
  overflow:hidden;
  border-radius:0;
  background:linear-gradient(108deg,rgba(25,62,143,.7) 0%,rgba(10,34,96,.96) 58%,rgba(5,23,70,.98) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.24);
}
.board__row::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.018) 34%,transparent 55%);
}
.board__row:nth-child(even){
  background:linear-gradient(108deg,rgba(31,70,151,.72) 0%,rgba(12,39,105,.96) 58%,rgba(7,26,76,.98) 100%);
}
.board__row:hover{
  transform:translateX(3px);
  background:linear-gradient(108deg,rgba(38,82,174,.82) 0%,rgba(15,46,121,.98) 58%,rgba(8,30,87,.98) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.24);
}
.board__crestcrop{margin-left:0;padding-left:0;border-radius:0}
.board__crestcrop img,.board__crestfallback{
  width:214px;
  height:214px;
  --crest-x:-30px;
  filter:none;
}
.board__row--focus .board__crestcrop img,
.board__row--focus .board__crestfallback{
  width:360px;
  height:360px;
  --crest-x:-145px;
}
.board__motif{opacity:.035;filter:grayscale(1) brightness(3)}
.board__row:hover .board__motif{opacity:.07}
.board__name{font-size:clamp(1.45rem,2vw,2rem)}
.board__tag{color:rgba(245,242,233,.58);opacity:1;translate:0}
.board__row--focus{
  background:linear-gradient(105deg,#194fd7 0%,#123fae 56%,#0b2b82 100%);
  box-shadow:inset 4px 0 0 var(--yellow),inset 0 1px 0 rgba(255,255,255,.19),0 12px 28px -18px rgba(18,70,200,.9);
}
.board__row--focus:nth-child(even){background:linear-gradient(105deg,#194fd7 0%,#123fae 56%,#0b2b82 100%)}
.board__row--focus:hover{
  background:linear-gradient(105deg,#205be5 0%,#1648c2 56%,#0d338f 100%);
  box-shadow:inset 4px 0 0 var(--yellow),inset 0 1px 0 rgba(255,255,255,.24),0 16px 32px -18px rgba(18,70,200,.95);
}

/* Jody February's supplied portrait has a hard lower crop; carry it below the frame edge. */
.player-spotlight[data-player="36"] .player-spotlight__portrait img#spotlightImage{
  inset:auto -8% -10% auto;
  width:116%;
  height:116%;
  object-position:54% bottom;
}

@media(max-width:640px){
  .card--board>.board__head{min-height:auto;padding:22px 18px}
  .board__heading h3{font-size:3rem}
  .board__colrow{padding-inline:0 14px}
  .board__row{
    grid-template-columns:104px 38px minmax(0,1fr);
    min-height:126px;
    height:auto;
    padding:0 14px 12px 0;
  }
  .board__crestcrop img,.board__crestfallback{width:112px;height:112px;--crest-x:-12px}
  .board__row--focus .board__crestcrop img,
  .board__row--focus .board__crestfallback{width:168px;height:168px;--crest-x:-52px}
  .board__name{font-size:1.35rem}
}

/* ═══════════════════════════════════════════════════════
   INDUSTRIAL DISCIPLINE PASS
   One CTA vocabulary, one accent behaviour, one list marker.
   Yellow is deployed as FILL and as HOVER STATE, never as text on a
   light ground — on paper it fails contrast, which is why the palette
   reads timid today rather than bold.
   ═══════════════════════════════════════════════════════ */

/* ── 1. the yellow block CTA ─────────────────────────────
   Solid yellow plate, ink type, an arrow that advances on hover, and a
   fill that wipes in from the left rather than cross-fading. Square —
   the site's existing "square, never pills" rule still holds. */
.hero__primary,.tbtn--primary,.member-cta:not(.member-cta--ghost),.ed-nav__home{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--display);letter-spacing:.06em;
  transition:color .28s var(--ease-soft)}
.hero__primary::before,.tbtn--primary::before,
.member-cta:not(.member-cta--ghost)::before,.ed-nav__home::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease-enter)}
.hero__primary:hover::before,.tbtn--primary:hover::before,
.member-cta:not(.member-cta--ghost):hover::before,.ed-nav__home:hover::before{transform:scaleX(1)}
.hero__primary:hover,.tbtn--primary:hover,
.member-cta:not(.member-cta--ghost):hover,.ed-nav__home:hover{color:var(--yellow)}
/* trailing arrow — drawn, not typed, so it can move independently */
.hero__primary::after,.tbtn--primary::after,.member-cta:not(.member-cta--ghost)::after{
  content:"→";font-family:var(--mono);font-size:.9em;line-height:1;
  transition:translate .28s var(--ease-spring)}
.hero__primary:hover::after,.tbtn--primary:hover::after,
.member-cta:not(.member-cta--ghost):hover::after{translate:5px 0}
/* the signature face needs a touch more size at button scale */
.hero__primary{font-size:.95rem;font-weight:700;padding:16px 22px}
.tbtn{font-family:var(--display);font-size:.9rem;letter-spacing:.05em}

/* ── 2. the "+" marker ───────────────────────────────────
   Replaces the round bullet everywhere a list carries brand voice.
   A registration mark, consistent with the site's plus-field motif. */
.plus-list{list-style:none;padding:0}
.plus-list li{position:relative;padding-left:1.9em;margin-bottom:.85em;line-height:1.6}
.plus-list li::before{content:"+";position:absolute;left:0;top:0;
  font-family:var(--mono);font-weight:700;color:var(--yellow);line-height:inherit}
.plus-list--ink li::before{color:var(--blue)}

/* ── 3. yellow accent rules under section headings ───────
   A short yellow datum under each section label — the Instry move that
   makes a header feel deliberate rather than floated. */
.sec-head__label{position:relative}
.sec-head__label::after{content:"";position:absolute;left:0;right:0;bottom:-9px;
  height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-enter)}
.matchday.is-choreographed .sec-head__label::after,
.reveal.in .sec-head__label::after,
.sec-head.in .sec-head__label::after{transform:scaleX(1)}


/* ── join section on yellow ──────────────────────────────
   The field is now the brand yellow, which breaks three things that were
   tuned for cream. Fixed here rather than by weakening the globals:
   1. .tbtn--primary is a yellow plate — invisible on a yellow ground, so
      the primary action inverts to ink-on-yellow-section.
   2. The cut masthead was navy at 12% over cream; on yellow that reads
      muddy, so it goes to a stronger ink tint.
   3. The sun-system texture multiplied against cream; on yellow it needs
      less opacity or it dirties the field. */
.join .tbtn--primary{background:var(--blue-ink);color:var(--yellow);border-color:var(--blue-ink)}
.join .tbtn--primary::before{background:var(--light)}
.join .tbtn--primary:hover{color:var(--blue-ink)}
.join .tbtn--ink{background:transparent;color:var(--blue-ink);border-color:rgba(10,30,77,.45)}
.join .tbtn--ink:hover{background:var(--blue-ink);color:var(--yellow);border-color:var(--blue-ink)}
.join__system .cutnum{color:var(--blue-ink);opacity:.16}
.join__system .mc-masthead{border-bottom-color:rgba(10,30,77,.3)}
.join__copy::before{opacity:.09}

/* ═══════════════════════════════════════════════════════
   STATEMENT BAND — full-bleed brand artwork
   Sits between the honours count and the join call: the page's
   emotional crest. The artwork already carries the club name and the
   motto as baked-in type, so NOTHING is overlaid on it — adding live
   copy would say "the sky is the limit" twice in one frame. It is
   treated as a finished poster, not a background.
   Parallax is handled by the existing [data-parallax] engine.
   ═══════════════════════════════════════════════════════ */
.statement{position:relative;overflow:hidden;background:var(--blue-ink);
  height:clamp(420px,62vw,760px)}
.statement__bg{position:absolute;inset:-10% 0;will-change:transform}
.statement__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* hairline seams top and bottom so the band reads as a deliberate plate
   rather than an image that happens to be there */
.statement::before,.statement::after{content:"";position:absolute;left:0;right:0;height:2px;z-index:2;pointer-events:none}
.statement::before{top:0;background:var(--yellow)}
.statement::after{bottom:0;background:linear-gradient(90deg,var(--yellow),transparent 62%)}
@media (max-width:820px){
  .statement{height:clamp(340px,86vw,520px)}
  .statement__bg{inset:-6% 0}
  .statement__bg img{object-position:center 38%}
}

/* ── gallery backdrop — mosaic kit macro ─────────────────
   The media section was the flattest dark surface on the page. The
   mosaic artwork sits behind it at low strength: tile-grid behind a
   media grid, and it shares the section's own blue so it adds depth
   without competing with the video thumbnails. */
.gallery{position:relative;isolation:isolate;overflow:hidden}
.gallery::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../assets/art/kit-mosaic.webp") center/cover no-repeat;
  opacity:.2;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 46%,transparent 88%);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 46%,transparent 88%)}
.gallery>*{position:relative;z-index:1}
@media (max-width:820px){
  .gallery::before{background-image:url("../assets/art/kit-mosaic-mobile.webp");opacity:.16}
}