/* The Vienna School — eadvvienna2016.org
   Palette: ground / ink / accent(crimson) / secondary(deep green) / rule
   Type: Syne (display) · Karla (furniture) · Spectral (prose) */

:root{
  --paper:#F4EFE6;      /* ground */
  --paper-2:#EFE6D8;    /* ground, second tint */
  --cream:#F7EDE4;      /* ground on dark */
  --ink:#14110E;        /* ink */
  --ink-2:#3A352E;      /* ink, softened */
  --mute:#6B655B;       /* ink, quiet — meta and credits */
  --rule:#CFC7B6;       /* hairlines */
  --accent:#A4161A;     /* accent — crimson: bands, numerals, links */
  --accent-ink:#F7EDE4; /* type on accent */
  --second:#1D4E4E;     /* secondary — deep green: mats, bands */
  --second-tint:#8FB9A8;/* type on secondary, quiet */
  --pad:clamp(20px,5vw,54px);
  --measure:70ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Karla,system-ui,sans-serif;font-size:18px;line-height:1.55;
  text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:Chivo,system-ui,sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.02;margin:0}
p{margin:0 0 1.15em}
.wrap{padding-inline:var(--pad)}
.hatch{background-image:repeating-linear-gradient(28deg,rgba(247,237,228,.10) 0 1px,transparent 1px 9px)}
.hatch-dark{background-image:repeating-linear-gradient(-28deg,rgba(20,17,14,.08) 0 1px,transparent 1px 9px)}
.kicker{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.num{font-family:Chivo,system-ui,sans-serif;font-weight:800;color:var(--accent);line-height:.8}
.ico{flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--cream);padding:10px 14px;z-index:99}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink);background:var(--paper)}
.mast-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:22px var(--pad) 18px}
.brand{display:flex;align-items:center;gap:16px;font-size:clamp(30px,4.4vw,48px)}
.brand svg{width:.94em;height:.94em}
.brand svg{color:var(--accent)}
.brand-name{font-family:Chivo,system-ui,sans-serif;font-weight:800;font-size:1em;line-height:.94;letter-spacing:-.03em;display:block}

.utils{display:flex;gap:22px;font-size:16px;font-weight:500;padding-bottom:6px}
.utils a{display:flex;align-items:center;gap:8px}
.utils svg{width:18px;height:18px}

/* the shelf: deliberately uneven — the lead section takes the wide cell
   and shows its pages; the others are compact. No dropdown anywhere. */
.shelf{display:grid;grid-template-columns:2.3fr 1fr 1fr 1fr;border-top:1px solid var(--rule)}
.shelf-cell{padding:18px 22px 20px;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.shelf-cell:first-child{border-left:0}
.shelf-head{display:flex;align-items:flex-start;gap:12px}
.shelf-head svg{width:26px;height:26px;margin-top:2px;color:var(--accent)}
.shelf-name{font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:21px;line-height:1.08;letter-spacing:-.015em}
.shelf-count{font-size:15px;line-height:1.3;color:var(--mute)}
.shelf-cell--lead{background:var(--accent);color:var(--accent-ink);border-left:0}
.shelf-cell--lead .shelf-head svg,.shelf-cell--lead .shelf-count{color:var(--accent-ink)}
.shelf-cell--lead .shelf-name{font-size:24px}
.shelf-pages{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:16px;padding-top:2px}
.shelf-pages a{border-bottom:1px solid rgba(247,237,228,.45);padding-bottom:2px}
.shelf-pages a:hover{color:#fff;border-color:#fff}
.shelf-cell[aria-current="page"]:not(.shelf-cell--lead){background:var(--paper-2)}
.shelf-cell--lead[aria-current="page"]{box-shadow:inset 0 0 0 3px rgba(247,237,228,.55)}

/* ---------- home hero ---------- */
.hero{background:var(--accent);color:var(--accent-ink);position:relative;display:grid;grid-template-columns:1.12fr .88fr}
.hero-body{padding:clamp(46px,6vw,96px) clamp(24px,4vw,54px) clamp(40px,5vw,72px)}
.hero-statement{font-size:clamp(40px,6.4vw,82px);line-height:.94;letter-spacing:-.035em;max-width:14ch}
.hero-deck{font-size:clamp(18px,1.5vw,22px);line-height:1.5;margin-top:26px;max-width:46ch;color:#F3DCD5}
.hero-lead{margin-top:38px;border-top:1px solid rgba(247,237,228,.4);padding-top:22px;max-width:52ch}
.hero-lead .kicker{color:#F0C9C2}
.hero-lead h2{font-size:clamp(24px,2.4vw,34px);line-height:1.06;margin:10px 0 12px}
.hero-lead p{font-size:18px;color:#F3DCD5;margin-bottom:14px}
.hero-figure{position:relative;min-height:420px}
.hero-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-figure figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(20,17,14,.72);color:var(--cream);font-size:15px;padding:12px 16px}
.more{display:inline-flex;align-items:center;gap:10px;font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:17px;border-bottom:2px solid currentColor;padding-bottom:4px}
.more svg{width:28px;height:12px}

/* ---------- generic bands ---------- */
.band{padding:clamp(48px,6vw,84px) var(--pad)}
.band--tight{padding-block:clamp(34px,4vw,52px)}
.band--dark{background:var(--ink);color:#CFC7B6}
.band--green{background:var(--second);color:#EFE6D8}
.band--paper2{background:var(--paper-2)}
.band-head{display:grid;grid-template-columns:96px 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.band-head .num{font-size:clamp(44px,5vw,64px);margin-top:4px}
.band-title{font-size:clamp(28px,3.6vw,44px);line-height:1.05}
.band-deck{font-size:clamp(18px,1.4vw,20px);line-height:1.55;color:var(--ink-2);max-width:62ch;margin-top:14px}
.band--green .band-deck,.band--dark .band-deck{color:#CFD9CF}
.band--green .num{color:var(--second-tint)}
.rule-top{border-top:2px solid var(--ink);padding-top:26px}

/* signature band */
.signature{position:relative;background:var(--ink);color:var(--cream)}
.signature img{width:100%;height:clamp(320px,46vw,620px);object-fit:cover;opacity:.92}
.signature-plate{background:var(--paper);color:var(--ink);padding:clamp(24px,3vw,34px);max-width:min(560px,calc(100% - 2*var(--pad)));border-top:4px solid var(--accent);margin:-90px var(--pad) 0;position:relative}
.signature-plate h2{font-size:clamp(26px,3vw,38px);line-height:1.04}
.signature-plate p{font-size:18px;color:var(--ink-2);margin:14px 0 16px}

/* home picks: unequal weights, never a row of equal tiles */
.picks{display:grid;grid-template-columns:1.6fr 1fr;}
.picks--flip{grid-template-columns:1fr 1.7fr;gap:clamp(24px,3vw,44px);margin-top:36px;align-items:start}
.pick-lead h3{font-size:clamp(24px,2.6vw,34px);line-height:1.06;margin-top:16px}
.pick-lead p{font-size:18px;color:var(--ink-2);margin-top:10px}
.pick-side{display:flex;flex-direction:column;gap:24px}
.pick-row{display:grid;grid-template-columns:110px 1fr;gap:18px;border-top:1px solid var(--rule);padding-top:18px}
.pick-row img{aspect-ratio:3/2;object-fit:cover}
.pick-row h3{font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:20px;line-height:1.1;letter-spacing:-.015em}
.pick-row p{font-size:16px;color:var(--mute);margin:6px 0 0}
.split{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(360px,42vw,560px)}
.split-media{position:relative;min-height:280px}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-body{padding:clamp(40px,5vw,78px) clamp(24px,4vw,54px)}
.quiet-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 28px;border-top:2px solid var(--ink);padding-top:24px}
.quiet-line h2{font-size:clamp(24px,2.6vw,32px)}
.quiet-line p{font-size:18px;color:var(--ink-2);max-width:60ch;margin:0}

/* ---------- supporters ---------- */
.supporters{background:var(--ink);color:#CFC7B6;padding:clamp(40px,5vw,64px) var(--pad)}
.supporters h2{color:var(--cream);font-size:clamp(22px,2.4vw,30px)}
.supporters .kicker{color:#8A8275}
.supporters-note{font-size:17px;max-width:66ch;margin:12px 0 30px}
.sponsor-group{margin-bottom:30px}
.sponsor-group h3{font-family:Karla,sans-serif;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#8A8275;margin-bottom:16px}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));grid-auto-rows:150px;gap:14px}
.sponsor{grid-column:span 1;grid-row:span 1;background:#221D18;border:1px solid #332C25;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;overflow:hidden}
.sponsor:hover{border-color:var(--accent)}
.sponsor img{width:auto;max-width:100%;max-height:32px;height:auto;object-fit:contain;object-position:left center}
.sponsor-name{font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:19px;line-height:1.1;letter-spacing:-.015em;color:var(--cream)}
.sponsor-blurb{font-size:15px;line-height:1.4;color:#9C9485;display:block}
.sponsor.feat,.sponsor--wide{grid-column:span 1;grid-row:span 1}


/* ---------- figures: three treatments, one drawing system ---------- */
figure{margin:0}
figcaption{font-size:16px;line-height:1.45}
.fig-kicker{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.credit{display:block;font-size:14px;color:var(--mute);margin-top:6px}
.band--dark .credit,.band--green .credit{color:#9C9485}

/* 1 — plate: breaks the measure, caption on a cream plate that overlaps */
.fig-plate{margin:clamp(34px,4vw,56px) 0}
.fig-plate img{width:100%;height:clamp(280px,40vw,540px);object-fit:cover}
.fig-plate figcaption{background:var(--paper);border-top:3px solid var(--accent);padding:20px 24px;max-width:min(560px,92%);margin-top:-64px;position:relative;margin-left:clamp(0px,3vw,40px)}

/* 2 — mat: the photograph sits on a coloured mat, caption inside it */
.fig-mat{margin:clamp(30px,3.5vw,48px) 0;background:var(--second);padding:clamp(14px,1.6vw,20px)}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{color:#EFE6D8;padding-top:14px;max-width:64ch}
.fig-mat .fig-kicker{color:var(--second-tint)}
.fig-mat .credit{color:#9FB2A8}

/* 3 — inset: sits IN the column, prose wraps beside it */
.fig-inset{float:right;width:clamp(220px,32%,320px);margin:6px 0 20px 30px;border:1px solid var(--accent);padding:8px;background:var(--paper)}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig-inset figcaption{padding:10px 4px 2px;font-size:15px}

.article-figure{margin:clamp(30px,3.5vw,48px) 0}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule)}
.article-figure figcaption{border-top:1px solid var(--ink);padding-top:10px;margin-top:10px;max-width:66ch}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:32px 0}
.gallery img{aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:15px;color:var(--mute);padding-top:8px}

/* ---------- article ---------- */
.art-head{padding:clamp(30px,4vw,54px) var(--pad) 0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(18px,3vw,40px)}
.art-head .num{font-size:26px;margin-top:6px}
.art-kicker{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.art-kicker svg{width:20px;height:20px;color:var(--accent)}
.art-head h1{font-size:clamp(32px,5vw,64px);line-height:.99;margin:16px 0 0;max-width:26ch}
.lead{font-size:clamp(20px,2vw,25px);line-height:1.45;color:var(--ink-2);margin-top:22px;max-width:44ch;font-family:Karla,sans-serif}
.art-body{padding:0 var(--pad);font-family:Spectral,Georgia,serif;font-size:21px;line-height:1.62;color:#241F1A}
.art-col{max-width:var(--measure);margin-inline:auto}
.art-body h2{font-family:Chivo,system-ui,sans-serif;font-size:clamp(24px,2.6vw,32px);line-height:1.08;margin:1.7em 0 .6em}
.art-body a{color:var(--accent);border-bottom:1px solid rgba(164,22,26,.4)}
.art-body a:hover{border-color:var(--accent)}
.art-body em{font-style:italic}
.bleed{margin-inline:calc(-1*var(--pad));padding-inline:var(--pad)}

/* notes-for-design material: full-bleed interruptions, no side rail */
.notes-band{margin-block:clamp(38px,4.5vw,64px);padding:clamp(28px,3.5vw,48px) var(--pad);font-family:Karla,sans-serif}
.notes-band h3{font-family:Chivo,system-ui,sans-serif;font-size:clamp(20px,2.2vw,28px);margin-bottom:20px}
.notes-band--green{background:var(--second);color:#EFE6D8}
.notes-band--paper{background:var(--paper-2);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(140px,240px) 1fr;gap:12px 26px;padding:14px 0;border-top:1px solid rgba(207,199,182,.35);font-size:17px;line-height:1.4}
.notes-band--paper .timeline li{border-color:var(--rule)}
.t-when{font-family:Chivo,system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--second-tint)}
.notes-band--paper .t-when{color:var(--accent)}
.t-what{color:inherit}
.notes-cols{columns:2;column-gap:40px;font-size:17px;line-height:1.45}
.notes-cols ul{margin:0;padding-left:20px}
.notes-cols li{margin-bottom:12px;break-inside:avoid}
.callout{background:var(--paper-2);border-left:6px solid var(--accent);padding:22px 26px;margin:clamp(28px,3vw,40px) 0;font-family:Karla,sans-serif;font-size:18px;line-height:1.5}
.callout .kicker{display:block;margin-bottom:8px}
.callout p:last-child{margin-bottom:0}
.pullquote{margin:clamp(30px,3.5vw,48px) 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:22px 0}
.pullquote p{font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.22;letter-spacing:-.02em;margin:0}
.blockquote{margin:clamp(26px,3vw,40px) 0;padding-left:24px;border-left:3px solid var(--second)}
.blockquote p{font-size:20px;font-style:italic;margin-bottom:8px}
.blockquote cite{font-family:Karla,sans-serif;font-style:normal;font-size:16px;color:var(--mute)}
.note{font-family:Karla,sans-serif;font-size:17px;color:var(--mute);border-top:1px solid var(--rule);padding-top:12px}

/* data */
.datatable,.versus{width:100%;border-collapse:collapse;font-family:Karla,sans-serif;font-size:17px;margin:28px 0}
.datatable th,.versus th{text-align:left;font-weight:500;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border-bottom:2px solid var(--ink);padding:10px 12px 10px 0}
.datatable td,.versus td{border-bottom:1px solid var(--rule);padding:12px 12px 12px 0;vertical-align:top}
.versus td+td{border-left:1px solid var(--rule);padding-left:16px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;background:var(--rule);margin:30px 0}
.statblock{background:var(--paper);padding:22px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:Chivo,system-ui,sans-serif;font-weight:800;font-size:clamp(30px,3.4vw,44px);line-height:.9;color:var(--accent)}
.stat-label{font-family:Karla,sans-serif;font-size:16px;color:var(--ink-2)}
.chart{margin:30px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{border-top:1px solid var(--rule);padding-top:10px;margin-top:12px;color:var(--mute)}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:30px 0}
.profile-card{background:var(--paper-2);border-top:3px solid var(--second);padding:20px;font-family:Karla,sans-serif;font-size:17px;display:flex;flex-direction:column;gap:8px}
.profile-card h3{font-size:21px}
.p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:6px}
.profile-card.no-photo{border-top-color:var(--accent)}
.p-role{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0}
.p-links{margin-top:auto}
.p-links a{color:var(--accent);border-bottom:1px solid currentColor}
.p-attr{font-size:14px;color:var(--mute)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:26px 0}
.org-card{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:2px 14px;align-items:center;border:1px solid var(--rule);padding:14px 16px;background:var(--paper)}
.org-card:hover{border-color:var(--accent)}
.org-logo{grid-row:span 2;width:44px;height:44px;object-fit:contain}
.org-card.no-logo{grid-template-columns:1fr}
.org-name{font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:18px;line-height:1.15}
.org-host{font-size:15px;color:var(--mute)}
.entity-ref{color:var(--accent);border-bottom:1px solid rgba(164,22,26,.4)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--rule);margin:34px 0}
.further-grid a{background:var(--paper);padding:20px;font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:19px;line-height:1.15;display:flex;min-height:110px}
.further-grid a:hover{background:var(--paper-2)}
.related-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.related-links li{border-top:1px solid var(--rule)}
.related-links a{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:14px 0;font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:19px;line-height:1.15}
.related-links .kicker{font-family:Chivo,system-ui,sans-serif;font-weight:700;color:var(--accent);letter-spacing:.02em;text-transform:none}

/* section / category pages */
.cat-hero{background:var(--accent);color:var(--accent-ink);padding:clamp(40px,5vw,72px) var(--pad)}
.cat-hero .band-head{grid-template-columns:96px 1fr}
.cat-hero .num{color:#F3DCD5}
.cat-hero h1{font-size:clamp(32px,5vw,62px);line-height:.99;max-width:24ch}
.cat-hero p{font-size:clamp(18px,1.5vw,21px);color:#F3DCD5;max-width:56ch;margin:18px 0 0}
.cat-list{list-style:none;margin:0;padding:0}
.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:64px 1fr 280px;gap:clamp(16px,2.4vw,32px);align-items:center;padding:26px 0}
.cat-list .num{font-size:24px}
.cat-list h2{font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:clamp(21px,2.4vw,30px);line-height:1.08}
.cat-list p{font-size:17px;color:var(--ink-2);margin:8px 0 0;max-width:62ch}
.cat-list img{aspect-ratio:16/10;object-fit:cover}
.cat-list li.feature a{grid-template-columns:64px 1fr;padding-bottom:8px}
.cat-list li.feature img{aspect-ratio:16/7;grid-column:1/-1;margin-bottom:18px}
.cat-list li.feature h2{font-size:clamp(26px,3.4vw,42px)}

/* register (archive) */
.register{width:100%;border-collapse:collapse;font-size:17px}
.register caption{text-align:left;font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:22px;padding:26px 0 10px}
.register td{border-top:1px solid var(--rule);padding:14px 16px 14px 0;vertical-align:top}
.register td:first-child{width:56px;color:var(--accent);font-family:Chivo,system-ui,sans-serif;font-weight:700}
.register a{font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:19px}
.register .r-brief{color:var(--ink-2);display:block;font-family:Karla,sans-serif;font-weight:400;font-size:16px;margin-top:4px}

/* footer — the full second level, always visible, crawlable */
.foot{background:var(--ink);color:#9C9485;padding:clamp(26px,3vw,36px) var(--pad)}
.foot-thin{display:flex;justify-content:space-between;align-items:flex-start;gap:24px 40px;flex-wrap:wrap}
.foot-brand{font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--paper)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;padding-top:2px}
.foot-nav a{color:#C9C1B2}
.foot-nav a:hover{color:var(--paper)}
.foot-nav span{color:#6B655B}
.foot-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:30px}
.foot h2{font-size:24px;color:var(--paper)}
.foot-line{font-size:15px;margin:6px 0 0;max-width:48ch;color:#7E7669}
.foot-col h3{font-family:Karla,sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#8A8275;display:flex;gap:9px;align-items:center;margin-bottom:10px}
.foot-col h3 svg{width:18px;height:18px;color:var(--accent)}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:16px;line-height:1.3}
.foot-end{display:flex;flex-wrap:wrap;gap:12px 26px;border-top:1px solid #332C25;margin-top:34px;padding-top:18px;font-size:15px;color:#8A8275}

/* utility pages */
.page-head{padding:clamp(34px,4vw,60px) var(--pad) 0}
.page-head h1{font-size:clamp(30px,4.4vw,54px)}
.prose{padding:clamp(20px,3vw,34px) var(--pad) clamp(40px,5vw,70px);font-family:Spectral,Georgia,serif;font-size:20px;line-height:1.6;max-width:calc(var(--measure) + 2*var(--pad))}
.prose a{color:var(--accent);border-bottom:1px solid rgba(164,22,26,.4)}

/* details-based expander for long lists */
.expand summary{cursor:pointer;font-family:Karla,sans-serif;font-size:16px;color:var(--accent);padding:12px 0;list-style:none}
.expand summary::-webkit-details-marker{display:none}
.expand summary::after{content:" +"}
.expand[open] summary::after{content:" –"}

@media (max-width:1080px){
  .shelf{grid-template-columns:1fr 1fr}
  .shelf-cell{border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  body{font-size:17px}
  .hero,.split,.picks,.art-head,.band-head,.cat-hero .band-head{grid-template-columns:1fr}
  .hero-figure{min-height:300px;order:-1}
  .art-head .num,.band-head .num{margin-bottom:4px}
  .notes-cols{columns:1}
  .fig-inset{float:none;width:100%;margin:24px 0}
  .cat-list a{grid-template-columns:1fr;gap:12px}
  .cat-list img{order:-1}
  .timeline li{grid-template-columns:1fr}
  .signature-plate{margin-top:-40px}
  .sponsor-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-rows:auto}
  .sponsor.feat,.sponsor--wide{grid-column:auto;grid-row:auto}
  .register td:first-child{width:40px}
}
@media (max-width:560px){
  .shelf{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .utils{gap:16px;font-size:15px}
}


/* type on the green ground: links and kickers read in cream, never in crimson */
.band--green a,.notes-band--green a,.fig-mat figcaption a,.art-body .fig-mat figcaption a{color:#F7EDE4;border-bottom:1px solid rgba(247,237,228,.55)}
.band--green a:hover,.notes-band--green a:hover,.fig-mat figcaption a:hover,.art-body .fig-mat figcaption a:hover{color:#fff;border-color:#fff}
.band--green .related-links .kicker,.band--green .kicker{color:var(--second-tint)}
.band--green .related-links li{border-color:rgba(207,199,182,.3)}
.notes-band--green .t-when{color:var(--second-tint)}

.picks--flip .pick-side{justify-content:space-between}
.pick-more{display:flex;align-items:center;gap:12px;border-top:2px solid var(--ink);padding-top:16px;font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:19px;line-height:1.15}
.pick-more svg{width:28px;height:12px;flex:none}
@media (max-width:860px){.pick-more{margin-top:4px}}

/* homepage picks: the same mat-and-accent-rule vocabulary as the article figures */
.pick-lead img{width:100%;aspect-ratio:16/10;object-fit:cover;box-sizing:border-box;background:var(--paper-2);border:1px solid var(--rule);border-top:3px solid var(--accent);padding:12px}
.pick-row img{box-sizing:border-box;background:var(--paper-2);border:1px solid var(--rule);padding:5px}
.pick-lead:hover img,.pick-row:hover img{border-color:var(--accent)}

.band-head--plain{grid-template-columns:1fr}
.split-body .band-title{margin-top:0}

/* the closing quiet line: one compact row, everything on a shared baseline */
.quiet-line{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(0,1.4fr);align-items:baseline;column-gap:clamp(24px,4vw,56px);row-gap:10px;padding-top:20px}
.quiet-line h2{font-size:clamp(22px,2.2vw,28px);line-height:1.1}
.quiet-line p{font-size:17px;line-height:1.5;max-width:none}
.quiet-line .more{margin-left:10px;white-space:nowrap}
.band--tight{padding-block:clamp(26px,3vw,40px)}
@media (max-width:860px){.quiet-line{grid-template-columns:1fr}}

.pick-row .kicker{display:block;font-size:13px;margin-bottom:4px}
.pick-side{gap:20px}

/* article head: one column, title flush left, standfirst under it at the same margin */
.art-head{display:block;padding:clamp(30px,4vw,54px) var(--pad) 0}
.art-head h1{max-width:30ch}
.art-kicker{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);gap:12px}
.art-kicker a{color:var(--ink);font-family:Chivo,system-ui,sans-serif;font-weight:700;letter-spacing:.06em}
.art-kicker-sub{text-transform:none;letter-spacing:0;font-size:16px;color:var(--mute)}
.art-head .lead{max-width:56ch;margin-top:20px}

/* ---------- mobile: compact menu, no dead ends ---------- */
@media (max-width:640px){
  .mast-top{padding:16px var(--pad) 12px;gap:12px}
  .brand{font-size:clamp(26px,7vw,34px);gap:12px}
  .utils{gap:14px;font-size:15px;padding-bottom:0}
  .utils svg{width:16px;height:16px}
  .shelf{grid-template-columns:1fr 1fr}
  .shelf-cell{padding:12px 14px;gap:4px;border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
  .shelf-cell .shelf-count{display:none}
  .shelf-cell--lead{grid-column:1/-1;padding-bottom:14px}
  .shelf-cell--lead .shelf-count{display:block;font-size:14px;color:rgba(247,237,228,.8)}
  .shelf-name,.shelf-cell--lead .shelf-name{font-size:18px}
  .shelf-head svg{width:26px;height:26px;padding:4px}
  .shelf-pages{gap:6px 14px;font-size:15px}
  /* tables and wide data scroll rather than break the page */
  .datatable,.versus,.register{display:block;overflow-x:auto;font-size:16px}
  .fig-plate figcaption{max-width:100%;margin-left:0;margin-top:-28px;padding:16px 18px}
  .signature-plate{margin-inline:var(--pad)}
  .art-body{font-size:19px}
  .lead{font-size:19px}
  .hero-figure{min-height:260px}
  .foot-nav{gap:8px 16px}
}
@media (max-width:319px){
  .shelf{grid-template-columns:1fr}
  .shelf-cell--lead{grid-column:auto}
}

/* ---------- phone: 44px hit targets, tighter masthead ---------- */
@media (max-width:640px){
  .utils a,.foot-nav a{min-height:44px;display:flex;align-items:center;gap:8px}
  .foot-nav{gap:0 18px}
  .shelf-pages{gap:0 16px}
  .shelf-pages a{min-height:44px;display:flex;align-items:center}
  .shelf-head{min-height:44px;align-items:center}
  .shelf-cell{padding:6px 14px;gap:0}
  .shelf-cell--lead{padding-bottom:8px}
  .shelf-cell--lead .shelf-count{display:none}
  .mast-top{padding-bottom:6px}
}
/* styleguide icon cards: the label wraps under the mark instead of overflowing */
.org-name{min-width:0;overflow-wrap:anywhere}
.org-card.no-logo .org-name{flex-wrap:wrap}

/* phone: text leads, photo follows — the ≤860px order:-1 is for tablets only */
@media (max-width:640px){
  .hero-figure{order:0;min-height:200px}
  .hero-body{padding-top:34px}
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* 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-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:start!important;flex-wrap:nowrap!important;align-items:center!important;height:auto!important;min-height:0!important}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}

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


/* sp-tile-pad: more room inside the tile. Design set 14px/16px and the mark runs the full tile
   width, so the artwork sits tight against the border on both sides. Raised to 20px/22px; the
   mark's own height is left alone. */
.sponsor{padding:20px 22px!important}


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

}

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

/* op-article-width: the article column was capped at 735px (81 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .art-col) 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.art-col{--measure:min(88.095ch, 100%)!important}
}
@media (min-width:1600px){
  div.art-col{--measure:min(clamp(88.095ch, 64.236vw, calc(88.095ch * 1.2)), 100%)!important}
  div.art-col > :is(p:not([class])), div.art-col > :is(ul.related-links) > li{font-size:clamp(21px,1.4583vw,25.2px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.art-col > figure.bleed.fig-mat > img,
  div.art-col > figure.bleed.fig-plate > img,
  div.art-col > figure.fig-inset > img,
  div.pick-side > a.pick-row > img,
  div.picks.picks--flip > a.pick-lead > img,
  li > a > img,
  li.feature > a > img,
  main > figure.fig-plate > img,
  main > section.signature > img,
  section.band > figure.fig-plate > img,
  section.band--green.split > div.split-media > img,
  section.hatch.hero > figure.hero-figure > img){height:auto}
/* op-img-dims:end */