/* Art In Red Light — Raking Light
   PALETTE — 5 members, each with a job
   --ground   #14100D  oak black .... page ground
   --ink      #EFE7DA  bone ......... type on the ground
   --accent   #EC5B4A  vermilion .... links, rules, section marks   (saturated, hue ~8)
   --madder   #6E1520  deep madder .. full-width band ground, section heads
   --verdigris#1B6B5A  verdigris .... second band ground, examination material (saturated, hue ~168)
   --quiet    #948A7B  grey-oak ..... credits, fine print
*/
:root{
  --ground:#14100D; --ground-2:#1C1712; --ground-3:#231C15;
  --ink:#EFE7DA; --ink-2:#C9BEAB; --quiet:#948A7B; --rule:#342A20; --rule-2:#241F19;
  --accent:#EC5B4A; --accent-deep:#C21E33;
  --madder:#6E1520; --madder-ink:#F6DCD6;
  --verdigris:#1B6B5A; --verdigris-ink:#CFE6DE;
  --mat:#EFE7DA;
  --serif:'Bitter',Georgia,serif;
  --sans:'Public Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --measure:68ch;
  --gut:clamp(20px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.08}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);font-weight:600}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--ground);padding:8px 14px;z-index:20}

/* ── masthead ─────────────────────────────────────────────── */
.topline{border-bottom:1px solid var(--rule-2);background:var(--ground-2)}
.topline .wrap{display:flex;gap:20px;justify-content:space-between;align-items:center;padding-block:7px;flex-wrap:wrap}
.topline p{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet);margin:0}
.masthead .wrap{display:flex;gap:24px;align-items:baseline;justify-content:space-between;padding-block:20px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;color:var(--accent);flex:none}
.brand b{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.4vw,31px);letter-spacing:-.02em;line-height:1}
.strap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);max-width:44ch}
.sitenav{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--ground)}
.sitenav ul{display:flex;flex-wrap:wrap;gap:4px 26px;padding-block:11px}
.sitenav a{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;padding-block:3px}
.sitenav a:hover,.sitenav a[aria-current]{color:var(--accent);text-decoration:none}
.sitenav svg{width:18px;height:18px;flex:none}


/* ── homepage lead ────────────────────────────────────────── */
.lead-feature{border-bottom:1px solid var(--rule)}
.plate{position:relative;width:100%;aspect-ratio:16/9;background:var(--ground-3);overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover}
.lead-body{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);padding-block:clamp(28px,4vw,44px) clamp(30px,4vw,46px)}
.lead-body h1{font-size:clamp(34px,5.2vw,62px);line-height:1.02;letter-spacing:-.03em}
.lead-body .deck{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:var(--ink-2);margin-top:18px}
.lead-body .aside p{font-size:15.5px;line-height:1.68;color:var(--quiet)}
.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;color:var(--quiet);margin-top:20px}
.meta .sec{color:var(--accent);font-weight:600}
.meta .dot{color:var(--rule)}
.more{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--accent);margin-top:22px}
.more svg{width:17px;height:17px}
.more:hover{text-decoration:none;color:var(--ink)}

/* ── figures — three treatments ───────────────────────────── */
figure{margin:0}
figcaption p{margin:0}
.fig-cap{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink)}
.credit{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:none;color:var(--quiet);margin-top:7px}

/* 1 · plate — full bleed, two-column caption */
.fig-plate figcaption{display:flex;gap:clamp(20px,4vw,44px);padding-top:18px;border-bottom:1px solid var(--rule);padding-bottom:24px}
.fig-plate .fig-cap{flex:1}
.fig-plate .credit{width:min(240px,32%);flex:none;margin-top:0}

/* 2 · mat — photograph on a bone card */
.fig-mat{background:var(--mat);padding:clamp(16px,2vw,26px)}
.fig-mat .shot{position:relative;aspect-ratio:8/5;outline:1px solid rgba(20,16,13,.4);overflow:hidden;background:#ded4c1}
.fig-mat img{width:100%;height:100%;object-fit:cover}
.fig-mat figcaption{padding-top:15px}
.fig-mat .fig-cap{color:var(--ground);font-size:16.5px}
.fig-mat .credit{color:#7B7264}

/* 3 · offset — vermilion edge, caption steps beside */
.fig-offset{display:flex;gap:clamp(16px,2.4vw,24px);align-items:flex-start}
.fig-offset .shot{width:min(58%,420px);flex:none;aspect-ratio:8/5;border-left:3px solid var(--accent-deep);overflow:hidden;background:var(--ground-3)}
.fig-offset img{width:100%;height:100%;object-fit:cover}
.fig-offset figcaption{flex:1;border-top:1px solid var(--rule);padding-top:11px}
.fig-offset .fig-cap{font-size:16px}

/* ── the stack (madder band) ──────────────────────────────── */
.band{padding-block:clamp(32px,4.5vw,50px)}
.band-madder{background:var(--madder);color:var(--madder-ink)}
.band-madder h2,.band-madder h3{color:#FFF6F1}
.band-verdigris{background:var(--verdigris);color:var(--verdigris-ink)}
.band-verdigris h2,.band-verdigris h3{color:#F0FAF6}
.band-head{display:flex;gap:20px;align-items:baseline;justify-content:space-between;border-bottom:1px solid currentColor;padding-bottom:13px;margin-bottom:28px;flex-wrap:wrap}
.band-head h2{font-size:clamp(21px,2.4vw,27px);font-weight:600;letter-spacing:-.01em}
.band-head .kicker{color:inherit;opacity:.72}
.band-madder .band-head,.band-verdigris .band-head{border-color:rgba(255,255,255,.3)}

.stack{border-top:1px solid rgba(255,255,255,.28)}
.stack li{border-bottom:1px solid rgba(255,255,255,.22)}
.stack a{display:grid;grid-template-columns:54px minmax(180px,1.1fr) minmax(0,1.5fr) auto;gap:8px 18px;align-items:center;padding:15px 0;color:inherit}
.stack a:hover{text-decoration:none;background:rgba(0,0,0,.14)}
.stack .n{font-family:var(--mono);font-size:13px;opacity:.75}
.stack .name{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.7vw,21px);color:#FFF6F1}
.stack .name svg{width:21px;height:21px;flex:none}
.stack .what{font-size:15px;line-height:1.5;opacity:.86}
.stack .cnt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;text-align:right}

/* ── section rooms ────────────────────────────────────────── */
.room{padding-block:clamp(30px,4vw,46px);border-bottom:1px solid var(--rule-2)}
.room-head{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:26px}
.room-head .t{display:flex;align-items:center;gap:12px}
.room-head svg{width:27px;height:27px;color:var(--accent);flex:none}
.room-head h2{font-size:clamp(24px,3vw,34px)}
.room-head p{font-size:15.5px;color:var(--quiet);max-width:46ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,2.6vw,34px)}
.card{display:flex;flex-direction:column;height:100%}
.card .shot{aspect-ratio:8/5;overflow:hidden;background:var(--ground-3);border-left:3px solid var(--accent-deep)}
.card .shot img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:20px;font-weight:600;line-height:1.2;margin-top:14px;min-height:2.4em}
.card p{font-size:14.5px;line-height:1.6;color:var(--quiet);margin-top:9px}
.card .meta{margin-top:auto;padding-top:14px;font-size:13px}
.rest{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;padding-top:16px;border-top:1px solid var(--rule)}
.rest a{display:flex;align-items:center;gap:9px;font-size:15.5px;color:var(--ink-2)}
.rest a::before{content:"";width:16px;height:1px;background:var(--accent-deep);flex:none}
.rest a:hover{color:var(--accent);text-decoration:none}

/* ── supporters ───────────────────────────────────────────── */
.supporters{border-block:1px solid var(--rule)}
.sponsor-run{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px}
.sponsor{flex:0 0 auto;width:258px;min-height:186px;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--ground-2);border:1px solid var(--rule);color:var(--ink)}
.sponsor:hover{text-decoration:none;border-color:var(--accent-deep)}
.sponsor img{width:100%;height:44px;max-height:44px;object-fit:contain;object-position:left center;background:#0D0A08;padding:6px 10px;border:1px solid var(--rule-2)}
.sponsor-name{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.25}
.sponsor-blurb{font-size:14px;line-height:1.55;color:var(--quiet);min-width:200px}
.sponsor.feat{background:var(--ground-3)}
.sponsor.feat .sponsor-name{color:#FFF6F1}
.tier{margin-top:26px}
.tier h3{font-size:15px;font-weight:600;letter-spacing:.01em;margin-bottom:14px;color:var(--ink-2)}

/* ── article ──────────────────────────────────────────────── */
.art-head{padding-block:clamp(28px,4vw,44px) clamp(22px,3vw,32px)}
.art-head .sec-mark{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.art-head .sec-mark svg{width:20px;height:20px}
.art-head h1{font-size:clamp(31px,4.8vw,56px);line-height:1.02;letter-spacing:-.03em;margin-top:18px;max-width:22ch}
.lead{font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);line-height:1.42;color:var(--ink-2);margin-top:20px;max-width:52ch}
.art-body{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gut)}
.art-body>p{font-size:18px;line-height:1.74;color:#DED4C2;margin-top:22px}
.art-body>h2{font-size:clamp(23px,2.6vw,30px);font-weight:600;margin-top:44px;padding-top:18px;border-top:1px solid var(--rule)}
.art-body>h3{font-size:20px;font-weight:600;margin-top:32px}
.art-body>figure{margin-block:36px}
.art-body>.fig-offset{margin-block:36px}
.art-wide{max-width:1080px;margin-inline:auto;padding-inline:var(--gut)}
.bleed{margin-block:clamp(30px,4vw,46px)}

.pullquote{margin:38px 0;border-left:3px solid var(--accent-deep);padding:2px 0 2px 24px}
.pullquote p{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.3vw,27px);line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.blockquote{margin:34px 0;padding-left:24px;border-left:1px solid var(--quiet)}
.blockquote p{font-family:var(--serif);font-size:19px;line-height:1.45}
.blockquote cite{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--quiet);margin-top:10px}
.callout{margin:34px 0;background:var(--ground-2);border-top:2px solid var(--accent-deep);padding:20px 22px}
.callout p{font-size:16.5px;line-height:1.6}
.note{margin:26px 0;font-size:15px;line-height:1.62;color:var(--quiet);padding-left:16px;border-left:1px solid var(--rule)}
.art-body ul.body-list{margin:22px 0;display:flex;flex-direction:column;gap:10px}
.art-body ul.body-list li{position:relative;padding-left:20px;font-size:17px;line-height:1.6;color:#DED4C2}
.art-body ul.body-list li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--accent-deep)}

/* notes-for-design material — full-width interruptions */
.field{padding-block:clamp(26px,3.6vw,38px)}
.field .band-head h2{font-size:clamp(19px,2.2vw,24px)}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px 34px;counter-reset:fn}
.field-grid li{counter-increment:fn;border-top:1px solid rgba(255,255,255,.26);padding-top:12px;font-size:15.5px;line-height:1.55}
.field-grid li::before{content:counter(fn,decimal-leading-zero);display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;opacity:.7;margin-bottom:7px}
.field-grid b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.25;margin-bottom:5px;color:#FFF6F1}
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 30px}
.timeline li{border-top:2px solid currentColor;padding-top:12px}
.t-when{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.78;margin-bottom:7px}
.t-what{display:block;font-size:15.5px;line-height:1.5}
.datatable{width:100%;border-collapse:collapse;font-size:15.5px}
.datatable th,.datatable td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.datatable th{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--quiet);font-weight:400}
.datatable td:first-child{font-family:var(--serif);font-weight:600;width:34%}
.band-madder .datatable th,.band-verdigris .datatable th{color:inherit;opacity:.72}
.band-madder .datatable th,.band-madder .datatable td,
.band-verdigris .datatable th,.band-verdigris .datatable td{border-color:rgba(255,255,255,.24)}
.versus{width:100%;border-collapse:collapse;font-size:15.5px}
.versus th,.versus td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.versus thead th{font-family:var(--serif);font-size:18px;color:var(--ink);border-bottom:2px solid var(--accent-deep)}
.versus tbody th{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--quiet);font-weight:400;width:22%}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px 28px}
.statblock{border-top:2px solid var(--accent-deep);padding-top:12px}
.stat-num{display:block;font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1;letter-spacing:-.02em}
.stat-label{display:block;font-size:14px;line-height:1.5;color:var(--quiet);margin-top:9px}

/* related / further / lists */
.related{border-top:1px solid var(--rule);margin-top:44px;padding-top:20px}
.related-links{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.related-links a{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;color:var(--ink-2)}
.related-links svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--accent)}
.related-links a:hover{color:var(--accent);text-decoration:none}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:16px}
.further-grid a{border-top:1px solid var(--rule);padding-top:12px;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.25;color:var(--ink)}
.further-grid a:hover{color:var(--accent);text-decoration:none}
.cat-list{display:flex;flex-direction:column}
.cat-list li{border-bottom:1px solid var(--rule-2)}
.cat-list>li>a{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) 130px;gap:10px 26px;align-items:baseline;padding:19px 0;color:var(--ink)}
.cat-list>li>a:hover{text-decoration:none;color:var(--accent)}
.cat-list h3{font-size:clamp(19px,2vw,23px);font-weight:600;line-height:1.2}
.cat-list p{font-size:15px;line-height:1.55;color:var(--quiet)}
.cat-list .m{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);text-align:right}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.gallery figure .shot{aspect-ratio:8/5;overflow:hidden;background:var(--ground-3)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{padding-top:10px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* cards for people / orgs */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.profile-card{background:var(--ground-2);border:1px solid var(--rule);padding:20px;display:flex;flex-direction:column;gap:10px}
.profile-card .p-photo{width:84px;height:84px;object-fit:cover;border-radius:50%}
.profile-card h3{font-size:20px;font-weight:600}
.profile-card .p-role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.profile-card p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.profile-card .p-links{font-size:14.5px}
.profile-card.no-photo{border-left:3px solid var(--accent-deep)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.org-card{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--ground-2);border:1px solid var(--rule);color:var(--ink)}
.org-card:hover{text-decoration:none;border-color:var(--accent-deep)}
.org-logo{height:34px;width:100%;object-fit:contain;object-position:left center;background:#0D0A08;padding:5px 8px}
.org-name{font-family:var(--serif);font-size:17px;font-weight:600}
.org-host{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--quiet)}
.org-card.no-logo{border-left:3px solid var(--accent-deep)}
.entity-ref{border-bottom:1px solid var(--accent-deep)}
.entity-ref:hover{text-decoration:none}

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

/* ── footer ───────────────────────────────────────────────── */
.sitefoot{background:#0D0A08;margin-top:0;padding-block:32px 30px;border-top:1px solid var(--rule-2)}
.sitefoot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
.sitefoot h4{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet);font-weight:400;margin-bottom:12px}
.sitefoot b{font-family:var(--serif);font-size:19px}
.sitefoot p{font-size:14.5px;line-height:1.6;color:var(--quiet);margin-top:10px;max-width:40ch}
.sitefoot ul{display:flex;flex-direction:column;gap:9px}
.sitefoot ul a{font-size:14.5px;color:var(--ink-2)}
.sitefoot ul a:hover{color:var(--accent);text-decoration:none}
.footline{border-top:1px solid var(--rule-2);margin-top:28px;padding-top:16px;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}
.footline p{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6E6558;margin:0}

/* ── narrow ───────────────────────────────────────────────── */
@media (max-width:1000px){
  .lead-body{grid-template-columns:1fr}
  .stack a{grid-template-columns:44px 1fr;grid-template-areas:"n name" ". what" ". cnt"}
  .stack .n{grid-area:n}.stack .name{grid-area:name}.stack .what{grid-area:what}
  .stack .cnt{grid-area:cnt;text-align:left;margin-top:6px}
  .cat-list>li>a{grid-template-columns:1fr;gap:8px}
  .cat-list .m{text-align:left}
  .sitefoot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  body{font-size:16.5px}
  .fig-plate figcaption{flex-direction:column;gap:12px}
  .fig-plate .credit{width:auto}
  .fig-offset{flex-direction:column}
  .fig-offset .shot{width:100%}
  .art-body>p{font-size:17.5px}
  .sponsor{width:100%}
  .sitefoot .cols{grid-template-columns:1fr}
  .sitenav ul{gap:2px 18px}
  .sitenav a{font-size:12px}
  .card h3{min-height:0}
}
@media print{
  body{background:#fff;color:#000}
  .sitenav,.supporters,.topline{display:none}
}

/* ── inline-svg charts ─────────────────────────────────────── */
.chart{margin:34px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart .bar-fill{fill:var(--accent-deep);stroke:none}
.chart .bar-fill.alt{fill:var(--verdigris)}
.chart .lbl{fill:var(--ink-2);stroke:none;font-family:var(--sans);font-size:11px}
.chart .val{fill:var(--ink);stroke:none;font-family:var(--mono);font-size:11px}
.chart .line-path{stroke:var(--accent);stroke-width:2;fill:none}
.chart .dot{fill:var(--accent);stroke:none}
.chart .ring{fill:none;stroke-width:18}
.chart figcaption{margin-top:14px;font-size:15px;line-height:1.55;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:11px}
.chart figcaption .credit{margin-top:6px}
.article-figure{margin:34px 0}
.article-figure img{width:100%;aspect-ratio:8/5;object-fit:cover;border-left:3px solid var(--accent-deep)}
.article-figure figcaption{padding-top:12px;border-top:1px solid var(--rule);margin-top:12px}
.sg-block{padding-block:34px;border-bottom:1px solid var(--rule-2)}
.sg-block>h2{font-size:15px;font-family:var(--mono);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.sg-narrow{max-width:var(--measure)}

/* fixes */
.card h3 svg{width:22px;height:22px;flex:none}
.sitenav ul{gap:4px 22px}
@media (min-width:1180px){.sitenav .bench{margin-left:auto}}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sponsor-run{gap:14px}

.art-wide{max-width:920px}

.sponsor-name{min-height:2.5em}
@media (max-width:700px){.sponsor{min-height:0}.sponsor-name{min-height:0}}

/* supporters — uniform tiles, full rows at every width */
.sponsor-run{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:stretch;gap:14px}
.sponsor-run.feat-run{grid-template-columns:repeat(4,minmax(0,1fr))}
.sponsor{width:auto;min-height:206px}
@media (max-width:940px){.sponsor-run.feat-run{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.sponsor-run,.sponsor-run.feat-run{grid-template-columns:1fr}.sponsor{min-height:0}}

/* section head band — tighter */
.band.band-madder>.wrap>div>h1{max-width:20ch}
.cat-head{padding-block:clamp(22px,2.6vw,30px)}

/* every inline icon gets a size — kicker was unmatched */
.kicker svg,.strap svg,.field .kicker svg{width:17px;height:17px;flex:none}
.cat-head .kicker svg{width:19px;height:19px}

/* blurb space reserved only in the group that carries copy */
.sponsor{min-height:0;max-width:300px}
.feat-run .sponsor{min-height:206px}

/* SUPPORTERS — final: constant tile width sets the track, tiles size to content, top-aligned.
   No min-height (nothing to reserve), no max-width fighting a 1fr track. */
.sponsor-run,.sponsor-run.feat-run{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,268px));
  justify-content:start;
  align-items:start;
  gap:14px;
}
.sponsor{width:auto;max-width:none;min-height:0}
.feat-run .sponsor{min-height:0}
@media (max-width:940px){.sponsor-run,.sponsor-run.feat-run{grid-template-columns:repeat(auto-fit,minmax(240px,268px))}}
@media (max-width:620px){.sponsor-run,.sponsor-run.feat-run{grid-template-columns:minmax(0,1fr)}}

/* the prominent group is always a filled row: 2 up, or 4 up when four fit */
.sponsor-run.feat-run{grid-template-columns:repeat(2,268px)}
@media (min-width:1180px){.sponsor-run.feat-run{grid-template-columns:repeat(4,268px)}}
@media (max-width:620px){.sponsor-run.feat-run{grid-template-columns:minmax(0,1fr)}}

/* SUPPORTERS — column count derives from the CONTAINER, never the viewport, and every
   track can shrink (minmax(0,268px)) so no count can ever overflow its box.
   Both groups share the same counts (2 or 4) so 4 and 8 slots always fill their rows. */
.supporters .wrap{container-type:inline-size}
.sponsor-run,.sponsor-run.feat-run{
  display:grid;grid-template-columns:repeat(2,minmax(0,268px));
  justify-content:start;align-items:start;gap:14px;
}
@container (max-width:560px){
  .sponsor-run,.sponsor-run.feat-run{grid-template-columns:minmax(0,1fr)}
}
@container (min-width:1114px){
  .sponsor-run,.sponsor-run.feat-run{grid-template-columns:repeat(4,minmax(0,268px))}
}

/* fine print gets a notch on small screens */
@media (max-width:700px){
  .cat-list .m{font-size:12.5px}
  .credit{font-size:12.5px}
  .footline p{font-size:11.5px}
  .strap{font-size:12.5px}
  .mono,.kicker{font-size:12.5px}
  .stack .cnt,.card .meta{font-size:13.5px}
}

/* sp-mark-align: marks centre in their box — only object-position is overridden */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto;margin-right:auto}

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

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 685px at 390, 5% 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 685 -> 485px (29% 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(9px,2.08vw,30px)!important;row-gap:9px!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,
   2213px at 390, 15% of the whole page. Two columns bring it to
   1170px (47% shorter). Checked before writing: no new overflow, smallest mark still
   134px wide, longest blurb 3 lines, tile heights 165-205px.
   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.feat-run, .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.feat-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-run.feat-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-run.feat-run > * *{min-width:0!important;max-width:100%}
    .sponsor-run.feat-run img,.sponsor-run.feat-run svg{max-width:100%;height:auto}
  .sponsor-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!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.feat-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 595px (72 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .art-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main#main div.art-body{--measure:min(92.010ch, 100%)!important}
}
@media (min-width:1600px){
  main#main div.art-body{--measure:min(clamp(92.010ch, 66.458vw, calc(92.010ch * 1.2)), 100%)!important}
  main#main div.art-body > :is(p:not([class])){font-size:clamp(18px,1.2500vw,21.6px)!important}
}
/* op-article-width:end */

/* op-article-seam: text ran into the band that follows it (0-7px) — operator: "end of paragraph nearly touches intersection. Padding is missing." The section now keeps Design's own gap before the band: div.art-body → section.band.field.band-madder: 48px (the gap after the band). */
  main > div.art-body:has(+ section.band.field.band-madder){padding-bottom:26px!important}
@media (min-width:1024px){
  main > div.art-body:has(+ section.band.field.band-madder){padding-bottom:48px!important}
}
/* op-article-seam:end */

/* op-hover-pad */
.stack a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
@media (min-width:660px) and (max-width:1279px){.sponsor-run.sponsor-run:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(268px,calc(50% - 7px)),1fr))!important;justify-content:stretch!important}.sponsor-run.sponsor-run > [data-partner]{width:auto!important;max-width:none!important}}