/* ikondomain.com — "Catalogue"
   Palette (3 named jobs + 2):
     --ground   #101114  page ground
     --ink      #EFEDE6  body text, reversed marks
     --accent   #D8FF2E  acid — catalogue numbers, section grounds, links
     --second   #FF3B5C  hot red — flags, the object band, kickers
     --quiet    #8F9196  meta, credits, sub-labels
   Two saturated members (75° and 350° hue) used as real areas, not rules. */

:root{
  --ground:#101114;
  --ink:#EFEDE6;
  --accent:#D8FF2E;
  --second:#FF3B5C;
  --quiet:#8F9196;
  --hair:rgba(239,237,230,.28);
  --hair-soft:rgba(239,237,230,.16);
  --panel:#181A1F;
  --num:104px;
  --pad:clamp(18px,3.2vw,40px);
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 18px/1.62 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:.96;letter-spacing:-.01em}
p{margin:0 0 1.15em}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(216,255,46,.34)}
a:hover,a:focus{color:var(--second);border-bottom-color:var(--second)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--ground)}
hr{border:0;border-top:1px solid var(--hair);margin:0}

/* ---------- catalogue furniture ---------- */
.cat{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.sublabel{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);margin:0 0 14px}
.kicker{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--second);display:flex;align-items:center;gap:9px;margin:0 0 14px}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.ico--lg{width:30px;height:30px}

/* band: the number gutter that runs down every page */
.band{display:grid;grid-template-columns:var(--num) minmax(0,1fr);border-bottom:1px solid var(--hair)}
.band__no{border-right:1px solid var(--hair);padding:26px 12px;display:flex;justify-content:center}
.band__no span{font-family:var(--display);font-weight:900;font-size:clamp(34px,4.4vw,66px);line-height:.78;color:var(--accent)}
.band__no small{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.band__body{padding:var(--pad);min-width:0}
.band--flush>.band__body{padding:0}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--hair)}
.mast__plate{display:grid;grid-template-columns:var(--num) minmax(0,1fr) minmax(180px,240px);border-bottom:1px solid var(--hair)}
.mast__ikd{border-right:1px solid var(--hair);padding:14px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.mast__ikd b{font-family:var(--display);font-weight:900;font-size:38px;line-height:.78;color:var(--accent)}
.mast__ikd span{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)}
.mast__name{padding:16px var(--pad) 12px;display:flex;align-items:flex-end;min-width:0}
.mast__name a{border:0;color:var(--ink);display:block}
.mast__name a:hover{color:var(--accent)}
.wordmark{font-family:var(--display);font-weight:900;font-size:clamp(40px,8.6vw,132px);line-height:.8;letter-spacing:-.018em;text-transform:uppercase;display:block}
.mast__say{border-left:1px solid var(--hair);padding:14px 16px;display:flex;align-items:flex-end}
.mast__say p{margin:0;font-size:15px;line-height:1.45;color:var(--quiet)}
.mast__nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.mast__nav a{border:0;border-right:1px solid var(--hair);padding:11px 12px 12px;display:flex;align-items:center;gap:8px;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.05em;text-transform:uppercase;line-height:1.05}
.mast__nav a:last-child{border-right:0}
.mast__nav a:hover{background:var(--panel);color:var(--accent)}
.mast__nav a[aria-current]{background:var(--accent);color:var(--ground)}
.mast__nav .ico{width:17px;height:17px;opacity:.85}
.mast__sub{display:flex;flex-wrap:wrap;gap:8px 24px;padding:9px var(--pad);border-top:1px solid var(--hair);
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.09em;text-transform:uppercase}
.mast__sub a{border:0;color:var(--quiet)}
.mast__sub a:hover,.mast__sub a[aria-current]{color:var(--ink)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:9;background:var(--accent);color:var(--ground);padding:8px 12px;border:0}

/* ---------- headings / prose ---------- */
.h-xl{font-size:clamp(40px,7.4vw,124px);font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.h-lg{font-size:clamp(30px,4.6vw,72px);font-weight:800;letter-spacing:-.012em}
.h-md{font-size:clamp(25px,3vw,42px);font-weight:800;text-transform:uppercase}
.h-sm{font-size:clamp(21px,2.1vw,28px);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.measure{max-width:68ch}
.prose{font-size:19px;line-height:1.65}
.prose h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,36px);text-transform:uppercase;letter-spacing:.01em;margin:0 0 .5em;max-width:34ch}
.prose h2 + p{margin-top:0}
.prose > * + h2{margin-top:1.5em}
.lead{font-size:clamp(21px,2.2vw,27px);line-height:1.4;font-weight:500;max-width:44ch;margin:0 0 1em}
.note{font-size:16px;color:var(--quiet);border-left:2px solid var(--second);padding-left:14px;max-width:60ch}
.pullquote{margin:2em 0;padding:0;border-top:3px solid var(--accent);border-bottom:1px solid var(--hair)}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,46px);line-height:1.02;text-transform:uppercase;margin:.5em 0;max-width:26ch;color:var(--ink)}
.blockquote{margin:2em 0;padding:22px 24px;background:var(--panel);border-left:4px solid var(--second)}
.blockquote p{font-size:20px;line-height:1.45;margin:0 0 .6em}
.blockquote cite{font-family:var(--display);font-style:normal;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
.callout{margin:2em 0;background:var(--accent);color:var(--ground);padding:26px var(--pad)}
.callout p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,28px);line-height:1.1;text-transform:uppercase;max-width:38ch}
.callout a{color:var(--ground);border-bottom-color:rgba(16,17,20,.45)}
.callout a:hover{color:var(--ground);border-bottom-color:var(--ground)}

/* ---------- figure system: three treatments, one drawing system ---------- */
figure{margin:0}
figcaption{margin-top:11px;max-width:56ch}
.fig-cap{display:block;font-size:16px;line-height:1.4;color:var(--ink)}
.fig-credit{display:block;margin-top:5px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
/* 1 — plate: image on a mat with an inset hairline, caption inside the mat */
.article-figure{margin:2.2em 0;background:var(--panel);padding:14px 14px 18px;border-top:3px solid var(--accent)}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;outline:1px solid var(--hair);outline-offset:-1px}
.article-figure figcaption{padding:0 4px}
/* 2 — bleed: full-measure band, caption in a ruled strip beneath */
.fig-bleed{margin:2.6em calc(var(--pad)*-1);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.fig-bleed img{width:100%;height:clamp(240px,44vh,460px);object-fit:cover}
.fig-bleed figcaption{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;max-width:none;margin:0;padding:12px var(--pad) 16px;border-top:1px solid var(--hair)}
.fig-bleed .fig-cap{max-width:62ch}
.fig-bleed .fig-credit{margin-top:0}
/* 3 — inset: sits in the column, prose wraps, acid rule on the leading edge */
.fig-inset{float:right;width:min(340px,46%);margin:.35em 0 1.4em 28px;border-left:3px solid var(--second);padding-left:14px}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig-inset figcaption{margin-top:9px}
.fig-inset .fig-cap{font-size:15px}
/* 4 — strip: letterbox rule between sections */
.fig-strip{margin:2.6em 0}
.fig-strip img{width:100%;height:clamp(150px,24vh,260px);object-fit:cover;outline:1px solid var(--hair);outline-offset:-1px}
.fig-strip figcaption{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;max-width:none;border-top:1px solid var(--hair);padding-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;margin:2.2em 0}
.gallery figure{background:var(--panel);padding:10px 10px 14px}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{margin-top:9px}
.gallery .fig-cap{font-size:15px}

/* ---------- data ---------- */
.datatable,.versus{width:100%;border-collapse:collapse;font-size:17px;margin:1.6em 0}
.datatable caption,.versus caption{text-align:left;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);padding-bottom:10px}
.datatable th,.versus th{text-align:left;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);border-bottom:1px solid var(--hair);padding:0 16px 9px 0;vertical-align:bottom}
.datatable td,.versus td{border-bottom:1px solid var(--hair-soft);padding:12px 16px 12px 0;vertical-align:top}
.datatable tr>*:last-child,.versus tr>*:last-child{padding-right:0}
.datatable td:first-child{font-family:var(--display);font-weight:600;font-size:19px;color:var(--accent);white-space:nowrap}
.versus td:first-child{font-family:var(--display);font-weight:600;font-size:19px}
.versus tbody tr:nth-child(odd) td{background:rgba(239,237,230,.03)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px;margin:1.8em 0}
.statblock{background:var(--panel);padding:20px 18px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:900;font-size:clamp(38px,4.6vw,62px);line-height:.82;color:var(--accent)}
.stat-label{font-size:15px;line-height:1.35;color:var(--ink)}
.timeline{list-style:none;margin:1.8em 0;padding:0;border-top:1px solid var(--hair)}
.timeline li{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:8px 26px;padding:13px 0;border-bottom:1px solid var(--hair-soft)}
.t-when{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);line-height:1.15}
.t-what{font-size:17px;line-height:1.45}
.chart{margin:1.8em 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar-alt{fill:var(--second)}
.chart .c-lbl{fill:var(--ink);font:400 13px/1 var(--body)}
.chart .c-val{fill:var(--quiet);font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.1em}
.chart .c-line{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart .c-axis{stroke:var(--hair);stroke-width:1}
.chart figcaption{margin-top:12px}

/* ---------- cards / refs ---------- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;margin:1.8em 0}
.profile-card{background:var(--panel);padding:22px 20px;display:flex;flex-direction:column}
.profile-card .p-photo{width:100%;aspect-ratio:3/2;object-fit:cover;margin:-22px -20px 18px;width:calc(100% + 40px);max-width:calc(100% + 40px)}
.profile-card h3{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;margin-bottom:4px}
.profile-card .p-role{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--second);margin:0 0 12px}
.profile-card p{font-size:16px;line-height:1.5}
.profile-card .p-links{margin:auto 0 0;padding-top:12px;font-size:15px}
.profile-card .p-attr{font-family:var(--display);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin:8px 0 0}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;margin:1.8em 0}
.org-card{display:flex;flex-direction:column;gap:5px;background:var(--panel);padding:18px;border:0;color:var(--ink)}
.org-card:hover{background:#20232a;color:var(--ink)}
.org-name{font-family:var(--display);font-weight:800;font-size:23px;text-transform:uppercase}
.org-host{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet)}
.entity-ref{white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;margin:1.6em 0}
.further-grid a{background:var(--panel);border:0;padding:20px 18px;color:var(--ink);font-family:var(--display);font-weight:600;font-size:22px;line-height:1.08;text-transform:uppercase;display:block}
.further-grid a:hover{background:var(--accent);color:var(--ground)}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.related-links li{border-top:1px solid var(--hair-soft)}
.related-links li:first-child{border-top:1px solid var(--hair)}
.related-links a{display:block;padding:15px 0;border:0;color:var(--ink);font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,27px);line-height:1.08;text-transform:uppercase}
.related-links a:hover{color:var(--accent)}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--hair-soft)}
.cat-list a{display:grid;grid-template-columns:70px minmax(0,1fr);gap:6px 20px;align-items:baseline;padding:16px 0;border:0;color:var(--ink)}
.cat-list a:hover{color:var(--accent)}
.cat-list .n{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.1em;color:var(--quiet)}
.cat-list .t{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,27px);line-height:1.1;text-transform:uppercase}
.cat-list .d{grid-column:2;font-size:16px;color:var(--quiet);max-width:62ch}

/* ---------- homepage-specific ---------- */
.lead-fig{position:relative;border-bottom:1px solid var(--hair)}
.lead-fig img{width:100%;height:clamp(300px,58vh,620px);object-fit:cover}
.lead-fig figcaption{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;max-width:none;margin:0;padding:12px var(--pad) 14px}
.feed{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px)}
.feed__main{padding:var(--pad);min-width:0}
.rail{border-left:1px solid var(--hair);padding:var(--pad) 22px}
.entry{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 18px;padding:20px 0;border-top:1px solid var(--hair-soft)}
.entry:first-of-type{border-top:0;padding-top:0}
.entry__no{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.1em;color:var(--quiet);padding-top:5px}
.entry__t{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.3vw,31px);line-height:1.06;text-transform:uppercase}
.entry__t a{border:0;color:var(--ink)}
.entry__t a:hover{color:var(--accent)}
.entry__d{grid-column:2;margin:0;font-size:16.5px;color:#C6C4BD;max-width:62ch}
.hero-title{padding:var(--pad);border-bottom:1px solid var(--hair)}
.emblem{display:flex;justify-content:center;padding:10px 0}
.emblem svg{width:100%;max-width:300px;height:auto}

/* ---------- supporters rail (11 slots, constant-width units) ---------- */
.supporters{padding:var(--pad)}
.sup-group{margin-bottom:26px}
.sup-group:last-child{margin-bottom:0}
.sup-list{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hair)}
.sponsor{flex:0 0 100%;width:100%;border:0;border-bottom:1px solid var(--hair-soft);padding:13px 0;display:block;color:var(--ink)}
.sponsor:hover{color:var(--accent)}
.sponsor-name{display:block;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.05em;text-transform:uppercase;line-height:1.15}
.sponsor-blurb{display:block;margin-top:5px;min-width:200px;font-size:15px;line-height:1.35;color:var(--quiet)}
.sponsor.feat .sponsor-name{color:var(--accent)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair);display:grid;grid-template-columns:var(--num) minmax(0,1fr) minmax(180px,240px)}
.foot__ikd{border-right:1px solid var(--hair);padding:20px 12px}
.foot__ikd b{font-family:var(--display);font-weight:900;font-size:30px;line-height:.8;color:var(--accent)}
.foot__nav{padding:20px var(--pad);display:flex;flex-wrap:wrap;gap:10px 24px;align-content:flex-start}
.foot__nav a{border:0;color:var(--quiet);font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.08em;text-transform:uppercase}
.foot__nav a:hover{color:var(--ink)}
.foot__say{border-left:1px solid var(--hair);padding:20px 16px}
.foot__say p{margin:0;font-size:15px;line-height:1.45;color:var(--quiet)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .mast__nav{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mast__nav a{border-bottom:1px solid var(--hair)}
  .feed{grid-template-columns:minmax(0,1fr)}
  .rail{border-left:0;border-top:1px solid var(--hair)}
}
@media (max-width:820px){
  :root{--num:64px}
  .mast__plate{grid-template-columns:var(--num) minmax(0,1fr)}
  .mast__say{grid-column:1/-1;border-left:0;border-top:1px solid var(--hair)}
  .mast__ikd b{font-size:26px}
  .band__no span{font-size:30px}
  .foot{grid-template-columns:var(--num) minmax(0,1fr)}
  .foot__say{grid-column:1/-1;border-left:0;border-top:1px solid var(--hair)}
  .fig-inset{float:none;width:auto;margin:1.6em 0}
  .prose{font-size:18px}
}
@media (max-width:560px){
  body{font-size:17px}
  .mast__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mast__nav a{font-size:17px}
  .entry{grid-template-columns:minmax(0,1fr)}
  .entry__no{padding-top:0}
  .entry__d{grid-column:1}
  .cat-list a{grid-template-columns:minmax(0,1fr)}
  .cat-list .d{grid-column:1}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .datatable,.versus{font-size:15.5px}
  .datatable td:first-child{white-space:normal}
  .band{grid-template-columns:minmax(0,1fr)}
  .band__no{border-right:0;border-bottom:1px solid var(--hair);justify-content:flex-start;padding:12px var(--pad)}
  .band__no span{font-size:26px}
}
@media print{
  body{background:#fff;color:#000}
  .mast__nav,.rail,.supporters{display:none}
}

/* ---------- collapsible long lists ---------- */
details.expander{margin:1.4em 0}
details.expander>summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:11px 0;border-top:1px solid var(--hair)}
details.expander>summary::-webkit-details-marker{display:none}
details.expander>summary::after{content:" +"}
details[open].expander>summary::after{content:" \2212"}
details.expander>summary:hover{color:var(--second)}
.sg-block{border-top:1px solid var(--hair);padding:34px 0 10px}
.sg-block>h2{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--second);margin:0 0 18px}

/* ---------- hairline grids: rule on the cell, never on the container ----------
   Painting the wrapper and faking rules with gap:1px draws every empty track in a
   partly-filled final row as a solid slab. The rule belongs to the cell. */
.statrow>.statblock,.profile-grid>.profile-card,.org-grid>.org-card,.gallery>figure,.further-grid>a{
  outline:1px solid var(--hair-soft);outline-offset:-1px;
}

/* ==========================================================================
   REVISION 2 — article rhythm, band intersections, and mobile
   ========================================================================== */

:root{ --pad:clamp(20px,3.2vw,44px); --pad-y:clamp(36px,4.6vw,72px); }

/* --- band intersections: real vertical air, and a gutter that reads as a marker --- */
.band__body{ padding:var(--pad-y) var(--pad); }
.band--flush>.band__body{ padding:0; }
.band__no{ padding:var(--pad-y) 12px 0; align-items:flex-start; }
.band__no span,.band__no small{ display:block; }
.band__no small{ position:relative; padding-top:16px; }
.band__no small::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:22px; height:3px; background:var(--accent); }
@media (min-width:821px){
  .band__no>*{ position:sticky; top:20px; }
  .band__no{ align-items:flex-start; }
}
.band--plate>.band__body{ padding-top:calc(var(--pad-y) * .78); padding-bottom:calc(var(--pad-y) * .78); }
.band--plate .band__no small::before{ background:var(--ground); opacity:.55; }

/* --- article head --- */
.h-art{ font-size:clamp(33px,5.4vw,82px); font-weight:900; line-height:.94; letter-spacing:-.016em; }
.band--head>.band__body{ padding-bottom:calc(var(--pad-y) * .8); }
.deck{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(22px,3vw,48px); align-items:start; border-top:1px solid var(--hair); padding-top:22px; }
.deck .lead{ margin:0; max-width:34ch; }
.names__lbl{ margin:0 0 10px; font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--quiet); }
.names{ margin:0; }
.names ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.names li{ font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
  border:1px solid var(--hair); padding:5px 10px 6px; line-height:1.1; }

/* --- prose rhythm --- */
.prose p{ margin:0 0 1.3em; }
.prose>h2{ margin-top:1.9em; }
.prose>*:first-child{ margin-top:0; }
.prose>h2:first-child{ margin-top:0; }
.pullquote{ margin:2.4em 0; }
.callout{ margin:2.4em 0; }
.blockquote{ margin:2.4em 0; }
.article-figure{ margin:2.6em 0; }

/* --- wide things get their own scroller instead of squeezing the page --- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.8em 0; }
.table-wrap>table{ margin:0; min-width:520px; }
.chart-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.chart-scroll>svg{ min-width:620px; }
.chart .c-lbl{ font-size:15px; }
.chart .c-val{ font-size:15px; }
.scroll-hint{ display:none; margin:8px 0 0; font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--quiet); }

/* ==================== mobile ==================== */
@media (max-width:1080px){
  .mast__nav{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:900px){
  .deck{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .deck .lead{ max-width:44ch; }
}
@media (max-width:820px){
  .band__no{ padding:calc(var(--pad-y) * .55) 10px 0; }
  .mast__nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mast__nav a{ min-height:52px; font-size:18px; }
}
@media (max-width:640px){
  :root{ --pad-y:30px; }
  /* the gutter becomes a compact chip above the band, not a full-height strip */
  .band{ grid-template-columns:minmax(0,1fr); }
  .band__no{ border-right:0; border-bottom:1px solid var(--hair); justify-content:flex-start; align-items:center;
    padding:11px var(--pad); gap:10px; flex-direction:row; }
  .band__no>*{ position:static; }
  .band__no span{ font-size:24px; line-height:1; }
  .band__no small{ padding-top:0; padding-left:32px; font-size:14px; }
  .band__no small::before{ top:50%; left:0; transform:translateY(-50%); width:22px; }
  .band--plate .band__no{ border-bottom-color:rgba(16,17,20,.3); }

  /* masthead: one tappable row per place */
  .mast__plate{ grid-template-columns:minmax(0,1fr); }
  .mast__ikd{ border-right:0; border-bottom:1px solid var(--hair); flex-direction:row; align-items:baseline; gap:12px; padding:10px var(--pad); }
  .mast__ikd b{ font-size:24px; }
  .mast__name{ padding:14px var(--pad) 12px; }
  .mast__say{ padding:12px var(--pad) 14px; }
  .mast__nav{ grid-template-columns:minmax(0,1fr); }
  .mast__nav a{ border-right:0; border-bottom:1px solid var(--hair-soft); min-height:50px; padding:12px var(--pad); }
  .mast__nav a:last-child{ border-bottom:0; }
  .mast__sub{ padding:10px var(--pad); gap:6px 16px; font-size:15px; }

  /* figures: bleed edge-to-edge, captions keep their gutter */
  .fig-bleed{ margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1); }
  .lead-fig img{ height:clamp(210px,42vh,320px); }
  .fig-strip img{ height:clamp(150px,26vh,210px); }
  .article-figure{ padding:10px 10px 14px; }

  /* wide things announce that they scroll */
  .scroll-hint{ display:block; }

  /* charts read at a legible size inside their scroller */
  .chart .c-lbl,.chart .c-val{ font-size:19px; }

  .feed__main,.rail{ padding:var(--pad-y) var(--pad); }
  .supporters{ padding:0; }
  .sponsor{ padding:15px 0; }
  .statrow{ grid-template-columns:minmax(0,1fr); }
  .h-art{ font-size:clamp(29px,7.6vw,44px); }
  .lead{ font-size:20px; }
  .prose{ font-size:17.5px; line-height:1.62; }
  .prose h2{ font-size:24px; }
  .names li{ font-size:15px; }
  .foot{ grid-template-columns:minmax(0,1fr); }
  .foot__ikd{ border-right:0; border-bottom:1px solid var(--hair); padding:14px var(--pad); }
  .foot__nav{ padding:16px var(--pad); }
  .foot__say{ border-left:0; border-top:1px solid var(--hair); padding:16px var(--pad); }
}
@media (max-width:400px){
  .wordmark{ font-size:38px; }
  .related-links a{ font-size:21px; }
  .entry__t{ font-size:22px; }
  .cat-list .t{ font-size:20px; }
}

.band--plate .scroll-hint{ color:rgba(16,17,20,.72); }
.band--plate .table-wrap>table a{ color:var(--ground); border-bottom-color:rgba(16,17,20,.45); }

/* ==========================================================================
   REVISION 3 — the comparison plate as a designed object, not a table
   ========================================================================== */

/* the plate's own label gets weight and a rule of its own */
.band--plate .sublabel,.band--plate>.band__body>.sublabel{
  color:rgba(16,17,20,.72); font-size:16px; letter-spacing:.2em;
  padding-bottom:12px; border-bottom:2px solid rgba(16,17,20,.55); margin-bottom:24px;
}
.band:not(.band--plate)>.band__body>.sublabel{
  padding-bottom:12px; border-bottom:2px solid var(--accent); margin-bottom:24px; color:var(--quiet);
}

/* --- .versus: stepped comparison rows --- */
.versus{ counter-reset:vrow; border-collapse:collapse; }
.versus caption{ font-size:16px; letter-spacing:.16em; padding-bottom:16px; }
.versus thead th{ font-size:14px; letter-spacing:.18em; padding-bottom:12px; border-bottom-width:2px; }
.versus thead th:first-child{ width:34%; }
.versus tbody tr{ counter-increment:vrow; }
.versus tbody tr:nth-child(odd) td{ background:none; }
.versus td{ padding:22px 26px 24px 0; vertical-align:top; }
.versus td:last-child{ padding-right:0; font-size:17.5px; line-height:1.5; }
.versus td:first-child{
  font-family:var(--display); font-weight:800; font-size:clamp(24px,2.5vw,34px);
  line-height:.98; letter-spacing:.01em; text-transform:uppercase; white-space:normal;
  color:var(--accent); padding-right:34px;
}
.versus td:first-child::before{
  content:counter(vrow,decimal-leading-zero);
  display:block; font-size:14px; font-weight:600; letter-spacing:.2em;
  margin-bottom:9px; opacity:.72;
}
.band--plate .versus td:first-child{ color:var(--ground); }
.band--plate .versus td:first-child::before{ opacity:.6; }

/* --- .datatable: same family, quieter --- */
.datatable td{ padding:16px 24px 17px 0; }
.datatable td:last-child{ padding-right:0; }
.datatable td:first-child{ font-size:20px; letter-spacing:.03em; text-transform:uppercase; padding-right:30px; }
.datatable thead th{ padding-bottom:11px; border-bottom-width:2px; }
.band--plate .datatable td:first-child{ color:var(--ground); }

@media (max-width:640px){
  /* the comparison stops being a table and becomes stacked blocks */
  .table-wrap>.versus{ min-width:0; }
  .versus,.versus tbody,.versus tr,.versus td{ display:block; width:100%; }
  .versus thead{ display:none; }
  .versus caption{ display:block; text-align:left; padding-bottom:14px; }
  .versus tbody tr{ padding:18px 0 20px; border-bottom:1px solid var(--hair-soft); }
  .band--plate .versus tbody tr{ border-bottom-color:rgba(16,17,20,.22); }
  .versus tbody tr:last-child{ border-bottom:0; padding-bottom:0; }
  .versus td{ padding:0; border-bottom:0 !important; background:none !important; }
  .versus td:first-child{ font-size:24px; padding:0 0 8px; }
  .versus td:last-child{ font-size:17px; }
  .table-wrap:has(>.versus)+.scroll-hint{ display:none; }

  .datatable{ min-width:0; }
  .datatable td{ padding:12px 14px 13px 0; }
  .datatable td:first-child{ font-size:17px; padding-right:14px; }
}

/* plate-ground table furniture (was inline, now owned by the stylesheet) */
.band--plate .versus caption,.band--plate .datatable caption,
.band--plate .versus thead th,.band--plate .datatable thead th{ color:rgba(16,17,20,.72); border-bottom-color:rgba(16,17,20,.5); }
.band--plate .versus td,.band--plate .datatable td{ border-bottom-color:rgba(16,17,20,.22); }
.band--plate .timeline{ border-top-color:rgba(16,17,20,.5); }
.band--plate .timeline li{ border-bottom-color:rgba(16,17,20,.22); }
.band--plate .t-when{ color:var(--ground); }
.band--plate .statblock{ background:rgba(16,17,20,.09); outline-color:rgba(16,17,20,.18); }
.band--plate .stat-num,.band--plate .stat-label{ color:var(--ground); }

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* 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-list{flex-wrap:wrap!important}
.sup-list > .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-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{padding:13px 13px!important}
.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}

/* sp-grid-stretch: fixed pixel tracks left the container part-empty. */
.further-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!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-lead-copy-only: copy on the top three, names for the rest.
   All eleven entries carried a three-line blurb in a 167px column, so the list ran for pages.
   The first three keep their copy; the remainder show the brand alone. */
/* ⚠️ nth-child COUNTED THE WRONG THING. There are three .sup-list groups, each with its own
   heading, and the first holds exactly the three .sponsor.feat entries the operator wants to
   keep. nth-child(n+4) therefore matched only the fourth entry of each group — one tile lost its
   copy instead of eight. The top three ARE the featured ones, so that is what the rule says. */
.sup-list .sponsor:not(.feat) .sponsor-blurb{display:none!important}


/* op-nav-collapse: this nav printed 350px of stacked links at 390 before any content
   (7 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 "bracket", 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 (0px measured) the button carries the build's
   gutter (clamp(18px,3.2vw,40px)) 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 (900px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "plus" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:900px){
  .menu-switch{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;padding:10px 4px;letter-spacing:.2em;gap:12px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .menu-switch::before{content:"[";opacity:.55}
  .menu-switch::after{content:"]";opacity:.55}
  .menu-switch-bars{width:11px;height:11px;flex:none;position:relative;border-top:1.5px solid currentColor;margin-top:-1px;box-shadow:inset 5px 0 0 -3.75px currentColor}
  .mast__nav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .menu-switch-c:checked ~ .mast__nav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .mast:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .mast__nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   688px at 390, 8% of the whole page. Two columns bring it to
   438px (36% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 3 lines, tile heights 50-118px.
   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 (.sup-list), 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){
  .sup-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sup-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-list > * *{min-width:0!important;max-width:100%}
    .sup-list img,.sup-list svg{max-width:100%;height:auto}
}

/* op-odd-tier-lead: .sup-list (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sup-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; font-family: var(--display); font-weight: 800; line-height: 0.96; letter-spacing: -0.01em;}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:899px){
  section.band{padding-left:max(clamp(18px,4vw,40px), 18px);padding-right:max(clamp(18px,4vw,40px), 18px)}
  section.band.band--plate{padding-left:max(clamp(18px,4vw,40px), 18px);padding-right:max(clamp(18px,4vw,40px), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.lead-fig > img,
  div > a > img,
  div > figure.fig-strip > img,
  div.band__body > figure.fig-strip > img,
  div.measure.prose > figure.fig-inset > img,
  div.measure.prose > figure.fig-strip > img,
  main > figure.lead-fig > img){height:auto}
/* op-img-dims:end */