/* Saudi Women's Premier League 2026/27
   Type: 29LT Bukra — the licensed brand face, supplied in the kit.
   Colour: palette.json, the live values off the league's own site.
   Ground: ONE continuous image built from the real brandbook pre-set crops, stretched
   and cross-faded across the whole page. Not generated — the brandbook forbids
   redrawing the graphic language, and a model-made pattern would be a fake asset.
   Legibility is carried by opaque chips over that ground, per brandbook p.29.        */

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

section,footer{scroll-margin-top:112px}
:root{
  --p900:#1A0D2C; --p800:#210A36; --p600:#2A1B3D; --p500:#3B2B4E;
  --green:#02B510; --greenb:#02F119; --lilac:#A79ABA; --white:#fff;
  --amber:#C5DB65; --pink:#FF23A7; --plate:#F4F1F7;
  --chip:rgba(26,13,44,.965); --chips:rgba(26,13,44,.86);
  --pad:clamp(20px,5vw,120px); --maxw:1800px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding-bottom:92px;
  background:#1A0D2B url(assets/img/F_edge_panels.jpg) center center/cover no-repeat fixed;
  font-family:Bukra,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--white);-webkit-font-smoothing:antialiased;
}
@media (max-width:900px){body{background-attachment:scroll;background-size:cover}}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--green);color:var(--p900);padding:10px 16px;z-index:99}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4,h5{margin:0;font-weight:900;letter-spacing:-.01em;line-height:.96}
.h{font-size:clamp(30px,3.4vw,54px);text-transform:uppercase}
.sub{display:inline-block;margin:18px 0 0;padding:11px 18px;border-radius:4px;
  background:var(--chip);color:var(--lilac);font-weight:500;font-size:clamp(13px,1vw,20px);
  text-transform:uppercase;letter-spacing:.02em}
.sub.warn{color:#FFC9C9;background:rgba(90,14,14,.94);box-shadow:inset 0 0 0 2px #E05A5A}
.sub .pill{font-style:normal;margin-left:10px;padding:5px 12px;border-radius:14px;
  border:2px solid var(--amber);color:var(--amber);font-size:.72em;font-weight:700}
.src{margin:26px 0 0;padding:12px 18px;background:var(--chips);border-radius:4px;
  color:var(--lilac);font-size:15px;font-weight:400;max-width:1100px}
.sec{padding:clamp(48px,6vw,96px) 0}
.card{background:var(--chip);border-radius:6px;padding:clamp(20px,2vw,34px)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--green);color:var(--p900);font-weight:900;text-decoration:none;
  padding:14px 26px;border-radius:4px;font-size:19px;letter-spacing:.01em;
  text-transform:uppercase;transition:transform .12s,background .12s}
.btn:hover{background:var(--greenb);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.btn-lg{padding:20px 34px;font-size:clamp(19px,1.5vw,26px)}
.btn-sm{padding:10px 20px;font-size:16px}
.btn-o{background:none;color:var(--white);box-shadow:inset 0 0 0 2px var(--lilac);margin-top:26px}
.btn-o:hover{background:rgba(255,255,255,.08)}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:clamp(14px,2vw,52px);
  padding:0 var(--pad);height:96px;background:rgba(20,8,34,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--p500)}
.nav .logo img{width:clamp(140px,14vw,210px)}
.nav nav{display:flex;gap:clamp(14px,2.4vw,52px);margin-left:auto}
.nav nav a{font-weight:700;font-size:17px;color:var(--lilac);text-decoration:none;
  text-transform:uppercase;padding:4px 0}
.nav nav a:hover{color:#fff}
.nav nav a.on{color:#fff;box-shadow:inset 0 -3px 0 var(--green)}
.navr{display:flex;align-items:center;gap:22px;margin-left:auto}
.lang{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--lilac)}
.lang b{color:#fff}.lang i{color:var(--p500);font-style:normal}
.lang a{text-decoration:none;font-size:19px}
@media (max-width:1180px){.nav nav{display:none}}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:center;
  overflow:hidden;isolation:isolate}
.herov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(26,13,44,.94) 0%,rgba(26,13,44,.72) 46%,rgba(26,13,44,.4) 100%)}
.heroin{padding-top:40px;padding-bottom:40px;padding-right:min(40vw,600px)}
.kicker{margin:0 0 14px;color:var(--greenb);font-weight:700;font-size:clamp(14px,1.2vw,24px);
  letter-spacing:.06em;text-transform:uppercase}
.hero h1{font-size:clamp(44px,6.6vw,104px);text-transform:uppercase}
.lede{margin:26px 0 34px;font-weight:500;font-size:clamp(15px,1.5vw,26px);color:var(--lilac);
  letter-spacing:.02em;text-transform:uppercase}
.opening{position:absolute;right:var(--pad);top:50%;translate:0 -50%;width:min(430px,38vw);
  background:var(--chip);border-radius:6px;padding:22px}
.opening h2{font-size:15px;font-weight:700;color:var(--greenb);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:12px}
.opening ul{list-style:none;margin:0;padding:0}
.opening li{display:grid;grid-template-columns:80px 1fr;gap:4px 14px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--p500)}
.opening li b{font-size:22px;font-weight:900}
.opening li span{grid-column:1;color:var(--lilac);font-size:15px}
.opening li div{grid-column:2;grid-row:1/3;font-weight:700;font-size:18px;line-height:1.25}
.opening li em{display:block;color:var(--lilac);font-style:normal;font-weight:400;font-size:15px;margin-top:3px}
@media (max-width:1100px){.opening{position:static;translate:0;width:auto;margin:0 var(--pad) 40px}
  .hero{display:block;padding-top:40px}}

/* ---------------------------------------------------------------- tickets */
.passbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:30px 0 14px;
  background:var(--chips);border-radius:6px;padding:18px 26px}
.passbar b{font-weight:700;font-size:19px}
.passbar span{color:var(--lilac)}
.passbar a{margin-left:auto;color:var(--greenb);font-weight:700;text-decoration:none;
  text-transform:uppercase;font-size:16px}
.mlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mlist.hidden{display:none}
.mrow{display:grid;grid-template-columns:130px 1fr auto auto;gap:10px 26px;align-items:center;
  background:var(--chip);border-radius:6px;padding:18px 26px;position:relative}
.mrow[data-next]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--green);border-radius:6px 0 0 6px}
.mdate b{display:block;font-size:clamp(22px,2vw,34px);font-weight:900}
.mdate span{color:var(--lilac);font-size:15px}
.mteams{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mteams b{font-weight:700;font-size:clamp(16px,1.4vw,24px)}
.mteams i{color:var(--lilac);font-style:normal;font-size:16px}
.mven{flex:1 0 100%;color:var(--lilac);font-size:15px}
.mprice{color:var(--greenb);font-weight:900;font-size:clamp(15px,1.2vw,21px);white-space:nowrap}
.cr{display:inline-flex;width:34px;height:34px;background:var(--plate);border-radius:3px;
  align-items:center;justify-content:center;padding:3px;flex:0 0 auto}
.cr img{max-height:100%;width:auto}
.more{margin:18px 0 0;background:none;border:2px solid var(--lilac);color:#fff;
  font-family:inherit;font-weight:900;font-size:17px;padding:14px 28px;border-radius:4px;
  cursor:pointer;text-transform:uppercase}
.more:hover{background:rgba(255,255,255,.08)}
@media (max-width:820px){.mrow{grid-template-columns:1fr auto}.mdate{grid-column:1/-1}}

/* ---------------------------------------------------------------- why */
.whygrid{display:grid;grid-template-columns:minmax(300px,620px) 1fr;gap:22px;margin-top:30px}
.whynum b{display:block;font-size:clamp(90px,14vw,240px);font-weight:900;line-height:.82;
  letter-spacing:-.03em}
.whynum em{display:block;margin-top:14px;color:var(--greenb);font-style:normal;font-weight:900;
  font-size:clamp(18px,1.8vw,30px);text-transform:uppercase}
.whynum p{color:var(--lilac);font-size:clamp(15px,1.2vw,21px);line-height:1.45;max-width:46ch}
.whynum .counts{margin-top:22px;color:#fff;font-weight:700;letter-spacing:.02em}
.whygrid{align-items:stretch}
.whypics{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1.35fr 1fr;gap:12px}
.whypics figure{margin:0;overflow:hidden;border-radius:4px;min-height:0}
.whypics figure.wide{grid-column:1/-1}
.whypics img{width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){.whygrid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- players */
.pgrid{display:grid;grid-template-columns:minmax(280px,700px) 1fr;gap:24px;margin-top:30px}
.pcard{position:relative;border-radius:6px;overflow:hidden;background:var(--p600);
  box-shadow:inset 0 0 0 1px var(--p500)}
.pcard>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pmeta .cr{width:30px;height:30px}.pmeta .cr img{position:static;width:auto;height:auto;max-height:100%}
.pcard.lead{aspect-ratio:7/6}
.pcard .note{position:absolute;left:12px;top:12px;z-index:2;background:rgba(20,8,34,.9);
  border:1px solid var(--amber);color:var(--amber);font-size:11px;font-weight:700;
  padding:5px 10px;border-radius:12px;letter-spacing:.02em}
.pmeta{position:absolute;inset:auto 0 0 0;z-index:2;padding:22px;
  background:linear-gradient(180deg,rgba(26,13,44,0),rgba(26,13,44,.92) 58%)}
.pmeta em{display:block;color:var(--greenb);font-style:normal;font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.06em}
.pmeta b{display:block;font-size:clamp(38px,4vw,88px);font-weight:900;line-height:.9}
.pmeta h3{font-size:clamp(17px,1.5vw,32px);text-transform:uppercase;margin-top:4px;overflow-wrap:anywhere;hyphens:auto}
.pmeta p{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-weight:700;font-size:16px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:16px;
  overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail .pcard{aspect-ratio:5/7}
.rail .pmeta{padding:16px}
.rail .pmeta b{font-size:clamp(34px,3vw,52px)}
.rail .pmeta h3{font-size:clamp(15px,1.05vw,19px);line-height:1.1;margin-top:2px}
.rail .pmeta p{font-size:13px;margin-top:6px}
.rail .note{font-size:10px;padding:4px 8px}
.ah{margin:26px 0 12px;color:var(--greenb);font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.alist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.alist li{display:flex;align-items:center;gap:14px;background:var(--chips);border-radius:6px;padding:16px}
.alist b{font-size:34px;font-weight:900}
.alist span{display:block;font-weight:700;font-size:15px}
.alist em{color:var(--lilac);font-style:normal;font-size:13px}
.railui{display:flex;gap:12px;margin-top:20px}
.rl{width:50px;height:50px;border-radius:50%;border:2px solid var(--lilac);background:none;
  color:#fff;font-size:26px;font-family:inherit;cursor:pointer;line-height:1}
.rl:hover{background:rgba(255,255,255,.1)}
@media (max-width:1000px){.pgrid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- clubs */
.clist{list-style:none;margin:30px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:10px}
.clist li{display:flex;align-items:center;gap:18px;background:var(--chip);border-radius:6px;padding:16px 22px}
.clist .cr.big{width:58px;height:58px}
.clist b{font-weight:900;font-size:clamp(18px,1.4vw,26px);text-transform:uppercase;display:block}
.clist span{color:var(--lilac);font-size:15px;display:block;margin-top:3px}
.cright{margin-left:auto;text-align:right}
.cright b{font-size:19px}

/* ---------------------------------------------------------------- venues */
.vgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;margin-top:30px}
.plot{width:100%;height:auto}
.plot .grid{stroke:#2A1B3D;stroke-width:1}
.plot .dot{fill:var(--green)}
.plot .dnum{fill:var(--p900);font:900 26px Bukra,sans-serif;text-anchor:middle}
.plot .dlab{fill:#fff;font:700 21px Bukra,sans-serif;text-anchor:middle}
.plot .pnote{fill:#6B5E7E;font:500 14px Bukra,sans-serif;letter-spacing:.06em}
.citylist{display:grid;gap:4px;align-content:start}
.cityblk h4{display:flex;align-items:baseline;gap:12px;font-size:clamp(17px,1.4vw,25px);
  text-transform:uppercase;padding-top:14px}
.cityblk h4 em{margin-left:auto;color:var(--greenb);font-style:normal;font-weight:900;font-size:1.05em}
.cityblk ul{list-style:none;margin:8px 0 12px;padding:0}
.cityblk li{display:flex;gap:12px;padding:5px 0;color:var(--lilac);font-size:15px}
.cityblk li b{margin-left:auto;color:#fff;font-weight:700}
@media (max-width:1000px){.vgrid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- table */
.lgrid{display:grid;grid-template-columns:minmax(280px,560px) 1fr;gap:22px;margin-top:30px}
.champ em{display:block;color:var(--greenb);font-style:normal;font-weight:700;font-size:16px;
  letter-spacing:.06em;text-transform:uppercase}
.crow{display:flex;align-items:center;gap:18px;margin:18px 0 10px}
.crow .cr{width:96px;height:96px;border-radius:4px}
.champ h3{font-size:clamp(28px,3vw,46px);text-transform:uppercase}
.champ .tt{color:var(--lilac);font-weight:500;text-transform:uppercase;letter-spacing:.02em;margin:0 0 16px}
.champ p{color:var(--lilac);font-size:17px;line-height:1.5;margin:0}
.tbl{width:100%;border-collapse:collapse;font-size:clamp(14px,1.1vw,19px)}
.tbl th{text-align:left;color:var(--lilac);font-weight:700;font-size:14px;padding:0 8px 12px;
  letter-spacing:.04em;border-bottom:1px solid var(--p500)}
.tbl td{padding:10px 8px;border-bottom:1px solid rgba(59,43,78,.5)}
.tbl td:nth-child(2){display:flex;align-items:center;gap:12px;font-weight:700;text-transform:uppercase}
.tbl td .cr{width:32px;height:32px}
.tbl td i{color:#6B5E7E;font-style:normal;font-size:13px;font-weight:400;margin-left:6px}
.tbl tr.top td:first-child{color:var(--greenb);font-weight:900;box-shadow:inset 4px 0 0 var(--green)}
.tbl tr.gone td{color:var(--lilac)}
.tbl td:last-child{text-align:right}
@media (max-width:1000px){.lgrid{grid-template-columns:1fr}.tbl th:nth-child(n+3):nth-child(-n+6),.tbl td:nth-child(n+3):nth-child(-n+6){display:none}}

/* ---------------------------------------------------------------- social */
.iggrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:30px}
.igt{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:4px}
.igt img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.igt:hover img{transform:scale(1.05)}
.igt span{position:absolute;left:0;bottom:0;background:rgba(20,8,34,.92);color:#fff;
  font-size:13px;font-weight:700;padding:6px 11px}
@media (max-width:1000px){.iggrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.iggrid{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------- watch */
.wgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;margin-top:30px}
.wgrid em{display:block;color:var(--greenb);font-style:normal;font-weight:700;font-size:16px;
  letter-spacing:.06em;text-transform:uppercase}
.bcast{display:block;font-size:clamp(38px,5vw,92px);font-weight:900;line-height:1;margin:14px 0 20px}
.wgrid .big{font-size:clamp(19px,1.8vw,28px);font-weight:700;margin:0 0 8px}
.wgrid p{color:var(--lilac);font-size:17px;line-height:1.5;margin:0}
.card.alt h3{font-size:clamp(24px,2.6vw,40px);margin-bottom:14px}
.card.alt .btn{margin-top:24px}
@media (max-width:900px){.wgrid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- reviews */
.rgrid{display:grid;grid-template-columns:minmax(220px,320px) repeat(3,1fr);gap:18px;margin-top:30px}
.score b{display:block;font-size:clamp(52px,6.4vw,118px);font-weight:900;line-height:.85}
.score .stars{color:var(--green);font-size:30px;letter-spacing:4px;margin:10px 0 8px}
.score p{color:var(--lilac);margin:0}
.rev .stars{color:var(--green);font-size:19px;letter-spacing:3px}
.rev p{margin:16px 0 0;font-size:17px;line-height:1.5}
.rev footer{margin-top:18px;padding-top:14px;border-top:1px solid var(--p500)}
.rev footer b{display:block;font-weight:700;font-size:17px}
.rev footer span{color:var(--lilac);font-size:15px}
@media (max-width:1100px){.rgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rgrid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- before */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.bt .ic{display:block;width:42px;height:42px;border:2px solid var(--lilac);border-radius:50%;margin-bottom:18px}
.bt b{display:block;font-weight:700;font-size:clamp(17px,1.3vw,22px);text-transform:uppercase;margin-bottom:10px}
.bt p{margin:0;color:var(--lilac);font-size:17px;line-height:1.45}
@media (max-width:900px){.bgrid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- faq */
.faq{margin-top:30px;display:grid;gap:8px}
details{background:var(--chip);border-radius:6px;overflow:hidden}
details[open]{box-shadow:inset 6px 0 0 var(--green)}
summary{cursor:pointer;list-style:none;padding:24px 26px;font-weight:700;
  font-size:clamp(17px,1.5vw,28px);text-transform:uppercase;display:flex;
  justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"▾";color:var(--lilac);font-size:.7em;flex:0 0 auto}
details[open] summary::after{content:"▴";color:var(--greenb)}
details p{margin:0;padding:0 26px 26px;color:var(--lilac);font-size:clamp(15px,1.2vw,21px);
  line-height:1.55;max-width:100ch}
.qpend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--chips);
  border-radius:6px;padding:24px 26px;color:var(--lilac);font-weight:700;
  font-size:clamp(16px,1.4vw,26px);text-transform:uppercase}
.qpend em{font-style:normal;font-size:14px;font-weight:700;border:2px solid #6B5E7E;
  border-radius:15px;padding:6px 14px;color:var(--lilac);letter-spacing:.02em}

/* ---------------------------------------------------------------- final */
.final{position:relative;overflow:hidden;isolation:isolate;padding:clamp(60px,8vw,120px) 0;
  display:flex;align-items:center;min-height:min(90vh,900px)}
.final::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(26,13,44,.93),rgba(26,13,44,.55) 60%,rgba(26,13,44,.3))}
.finin{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy count";gap:clamp(20px,4vw,80px);align-items:center}
.fincopy{grid-area:copy}
.flogo{width:clamp(160px,15vw,230px);margin-bottom:30px}
.final h2{font-size:clamp(44px,6.6vw,108px);text-transform:uppercase}
.final h2 span{color:var(--greenb)}
.fmeta{margin:30px 0}
.fmeta b{display:block;font-weight:700;font-size:clamp(16px,1.4vw,26px);letter-spacing:.02em}
.fmeta span{color:var(--lilac);font-size:clamp(14px,1.1vw,21px)}
.cd{grid-area:count;text-align:right;align-self:center}
.cd b{display:block;font-size:clamp(70px,12vw,200px);font-weight:900;line-height:.85}
.cd em{font-style:normal;font-weight:700;font-size:clamp(13px,1.1vw,22px);letter-spacing:.04em}

@media (max-width:1000px){.finin{grid-template-columns:1fr;grid-template-areas:"copy" "count"}.cd{text-align:left;margin-top:30px}}
@media (max-width:1100px){.heroin{padding-right:0}}

/* ---------------------------------------------------------------- footer */
.foot{background:rgba(20,8,34,.97);padding:clamp(40px,5vw,72px) 0 clamp(90px,10vw,140px)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px}
.flogo2{width:230px;margin-bottom:22px}
.disc{max-width:44ch;color:#fff;font-weight:500;font-size:16px;line-height:1.5;
  border:2px solid var(--amber);border-radius:4px;padding:16px 18px;margin:0}
.foot h5{font-size:15px;font-weight:700;letter-spacing:.06em;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{color:var(--lilac);text-decoration:none;font-size:16px}
.foot a:hover{color:#fff}
.np{color:#6B5E7E;font-size:16px}
.np i{font-style:normal;font-size:13px;margin-left:8px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- sticky */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(20,8,34,.97);
  border-top:1px solid var(--p500);transform:translateY(110%);transition:transform .25s}
.sticky.on{transform:none}
.sin{display:flex;align-items:center;gap:clamp(14px,3vw,40px);padding:14px var(--pad)}
.sin b{display:block;font-weight:700;font-size:clamp(15px,1.2vw,22px);text-transform:uppercase}
.sin span{color:var(--lilac);font-size:clamp(12px,1vw,17px)}
.sin strong{margin-left:auto;color:var(--greenb);font-size:clamp(16px,1.6vw,28px);font-weight:900;white-space:nowrap}
.sin .btn{flex:0 0 auto}
@media (max-width:700px){.sin span,.sin strong{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* ============================================================ revision 4
   Eleven notes from review. The background is the big one: the first attempt
   stretched a 1054px tile to 9600px tall, which is why it looked soft. This one is
   one crop re-rendered off the brandbook PDF at 1000 dpi instead of 400 and pinned
   with background-attachment:fixed, so the browser never scales it past ~1.3x.      */

/* --- 4. venues: the block now carries a photograph --------------------------- */
.vgrid{grid-template-columns:1.15fr 1fr;grid-template-areas:"pic pic" "plot list"}
.vpic{grid-area:pic;position:relative;margin:0 0 4px;border-radius:6px;overflow:hidden;
  aspect-ratio:32/9}
.vpic img{width:100%;height:100%;object-fit:cover}
.vpic figcaption{position:absolute;inset:auto 0 0 0;padding:clamp(18px,2vw,34px);
  background:linear-gradient(180deg,rgba(26,13,44,0),rgba(26,13,44,.9) 65%)}
.vpic figcaption b{display:block;font-size:clamp(30px,3.6vw,64px);font-weight:900;line-height:1}
.vpic figcaption span{color:var(--lilac);font-size:clamp(15px,1.2vw,21px)}
.plotwrap{grid-area:plot}
.citylist{grid-area:list}
@media (max-width:1000px){.vgrid{grid-template-areas:"pic" "plot" "list"}}

/* --- 5. instagram: reels autoplay, no date chips ---------------------------- */
.igt span{display:none}
.igv{position:relative;background:var(--p600)}
.igv video{width:100%;height:100%;object-fit:cover;display:block}
.igv .play{position:absolute;left:14px;bottom:14px;width:26px;height:26px;border-radius:50%;
  background:rgba(20,8,34,.72);backdrop-filter:blur(4px)}
.igv .play::after{content:"";position:absolute;left:9px;top:7px;border-style:solid;
  border-width:6px 0 6px 9px;border-color:transparent transparent transparent #fff}

/* --- 6. reviews: label breathes, avatars are initials ----------------------- */
.score .rlabel{display:block;font-style:normal;font-weight:700;font-size:14px;
  letter-spacing:.1em;color:var(--lilac);margin-bottom:6px;text-transform:uppercase}
.rev footer{display:flex;align-items:center;gap:14px}
.ava{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--green),#0a6b18);color:var(--p900);
  font-weight:900;font-size:21px}
.who b{display:block;font-weight:700;font-size:17px}
.who em{font-style:normal;color:var(--lilac);font-size:15px}

/* --- 7. before you go: icons, drawn, not empty circles --------------------- */
.bt .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  border:2px solid var(--p500);background:rgba(2,181,16,.08);color:var(--greenb);
  margin-bottom:18px;transition:border-color .2s,background .2s}
.bt .ic svg{width:26px;height:26px}
.bt:hover .ic{border-color:var(--green);background:rgba(2,181,16,.16)}

/* --- 8. everything opens and arrives instead of snapping ------------------- */
details{transition:box-shadow .25s ease}
summary{transition:color .18s ease,background .18s ease}
summary:hover{background:rgba(255,255,255,.03)}
summary::after{transition:transform .28s cubic-bezier(.2,.7,.2,1),color .2s}
details[open] summary::after{content:"\25BE";transform:rotate(180deg)}
.faq .ans{overflow:hidden;height:0;transition:height .34s cubic-bezier(.25,.8,.25,1)}
.faq .ans p{margin:0;padding:0 26px 26px;color:var(--lilac);
  font-size:clamp(15px,1.2vw,21px);line-height:1.55;max-width:100ch;
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease .06s,transform .3s ease .06s}
details[open] .ans p{opacity:1;transform:none}

.motion .rv{opacity:0;transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.22,.7,.2,1),transform .6s cubic-bezier(.22,.7,.2,1)}
.motion .rv.in{opacity:1;transform:none}
.rv .card,.rv .mrow,.rv .igt,.rv .bt,.rv details{transition:opacity .5s ease,transform .5s ease}
.mrow,.card,.igt,.clist li{transition:transform .2s ease,box-shadow .2s ease}
.mrow:hover{transform:translateX(3px)}
.clist li:hover{transform:translateY(-2px)}
.btn,.rl,.more{transition:transform .14s ease,background .16s ease,box-shadow .16s ease}
@media (prefers-reduced-motion:reduce){
  .motion .rv{opacity:1!important;transform:none!important}
  .faq .ans{transition:none}
}

/* --- 10. the footer is the end of the page, so nothing shows under it ------ */
body{padding-bottom:0}
.foot{padding-bottom:clamp(110px,11vw,160px);margin-bottom:0}
/* the ground under everything is the footer colour, so nothing can peek out below */
html{background:#1A0D2B}
body{background-color:transparent}
.foot{position:relative}
.fnote{margin:18px 0 0;color:var(--lilac);font-size:15px;font-weight:500;
  letter-spacing:.02em}


/* ============================================================ revision 5 */

/* --- background ------------------------------------------------------------------
   B quieted the artwork with a radial mask, which reads as a hole punched in the
   middle of the frame. Its centre is a single flat colour, rgb(26,13,43), so the
   artwork there is gone and no amount of correction brings it back.
   F quiets it one-dimensionally instead: the supplied crop runs full height in the
   outer columns and meets that same flat purple through the centre. Brandbook p.25
   puts the graphic at the edges, so a plain middle is the prescribed composition
   rather than an artefact. Switchable with ?bg=a|b|c for comparison. ------------ */
body[data-bg="a"]{background-image:url(assets/img/A_deep_scrim.jpg)}
body[data-bg="b"]{background-image:url(assets/img/B_edge_vignette.jpg)}
body[data-bg="c"]{background-image:url(assets/img/C_flat_diagonals.jpg)}
body[data-bg="f"]{background-image:url(assets/img/F_edge_panels.jpg)}

/* --- tickets: city filter -------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 16px}
.chip{font-family:inherit;font-weight:700;font-size:15px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--lilac);background:var(--chips);border:2px solid transparent;
  border-radius:22px;padding:11px 20px;cursor:pointer;transition:all .16s ease}
.chip:hover{color:#fff;border-color:var(--p500)}
.chip.on{color:var(--p900);background:var(--green);border-color:var(--green)}
.mrow.off{display:none}
.nores{margin:14px 0 0;padding:18px 22px;background:var(--chips);border-radius:6px;
  color:var(--lilac);font-size:17px}
.nores.hidden{display:none}
.more{margin:22px 0 0}

/* --- players: the lead card is properly the lead, and the rail scrolls ------- */
.pgrid{grid-template-columns:minmax(300px,44%) minmax(0,1fr)}
.rail{min-width:0}
.pcard.lead{aspect-ratio:auto;min-height:clamp(420px,42vw,660px)}
.pcard.lead .pmeta{padding:clamp(22px,2.4vw,40px)}
.pcard.lead .pmeta b{font-size:clamp(64px,7.4vw,140px)}
.pcard.lead .pmeta h3{font-size:clamp(24px,2.6vw,48px)}
.rail{grid-auto-columns:minmax(210px,232px);scroll-padding-left:0}
.railui{align-items:center}
.rl[disabled]{opacity:.3;cursor:default}
.railui .count{margin-left:14px;color:var(--lilac);font-size:15px;font-weight:500}

/* --- clubs: the stadium name was wrapping and shoving the right column around -- */
.clist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
.clist li>div:nth-of-type(1){min-width:0}
.clist b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clist span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cright{text-align:right;white-space:nowrap}
.cright b{white-space:nowrap}
@media (max-width:1500px){.clist{grid-template-columns:1fr}}

/* --- venues: a real map and a tabulated stadium list ------------------------- */
#map{width:100%;aspect-ratio:4/3;min-height:360px;border-radius:4px;overflow:hidden;
  background:#12071f;filter:saturate(.7)}
.leaflet-container{background:#12071f!important;font-family:Bukra,sans-serif!important}
.leaflet-control-attribution{background:rgba(20,8,34,.8)!important;color:#A79ABA!important;
  font-size:10px!important}
.leaflet-control-attribution a{color:#A79ABA!important}
.mk{display:grid;place-items:center;border-radius:50%;background:var(--green);
  color:var(--p900);font-weight:900;font-family:Bukra,sans-serif;
  box-shadow:0 0 0 4px rgba(2,181,16,.22)}
.mklab{color:#fff;font:700 13px Bukra,sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.9);
  white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.vtab{width:100%;border-collapse:collapse;font-size:clamp(14px,1.05vw,18px)}
.vtab th,.vtab td{text-align:left;padding:11px 10px;vertical-align:middle}
.vtab thead th{color:var(--lilac);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1px solid var(--p500);padding-bottom:12px}
.vtab tbody th{vertical-align:top;padding-top:16px;width:1%;white-space:nowrap}
.vtab tbody th b{display:block;font-weight:900;font-size:clamp(16px,1.3vw,23px);
  text-transform:uppercase}
.vtab tbody th em{font-style:normal;color:var(--greenb);font-weight:900;font-size:1.05em}
.vtab tbody td{color:var(--lilac);border-bottom:1px solid rgba(59,43,78,.45)}
.vtab tr.cstart td{padding-top:16px}
.vtab tr.cstart th{border-top:1px solid rgba(59,43,78,.45)}
.vtab .n{text-align:right;color:#fff;font-weight:700;white-space:nowrap}
.vtab .dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--green);margin-right:11px;vertical-align:middle;flex:0 0 auto}
@media (max-width:760px){.vtab thead{display:none}.vtab tbody th{white-space:normal}}

/* --- instagram: square tiles that open full screen -------------------------- */
.iggrid{grid-template-columns:repeat(6,1fr)}
@media (max-width:1200px){.iggrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.iggrid{grid-template-columns:repeat(2,1fr)}}
button.igt{padding:0;border:0;background:none;cursor:pointer;display:block;
  aspect-ratio:1;overflow:hidden;border-radius:4px;position:relative}
button.igt::after{content:"";position:absolute;inset:0;background:rgba(2,181,16,0);
  transition:background .2s}
button.igt:hover::after{background:rgba(2,181,16,.14)}
button.igt:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

.lb{position:fixed;inset:0;z-index:200;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(6px,2vw,26px);
  padding:clamp(12px,3vw,46px);background:rgba(10,4,18,.94);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .22s ease}
.lb.on{opacity:1}
.lbfig{margin:0;display:grid;justify-items:center;gap:16px;max-height:100%}
.lbfig img{max-width:min(88vw,900px);max-height:72vh;width:auto;border-radius:6px;
  background:var(--p600)}
.lbfig figcaption{color:var(--lilac);font-size:16px;line-height:1.5;text-align:center;
  max-width:70ch;direction:rtl}
.lbx{position:absolute;top:clamp(10px,2vw,26px);right:clamp(10px,2vw,26px);width:52px;
  height:52px;border-radius:50%;border:2px solid var(--p500);background:rgba(20,8,34,.7);
  color:#fff;font-size:30px;line-height:1;cursor:pointer;font-family:inherit}
.lbnav{width:clamp(44px,5vw,64px);height:clamp(44px,5vw,64px);border-radius:50%;
  border:2px solid var(--p500);background:rgba(20,8,34,.7);color:#fff;
  font-size:clamp(26px,3vw,38px);line-height:1;cursor:pointer;font-family:inherit}
.lbnav:hover,.lbx:hover{border-color:var(--green);background:rgba(2,181,16,.18)}
body.lbopen{overflow:hidden}


/* ============================================================ revision 6 */

/* The closed lightbox was covering the whole page. `.lb{display:grid}` outranks the
   user-agent `[hidden]{display:none}`, so a fixed, z-index-200, fully transparent
   overlay sat over every section and swallowed every click — which is why the city
   filter looked dead. It was not the filter. */
.lb[hidden]{display:none}

/* dates: a 80px column could not hold "10 SEP" at 22px, so it broke after the
   number while "11 SEP" stayed on one line. Size the column to the content. */
.opening li{grid-template-columns:auto 1fr}
.opening li b{white-space:nowrap}

/* labels sitting on the shoulder of a 140px numeral read as collisions */
.pcard.lead .pmeta em{margin-bottom:clamp(4px,.9vw,12px);letter-spacing:.1em}
.pcard.lead .pmeta b{line-height:.88}
.score .rlabel{display:block;margin-bottom:10px;letter-spacing:.12em}

/* why: three frames, no fourth, and cropped to finish level with the counts line */
.whypics{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}
.whypics figure{aspect-ratio:auto;height:100%}
.why .whygrid{align-items:start}
.whynum{display:flex;flex-direction:column}
.whynum .counts{margin-top:auto;padding-top:22px}

/* seats that nobody publishes should say that, quietly */
.vtab .np{color:var(--lilac);font-weight:400;font-size:13px;white-space:nowrap}

/* the drawn map: no tiles, no attribution strip, no API key watermark */
.ksa{display:block;width:100%;height:auto;background:#12071f;border-radius:4px}
.ksa text{font-family:Bukra,system-ui,sans-serif}
.ksa .kn{fill:#0D0616;font-weight:900;font-size:30px}
.ksa .kc{fill:#fff;font-weight:700;letter-spacing:.08em;font-size:25px}


/* ============================================================ revision 7 */

/* the viewer sizes itself to the post, not to a square */
.lbfig img,.lbfig video{max-width:min(88vw,760px);max-height:78vh;width:auto;height:auto;
  border-radius:6px;background:#12071f}
.lbfig video{display:block}
.lbfig [hidden]{display:none!important}

/* a reel should look like a reel in the grid */
.igt .vb{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(13,6,22,.72);border:1.5px solid rgba(255,255,255,.75)}
.igt .vb::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent
  transparent #fff}

/* Player cards carry no photograph. The league publishes no player portraits — every
   named image in its feed is a campaign graphic with a title-sponsor lockup — and a
   stock face beside a real name is a claim we cannot make. So the number leads. */
.pcard.tset{background:linear-gradient(150deg,#2C1745,#1B0D2C 62%);
  border:1px solid rgba(167,154,186,.22)}
.pcard.tset .pmeta{position:static;inset:auto;background:none;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end}
.pcard.tset .pmeta b{color:#fff}
.pcard.tset .pmeta h3{color:#fff}
.pcard.tset .pmeta p{color:var(--lilac)}
.pcard.lead.tset{background:linear-gradient(140deg,#371C55,#1A0C2B 66%)}
.pcard.lead.tset .pmeta em{color:var(--greenb)}


/* ============================================================ revision 8 */

/* WHY: one photograph at a time instead of three thumbnails of a goal net */
.gal{position:relative;border-radius:6px;overflow:hidden;background:#12071f;
  aspect-ratio:16/9;min-height:0}
.gs{margin:0;position:absolute;inset:0;opacity:0;transition:opacity .45s ease;
  pointer-events:none}
.gs.on{opacity:1;pointer-events:auto}
.gs img{width:100%;height:100%;object-fit:cover}
.gs figcaption{position:absolute;inset:auto 0 0 0;padding:26px 28px;
  background:linear-gradient(180deg,rgba(26,13,44,0),rgba(20,8,34,.94) 62%)}
.gs figcaption b{display:block;font-size:clamp(20px,2vw,32px);font-weight:900;
  text-transform:uppercase;letter-spacing:.02em}
.gs figcaption span{display:block;margin-top:4px;color:var(--lilac);font-size:15px}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(13,6,22,.5);
  color:#fff;font-size:26px;font-family:inherit;cursor:pointer;line-height:1;z-index:3}
.gnav:hover{background:rgba(2,181,16,.35);border-color:var(--green)}
.gprev{left:14px}.gnext{right:14px}
.gdots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;
  justify-content:center;gap:9px}
.gd{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.42)}
.gd.on{background:var(--greenb);width:24px;border-radius:5px}
@media (max-width:700px){.gnav{width:38px;height:38px;font-size:21px}}

/* reels play where they sit, no click needed */
.igt video{width:100%;height:100%;object-fit:cover;display:block}

/* TOP SCORER was still sitting on the shoulder of a 140px numeral: the gap measured
   12px but line-height .88 pulls the digit box up over it. Give the label real air. */
.pcard.lead .pmeta em{margin-bottom:clamp(12px,1.7vw,24px)}
.pcard.lead .pmeta b{line-height:.94}

/* reels in the grid are muted and looping; keep them out of the way of the badge */
.igt.vid video{filter:saturate(1.02)}


/* ============================================================ revision 9 */

/* Same bug as the hero panel, this time in the ticket rows: the date column was a
   fixed 130px while the date itself scales to 34px, where the widest string in the
   season ("20 MAR") measures 154px. Narrow dates like "18 SEP" fitted, wide ones
   broke after the number — which is why only some rows wrapped. The column now
   follows the same 2vw slope as the type, with headroom at both ends, and the date
   is told never to wrap regardless. */
.mrow{grid-template-columns:clamp(112px,10vw,168px) 1fr auto auto}
.mdate b{white-space:nowrap}
@media (max-width:820px){.mrow{grid-template-columns:1fr auto}}

/* every other place a date is set on its own line */
.sin b,.sin span,.alist b,.vtab .n{white-space:nowrap}


/* ============================================================ revision 10
   MOBILE. This block sits last on purpose. Several later revisions redeclared
   grid-template-columns unconditionally — `.pgrid` at revision 5 in particular —
   which silently killed the earlier `@media (max-width:1000px)` one-column rules.
   The players grid therefore kept a 300px lead card plus a rail column on a phone,
   the document measured 534px against a 390px viewport, and mobile Safari/Chrome
   zoomed the whole page out to fit. Everything below is written to win. */

@media (max-width:760px){
  :root{--pad:18px}

  /* --- one column, everywhere it matters ------------------------------------ */
  /* `1fr` is minmax(auto,1fr): the single column then sized itself to the rail's
     min-content — nine cards, 1550px — and the document got WIDER, not narrower.
     minmax(0,1fr) is the one that actually means "no wider than me". */
  .pgrid,.whygrid,.vgrid,.lgrid,.wgrid,.bgrid,.rgrid,.clist,.finin,.fgrid{
    grid-template-columns:minmax(0,1fr)!important}
  .prail,.pgrid>*,.vgrid>*,.whygrid>*{min-width:0}
  .vgrid{grid-template-areas:"pic" "plot" "list"!important}
  .finin{grid-template-areas:"copy" "count"!important}

  /* --- hero ---------------------------------------------------------------- */
  .heroin{padding-right:0!important}
  .hero h1{font-size:clamp(40px,13vw,64px);line-height:.92}
  .hero .lede{font-size:14px;letter-spacing:.01em}
  .opening{position:static!important;translate:none!important;width:auto!important;
    margin:0 var(--pad) 34px!important}
  .opening li{grid-template-columns:auto 1fr}

  /* --- tickets: the row becomes a card, price and button on one line -------- */
  .mrow{grid-template-columns:1fr auto!important;gap:6px 14px;padding:16px}
  .mdate{grid-column:1/-1;display:flex;align-items:baseline;gap:10px}
  .mdate b{font-size:26px}
  .mteams{grid-column:1/-1}
  .mprice{grid-column:1;align-self:center}
  .mrow>.btn{grid-column:2;justify-self:end}
  .pass{flex-wrap:wrap;gap:8px}
  .filters{gap:8px;margin:20px 0 14px}
  .chip{font-size:13px;padding:9px 14px}

  /* --- players: the lead card stops being a 660px tower -------------------- */
  .pcard.lead{min-height:clamp(340px,86vw,420px)!important}
  .pcard.lead .pmeta b{font-size:clamp(56px,17vw,84px)}
  .pcard.lead .pmeta h3{font-size:clamp(20px,6.4vw,30px)}
  .rail{grid-auto-columns:minmax(158px,64vw)!important}
  .alist{grid-template-columns:1fr 1fr!important;gap:10px}
  .alist li{padding:12px;gap:10px}
  .alist b{font-size:26px}
  .alist span{font-size:13px}

  /* --- clubs --------------------------------------------------------------- */
  .clist li{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .cright{grid-column:1/-1;text-align:left;padding-left:56px}

  /* --- venues: the drawn map and the stadium table ------------------------- */
  .ksa{margin:0 -4px}
  .vtab{font-size:14px}
  .vtab td,.vtab th{padding:10px 0}
  .vtab .np{font-size:11px}

  /* --- instagram + gallery ------------------------------------------------- */
  .iggrid{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .gs figcaption{padding:16px 18px}
  .gs figcaption b{font-size:clamp(17px,5.4vw,24px)}
  .gdots{bottom:10px}

  /* --- reviews, FAQ, closing ---------------------------------------------- */
  .score b{font-size:clamp(58px,18vw,88px)}
  details summary{font-size:16px;padding:16px 44px 16px 0}
  .cd{text-align:left;margin-top:26px}

  /* --- the sticky bar keeps only the promise and the button --------------- */
  .sin{gap:12px}
  .sin .btn{flex:0 0 auto;padding:13px 18px;font-size:14px}

  /* --- tap targets: 44px is the floor ------------------------------------- */
  .rl,.gnav{width:44px;height:44px}
  .gd{width:11px;height:11px}
  .gd.on{width:26px}
  .nav .btn{padding:12px 16px}
}

@media (max-width:430px){
  .alist{grid-template-columns:1fr!important}
  .iggrid{gap:8px}
  .mdate b{font-size:24px}
}


/* ============================================================ revision 11
   Measured on a real 390x844 viewport, section by section. Six things were wrong. */

@media (max-width:760px){

  /* 1. The sticky bar's button ran 31px past the right edge: the text block took
        196px, the button 195px, and 18px of padding each side left no room. */
  .sin{gap:10px;padding:10px var(--pad);align-items:center}
  .sin>div{min-width:0;flex:1 1 auto}
  .sin b{display:block;font-size:12px;letter-spacing:.02em;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .sin .btn{flex:0 0 auto;padding:12px 14px;font-size:13px;letter-spacing:.02em}

  /* 2. The header CTA wrapped onto two lines, which made the nav 96px tall and
        pushed the hero kicker underneath it. */
  .nav{padding:10px var(--pad)}
  .nav .btn{padding:11px 14px;font-size:13px;white-space:nowrap}
  .nav .logo img{height:26px}
  .heroin{padding-top:26px}

  /* 3. The capacity photograph had collapsed to a 354x100 strip. */
  .vpic{aspect-ratio:16/10;height:auto}
  .vpic img{height:100%;object-fit:cover}
  .vpic figcaption b{font-size:clamp(26px,8vw,40px)}

  /* 4. A club row was 149px tall for two short lines. Crest, name and the home
        count now share one grid, so the row reads in a glance. */
  .clist li{grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:4px 14px;padding:14px 16px;align-items:center}
  .clist li>span.cr{grid-row:1/3}
  .clist li>div:nth-of-type(1){grid-column:2;min-width:0}
  .clist b{font-size:17px}
  .clist span{font-size:13px}
  .cright{grid-column:3;grid-row:1/3;text-align:right;padding-left:0}
  .cright b{font-size:15px}
  .cright span{font-size:12px}

  /* 5. Six city chips stacked into three rows and ate 130px of the screen. One
        row that scrolls sideways keeps the filter next to the list it filters. */
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:18px calc(var(--pad)*-1) 14px;padding:0 var(--pad) 2px}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}

  /* 6. 11px is below the floor for body text. */
  .vtab .np{font-size:12px}
}

/* the header was a fixed 96px — a ninth of an iPhone screen for a logo and one
   button — and the anchor offset was tuned to it */
@media (max-width:760px){
  .nav{height:60px}
  .nav .logo img{width:118px;height:auto}
  section,footer{scroll-margin-top:72px}
  .heroin{padding-top:18px}
}


/* ============================================================ revision 12 */

@media (max-width:760px){
  /* The map is drawn in a 1000-unit viewBox. At 354px wide that scales a 24-unit
     city label down to 8.5px on screen — unreadable. Scale the type inside the
     drawing instead of shrinking the drawing. */
  .ksa .kc{font-size:34px}
  .ksa .kn{font-size:38px}
  .ksa{margin:0}

  /* the pass line read as three ragged rows; give it its own two-line block */
  .pass{display:grid;grid-template-columns:1fr;gap:6px;padding:16px 18px}
  .pass b{font-size:15px}
  .pass span{font-size:13px;line-height:1.4}
  .pass a{justify-self:start;font-size:13px}
}


/* ============================================================ revision 13 */

/* Measured at 360px: the last-season table still needed 385px. Its second cell is a
   flex row with a 32px crest, and the club name would not give ground. */
@media (max-width:430px){
  .tbl{font-size:13px;table-layout:fixed}
  .tbl th,.tbl td{padding:9px 5px}
  .tbl td:nth-child(2){gap:8px;min-width:0}
  .tbl td:nth-child(2) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tbl td .cr{width:26px;height:26px;flex:0 0 26px}
  .tbl th:first-child,.tbl td:first-child{width:22px;padding-left:0}
  .tbl th:last-child,.tbl td:last-child{width:34px;padding-right:0}
  .tbl th:nth-last-child(2),.tbl td:nth-last-child(2),
  .tbl th:nth-last-child(3),.tbl td:nth-last-child(3){width:30px}
  .tbl td i{display:none}
}

/* the city chips wrapped to two rows on a tablet as well */
@media (max-width:900px){
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    padding-left:var(--pad);padding-right:var(--pad)}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
}


/* ============================================================ revision 14 */

/* The green edge marks the thing you are meant to act on. It was only on the next
   match; the season pass and the headline stat earn it too. Same 6px inset bar,
   same radius, so the three read as one family. */
.passbar,.card.whynum{position:relative;overflow:hidden}
.passbar::before,.card.whynum::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:6px;background:var(--green);border-radius:6px 0 0 6px}
.passbar{padding-left:32px}
.card.whynum{padding-left:calc(clamp(20px,2vw,34px) + 12px)}

/* the dead `.pass` rules from revision 12 — the element is `.passbar` */
@media (max-width:760px){
  .passbar{display:grid;grid-template-columns:1fr;gap:6px;padding:16px 16px 16px 24px;
    margin:20px 0 12px}
  .passbar b{font-size:16px}
  .passbar span{font-size:13px;line-height:1.4}
  .passbar a{margin-left:0;justify-self:start;font-size:13px}
  .card.whynum{padding-left:30px}
}

@media (max-width:760px){
  /* CLUBS: the crest is 58px but the column was declared 44px, so the name started
     inside the crest. Size the column to the crest and give the name real air. */
  .clist li{grid-template-columns:52px minmax(0,1fr) auto!important;
    gap:2px 16px;padding:14px 16px}
  .clist .cr.big{width:52px;height:52px}
  .clist .cr img{max-width:78%;max-height:78%;width:auto;height:auto}
  .clist li>div:nth-of-type(1){padding-left:0}

  /* VENUES: the photograph sat flush while the map and the table were inset by the
     card padding, so the three blocks did not line up down the left edge. */
  .plotwrap{padding:0;background:none}
  .citylist{padding:18px 0 0;background:none}
  .vtab{width:100%}
  .vtab tbody th{padding-left:0}
  .ksa{border-radius:6px}
}

/* nav: the lockup carries the brand, the rest is utility — so grow the first and
   pull the others back. */
.nav .logo img{width:clamp(150px,15vw,220px)}
.lang{font-size:15px;gap:8px}
.lang a{font-size:16px}

@media (max-width:760px){
  .nav{height:62px;gap:10px}
  .nav .logo img{width:auto;height:34px}
  .lang{font-size:13px;gap:6px}
  .lang a{font-size:14px}
  .nav .btn{padding:10px 12px;font-size:12px;letter-spacing:.02em}

  /* the rail is swiped on a phone; two 44px buttons under it are dead weight */
  .railui{display:none}
}


/* ============================================================ revision 15
   ALIGNMENT. Measured every block's left edge at 390px. Headings and section
   containers sat on the 18px gutter, but anything inside a panel sat on
   18px + the panel's own padding — 38px, 42px, 48px depending on the block. On a
   phone that reads as every block being indented from its own title.

   One rule instead: panels run edge to edge and carry the gutter inside, so every
   line of text in the page starts at the same x. */

@media (max-width:760px){
  .sec .card,.passbar,.mrow,.bgrid>*,.faq details{
    margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    padding-left:var(--pad);padding-right:var(--pad);
    border-radius:0}

  /* the green edge now starts at the screen edge, and 18px of gutter clears it */
  .passbar::before,.card.whynum::before,.mrow[data-next]::before{border-radius:0}
  .card.whynum{padding-left:var(--pad)}
  .passbar{padding-left:var(--pad)}

  /* these two already carried no padding and no panel — keep them on the gutter */
  .plotwrap,.citylist{margin-left:0;margin-right:0;padding-left:0;padding-right:0}

  /* media keeps its caption inset from the picture, not from the page */
  .pcard.lead{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    border-radius:0}
  .pcard.lead .pmeta{padding-left:var(--pad);padding-right:var(--pad)}
  .gal{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);border-radius:0}
  .gs figcaption{padding-left:var(--pad);padding-right:var(--pad)}
  .vpic{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);border-radius:0}
  .vpic figcaption{padding-left:var(--pad);padding-right:var(--pad)}

  /* the match list has its own gaps; without a radius the rows need a divider */
  .mlist{gap:0}
  .mrow+.mrow{border-top:1px solid rgba(59,43,78,.55)}
  .bgrid>*+*{border-top:1px solid rgba(59,43,78,.55)}
}


/* ============================================================ revision 16
   Two panels were still carrying their own indent: the opening-round list in the
   hero (its title and dates sat at 40px) and the assists tiles (30px). Everything
   else that measured off-gutter is a real column — a crest, an avatar, a rank, a
   table cell — and belongs where it is. */

@media (max-width:760px){
  .opening{margin-left:0!important;margin-right:0!important;
    padding-left:var(--pad);padding-right:var(--pad);border-radius:0}
  .alist{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);gap:0}
  .alist li{padding-left:var(--pad);padding-right:var(--pad);border-radius:0}
  .alist li+li{border-top:1px solid rgba(59,43,78,.55)}
}