/* moe-vienna.org — "The Hang". Plates, not pages. */

:root{
  --ink:#131211;            /* gallery near-black */
  --ink-2:#1B1917;          /* plate ground */
  --ink-3:#221F1B;          /* raised panel */
  --rule:#33302B;
  --paper:#F4F0E7;          /* warm white */
  --paper-2:#EDE8DE;
  --type:#EDE8DE;
  --type-2:#C9C2B6;
  --type-3:#9A9084;
  --accent:#8A5A1E;         /* amber-bronze — on paper */
  --gold:#C9A227;           /* gold — on near-black */
  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:clamp(20px,5vw,64px);
  --measure:68ch;
  --wide:1600px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--type);
  font-family:var(--serif);font-size:19px;line-height:1.65;
  font-weight:400;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--paper)}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3,h4{font-weight:400;margin:0;overflow-wrap:break-word}
p{margin:0 0 1.1em}
figure{margin:0}
hr{border:0;border-top:1px solid var(--rule);margin:0}
.hero-name,.entry-title,.art-title,.lead-title,.hub-title,.cl-title,.rl-title,.colophon-title{hyphens:auto;-webkit-hyphens:auto}

.wrap{max-width:var(--wide);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------- masthead ---------- */
.masthead{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--ink)}
.masthead a{color:var(--ink)}
.masthead a:hover{color:var(--accent)}
.masthead-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:22px}
.wordmark{font-family:var(--display);font-size:clamp(24px,3.2vw,34px);letter-spacing:.17em;text-transform:uppercase;line-height:1}
.masthead-tag{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6E675C}
.sitenav{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:18px;padding-bottom:12px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase}
.sitenav a[aria-current="page"]{color:var(--accent)}

/* ---------- plates (image bands) ---------- */
.plate{background:var(--ink-2);position:relative}
.plate img{width:100%;height:100%;object-fit:cover}
.plate--full{height:min(76vh,860px);min-height:420px}
.plate--tall{aspect-ratio:16/10}
.plate--wide{aspect-ratio:21/9}
.plate-cap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:16px 48px;
  margin-top:16px;align-items:start}
.cap-k{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--type-3)}
.cap-t{font-size:16.5px;line-height:1.55;color:var(--type-2);max-width:70ch}
.credit{font-family:var(--mono);font-size:11.5px;color:#6E675C;letter-spacing:.02em;margin-top:6px}

/* ---------- homepage ---------- */
.hero{position:relative;background:var(--ink-2)}
.hero .plate--full{height:min(84vh,940px)}
.hero-type{position:absolute;inset:auto 0 0 0;padding-block:clamp(24px,4vw,40px) clamp(24px,5vw,64px);
  background:linear-gradient(to top,rgba(10,9,8,.97) 0%,rgba(10,9,8,.94) 45%,rgba(10,9,8,.88) 72%,rgba(10,9,8,.55) 90%,rgba(10,9,8,0) 100%)}
.hero-name{font-family:var(--display);font-size:clamp(40px,9vw,132px);line-height:.95;letter-spacing:.02em;color:#fff}
.hero-dec{margin:14px 0 0;font-size:clamp(17px,2vw,22px);line-height:1.45;color:#E4DED2;max-width:46ch}
.hero-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;text-shadow:0 1px 6px rgba(10,9,8,.9)}

.band{padding-block:clamp(56px,9vw,120px)}
.band-rule{border-top:1px solid var(--rule)}

.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* lead editorial */
.lead-band{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px)}
@media(min-width:960px){.lead-band{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}}
.lead-title{font-family:var(--display);font-size:clamp(38px,6vw,86px);line-height:1.02;margin:16px 0 18px;text-wrap:pretty}
.lead-title a{color:inherit}
.lead-title a:hover{color:var(--gold)}
.lead-stand{font-size:clamp(19px,2.1vw,25px);line-height:1.5;color:var(--type-2);max-width:44ch}
.meta{font-family:var(--sans);font-size:13.5px;letter-spacing:.06em;color:var(--type-3);margin-top:18px}
.meta span+span::before{content:"·";margin:0 .5em;color:var(--rule)}

/* section strip */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:22px}
.strip-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline}
.strip-list a{font-family:var(--display);font-size:clamp(18px,2vw,26px);color:var(--type)}
.strip-list a:hover{color:var(--gold)}
.strip-list .n{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.14em;margin-right:8px;vertical-align:.35em}

/* section entry band — the signature */
.entry{display:grid;gap:clamp(20px,3vw,40px)}
.entry-title{font-family:var(--display);font-size:clamp(44px,10.5vw,150px);line-height:.92;margin:0;letter-spacing:-.01em;text-wrap:balance}
.entry-title a{color:var(--type)}
.entry-title a:hover{color:var(--gold)}
.entry-body{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 48px}
@media(min-width:900px){.entry-body{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
.entry-blurb{font-size:18px;line-height:1.6;color:var(--type-2);max-width:70ch}
.entry-links{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-family:var(--sans);font-size:15px}
.entry-links a{color:var(--type-2)}
.entry-links a:hover{color:var(--gold)}
.more{display:inline-block;margin-top:18px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:4px}

/* ---------- the patrons' wall (colophon) ---------- */
.colophon{background:var(--paper);color:var(--ink);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.colophon .kicker{color:var(--accent)}
.colophon-head{display:grid;gap:10px;padding-top:clamp(28px,4vw,44px)}
.colophon-title{font-family:var(--display);font-size:clamp(26px,3.4vw,38px)}
.colophon-note{font-size:16.5px;line-height:1.55;color:#4A4438;max-width:62ch;margin:0}
.patron-block{padding-block:clamp(20px,3vw,32px)}
.patron-block+.patron-block{border-top:1px solid #D8CFBF}
.patron-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7A7264;margin-bottom:16px}
.patron-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.sponsor{display:flex;flex-direction:column;gap:10px;background:var(--ink);border:1px solid #C9BFAB;padding:14px}
.sponsor img{width:100%;aspect-ratio:4/1;max-height:44px;height:auto;object-fit:contain;object-position:center;margin-inline:auto}
.sponsor-blurb{display:block;min-height:1.4em;font-family:var(--sans);font-size:14.5px;line-height:1.45;color:var(--type-2)}
.sponsor-blurb:empty{min-height:0}
.sponsor:hover{border-color:var(--accent)}
@media(max-width:560px){.patron-grid{grid-template-columns:1fr}.sponsor img{max-height:48px}}

/* ---------- article ---------- */
.art-head{padding-block:clamp(40px,6vw,80px) clamp(24px,3vw,40px)}
.art-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.art-title{font-family:var(--display);font-size:clamp(38px,7vw,96px);line-height:1.01;margin:18px 0 0;max-width:20ch;text-wrap:pretty}
.art-stand{font-size:clamp(19px,2.2vw,26px);line-height:1.45;color:var(--type-2);max-width:52ch;margin:22px 0 0;font-style:italic}
.prose{padding-block:clamp(28px,4vw,44px)}
.prose p{font-size:20px;line-height:1.72;color:#DED8CD;max-width:var(--measure)}
.prose ul,.prose ol{max-width:var(--measure);padding-left:1.2em}
.prose li{font-size:19px;line-height:1.65;color:#DED8CD;margin-bottom:.5em}
.prose h2{font-family:var(--display);font-size:clamp(28px,3.6vw,42px);line-height:1.15;margin:clamp(40px,5vw,64px) 0 18px;max-width:24ch}
.prose h2::before{content:"";display:block;width:64px;border-top:1px solid var(--gold);margin-bottom:20px}
.prose a{border-bottom:1px solid rgba(201,162,39,.45)}
.prose a:hover{border-bottom-color:var(--paper)}
.prose em{font-style:italic}
.lead{font-size:22px !important;line-height:1.55 !important;color:var(--paper-2) !important}

/* wall label — the interruption that replaces the rail */
.wall-label{background:var(--paper);color:var(--ink);margin-block:clamp(40px,6vw,72px);
  border-top:3px solid var(--accent);padding:clamp(22px,3vw,34px) clamp(20px,3vw,36px)}
.wall-label h3{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.wl-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:820px){.wl-list--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}}
.wl-list li{display:grid;gap:4px;padding-top:14px;border-top:1px solid #D8CFBF}
.wl-term{font-family:var(--display);font-size:20px;line-height:1.25;color:var(--ink)}
.wl-desc{font-size:16.5px;line-height:1.55;color:#3D372E}
.wall-label .note{margin:16px 0 0}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 28px;padding:14px 0;border-top:1px solid #D8CFBF}
@media(min-width:640px){.timeline li{grid-template-columns:minmax(120px,200px) minmax(0,1fr)}}
.t-when{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--accent);line-height:1.4}
.t-what{font-size:16.5px;line-height:1.55;color:#3D372E}

/* figures inside articles */
.article-figure{margin-block:clamp(36px,5vw,64px)}
.article-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink-2)}
.article-figure figcaption{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:14px}
@media(min-width:900px){.article-figure figcaption{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:16px 48px}}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-block:clamp(32px,4vw,56px)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ink-2)}
.gallery figcaption{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--type-3)}

/* text components */
.pullquote{margin:clamp(36px,5vw,60px) 0;padding:0;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.pullquote p{font-family:var(--display);font-size:clamp(24px,3.4vw,38px);line-height:1.22;color:var(--paper);
  margin:0;padding:24px 0;max-width:24ch}
.blockquote{margin:clamp(28px,4vw,44px) 0;padding-left:24px;border-left:2px solid var(--accent)}
.blockquote p{font-size:20px;line-height:1.6;font-style:italic;color:var(--paper-2)}
.blockquote cite{display:block;font-family:var(--sans);font-size:14px;font-style:normal;color:var(--type-3)}
.callout{margin:clamp(28px,4vw,44px) 0;background:var(--ink-3);border:1px solid var(--rule);padding:22px 24px}
.callout p{font-size:18.5px;line-height:1.6;color:var(--paper-2);margin:0;max-width:62ch}
.note{font-family:var(--sans);font-size:15.5px;line-height:1.55;color:var(--type-3);max-width:62ch}
.wall-label .note{color:#6E675C}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin-block:clamp(28px,4vw,44px);font-size:16.5px;display:block;overflow-x:auto}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.versus th,.datatable th{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.versus caption,.datatable caption{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--type-3);padding-bottom:10px}
.versus td:first-child,.datatable td:first-child{color:var(--paper-2)}

/* stats */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:transparent;
  margin-block:clamp(28px,4vw,44px)}
.statblock{background:var(--ink);box-shadow:0 0 0 1px var(--rule);padding:22px 20px;display:grid;gap:6px}
.stat-num{font-family:var(--display);font-size:clamp(34px,4vw,52px);line-height:1;color:var(--gold)}
.stat-label{font-family:var(--sans);font-size:14px;line-height:1.4;color:var(--type-2)}

/* charts */
.chart{margin-block:clamp(28px,4vw,44px)}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:12px;font-size:15px;color:var(--type-3);max-width:70ch}
.chart .axis{stroke:var(--rule)}
.chart .bar-r{fill:var(--gold)}
.chart .lab{font-family:"Archivo",sans-serif;font-size:11px;fill:#C9C2B6}
.chart .val{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:#9A9084}

/* cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-block:clamp(28px,4vw,44px)}
.profile-card{background:var(--ink-3);border:1px solid var(--rule);padding:20px;display:flex;flex-direction:column;gap:8px}
.p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:8px}
.profile-card h3{font-family:var(--display);font-size:24px;line-height:1.2}
.p-role{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0}
.profile-card p{font-size:16.5px;line-height:1.55;color:var(--type-2);margin:0}
.p-links{margin-top:auto !important;padding-top:10px}
.p-attr{font-family:var(--mono);font-size:11.5px;color:#6E675C}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-block:28px}
.org-card{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:14px;
  background:var(--ink-3);border:1px solid var(--rule);padding:14px 16px}
.org-logo{width:64px;height:24px;object-fit:contain;object-position:left center}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-name{font-family:var(--sans);font-size:15px;color:var(--paper-2);display:block}
.org-host{font-family:var(--mono);font-size:12px;color:var(--type-3);display:block}
.entity-ref{border-bottom:1px solid rgba(201,162,39,.45);white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:transparent;
  margin-block:clamp(28px,4vw,44px)}
.further-grid a{background:var(--ink);box-shadow:0 0 0 1px var(--rule);padding:20px;font-family:var(--display);font-size:21px;line-height:1.25;color:var(--type)}
.further-grid a:hover{background:var(--ink-3);color:var(--gold)}

/* related + pager */
.related{border-top:1px solid var(--rule);padding-block:clamp(36px,5vw,56px)}
.related h2{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:transparent}
.related-links li{background:var(--ink);display:flex;box-shadow:0 0 0 1px var(--rule)}
.related-links a{display:flex;flex-direction:column;gap:8px;padding:22px;width:100%}
.related-links .rl-sec{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--type-3)}
.related-links .rl-title{font-family:var(--display);font-size:22px;line-height:1.2;color:var(--type)}
.related-links a:hover .rl-title{color:var(--gold)}
.pager{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;border-top:1px solid var(--rule);
  padding-block:28px;font-family:var(--sans);font-size:14px}
.pager span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--type-3);margin-bottom:6px}

/* card lists (category, hub) */
.cat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;background:transparent}
.cat-list li{background:var(--ink);display:flex;box-shadow:0 0 0 1px var(--rule)}
.cat-list>li>a{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.5vw,28px);width:100%;height:100%}
.cl-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--gold)}
.cl-title{font-family:var(--display);font-size:clamp(22px,2.2vw,28px);line-height:1.18;color:var(--type);min-height:2.36em}
.cat-list a:hover .cl-title{color:var(--gold)}
.cl-dek{font-size:16px;line-height:1.5;color:var(--type-2)}
.cl-meta{font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;color:var(--type-3);margin-top:auto;padding-top:12px}

/* hub */
.hub-sec{padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--rule)}
.hub-head{display:grid;gap:14px 48px;margin-bottom:26px}
@media(min-width:900px){.hub-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}}
.hub-title{font-family:var(--display);font-size:clamp(32px,5vw,64px);line-height:1.03}

/* simple pages */
.page-body{padding-block:clamp(40px,6vw,80px)}
.page-body h1{font-family:var(--display);font-size:clamp(38px,6vw,76px);line-height:1.03;margin-bottom:24px}
.page-body h2{font-family:var(--display);font-size:clamp(24px,3vw,34px);margin:44px 0 14px}
.page-body p{font-size:19.5px;line-height:1.7;color:#DED8CD;max-width:var(--measure)}
.page-body ul{max-width:var(--measure);color:#DED8CD;font-size:19px;line-height:1.7}

/* footer */
.site-foot{border-top:1px solid var(--rule);padding-block:clamp(40px,5vw,64px);margin-top:clamp(48px,7vw,96px)}
.foot-grid{display:grid;gap:28px 48px}
@media(min-width:820px){.foot-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}}
.foot-dis{font-size:16px;line-height:1.6;color:var(--type-3);max-width:60ch}
.foot-nav{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-family:var(--sans);font-size:14px}
.foot-nav a{color:var(--type-2)}
.foot-nav a:hover{color:var(--gold)}
.foot-head{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--type-3);margin-bottom:14px}
.foot-mark{font-family:var(--display);font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:var(--type-2)}

@media(max-width:700px){
  body{font-size:18px}
  .prose p{font-size:18.5px}
  .plate-cap,.article-figure figcaption{grid-template-columns:minmax(0,1fr)}
  .entry-title{font-size:clamp(38px,12vw,64px)}
  .cat-list,.related-links,.further-grid,.statrow{grid-template-columns:minmax(0,1fr)}
  .cl-title{min-height:0}
  .pager a{max-width:100%}
  .pager a[style]{text-align:left !important}
  .versus,.datatable{font-size:15.5px}
}
@media(max-width:420px){
  :root{--gutter:18px}
  .sponsor img{max-height:40px}
  .wordmark{font-size:22px;letter-spacing:.12em}
}
@media print{
  body{background:#fff;color:#000}
  .plate,.hero{display:none}
}

/* 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-name-stack: the tile is 207px and the mark is 177px, so a brand name set BESIDE it had ~20px
   to live in. Names now sit under the mark, centred, with our stray left margin cleared. */
.sponsor{flex-direction:column;align-items:center;text-align:center}
.sponsor > .sponsor-blurb:not(:first-child),
.sponsor > *:not(.sponsor-blurb) + .sponsor-blurb{margin-left:0}

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 716px 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 716 -> 529px (26% 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(8px,3.33vw,48px)!important;row-gap:8px!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 — 12 tiles,
   1361px at 390, 15% of the whole page. Two columns bring it to
   632px (54% shorter). Checked before writing: no new overflow, smallest mark still
   137px wide, longest blurb 1 lines, tile heights 96-96px.
   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 (.patron-grid), 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){
  .patron-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .patron-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .patron-grid > * *{min-width:0!important;max-width:100%}
    .patron-grid img,.patron-grid svg{max-width:100%;height:auto}
}

/* op-article-width: the article column was capped at 751px (93 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose p) 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){
  div.prose.wrap{--measure:min(74.476ch, 100%)!important}
}
@media (min-width:1600px){
  div.prose.wrap > :is(p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (751px) and was left behind when the text went to 822px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  header.art-head p.art-stand{max-width:min(825px, 100%)!important}
}
@media (min-width:1600px){
  header.art-head p.art-stand{max-width:min(calc(clamp(825px, 57.292vw, 990px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.plate.plate--wide > img,
  div.lead-band > figure.plate.plate--tall > img,
  div.prose.wrap > figure.article-figure > img,
  main > figure.plate.plate--wide > img,
  section.band.band-rule > figure.plate.plate--tall > img,
  section.band.band-rule > figure.plate.plate--wide > img,
  section.hero > figure.plate.plate--full > img){height:auto}
/* op-img-dims:end */