/* ==========================================================================
   musicalonline.com — "Two Cities"
   PALETTE — five members, each with a job:
     --ground   #121213  near-black ground, the whole site sits on it
     --ink      #EFEDE7  warm cream, all reading text
     --gold     #C79A2B  LONDON accent — saturated, hue ~42°; used as area + text
     --blue     #2E4BE0  NEW YORK accent — saturated, hue ~230°; used as area
     --blue-up  #7E93F7  the New York accent lifted for text on the dark ground
   The two saturated members are 188° apart in hue and each carries a
   full-bleed panel somewhere on the site, not just a rule.
   ========================================================================== */

:root{
  --ground:#121213;
  --ground-2:#1A1A1C;
  --ground-3:#232326;
  --ink:#EFEDE7;
  --ink-quiet:#B7B2A7;
  --ink-faint:#8A857A;
  --rule:#2E2D2A;
  --gold:#C79A2B;
  --gold-deep:#8A6A16;
  --blue:#2E4BE0;
  --blue-up:#7E93F7;

  --display:"Big Shoulders Display",system-ui,sans-serif;
  --text:"Public Sans",system-ui,-apple-system,sans-serif;
  --ui:"Public Sans",system-ui,-apple-system,sans-serif;

  --measure:68ch;
  --gutter:clamp(18px,4vw,44px);
  --band:clamp(44px,6vw,86px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--text);font-size:18px;line-height:1.65;
  font-weight:350;text-wrap:pretty;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--blue-up)}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:0;line-height:1.02;margin:0}
h3,h4{font-family:var(--ui);font-weight:700;letter-spacing:-0.012em;line-height:1.2;margin:0}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.2em}
hr{border:0;border-top:1px solid var(--rule);margin:var(--band) 0}
::selection{background:var(--blue);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{max-width:1500px;margin:0 auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--gold);color:#121213;padding:8px 14px;z-index:99}

/* ---------- the drawn device: caliper spine + ticks ---------------------- */
.spine{display:block;color:var(--ink-faint)}
.tickrule{display:block;width:100%;height:26px;color:var(--rule)}

/* ---------- icons (one per section, one drawing system) ------------------ */
.ico{width:1.05em;height:1.05em;flex:none;vertical-align:-0.14em;
  stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:52px;height:52px;stroke-width:1.3}

/* ---------- masthead ---------------------------------------------------- */
.masthead{border-bottom:1px solid var(--rule)}
.mh-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);
  grid-template-rows:auto auto;align-items:baseline;row-gap:14px;
  padding:22px 0 16px;
}
.mh-word{font-family:var(--display);text-transform:uppercase;letter-spacing:-0.005em;
  font-size:clamp(42px,6.6vw,112px);line-height:0.8}
.mh-a{grid-column:1;grid-row:1;text-align:right;font-weight:800}
.mh-b{grid-column:3;grid-row:1;font-weight:400}
.mh-dev{grid-column:2;grid-row:1 / span 2;align-self:stretch;
  display:flex;justify-content:center;align-items:flex-end;padding-bottom:2px}
.mh-nav{display:flex;flex-wrap:wrap;gap:9px 20px;align-self:start;
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:0.12em;text-transform:uppercase}
.mh-nav.left{grid-column:1;grid-row:2;justify-content:flex-end}
.mh-nav.right{grid-column:3;grid-row:2}
.mh-nav a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--ink)}
.mh-nav a:hover{color:var(--gold)}
.mh-nav a.on-l{color:var(--gold)}
.mh-nav a.on-n{color:var(--blue-up)}
.mh-nav a[aria-current]{border-bottom:2px solid var(--gold);padding-bottom:2px}
.signature{text-align:center;font-size:15px;font-style:italic;color:var(--ink-faint);
  padding:0 var(--gutter) 18px}

/* ---------- side flags -------------------------------------------------- */
.flag{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
  font-weight:700;font-size:13px;letter-spacing:0.16em;text-transform:uppercase}
.flag-l{color:var(--gold)}
.flag-n{color:var(--blue-up)}
.tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:12.5px;
  letter-spacing:0.16em;text-transform:uppercase;padding:5px 10px}
.tag-l{background:var(--gold);color:#121213}
.tag-n{background:var(--blue);color:#EFEDE7}

/* ---------- homepage lead ---------------------------------------------- */
.lead-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lead-half{position:relative;min-height:clamp(240px,38vw,560px);overflow:hidden}
.lead-half>img{width:100%;height:100%;object-fit:cover;filter:saturate(0.92) contrast(1.04)}
.lead-half.l{border-right:1px solid var(--gold)}
.lead-half .tag{position:absolute;left:18px;top:18px}
.lead-copy{padding:var(--band) var(--gutter);text-align:center;border-bottom:1px solid var(--rule)}
.lead-copy h1{font-size:clamp(32px,5.2vw,84px);font-weight:800;max-width:30ch;margin:0 auto;line-height:0.96}
.lead-copy .deck{font-size:clamp(17px,1.5vw,20px);color:var(--ink-quiet);max-width:64ch;margin:22px auto 0}
.lead-copy .more{margin-top:26px}

/* ---------- quiet line band -------------------------------------------- */
.quiet{border-bottom:1px solid var(--rule);padding:calc(var(--band)*0.8) var(--gutter);text-align:center}
.quiet p{font-family:var(--display);font-weight:400;font-size:clamp(23px,3vw,44px);
  line-height:1.06;max-width:34ch;margin:0 auto;letter-spacing:0}

/* ---------- two-column argument ---------------------------------------- */
.argue{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  border-bottom:1px solid var(--rule)}
.argue>.mid{background:var(--rule)}
.argue>section{padding:calc(var(--band)*0.85) var(--gutter)}
.argue h2{font-size:clamp(25px,2.7vw,42px);font-weight:700;margin:0 0 12px;line-height:0.98}
.argue h3{font-size:20px;font-weight:600;margin:0 0 9px;letter-spacing:-0.01em}
.argue p{color:var(--ink-quiet);font-size:16.5px}
.stack{display:flex;flex-direction:column;gap:26px}
.item{border-top:1px solid var(--rule);padding-top:20px}
.item.first{border-top:0;padding-top:0}

/* ---------- coloured plate band ---------------------------------------- */
.plate{padding:var(--band) 0}
.plate.gold{background:var(--gold);color:#141105}
.plate.gold a{color:#241C05;border-bottom:1px solid rgba(20,17,5,.4)}
.plate.gold .flag-l{color:#3D3008}
.plate.blue{background:var(--blue);color:#EFEDE7}
.plate.blue a{color:#EAEDFF;border-bottom:1px solid rgba(234,237,255,.45)}
.plate-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center}
.plate h2{font-size:clamp(28px,3.8vw,60px);font-weight:700;margin:0 0 14px;line-height:0.98}
.plate p{font-size:17px}

/* ---------- compact register ------------------------------------------- */
.register{padding:var(--band) 0;border-bottom:1px solid var(--rule)}
.reg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:8px}
.reg-head h2{font-size:clamp(20px,2vw,29px)}
.reg-list{list-style:none;padding:0;margin:0}
.reg-list li{border-bottom:1px solid var(--rule)}
.reg-list a{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 24px;
  padding:16px 0;align-items:baseline;color:var(--ink)}
.reg-list a:hover{color:var(--gold)}
.reg-list .r-sec{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:7px}
.reg-list .r-title{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-0.01em}

/* ---------- cards (even height) ---------------------------------------- */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,2.4vw,30px)}
.card{display:flex;flex-direction:column;background:var(--ground-2);
  border:1px solid var(--rule);color:var(--ink);height:100%}
.card:hover{border-color:var(--gold)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card-b{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;gap:8px}
.card-b .flag{font-size:12px}
.card-b h3{font-family:var(--display);font-weight:600;font-size:19.5px;line-height:1.16;
  letter-spacing:-0.01em;min-height:2.32em}
.card-b p{font-size:15.5px;color:var(--ink-quiet);margin:0}
.card-b .foot{margin-top:auto;padding-top:10px;font-size:13px;letter-spacing:0.1em;
  text-transform:uppercase;font-family:var(--display);font-weight:600;color:var(--ink-faint)}

/* ---------- article ---------------------------------------------------- */
.art-head{padding:calc(var(--band)*0.8) 0 0}
.art-kicker{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:16px}
.art-head h1{font-size:clamp(36px,5.6vw,78px);font-weight:800;text-align:center;
  max-width:28ch;margin:0 auto;line-height:0.96}
.art-body{font-size:19px;line-height:1.72}
.art-body>.measure{display:flow-root}
.art-body>.measure>*:last-child{margin-bottom:0}
.art-body h2{font-family:var(--display);font-size:clamp(23px,2.5vw,32px);font-weight:700;
  margin:2.1em 0 0.7em}
.art-body h2:first-child{margin-top:1.2em}
.art-body h3{font-size:21px;font-weight:600;margin:1.7em 0 0.5em}
.art-body a{border-bottom:1px solid rgba(199,154,43,.42)}
.art-body a:hover{border-bottom-color:var(--blue-up)}
.lead{font-size:clamp(19px,1.9vw,25px);line-height:1.45;font-weight:400;color:var(--ink);
  border-left:3px solid var(--gold);padding-left:20px;margin:0 0 1.4em}

/* ---------- figure system: three treatments, one drawing system --------
   .fig-plate  full-width lead, heavy top rule in the section colour
   .fig-bleed  breaks the measure edge-to-edge, caption offset in a narrow column
   .fig-mat    photograph on a mat with a hairline inset, caption inside the mat
   .fig-inset  small figure inside the column, prose beside it, keyed side bar
   ---------------------------------------------------------------------- */
figure{margin:0}
figcaption{font-size:15.5px;line-height:1.45;color:var(--ink-quiet)}
.f-kick{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:5px}
.f-credit{display:block;margin-top:7px;font-size:12.5px;line-height:1.4;color:var(--ink-faint)}

.fig-plate{border-top:3px solid var(--gold);padding-top:14px;margin:0 0 var(--band)}
.fig-plate img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-plate figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px 34px;padding-top:14px}

.fig-bleed{margin:calc(var(--band)*0.9) 0;width:100%;clear:both}
.fig-bleed img{width:100%;aspect-ratio:21/9;object-fit:cover}
.fig-bleed figcaption{max-width:46ch;margin:14px auto 0;padding-inline:var(--gutter);
  border-top:1px solid var(--rule);padding-top:12px}

.fig-mat{background:var(--ground-2);padding:16px;margin:calc(var(--band)*0.7) 0}
.fig-mat .inner{border:1px solid var(--ground-3);padding:9px}
.fig-mat img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fig-mat figcaption{padding:14px 4px 2px}

.fig-inset{float:right;width:min(300px,44%);margin:6px 0 22px 28px;
  border-left:3px solid var(--blue-up);padding-left:14px}
.fig-inset img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fig-inset figcaption{font-size:14.5px;padding-top:10px}

.article-figure{margin:calc(var(--band)*0.7) 0;border-top:1px solid var(--rule);padding-top:14px}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{padding-top:12px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.88em;
  background:var(--ground-2);padding:1px 5px;border:1px solid var(--rule)}

/* ---------- interruption slabs (the Notes-for-Design material) --------- */
.slab{background:var(--ground-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:calc(var(--band)*0.75) 0;margin:calc(var(--band)*0.9) 0;clear:both}
.slab.gold-key{border-top:3px solid var(--gold)}
.slab.blue-key{border-top:3px solid var(--blue)}
.slab-h{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.slab-h h2{font-family:var(--display);font-size:clamp(19px,2vw,27px);font-weight:700;margin:0}
.deflist{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:22px clamp(22px,3vw,44px);margin:0;padding:0;list-style:none}
.deflist li{border-top:1px solid var(--ground-3);padding-top:12px}
.deflist b{display:block;font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-0.005em;color:var(--ink);margin-bottom:4px}
.deflist span{display:block;font-size:15.5px;line-height:1.5;color:var(--ink-quiet)}

/* ---------- styleguide components ------------------------------------- */
.pullquote{margin:calc(var(--band)*0.7) 0;padding:0 0 0 clamp(16px,3vw,34px);
  border-left:4px solid var(--blue)}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(25px,3vw,42px);
  line-height:1.06;letter-spacing:0;margin:0}
.blockquote{margin:calc(var(--band)*0.6) 0;background:var(--ground-2);padding:22px 24px;
  border-left:4px solid var(--gold)}
.blockquote p{font-size:19px;font-style:italic;margin:0 0 10px}
.blockquote cite{font-style:normal;font-size:14.5px;color:var(--ink-faint);
  font-family:var(--display);font-weight:600;letter-spacing:0.04em}
.callout{background:var(--ground-2);border:1px solid var(--rule);border-top:3px solid var(--gold);
  padding:20px 22px;margin:calc(var(--band)*0.6) 0}
.callout p{margin:0;font-size:17.5px}
.note{font-size:16px;color:var(--ink-quiet);border-left:2px solid var(--ground-3);
  padding-left:14px;margin:1.4em 0}

.versus,.datatable{width:100%;border-collapse:collapse;margin:calc(var(--band)*0.6) 0;
  font-size:16px;display:table}
.versus th,.versus td,.datatable th,.datatable td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.versus thead th,.datatable thead th{font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--ground-3)}
.versus tbody th{font-weight:600;color:var(--ink);width:32%}
.versus td:nth-child(2){color:var(--gold)}
.versus td:nth-child(3){color:var(--blue-up)}
.datatable tbody tr:hover{background:var(--ground-2)}
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--rule);margin:calc(var(--band)*0.6) 0}
.statblock{background:var(--ground-2);padding:20px 18px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,54px);
  line-height:0.9;letter-spacing:0;color:var(--gold)}
.statblock:nth-child(even) .stat-num{color:var(--blue-up)}
.stat-label{font-size:14.5px;line-height:1.4;color:var(--ink-quiet)}

.timeline{list-style:none;margin:calc(var(--band)*0.6) 0;padding:0}.timeline li{display:grid;grid-template-columns:minmax(110px,190px) minmax(0,1fr);
  gap:6px 26px;padding:14px 0;border-top:1px solid var(--rule);position:relative}
.timeline li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;
  background:var(--gold);transform:translateY(-3.5px)}
.timeline .t-when{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:0.03em;
  color:var(--gold);padding-left:20px}
.timeline .t-what{font-size:16.5px;line-height:1.5;color:var(--ink-quiet)}

.chart{margin:calc(var(--band)*0.6) 0}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin-top:12px;border-top:1px solid var(--rule);padding-top:10px}
.chart .c-bar{fill:var(--gold)}
.chart .c-bar-alt{fill:var(--blue)}
.chart .c-lab{fill:#B7B2A7;font-family:"Public Sans",sans-serif;font-size:12px}
.chart .c-val{fill:#EFEDE7;font-family:"Big Shoulders Display",sans-serif;font-size:13px;font-weight:700}
.chart .c-axis{stroke:#2E2D2A;stroke-width:1}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;margin:calc(var(--band)*0.7) 0}
.gallery figure{background:var(--ground-2);padding:9px}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font-size:14px;padding:10px 3px 2px}

.map-figure .map-slot{aspect-ratio:16/10;border:1px solid var(--rule);background:var(--ground-2)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(16px,2vw,26px);margin:calc(var(--band)*0.6) 0}
.profile-card{background:var(--ground-2);border:1px solid var(--rule);padding:18px;
  display:flex;flex-direction:column;gap:8px;height:100%}
.profile-card .p-photo{width:86px;height:86px;object-fit:cover;border-radius:50%}
.profile-card.no-photo{border-top:3px solid var(--blue)}
.profile-card h3{font-family:var(--display);font-size:19px;font-weight:700;margin:0}
.profile-card .p-role{font-size:14px;letter-spacing:0.1em;text-transform:uppercase;
  font-family:var(--display);font-weight:600;color:var(--gold);margin:0}
.profile-card p{font-size:15.5px;color:var(--ink-quiet);margin:0}
.profile-card .p-links{margin-top:auto;padding-top:10px;font-size:14.5px}
.profile-card .p-attr{font-size:12.5px;color:var(--ink-faint)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:12px;margin:calc(var(--band)*0.6) 0}
.org-card{display:flex;flex-direction:column;gap:4px;background:var(--ground-2);
  border:1px solid var(--rule);padding:14px 16px;color:var(--ink)}
.org-card:hover{border-color:var(--gold)}
.org-logo{max-height:30px;width:auto;object-fit:contain;margin-bottom:6px}
.org-card.no-logo{border-left:3px solid var(--gold)}
.org-name{font-family:var(--display);font-weight:700;font-size:16.5px}
.org-host{font-size:13.5px;color:var(--ink-faint);word-break:break-word}
.entity-ref{white-space:nowrap;border-bottom:1px solid rgba(199,154,43,.4)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;margin:0}
.further-grid a{display:block;background:var(--ground-2);border:1px solid var(--rule);
  border-top:2px solid var(--gold);padding:16px 18px;font-family:var(--display);
  font-weight:600;font-size:17.5px;line-height:1.2;letter-spacing:-0.01em;color:var(--ink)}
.further-grid a:hover{border-top-color:var(--blue);color:var(--gold)}
.related-links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.related-links a{font-family:var(--display);font-weight:600;font-size:17px}

.cat-list{list-style:none;padding:0;margin:0}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;
  padding:18px 0;align-items:baseline;color:var(--ink)}
.cat-list a:hover{color:var(--gold)}
.cat-list .c-t{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.9vw,23px);
  letter-spacing:-0.01em}
.cat-list .c-b{grid-column:1;font-size:15.5px;color:var(--ink-quiet)}
.cat-list .c-len{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-faint)}

/* collapsible long list, CSS only */
.expander{margin:20px 0 0}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .hidden-rows{display:none}
.expander input:checked ~ .hidden-rows{display:block}
.expander label{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);padding:10px 0}
.expander input:checked ~ label .lbl-more{display:none}
.expander .lbl-less{display:none}
.expander input:checked ~ label .lbl-less{display:inline}

/* ---------- colophon / supporters ------------------------------------- */
.colophon{border-top:1px solid var(--rule);padding:var(--band) 0}
.col-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.col-head h2{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,25px)}
.col-head p{font-size:15px;color:var(--ink-faint);margin:0;font-style:italic}
.col-group{margin-top:26px}
.col-group h3{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--rule);
  padding-bottom:9px;margin-bottom:18px}
.col-slots{display:flex;flex-wrap:wrap;gap:14px}
.sponsor{flex:0 0 232px;display:flex;flex-direction:column;gap:10px;
  background:var(--ground-2);border:1px solid var(--rule);padding:12px;color:var(--ink)}
.sponsor:hover{border-color:var(--gold)}
.sponsor img{width:100%;height:46px;max-height:46px;object-fit:contain;object-position:center;
  background:#0D0D0E;padding:6px 10px}
.sponsor .sponsor-name{font-family:var(--display);font-weight:600;font-size:14.5px;
  line-height:1.25;letter-spacing:0.01em;color:var(--ink-quiet)}
.sponsor .sponsor-blurb{font-size:14px;line-height:1.4;color:var(--ink-quiet);min-width:200px}

/* ---------- footer ---------------------------------------------------- */
.site-foot{border-top:1px solid var(--rule);padding:calc(var(--band)*0.8) 0 60px}
.foot-mark{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);align-items:center}
.foot-mark span{font-family:var(--display);text-transform:uppercase;letter-spacing:0;font-size:clamp(24px,3.2vw,44px)}
.foot-mark .a{text-align:right;font-weight:800}
.foot-mark .b{font-weight:400}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:24px;
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:0.11em;text-transform:uppercase}
.foot-nav a{color:var(--ink-quiet)}
.foot-nav a:hover{color:var(--gold)}
.foot-line{text-align:center;font-size:14.5px;color:var(--ink-faint);font-style:italic;margin-top:18px}

/* ---------- 404 / simple pages ---------------------------------------- */
.plain{padding:calc(var(--band)*1.2) 0}
.plain h1{font-size:clamp(34px,5.2vw,72px);font-weight:800;margin-bottom:18px;line-height:0.98}
.plain p{font-size:18.5px;color:var(--ink-quiet);max-width:60ch}

/* ---------- responsive ------------------------------------------------- */
@media (max-width:1000px){
  .mh-grid{grid-template-columns:minmax(0,1fr);row-gap:8px;padding-bottom:14px}
  .mh-a,.mh-b{grid-column:1;text-align:left}
  .mh-a{grid-row:1}
  .mh-b{grid-row:2;margin-top:-6px}
  .mh-dev{display:none}
  .mh-nav.left{grid-column:1;grid-row:3;justify-content:flex-start;padding-top:6px}
  .mh-nav.right{grid-column:1;grid-row:4}
  .signature{text-align:left;padding-bottom:16px}
  .argue{grid-template-columns:minmax(0,1fr)}
  .argue>.mid{height:1px}
  .plate-grid{grid-template-columns:minmax(0,1fr)}
  .fig-plate figcaption{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  body{font-size:17px}
  .lead-split{grid-template-columns:minmax(0,1fr)}
  .lead-half.l{border-right:0;border-bottom:1px solid var(--gold)}
  .art-body{font-size:17.5px}
  .fig-inset{float:none;width:auto;margin:22px 0}
  .reg-list a{grid-template-columns:minmax(0,1fr)}
  .cat-list a{grid-template-columns:minmax(0,1fr)}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .timeline .t-what{padding-left:20px}
  .sponsor{flex:0 0 100%}
  .foot-mark{grid-template-columns:minmax(0,1fr)}
  .foot-mark .a{text-align:left}
  .col-slots{gap:12px}
}
@media (max-width:380px){
  .mh-word{font-size:38px}
  .sponsor img{height:42px}
}
@media print{
  body{background:#fff;color:#111}
  .masthead,.site-foot,.colophon{border-color:#ccc}
}

/* palette swatches — styleguide only; hex strings are labels, not display numerals */
.swatchrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--rule)}
.swatch{background:var(--ground-2);padding:14px;display:flex;flex-direction:column;gap:7px;min-width:0}
.sw-chip{display:block;height:44px;border:1px solid var(--ground-3)}
.sw-hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;
  letter-spacing:0.02em;color:var(--ink);word-break:break-all}
.sw-role{font-size:14px;line-height:1.35;color:var(--ink-quiet)}

/* section back-link */
.more-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
  font-weight:600;font-size:17px;letter-spacing:0.1em;text-transform:uppercase}

/* the plate's showpiece figure — dark mat, hard offset, drawn corner marks */
.fig-showpiece{position:relative;margin:0}
.fig-showpiece .fs-rule{display:block;height:3px;background:#241C05;margin-bottom:16px}
.fig-showpiece .fs-plate{position:relative;background:#141105;padding:11px;
  box-shadow:14px 14px 0 rgba(20,17,5,.32)}
.fig-showpiece img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  filter:saturate(1.06) contrast(1.06)}
.fig-showpiece .fs-brackets{color:#C79A2B;pointer-events:none}
.fig-showpiece .fs-brackets svg{position:absolute;width:22px;height:22px}
.fig-showpiece .fs-brackets svg:nth-child(1){top:-9px;left:-9px}
.fig-showpiece .fs-brackets svg:nth-child(2){top:-9px;right:-9px}
.fig-showpiece .fs-brackets svg:nth-child(3){bottom:-9px;left:-9px}
.fig-showpiece .fs-brackets svg:nth-child(4){bottom:-9px;right:-9px}
.fig-showpiece figcaption{color:#3D3008;padding-top:22px;font-size:15.5px;max-width:46ch}
.fig-showpiece .fs-kick{display:block;font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:0.16em;text-transform:uppercase;color:#241C05;margin-bottom:5px}

/* 5: the register, compacted */
.register{padding:calc(var(--band)*0.7) 0;border-bottom:1px solid var(--rule)}
.reg-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  column-gap:clamp(24px,3vw,52px)}
.reg-list a{grid-template-columns:118px minmax(0,1fr);gap:4px 18px;padding:11px 0}
.reg-list .r-sec{font-size:12px;letter-spacing:0.12em}
.reg-list .r-title{font-size:18px;line-height:1.12}
.reg-head{padding-bottom:10px;margin-bottom:0}

/* masthead breathes without the standing line */
.mh-grid{padding-bottom:22px}
@media (max-width:720px){.reg-list a{grid-template-columns:minmax(0,1fr)}}

/* register: the rule belongs to the row, so an orphan item spans the full width */
.reg-list li:last-child:nth-child(odd){grid-column:1/-1}

/* ==========================================================================
   TYPE ASSIGNMENT — the condensed display face is for headline scale only.
   Anything at UI scale (labels, list titles, card titles, captions, kickers)
   runs in Public Sans, which holds its apertures at 11–20px.
   ========================================================================== */
.mh-nav{font-family:var(--ui);font-weight:700;font-size:13.5px;letter-spacing:0.13em;gap:9px 22px}
.flag{font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:0.15em}
.tag{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:0.14em}
.argue h3{font-family:var(--ui);font-weight:700;font-size:19px;letter-spacing:-0.015em;line-height:1.26}
.reg-list .r-sec{font-family:var(--ui);font-weight:700;font-size:11.5px;letter-spacing:0.12em}
.reg-list .r-title{font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-0.012em;line-height:1.3}
.card-b h3{font-family:var(--ui);font-weight:700;font-size:18px;letter-spacing:-0.015em;line-height:1.26;min-height:2.52em}
.card-b .foot{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:0.11em}
.art-body h3{font-family:var(--ui);font-weight:700;font-size:20px;letter-spacing:-0.015em}
.f-kick,.fig-showpiece .fs-kick{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:0.14em}
.slab-h h2{font-family:var(--ui);font-weight:700;font-size:clamp(17px,1.7vw,22px);letter-spacing:-0.015em;line-height:1.24}
.deflist b{font-family:var(--ui);font-weight:700;font-size:15.5px;letter-spacing:-0.01em}
.blockquote cite{font-family:var(--ui);font-weight:600;letter-spacing:0.02em}
.versus thead th,.datatable thead th{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:0.13em}
.timeline .t-when{font-family:var(--ui);font-weight:700;font-size:14px;letter-spacing:0.01em}
.profile-card h3{font-family:var(--ui);font-weight:700;font-size:18px;letter-spacing:-0.015em}
.profile-card .p-role{font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:0.12em}
.org-name{font-family:var(--ui);font-weight:700;font-size:16px;letter-spacing:-0.01em}
.further-grid a{font-family:var(--ui);font-weight:600;font-size:16.5px;letter-spacing:-0.012em;line-height:1.3}
.related-links a{font-family:var(--ui);font-weight:600;font-size:16.5px;letter-spacing:-0.01em}
.cat-list .c-t{font-family:var(--ui);font-weight:700;font-size:clamp(17px,1.7vw,21px);letter-spacing:-0.015em;line-height:1.28}
.cat-list .c-len{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:0.14em}
.expander label{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:0.13em}
.foot-nav{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:0.13em}
.more-link{font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:0.13em}
.chart .c-val{font-family:"Public Sans",sans-serif;font-size:12px;font-weight:700}

/* ---------- colophon, reworked: a printed credit block, not an ad rail ---- */
.colophon{border-top:1px solid var(--rule);padding:var(--band) 0 calc(var(--band)*1.1);
  background:linear-gradient(180deg,#15151600,#16161780)}
.col-head{display:block;margin-bottom:0;border-bottom:2px solid var(--gold);padding-bottom:14px}
.col-head h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,44px);
  line-height:0.98;letter-spacing:0;max-width:24ch}
.col-head p{display:none}
.col-group{display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px 30px;
  align-items:start;padding:26px 0;border-bottom:1px solid var(--rule);margin-top:0}
.col-group h3{font-family:var(--ui);font-weight:700;font-size:11.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink-faint);border-bottom:0;padding-bottom:0;margin:4px 0 0}
.col-slots{display:flex;flex-wrap:wrap;gap:12px}
.sponsor{flex:0 0 232px;display:flex;flex-direction:column;gap:0;
  background:none;border:1px solid var(--rule);padding:0}
.sponsor:hover{border-color:var(--gold)}
.sponsor img{width:100%;height:52px;max-height:52px;object-fit:contain;object-position:center;
  background:#0B0B0C;padding:9px 14px;border-bottom:1px solid var(--rule)}
.sponsor .sponsor-name{display:block;font-family:var(--ui);font-weight:600;font-size:13.5px;
  line-height:1.3;letter-spacing:0.01em;color:var(--ink-quiet);padding:9px 12px 10px}
.sponsor:hover .sponsor-name{color:var(--ink)}
@media (max-width:720px){
  .col-group{grid-template-columns:minmax(0,1fr);gap:12px}
  .sponsor{flex:0 0 100%}
}

/* ==========================================================================
   TIMELINE — square ticks sitting ON the measure rule, dates given real size
   ========================================================================== */
.timeline{list-style:none;margin:calc(var(--band)*0.7) 0 0;padding:0;
  border-bottom:1px solid var(--rule)}
.timeline li{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);
  gap:4px 30px;padding:18px 0 18px 24px;border-top:1px solid var(--rule);
  position:relative;align-items:baseline}
.timeline li::before{content:"";position:absolute;left:0;top:-4px;width:8px;height:8px;
  background:var(--gold);transform:none}
.timeline li::after{content:"";position:absolute;left:3px;top:4px;bottom:-1px;width:1px;
  background:var(--rule)}
.timeline li:last-child::after{bottom:0}
.timeline .t-when{font-family:var(--ui);font-weight:700;font-size:16px;line-height:1.4;
  letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.timeline .t-what{font-size:16.5px;line-height:1.55;color:var(--ink-quiet)}
@media (max-width:720px){
  .timeline li{grid-template-columns:minmax(0,1fr);gap:5px}
  .timeline .t-what{padding-left:0}
}

/* article headings want a floor the condensed face can hold */
.art-body h2{font-size:clamp(26px,2.6vw,36px);line-height:0.98}

/* ---------- figure and slab keylines follow the section's own colour ------ */
article[data-side="n"] .fig-plate{border-top-color:var(--blue)}
article[data-side="n"] .f-kick{color:var(--blue-up)}
article[data-side="n"] .fig-inset{border-left-color:var(--blue-up)}
article[data-side="n"] .timeline li::before{background:var(--blue-up)}
article[data-side="n"] .lead{border-left-color:var(--blue)}
article[data-side="n"] .callout{border-top-color:var(--blue)}
article[data-side="n"] .pullquote{border-left-color:var(--blue)}
article[data-side="n"] .art-body a{border-bottom-color:rgba(126,147,247,.45)}
article[data-side="l"] .fig-inset{border-left-color:var(--gold)}
article[data-side="l"] .pullquote{border-left-color:var(--gold)}
article[data-side="l"] .further-grid a{border-top-color:var(--gold)}
article[data-side="n"] .further-grid a{border-top-color:var(--blue)}
article[data-side="n"] .further-grid a:hover{border-top-color:var(--gold)}

/* ==========================================================================
   MOBILE — measured at 360px: tap targets, minimum type, and the archive
   table, which was the only thing asking the reader to scroll sideways.
   ========================================================================== */
@media (max-width:720px){
  /* 44px minimum hit area on every navigational link */
  .mh-nav{gap:2px 18px}
  .mh-nav a{min-height:44px;align-items:center;padding-block:4px}
  .foot-nav{gap:0 20px}
  .foot-nav a{display:inline-flex;align-items:center;min-height:44px}
  .reg-list a{padding:14px 0;min-height:56px;align-content:center}
  .cat-list a{padding:18px 0;min-height:56px}
  .further-grid a{padding:18px}
  .related-links a{display:inline-flex;align-items:center;min-height:44px}
  .expander label{min-height:44px}
  .org-card,.sponsor{min-height:56px}
  .more-link{min-height:44px}
  .skip:focus{min-height:44px;align-items:center;display:inline-flex}

  /* nothing reads below 12px on a phone */
  .reg-list .r-sec,.cat-list .c-len,.col-group h3,.f-kick,.fig-showpiece .fs-kick,
  .card-b .foot,.foot-nav,.expander label,.versus thead th,.datatable thead th,
  .profile-card .p-role,.tag,.flag{font-size:12px}
  .f-credit,.gallery figcaption{font-size:13px}
  .mh-nav{font-size:13px}

  /* the archive stops being a table and becomes a stacked list */
  .datatable,.datatable tbody,.datatable tr,.datatable th,.datatable td{display:block;width:auto}
  .datatable{min-width:0 !important}
  .datatable thead{display:none}
  .datatable tbody{padding-bottom:8px}
  .datatable tr{padding:0}
  .datatable th[colspan]{border-bottom:0;padding:30px 0 6px}
  .datatable td{border-bottom:0;padding:2px 0}
  .datatable td:first-child{padding-top:16px;border-top:1px solid var(--rule)}
  .datatable td:last-child{padding-bottom:16px}
  .datatable td:last-child::before{content:"";display:block;height:0}
  .tablescroll{overflow-x:visible}
  /* the comparison table keeps its columns but scrolls inside its own frame */
  .versus{min-width:520px}
  .tablescroll:has(.versus){overflow-x:auto}
}
@media (max-width:380px){
  .versus th,.versus td,.datatable th,.datatable td{padding-inline:0}
}

/* ==========================================================================
   DESKTOP READING WIDTH — the reading column was pinned at 68ch/640px, which
   left a large display mostly empty. The measure now grows with the viewport
   by scaling the type, so the line length stays in the 68–74ch range while
   the column itself widens from ~640px to ~880px.
   ========================================================================== */
.measure{max-width:min(74ch,1000px)}
.art-body{font-size:clamp(19px,1.45vw,23px);line-height:1.7}
.lead{font-size:clamp(20px,1.9vw,28px)}
.art-body h2{font-size:clamp(26px,2.9vw,44px)}
.art-body h3{font-size:clamp(20px,1.6vw,25px)}
.fig-bleed figcaption{max-width:min(52ch,760px)}
figcaption{font-size:clamp(15.5px,1.05vw,17px)}
.deflist span{font-size:clamp(15.5px,1.05vw,17px)}
.timeline .t-what{font-size:clamp(16.5px,1.1vw,18px)}
.timeline .t-when{font-size:clamp(16px,1.05vw,17.5px)}

@media (min-width:1600px){
  .wrap{max-width:1680px}
  .timeline li{grid-template-columns:minmax(200px,280px) minmax(0,1fr)}
}
@media (min-width:2000px){
  .wrap{max-width:1840px}
}
/* the measure keeps its own gutter on small screens regardless of the above */
@media (max-width:720px){
  .measure{max-width:none}
  .art-body{font-size:17.5px}
  .lead{font-size:19px}
}

/* the bleed figure's caption sits under a full-width photograph — it can
   carry the same measure as a two-column deck rather than a narrow strip */
.fig-bleed figcaption{max-width:min(96ch,1180px);display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:6px 42px;align-items:start}
.fig-bleed figcaption .f-kick{grid-column:1;grid-row:1}
.fig-bleed figcaption .f-credit{grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:start}
@media (max-width:720px){
  .fig-bleed figcaption{grid-template-columns:minmax(0,1fr);gap:4px}
  .fig-bleed figcaption .f-credit{grid-column:1;grid-row:auto;margin-top:7px}
}

/* the lead plate's caption row carries a third, meta column on desktop —
   the named subjects the piece actually covers */
.fig-plate figcaption{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,0.95fr);
  gap:14px clamp(24px,3vw,56px)}
.f-meta{border-left:1px solid var(--rule);padding-left:clamp(16px,1.6vw,26px)}
.f-meta .fm-h{display:block;font-family:var(--ui);font-weight:700;font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px}
.f-meta ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:5px}
.f-meta li{font-family:var(--ui);font-weight:600;font-size:14.5px;line-height:1.3;
  letter-spacing:-0.01em;color:var(--ink-quiet)}
.f-meta .fm-len{display:inline-block;font-family:var(--ui);font-weight:700;font-size:11.5px;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);
  border-top:1px solid var(--rule);padding-top:9px}
article[data-side="n"] .f-meta .fm-len{color:var(--blue-up)}
@media (max-width:1000px){
  .fig-plate figcaption{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .f-meta{grid-column:1 / -1;border-left:0;border-top:1px solid var(--rule);
    padding-left:0;padding-top:14px}
  .f-meta ul{grid-auto-flow:column;grid-auto-columns:max-content;gap:0 22px}
}
@media (max-width:720px){
  .fig-plate figcaption{grid-template-columns:minmax(0,1fr)}
  .f-meta ul{grid-auto-flow:row;gap:5px}
}

/* the credit cell only exists when there is a credit — the track count
   follows the content instead of reserving a dead column */
.fig-plate figcaption>div:empty{display:none}
.fig-plate figcaption{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,0.95fr)}
.fig-plate figcaption:not(:has(.fp-cred)){grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)}
@media (max-width:1000px){
  .fig-plate figcaption,
  .fig-plate figcaption:not(:has(.fp-cred)){grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .fig-plate figcaption:not(:has(.fp-cred)) .fp-cap{grid-column:1 / -1}
}
@media (max-width:720px){
  .fig-plate figcaption,
  .fig-plate figcaption:not(:has(.fp-cred)){grid-template-columns:minmax(0,1fr)}
}

.fig-plate figcaption .fp-cap{max-width:62ch}

/* ==========================================================================
   ICON SCALE — the section marks were sized as glyphs. On slab headings they
   are now spot drawings, with a lighter stroke so the weight stays even.
   ========================================================================== */
.slab-h{gap:16px;align-items:center}
.slab-h .ico{width:48px;height:48px;stroke-width:1.15;vertical-align:0}
.mh-nav .ico{width:1.4em;height:1.4em;stroke-width:1.5;vertical-align:-0.28em}
.flag .ico{width:1.45em;height:1.45em;stroke-width:1.5;vertical-align:-0.32em}
.reg-list .r-sec .ico{width:1.5em;height:1.5em;stroke-width:1.5}
.more-link .ico{width:1.6em;height:1.6em;stroke-width:1.5}
.art-kicker .ico{width:1.6em;height:1.6em;stroke-width:1.45}
.foot-nav .ico{width:1.4em;height:1.4em}
@media (max-width:720px){
  .slab-h{gap:12px}
  .slab-h .ico{width:34px;height:34px;stroke-width:1.3}
}

/* the section label is a component, not band copy — it must outrank the
   paragraph rules of whatever band it sits in (.argue p, .plate p, …) */
p.flag,a.flag,span.flag,.flag{font-family:var(--ui);font-weight:700;font-size:12.5px;
  letter-spacing:0.15em;text-transform:uppercase;line-height:1.2}
p.flag .ico,a.flag .ico,span.flag .ico,.flag .ico{width:1.45em;height:1.45em;
  stroke-width:1.5;vertical-align:-0.32em}
@media (max-width:720px){
  p.flag,a.flag,span.flag,.flag{font-size:12px}
}

@media (max-width:720px){
  .f-meta .fm-len,.f-meta .fm-h{font-size:12px}
}

/* 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}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

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

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1207px at 390, 16% of the whole page. Two columns bring it to
   573px (53% shorter). Checked before writing: no new overflow, smallest mark still
   168px wide, longest blurb 2 lines, tile heights 71-91px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.col-slots), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .col-slots{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .col-slots > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .col-slots > * *{min-width:0!important;max-width:100%}
    .col-slots img,.col-slots svg{max-width:100%;height:auto}
}

/* op-page-overflow: the page scrolled sideways at 320 — li reached
   358px in a 320px screen (+38px), inside
   ul.reg-list. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  ul.reg-list{grid-template-columns:minmax(0,1fr)!important}
  li{min-width:0!important;max-width:100%!important}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div > figure > img,
  div.art-body > figure.fig-bleed > img,
  div.measure > figure.fig-inset > img,
  div.wrap > figure.fig-plate > img,
  figure.fig-mat > div.inner > img,
  figure.fig-showpiece > div.fs-plate > img,
  main > section > img,
  section.lead-split > div.l.lead-half > img,
  section.lead-split > div.lead-half > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1439px){.col-slots.col-slots:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(232px,calc(50% - 6px)),1fr))!important;column-gap:12px!important;row-gap:12px!important;justify-content:stretch!important;align-items:stretch!important}.col-slots.col-slots > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}
.col-slots > [data-partner] img{background:transparent!important}