/* mosaicmusicdistribution.com — Geography
   Palette roles: --paper ground · --ink ink · --bleu secondary area · --rouge accent · --mat panel */
:root{
  --paper:#F2EDE3;
  --ink:#15203D;
  --bleu:#16306E;
  --rouge:#E03A2F;
  --rouge-ink:#B62A20;
  --rouge-lift:#FF8A78;
  --mat:#E6DFD1;
  --rule:#D5CCBA;
  --muted:#56607E;
  --pale:#9FB4E6;
  --onblue:#EAEEF9;
  --display:Spectral,Georgia,"Times New Roman",serif;
  --ui:Sora,system-ui,-apple-system,sans-serif;
  --measure:70ch;
  --pad:clamp(18px,4vw,44px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:19px;line-height:1.68;font-weight:400;
  text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu);text-decoration:none}
a:hover{color:var(--rouge-ink)}
/* prose links get a real affordance; furniture links keep colour context */
.prose a,.cat-intro a,.callout a,.art-standfirst a,.note a,.blockquote a,.t-what a,.map-figure figcaption a,.article-figure figcaption a{color:var(--rouge-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(182,42,32,.6)}
.prose a:hover,.cat-intro a:hover,.callout a:hover,.note a:hover,.t-what a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.callout a,.stop-ink a,.stop-blue a,.band-blue .cat-intro a,.band-ink a{color:#fff;text-decoration-color:rgba(255,255,255,.6)}
.callout a:hover,.stop-ink a:hover,.stop-blue a:hover,.band-ink a:hover{color:var(--rouge-lift);text-decoration-color:var(--rouge-lift)}
.prose a.entity-ref,.art-end-links a,.further-grid a,.related-links a,.cat-list a,.card h3 a,.band-head h2 a,.addr a{text-decoration:none}
::selection{background:var(--rouge);color:var(--paper)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.06;margin:0}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.wrap{max-width:1560px;margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:960px;margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rouge-ink)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--rouge);color:#fff;padding:10px 14px;z-index:99}

/* ---------- icons: one drawing system, 24px grid, 1.6 stroke ---------- */
.ico{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.ico-lg{width:34px;height:34px}

/* ---------- masthead ---------- */
.site-head{background:var(--ink);color:var(--paper)}
.head-row{max-width:1560px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:stretch}
.brand{display:flex;align-items:center;gap:20px;padding:22px var(--pad);background:var(--bleu);color:var(--paper);flex:none}
.brand:hover{color:var(--paper)}
.brand svg{flex:none}
.brand-type{width:max-content}
.brand-name{font-family:var(--display);font-weight:800;font-size:clamp(30px,3vw,46px);line-height:.88;text-transform:uppercase;letter-spacing:.005em}
.brand-sub{display:flex;justify-content:space-between;gap:8px;font-family:var(--ui);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-top:8px;border-top:1px solid rgba(242,237,227,.35);padding-top:7px}
.head-row>nav{flex:1 1 auto;min-width:0;display:flex;align-items:stretch}
.nav>li{list-style:none;position:relative}
.nav-list{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0;margin:0;padding:0;width:100%;justify-content:space-between}
.nav-list>li{list-style:none;position:relative}
.nav-list>li>a{display:flex;align-items:center;gap:10px;padding:18px 22px 24px;font-family:var(--ui);font-size:14px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--paper)}
.nav-list>li>a .ico{width:1.35em;height:1.35em}
.nav-list>li+li>a{box-shadow:inset 1px 0 0 rgba(242,237,227,.16)}
.nav-list>li>a:hover,.nav-list>li>a[aria-current="page"]{color:var(--rouge-lift)}
.nav-list>li>a[aria-current="page"] .ico{color:var(--rouge-lift)}
.subnav{position:absolute;top:100%;left:0;max-width:min(320px,90vw);min-width:230px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-top:3px solid var(--rouge);padding:10px 0;margin:0;list-style:none;z-index:40;opacity:0;visibility:hidden;transform:translateY(2px);transition:opacity .12s}
.nav-list>li:nth-last-child(-n+3) .subnav{left:auto;right:0}
.nav-list>li:hover .subnav,.nav-list>li:focus-within .subnav{opacity:1;visibility:visible}
.nav-list>li::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.subnav a{display:block;padding:9px 20px;font-family:var(--ui);font-size:15px;font-weight:400;line-height:1.3;color:var(--ink)}
.subnav a:hover{background:var(--mat);color:var(--bleu)}
.head-strip{background:var(--mat);color:var(--ink);border-top:1px solid var(--rouge)}
@media(max-width:1140px){.nav-list>li>a{padding:14px 15px 18px;font-size:13px;letter-spacing:.1em}}
.head-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-block:11px;font-family:var(--ui);font-size:12px;font-weight:400;letter-spacing:.13em;text-transform:uppercase}
.head-strip b{color:var(--rouge-ink);font-weight:600}
.head-strip a{color:var(--ink)}
.head-strip a:hover{color:var(--rouge-ink)}
.head-strip a[aria-current="page"]{color:var(--rouge-ink);font-weight:600}
.hex-sep{width:8px;height:9px;fill:#B0A895;flex:none}

/* ---------- homepage bands ---------- */
.band{padding-block:clamp(56px,7vw,104px)}
.band-paper{background:var(--paper)}
.band-mat{background:var(--mat)}
.band-blue{background:var(--bleu);color:var(--onblue)}
.band-ink{background:var(--ink);color:var(--onblue)}
.band-blue h2,.band-ink h2,.band-blue h3,.band-ink h3{color:var(--onblue)}
.band-blue a,.band-ink a{color:#fff}
.band-blue a:hover,.band-ink a:hover{color:var(--rouge-lift)}
.band-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 32px;align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.band-no{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--rouge-ink);padding-bottom:.5em;white-space:nowrap}
.band-blue .band-no,.band-ink .band-no{color:var(--pale)}
.band-head h2{font-size:clamp(28px,4.4vw,66px);max-width:26em}
.band-rouge-line{border-top:2px solid var(--rouge);padding-top:10px}

/* lead */
.lead-band{padding-block:clamp(40px,5vw,76px)}
.lead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,72px);align-items:center}
.lead-grid h1{font-size:clamp(34px,5.1vw,86px);font-weight:800;letter-spacing:-.032em;margin:18px 0 0}
.lead-dek{font-family:var(--display);font-size:clamp(17px,1.5vw,22px);line-height:1.52;color:#3A4560;margin-top:22px;max-width:34em}
.btn{display:inline-block;background:var(--rouge-ink);color:#fff;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:14px 22px}
.btn:hover{background:var(--ink);color:#fff}
.lead-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:30px}
.signature{font-family:var(--ui);font-size:14px;color:var(--muted)}

/* ---------- the drawn map (geometry from the kit) ---------- */
.mapfig{margin:0}
.mapfig svg{width:100%;height:auto;display:block}
.map-land{fill:var(--ink)}
.map-neighbour{fill:rgba(21,32,61,.13)}
.map-pin-dot{fill:var(--rouge)}
.map-leader{fill:none;stroke:var(--rouge);stroke-width:2.5}
.map-pin-ring{fill:none;stroke:var(--rouge);stroke-width:3}
.map-pin-label{font-family:var(--ui);font-size:44px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:9px;stroke-linejoin:round}
.map-hex{fill:none;stroke:rgba(242,237,227,.34);stroke-width:2}
.band-blue .map-land,.band-ink .map-land{fill:#EAEEF9}
.stop-blue .map-land,.stop-ink .map-land{fill:#EAEEF9}
.band-blue .map-pin-label,.band-ink .map-pin-label{fill:var(--ink);stroke:#EAEEF9}
.band-blue .map-neighbour,.band-ink .map-neighbour{fill:rgba(234,238,249,.18)}
.map-caption{font-family:var(--ui);font-size:13px;color:var(--muted);margin-top:12px}
.band-blue .map-caption,.band-ink .map-caption{color:var(--pale)}
.map-slot{background:var(--mat);border:1px solid var(--rule);min-height:220px}

/* ---------- figure system: four treatments, one drawing system ---------- */
figure{margin:0}
figcaption{font-family:var(--ui)}
.fig-cap{font-family:var(--ui);font-size:16px;line-height:1.45;padding-top:14px;border-top:2px solid var(--rouge);margin-top:16px}
.credit{display:block;font-family:var(--ui);font-size:12px;line-height:1.4;color:var(--muted);margin-top:8px;font-weight:300}
.band-blue .credit,.band-ink .credit,.fig-plate .credit{color:var(--pale)}

/* 1 · plate — full-bleed image, caption on an offset plate */
.fig-plate{position:relative}
.fig-plate img{width:100%;height:clamp(300px,54vw,660px);object-fit:cover}
.fig-plate figcaption{background:var(--ink);color:var(--onblue);font-size:16px;line-height:1.45;padding:20px 22px;max-width:520px;margin:-58px 0 0 auto;position:relative;z-index:2}
.fig-plate figcaption .credit{color:var(--pale)}

/* 2 · mat — image on a panel with a hairline */
.fig-mat{background:var(--mat);border:1px solid var(--rule);padding:18px}
.fig-mat img{width:100%;height:auto}
.fig-mat figcaption{font-size:16px;line-height:1.45;padding-top:14px}
.band-blue .fig-mat,.band-ink .fig-mat{background:rgba(234,238,249,.08);border-color:rgba(234,238,249,.3)}

/* 3 · inset — sits in the column, prose wraps beside it */
.fig-inset{width:min(340px,40%);float:right;margin:10px 0 22px 36px}
.fig-inset img{width:100%;height:240px;object-fit:cover}
.fig-inset figcaption{font-size:14px;line-height:1.4;padding-top:10px;border-top:1px solid var(--rule);margin-top:10px;padding-left:14px;text-indent:-14px}

/* 4 · tile — the mosaic hexagon, for portraits in runs */
.fig-tile img{width:100%;aspect-ratio:3/2;object-fit:cover;clip-path:polygon(9% 0,91% 0,100% 12%,100% 88%,91% 100%,9% 100%,0 88%,0 12%)}
.fig-tile figcaption{font-family:var(--ui);font-size:14px;line-height:1.4;margin-top:12px;color:var(--muted)}
.band-blue .fig-tile figcaption,.band-ink .fig-tile figcaption{color:var(--pale)}

/* address tiles: the mosaic tile on a mat, with a numbered plate */
.addr{display:flex;flex-direction:column;background:rgba(234,238,249,.07);border:1px solid rgba(234,238,249,.24);padding:16px 16px 18px;min-width:0;height:100%;transition:background .14s,border-color .14s}
.addr:hover{background:rgba(234,238,249,.12);border-color:var(--rouge-lift)}
.addr a{display:block}
.addr img{width:100%;aspect-ratio:3/2;object-fit:cover;clip-path:polygon(9% 0,91% 0,100% 12%,100% 88%,91% 100%,9% 100%,0 88%,0 12%)}
.addr figcaption{display:flex;flex-direction:column;gap:7px;margin-top:15px;padding-top:14px;border-top:1px solid rgba(224,58,47,.75)}
.addr-place{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.5vw,22px);line-height:1.1;letter-spacing:-.015em;color:var(--onblue)}
.addr-place svg{width:9px;height:10px;fill:var(--rouge);flex:none}
.addr-what{font-family:var(--ui);font-size:14.5px;line-height:1.45;color:var(--pale)}
.addr-no{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--rouge-lift);margin-bottom:12px}
/* registration frame, used on signature figures */
.fig-reg{position:relative}
.fig-reg::after{content:"";position:absolute;left:14px;top:14px;right:-14px;bottom:-14px;border:1px solid var(--rouge);pointer-events:none}
.fig-reg>*{position:relative;z-index:1}

/* ---------- cards: even height ---------- */
.card-row{display:grid;gap:clamp(24px,3vw,44px)}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cols-3-fixed{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{display:flex;flex-direction:column;min-width:0}
.card-row>.card{height:100%}
.card>a.card-img{display:block}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card h3{font-size:clamp(21px,1.7vw,29px);line-height:1.1;margin:18px 0 9px;min-height:2.2em}
.card h3 a{color:inherit}
.card h3 a:hover{color:var(--rouge-ink)}
.card p{font-size:16.5px;line-height:1.5;color:#4A5470}
.band-blue .card p,.band-ink .card p{color:var(--pale)}
.card .card-meta{margin-top:auto;padding-top:14px;font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--rouge-ink);display:flex;align-items:center;gap:8px}
.card-lead h3{font-size:clamp(28px,3.4vw,50px);min-height:0}
.card-lead img{aspect-ratio:16/9}
.card-lead p{font-size:19px}

/* ---------- supporters ---------- */
.supporters{background:var(--bleu);color:var(--onblue);border-top:3px solid var(--rouge);padding-block:36px}
.supporters h2{color:var(--onblue)}
.supporters .sup-note{color:var(--pale)}
.supporters .sup-head{border-bottom:1px solid rgba(234,238,249,.24);padding-bottom:14px}
.supporters .sponsor{background:rgba(11,20,44,.42);border-color:rgba(234,238,249,.3)}
.supporters .sponsor:hover{border-color:var(--rouge);background:rgba(11,20,44,.6)}
.supporters-feat{background:var(--mat);color:var(--ink);border-top:3px solid var(--rouge);border-bottom:1px solid var(--rule);padding-block:40px}
.supporters-feat h2{color:var(--ink)}
.supporters-feat .sup-note{color:var(--muted)}
.supporters-feat .sup-head{border-bottom:1px solid var(--rule);padding-bottom:14px}
.supporters-feat .sup-run{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.supporters-feat .sponsor{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:14px;padding:20px 18px;min-height:120px;align-content:center}
.supporters-feat .sponsor img{max-height:52px}
.supporters-feat .sponsor-name{white-space:normal;font-size:14px;letter-spacing:.02em}
.supporters-feat .sponsor{background:var(--ink);border-color:var(--ink)}
.supporters-feat .sponsor:hover{border-color:var(--rouge)}
.sup-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:20px}
.sup-head h2{font-size:20px;letter-spacing:0}
.sup-note{font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sup-run{display:grid;grid-template-columns:repeat(auto-fill,400px);gap:16px;justify-content:start;margin:0;padding:0;list-style:none}
.sponsor{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:center;gap:16px;background:var(--ink);border:1px solid var(--ink);padding:12px 14px;min-height:78px}
.sponsor:hover{border-color:var(--rouge)}
.sponsor img{width:100%;max-width:100%;height:auto;max-height:44px;object-fit:contain;margin:0 auto}
.sponsor-name{font-family:var(--ui);font-size:13.5px;font-weight:500;line-height:1.28;color:var(--onblue);white-space:normal;overflow-wrap:break-word}
.sponsor.feat{border-color:var(--rouge)}
@media(max-width:470px){
  .sup-run{grid-template-columns:minmax(0,1fr)}
  .sponsor{grid-template-columns:1fr;justify-items:start;gap:10px}
  .sponsor img{margin:0}
  .sponsor-name{white-space:normal}
}

/* ---------- article ---------- */
.art-head{max-width:1100px;margin:0 auto;padding:clamp(38px,4.5vw,64px) var(--pad) 0}
.art-measure{max-width:1100px;margin-inline:auto;padding-inline:var(--pad)}
.art-kicker{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rouge-ink)}
.art-head h1{font-size:clamp(31px,4.6vw,72px);font-weight:800;letter-spacing:-.032em;margin-top:20px;max-width:22em}
.art-standfirst{font-size:clamp(18px,1.7vw,25px);line-height:1.42;color:#3A4560;margin-top:22px;max-width:34em}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--ui);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:#3A4560;margin-top:26px;padding-top:16px;border-top:1px solid var(--rule)}
.prose{max-width:1100px;margin:0 auto;padding-inline:var(--pad);font-size:19.5px;line-height:1.72}
.prose>p,.prose>h2,.prose>h3,.prose>ul,.prose>ol,.prose>.note,.prose>.lead,.prose>.pullquote,.prose>.blockquote,.prose>.callout,.related-links,.art-foot>p{max-width:var(--measure)}
.prose::after{content:"";display:block;clear:both}
.prose h2{font-size:clamp(24px,2.5vw,36px);line-height:1.12;margin:2.1em 0 .6em}
.prose h3{font-size:clamp(20px,1.9vw,26px);margin:1.8em 0 .5em}
.prose>p+p{margin-top:0}
.lead{font-size:1.13em;line-height:1.55;font-weight:500}
.pullquote{margin:2em 0;padding:0 0 0 26px;border-left:4px solid var(--rouge)}
.pullquote p{font-size:clamp(21px,2.2vw,30px);line-height:1.22;font-weight:600;letter-spacing:-.015em;margin:0}
.blockquote{margin:2em 0;background:var(--mat);border:1px solid var(--rule);padding:22px 24px}
.blockquote p{font-size:1.02em;margin:0}
.blockquote cite{display:block;font-family:var(--ui);font-size:13px;font-style:normal;color:var(--muted);margin-top:12px}
.callout{margin:2em 0;background:var(--bleu);color:var(--onblue);padding:24px 26px;border-left:6px solid var(--rouge)}
.callout p{margin:0;font-size:1.02em}
.note{font-family:var(--ui);font-size:15.5px;line-height:1.5;color:var(--muted);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;margin:1.8em 0}

/* full-bleed interruption bands inside a piece */
.stop{margin-block:clamp(40px,5vw,72px);padding-block:clamp(32px,4vw,58px)}
.stop-ink{background:var(--ink);color:var(--onblue)}
.stop-mat{background:var(--mat)}
.stop-blue{background:var(--bleu);color:var(--onblue)}
.stop h2,.stop h3{font-size:clamp(20px,2vw,30px);margin:0 0 22px}
.stop>.wrap>h2:first-child{display:flex;align-items:baseline;gap:14px;padding-top:16px;border-top:2px solid var(--rouge)}
.stop>.wrap>h2:first-child::before{content:"";flex:none;width:11px;height:12px;background:var(--rouge);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transform:translateY(-.12em)}
.stop-ink h2,.stop-blue h2,.stop-ink h3,.stop-blue h3{color:var(--onblue)}
.stop .wrap{max-width:1280px}
.stop-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,3.4vw,56px)}
.stop-pair>*{min-width:0}
.stop-pair>*+*{padding-top:0}
.stop-kicker{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rouge-ink);margin-bottom:12px}
.stop-ink .stop-kicker,.stop-blue .stop-kicker{color:var(--pale)}

/* data components */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.statblock{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--rouge);padding-top:14px;min-width:0}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.2vw,46px);line-height:.95;letter-spacing:-.03em}
.stat-label{font-family:var(--ui);font-size:14.5px;line-height:1.4;color:var(--muted)}
.stop-ink .stat-label,.stop-blue .stat-label,.band-ink .stat-label,.band-blue .stat-label{color:var(--pale)}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(140px,26%) minmax(0,1fr);gap:10px 26px;padding:14px 0;border-top:1px solid var(--rule)}
.stop-ink .timeline li,.stop-blue .timeline li,.band-ink .timeline li{border-color:rgba(234,238,249,.24)}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.stop-ink .timeline li:last-child,.stop-blue .timeline li:last-child{border-bottom-color:rgba(234,238,249,.24)}
.t-when{font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.04em;line-height:1.35;color:var(--rouge);min-width:0;overflow-wrap:break-word}
.stop-ink .t-when,.stop-blue .t-when{color:var(--pale)}
.t-what{font-size:17.5px;line-height:1.5;min-width:0}
.timeline li.t-single{grid-template-columns:minmax(0,1fr)}
.timeline li.t-single .t-what{display:flex;gap:12px}
.timeline li.t-single .t-what::before{content:"";flex:none;width:9px;height:10px;margin-top:.45em;background:var(--rouge);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.timeline li.t-single strong{font-weight:600}
.versus,.datatable{width:100%;border-collapse:collapse;font-size:16.5px;margin:1.6em 0;display:block;overflow-x:auto}
.versus tbody,.datatable tbody,.versus thead,.datatable thead{display:table;width:100%}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.versus th,.datatable th{font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--rouge-ink);border-bottom:2px solid var(--rouge)}
.versus td:first-child,.datatable td:first-child{font-weight:600}
.stop-ink .versus th,.stop-ink .datatable th{color:var(--pale)}
.stop-ink .versus td,.stop-ink .datatable td{border-color:rgba(234,238,249,.24)}
.chart{margin:1.8em 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .c-bar{fill:var(--bleu)}
.chart .c-bar-alt{fill:var(--rouge)}
.chart .c-label,.chart .c-value{font-family:var(--ui);font-size:13px;fill:var(--ink)}
.chart .c-value{font-weight:600;fill:var(--rouge)}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart figcaption{font-family:var(--ui);font-size:14px;color:var(--muted);margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}

.article-figure{margin:2.2em 0}
.article-figure img{width:100%;height:auto}
.article-figure figcaption{font-family:var(--ui);font-size:16px;line-height:1.45;padding-top:14px;border-top:2px solid var(--rouge);margin-top:14px}
.bleed{width:min(1560px,100vw);margin-left:50%;transform:translateX(-50%);padding-inline:var(--pad)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:2em 0}
.gallery figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-family:var(--ui);font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:10px}
.map-figure{margin:2.2em 0}
.map-figure figcaption{font-family:var(--ui);font-size:15px;line-height:1.45;padding-top:12px;border-top:2px solid var(--rouge);margin-top:14px}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:2em 0}
.profile-card{display:flex;flex-direction:column;background:var(--mat);border:1px solid var(--rule);padding:18px;min-width:0;height:100%}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);margin-bottom:14px}
.profile-card.no-photo{border-left:5px solid var(--rouge)}
.profile-card h3{font-size:22px;line-height:1.12}
.profile-card .p-role{font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge-ink);margin:8px 0 10px}
.profile-card p{font-size:16px;line-height:1.5}
.profile-card .p-links{margin-top:auto;padding-top:12px;font-family:var(--ui);font-size:14px}
.profile-card .p-attr{font-family:var(--ui);font-size:12px;color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:2em 0}
.org-card{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;background:var(--paper);border:1px solid var(--rule);padding:12px 14px;min-width:0}
.org-card:hover{border-color:var(--rouge)}
.org-logo{width:44px;height:44px;object-fit:contain}
.org-card.no-logo{grid-template-columns:minmax(0,1fr);border-left:5px solid var(--bleu)}
.org-name{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.15;color:var(--ink)}
.org-host{font-family:var(--ui);font-size:12px;color:var(--muted);word-break:break-word}
.entity-ref{font-weight:600;border-bottom:1px solid var(--rule)}
.entity-ref:hover{border-color:var(--rouge-ink)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:1.4em 0}
.further-grid a{display:block;background:var(--mat);border:1px solid var(--rule);border-top:3px solid var(--rouge);padding:16px;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.2;color:var(--ink)}
.further-grid a:hover{background:var(--bleu);color:#fff;border-color:var(--bleu);border-top-color:var(--rouge)}
.related-links{list-style:none;margin:1em 0 0;padding:0;display:grid;gap:10px}
.related-links li{border-top:1px solid var(--rule);padding-top:10px}
.related-links a{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.25}
.art-foot{border-top:1px solid var(--rule);max-width:1100px;margin-top:clamp(40px,5vw,70px);padding-top:34px}
.art-end{margin-top:clamp(46px,5.5vw,84px);margin-bottom:0}
.art-end .card h3{font-size:clamp(19px,1.6vw,25px);min-height:0;margin:0 0 8px}
.art-end .card p{font-size:15.5px;line-height:1.45;color:var(--pale)}
.art-end .card-meta{color:var(--pale)}
.art-end-links{display:flex;flex-wrap:wrap;gap:14px 30px;margin:clamp(26px,3vw,40px) 0 0;padding-top:18px;border-top:1px solid rgba(234,238,249,.24);font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.art-end-links a{display:flex;align-items:center;gap:9px;color:#fff}
.art-end-links a:hover{color:var(--rouge-lift)}
.art-foot h2{font-size:20px;margin-bottom:14px}

/* category / archive */
.cat-intro{max-width:34em;font-size:clamp(17px,1.5vw,21px);line-height:1.5}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cat-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 26px;align-items:baseline;padding:18px 0;border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.7vw,25px);line-height:1.15;color:var(--ink)}
.cat-list a:hover{color:var(--rouge-ink)}
.cat-list .cl-dek{grid-column:1/-1;font-size:16.5px;line-height:1.5;color:#4A5470;max-width:60ch}
.cat-list .cl-sec{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge-ink);white-space:nowrap}
.expander{margin-top:18px}
.expander>input{position:absolute;opacity:0;width:0;height:0}
.expander .more{display:none}
.expander>input:checked~.more{display:block}
.expander>label{display:inline-block;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge-ink);border-bottom:1px solid var(--rouge);cursor:pointer;margin-top:16px}
.expander>input:checked~label{display:none}

/* footer */
.site-foot{background:var(--ink);color:var(--onblue);padding-block:clamp(38px,4vw,58px)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px 56px}
.foot-brand{display:flex;align-items:center;gap:18px;min-width:0}
.foot-name{font-family:var(--display);font-weight:800;font-size:clamp(19px,2vw,26px);text-transform:uppercase;line-height:1.05}
.foot-line{font-family:var(--ui);font-size:14px;color:var(--pale);margin-top:6px}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;margin:0;padding:0;font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.17em;text-transform:uppercase}
.foot-nav a{color:var(--pale)}
.foot-nav a:hover{color:#fff}

/* utility */
.split{display:grid;gap:clamp(28px,4vw,64px);align-items:start}
.split-6040{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.split-4060{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.split-even{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.quiet-band{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 44px;align-items:center}
.big-no{font-family:var(--display);font-weight:800;font-size:clamp(56px,9vw,116px);line-height:.82;color:var(--rouge);letter-spacing:-.04em}

@media(max-width:900px){
  .lead-grid,.split-6040,.split-4060{grid-template-columns:1fr}
  .band-head{grid-template-columns:1fr}
  .quiet-band{grid-template-columns:1fr}
  .fig-plate figcaption{margin:0;max-width:none}
  .fig-inset{float:none;width:100%;margin:1.6em 0}
  .fig-inset img{height:auto;aspect-ratio:16/10}
  .nav-list>li>a{padding:10px 12px 14px}
  .subnav{position:static;opacity:1;visibility:visible;min-width:0;border:0;border-top:2px solid var(--rouge);background:transparent;padding:0 0 10px 12px;display:none}
  .nav-list>li:focus-within .subnav{display:block}
  .subnav a{color:var(--pale);padding:6px 0}
}
@media(max-width:760px){
  /* header: nav and section strip become single-row scrollers instead of wrapping */
  .head-row{flex-wrap:nowrap;align-items:center;gap:0}
  .brand{flex:0 0 auto}
  .nav-list{flex:1 1 auto;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
  .nav-list::-webkit-scrollbar{display:none}
  .nav-list>li{flex:0 0 auto;scroll-snap-align:start}
  .nav-list>li>a{padding:15px 13px;font-size:12.5px;white-space:nowrap}
  .nav-list>li+li{border-left:1px solid rgba(234,238,249,.14)}
  .head-strip .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:0;gap:0;mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%)}
  .head-strip .wrap::-webkit-scrollbar{display:none}
  .head-strip .wrap>*{flex:0 0 auto}
  .head-strip a,.head-strip b{padding:13px 0;white-space:nowrap}
  .head-strip .dot{margin:0 12px}
  /* map labels are in SVG user units, so bump them to clear 15px once the viewBox scales down */
  .map-pin-label{font-size:64px}
  .map-pin-sub,.map-note,.map-key{font-size:52px}
  .map-pin-dot{r:13}
  .map-pin-ring{r:26}
  .art-kicker a{padding-block:10px}
  .brand-sub{font-size:11px;letter-spacing:.2em}
  .foot-nav a,.foot-links a{display:inline-block;padding-block:11px}
}
@media(max-width:820px){
  .supporters-feat .sup-run{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .cols-3-fixed{grid-template-columns:1fr}
}
@media(max-width:480px){
  .supporters-feat .sup-run{grid-template-columns:1fr}
}
@media(max-width:700px){
  .stop-pair{gap:34px}
  .stop-pair>*+*{padding-top:30px;border-top:1px solid rgba(234,238,249,.24)}
  .stop-mat .stop-pair>*+*{border-top-color:var(--rule)}
  .stop{padding-block:34px}
  .art-end .card{padding-bottom:22px;border-bottom:1px solid rgba(234,238,249,.2)}
  .art-end .card:last-child{border-bottom:0;padding-bottom:0}
}
@media(max-width:620px){
  .timeline li{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .cat-list li{grid-template-columns:1fr}
  .card h3{min-height:0}
  .prose{font-size:18px;line-height:1.66}
  .art-meta{gap:6px 16px;font-size:12px}
  .art-head h1{letter-spacing:-.02em}
  .fig-plate figcaption{padding:16px 18px;font-size:15px}
  .fig-mat{padding:12px}
  .band,.lead-band{padding-block:40px}
  .versus th,.versus td,.datatable th,.datatable td{padding:10px 12px;font-size:15px}
  .big-no{font-size:clamp(44px,16vw,64px)}
  .quiet-band{gap:14px}
}
@media print{
  .site-head,.site-foot,.supporters{background:#fff;color:#000}
}

/* 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}
.sup-head{flex-wrap:wrap!important}
.sup-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.
   No filter, no normalisation — the artwork itself is never touched. */
.sponsor img,.sponsor-box img,.sp-logo img{background:#121013!important;padding:10px 14px!important;box-sizing:border-box!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-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

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

/* 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.sponsor img{height:44px!important}

/* op-run-fill: the second run's tracks were a FIXED repeat(auto-fill,400px) with
   justify-content:start, so two 400px tiles sat in a ~1160px container and left ~360px of dead
   space at the right — operator asked for the grid to take the whole width. minmax(400px,1fr)
   keeps the same column count and lets the tracks grow into the room. The featured run above
   already fills its row (repeat(4,minmax(0,1fr))) and is left alone.
   ⚠️ SCOPED TO DESKTOP. Unguarded, this selector (two classes plus a :not) outranks Design's own
   `.sup-run` inside @media(max-width:470px), so the 400px floor survived down to phone width and
   the run measured 400px inside a 354px container — an overflow I would have introduced on a
   build that was clean at 390px. */
@media (min-width:471px){
  .supporters:not(.supporters-feat) .sup-run{
    grid-template-columns:repeat(auto-fill,minmax(400px,1fr));
  }
}

/* op-feat-bigger-and-copy: operator asked for larger marks in the first run and a sentence under
   each of its four tiles. The copy was injected beside .sponsor-name (add_tile_blurbs.py); this
   sizes the tier. Design capped the featured mark at 52px against the generic 44px, in a 322px
   tile with room for more. The tier is a one-column grid with centred items, and our
   :has(> img):has(> .sponsor-blurb) rule above now matches these tiles and pushes
   align-items:flex-start on them — restated here so the tier stays centred as Design had it. */
/* ⚠️ max-height was useless here: .sponsor.sponsor img pins height:44px!important, so the plate
   ignored the larger cap entirely. Set the height, and the plate grows with it. */
.supporters-feat .sponsor.sponsor img{height:76px!important;max-height:none!important}
/* the injected copy inherited --muted (#56607E) on a navy tile and was barely legible; the
   tier's own pale blue is what Design uses for quiet text on this ground. */
.supporters-feat .sponsor .sponsor-blurb{color:var(--pale)}
.supporters-feat .sponsor.sponsor{align-items:center!important;justify-items:center!important}


/* op-article-width: the article column was capped at 683px (79 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose > p, .prose > h2, .prose > h3, .prose > ul, .prose > ol, .prose > .note, .prose > .lead, .prose > .pullquote, .prose > .blockquote, .prose > .callout, .related-links, .art-foot > p) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main#main > article div.prose{--measure:min(90.154ch, 100%)!important}
}
@media (min-width:1600px){
  main#main > article div.prose > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (683px) and was left behind when the text went to 879px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  article p.art-standfirst{max-width:min(879px, 100%)!important}
}
@media (min-width:1600px){
  article p.art-standfirst{max-width:min(calc(clamp(879px, 61.042vw, 1055px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:701px) and (max-width:899px){
  ul.nav-list{padding-left:max(var(--pad), 18px);padding-right:max(var(--pad), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.card.card-lead > a.card-img > img){height:auto}
/* op-img-dims:end */