/* wolfgangmueller.net — panel-led. Every band is a front panel. */

:root{
  --shell:#1C1D1A;
  --panel:#C7C4BA;         /* anodised light */
  --panel-dark:#33352F;    /* anodised dark */
  --panel-deep:#26281F;
  --paper:#DEDCD3;         /* reading ground */
  --ink:#17180F;
  --ink-soft:#3B3C33;
  --ink-invert:#EFEDE6;
  --ink-invert-soft:#AFB3A5;
  --legend:#E0A32E;        /* legend amber */
  --accent:#8A3A12;        /* oxide, on light grounds */
  --seam-hi:rgba(255,255,255,.42);
  --seam-lo:rgba(0,0,0,.45);
  --gap:10px;

  --display:"Saira Condensed",'Arial Narrow',sans-serif;
  --text:"Spline Sans",system-ui,sans-serif;

  --measure:68ch;
  --pad:clamp(18px,3.4vw,46px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--shell);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
p{text-wrap:pretty;margin:0 0 1.1em}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.94;margin:0;text-wrap:balance}
ul,ol{margin:0;padding:0}
figure{margin:0}
table{border-collapse:collapse;width:100%}

/* ---------- shell + panels ---------- */
.shell{max-width:1560px;margin:0 auto;padding:var(--gap);display:flex;flex-direction:column;gap:var(--gap)}
.panel{
  position:relative;
  background:var(--panel);
  border-top:1px solid var(--seam-hi);
  border-bottom:1px solid var(--seam-lo);
  padding:calc(var(--pad) * .9) var(--pad);
}
.panel--dark{background:var(--panel-dark);color:var(--ink-invert);border-top-color:rgba(255,255,255,.16)}
.panel--deep{background:var(--panel-deep);color:var(--ink-invert);border:1px solid #4A4D43}
.panel--paper{background:var(--paper);border-top-color:#EFEEE7}
.panel--flush{padding:0;border:0}
.panel--screws::before,.panel--screws::after{
  content:"";position:absolute;top:11px;width:9px;height:9px;border-radius:50%;
  background:#8D8B81;box-shadow:inset 0 1px 2px rgba(0,0,0,.65)
}
.panel--screws::before{left:13px}
.panel--screws::after{right:13px}
.panel--dark.panel--screws::before,.panel--dark.panel--screws::after{background:#191A14;box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.09)}
.row{display:flex;flex-wrap:wrap;gap:var(--gap)}
.row>*{flex:1 1 320px;min-width:0}

/* ---------- legends (the screen-printed labels) ---------- */
.legend{
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin:0 0 10px;display:block
}
.panel--dark .legend,.panel--deep .legend{color:var(--legend)}
.legend--mute{color:#7A776C}
.panel--dark .legend--mute{color:#8B8F81}

/* ---------- masthead + jack strip nav ---------- */
.masthead{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-end;justify-content:space-between}
.wordmark{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.6vw,52px);line-height:.82;letter-spacing:.03em;text-transform:none;color:var(--ink-invert)}
.wordmark a{color:inherit}
.wordmark a:hover{color:var(--legend);text-decoration:none}
.strapline{font-size:14px;color:var(--ink-invert-soft);margin:6px 0 0}
.jacks{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none}
.jacks a{display:flex;flex-direction:column;align-items:center;gap:7px;color:#C6C9BC}
.jacks a:hover{color:var(--legend);text-decoration:none}
.jack{width:20px;height:20px;border-radius:50%;background:#15160F;border:3px solid #6C7062;box-shadow:inset 0 2px 4px rgba(0,0,0,.9)}
.jacks a:hover .jack,.jacks a[aria-current="page"] .jack{background:var(--legend);border-color:#8A7434;box-shadow:0 0 12px rgba(224,163,46,.55)}
.jacks a[aria-current="page"]{color:var(--legend)}
.jacks span:last-child{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase}

/* ---------- hero / lead ---------- */
.lead-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:var(--pad);align-items:end}
.h-xl{font-size:clamp(44px,7.4vw,104px)}
.h-lg{font-size:clamp(34px,4.6vw,64px)}
.h-md{font-size:clamp(26px,2.6vw,40px)}
.h-sm{font-size:clamp(21px,1.7vw,27px)}
.lead{font-size:clamp(18px,1.5vw,22px);line-height:1.5;font-weight:500;color:var(--ink);margin:0 0 1em;max-width:60ch}
.panel--dark .lead{color:var(--ink-invert)}
.bleed{position:relative;background:#101109;overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover}
.bleed--tall img{aspect-ratio:16/9}
.bleed--short img{aspect-ratio:24/7}

/* ---------- meta / byline ---------- */
.meta{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#6D6B60;margin:0}
.panel--dark .meta,.panel--deep .meta{color:#8B8F81}
.meta a{color:inherit}

/* ---------- limit plate (the site's signature) ---------- */
.limit{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap)}
.limit>div{background:var(--panel-deep);border:1px solid #4A4D43;padding:20px 22px 22px}
.limit dt{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--legend);margin-bottom:9px}
.limit dd{margin:0;font-size:16.5px;line-height:1.5;color:var(--ink-invert)}
.limit .num{font-family:var(--display);font-weight:700;font-size:34px;line-height:1;color:var(--ink-invert);display:block;margin-bottom:4px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--gap)}
.card{display:flex;flex-direction:column;background:var(--panel-dark);border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid var(--seam-lo);color:var(--ink-invert);height:100%}
.card:hover{background:#3C3F37;text-decoration:none}
.card__img{aspect-ratio:16/10;background:#101109;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;gap:9px}
.card h3{font-size:26px;color:var(--ink-invert);min-height:2.9em;display:flex;align-items:flex-start}
.card:hover h3{color:var(--legend)}
.card p{font-size:15.5px;line-height:1.5;color:var(--ink-invert-soft);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin-top:auto;padding-top:12px;font-size:13.5px;letter-spacing:.14em}
.card--light{background:var(--panel);color:var(--ink)}
.card--light:hover{background:#D2CFC5}
.card--light h3{color:var(--ink)}
.card--light:hover h3{color:var(--accent)}
.card--light p{color:var(--ink-soft)}
.card--light .meta{color:#6D6B60}

/* ---------- reading column ---------- */
.read{max-width:var(--measure);margin-inline:auto;padding-inline:clamp(0px,1vw,14px)}
.read p{font-size:19px;line-height:1.72}
.read h2{clear:both;font-size:clamp(26px,2.5vw,36px);margin:1.7em 0 .55em;letter-spacing:.015em}
.read h2:first-child{margin-top:0}
.read h3{font-size:22px;margin:1.5em 0 .4em}
.read>*:last-child{margin-bottom:0}
.read a{border-bottom:1px solid rgba(138,58,18,.4)}
.read a:hover{border-bottom-color:currentColor}

/* ---------- editorial components ---------- */
.pullquote{margin:0;background:#17180F;color:var(--ink-invert);padding:clamp(22px,3vw,38px) clamp(22px,3.4vw,44px)}
.pullquote p{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,46px);line-height:1.04;text-transform:uppercase;margin:0 auto;max-width:34ch}
.blockquote{margin:0;background:var(--panel);border-left:5px solid var(--accent);padding:22px 26px}
.blockquote p{font-size:19px;line-height:1.6;margin:0 0 .6em}
.blockquote cite{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#6D6B60;font-style:normal}
.callout{background:var(--panel);border:1px solid #A9A79D;padding:24px 26px}
.callout p{font-size:18px;line-height:1.6;margin:0}
.callout p+p{margin-top:.8em}
.note{font-size:16px;line-height:1.6;color:#5C5A50;border-top:2px solid #B4B2A8;border-bottom:2px solid #B4B2A8;padding:12px 0;margin:1.4em 0}

/* data */
.versus,.datatable{font-size:16.5px;background:var(--panel);border:1px solid #A9A79D}
.versus caption,.datatable caption{caption-side:top;text-align:left;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);padding:0 0 10px}
.versus th,.versus td,.datatable th,.datatable td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(0,0,0,.14)}
.versus th,.datatable th{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.08)}
.versus tbody th{background:transparent;width:34%}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap)}
.statblock{background:var(--panel-deep);border:1px solid #4A4D43;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:700;font-size:clamp(38px,4vw,58px);line-height:.92;color:var(--legend)}
.stat-label{font-size:15px;line-height:1.45;color:var(--ink-invert-soft)}
.timeline{list-style:none;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:minmax(150px,.34fr) 1fr;gap:8px 26px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
.timeline li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.t-when{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--legend);line-height:1.15}
.t-what{font-size:16.5px;line-height:1.55;color:var(--ink-invert)}
.fields{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
.fields li{background:var(--panel-deep);border:1px solid #4A4D43;padding:18px 20px;font-size:16.5px;line-height:1.55;color:var(--ink-invert)}
.fields b{display:block;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--legend);margin-bottom:7px}

/* charts */
.chart{background:var(--panel);border:1px solid #A9A79D;padding:22px 24px}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-size:15.5px;line-height:1.5;color:#5C5A50;margin-top:14px}
.chart text{font-family:var(--display);font-weight:600;letter-spacing:.06em}

/* figures */
.article-figure{background:var(--panel-dark)}
.article-figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-figure figcaption{padding:14px 18px 16px;font-size:15.5px;line-height:1.5;color:var(--ink-invert-soft)}
.article-figure figcaption b{color:var(--ink-invert);font-weight:500}
.figure--extend{margin:2em auto;width:auto}
.figure--extend img{aspect-ratio:3/2}
@media (min-width:961px){.figure--extend{margin-inline:calc(-1 * clamp(0px,6vw,170px))}}
.figure--column{margin:2em auto}
.figure--wide img{aspect-ratio:24/7}
.credit{display:block;margin-top:6px;font-size:13px;letter-spacing:.04em;color:#7C8073}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap)}
.gallery figure{background:var(--panel-dark)}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover}
.gallery figcaption{padding:12px 14px;font-size:14.5px;line-height:1.45;color:var(--ink-invert-soft)}

/* map */
.map-figure{background:var(--panel-deep);border:1px solid #4A4D43;padding:16px}
.map-slot{background:#26281F;min-height:220px}
.map-figure svg{width:100%;height:auto;display:block}
.map-figure figcaption{padding:14px 6px 4px;font-size:15.5px;line-height:1.5;color:var(--ink-invert-soft)}
.pinlist{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:14px}
.pinlist li{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-invert);background:#33352F;border:1px solid #4A4D43;padding:7px 12px}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
.profile-card{background:var(--panel);border:1px solid #A9A79D;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:6px}
.profile-card h3{font-size:24px}
.p-role{font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{font-size:16px;line-height:1.55;margin:0}
.p-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:auto!important;padding-top:8px}
.p-attr{font-size:14px;color:#6D6B60}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap)}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--panel-deep);border:1px solid #4A4D43;padding:16px 18px;color:var(--ink-invert)}
.org-card:hover{background:#2E3128;text-decoration:none}
.org-logo{max-height:34px;width:auto;object-fit:contain;margin-bottom:6px}
.org-name{font-family:var(--display);font-weight:700;font-size:21px;text-transform:uppercase}
.org-host{font-size:14px;color:var(--ink-invert-soft);word-break:break-word}
.entity-ref{font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.94em}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap)}
.further-grid a{background:var(--panel);border:1px solid #A9A79D;padding:18px 20px;font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase;line-height:1.06;color:var(--ink)}
.further-grid a:hover{background:#D2CFC5;color:var(--accent);text-decoration:none}
.related-links,.cat-list{list-style:none}
.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap)}
.related-links a{display:flex;flex-direction:column;gap:7px;height:100%;background:var(--panel-deep);border:1px solid #4A4D43;padding:18px 20px;color:var(--ink-invert)}
.related-links a:hover{background:#2E3128;text-decoration:none}
.related-links a:hover strong{color:var(--legend)}
.related-links strong{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.06;text-transform:uppercase}
.related-links span{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#8B8F81}
.cat-list{display:flex;flex-direction:column}
.cat-list li{border-top:1px solid rgba(0,0,0,.2)}
.cat-list li:last-child{border-bottom:1px solid rgba(0,0,0,.2)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;padding:18px 4px;color:var(--ink)}
.cat-list a:hover{background:rgba(255,255,255,.28);text-decoration:none;color:var(--accent)}
.cat-list strong{font-family:var(--display);font-weight:700;font-size:clamp(23px,2.2vw,30px);line-height:1.04;text-transform:uppercase;display:block}
.cat-list em{display:block;grid-column:1;font-style:normal;font-size:16.5px;line-height:1.5;color:var(--ink-soft);max-width:70ch}
.cat-list .meta{grid-column:2;grid-row:1;font-size:13.5px;letter-spacing:.14em;text-align:right}

/* collapsible long list */
.expander{border:0;padding:0;margin:0}
.expander>summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);padding:14px 0 0}
.expander>summary::-webkit-details-marker{display:none}
.expander>summary::after{content:" +"}
.expander[open]>summary::after{content:" –"}

/* ---------- supporters ---------- */
.supporters{display:flex;flex-direction:column;gap:var(--gap)}
.sponsor-tier{display:flex;flex-wrap:wrap;gap:var(--gap)}
.sponsor{
  flex:1 1 250px;max-width:340px;height:78px;
  display:flex;align-items:center;justify-content:center;
  background:#15160F;border:1px solid #3E413A;padding:12px 20px;
}
.sponsor:hover{border-color:var(--legend)}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-blurb{display:block;max-width:70ch;font-size:16.5px;line-height:1.55;color:var(--ink-invert-soft);margin:0 0 4px}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.foot a{color:#C6C9BC;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.foot a:hover{color:var(--legend)}
.foot small{display:block;font-size:14px;color:#8B8F81;line-height:1.5;max-width:46ch}

/* ---------- utility ---------- */
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.stack--tight{gap:calc(var(--gap) * .8)}
.split{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:var(--pad)}
.split--wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.clear::after{content:"";display:block;clear:both}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:9;background:var(--legend);color:#17180F;padding:10px 14px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .lead-grid,.split,.split--wide{grid-template-columns:minmax(0,1fr)}
  .lead-grid{align-items:start}
}
@media (max-width:720px){
  :root{--gap:8px}
  body{font-size:16.5px}
  .read p{font-size:18px}
  .figure--extend img,.figure--column img{aspect-ratio:4/3}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
  .cat-list a{grid-template-columns:minmax(0,1fr)}
  .cat-list .meta{grid-column:1;grid-row:auto;text-align:left}
  .card h3{min-height:0}
  .sponsor{flex:1 1 100%;max-width:none}
  .panel--screws::before,.panel--screws::after{display:none}
  .jacks{gap:10px 18px}
  .jacks a{flex-direction:row;gap:9px}
}
@media print{
  body{background:#fff}
  .shell{padding:0}
  .panel{border:0}
}

/* supporters: two tiers of different density, identical tile geometry */
.sponsor-tier--roll{gap:5px}
.sponsor.feat{border-color:#55584E}
.sponsor.feat:hover{border-color:var(--legend)}

.read hr{border:0;border-top:2px solid #B4B2A8;margin:2.2em 0;height:0}

/* ---------- article faceplate: the title silk-screened over the lead frame ---------- */
.faceplate{position:relative;background:#101109;overflow:hidden}
.faceplate>img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:brightness(.78) saturate(.92)}
.faceplate__plate{position:absolute;inset:auto 0 0 0;padding:clamp(22px,3.4vw,52px);
  background:linear-gradient(to top,rgba(10,11,7,.97) 0%,rgba(10,11,7,.94) 46%,rgba(10,11,7,.82) 72%,rgba(10,11,7,.45) 90%,rgba(10,11,7,0) 100%);color:var(--ink-invert)}
.faceplate h1{color:var(--ink-invert);max-width:24ch}
.faceplate .lead{color:#D8D6CB;max-width:56ch;margin:.5em 0 .9em}
.faceplate .legend{color:#F2B547;text-shadow:0 1px 12px rgba(10,11,7,.9)}
.faceplate h1,.faceplate .lead,.faceplate .meta{text-shadow:0 2px 16px rgba(10,11,7,.75)}
.faceplate .meta{color:#9FA396}
.faceplate__credit{position:absolute;top:0;right:0;padding:10px 14px;background:rgba(10,11,7,.6);
  font-size:12.5px;letter-spacing:.04em;color:#C6C9BC}
@media (max-width:720px){
  .faceplate>img{aspect-ratio:4/3}
  .faceplate__plate{position:static;background:#1C1D1A}
  .faceplate__credit{position:static;display:block;text-align:right;background:#101109}
}

/* ---------- section heading as a legended control field ---------- */
.field{clear:both;display:flex;align-items:center;gap:16px;margin:2.6em 0 .55em;border-top:2px solid var(--ink);padding-top:13px}
.field__no{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.steps{display:flex;gap:4px;margin-left:auto;flex-shrink:0}
.steps i{width:6px;height:15px;background:#B4B2A8;border-radius:1px}
.steps i.on{background:var(--accent);box-shadow:0 0 0 2px rgba(138,58,18,.18)}
.read .field+h2{margin-top:0}
.read>*:first-child.field{margin-top:0}
@media (max-width:560px){.steps{display:none}}

/* ---------- plate numbers on figures ---------- */
.article-figure .frame,.gallery .frame{display:block;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--legend);margin-bottom:7px}

/* ---------- opening paragraph ---------- */
.read--open p:first-of-type{font-size:21.5px;line-height:1.62}
@media (max-width:720px){.read--open p:first-of-type{font-size:19px}}

/* ---------- mobile hardening ---------- */
@media (max-width:900px){
  .limit{grid-template-columns:minmax(0,1fr)}
  .lead-grid{gap:calc(var(--pad) * .7)}
}
@media (max-width:720px){
  .faceplate .lead{max-width:none}
  .faceplate h1{max-width:none}
  .pullquote{padding:26px 22px}
  .fields,.statrow,.related-links,.further-grid,.org-grid,.profile-grid,.gallery,.cards{grid-template-columns:minmax(0,1fr)}
  .read h2{font-size:clamp(24px,6vw,30px)}
  .read--open p:first-of-type{font-size:18.5px}
  .field{gap:10px}
  .map-figure{padding:10px}
  .pinlist li{font-size:13px;padding:6px 9px}
  .foot{gap:18px}
  .foot small{max-width:none}
}
@media (max-width:560px){
  .versus,.datatable{display:block;width:100%;border:0}
  .versus thead,.datatable thead{display:none}
  .versus tbody,.datatable tbody{display:block}
  .versus tr,.datatable tr{display:block;background:var(--panel);border:1px solid #A9A79D;margin-bottom:8px;padding:6px 0}
  .versus th,.versus td,.datatable th,.datatable td{display:block;width:auto;border:0;padding:7px 14px}
  .versus tbody th,.datatable tbody th{background:transparent;font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .chart{padding:14px}
  .wordmark{font-size:clamp(26px,8vw,34px)}
  .h-xl{font-size:clamp(32px,9vw,46px)}
}

/* 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-tier .feat.sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-tier .feat.sponsor.feat.sponsor img{height:44px!important;display:block!important;width:100%!important}
.sponsor-tier.sponsor-tier--roll .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-tier.sponsor-tier--roll .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1001px at 390, 7% of the whole page. Two columns bring it to
   494px (51% shorter). Checked before writing: no new overflow, smallest mark still
   119px wide, longest blurb 0 lines, tile heights 78-78px.
   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 (.sponsor-tier, .sponsor-tier.sponsor-tier--roll), 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-tier{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .sponsor-tier > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier > * *{min-width:0!important;max-width:100%}
    .sponsor-tier img,.sponsor-tier svg{max-width:100%;height:auto}
  .sponsor-tier.sponsor-tier--roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .sponsor-tier.sponsor-tier--roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier.sponsor-tier--roll > * *{min-width:0!important;max-width:100%}
    .sponsor-tier.sponsor-tier--roll img,.sponsor-tier.sponsor-tier--roll svg{max-width:100%;height:auto}
}

/* op-article-width: the article column was capped at 659px (76 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .read) 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 1440 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1440px){
  article.stack div.read.clear{--measure:min(90.117ch, 100%)!important}
}
@media (min-width:1600px){
  article.stack div.read.clear{--measure:min(clamp(90.117ch, 63.194vw, calc(90.117ch * 1.2)), 100%)!important}
  article.stack div.read.clear > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.card__img > img,
  a.card.card--light > div.card__img > img,
  article.stack > header.faceplate.panel.panel--flush > img,
  div.clear.read > figure.article-figure.figure--extend > img,
  div.clear.read.read--open > figure.article-figure > img,
  div.clear.read.read--open > figure.article-figure.figure--extend > img,
  div.lead-grid > figure.article-figure > img,
  main.stack > section.bleed.bleed--short.panel > img,
  section.panel.panel--flush > figure.article-figure.figure--wide > img){height:auto}
/* op-img-dims:end */