/* soccercommercials.com — The Four-Year Clock
   PALETTE (5, each with a job)
   --paper  #f3efe4  ground
   --ink    #17150f  ink
   --red    #c8102e  accent      (saturated, hue ~352)
   --blue   #1d3fd6  secondary   (saturated, hue ~230 — 120 deg from the accent)
   --mute   #8a8272  quiet furniture
   Both saturated members carry real area: the red Sanctioned plate and article
   dossier bands, the blue on 2002/section marks and links-in-context.
*/
:root{
  --paper:#f3efe4; --ink:#17150f; --red:#c8102e; --blue:#1d3fd6;
  --mute:#8a8272; --line:#d8d1bf; --paper-2:#eae5d7; --night:#17150f;
  --disp:'Big Shoulders Display',Impact,sans-serif;
  --body:Lora,Georgia,'Times New Roman',serif;
  --gut:clamp(18px,4vw,44px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--blue)}
::selection{background:#ffe27a;color:var(--ink)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  line-height:.94;letter-spacing:-.005em;margin:0;text-wrap:balance}
.wrap{max-width:1560px;margin:0 auto;padding-inline:var(--gut)}
.measure{max-width:74ch}
.kicker{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mute)}
.ico{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-.13em}

/* ---------- masthead ---------- */
.masthead{border-bottom:none}
.mast-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(16px,3vw,40px);padding-top:26px;flex-wrap:wrap}
.mast-name{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);
  color:var(--ink)}
.mast-mark{flex:none;width:clamp(34px,3.6vw,58px);height:auto}
.mast-word{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(21px,4.3vw,64px);line-height:.9;letter-spacing:-.015em;white-space:nowrap}
.mast-word b{font-weight:900;color:var(--red)}
.mast-line{max-width:30ch;font-size:15px;line-height:1.5;color:#5f594a;
  padding-top:.4em;text-wrap:pretty}
.nav{display:flex;align-items:flex-start;gap:clamp(18px,3vw,40px);flex-wrap:wrap;
  margin-top:16px;padding:15px 0 16px;background:var(--night);color:var(--paper);
  box-shadow:0 0 0 100vmax var(--night);clip-path:inset(0 -100vmax)}
.nav .ico{width:1.5em;height:1.5em;stroke:#ffcd00}
.nav-top{display:inline-flex;align-items:center;gap:.45em;font-family:var(--disp);
  font-weight:700;font-size:clamp(19px,1.7vw,24px);letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper);padding-bottom:3px;border-bottom:3px solid transparent}
.nav-top:hover{color:#ffcd00;border-bottom-color:#ffcd00}
.nav-top[aria-current]{border-bottom-color:var(--red)}
.nav-group{display:flex;flex-direction:column;gap:6px}
.nav-sub{display:flex;gap:13px;flex-wrap:wrap}
.nav-sub a{font-family:var(--disp);font-weight:600;font-size:17px;
  letter-spacing:.12em;color:#a29a89;border-bottom:2px solid transparent}
.nav-sub a:hover{color:var(--paper)}
.nav-sub a[aria-current]{color:var(--paper);border-bottom-color:var(--red)}
.nav-spacer{flex:1 1 0;min-width:0}
.nav-standing{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap;padding-top:3px}
.nav-standing a{display:inline-flex;align-items:center;gap:.4em;font-family:var(--disp);
  font-weight:600;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:#bcb4a4}
.nav-standing a:hover{color:#ffcd00}
.nav-standing a[aria-current]{color:var(--paper);border-bottom:3px solid var(--red)}

/* ---------- figures: one drawing system, four treatments ---------- */
figure{margin:0}
.article-figure figcaption,.fig-cap{font-family:var(--body);font-size:16px;
  line-height:1.5;color:#3a362c;max-width:56ch;text-wrap:pretty}
.fig-cap .credit,.article-figure .credit{display:block;margin-top:5px;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#a39a86}
/* 1 · plate — hairline inset + drawn corner brackets, caption hangs off a red rule */
.fig-plate{margin:34px 0}
.fig-plate .frame{position:relative;border:1px solid var(--line);padding:9px;
  background:var(--paper-2)}
.fig-plate .frame img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-plate .frame::before,.fig-plate .frame::after{content:"";position:absolute;
  width:16px;height:16px;border:2px solid var(--red)}
.fig-plate .frame::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.fig-plate .frame::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.fig-plate figcaption{margin-top:12px;padding-top:9px;border-top:2px solid var(--red)}
/* 2 · mat — photograph sits on a coloured mat, caption inside it */
.fig-mat{margin:40px 0;background:var(--red);color:#f7f2e6;padding:clamp(16px,3vw,40px)}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{margin-top:16px;color:#f7f2e6;font-size:17px;max-width:60ch}
.fig-mat .credit{color:rgba(247,242,230,.66)}
.fig-mat.ink{background:var(--night)}
/* 3 · bleed — breaks the measure, caption offset into a side column */
.fig-bleed{margin:48px 0}
.fig-bleed img{width:100%;height:clamp(300px,54vh,620px);object-fit:cover}
.fig-bleed .cap-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(12px,3vw,40px);padding:12px var(--gut) 0;max-width:1560px;margin:0 auto}
.fig-bleed .cap-row .n{font-family:var(--disp);font-weight:800;font-size:26px;
  color:var(--red);line-height:1}
/* 4 · inset — sits in the column, prose runs beside it */
/* 4 · offset — image runs wide, caption steps out into the margin beside it */
.fig-inset{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(170px,24%,300px));
  gap:clamp(16px,2vw,30px);align-items:end;margin:34px 0 40px}
.fig-inset img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line)}
.fig-inset figcaption{margin:0;font-size:15px;border-top:2px solid var(--ink);padding-top:9px;
  max-width:none}
@media (max-width:720px){.fig-inset{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ---------- homepage bands ---------- */
.lead-band{position:relative;background:var(--night);min-height:min(86vh,800px);
  display:flex;align-items:flex-end;overflow:hidden}
.lead-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.lead-band .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,8,6,.88) 0%,rgba(9,8,6,.54) 46%,rgba(9,8,6,.05) 80%),
             linear-gradient(0deg,rgba(9,8,6,.55) 0%,rgba(9,8,6,0) 45%)}
.lead-band .plate{position:relative;width:100%;
  padding-block:clamp(60px,14vh,120px) clamp(28px,6vh,56px)}
.lead-band .sig{font-family:var(--disp);font-weight:600;font-size:clamp(15px,1.5vw,20px);
  letter-spacing:.3em;text-transform:uppercase;color:#ffcd00}
.lead-band h1{margin:.35em 0 0;max-width:17ch;color:var(--paper);
  font-size:clamp(38px,6.6vw,124px);line-height:.86;font-weight:900}
.lead-band p{margin:1em 0 0;max-width:48ch;font-size:clamp(16px,1.5vw,19px);
  line-height:1.55;color:#ded7c6;text-wrap:pretty}
.lead-band .go{display:inline-flex;align-items:center;gap:.5em;margin-top:1.1em;
  font-family:var(--disp);font-weight:700;font-size:clamp(19px,2vw,26px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--paper);
  border-bottom:3px solid var(--red);padding-bottom:3px}
.lead-band .go:hover{color:#ffcd00}
.lead-band .credit{position:absolute;right:var(--gut);top:18px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(243,239,228,.5)}

.band{padding-block:clamp(48px,7vw,92px) clamp(40px,6vw,80px)}
.band-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border-bottom:2px solid var(--ink);padding-bottom:16px;flex-wrap:wrap}
.band-h h2{font-size:clamp(28px,3.4vw,54px);max-width:26ch}
.band-h a{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;color:#5f594a}

.flagship{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.flagship .big-no{font-family:var(--disp);font-weight:900;font-size:clamp(84px,10vw,150px);
  line-height:.68;color:var(--red);letter-spacing:-.04em}
.flagship h2{margin:.3em 0 0;font-size:clamp(30px,4.1vw,66px)}
.credits-line{margin-top:14px;font-size:13px;letter-spacing:.055em;text-transform:uppercase;
  color:var(--mute);line-height:1.75}
.credits-line em{font-style:italic;text-transform:none;letter-spacing:0;font-size:15px}
.flagship p{font-size:clamp(17px,1.5vw,20px);line-height:1.62;max-width:56ch;text-wrap:pretty}
.readon{display:inline-flex;align-items:center;gap:.55em;margin-top:1.4em;
  font-family:var(--disp);font-weight:700;font-size:clamp(20px,2vw,26px);letter-spacing:.06em;
  text-transform:uppercase;border-bottom:3px solid var(--red);padding-bottom:3px}

.cycles{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,44px);padding-top:clamp(26px,3.4vw,40px)}
.cyc{display:flex;flex-direction:column}
.cyc img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 28%;
  background:var(--paper-2)}
.cyc.lg img{aspect-ratio:4/3}
.cyc .row{display:flex;gap:clamp(16px,1.8vw,26px);margin-top:20px;padding-top:16px;
  border-top:2px solid var(--ink)}
.cyc .yr{font-family:var(--disp);font-weight:900;line-height:.7;letter-spacing:-.03em}
.cyc.lg .yr{font-size:clamp(48px,5.4vw,74px);color:var(--red)}
.cyc.sm .yr{font-size:clamp(38px,4vw,58px);color:var(--blue)}
.cyc h3{font-size:clamp(21px,2.1vw,32px);max-width:22ch}
.cyc p{margin:.7em 0 0;font-size:16.5px;line-height:1.55;color:#3a362c;max-width:46ch}
.cyc .meta{margin-top:.5em;font-size:12.5px;letter-spacing:.055em;text-transform:uppercase;
  color:var(--mute)}
.cyc-txt{display:flex;gap:clamp(16px,1.8vw,26px);padding-top:16px}
.cyc.txt{border-top:2px solid var(--ink);padding-top:0}
.cyc .yr{padding-top:.06em}

.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--night)}
.strip img{width:100%;height:clamp(180px,42vh,420px);object-fit:cover}
.shoot{background:var(--night);color:var(--paper)}
.shoot .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);padding-block:clamp(34px,5vw,56px) clamp(40px,6vw,64px);align-items:start}
.shoot h2{font-size:clamp(30px,4vw,64px);max-width:20ch}
.shoot p{margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:#cfc7b4;
  max-width:52ch;text-wrap:pretty}
.shoot .go{display:inline-flex;gap:.5em;align-items:center;margin-top:1.3em;
  font-family:var(--disp);font-weight:700;font-size:23px;letter-spacing:.06em;
  text-transform:uppercase;color:#ffcd00;border-bottom:3px solid #ffcd00;padding-bottom:3px}
.shoot ul{list-style:none;margin:1.6em 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.shoot ul a{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-top:1px solid #34302a;color:var(--paper);font-size:17px}
.shoot ul a:hover{color:#ffcd00}
.shoot ul span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
  align-self:center}

.plate-red{background:var(--red);color:#f7f2e6}
.plate-red .in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(30px,4.4vw,68px);padding-block:clamp(48px,6vw,84px);align-items:start}
.plate-red h2{font-size:clamp(30px,4.4vw,74px);max-width:22ch;font-weight:900}
.plate-red p{margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.62;max-width:50ch;
  text-wrap:pretty}
.plate-red .kicker{color:rgba(247,242,230,.8)}
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px;margin-top:26px}

.mapband{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);padding-top:clamp(44px,6vw,78px);align-items:start}
.mapband h2{font-size:clamp(26px,2.6vw,40px)}
.mapband p{margin:.7em 0 0;font-size:17px;line-height:1.55;color:#3a362c}
.map-figure{border:1px solid var(--line);background:#101310;padding:0}
.map-figure svg{display:block;width:100%;height:auto}
.map-figure figcaption{padding:11px 14px;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mute);background:var(--paper)}
.map-slot{width:100%;aspect-ratio:1200/503;background:var(--paper-2)}
.pin circle{fill:var(--red);stroke:var(--paper);stroke-width:2}
.pin text{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;fill:#eef0e6}

/* ---------- supporters ---------- */
.supporters{padding-block:clamp(48px,7vw,92px) 0}
.supporters .head{border-top:2px solid var(--ink);padding-top:14px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline}
.supporters .head p{margin:0;font-size:15px;color:#5f594a;max-width:44ch}
.sponsor-run{display:grid;grid-template-columns:repeat(auto-fit,var(--tile));gap:10px;
  justify-content:start;margin-top:18px;--tile:232px;--tileh:74px;--markh:44px}
.sponsor-run+.sponsor-run{margin-top:10px}
.sponsor{display:flex;align-items:center;justify-content:center;width:var(--tile);
  height:var(--tileh);padding:12px 14px;background:var(--night);border:1px solid #2b2721}
.sponsor:hover{border-color:var(--red)}
.sponsor img{max-height:var(--markh);max-width:100%;width:auto;height:auto;object-fit:contain}
/* the block is one horizontal run of six; the tile stays a constant width per breakpoint */
@media (max-width:1529px){.sponsor-run{--tile:196px;--tileh:66px;--markh:38px}}
@media (max-width:1313px){.sponsor-run{--tile:152px;--tileh:56px;--markh:30px}}
@media (max-width:1049px){.sponsor-run{--tile:118px;--tileh:48px;--markh:24px}}
.sponsor-blurb{display:block;font-size:14px;line-height:1.4;color:#cfc7b4}
@media (max-width:560px){
  .sponsor-run{grid-template-columns:repeat(auto-fit,minmax(0,1fr));--tile:auto;
    --tileh:64px;--markh:34px}
  .sponsor{width:100%}
}

/* ---------- footer ---------- */
.foot{margin-top:clamp(48px,7vw,92px);background:var(--night);color:#cfc7b4}
.foot .in{display:flex;justify-content:space-between;gap:clamp(20px,4vw,44px);
  flex-wrap:wrap;align-items:flex-end;padding-block:clamp(34px,5vw,52px)}
.foot .word{font-family:var(--disp);font-weight:900;font-size:clamp(32px,4vw,54px);
  line-height:.85;text-transform:uppercase;color:var(--paper)}
.foot nav{display:flex;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap}
.foot nav a{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:.1em;
  text-transform:uppercase;color:#cfc7b4}
.foot .say{font-size:15px;line-height:1.5;max-width:32ch}

/* ---------- category pages ---------- */
.cat-head{padding-top:clamp(28px,4vw,48px)}
.cat-head .row{display:flex;gap:clamp(16px,3vw,34px);align-items:flex-start;
  border-bottom:2px solid var(--ink);padding-bottom:22px}
.cat-head .row>svg{flex:none;width:clamp(56px,9vw,116px);height:auto;stroke:var(--red);
  fill:none;stroke-width:1.7}
.cat-head h1{font-size:clamp(34px,5.4vw,88px);max-width:26ch;font-weight:900;line-height:.88}
.cat-head .intro{margin:clamp(20px,3vw,30px) 0 0;font-size:clamp(18px,1.7vw,21px);
  line-height:1.6;max-width:66ch;text-wrap:pretty}
.cat-list{list-style:none;margin:clamp(30px,5vw,56px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:clamp(30px,5vw,64px)}
.cat-list>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(18px,3vw,44px);align-items:start}
.cat-list>li:nth-child(even){grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.cat-list>li:nth-child(even) .ci{order:-1}
.cat-list img{width:100%;height:clamp(220px,36vh,420px);object-fit:cover;background:var(--paper-2)}
.cat-list h2{font-size:clamp(24px,2.8vw,44px);max-width:22ch}
.cat-list h2 a{color:var(--ink)}
.cat-list h2 a:hover{color:var(--red)}
.cat-list .dek{margin:.7em 0 0;font-size:17.5px;line-height:1.58;color:#3a362c;max-width:52ch}
.cat-list .ci figcaption{margin-top:9px;font-size:13.5px;color:#5f594a;
  border-top:1px solid var(--line);padding-top:7px}

/* ---------- article ---------- */
.article{--measure:72ch;--side:110px;display:grid;
  grid-template-columns:[full-start] minmax(var(--gut),1fr) [wide-start] minmax(0,var(--side))
    [text-start] minmax(0,var(--measure)) [text-end] minmax(0,var(--side)) [wide-end] minmax(var(--gut),1fr) [full-end];
  padding-top:clamp(24px,4vw,44px)}
/* wider on desktops and large displays: the measure grows a little, the wide column a lot */
@media (min-width:1200px){.article{--measure:76ch;--side:190px}}
@media (min-width:1500px){.article{--measure:80ch;--side:270px}}
@media (min-width:1900px){.article{--measure:84ch;--side:360px}}
.article>*{grid-column:text}
.article>.wide{grid-column:wide}
.article>.full{grid-column:full}
.article h1{font-size:clamp(34px,5.2vw,96px);font-weight:900;line-height:.88;margin-bottom:.1em}
.article h2{font-size:clamp(24px,2.7vw,42px);margin:1.9em 0 .5em}
.article p{margin:0 0 1.05em;font-size:19px;line-height:1.68}
@media (min-width:1500px){.article p{font-size:20px}.article .lead{max-width:58ch}}
@media (min-width:1900px){.article p{font-size:21px;line-height:1.65}}
.article p a{border-bottom:1px solid rgba(200,16,46,.32)}
.article .lead{font-size:clamp(20px,2vw,24px);line-height:1.5;margin:.9em 0 1.1em;
  max-width:54ch;color:#2b2820}
.artmeta{display:flex;flex-wrap:wrap;gap:7px 24px;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);padding:11px 0;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:#5f594a;margin-top:18px}
.artmeta .sec{display:inline-flex;align-items:center;gap:.45em;color:var(--red)}
.note{font-size:16.5px;line-height:1.55;color:#3a362c;border-left:3px solid var(--blue);
  padding-left:16px;margin:1.6em 0}
.callout{margin:1.9em 0;background:var(--paper-2);border-top:3px solid var(--ink);
  padding:clamp(16px,2.4vw,26px)}
.callout p{margin:0;font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.2vw,29px);
  line-height:1.1;text-transform:uppercase}
.pullquote{margin:2em 0;border-top:2px solid var(--red);border-bottom:2px solid var(--red);
  padding:.7em 0}
.pullquote p{margin:0;font-family:var(--disp);font-weight:700;
  font-size:clamp(23px,2.8vw,38px);line-height:1.05;text-transform:uppercase}
.blockquote{margin:1.9em 0;padding-left:20px;border-left:3px solid var(--red)}
.blockquote p{margin:0;font-size:20px;font-style:italic}
.blockquote cite{display:block;margin-top:.6em;font-style:normal;font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}

/* dossier — the Notes-for-Design material, breaking the measure */
.dossier{background:var(--night);color:var(--paper);margin:clamp(32px,5vw,60px) 0;
  padding:clamp(20px,3vw,40px)}
.dossier.red{background:var(--red);color:#f7f2e6}
.dossier .kicker{color:#ffcd00}
.dossier.red .kicker{color:rgba(247,242,230,.8)}
.dossier h3{font-size:clamp(22px,2.4vw,34px);margin:.35em 0 .8em;color:inherit}
.timeline{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0}
.timeline li{border-top:2px solid currentColor;padding:12px 18px 16px 0}
.t-when{display:block;font-family:var(--disp);font-weight:700;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;color:#ffcd00}
.dossier.red .t-when{color:#f7f2e6}
.t-what{display:block;margin-top:.35em;font-size:16px;line-height:1.5;
  color:rgba(243,239,228,.82)}
.deflist{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:0 clamp(18px,3vw,38px)}
.deflist div{border-top:1px solid rgba(243,239,228,.28);padding:12px 0 14px}
.deflist dt{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.04em;
  text-transform:uppercase}
.deflist dd{margin:.3em 0 0;font-size:16px;line-height:1.5;color:rgba(243,239,228,.82)}

/* data */
.datatable,.versus{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:16.5px}
.datatable caption,.versus caption{text-align:left;font-family:var(--disp);font-weight:700;
  font-size:20px;text-transform:uppercase;padding-bottom:8px}
.datatable th,.versus th{text-align:left;font-family:var(--disp);font-weight:700;
  font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  border-bottom:2px solid var(--ink);padding:8px 12px 8px 0}
.datatable td,.versus td{border-bottom:1px solid var(--line);padding:11px 12px 11px 0;
  vertical-align:top;line-height:1.45}
.versus td+td{border-left:1px solid var(--line);padding-left:14px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1px;background:var(--line);margin:1.9em 0}
.statblock{background:var(--paper);padding:18px 18px 20px}
.stat-num{display:block;font-family:var(--disp);font-weight:900;
  font-size:clamp(38px,4.4vw,62px);line-height:.82;color:var(--red)}
.stat-label{display:block;margin-top:.5em;font-size:14px;line-height:1.4;color:#3a362c}
.chart{margin:1.9em 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:10px;font-size:14.5px;color:#5f594a;
  border-top:1px solid var(--line);padding-top:7px}
.chart text{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;fill:#3a362c}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:12px;margin:1.9em 0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{margin-top:7px;font-size:13.5px;color:#5f594a}

/* cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:16px;margin:1.9em 0}
.profile-card{display:flex;flex-direction:column;background:var(--paper-2);
  border-top:3px solid var(--red);padding:0 0 18px}
.profile-card .p-photo{width:100%;aspect-ratio:3/2;object-fit:cover}
.profile-card h3{font-size:24px;margin:16px 18px 0}
.profile-card .p-role{margin:.4em 18px 0;font-size:13px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute)}
.profile-card p{margin:.7em 18px 0;font-size:16px;line-height:1.5}
.profile-card .p-links{margin-top:auto;padding-top:.9em}
.profile-card.no-photo{border-top-color:var(--blue)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:10px;margin:1.6em 0}
.org-card{display:flex;flex-direction:column;gap:8px;background:var(--night);
  padding:14px;color:var(--paper)}
.org-card:hover{color:#ffcd00}
.org-logo{max-height:34px;max-width:100%;width:auto;object-fit:contain}
.org-name{font-family:var(--disp);font-weight:700;font-size:19px;text-transform:uppercase}
.org-host{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.org-card.no-logo{border-left:3px solid var(--blue)}
.entity-ref{border-bottom:1px solid rgba(29,63,214,.4);color:var(--blue)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:12px;margin:1.4em 0 0}
.further-grid a{display:flex;flex-direction:column;gap:8px;background:var(--paper-2);
  padding:16px;font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.05;
  text-transform:uppercase;color:var(--ink);min-height:104px}
.further-grid a:hover{background:var(--ink);color:var(--paper)}
.further-grid a span{margin-top:auto;font-family:var(--body);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:400}
.further-grid a:hover span{color:#ffcd00}
.related-links{list-style:none;margin:1.2em 0 0;padding:0;display:flex;
  flex-direction:column;gap:0}
.related-links li{border-top:1px solid var(--line)}
.related-links a{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  font-size:17px}
.related-links span{align-self:center;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute)}
.endrule{margin:clamp(40px,6vw,70px) 0 0;border-top:2px solid var(--ink);padding-top:18px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.endrule a{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.05em;
  text-transform:uppercase}

/* archive */
.arch{list-style:none;margin:0;padding:0}
.arch li{border-top:1px solid var(--line)}
.arch a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;
  padding:15px 0;align-items:baseline}
.arch .t{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2vw,27px);
  line-height:1.06;text-transform:uppercase;color:var(--ink)}
.arch a:hover .t{color:var(--red)}
.arch .s{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  white-space:nowrap;display:inline-flex;align-items:center;gap:.4em}
.expander{margin-top:14px}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander input:checked~.more{display:block}
.expander label{display:inline-block;margin-top:14px;font-family:var(--disp);
  font-weight:700;font-size:18px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red);cursor:pointer;border-bottom:2px solid var(--red)}
.expander input:checked~label{display:none}

/* pages */
.page-body{padding-top:clamp(28px,4vw,50px)}
.page-body h1{font-size:clamp(34px,5vw,82px);font-weight:900}
.page-body p{font-size:19px;line-height:1.68;max-width:70ch}
.big404{font-family:var(--disp);font-weight:900;font-size:clamp(72px,20vw,320px);
  line-height:.78;color:var(--red);letter-spacing:-.04em}

/* responsive */
@media (max-width:1000px){
  .flagship,.cycles,.shoot .in,.plate-red .in,.mapband,.cat-list>li,
  .cat-list>li:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .cat-list>li:nth-child(even) .ci{order:0}
  .mapband{gap:22px}
  .strip{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
}
@media (max-width:700px){
  body{font-size:17px}
  .article p{font-size:18px}
  .nav{gap:16px}
  .nav-spacer{display:none}
  .lead-band{min-height:min(76vh,620px)}
}
@media print{.nav,.supporters,.foot nav{display:none}}
.cyc-col{display:flex;flex-direction:column;gap:clamp(20px,3vw,34px)}
.cyc.txt{border-top:2px solid var(--ink);padding-top:16px}

/* brand marks arrive as transparent SVG in black — give them a light plate anywhere they land */
img[src$="guide-airport.svg"],img[src$="guide-adidas-jose10.svg"]{
  background:var(--paper);object-fit:contain!important;padding:clamp(10px,2.5vw,34px);
  aspect-ratio:auto!important;height:auto!important;max-height:min(46vh,380px)}
.org-logo[src$=".svg"]{padding:7px;max-height:40px}
.fig-mat img[src$=".svg"],.fig-bleed img[src$=".svg"]{width:100%}

.flagship .kicker{display:inline-flex;align-items:center;gap:.55em;background:var(--red);
  color:#f7f2e6;padding:.62em 1.05em .56em;font-size:clamp(14px,1.25vw,18px);letter-spacing:.2em}
.flagship .kicker .ico{stroke:#f7f2e6;width:1.35em;height:1.35em}

/* band labels read as labels — a chip, not grey small caps */
.plate-red .kicker,.cat-head .kicker,.dossier .kicker{display:inline-flex;align-items:center;
  gap:.55em;margin:0 0 clamp(18px,2.4vw,30px);padding:.62em 1.05em .56em;
  font-size:clamp(14px,1.25vw,18px);letter-spacing:.2em}
.plate-red h2{margin-top:0}
.plate-red .kicker{background:#f7f2e6;color:var(--red)}
.plate-red .kicker .ico{stroke:var(--red)}
.cat-head .kicker{background:var(--ink);color:var(--paper)}
.dossier .kicker{background:#ffcd00;color:var(--ink)}
.dossier.red .kicker{background:#f7f2e6;color:var(--red)}
.mapgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mapgrid .map-figure{display:flex;flex-direction:column}
.mapgrid .map-figure figcaption{margin-top:auto;font-size:13px;letter-spacing:.09em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){.mapgrid{grid-template-columns:minmax(0,1fr)}}

.mapnotes{display:none}
@media (min-width:1001px){
  .mapnotes{display:grid;margin:clamp(22px,2.4vw,32px) 0 0;gap:0}
  .mapnotes div{border-top:1px solid var(--line);padding:13px 0 14px}
  .mapnotes dt{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--red)}
  .mapnotes dd{margin:.35em 0 0;font-size:15.5px;line-height:1.5;color:#3a362c}
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.supporters .head{flex-wrap:wrap!important}
.supporters .head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-mark-panel: Design set no ground on the mark, so light and dark logos cannot
   both read against the page. Give every mark the same dark plate and an inset — and
   GROW the box by that inset so the artwork keeps the size Design chose. */
.sponsor img,.sponsor-box img,.sp-logo img{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:60px!important;max-height:60px!important;width:100%!important;object-fit:contain!important;border-radius:2px}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:start!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#12140f;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-run .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-run .sponsor.sponsor img{height:60px!important;display:block!important;width:100%!important}

/* op-nav-collapse: this nav printed 206px of stacked links at 390 before any content
   (10 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "filled-soft", seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (18px measured) the button carries the build's
   gutter (clamp(18px,4vw,44px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (940px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-disclose{display:none}
@media (max-width:940px){
  .nav-disclose{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;border-radius:2px;padding:12px 20px;background:color-mix(in srgb, currentColor 14%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-disclose-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .nav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-disclose-c:checked ~ .nav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .wrap:has(> .nav-disclose){display:flow-root}
  .nav-disclose:not(:has(~ .nav)){display:none}
}

/* op-article-seam: text ran into the band that follows it (0-7px) — operator: "end of paragraph nearly touches intersection. Padding is missing." The section now keeps Design's own gap before the band: ul.related-links → p.endrule: 18px (the band's own top padding). */
@media (min-width:1024px){
  main.article > ul.related-links:has(+ p.endrule){padding-bottom:18px!important}
}
/* op-article-seam:end */

/* op-money-readable: Design's block is "one horizontal run of six" and below 560px it kept all six in one row (repeat(auto-fit,minmax(0,1fr))) — 51px tiles at 390 with the logo plate's padding leaving ~27px, so the partners were invisible on phones. The run of six now reads as 3 + 3 on phones and 2 per row at 360 and below (standard: two columns minimum, tiles readable). Desktop untouched. */
@media (max-width:560px){
  .sponsor-run{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:360px){
  .sponsor-run{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* op-money-readable:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.cyc-col > article.cyc.sm > img,
  div.cycles > article.cyc.lg > img,
  div.flagship > figure.article-figure.fig-plate > img,
  div.profile-grid.wide > div.profile-card > img.p-photo,
  li > figure.ci > img,
  main > section.lead-band > img,
  main.article > figure.article-figure.fig-bleed.full > img,
  main.article > figure.article-figure.fig-inset.wide > img,
  main.article > figure.article-figure.fig-mat.wide > img,
  section.shoot > div.strip > img){height:auto}
/* op-img-dims:end */
@media (min-width:621px) and (max-width:1439px){.sponsor-run.sponsor-run:has(> [data-partner]){grid-template-columns:repeat(auto-fit,minmax(min(118px,calc(50% - 6px)),1fr))!important;justify-content:stretch!important}.sponsor-run.sponsor-run > [data-partner]{width:auto!important;max-width:none!important}}
.sponsor-run > [data-partner] img{background:transparent!important}