:root{
  --ground:#FBFAF7;   /* ground  — the paper the site is printed on */
  --paper:#FFFFFF;    /* ground, lifted — cards and panels */
  --ink:#191D1A;      /* ink     — text and the dark colophon ground */
  --ink-2:#41483F;
  --ink-3:#6B7268;
  --accent:#1C3FB0;   /* accent  — cobalt: mastheads, bands, links, map land */
  --accent-ink:#F4F6FB;
  --secondary:#E6C36F;/* secondary — soft ochre: panels, pins, current-section marker */
  --flag:#B3321B;     /* flag    — weight limits, failure, warnings */
  --rule:#DDD7CA;
  --rule-2:#E9E4D9;
  --display:'Fjalla One',Haettenschweiler,'Arial Narrow',sans-serif;
  --text:'Libre Franklin',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.68 var(--text);text-wrap:pretty;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--accent)}
a:hover{color:var(--flag)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:.01em;margin:0}
.ico{flex:none}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.measure{max-width:72ch;margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{font-family:var(--display);font-size:clamp(24px,3vw,32px);letter-spacing:.03em;text-transform:uppercase}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--secondary);color:var(--ink);padding:10px 14px;z-index:20}

/* masthead + nav */
.masthead{background:var(--accent);color:var(--accent-ink)}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:20px 18px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit;min-width:0}
.brand-name{display:block;font-family:var(--display);font-size:clamp(30px,4.6vw,44px);line-height:.95;letter-spacing:.02em}
.brand-strap{display:block;font-size:13px;font-weight:500;color:#C3CEF0;margin-top:5px;max-width:56ch;line-height:1.4}
.mast-note{font-family:var(--display);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary);text-align:right;line-height:1.35;margin-left:auto;flex:0 0 auto;min-width:max-content}
@media(max-width:900px){.mast-note{display:none}}
.nav .wrap{max-width:none}
.nav{background:#F2EEE4;border-bottom:2px solid var(--ink)}
.nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.nav li a{justify-content:center;text-align:center}
@media(max-width:1080px){.nav ul{grid-template-columns:repeat(4,minmax(0,1fr))}.nav li:last-child{grid-column:span 2}}
@media(max-width:680px){.nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}.nav li:last-child{grid-column:span 2}}
.nav a{display:flex;align-items:center;gap:8px;padding:12px 14px;text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:600;white-space:nowrap;border-right:1px solid var(--rule);height:100%;box-sizing:border-box}
.nav a:hover{background:#E4DBC6;color:var(--ink)}
.nav a[aria-current]{background:var(--secondary)}
.nav .ico{color:var(--accent)}
.nav a[aria-current] .ico{color:var(--ink)}

/* generic bands */
.band{padding-block:clamp(30px,4.5vw,52px)}
.band-accent{background:var(--accent);color:var(--accent-ink)}
.band-accent a{color:#fff}
.band-ochre{background:var(--secondary);color:#33260A}
.band-ochre a{color:#33260A}
.band-ochre .stat-num,.band-ochre .s-num,.band-ochre .nb-term,.band-ochre .t-when{color:#231A05}
.band-paper{background:#FFFFFF;border-block:1px solid var(--rule)}
.band-paper .card,.band-paper .further-grid a,.band-paper ul.related-links a,.band-paper .sec-block{background:#FBFAF7}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:2px solid currentColor;padding-bottom:10px;margin-bottom:26px}
.band-head h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:center;gap:14px}
.band-head h2 .ico{width:clamp(32px,3.6vw,44px);height:clamp(32px,3.6vw,44px);stroke-width:1.45}
.notes-band .nb-head .ico{width:clamp(32px,3.6vw,42px);height:clamp(32px,3.6vw,42px);stroke-width:1.45}
.sec-block h3 .ico{width:26px;height:26px}
.art-head .kicker .ico,.card .meta .ico{width:20px;height:20px}
.band-head p{margin:0;font-size:15px;max-width:60ch;opacity:.8}

/* cards */
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);text-decoration:none;color:inherit;height:100%}
.card:hover{border-color:var(--accent);color:inherit}
.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:22px;line-height:1.1;min-height:2.2em}
.card p{margin:0;font-size:15px;color:var(--ink-2)}
.card .meta{margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px}

/* lead feature */
.lead-feature{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;padding-block:clamp(26px,4vw,44px)}
.lead-feature :is(h1,h2){font-size:clamp(34px,5.2vw,62px);line-height:.96}
.lead-feature .lead{font-size:clamp(17px,1.5vw,20px)}
@media(max-width:860px){.lead-feature{grid-template-columns:minmax(0,1fr)}}

/* section blocks */
.sec-blocks{display:grid;gap:16px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1080px){.sec-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}.sec-blocks .sec-block:last-child{grid-column:1/-1}}
@media(max-width:640px){.sec-blocks{grid-template-columns:minmax(0,1fr)}.sec-blocks .sec-block:last-child{grid-column:auto}}
.sec-block{background:var(--paper);border:1px solid var(--rule);padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px}
.sec-block h3{font-size:clamp(20px,1.7vw,26px);letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:baseline;gap:9px;line-height:1.05}
.sec-block h3 a{text-decoration:none;color:inherit}
.sec-block .ico{color:var(--secondary)}
.sec-block > p{margin:0;font-size:15px;color:var(--ink-2)}
.sec-block ul{list-style:none;margin:0;padding:0}
.sec-block li{border-top:1px solid var(--rule-2)}
.sec-block li a{display:block;padding:9px 0;font-size:15px;line-height:1.35;font-weight:600;text-decoration:none;color:var(--ink)}
.sec-block li a:hover{color:var(--accent)}
.sec-block .sec-more{margin-top:auto;padding-top:12px;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* tables */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#register .table-scroll{max-height:clamp(360px,52vh,560px);overflow-y:auto;border:1px solid var(--rule);box-shadow:inset 0 -22px 20px -22px rgba(25,29,26,.35)}
#register table.datatable th{position:sticky;top:0;z-index:1}
#register table.datatable tbody tr:last-child td{border-bottom:0}
table.datatable,table.versus{width:100%;border-collapse:collapse;font-size:15.5px}
table.datatable th,table.versus th{background:var(--accent);color:var(--accent-ink);text-align:left;padding:10px 12px;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
table.datatable td,table.versus td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
table.datatable td.num,table.datatable th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.datatable td.name{font-weight:700;white-space:nowrap}
table.datatable td.truss{color:var(--accent);font-weight:600;white-space:nowrap}
table.versus td:first-child{font-weight:700;width:34%}
tr.is-pinned td.name::after{content:"";display:inline-block;width:7px;height:7px;background:var(--secondary);border-radius:50%;margin-left:8px;vertical-align:middle}

/* map */
.map-figure{margin:0}
.map-slot{background:var(--accent);border:1px solid rgba(0,0,0,.2)}
.map-slot svg{width:100%;height:auto;display:block}
.map-figure figcaption{font-size:15px;color:var(--ink-3);padding-top:10px}
.band-accent .map-slot{background:#16338F;border-color:rgba(244,246,251,.25)}
.band-accent .map-figure figcaption{color:#C3CEF0}
.map-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;margin-top:14px}
.map-legend span{display:flex;align-items:center;gap:8px}
.map-dot{width:10px;height:10px;background:var(--secondary);border-radius:50%}

/* located map: map + span list, hover pairs the two */
.map-pair{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media(max-width:900px){.map-pair{grid-template-columns:minmax(0,1fr)}}
.map-pair .map-figure{order:1;margin:0}
.map-pair .loc-side{order:2}
.pin-halo{transition:opacity .18s,r .18s}
.loc-list{list-style:none;margin:0;padding:0}
.loc-list li{border-top:1px solid rgba(244,246,251,.28)}
.loc-list li:last-child{border-bottom:1px solid rgba(244,246,251,.28)}
.loc-list a{display:grid;grid-template-columns:1fr auto auto;gap:6px 16px;align-items:baseline;padding:11px 0;text-decoration:none;color:#F4F6FB}
.loc-list .l-name{font-family:var(--display);font-size:21px;letter-spacing:.01em}
.loc-list .l-truss{font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--secondary)}
.loc-list .l-span{font-size:15px;font-variant-numeric:tabular-nums;color:#C3CEF0}
.loc-list .l-note{grid-column:1/-1;font-size:14.5px;line-height:1.45;color:#C3CEF0;margin:0}
.loc-list a:hover .l-name{color:var(--secondary)}
.loc-side:has(a[data-slug="smolen-gulf"]:hover) ~ .map-figure [data-pin="smolen-gulf"] .pin-halo,
.loc-side:has(a[data-slug="harpersfield"]:hover) ~ .map-figure [data-pin="harpersfield"] .pin-halo,
.loc-side:has(a[data-slug="root-road"]:hover) ~ .map-figure [data-pin="root-road"] .pin-halo,
.loc-side:has(a[data-slug="netcher-road"]:hover) ~ .map-figure [data-pin="netcher-road"] .pin-halo,
.loc-side:has(a[data-slug="doyle-road"]:hover) ~ .map-figure [data-pin="doyle-road"] .pin-halo,
.loc-side:has(a[data-slug="benetka-road"]:hover) ~ .map-figure [data-pin="benetka-road"] .pin-halo{opacity:1;r:22}
.map-slot .pin:hover .pin-halo{opacity:1;r:22}

/* article */
figure{margin:0}
.article-hero{position:relative;background:var(--ink);margin:0}
.article-hero img{width:100%;height:clamp(300px,44vw,600px);object-fit:cover}
.article-hero figcaption{font-size:14.5px;color:var(--ink-3);padding:10px clamp(16px,4vw,40px);max-width:90ch}
.art-head{padding-block:clamp(26px,4vw,46px) 8px}
.art-head h1{font-size:clamp(34px,5.6vw,66px);line-height:.95;max-width:24ch}
.art-sub{font-family:var(--display);font-size:clamp(19px,2.2vw,26px);letter-spacing:.02em;color:var(--accent);margin:14px 0 0}
p.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.5;font-weight:500;color:var(--ink-2);margin:18px 0 0}
.art-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:20px;padding-top:14px;border-top:1px solid var(--rule);font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.art-meta .kicker{color:var(--accent)}
.art-body{padding-block:8px 10px}
.art-body h2{font-family:var(--display);font-size:clamp(25px,3vw,34px);letter-spacing:.02em;margin:38px 0 12px}
.art-body p{margin:0 0 20px}
.art-body ul,.art-body ol{margin:0 0 22px;padding-left:22px}
.art-body li{margin-bottom:7px}
.art-body::after{content:"";display:block;clear:both}
.article-figure{margin:32px 0}
.article-figure img{width:100%}
.article-figure figcaption{font-size:15px;line-height:1.5;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:9px;margin-top:9px}
.fig-bleed{margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw}
.fig-bleed img{max-height:78vh;object-fit:cover;width:100%}
.fig-bleed figcaption{max-width:78ch;margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}
.fig-wide{margin-inline:min(0px,calc(50% - 42vw));width:auto}
.fig-inset{float:right;width:min(340px,42%);margin:6px 0 20px 30px}
@media(max-width:640px){.fig-inset{float:none;width:100%;margin:26px 0}}
.pullquote{margin:36px 0;padding:0 0 0 22px;border-left:5px solid var(--secondary)}
.pullquote p{font-family:var(--display);font-size:clamp(23px,2.7vw,31px);line-height:1.2;margin:0;letter-spacing:.01em}
.blockquote{margin:30px 0;padding-left:20px;border-left:3px solid var(--accent)}
.blockquote p{margin:0 0 8px;font-size:19px}
.blockquote cite{display:block;font-size:15px;font-style:normal;color:var(--ink-3)}
.callout{background:var(--paper);border:1px solid var(--rule);border-left:6px solid var(--secondary);padding:20px 24px;margin:30px 0}
.callout p{margin:0}
p.note{font-size:15px;color:var(--ink-3);font-style:italic}
.gallery{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:30px 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:13.5px;color:var(--ink-3);padding-top:7px}

/* notes-for-design interruptions */
.notes-band{margin:44px 0}
.notes-band .nb-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.notes-band .nb-head h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:.03em;text-transform:uppercase;margin:0}
.nb-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.nb-item{display:flex;flex-direction:column;gap:6px;border-top:2px solid currentColor;padding-top:12px}
.nb-term{font-family:var(--display);font-size:20px;letter-spacing:.01em}
.nb-text{font-size:15.5px;line-height:1.55}
.statrow{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.statblock{display:flex;flex-direction:column;gap:6px;border-top:2px solid currentColor;padding-top:12px}
.stat-num{font-family:var(--display);font-size:clamp(34px,4.4vw,52px);line-height:.9}
.stat-label{font-size:15px;line-height:1.45}
ol.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
ol.timeline li{display:grid;grid-template-columns:minmax(120px,26%) 1fr;gap:20px;padding:14px 0;border-top:1px solid currentColor}
ol.timeline .t-when{font-family:var(--display);font-size:19px;letter-spacing:.01em}
ol.timeline .t-what{font-size:15.5px;line-height:1.55}
@media(max-width:560px){ol.timeline li{grid-template-columns:1fr;gap:4px}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.steps li{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:2px solid currentColor;font-size:15.5px;line-height:1.45}
.steps .s-num{font-family:var(--display);font-size:26px;opacity:.65}
.chart figcaption{font-size:14.5px;color:var(--ink-3);padding-top:10px}

/* lists / related */
ul.cat-list{list-style:none;margin:0;padding:0}
ul.cat-list li{border-top:1px solid var(--rule)}
ul.cat-list li:last-child{border-bottom:1px solid var(--rule)}
ul.cat-list a{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:18px 0;text-decoration:none;color:inherit}
ul.cat-list a:hover .cl-title{color:var(--accent)}
ul.cat-list .ico{color:var(--secondary);margin-top:4px}
.cl-title{font-family:var(--display);font-size:clamp(21px,2.2vw,26px);line-height:1.08;display:block}
.cl-dek{font-size:15.5px;color:var(--ink-2);margin:5px 0 0}
.cl-meta{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:7px 0 0}
.further-grid,ul.related-links{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));list-style:none;margin:0;padding:0}
.further-grid a,ul.related-links a{display:flex;flex-direction:column;gap:7px;height:100%;background:var(--paper);border:1px solid var(--rule);padding:16px 18px;text-decoration:none;color:inherit;font-family:var(--display);font-size:20px;line-height:1.12}
.further-grid a:hover,ul.related-links a:hover{border-color:var(--accent);color:var(--accent)}
.further-grid a span,ul.related-links a span{font-family:var(--text);font-size:14.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
a.entity-ref{white-space:nowrap;font-weight:600}
.profile-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.profile-card{background:var(--paper);border:1px solid var(--rule);padding:18px 20px;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:22px}
.profile-card .p-role{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.profile-card p{margin:0;font-size:15.5px}
.profile-card.no-photo{border-left:5px solid var(--secondary)}
.org-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.org-card{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--rule);padding:12px 14px;text-decoration:none;color:inherit}
.org-card .org-logo{width:44px;height:44px;object-fit:contain;background:var(--ink);padding:5px}
.org-card .org-name{font-family:var(--display);font-size:18px;display:block}
.org-card .org-host{font-size:13px;color:var(--ink-3)}

/* colophon / supporters */
.colophon{background:var(--ink);color:#EDE7DA;padding:clamp(34px,4.5vw,56px) 0}
.colophon .band-head{border-color:rgba(237,231,218,.4)}
.colophon .band-head h2{color:#EDE7DA}
.colophon .band-head p{color:#A7AEA3}
.col-group-label{font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--secondary);margin:26px 0 10px}
.sponsor-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px)}
@media(max-width:1000px){.sponsor-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sponsor-list{grid-template-columns:minmax(0,1fr)}}
a.sponsor{display:flex;flex-direction:column;gap:10px;padding:18px 0;border-top:1px solid rgba(237,231,218,.22);text-decoration:none;color:inherit;width:100%}
a.sponsor:hover{color:inherit}
a.sponsor:hover .sponsor-mark{border-color:var(--secondary)}
.sponsor-mark{width:100%;height:56px;background:#0C0F0C;border:1px solid rgba(237,231,218,.18);display:flex;align-items:center;justify-content:center;padding:8px 14px}
.sponsor-mark img{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-name{font-family:var(--display);font-size:19px;letter-spacing:.02em}
.sponsor-blurb{font-size:14.5px;line-height:1.45;color:#A7AEA3}
a.sponsor.feat .sponsor-name{font-size:22px;color:#fff}

/* footer */
.site-foot{background:#12150F;color:#9AA196;padding:40px 0 46px;font-size:15px}
.foot-cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:28px}
.site-foot h4{font-family:var(--display);font-size:17px;letter-spacing:.09em;text-transform:uppercase;color:var(--secondary);margin-bottom:10px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:7px}
.site-foot a{color:#D6DACF;text-decoration:none}
.site-foot a:hover{color:var(--secondary)}
.foot-brand{display:flex;align-items:center;gap:12px;color:var(--secondary)}
.foot-brand span{font-family:var(--display);font-size:20px;letter-spacing:.06em;color:#EDE7DA}
.foot-rule{border-top:1px solid rgba(154,161,150,.28);padding-top:18px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}

/* misc */
.hub-groups{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.expander{margin-top:14px}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .ex-extra{display:none}
.expander input:checked ~ .ex-extra{display:block}
.expander label{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);cursor:pointer;border-bottom:2px solid var(--accent)}
.expander input:checked ~ label .ex-more{display:none}
.ex-less{display:none}
.expander input:checked ~ label .ex-less{display:inline}
.prose-page{padding-block:clamp(30px,4vw,54px)}
.prose-page h1{font-size:clamp(32px,4.6vw,54px);margin-bottom:16px}
.prose-page h2{font-family:var(--display);font-size:26px;margin:32px 0 10px}
.sg-block{border-top:2px solid var(--ink);padding:26px 0 10px}
.sg-block > h2{font-size:22px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.hub-title{font-size:clamp(32px,4.8vw,54px);letter-spacing:.02em;text-transform:uppercase;margin:0 0 10px}
@media(max-width:560px){
  .loc-list a{grid-template-columns:1fr auto}
  .loc-list .l-span{grid-column:1/-1}
  .art-meta{font-size:13px;gap:10px}
  .band-head{gap:12px}
  .band-head p{max-width:none}
  .pullquote{padding-left:16px}
  .callout{padding:16px 18px}
  table.datatable td,table.datatable th,table.versus td,table.versus th{padding:9px 10px}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .art-body h2{margin-top:30px}
  .fig-inset{margin-top:0}
}

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

/* 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-list .sponsor .sponsor-mark.sponsor-mark{display:block!important;width:100%!important}
.sponsor-list .sponsor.sponsor img{height:40px!important;display:block!important;width:100%!important}

/* op-footer-compact: the footer printed 13 rows for 13 link(s) in
   3 list(s) — 819px at 390, 8% 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,
   measured 819 -> 650px (21% 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.81vw,26px)!important;row-gap:7px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2136px at 390, 21% of the whole page. Two columns bring it to
   1465px (31% shorter). Checked before writing: no new overflow, smallest mark still
   140px wide, longest blurb 3 lines, tile heights 188-215px.
   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. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-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){
  .sponsor-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:min(2.36vw,34px)!important}
    .sponsor-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-list > * *{min-width:0!important;max-width:100%}
    .sponsor-list img,.sponsor-list svg{max-width:100%;height:auto}
  .sponsor-list .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-list (7 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){
  .sponsor-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — div reached
   346px in a 320px screen (+26px) on sections.html, inside
   div.hub-groups. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.hub-groups{grid-template-columns:minmax(0,1fr)!important}
  div{min-width:0!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 715px (94 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 72ch (declared in .measure) 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.measure.art-body{max-width:min(831px, 100%)!important}
}
@media (min-width:1600px){
  main#main div.measure.art-body{max-width:min(clamp(831px, 57.708vw, 997px), 100%)!important}
  main#main div.measure.art-body > :is(p:not([class])){font-size:clamp(17px,1.1806vw,20.4px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div > a > img,
  div > figure.article-figure > img,
  main > figure.article-hero > img){height:auto}
/* op-img-dims:end */
@media (min-width:640px) and (max-width:1019px){.sponsor-list:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}[data-partner] .sponsor-mark{background:transparent!important}