/* ============================================================
   aiu3a.com — Isochron Register
   PALETTE (5 members, each with a job)
     --ground     #FFFFFF  paper       page ground
     --ground-2   #F4F2ED  tint        register / supporters bands
     --ink        #14120F  ironblack   type, rules, dark bands
     --accent     #C0820E  brass       saturated accent, hue ~44
     --secondary  #183F8F  prussian    saturated secondary, hue ~222
     --quiet      #8A8275  ash         near-neutral for meta and rules
   The two saturated members (brass / prussian) sit ~178 degrees
   apart in hue and both carry real area, not just rules.
   ============================================================ */

:root{
  --ground:#FFFFFF;
  --ground-2:#F4F2ED;
  --ink:#14120F;
  --ink-soft:#3A362E;
  --accent:#C0820E;
  --accent-deep:#8F5F06;
  --secondary:#183F8F;
  --quiet:#5C584F;
  --rule:#E3E0D8;
  --rule-strong:#CBC7BC;

  --display:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --measure:70ch;
  --page:1240px;
  --gutter:36px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--display);font-size:18px;line-height:1.6;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:var(--secondary);text-decoration:none}
a:hover{color:var(--accent-deep)}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
figure{margin:0}
table{border-collapse:collapse;width:100%}
svg{flex:none}

.wrap{max-width:var(--page);margin:0 auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.kicker{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:-.02em;text-transform:uppercase;color:var(--accent-deep);display:flex;align-items:center;gap:8px}
.meta{font-family:var(--mono);font-size:11.5px;letter-spacing:-.02em;text-transform:uppercase;color:var(--quiet)}
.band-label{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:2px solid var(--ink);margin-bottom:22px;flex-wrap:wrap}
.band-label h2{font-size:clamp(22px,2.4vw,30px)}
.band-label .meta{margin-left:auto}

/* ---------- masthead ---------- */
.masthead{background:var(--ground);border-bottom:2px solid var(--ink);position:relative;z-index:5}
.masthead-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px 18px;padding-block:14px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);grid-column:1}
.brand:hover{color:var(--ink)}
.brand-mark{display:flex;align-items:center;color:var(--secondary);margin-top:2px}
.brand-name{font-size:24px;line-height:1;font-weight:700;letter-spacing:-.03em}
.brand-tag{grid-column:3;justify-self:end;font-family:var(--mono);font-size:11px;letter-spacing:-.02em;text-transform:uppercase;color:var(--quiet);white-space:nowrap}
.nav{grid-column:2;justify-self:center;display:flex;align-items:center;gap:16px;flex-wrap:nowrap;justify-content:center}
.nav a{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--ink);font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:-.05em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent}
.nav a svg{color:var(--secondary)}
.nav a:hover{color:var(--secondary);border-bottom-color:var(--accent)}
.nav a[aria-current="page"]{color:var(--secondary);border-bottom-color:var(--accent)}
.nav .nav-browse{color:var(--secondary)}

/* ---------- lead feature ---------- */
.lead-feature{border-bottom:1px solid var(--rule);padding-block:34px 40px}
.lead-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.lead-title{font-size:clamp(34px,4.4vw,58px);line-height:1}
.lead-dek{font-size:19px;line-height:1.5;color:var(--ink-soft);margin-top:16px;max-width:56ch}
.lead-figure{position:relative}
.lead-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:contrast(1.07) saturate(1.06);outline:1px solid var(--ink);outline-offset:-1px;border-bottom:3px solid var(--accent)}
.lead-figure figcaption{font-size:15px;line-height:1.45;color:var(--quiet);padding-top:8px}
.readon{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:4px}
.readon:hover{color:var(--secondary)}

/* ---------- the register (signature) ---------- */
/* band ground: paper tint, so the table reads as a filed document, not more page */
.register{padding-block:40px 44px;background:var(--ground-2);border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
.register-scroll{overflow-x:auto}
table.register-table{min-width:1010px;font-size:16px;width:100%}
table.register-table th{text-align:left;font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:0 14px 9px 0;border-bottom:1.5px solid var(--ink);vertical-align:bottom}
table.register-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.register-table tr:nth-child(even) td{background:var(--ground)}
table.register-table th:first-child,table.register-table td:first-child{padding-left:18px}
table.register-table th:last-child,table.register-table td:last-child{padding-right:18px}
table.register-table .r-no{font-family:var(--mono);font-size:12px;color:var(--accent-deep);width:62px}
table.register-table .r-name{font-size:19px;font-weight:700;letter-spacing:-.02em;width:190px}
table.register-table .r-name a{color:var(--ink)}
table.register-table .r-name a:hover{color:var(--secondary)}
table.register-table .r-q{font-family:var(--mono);font-size:12.5px;letter-spacing:-.04em;color:var(--secondary);white-space:nowrap;text-align:right}
.register-note{font-size:15px;color:var(--ink-soft);padding-top:14px;max-width:80ch}

/* ---------- quantities band (prussian area) ---------- */
.quantities{background:var(--secondary);color:var(--ground)}
.quantities .wrap{padding-block:38px 42px}
.quantities h2{color:var(--ground);font-size:clamp(22px,2.4vw,30px)}
.quantities .band-label{border-bottom-color:rgba(255,255,255,.5)}
.quantities .band-label .meta{color:rgba(255,255,255,.72)}
.quantities .kicker{color:rgba(255,255,255,.8)}
.q-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.32)}
.q-cell{background:var(--secondary);padding:16px 18px 18px}
.q-num{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:-.06em;line-height:1.1}
.q-lab{font-size:15px;line-height:1.4;color:rgba(255,255,255,.86);padding-top:7px}

/* ---------- sections hub — ink ground, so it reads as an index rather than more paper ---------- */
.sections{padding-block:42px 46px;background:var(--ink);color:var(--ground)}
.sections .band-label{border-bottom-color:rgba(255,255,255,.32)}
.sections .band-label h2{color:var(--ground)}
.sections .band-label .meta{color:rgba(255,255,255,.66)}
.sections .band-label a{color:rgba(255,255,255,.66)}
.sections .band-label a:hover{color:var(--accent)}
.sec-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.sec-block{display:flex;flex-direction:column;border-top:2px solid rgba(255,255,255,.5);padding-top:14px}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sec-head svg{color:var(--accent);width:40px;height:40px;margin-top:0}
.sec-block h3{font-size:21px;padding-top:2px;color:var(--ground)}
.sec-block h3 a{color:var(--ground)}
.sec-block h3 a:hover{color:var(--accent)}
.sec-no{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:-.02em}
.sec-blurb{font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.7);padding:8px 0 12px;min-height:calc(2.9em + 20px)}
.sec-list{list-style:none;display:flex;flex-direction:column;gap:0}
.sec-list li{border-top:1px solid rgba(255,255,255,.22)}
.sec-list a{display:block;padding:9px 0;font-size:15.5px;line-height:1.32;color:rgba(255,255,255,.94)}
.sec-list a:hover{color:var(--accent)}

/* ---------- card feed ---------- */
/* paper ground returns here, between the ink index and the tinted supporters */
.feed{padding-block:42px 46px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.card{display:flex;flex-direction:column;background:var(--ground);border:1px solid var(--rule-strong);height:100%}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.card h3{font-size:20px;min-height:2.2em}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--secondary)}
.card p{font-size:15.5px;color:var(--ink-soft);line-height:1.45}
.card .meta{margin-top:auto;padding-top:6px}
.sup-tier{color:var(--quiet)}

/* ---------- supporters ---------- */
.supporters{border-top:1px solid var(--rule-strong);padding-block:34px 40px;background:var(--ground-2)}
.sup-intro{font-size:16px;color:var(--ink-soft);max-width:70ch;padding-bottom:20px}
.sponsor-run{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-bottom:14px}
.sponsor{display:flex;flex-direction:column;gap:7px;padding:14px 16px 16px;background:var(--ground);border:1px solid var(--rule-strong);color:var(--ink);min-width:0}
.sponsor:hover{border-color:var(--secondary);color:var(--secondary)}
.sponsor-name{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.2;overflow-wrap:break-word}
.sponsor-blurb{font-size:14.5px;line-height:1.4;color:var(--ink-soft);min-width:200px}
.sponsor:hover .sponsor-blurb{color:var(--ink-soft)}
.sponsor.feat{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.sponsor.feat .sponsor-blurb{color:rgba(255,255,255,.78)}
.sponsor.feat:hover{border-color:var(--accent);color:var(--ground)}
.sponsor.feat:hover .sponsor-name{color:var(--accent)}
.sup-tier{font-family:var(--mono);font-size:11.5px;letter-spacing:-.02em;text-transform:uppercase;color:var(--quiet);padding-bottom:9px}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--ground);padding-block:34px 40px;font-size:16px}
.site-foot a{color:var(--ground)}
.site-foot a:hover{color:var(--accent)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.foot-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.03em}
.foot-brand svg{color:var(--accent)}
.foot-col h4{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:-.02em;text-transform:uppercase;color:rgba(255,255,255,.6);padding-bottom:10px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.foot-note{font-size:14.5px;color:rgba(255,255,255,.6);padding-top:26px;max-width:80ch}

/* ---------- article ---------- */
.art-head{border-bottom:1px solid var(--rule);padding-block:30px 26px}
.art-head h1{font-size:clamp(32px,4vw,52px);max-width:26ch}
.art-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:18px}
.art-hero{padding-block:0 0}
.art-hero img{width:100%;max-height:560px;object-fit:cover}
.art-hero figcaption{font-size:15px;line-height:1.45;color:var(--quiet);padding:9px 0 0}
.art-body{padding-block:30px 20px}
.art-body>*{max-width:var(--measure);margin-inline:auto}
.art-body h2{font-size:clamp(23px,2.6vw,30px);padding-top:14px}
.art-body h3{font-size:20px;padding-top:8px}
.art-body p{font-size:19px;line-height:1.66}
.art-body p+p{padding-top:0}
.art-body>*+*{margin-top:22px}
.art-body ul.body-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.art-body ul.body-list li{padding-left:20px;position:relative;font-size:18px}
.art-body ul.body-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1.5px;background:var(--accent)}

.lead{font-size:22px;line-height:1.45;color:var(--ink-soft)}
.note{font-size:16.5px;line-height:1.5;color:var(--ink-soft);border-left:3px solid var(--accent);padding-left:16px}
.pullquote{margin:0;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);padding:18px 0}
.pullquote p{font-size:clamp(22px,2.6vw,28px);line-height:1.28;font-weight:700;letter-spacing:-.024em}
.blockquote{margin:0;border-left:3px solid var(--secondary);padding-left:18px}
.blockquote p{font-size:19px;line-height:1.5}
.blockquote cite{display:block;font-family:var(--mono);font-size:12px;font-style:normal;letter-spacing:-.02em;color:var(--quiet);padding-top:9px}
.callout{background:var(--ground-2);border-top:2px solid var(--ink);padding:18px 20px 20px}
.callout h4{font-size:18px;padding-bottom:8px}
.callout p{font-size:17px;line-height:1.5}
.callout ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.callout li{font-size:17px;line-height:1.45;padding-left:18px;position:relative}
.callout li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:1.5px;background:var(--accent)}

/* figures — three sizes, deliberately different instruments */
.article-figure{margin:0}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption{font-size:15.5px;line-height:1.45;color:var(--quiet);padding-top:9px}
.fig-wide{max-width:none !important;width:100%}
.fig-wide img{aspect-ratio:21/9}
.fig-wide figcaption{max-width:var(--measure);margin-inline:auto}
.fig-col img{aspect-ratio:3/2}
/* inset figure: narrower than the measure, caption beneath — no side void */
.fig-inset{max-width:520px}
.fig-inset img{aspect-ratio:4/3}
.fig-inset figcaption{font-size:15.5px}

/* data components */
.datatable{font-size:16px}
.datatable caption{text-align:left;font-family:var(--mono);font-size:11.5px;letter-spacing:-.02em;text-transform:uppercase;color:var(--quiet);padding-bottom:10px}
.datatable th{text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:0 12px 8px 0;border-bottom:1.5px solid var(--ink)}
.datatable td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.datatable tr:nth-child(even) td{background:var(--ground-2)}
.datatable td:last-child,.datatable th:last-child{padding-right:0}
.datatable .num{font-family:var(--mono);font-size:13px;letter-spacing:-.04em;color:var(--secondary);white-space:nowrap}

.versus{font-size:16.5px}
.versus th{width:50%;text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:0 16px 9px 0;border-bottom:1.5px solid var(--ink)}
.versus td{width:50%;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}
.versus td:last-child,.versus th:last-child{padding-right:0;border-left:1px solid var(--rule);padding-left:16px}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule-strong)}
.statblock{background:var(--ground);padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.06em;color:var(--secondary);line-height:1.05}
.stat-label{font-size:15px;line-height:1.4;color:var(--ink-soft)}

.timeline{list-style:none;counter-reset:tl;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0}
.timeline li{counter-increment:tl;border-top:2px solid var(--ink);padding:14px 18px 16px 0;position:relative}
.timeline li::before{content:counter(tl,decimal-leading-zero);font-family:var(--mono);font-size:11.5px;color:var(--accent-deep);display:block;padding-bottom:8px}
.t-when{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;padding-bottom:5px}
.t-what{display:block;font-size:15.5px;line-height:1.45;color:var(--ink-soft)}

.notes-band{background:var(--ground-2);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding-block:28px 32px;max-width:none !important;width:100%}
.notes-band .notes-in{max-width:var(--page);margin:0 auto;padding-inline:var(--gutter)}
.notes-band h3{font-size:clamp(20px,2.2vw,26px);padding-bottom:16px}
.notes-band .kicker{padding-bottom:9px}

/* charts */
.chart{margin:0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-size:15px;line-height:1.45;color:var(--quiet);padding-top:12px}
.chart .c-bar{fill:var(--secondary)}
.chart .c-bar-alt{fill:var(--accent)}
.chart .c-axis{stroke:var(--rule-strong);stroke-width:1}
.chart .c-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:-.04em;fill:var(--ink-soft)}
.chart .c-val{font-family:var(--mono);font-size:9.5px;letter-spacing:-.04em;fill:var(--ink)}
.chart .c-line{fill:none;stroke:var(--secondary);stroke-width:2}
.chart .c-dot{fill:var(--accent)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:none !important;width:100%}
.gallery figure{display:flex;flex-direction:column}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:15px;line-height:1.4;color:var(--quiet);padding-top:8px}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:none !important;width:100%}
.profile-card{border:1px solid var(--rule);padding:18px;display:flex;flex-direction:column;gap:9px;height:100%}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover}
.profile-card h3{font-size:19px}
.profile-card .p-role{font-family:var(--mono);font-size:11.5px;letter-spacing:-.02em;text-transform:uppercase;color:var(--accent-deep)}
.profile-card p{font-size:16px;line-height:1.45;color:var(--ink-soft)}
.profile-card .p-links{margin-top:auto;padding-top:6px;font-size:15.5px}
.profile-card.no-photo{border-left:3px solid var(--secondary)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;max-width:none !important;width:100%}
.org-card{display:flex;align-items:center;gap:12px;border:1px solid var(--rule);padding:12px 14px;background:var(--ground);min-width:0}
.org-card .org-logo{width:44px;height:44px;object-fit:contain;flex:none}
.org-card .org-name{font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);display:block}
.org-card .org-host{font-family:var(--mono);font-size:11px;letter-spacing:-.03em;color:var(--quiet);display:block}
.org-card.no-logo{border-left:3px solid var(--accent)}
.entity-ref{border-bottom:1px solid var(--rule-strong);white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;max-width:none !important;width:100%}
.further-grid a{border:1px solid var(--rule);padding:14px 16px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.25;display:flex;align-items:center;gap:10px}
.further-grid a:hover{border-color:var(--secondary);color:var(--secondary)}
.further-grid a svg{color:var(--accent);flex:none}

/* related / lists */
.related{border-top:2px solid var(--ink);padding-block:26px 34px}
.related-links{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.related-links li{border-top:1px solid var(--rule);padding-top:10px}
.related-links a{font-size:17.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.25}
.related-links a:hover{color:var(--secondary)}
.related-links .meta{display:block;padding-top:5px}

.cat-list{list-style:none;display:flex;flex-direction:column}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 26px;align-items:baseline;padding:16px 0;color:var(--ink)}
.cat-list a:hover{color:var(--secondary)}
.cat-list .cl-title{font-size:21px;font-weight:700;letter-spacing:-.022em;line-height:1.2}
.cat-list .cl-dek{font-size:16px;line-height:1.45;color:var(--ink-soft);grid-column:1;padding-top:5px}
.cat-list .meta{white-space:nowrap}

/* category / browse heads */
.page-head{padding-block:34px 30px;border-bottom:2px solid var(--ink)}
.page-head h1{font-size:clamp(34px,4.6vw,58px)}
.page-head .lead{padding-top:16px;max-width:60ch}
.page-head-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:36px;align-items:end}
.page-head-grid img{width:100%;aspect-ratio:3/2;object-fit:cover}
.browse-group{padding-block:30px}
.browse-group .band-label h2 a{color:var(--ink)}
.hub{padding-block:36px 44px}

@media (max-width:1160px){
  .sec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .masthead-in{grid-template-columns:1fr auto}
  .brand-tag{grid-column:2;font-size:10.5px}
  .nav{grid-column:1/-1;grid-row:2;justify-self:start;justify-content:flex-start;flex-wrap:wrap;gap:4px 16px;border-top:1px solid var(--rule);padding-top:8px;width:100%}
}
@media (max-width:900px){
  :root{--gutter:22px}
  body{font-size:17px}
  .sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lead-grid,.page-head-grid{grid-template-columns:1fr;gap:24px}
  .fig-inset{max-width:100%}
  .art-body p{font-size:18px}
  .nav{gap:4px 14px}
  .nav a{font-size:12.5px;padding:10px 0;min-height:44px}
  .cat-list a{padding:18px 0}
  .q-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .versus,.versus tbody,.versus tr,.versus td,.versus th{display:block;width:100%}
  .versus td:last-child,.versus th:last-child{border-left:0;padding-left:0}
}
@media (max-width:520px){
  .sec-grid{grid-template-columns:1fr}
  .card h3{min-height:0}
  .q-grid{grid-template-columns:1fr}
  .sponsor-run{grid-template-columns:1fr}
  table.register-table{min-width:640px}
  /* wide data tables become their own scroll container rather than overflowing the page */
  .datatable{display:block;overflow-x:auto;white-space:normal}
  .datatable thead,.datatable tbody{display:table;width:100%;min-width:460px}
  .stat-num{font-size:20px}
  .q-num{font-size:19px}
  .art-hero img{max-height:340px}
  .brand-name{font-size:21px}
  .brand-tag{display:none}
  /* nav becomes a two-row set of proper 44px tap targets */
  .nav{gap:0 12px;padding-top:4px}
  .nav a{font-size:11.5px;gap:5px;padding:12px 0;min-height:44px}
  .nav a svg{width:14px;height:14px}
  .sec-head svg{width:34px;height:34px}
}

/* 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{object-fit:contain!important}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 598px at 390, 6% 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 598 -> 437px (27% 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(7px,1.94vw,28px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   949px at 390, 10% of the whole page. Two columns bring it to
   515px (46% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 3 lines, tile heights 52-125px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.sponsor-run), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap: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 .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.art-body.wrap > figure.article-figure.fig-col > img,
  div.art-body.wrap > figure.article-figure.fig-inset > img,
  div.art-hero.wrap > figure.article-figure > img,
  div.card-grid > article.card > img,
  div.lead-grid > figure.lead-figure > img,
  div.page-head.wrap > div.page-head-grid > img){height:auto}
/* op-img-dims:end */