/* 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)}
}


/* ============================================================ revision 17
   The alignment rule was written at max-width:760px, which was a number I picked
   rather than one the layout justified. Measured across widths: clean at 360, 390,
   414, 430, 600 and 760 — and broken from 761 up, because the page is still a
   single column all the way to 1000px but the panels went back to holding their own
   padding. So the same rule now covers every width where the page is one column. */

@media (max-width:1000px){
  .sec .card,.passbar,.mrow,.bgrid>*,.faq details,.alist{
    margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    border-radius:0}
  .sec .card,.passbar,.mrow,.bgrid>*,.faq details,.alist li{
    padding-left:var(--pad);padding-right:var(--pad)}
  .passbar::before,.card.whynum::before,.mrow[data-next]::before{border-radius:0}
  .card.whynum,.passbar{padding-left:var(--pad)}
  .plotwrap,.citylist{margin-left:0;margin-right:0;padding-left:0;padding-right:0}

  .opening{margin-left:0!important;margin-right:0!important;
    padding-left:var(--pad);padding-right:var(--pad);border-radius:0}
  .alist{gap:0}
  .alist li+li{border-top:1px solid rgba(59,43,78,.55)}
  .mlist{gap:0}
  .mrow+.mrow{border-top:1px solid rgba(59,43,78,.55)}
  .bgrid>*+*{border-top:1px solid rgba(59,43,78,.55)}

  .pcard.lead,.gal,.vpic{margin-left:calc(var(--pad)*-1);
    margin-right:calc(var(--pad)*-1);border-radius:0}
  .pcard.lead .pmeta,.gs figcaption,.vpic figcaption{
    padding-left:var(--pad);padding-right:var(--pad)}
}

/* ============================================================ revision 18
   The reviewer arrived after their own review. Put the person first — you decide
   whether to read a stranger's opinion by knowing whose it is. */
.card.rev{display:flex;flex-direction:column}
.rev footer{order:-2;margin-top:0;margin-bottom:14px;padding-top:0;padding-bottom:14px;
  border-top:0;border-bottom:1px solid var(--p500)}
.rev .stars{order:-1}
.rev p{order:0;margin-top:12px}


/* ============================================================ revision 19
   The subheading is an inline-block plate with 18px of horizontal padding. Its BOX
   sat on the gutter, so my alignment check called it fine — but the eye reads the
   TEXT, and the text started 18px further right than the heading above it. That was
   true in every section, at every width, from the first day.

   Cancel the padding with an equal negative margin: the plate now starts 18px into
   the gutter and the first letter lands exactly under the heading. */
.sub{margin-left:-18px}
.sub.warn{margin-left:-18px}


/* ============================================================ revision 20
   Three more things my text-based check could not see, plus two content calls.

   The club rows were never in the full-bleed set, so their crest — an image, and
   therefore invisible to a check that only measures text — sat 16px inside the
   gutter while the heading above sat on it. Same for the map: the photograph above
   it went edge to edge, the map did not, so the two blocks disagreed. */

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

  /* the map matches the photograph above it: both edge to edge */
  .plotwrap{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    padding:0}
  .ksa{border-radius:0}

  /* the per-city match count is already the row count in the table beside it */
  .vtab tbody th em{display:none}
  .vtab .np{font-size:inherit;color:var(--lilac);font-weight:400}
}

/* the leader's green edge belongs on the edge of the table, not inside the cell */
.tbl{position:relative}
.tbl tr.top td:first-child{box-shadow:none}
.tbl tr.top{position:relative}
.tbl tr.top td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:5px;background:var(--green)}
.tbl tr.top td:first-child{position:relative;color:var(--greenb);font-weight:900}


/* ============================================================ revision 21
   `.plotwrap{padding:0}` lost to `.sec .card{padding-left:var(--pad)}` — two classes
   beat one, and specificity beats source order. So the wrapper went full-bleed while
   its own 18px of padding held the map back to 354px. Match the specificity. */
@media (max-width:1000px){
  .sec .card.plotwrap{padding:0}
  .sec .card.citylist{padding-left:var(--pad);padding-right:var(--pad)}
}


/* ============================================================ revision 22 */

@media (max-width:1000px){
  /* The seats column was colliding with the match count — "6" and "24,000" printed
     as "624,000". On a phone the useful number is how many matches a ground holds;
     capacity is a desktop detail. Drop the column and label the two that remain. */
  .vtab thead{display:table-header-group}
  .vtab thead th{font-size:11px;letter-spacing:.08em;padding-bottom:10px}
  .vtab th:last-child,.vtab td:last-child{display:none}
  .vtab th:nth-child(3),.vtab td:nth-child(3){text-align:right;width:1%;
    white-space:nowrap;padding-left:14px}
  .vtab tbody th{padding-right:14px}

  /* every question carries the green edge, not only the open one */
  .faq details{box-shadow:inset 6px 0 0 var(--p500)}
  .faq details[open]{box-shadow:inset 6px 0 0 var(--green)}
  .faq summary{padding-left:22px}
  .faq .ans p{padding-left:22px;padding-right:var(--pad)}
}

/* the same on every width — a closed question is still a question */
.faq details{box-shadow:inset 6px 0 0 var(--p500);transition:box-shadow .2s ease}
.faq details[open]{box-shadow:inset 6px 0 0 var(--green)}

/* the broadcaster block earns the green edge too */
.wgrid>.card:first-child{position:relative;overflow:hidden}
.wgrid>.card:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:6px;background:var(--green)}

/* the rating block was floating in its own column of air */
.score .rlabel{margin-bottom:4px}
.score .stars{margin:6px 0 4px}
.score p{margin-top:0}
@media (max-width:1000px){
  .score{padding-top:16px;padding-bottom:16px}
  .score .rlabel{margin-bottom:2px}
  .score b{line-height:.9}
  .score .stars{margin:4px 0 2px}
}


/* ============================================================ revision 23
   Measured: 46px between the subheading and RATING, 34px between "from 136 reviews"
   and the first review. Both were the section margin plus the card padding stacking
   up, which on a phone reads as the block having come loose. */
@media (max-width:1000px){
  .rgrid{margin-top:16px;gap:12px}
  .score{padding-top:14px;padding-bottom:12px}
  .score p{font-size:14px}
}


/* ============================================================ revision 24 */

/* the closed question was marked in lilac; the mark should read as the same green
   family throughout, with brightness carrying the open/closed state */
.faq details{box-shadow:inset 6px 0 0 var(--green)}
.faq details[open]{box-shadow:inset 6px 0 0 var(--greenb)}

/* One continuous green edge for the club list and for the stadium table, rather than
   a mark per row — they are single blocks and read better as one. */
.clist,.citylist{position:relative}
.clist::before,.citylist::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:6px;background:var(--green)}

@media (max-width:1000px){
  /* both blocks run edge to edge on a phone, so the bar lands on the screen edge and
     the 18px gutter clears it */
  .clist::before,.citylist::before{left:0}
  .clist li{border-radius:0}

  /* RATING was still sitting 30px below the subheading */
  .rgrid{margin-top:8px}
  .score{padding-top:6px}
}


/* ============================================================ revision 25
   The green edge was drawn on the list, but only the list's rows had been pulled to
   the screen edge — the list itself still started at 18px, so the bar landed on top
   of the first crest. Move the bleed up to the list and let the rows sit inside it. */
@media (max-width:1000px){
  .clist{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1)}
  .clist li{margin-left:0!important;margin-right:0!important}
}


/* ============================================================ revision 26
   On a phone the opening-round panel and the ticket list beneath it were the same
   four fixtures twice, one of them without a price or a buy button. The tickets win:
   they answer the same question and they sell. So the panel goes, and the hero comes
   down to the height of its own copy instead of holding a screen open for a list
   that is no longer there. */
@media (max-width:760px){
  .opening{display:none}
  .hero{min-height:auto}
  .heroin{padding-top:34px;padding-bottom:38px}
  .hero h1{font-size:clamp(38px,12.5vw,60px)}
  .hero .btn-lg{margin-top:6px}
}


/* ============================================================ revision 27
   I read "уменьши расстояние выше rating" as the gap under the label too and closed
   it to 2px. Wrong way round: the label needs air before the numeral, the same as
   TOP SCORER got. */
.score .rlabel{margin-bottom:16px}
@media (max-width:1000px){
  .score .rlabel{margin-bottom:14px}
  .score b{line-height:.85}
}


/* ============================================================ revision 28 */

/* The row backgrounds were painting over the list's green edge, and on hover the row
   lifts, so the bar disappeared under it. Put the bar above the rows. */
.clist::before,.citylist::before{z-index:2}
.clist li{position:relative;z-index:1}

/* The season pass now sits below the city filter: it is the one offer the filter does
   not change, so it belongs after the control rather than above it. It takes the green
   edge, and the next-match row gives its up — otherwise two things in the same block
   claim to be the thing to look at, and one of them vanishes when you filter. */
.mrow[data-next]::before{display:none}
.passbar{margin-top:6px;margin-bottom:16px}
@media (max-width:1000px){
  .passbar{margin-top:2px;margin-bottom:12px}
}


/* ============================================================ revision 29
   The subheading plate was pulled 18px into the gutter so its text could line up
   with the heading. That fixed the text and broke the plate — the tinted band now
   hung out past the title. Drop the left padding instead: the plate starts on the
   gutter and so does the first letter, so both edges agree. */
.sub{margin-left:0;padding-left:0;padding-right:16px}
.sub.warn{margin-left:0;padding-left:14px}


/* ============================================================ revision 30
   A slight overhang: the plate steps 6px left while the text keeps the gutter, so
   the band reads as aligned with the heading rather than starting inside it. Large
   display type carries its own side bearing, and a hard-edged rectangle set flush
   to it always looks a hair too far right. */
.sub{margin-left:-6px;padding-left:6px}
.sub.warn{margin-left:-6px;padding-left:14px}


/* ============================================================ revision 31
   FITTING A SECTION ON A LAPTOP.

   Measured at 1440x700, which is what a 13" MacBook actually gives a page: the nav
   is 96px and the sticky bar 80px, so 176px — a quarter of the window — is gone
   before any content, and .sec adds 86px of padding top and bottom. Usable height
   came to 524px, and every single section overflowed it.

   The design was built and reviewed at 900px+ of viewport. These rules key off
   viewport HEIGHT, not width, so a short window gets a tighter page and a tall one
   is untouched. */

@media (max-height:820px){
  .nav{height:68px}
  .nav .logo img{width:clamp(132px,11vw,168px)}
  .sticky .sin{padding-top:11px;padding-bottom:11px}
  .sin b{font-size:14px}
  .sin .btn{padding:12px 18px;font-size:14px}
  .sec{padding-top:clamp(34px,4.4vh,58px);padding-bottom:clamp(34px,4.4vh,58px)}
  section,footer{scroll-margin-top:80px}
  .h{font-size:clamp(28px,3.6vh,42px)}
  .sub{margin-top:12px;padding-top:9px;padding-bottom:9px}
  .hero{min-height:min(76vh,620px)}
  .heroin{padding-top:28px;padding-bottom:28px}

  /* players: lead card, rail and the assists list are one composition — it has to
     land in one view or the whole point of the rail is lost */
  .pcard.lead{min-height:clamp(300px,46vh,430px)}
  .rail{grid-auto-columns:minmax(178px,196px)}
  .rail .pcard{aspect-ratio:5/6}
  .alist li{padding:11px 13px}
  .alist b{font-size:26px}
  .ah{margin:16px 0 8px}

  /* venues: the photograph had a full-width row of its own, so the section was
     photo + map + a ten-row table stacked — 1072px of grid. Photo and map share the
     left column now, the table takes the right, and the table scrolls inside itself
     rather than pushing the section past the fold. */
  .vgrid{grid-template-areas:"pic list" "plot list"!important;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;
    align-items:start}
  .vpic{aspect-ratio:16/7}
  .citylist{max-height:clamp(360px,62vh,560px);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--p500) transparent}
  .vtab thead th{position:sticky;top:0;background:var(--chip);z-index:2}

  /* last season, reviews, before-you-go: trim the fat, keep the type readable */
  .crow .cr{width:76px;height:76px}
  .tbl th,.tbl td{padding:8px 8px}
  .whynum b{font-size:clamp(72px,11vh,150px)}
  .score b{font-size:clamp(48px,8vh,92px)}
  .bt{padding:20px}
}

@media (max-height:700px){
  .sec{padding-top:30px;padding-bottom:30px}
  .hero{min-height:auto}
  .pcard.lead{min-height:clamp(280px,42vh,360px)}
}


/* ============================================================ revision 32
   Sticky city filter on a phone. Scrolling a 21-match list you lose sight of which
   city you picked and have to scroll back up to change it. The chip row now pins
   under the header while the ticket list is in view. */
@media (max-width:1000px){
  #tickets .filters{position:sticky;top:60px;z-index:40;
    background:rgba(20,8,34,.96);backdrop-filter:blur(8px);
    padding-top:10px;padding-bottom:10px;
    border-bottom:1px solid rgba(59,43,78,.6)}
}
@media (max-width:1000px) and (max-height:820px){
  #tickets .filters{top:60px}
}

/* ============================================================ revision 33
   SECTION ANIMATION. There was already a reveal — opacity plus a small rise, one
   step per section. It reads as a page that loads, not a page that moves. This adds
   a stagger: the section's own cards, rows and tiles come in one after another,
   80ms apart, and the display numeral scales up from 96%. Everything is behind the
   .motion class the script sets, so with JavaScript off nothing hides, and the whole
   block is switched off under prefers-reduced-motion. */
.motion .rv .card,.motion .rv .mrow,.motion .rv .igt,.motion .rv .bt,
.motion .rv details,.motion .rv .clist li,.motion .rv .alist li,
.motion .rv .pcard,.motion .rv .vtab tbody tr{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
.motion .rv.in .card,.motion .rv.in .mrow,.motion .rv.in .igt,.motion .rv.in .bt,
.motion .rv.in details,.motion .rv.in .clist li,.motion .rv.in .alist li,
.motion .rv.in .pcard,.motion .rv.in .vtab tbody tr{
  opacity:1;transform:none}

/* the stagger: nth-child buys eight steps, which covers every list we have */
.motion .rv.in .mrow:nth-child(2),.motion .rv.in .clist li:nth-child(2),
.motion .rv.in .igt:nth-child(2),.motion .rv.in .bt:nth-child(2),
.motion .rv.in details:nth-child(2),.motion .rv.in .alist li:nth-child(2),
.motion .rv.in .vtab tbody tr:nth-child(2){transition-delay:.06s}
.motion .rv.in .mrow:nth-child(3),.motion .rv.in .clist li:nth-child(3),
.motion .rv.in .igt:nth-child(3),.motion .rv.in .bt:nth-child(3),
.motion .rv.in details:nth-child(3),.motion .rv.in .alist li:nth-child(3),
.motion .rv.in .vtab tbody tr:nth-child(3){transition-delay:.12s}
.motion .rv.in .mrow:nth-child(4),.motion .rv.in .clist li:nth-child(4),
.motion .rv.in .igt:nth-child(4),.motion .rv.in .bt:nth-child(4),
.motion .rv.in .alist li:nth-child(4),
.motion .rv.in .vtab tbody tr:nth-child(4){transition-delay:.18s}
.motion .rv.in .mrow:nth-child(5),.motion .rv.in .clist li:nth-child(5),
.motion .rv.in .igt:nth-child(5),.motion .rv.in .bt:nth-child(5),
.motion .rv.in .vtab tbody tr:nth-child(5){transition-delay:.24s}
.motion .rv.in .clist li:nth-child(6),.motion .rv.in .igt:nth-child(6),
.motion .rv.in .bt:nth-child(6),.motion .rv.in .vtab tbody tr:nth-child(6){transition-delay:.3s}
.motion .rv.in .clist li:nth-child(7),.motion .rv.in .igt:nth-child(7),
.motion .rv.in .vtab tbody tr:nth-child(7){transition-delay:.36s}
.motion .rv.in .clist li:nth-child(8),.motion .rv.in .igt:nth-child(8),
.motion .rv.in .vtab tbody tr:nth-child(8){transition-delay:.42s}

/* the one big number in a section arrives last and grows into place */
.motion .rv .whynum b,.motion .rv .score b,.motion .rv .vpic figcaption b{
  opacity:0;transform:scale(.96);
  transition:opacity .55s ease .1s,transform .6s cubic-bezier(.22,.61,.36,1) .1s}
.motion .rv.in .whynum b,.motion .rv.in .score b,.motion .rv.in .vpic figcaption b{
  opacity:1;transform:none}

/* the heading and its plate lead, before the content behind them */
.motion .rv .h{opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.motion .rv .sub{opacity:0;transform:translateY(10px);
  transition:opacity .45s ease .07s,transform .45s cubic-bezier(.22,.61,.36,1) .07s}
.motion .rv.in .h,.motion .rv.in .sub{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .motion .rv .card,.motion .rv .mrow,.motion .rv .igt,.motion .rv .bt,
  .motion .rv details,.motion .rv .clist li,.motion .rv .alist li,
  .motion .rv .pcard,.motion .rv .vtab tbody tr,
  .motion .rv .h,.motion .rv .sub,
  .motion .rv .whynum b,.motion .rv .score b,.motion .rv .vpic figcaption b{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* the section itself no longer travels — its children do, so a single 26px slide on
   the whole block on top of a per-child slide read as two moves for one arrival */
.motion .rv{transform:none}
.motion .rv.in{transform:none}


/* ============================================================ revision 34
   Second pass on the measurements. Three sections were still tall for a reason I
   could fix rather than a reason I had to accept.

   Clubs: the two-column list collapsed to one at 1500px, so a 1440 laptop — the most
   common one — got eight stacked rows, 979px. It fits two columns comfortably at
   1440; the real collapse point is nearer 1100. */
@media (min-width:1100px){
  .clist{grid-template-columns:1fr 1fr!important}
}

@media (max-height:820px){
  /* venues: the table was still driving the height. Shorter photo, tighter rows. */
  .vpic{aspect-ratio:16/6}
  .citylist{max-height:clamp(300px,52vh,440px)}
  .vtab th,.vtab td{padding:8px 10px}
  .vtab tbody th{padding-top:11px}

  /* last season, instagram, closing: each was within ~100px of fitting */
  .tbl td:nth-child(2){gap:9px}
  .tbl td .cr{width:26px;height:26px}
  .iggrid{gap:10px}
  .crow{gap:16px}
  .lgrid,.wgrid,.rgrid,.bgrid{gap:16px}
  .finin{gap:20px}
  .fin h2{font-size:clamp(30px,4.6vh,54px)}
  .cd b{font-size:clamp(44px,7vh,92px)}
  .btn-lg{padding:15px 26px}

  /* players: 22px over at 1512, 74px at 1440 */
  .alist{gap:10px}
  .pgrid{gap:18px}
}


/* ============================================================ revision 35
   Third pass. What was left over was: the drawn map (a 1000x700 viewBox scaled to
   the column width, so nearly 500px tall), the Instagram grid at three rows, and
   two sections within 100px of fitting. */
@media (max-height:820px){
  /* the SVG scales down inside a shorter box; nothing is cropped */
  .ksa{height:clamp(230px,32vh,360px);width:100%}
  .plotwrap{display:flex;align-items:center}

  /* twelve tiles in two rows instead of three */
  .iggrid{grid-template-columns:repeat(6,1fr)}

  .ah{margin:12px 0 6px}
  .alist li{padding:9px 12px}
  .fin p,.wgrid p{line-height:1.42}
  .cd span{font-size:14px}
  .final .btn-lg{padding:14px 24px}
}
@media (max-height:820px) and (max-width:1200px){
  .iggrid{grid-template-columns:repeat(4,1fr)}
}


/* ============================================================ revision 36
   Fourth pass, aimed only at what the 1440x700 screenshots still showed cut: the
   bottom of the assists list, and the drawn map. Both were within ~150px. */
@media (max-height:760px){
  .pcard.lead{min-height:clamp(250px,37vh,330px)}
  .rail .pcard{aspect-ratio:1}
  .rail{grid-auto-columns:minmax(160px,178px)}
  .rail .pmeta b{font-size:clamp(28px,4.4vh,44px)}
  .alist b{font-size:22px}
  .railui{margin-top:12px}
  .rl{width:42px;height:42px;font-size:22px}

  .vpic{aspect-ratio:16/5}
  .ksa{height:clamp(190px,26vh,290px)}
  .citylist{max-height:clamp(250px,42vh,370px)}
  .vgrid{gap:14px}
}


/* ============================================================ revision 37

   1. The bottom sticky bar is gone from the markup — the header carries GET TICKETS
      on every width, and the bar was holding 64px of a laptop window permanently for
      a second copy of the same button. That alone gives every section 64px back. */
body{padding-bottom:0}
.sticky{display:none}

/* 2. The sticky city filter had a seam: the chip row pinned under the header but its
      background did not reach the screen edges, so a sliver of the match list showed
      through beside it. It is now one continuous bar with the header — same tint,
      same blur, edge to edge, and the row below scrolls cleanly under it. */
@media (max-width:1000px){
  #tickets .filters{
    position:sticky;top:60px;z-index:40;
    margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    padding:12px var(--pad) 12px;
    background:rgba(20,8,34,.97);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--p500);
    box-shadow:0 10px 18px -12px rgba(0,0,0,.75)}
  #tickets .filters::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
    background:var(--p500)}
  /* the first row must not start underneath the bar */
  #tickets .mlist{margin-top:0}
}

/* 3. Venues. Photo and map cannot be the same size without letterboxing one of them:
      the drawn map is 1000x700 (1.43:1) and the photograph reads as a band at 3.2:1.
      Forced into one box, the map floats in 360px of empty panel.

      So on a short window the photograph goes instead — its number, 2,000 to 24,000,
      is already printed in the line under the heading, exactly the duplication the
      opening-round panel had. The map then takes the whole left column at a readable
      size and the table sits beside it. */
@media (max-height:820px){
  .vgrid{grid-template-areas:"plot list"!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .vpic{display:none}
  .ksa{height:auto;aspect-ratio:10/7;max-height:clamp(280px,44vh,420px)}
  .citylist{max-height:clamp(280px,44vh,420px)}
}


/* ============================================================ revision 38
   Last two, both within 40px: the Instagram grid and the closing block. */
@media (max-height:820px){
  .iggrid{gap:8px;margin-top:18px}
  .igt{border-radius:3px}
  #social .btn-o{margin-top:16px;padding:12px 20px}
  .fin{padding-top:0}
  .finin{gap:16px}
  .cd{margin-top:0}
  #final .btn-lg{margin-top:14px}
}


/* ============================================================ revision 39
   The stadium table scrolls inside its panel, and a half-cut row at the bottom edge
   reads as the same "it got clipped" problem, just moved indoors. A fade over the
   last few pixels says the list continues, which a hard crop does not. */
.citylist{position:relative}
.citylist::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(26,13,44,0),var(--chip) 78%);
  opacity:0;transition:opacity .2s ease}
@media (max-height:820px){
  .citylist::after{opacity:1}
}


/* ============================================================ revision 40
   The map panel and the table panel started and ended at different heights, so the
   two blocks in the section did not line up on either edge. Stretch both columns to
   the same height and centre the drawing inside its panel. */
@media (max-height:820px){
  .vgrid{align-items:stretch!important}
  .sec .card.plotwrap{display:flex;align-items:center;justify-content:center;
    padding:clamp(14px,1.6vw,24px)}
  .ksa{max-height:100%;height:auto;aspect-ratio:10/7}
  .citylist{max-height:none;height:100%;overflow-y:auto}
}

/* no 300ms tap delay on the filter chips */
.chip{touch-action:manipulation;-webkit-tap-highlight-color:transparent}


/* ============================================================ revision 41
   Touch-tested every chip: JEDDAH and RIYADH took the first tap, AL QATIF did not.
   It sat half outside the horizontally scrolling row, so the first tap was spent
   scrolling it into view and only the second selected it — exactly the "first click
   doesn't work" report, and it would hit the last three chips every time.

   A scroller you have to swipe before you can aim is the wrong control for six
   fixed options. They wrap onto two rows instead: every chip is visible and
   tappable on the first go, and there is no gesture to compete with. */
@media (max-width:1000px){
  #tickets .filters{flex-wrap:wrap;overflow:visible;row-gap:8px;column-gap:8px}
  #tickets .chip{flex:0 0 auto;font-size:13px;padding:9px 13px;letter-spacing:.02em}
}
@media (max-width:430px){
  #tickets .chip{font-size:12px;padding:9px 11px}
}


/* ============================================================ revision 42
   Wrapping gave two rows at 390px but three at 360, and a 149px sticky bar on a
   780px screen is a fifth of the window. Six fixed options in a 3x2 grid instead:
   always two rows whatever the label widths, and every cell is a full-width target
   rather than a text-sized one. */
@media (max-width:1000px){
  #tickets .filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;overflow:visible}
  #tickets .chip{width:100%;text-align:center;padding:10px 6px;font-size:12.5px;
    letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:380px){
  #tickets .chip{font-size:11.5px;padding:10px 4px}
}


/* ============================================================ revision 43
   The chips go back to one sideways row. The first-tap failure was not the scroller
   swallowing the gesture — it was the automated tap aiming at the centre of a chip
   whose centre lay outside the clip. The pointerdown handler already lands the tap
   before any scroll decision is made, so a real finger on the visible part works.
   pan-x keeps the row from fighting a vertical swipe. */
@media (max-width:1000px){
  #tickets .filters{display:flex;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;touch-action:pan-x;
    gap:8px;
    margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    padding:12px var(--pad)}
  #tickets .filters::-webkit-scrollbar{display:none}
  #tickets .chip{flex:0 0 auto;width:auto;text-align:center;
    font-size:13px;padding:9px 14px;letter-spacing:.02em}
}
@media (max-width:380px){
  #tickets .chip{font-size:12.5px;padding:9px 12px}
}

/* ============================================================ revision 44
   The season pass now reads like a match row, because that is what it is competing
   with: the name at the size of a date, the price in green, and BUY on the right. */
.passbar{display:grid;
  grid-template-columns:clamp(112px,10vw,168px) 1fr auto auto;
  gap:10px 26px;align-items:center;
  padding:18px 26px 18px 32px}
.passbar .pmain{grid-column:1/3;display:flex;flex-direction:column;gap:2px}
.passbar b{font-size:clamp(22px,2vw,34px);font-weight:900;line-height:1;
  text-transform:uppercase;letter-spacing:-.01em}
.passbar span{color:var(--lilac);font-size:15px;text-transform:uppercase;
  letter-spacing:.03em;font-weight:500}
.passbar .pprice{grid-column:3;color:var(--greenb);font-weight:900;
  font-size:clamp(15px,1.2vw,21px);white-space:nowrap}
.passbar .btn{grid-column:4}
.passbar a{margin-left:0}

@media (max-width:1000px){
  .passbar{grid-template-columns:1fr auto;gap:6px 14px;
    padding:16px var(--pad) 16px calc(var(--pad) + 6px)}
  .passbar .pmain{grid-column:1/-1}
  .passbar b{font-size:26px}
  .passbar span{font-size:13px}
  .passbar .pprice{grid-column:1;align-self:center}
  .passbar .btn{grid-column:2;justify-self:end}
}
@media (max-width:430px){
  .passbar b{font-size:24px}
}


/* ============================================================ revision 45

   The pass's BUY label was green on green. `.passbar a` — set back when the row
   ended in a "SEE THE PASS" text link — is two selectors deep and beat `.btn`,
   so it kept colouring the anchor. Scope that old rule away from the button. */
.passbar a.btn{color:var(--p900);text-transform:uppercase;font-weight:900}
.passbar .btn{color:var(--p900)}

/* The sticky filter no longer changes the ground it sits on. On a phone the page's
   background behind it is the flat plate — the graphic panels are off screen at
   this width — so the bar uses that exact colour, with no tint, blur or border. */
@media (max-width:1000px){
  #tickets .filters{
    background:#1A0D2C;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom:0;box-shadow:none}
  #tickets .filters::before{display:none}
}


/* ============================================================ revision 46
   THE CLIFF.

   Measured across viewport heights at 1760 wide: at 820px tall 10 of 13 sections
   fit; at 860px tall only 6 do, and the venues section goes from 33px over to 721px
   over. That is not a design problem, it is my breakpoint. Everything from the last
   pass was gated behind @media (max-height:820px) — another number I picked out of
   the air — so a window one pixel taller gets the nav back at 96px, the section
   padding back at 96px and the heading back at 54px, all at once.

   Taha's window is above that line, which is why the same complaint kept coming back
   after I had "fixed" it twice. Browser zoom is a red herring in the sense that it
   would lower his CSS height and help; the fault is the cliff itself.

   So: no gate. The vertical rhythm is fluid in vh across the whole range, capped by
   BOTH vw and vh so display type stops growing when the window is short whatever its
   width. Any height — a small laptop, a zoomed page, a split screen — compresses in
   proportion, and there is no step to fall off. */

.nav{height:clamp(60px,9vh,96px)}
section,footer{scroll-margin-top:calc(clamp(60px,9vh,96px) + 14px)}
.sec{padding-top:clamp(30px,6vh,86px);padding-bottom:clamp(30px,6vh,86px)}
.h{font-size:clamp(26px,min(3.2vw,4.6vh),54px)}
.sub{margin-top:clamp(10px,1.7vh,18px)}
.hero{min-height:min(84vh,820px)}

/* the one big numeral per section: capped by height as well as width */
.whynum b{font-size:clamp(64px,min(14vw,20vh),240px)}
.score b{font-size:clamp(44px,min(6.4vw,12vh),118px)}
.pcard.lead .pmeta b{font-size:clamp(52px,min(7.4vw,14vh),140px)}
.pcard.lead .pmeta h3{font-size:clamp(22px,min(2.6vw,4.4vh),48px)}
.vpic figcaption b{font-size:clamp(26px,min(3.6vw,6.4vh),64px)}
.cd b{font-size:clamp(40px,min(7vw,11vh),118px)}
.fin h2{font-size:clamp(28px,min(4.6vw,7vh),72px)}

/* the fixed-height compositions follow the window too */
.pcard.lead{min-height:clamp(250px,42vh,660px)}
.rail{grid-auto-columns:minmax(158px,clamp(158px,25vh,232px))}
.crow .cr{width:clamp(60px,11vh,96px);height:clamp(60px,11vh,96px)}
.tbl{font-size:clamp(13px,min(1.1vw,1.9vh),19px)}
.iggrid{gap:clamp(8px,1.5vh,14px)}
.citylist{max-height:clamp(270px,50vh,720px)}
.ksa{height:auto;aspect-ratio:10/7;max-height:clamp(220px,40vh,520px)}
.lgrid,.wgrid,.rgrid,.bgrid{gap:clamp(14px,2.4vh,24px)}
.vgrid{gap:clamp(12px,2vh,24px)}
.finin{gap:clamp(16px,3vh,40px)}
.alist{gap:clamp(9px,1.6vh,14px)}
.ah{margin:clamp(11px,2vh,26px) 0 clamp(6px,1vh,12px)}

/* The venues layout change is structural, not a size tweak, and it was needed well
   above 820px — at 860 the section was 1251px tall. It now applies to any desktop
   window shorter than 1100px, which is very nearly all of them. */
@media (min-width:1001px) and (max-height:1100px){
  .vgrid{grid-template-areas:"plot list";
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .vpic{display:none}
  .sec .card.plotwrap{display:flex;align-items:center;justify-content:center}
  .citylist{height:100%;overflow-y:auto}
  .citylist::after{opacity:1}
}


/* ============================================================ revision 47
   Same treatment for the two that were still over on a short window, and no gate on
   these either. */
.gal{max-height:clamp(210px,33vh,440px)}
.final{min-height:auto}
.fin p{font-size:clamp(15px,min(1.2vw,2.1vh),21px)}
.fin{padding-top:clamp(24px,5vh,80px);padding-bottom:clamp(24px,5vh,80px)}
.iggrid{gap:clamp(7px,1.2vh,14px)}
.igt{border-radius:clamp(3px,.5vh,6px)}
#social .btn-o{margin-top:clamp(14px,2.4vh,30px)}

.final{padding-top:clamp(30px,min(8vw,7vh),120px);
       padding-bottom:clamp(30px,min(8vw,7vh),120px)}


/* ============================================================ revision 48
   Ran a proper matrix — 20 sizes from a 360px Android to a 4K desktop — and it found
   two things the seven sizes I had been checking did not.

   1. An 11px font. The venues table header was set to 11px back in revision 22 and
      survived every later pass because my checks only looked at body copy. 12px is
      the floor and it applies to labels too. */
.vtab thead th{font-size:12px}

/* 2. I fixed one cliff and built another. The venues layout switch was gated at
      max-height:1100px, so a 1440-tall monitor turned it back off, the photograph
      returned, and the section went 120px over again. Exactly the fault I had just
      spent a pass removing.

      No height gate now. Two columns is the desktop default at any height. And when
      there is genuinely room — wide AND tall — the photograph comes back as a third
      column rather than as an extra row, which is what made it expensive before. */
@media (min-width:1001px){
  .vgrid{grid-template-areas:"plot list";
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .vpic{display:none}
  .sec .card.plotwrap{display:flex;align-items:center;justify-content:center}
  .citylist{height:100%;overflow-y:auto}
  .citylist::after{opacity:1}
}
@media (min-width:1600px) and (min-height:1101px){
  .vgrid{grid-template-areas:"pic plot list";
    grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.1fr)}
  .vpic{display:block;aspect-ratio:4/5;margin:0;height:100%}
  .vpic img{height:100%;object-fit:cover}
}