/* corsica-isula.com — Signal and Stone
   PALETTE (4 members, each with a job)
   --granite  ground        #E8E4DA   bone granite, the page
   --ink      ink           #14171A   text + the dark bands
   --sea      accent        #1B3FA0   saturated blue, hue ~223 — links, full bands, mats
   --ember    accent 2      #8F4E0A   saturated orange, hue ~31 — kickers, rules, filled panels
                                      (--ember-lift is the same hue raised for use on dark grounds)
   Hue separation between the two saturated members: ~192 degrees.
   Contrast on --granite: ink 14.6:1, sea 7.2:1, ember 5.1:1 — all fine at 15-17px. */

:root{
  --granite:#E8E4DA;
  --granite-2:#DEDACE;
  --ink:#14171A;
  --slate:#4C525A;
  --hair:#C5C1B5;
  --sea:#1B3FA0;
  --sea-lift:#A9BCEE;
  --ember:#8F4E0A;
  --ember-lift:#E5A63B;

  --display:'Instrument Sans',system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;

  --step--1:clamp(13px,.78rem + .1vw,14px);
  --step-0:clamp(16.5px,1rem + .15vw,18px);
  --step-1:clamp(19px,1.1rem + .35vw,22px);
  --step-2:clamp(23px,1.2rem + .8vw,29px);
  --step-3:clamp(28px,1.3rem + 1.5vw,40px);
  --step-4:clamp(34px,1.4rem + 2.7vw,58px);
  --step-5:clamp(40px,1.5rem + 4vw,74px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--granite);color:var(--ink);
  font-family:var(--display);font-size:var(--step-0);line-height:1.6;
  text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.028em;line-height:1.08}
p{margin:0}
a{color:var(--sea);text-decoration:none}
a:hover{color:var(--ember);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
svg{flex:0 0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(18px,4.5vw,52px)}
.band{padding-block:clamp(40px,5.5vw,80px)}
.band--tight{padding-block:clamp(28px,3.5vw,48px)}
.band--ink{background:var(--ink);color:var(--granite)}
.band--ink a{color:var(--sea-lift)}
.band--ink a:hover{color:var(--ember-lift)}
.band--sea{background:var(--sea);color:#F2F1EC}
.band--sea a{color:#fff}
.band--sea a:hover{color:var(--ember-lift)}

/* ---------- furniture ---------- */
.kicker{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:var(--step--1);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-bottom:14px;
}
.band--ink .kicker,.band--sea .kicker{color:var(--ember-lift)}
.kicker--sea{color:var(--sea)}
.meta{font-family:var(--mono);font-size:var(--step--1);color:var(--slate);letter-spacing:.02em}
.band--ink .meta,.band--sea .meta{color:#A8AEB6}
.band--sea .meta{color:#C3CEEE}
.rule{border:0;border-top:1px solid var(--hair);margin:0}
.rule--ember{border:0;border-top:2px solid var(--ember);margin:0}

/* ---------- masthead ---------- */
.masthead{border-bottom:1.5px solid var(--ink)}
.masthead__top{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between;padding-block:20px}
.brand{display:flex;align-items:center;gap:13px;color:var(--ink)}
.brand:hover{color:var(--ink);text-decoration:none}
.brand svg{color:var(--sea)}
.brand__name{font-size:var(--step-2);font-weight:700;letter-spacing:-.035em;text-transform:uppercase;line-height:1}
.brand__sub{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-top:5px}
.masthead__note{font-family:var(--mono);font-size:11.5px;line-height:1.55;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);text-align:right;max-width:38ch}
.nav{display:flex;flex-wrap:wrap;border-top:1px solid var(--hair)}
.nav a{
  display:flex;align-items:center;gap:9px;padding:13px 26px 13px 0;margin-right:26px;
  font-family:var(--mono);font-size:var(--step--1);font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);border-right:1px solid var(--hair);
}
.nav a:last-child{border-right:0;margin-right:0}
.nav a:hover{color:var(--ember);text-decoration:none}
.nav a[aria-current]{color:var(--sea)}

/* ---------- homepage lead ---------- */
.lead-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3.5vw,52px);align-items:end}
.lead-figure{margin:0;position:relative}
.lead-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.lead-title{font-size:var(--step-4);max-width:22ch}
.lead-dek{font-size:var(--step-1);color:var(--slate);max-width:46ch;margin-top:18px}
.band--ink .lead-dek{color:#B9BFC7}

/* ---------- register (the signature band) ---------- */
.register{width:100%;border-collapse:collapse;text-align:left}
.register th{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);padding:12px 18px 12px 0;vertical-align:bottom;
}
.register thead tr{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.register td{padding:16px 18px 16px 0;vertical-align:top;border-bottom:1px solid var(--hair)}
.register tr:last-child td{border-bottom:1px solid var(--ink)}
.register .r-part{display:flex;align-items:center;gap:11px;font-size:var(--step-1);font-weight:600;letter-spacing:-.02em}
.register .r-term{font-family:var(--mono);color:var(--sea)}
.register td:last-child,.register th:last-child{padding-right:0}
.register .r-cell{color:var(--slate)}

/* ---------- cards ---------- */
.cards{display:grid;gap:clamp(20px,2.4vw,34px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cards--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{display:flex;flex-direction:column;height:100%;color:var(--ink)}
.card:hover{color:var(--ink);text-decoration:none}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card__body{display:flex;flex-direction:column;flex:1;border-top:2px solid var(--ink);padding-top:14px;margin-top:14px}
.card h3{font-size:var(--step-1);min-height:2.3em}
.card:hover h3{color:var(--ember)}
.card p{color:var(--slate);font-size:var(--step-0);margin-top:9px}
.card .meta{margin-top:auto;padding-top:14px}
.band--ink .card,.band--ink .card h3{color:var(--granite)}
.band--ink .card__body{border-top-color:#3A4048}
.band--ink .card p{color:#AEB4BC}

.stack{display:flex;flex-direction:column}
.stack-item{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(16px,2vw,30px);padding:22px 0;border-top:1px solid var(--hair);color:var(--ink)}
.stack-item:first-child{border-top:1px solid var(--ink)}
.stack-item:last-child{border-bottom:1px solid var(--ink)}
.stack-item:hover{color:var(--ink);text-decoration:none}
.stack-item img{width:180px;aspect-ratio:16/10;object-fit:cover}
.stack-item h3{font-size:var(--step-1)}
.stack-item:hover h3{color:var(--ember)}
.stack-item p{color:var(--slate);margin-top:8px;max-width:62ch}

/* ---------- one quiet line ---------- */
.oneline{font-size:var(--step-2);font-weight:600;max-width:46ch;letter-spacing:-.022em}

/* ---------- article ---------- */
.article-head{padding-block:clamp(30px,4vw,56px)}
.article-title{font-size:var(--step-4);max-width:24ch}
.lead{font-size:var(--step-1);color:var(--slate);max-width:52ch;margin-top:18px}
.filed{
  display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin-top:22px;padding-top:14px;
  border-top:2px solid var(--ember);font-family:var(--mono);font-size:var(--step--1);color:var(--slate);max-width:60ch;
}
.filed b{color:var(--ink);font-weight:500}
.prose{max-width:70ch;font-size:clamp(17.5px,1rem + .3vw,19.5px);line-height:1.68}
.prose > p + p{margin-top:1.1em}
.prose h2{font-size:var(--step-2);margin-top:1.9em;margin-bottom:.5em;max-width:26ch}
.prose h3{font-size:var(--step-1);margin-top:1.6em;margin-bottom:.4em}
.prose em{font-style:italic}
.article-body{display:flex;flex-direction:column;align-items:start;gap:0}
.article-body > *{width:100%}

/* figure system — three treatments, one drawing system */
figure{margin:0}
figcaption .cap{font-size:var(--step-0);font-weight:500;line-height:1.45}
figcaption .credit{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:8px}
.band--ink figcaption .credit,.panel--ink figcaption .credit,.band--sea figcaption .credit,.panel--sea figcaption .credit{color:#A8AEB6}

/* 1 — full-bleed plate: caption and credit on opposite sides of a hairline */
.fig-plate{margin-block:clamp(34px,4vw,56px);width:100%}
.fig-plate img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fig-plate figcaption{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(16px,3vw,44px);border-top:1px solid var(--ink);padding-top:12px;margin-top:14px}
.fig-plate figcaption .credit{margin-top:0;order:-1}
.fig-plate figcaption .cap{max-width:62ch}

/* 2 — mat: photograph sits on a sea-blue mat, caption inside the mat */
.fig-mat{margin-block:clamp(30px,3.6vw,50px);background:var(--sea);color:#F2F1EC;padding:clamp(14px,1.6vw,24px)}
.fig-mat img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fig-mat figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,200px);gap:clamp(14px,2.4vw,32px);margin-top:16px}
.fig-mat figcaption .credit{color:#C3CEEE;border-top:1px solid rgba(242,241,236,.42);padding-top:8px;margin-top:0}

/* 3 — inset: column width, ember rule, hanging caption */
.fig-inset{margin-block:clamp(26px,3vw,42px);max-width:70ch;border-top:2px solid var(--ember)}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:12px}
.fig-inset figcaption{margin-top:12px;padding-left:22px;border-left:1px solid var(--hair);max-width:52ch}

.article-figure{margin-block:24px;border-top:2px solid var(--ember)}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;margin-top:12px}
.article-figure figcaption{margin-top:10px}
.gallery{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-block:24px}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover}

/* ---------- interruptions: the Notes-for-Design material ---------- */
.panel{margin-block:clamp(30px,3.6vw,52px);padding:clamp(20px,2.6vw,34px);width:100%}
.panel--ink{background:var(--ink);color:var(--granite)}
.panel--ink a{color:var(--sea-lift)}
.panel--sea{background:var(--sea);color:#F2F1EC}
.panel--line{background:var(--granite-2);border-top:2px solid var(--ember)}
.panel h2,.panel h3{font-size:var(--step-1);letter-spacing:-.02em}
.panel__head{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.panel__tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.panel--ink .panel__tag,.panel--sea .panel__tag{color:var(--ember-lift)}
.plist{margin:0;padding:0;list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.plist li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;font-size:var(--step-0);line-height:1.5}
.plist .n{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ember);padding-top:3px}
.panel--ink .plist .n,.panel--sea .plist .n{color:var(--ember-lift)}
.terms{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px 28px}
.terms div{border-top:1px solid var(--hair);padding-top:10px}
.panel--ink .terms div{border-top-color:#3A4048}
.terms dt{font-weight:600;font-size:var(--step-0)}
.terms dd{margin:4px 0 0;color:var(--slate);font-size:var(--step-0);line-height:1.5}
.panel--ink .terms dd{color:#AEB4BC}
.timeline{list-style:none;margin:0;padding:0;counter-reset:t}
.timeline li{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:14px clamp(16px,2.4vw,34px);padding:13px 0;border-top:1px solid var(--hair)}
.timeline li:last-child{border-bottom:1px solid var(--hair)}
.panel--ink .timeline li{border-top-color:#3A4048}
.t-when{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.04em;color:var(--ember)}
.panel--ink .t-when{color:var(--ember-lift)}
.t-what{font-size:var(--step-0);line-height:1.5}
.statrow{display:grid;gap:clamp(14px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.statblock{border-top:2px solid var(--ember);padding-top:12px}
.stat-num{display:block;font-size:var(--step-3);font-weight:700;letter-spacing:-.04em;line-height:1}
.stat-label{display:block;font-family:var(--mono);font-size:12.5px;line-height:1.45;color:var(--slate);margin-top:9px}
.panel--ink .stat-label,.panel--sea .stat-label{color:#B9BFC7}

.pullquote{margin:clamp(28px,3.4vw,44px) 0;padding:0;max-width:34ch}
.pullquote p{font-size:var(--step-2);font-weight:600;letter-spacing:-.024em;line-height:1.28;margin:0}
.pullquote::before{content:"";display:block;width:72px;border-top:3px solid var(--ember);margin-bottom:16px}
.blockquote{margin:24px 0;padding-left:22px;border-left:2px solid var(--sea);max-width:56ch}
.blockquote p{font-size:var(--step-1);line-height:1.45}
.blockquote cite{display:block;font-family:var(--mono);font-size:var(--step--1);font-style:normal;color:var(--slate);margin-top:10px}
.callout{margin:24px 0;background:var(--granite-2);border-top:2px solid var(--sea);padding:20px 22px;max-width:62ch}
.note{font-family:var(--mono);font-size:var(--step--1);line-height:1.6;color:var(--slate);max-width:62ch;margin-top:26px;padding-top:12px;border-top:1px solid var(--hair)}

.versus,.datatable{width:100%;border-collapse:collapse;text-align:left;margin-block:22px;font-size:var(--step-0)}
.versus th,.datatable th{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);padding:10px 14px 10px 0;border-bottom:1px solid var(--ink)}
.versus td,.datatable td{padding:13px 14px 13px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.versus th:first-child,.versus td:first-child{font-weight:600}

.chart figcaption{margin-top:10px}
.chart svg{width:100%;height:auto;overflow:visible}

/* ---------- map ---------- */
.map-figure{margin:0}
.map-slot{background:#0F1215;border:1px solid #333A42;padding:clamp(10px,1.4vw,18px)}
.map-slot svg{width:100%;height:auto;display:block}
.map-slot--wide svg{width:auto;max-width:100%;max-height:820px;margin-inline:auto}
.map-figure figcaption{margin-top:12px}
.map-pins{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 26px;margin:16px 0 4px;border-top:1px solid #333A42;padding-top:14px}
.map-pins div{display:flex;flex-direction:column;gap:2px}
.map-pins dt{font-family:var(--mono);font-size:13px;color:#E8E4DA;letter-spacing:.02em}
.map-pins dd{margin:0;font-family:var(--mono);font-size:12px;line-height:1.45;color:#949BA3}
.map-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:9px 24px;margin-top:14px;font-family:var(--mono);font-size:12px;line-height:1.45;color:#A8AEB6}
.map-legend span{display:flex;gap:9px;align-items:flex-start}
.map-legend i{flex:0 0 10px;width:10px;height:10px;background:var(--ember-lift);border-radius:50%;display:block;margin-top:4px}

/* ---------- lists / hubs ---------- */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--hair)}
.cat-list li:last-child{border-bottom:1px solid var(--hair)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px clamp(16px,2.6vw,40px);padding:18px 0;color:var(--ink)}
.cat-list a:hover{color:var(--ember);text-decoration:none}
.cat-list strong{font-size:var(--step-1);font-weight:600;letter-spacing:-.02em}
.cat-list span{color:var(--slate);font-size:var(--step-0)}
.cat-list a:hover span{color:var(--slate)}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.related-links li{border-top:1px solid var(--hair)}
.related-links li:last-child{border-bottom:1px solid var(--hair)}
.related-links a{display:flex;align-items:center;gap:12px;padding:15px 0;font-size:var(--step-1);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.related-links a:hover{color:var(--ember);text-decoration:none}
.further-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.further-grid a{border-top:2px solid var(--ink);padding-top:12px;font-weight:600;color:var(--ink)}
.further-grid a:hover{color:var(--ember);text-decoration:none}
.entity-ref{font-family:var(--mono);font-size:.94em}

.profile-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.profile-card{display:flex;flex-direction:column;background:var(--granite-2);padding:18px}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:var(--step-1)}
.profile-card .p-role{font-family:var(--mono);font-size:var(--step--1);color:var(--ember);margin:6px 0 10px}
.profile-card p{font-size:var(--step-0);color:var(--slate)}
.profile-card .p-links{margin-top:auto;padding-top:12px}
.org-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.org-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;border:1px solid var(--hair);padding:12px;color:var(--ink)}
.org-card:hover{border-color:var(--ember);color:var(--ink);text-decoration:none}
.org-logo{width:52px;height:52px;object-fit:contain;background:var(--ink)}
.org-name{font-weight:600}
.org-host{font-family:var(--mono);font-size:var(--step--1);color:var(--slate)}

/* ---------- supporters ---------- */
.sponsor-run{display:flex;flex-wrap:wrap;gap:26px}
/* one constant tile width for every slot — a percentage, so the run fills the band
   at any count without ever letting an individual slot grow (no flex-grow, no 1fr) */
.sponsor{flex:0 0 calc(25% - 19.5px);width:calc(25% - 19.5px);display:flex;flex-direction:column;color:var(--ink)}
.sponsor:hover{color:var(--ink);text-decoration:none}
.sponsor img{
  width:auto;height:auto;max-width:100%;max-height:44px;object-fit:contain;
}
.sponsor__box{
  background:var(--ink);aspect-ratio:3.4/1;display:flex;align-items:center;justify-content:center;
  padding:10px 14px;overflow:hidden;
}
.sponsor:hover .sponsor__box{outline:2px solid var(--ember)}
.sponsor-name{display:block;font-weight:600;font-size:var(--step-0);margin-top:12px;letter-spacing:-.015em}
.sponsor-blurb{display:block;font-size:var(--step--1);line-height:1.5;color:var(--slate);margin-top:6px}
.sponsor.feat .sponsor__box{background:var(--sea)}
.sponsor.feat .sponsor-name{color:var(--sea)}
.sponsor-group + .sponsor-group{margin-top:clamp(24px,3vw,38px)}
.sponsor-group__label{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);border-bottom:1px solid var(--hair);padding-bottom:9px;margin-bottom:18px}

/* ---------- footer ---------- */
.foot{border-top:2px solid var(--ink);margin-top:clamp(40px,5vw,72px)}
.foot__grid{display:grid;gap:0;grid-template-columns:minmax(240px,1.4fr) repeat(4,minmax(132px,1fr));padding-block:clamp(30px,3.6vw,52px)}
.foot__grid > *{padding-inline:clamp(16px,2vw,30px);border-left:1px solid var(--hair)}
.foot__grid > *:first-child{padding-left:0;border-left:0;padding-right:clamp(20px,3vw,44px)}
.foot h4{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot li a{color:var(--ink);font-size:var(--step-0);line-height:1.35}
.foot ul li:last-child a{font-family:var(--mono);font-size:var(--step--1);color:var(--sea)}
.foot a:hover{color:var(--ember)}
.foot__note{font-size:var(--step-0);line-height:1.55;color:var(--slate);max-width:46ch}
.foot__bar{border-top:1px solid var(--hair);padding-block:16px 34px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__grid > *{padding-inline:0;border-left:0;border-top:1px solid var(--hair);padding-top:20px;margin-top:20px}
  .foot__grid > *:first-child{grid-column:1/-1;border-top:0;margin-top:0;padding-top:0;padding-right:0}
}
@media (max-width:620px){ .foot__grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){
  .chain-split{grid-template-columns:minmax(0,1fr)!important}
  .lead-grid{grid-template-columns:minmax(0,1fr)}
  .masthead__note{text-align:left;max-width:none}
  .fig-plate figcaption,.fig-mat figcaption{grid-template-columns:minmax(0,1fr)}
  .fig-mat figcaption .credit{border-top:0;padding-top:0}
  .cat-list a{grid-template-columns:minmax(0,1fr)}
  .stack-item{grid-template-columns:minmax(0,1fr)}
  .stack-item img{width:100%}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (max-width:1000px){
  .sponsor{flex:0 0 calc(50% - 13px);width:calc(50% - 13px)}
}
@media (max-width:700px){
  .versus,.datatable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .versus th,.versus td,.datatable th,.datatable td{min-width:132px}
}
@media (max-width:620px){
  .nav{gap:0}
  .nav a{padding:11px 14px 11px 0;margin-right:14px;border-right:0;flex:1 1 46%}
  .sponsor{flex:0 0 100%;width:100%}
  .sponsor__box{aspect-ratio:4/1}
  .sponsor img{max-height:40px}
  .register thead{display:none}
  .register,.register tbody,.register tr,.register td{display:block;width:100%}
  .register tr{border-top:2px solid var(--ink);padding-block:14px}
  .register td{border-bottom:0;padding:2px 0}
  .register td[data-h]::before{content:attr(data-h) " — ";font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
  .prose{font-size:17.5px}
  .fig-inset figcaption{padding-left:14px}
  /* comfortable hit targets on touch */
  .brand__sub{font-size:12px}
  .foot ul{gap:0}
  .foot li a{display:inline-block;padding-block:13px}
  .kicker a,.meta a{display:inline-block;padding-block:12px}
  .register .r-part{padding-block:8px}
  .related-links a{padding-block:18px}
  .cat-list a{padding-block:20px}
}
@media print{
  .nav,.sponsor-group{display:none}
  body{background:#fff}
}

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

/* 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-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-run .sponsor .sponsor__box.sponsor__box{padding:8px 12px!important;box-sizing:border-box!important;height:44px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.sponsor-run .sponsor .sponsor__box.sponsor__box img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.sponsor-run .sponsor .sponsor__box.sponsor__box{display:block!important;width:100%!important}


/* sp-feat-ground: the featured row's plate was --sea #1B3FA0, a saturated mid blue that reads as
   the brightest thing on the page and pulls the eye off the marks it is meant to hold. Taken to
   a deeper shade of the same hue, so the row still reads as featured against the --ink plates
   below it without shouting. */
.sponsor.feat .sponsor__box{background:#122A6B!important}

/* op-nav-collapse: this nav printed 192px of stacked links at 390 before any content
   (5 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 "rule-flank", bold, 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,4.5vw,52px)) 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 (860px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-gate{display:none}
@media (max-width:860px){
  .nav-gate{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:auto;border:0;padding:10px 0;letter-spacing:.18em;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .nav-gate::before,.nav-gate::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.4}
  .nav-gate-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .nav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .nav-gate-c:checked ~ .nav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .wrap:has(> .nav-gate){display:flow-root}
  .nav-gate:not(:has(~ .nav)){display:none}
}

/* op-footer-compact: the footer printed 25 rows for 25 link(s) in
   6 list(s) — 1563px at 390, 12% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 1563 -> 1028px (34% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(10px,4.1vw,59px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1790px at 390, 14% of the whole page. Two columns bring it to
   986px (45% shorter). Checked before writing: no new overflow, smallest mark still
   145px wide, longest blurb 3 lines, tile heights 147-147px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.sponsor-run), 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){
  .sponsor-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px!important}
    .sponsor-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-run > * *{min-width:0!important;max-width:100%}
    .sponsor-run img,.sponsor-run svg{max-width:100%;height:auto}
  .sponsor-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — div reached
   338px in a 320px screen (+18px), inside
   div. 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){
  div{grid-template-columns:minmax(0,1fr)!important}
  div{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.article-body > figure.fig-inset > img,
  div.article-body > figure.fig-mat > img,
  div.article-body > figure.fig-plate > img,
  div.cards > a.card > img,
  div.chain-split > div > img,
  div.chain-split > figure.fig-mat > img,
  div.lead-grid > figure.lead-figure > img,
  div.stack > a.stack-item > img,
  div.wrap > figure.fig-plate > img){height:auto}
/* op-img-dims:end */