/* ── sbcaf.org · The Contemporary Forum ─────────────────────────────
   PALETTE — 5 members, each with a job
   --paper   #F2ECE1  ground        lime-wash stucco
   --mat     #E7DECD  ground, 2nd   the mat a photograph sits on
   --ink     #1A1714  ink           text, rules
   --tile    #B4462A  accent        SATURATED, hue ~14°  (roof tile)
   --sala    #123A5C  secondary     SATURATED, hue ~213°  (Sala del Consejo blue)
   The two saturated members sit ~199° apart in hue and each carries a
   full-width band of its own, not a 2px rule.
   ------------------------------------------------------------------ */
:root{
  --paper:#F2ECE1; --mat:#E7DECD; --ink:#1A1714; --tile:#B4462A; --sala:#123A5C;
  --quiet:#6E6355; --hair:#C7BCA9;
  --display:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  --ui:Karla,'Helvetica Neue',Helvetica,sans-serif;
  --text:Spectral,Georgia,serif;
  --gut:clamp(18px,4vw,44px);
  --measure:72ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:19px;line-height:1.62;
  text-wrap:pretty;overflow-x:hidden;
}
/* the reading column grows with the display rather than staying pinned */
@media (min-width:1340px){body{font-size:20px}}
@media (min-width:1660px){body{font-size:21px}}
@media (min-width:1980px){body{font-size:21.5px}}
img{max-width:100%;display:block}
a{color:var(--tile);text-decoration:none}
a:hover{color:var(--sala);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.018em;margin:0}
::selection{background:var(--tile);color:var(--paper)}
.wrap{max-width:1480px;margin:0 auto;padding-inline:var(--gut)}
@media (min-width:1760px){.wrap{max-width:1640px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ── icons: one system. 24-grid, 1.7 stroke, round caps ───────────── */
.ico{width:1.35em;height:1.35em;flex:none;vertical-align:-.28em}
.ico path,.ico circle,.ico line,.ico rect,.ico polyline{
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:2.4em;height:2.4em}

/* ── masthead ─────────────────────────────────────────────────────── */
.masthead{padding-top:clamp(18px,2.6vw,32px);text-align:center}
.mast-row{display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.4vw,16px)}
.mark{color:var(--tile);flex:none;width:clamp(58px,7.2vw,104px);height:auto}
.mast-block{min-width:0;max-width:100%}
.mast-name{font-family:'Libre Caslon Text',var(--display);font-weight:700;
  font-size:clamp(22px,5vw,58px);line-height:1;letter-spacing:-.024em;white-space:nowrap}
.mast-name a{color:var(--ink)}
.mast-name a:hover{text-decoration:none;color:var(--ink)}
.mast-name em{font-style:normal;color:var(--tile)}
.mast-strap{display:flex;align-items:baseline;justify-content:center;
  gap:clamp(10px,1.6vw,20px);flex-wrap:wrap;margin-top:clamp(8px,1vw,13px)}
.mast-dom{font-family:var(--ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);
  font-weight:600;white-space:nowrap}
.mast-line{font-size:15.5px;font-style:italic;color:var(--quiet);max-width:30em}

nav.sitenav{margin-top:clamp(14px,2vw,22px);border-top:2px solid var(--ink);
  border-bottom:1px solid var(--hair)}
.navlist{list-style:none;margin:0;padding:18px 0 15px;display:grid;
  grid-template-columns:repeat(8,max-content);justify-content:center;
  justify-items:center;gap:18px clamp(14px,2vw,30px)}
@media (max-width:1080px){.navlist{grid-template-columns:repeat(4,max-content);
  gap:20px clamp(16px,3.4vw,40px)}}
.navlist a{display:flex;flex-direction:column;align-items:center;gap:13px;color:var(--ink);
  font-family:var(--ui);font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  padding:6px 4px;min-height:48px;text-align:center;max-width:9.5em}
.navlist .ico{width:44px;height:44px;stroke-width:1.35}
.navlist .ico path,.navlist .ico rect,.navlist .ico line,.navlist .ico polyline{stroke-width:1.35}
.navlist a[aria-current] .ico{color:var(--tile)}
.navlist a:hover,.navlist a[aria-current]{color:var(--tile);text-decoration:none}
.navlist a[aria-current]{box-shadow:inset 0 -2px 0 var(--tile)}
.timeline{grid-template-columns:repeat(auto-fit,minmax(min(100%,246px),1fr))}
ol.timeline--sig{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.timeline--sig li{border-top-width:2px}
@media (max-width:700px){ol.timeline--sig{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:430px){ol.timeline--sig{grid-template-columns:repeat(2,minmax(0,1fr))}}
.timeline--sig .t-when{font-family:var(--display);font-size:clamp(26px,3vw,50px);
  line-height:.9;color:var(--tile)}
.timeline--sig .t-what{font-size:clamp(13.5px,1.05vw,16px);line-height:1.36;opacity:1;color:#3A342C}
.spotlight{background:var(--mat);border-top:2px solid var(--ink);
  border-bottom:1px solid var(--hair)}
.spot-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;border-bottom:1px solid var(--hair);padding-bottom:14px;
  margin-bottom:clamp(24px,3vw,38px)}
.spot-head .where{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--tile)}
.spot-head .where .ico{width:1.9em;height:1.9em}
.spot-head p{margin:0;font-size:14.5px;color:var(--quiet);font-style:italic}
.twoup .archfig{overflow:hidden;border-radius:50% 50% 0 0/14% 14% 0 0;
  border-bottom:5px solid var(--tile);margin-bottom:20px}
.twoup .archfig img{margin:0}
.navlist .nav-browse a{color:var(--sala)}

/* ── band rhythm ──────────────────────────────────────────────────── */
.band{padding-block:clamp(44px,5.4vw,80px)}
.band--tight{padding-block:clamp(28px,3.4vw,44px)}
.band--tile{background:var(--tile);color:#F7F1E6}
.band--deep{background:#7E2F1C;color:#F2E4D9}
.band--deep a{color:inherit}
.band--deep .kicker{color:inherit;opacity:.8}
.band--deep .more{border-bottom-color:currentColor}
.statement{overflow:hidden}
.stmt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,4.4vw,68px);
  align-items:center}
.stmt-mark{width:clamp(74px,8vw,124px);height:auto;color:#7FA6C6;opacity:.72;flex:none}
.stmt-line{margin:0;font-family:var(--display);font-size:clamp(26px,3.1vw,46px);
  line-height:1.18;max-width:27em;letter-spacing:-.015em}
.stmt-line b{font-weight:400;font-size:1.62em;line-height:.7;color:#F5C9A6;
  letter-spacing:-.03em;padding-inline:.04em}
.stmt-foot{display:flex;align-items:baseline;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;
  margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid rgba(237,227,210,.26)}
.stmt-foot span{font-size:15.5px;font-style:italic;color:#B9C8D6;max-width:30em}
@media (max-width:760px){.stmt{grid-template-columns:minmax(0,1fr)}}
.band--sala{background:var(--sala);color:#EDE3D2}
.band--tile a,.band--sala a{color:inherit}
.rule-top{border-top:2px solid var(--ink)}
.kicker{display:flex;align-items:center;gap:9px;font-family:var(--ui);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--tile);margin-bottom:14px}
.band--tile .kicker,.band--sala .kicker{color:inherit;opacity:.8}
.more{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;border-bottom:2px solid var(--tile);
  padding-bottom:4px;color:var(--ink)}
.more:hover{text-decoration:none;color:var(--tile)}
.band--tile .more,.band--sala .more{border-bottom-color:currentColor}

/* ── FIGURE SYSTEM — four treatments, one drawing system ───────────
   .fig--bleed  full-width band, caption plate below on the mat
   .fig--mat    photograph inset on a mat card, arch-topped, caption inside
   .fig--break  wider than the measure, caption offset into the margin
   .fig--inset  small, in-column, prose beside it
   Shared: no rounded corners except the arch; caption is typographic with
   its own rule; the credit is smaller and quieter, always beneath. */
figure{margin:0}
.fig-cap{font-size:16.5px;line-height:1.45;font-style:italic}
.fig-credit{display:block;font-family:var(--ui);font-style:normal;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--quiet);margin-top:8px;line-height:1.4}

.fig--bleed{margin:0 0 clamp(28px,3.4vw,44px)}
.fig--bleed img{width:100%;height:clamp(320px,58vh,660px);object-fit:cover;background:var(--ink)}
.fig--bleed figcaption{background:var(--mat);border-bottom:1px solid var(--hair)}
.fig--bleed figcaption>span{display:block;max-width:1480px;margin:0 auto;
  padding:14px var(--gut) 16px}

.fig--mat{background:var(--mat);border:1px solid var(--hair);padding:22px 22px 0}
.fig--mat .arch{overflow:hidden;border-radius:50% 50% 0 0/22% 22% 0 0;background:var(--ink)}
.fig--mat img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fig--mat figcaption{border-top:1px solid var(--hair);margin-top:20px;padding:15px 0 20px}

.fig--break{margin:clamp(28px,3.4vw,44px) 0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,200px);gap:24px;align-items:end}
.fig--break img{width:100%;aspect-ratio:8/5;object-fit:cover;background:var(--ink);
  border-bottom:5px solid var(--tile)}
.fig--break figcaption{border-top:1px solid var(--ink);padding-top:10px}

.fig--inset{float:right;width:min(38%,330px);margin:6px 0 24px 30px;
  border-left:3px solid var(--sala);padding-left:16px}
.fig--incol{margin:clamp(26px,3vw,38px) 0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,2.4vw,30px);
  align-items:start;border-left:3px solid var(--sala);padding-left:18px}
.fig--incol img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ink)}
.fig--incol figcaption{padding-top:2px}
.fig--incol .fig-cap{font-size:16px;line-height:1.45}
@media (max-width:640px){.fig--incol{grid-template-columns:minmax(0,1fr)}}
.fig--inset img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--ink)}
.fig--inset figcaption{padding-top:10px}
.fig--inset .fig-cap{font-size:15px;line-height:1.4}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(16px,2vw,28px)}
.gallery figure{background:var(--mat);border:1px solid var(--hair);padding:16px 16px 0}
.gallery img{width:100%;aspect-ratio:8/5;object-fit:cover;background:var(--ink)}
.gallery figcaption{border-top:1px solid var(--hair);margin-top:14px;padding:12px 0 16px}

/* ── homepage: lead ───────────────────────────────────────────────── */
.lead-band{position:relative;background:var(--ink);color:#F7F2E8;
  min-height:min(78vh,700px);display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden}
.lead-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lead-plate{position:relative;padding-block:clamp(120px,20vh,230px) clamp(26px,3vw,44px);
  background:linear-gradient(to top,rgba(16,13,11,.94) 14%,rgba(16,13,11,.5) 52%,transparent)}
.lead-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(22px,3.6vw,56px);align-items:end}
.lead-grid h2{font-size:clamp(34px,5.4vw,80px);line-height:.95;color:#F7F2E8;
  text-wrap:balance;max-width:17em}
.lead-grid h2 a{color:inherit}
.lead-dek{font-size:clamp(16.5px,1.3vw,19.5px);line-height:1.5;color:#E4D9C6;
  font-style:italic;margin:0 0 8px}
.lead-band .kicker{color:#E9B9A8}

/* ── signature: numerals as the repeating mark ────────────────────── */
.sig{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0}
.sig>div{padding:0 clamp(18px,2vw,30px);border-left:1px solid var(--hair)}
.sig>div:first-child{border-left:0;padding-left:0}
.sig .n{font-family:var(--display);font-size:clamp(54px,5.6vw,88px);line-height:.86;
  color:var(--tile)}
.sig p{margin:12px 0 0;font-size:16.5px;line-height:1.45;color:#3A342C;max-width:22em}

/* ── two-up + short group ─────────────────────────────────────────── */
.twoup{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.twoup h3{font-size:clamp(26px,2.8vw,40px);line-height:1.06;margin-bottom:14px}
.twoup h3 a{color:inherit}
.twoup h4{font-size:clamp(21px,1.9vw,27px);line-height:1.12;margin-bottom:10px}
.twoup h4 a{color:inherit}
.twoup .side{border-left:1px solid var(--hair);padding-left:clamp(18px,2vw,30px)}
.twoup p{margin:0;color:#3A342C}
.twoup img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}

.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
@media (min-width:1080px){.pick{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pick article{display:flex;flex-direction:column;min-width:0}
.pick img{width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--ink);
  margin-bottom:14px}
.pick h4{font-size:clamp(20px,1.55vw,24px);line-height:1.12;margin-bottom:9px;min-height:2.24em}
.pick h4 a{color:inherit}
.pick p{margin:0 0 14px;font-size:16.5px;line-height:1.5;color:#3A342C}
.pick--img .pick-fig{display:block;overflow:hidden;
  border-radius:50% 50% 0 0/13% 13% 0 0;border-bottom:5px solid var(--tile);margin-bottom:14px}
.pick--img .pick-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ink);
  margin:0;transition:transform .5s ease}
.pick--img .pick-fig:hover img{transform:scale(1.035)}
.pick--img .sec{margin:0 0 10px;border-top:0;padding-top:0}
.pick--img h4{min-height:0;font-size:clamp(19px,1.5vw,23px)}
.pick .sec{margin-top:auto;font-family:var(--ui);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--quiet);font-weight:600;display:flex;align-items:center;gap:7px;
  border-top:1px solid var(--hair);padding-top:10px}
.quietline{font-family:var(--display);font-size:clamp(28px,3.5vw,52px);line-height:1.12;
  max-width:26em;margin:0}

/* ── reading page ─────────────────────────────────────────────────── */
.art-head{padding-top:clamp(28px,3.4vw,52px);
  max-width:calc(var(--measure) + 2 * var(--gut));margin-inline:auto}
.art-head h1{font-size:clamp(31px,4.4vw,62px);line-height:1;text-wrap:balance;
  max-width:none;margin-bottom:20px}
.standfirst{font-size:clamp(18px,1.7vw,23px);line-height:1.46;color:#4A423A;
  font-style:italic;max-width:none;margin:0 0 clamp(24px,3vw,38px)}
.prose{max-width:var(--measure);margin-inline:auto;display:flow-root}
.prose>p{margin:0 0 20px}
.prose>h2{font-size:clamp(25px,2.4vw,34px);line-height:1.08;margin:clamp(30px,3.4vw,44px) 0 15px}
.art-open>p:first-of-type::first-letter{font-family:var(--display);font-size:4.1em;
  line-height:.76;float:left;padding:.06em .09em 0 0;color:var(--tile)}
.lead{font-size:clamp(18px,1.6vw,21.5px);line-height:1.5;font-style:italic;color:#4A423A}
.prose a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in oklab,var(--tile) 45%,transparent)}
.wide{max-width:min(1340px,100%);margin-inline:auto}

/* Notes-for-Design furniture — no side rail; these interrupt the column */
.chron{margin:0}
.timeline{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(18px,2.2vw,30px)}
.timeline li{display:flex;flex-direction:column;gap:8px;border-top:2px solid currentColor;
  padding-top:12px;min-width:0}
.t-when{font-family:var(--display);font-size:23px;line-height:1.05}
.t-what{font-size:16px;line-height:1.42;opacity:.86}

.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(16px,2vw,26px);background:var(--mat);border-top:2px solid var(--ink);
  border-bottom:1px solid var(--hair);padding:clamp(22px,2.6vw,34px)}
.terms dl{margin:0}
.terms dt{font-family:var(--display);font-size:21px;line-height:1.1;color:var(--sala)}
.terms dd{margin:7px 0 0;font-size:16.5px;line-height:1.48}

.callout{background:var(--mat);border-left:5px solid var(--tile);padding:22px 24px;margin:0}
.callout p{margin:0 0 10px;font-size:17.5px;line-height:1.52}
.callout p:last-child{margin:0}
.callout ul{margin:0;padding-left:1.1em;font-size:17.5px;line-height:1.5}
.callout li+li{margin-top:7px}
.note{font-size:16.5px;line-height:1.5;color:var(--quiet);border-top:1px solid var(--hair);
  padding-top:12px}
.pullquote{margin:clamp(26px,3vw,40px) 0;border:0;padding:0}
.pullquote p{font-family:var(--display);font-size:clamp(24px,2.4vw,34px);line-height:1.16;
  margin:0;color:var(--sala)}
.blockquote{margin:clamp(24px,3vw,36px) 0;padding-left:22px;border-left:3px solid var(--sala)}
.blockquote p{margin:0;font-size:19px;line-height:1.55;font-style:italic}
.blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:clamp(16px,2vw,26px)}
.statblock{border-top:2px solid var(--ink);padding-top:12px;min-width:0}
.stat-num{display:block;font-family:var(--display);font-size:clamp(38px,3.6vw,54px);
  line-height:.92;color:var(--tile)}
.stat-label{display:block;margin-top:8px;font-size:15.5px;line-height:1.4;color:#3A342C}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;font-size:16.5px;display:block;
  overflow-x:auto;white-space:normal}
.versus caption,.datatable caption{text-align:left;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--quiet);font-weight:600;padding-bottom:10px}
.versus th,.versus td,.datatable th,.datatable td{border-bottom:1px solid var(--hair);
  padding:11px 14px 11px 0;text-align:left;vertical-align:top;min-width:8em}
.versus th,.datatable th{font-family:var(--display);font-weight:400;font-size:18px;
  border-bottom:2px solid var(--ink)}

/* cards */
.profile-grid,.org-grid,.further-grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(16px,2vw,26px)}
.profile-card{background:var(--mat);border:1px solid var(--hair);padding:20px;
  display:flex;flex-direction:column;min-width:0}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:14px;
  background:var(--ink)}
.profile-card h3{font-size:23px;line-height:1.1}
.profile-card .p-role{margin:6px 0 10px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tile);font-weight:600}
.profile-card p{margin:0 0 10px;font-size:16.5px;line-height:1.48}
.profile-card .p-links{margin-top:auto;padding-top:10px;border-top:1px solid var(--hair);
  font-size:15.5px}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--mat);
  border:1px solid var(--hair);padding:16px 18px;color:var(--ink);min-width:0}
.org-card:hover{text-decoration:none;border-color:var(--tile)}
.org-logo{height:34px;width:auto;max-width:100%;object-fit:contain;margin-bottom:6px}
.org-name{font-family:var(--display);font-size:20px;line-height:1.1}
.org-host{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.entity-ref{white-space:nowrap}
.further-grid a{background:var(--mat);border:1px solid var(--hair);border-left:4px solid var(--sala);
  padding:16px 18px;color:var(--ink);font-family:var(--display);font-size:20px;line-height:1.16}
.further-grid a:hover{text-decoration:none;border-left-color:var(--tile);color:var(--tile)}
.readnext{background:var(--mat);border-top:2px solid var(--ink);border-bottom:1px solid var(--hair)}
.rn-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--hair);padding-bottom:14px;margin-bottom:clamp(22px,2.6vw,32px)}
.rn-head .where{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--tile)}
.rn-head .where .ico{width:1.9em;height:1.9em}
.rn-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.rn-grid li{border-top:0;padding-top:0}
.rn-card{display:flex;flex-direction:column;color:var(--ink);height:100%}
.rn-card:hover{text-decoration:none}
.rn-fig{display:block;overflow:hidden;border-radius:50% 50% 0 0/12% 12% 0 0;
  border-bottom:4px solid var(--hair);margin-bottom:14px}
.rn-fig img{width:100%;aspect-ratio:5/3;object-fit:cover;background:var(--ink);
  transition:transform .5s ease}
.rn-card:hover .rn-fig{border-bottom-color:var(--tile)}
.rn-card:hover .rn-fig img{transform:scale(1.04)}
.rn-card .r-sec{margin-bottom:9px}
.rn-title{font-family:var(--display);font-size:clamp(20px,1.7vw,25px);line-height:1.14}
.rn-card:hover .rn-title{color:var(--tile)}
.related-links{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(14px,1.8vw,24px)}
.related-links li{border-top:2px solid var(--ink);padding-top:12px;min-width:0}
.related-links a{font-family:var(--display);font-size:21px;line-height:1.14;color:var(--ink)}
.related-links a:hover{color:var(--tile);text-decoration:none}
.related-links .r-sec{display:flex;align-items:center;gap:6px;font-family:var(--ui);font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--quiet);font-weight:600;
  margin-bottom:8px}

/* section & archive listings */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--hair);padding:clamp(16px,2vw,22px) 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(12px,2.4vw,40px);align-items:baseline}
.cat-list li:first-child{border-top:2px solid var(--ink)}
.cat-list h3{font-size:clamp(21px,2.1vw,29px);line-height:1.1}
.cat-list h3 a{color:var(--ink)}
.cat-list h3 a:hover{color:var(--tile);text-decoration:none}
.cat-list p{margin:0;font-size:16.5px;line-height:1.5;color:#3A342C}
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(20px,2.6vw,38px)}
.hub section{min-width:0}
.hub h2{font-size:clamp(22px,2.1vw,28px);line-height:1.1;margin-bottom:10px}
.hub h2 a{color:var(--ink)}
.hub ul{list-style:none;margin:12px 0 0;padding:0}
.hub li{border-top:1px solid var(--hair);padding:9px 0;font-size:16.5px;line-height:1.4}
.hub .blurb{margin:0;font-size:16px;color:var(--quiet);font-style:italic}
.hub .hub-k{display:flex;align-items:center;gap:8px;color:var(--tile);margin-bottom:9px}

/* ── supporters strip — footer furniture ──────────────────────────── */
.supporters{border-top:2px solid var(--ink);background:var(--mat)}
.sup-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;padding-top:clamp(22px,2.6vw,32px)}
.sup-head h2{font-size:clamp(20px,1.9vw,26px)}
.sup-head p{margin:0;font-size:14px;color:var(--quiet);font-style:italic}
.sup-group{padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--hair)}
.sup-group>h3{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);
  font-family:var(--ui);font-weight:700;margin-bottom:14px}
.sup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width:600px){.sup-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1060px){.sup-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1300px){.sup-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1512px){.sup-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:459px){.sup-grid{grid-template-columns:minmax(0,1fr)}}
/* constant tile: never grows, never 1fr — same box at every count and breakpoint */
.sponsor{flex:0 0 256px;min-height:168px;max-width:100%;display:flex;flex-direction:column;
  color:var(--ink);border:1px solid var(--hair);background:var(--paper);padding:14px}
.sponsor:hover{text-decoration:none;border-color:var(--tile)}
.sponsor img{width:100%;height:52px;max-height:52px;object-fit:contain;background:var(--ink);
  padding:6px 10px;margin-bottom:11px}
.sponsor-name{font-family:var(--display);font-size:18px;line-height:1.15;
  overflow-wrap:anywhere}
.sponsor-blurb{display:block;width:auto;min-width:0;margin:8px -12px 0;padding:0 12px;
  font-size:14px;line-height:1.4;color:var(--quiet)}
.sponsor.feat{border-color:var(--hair)}


/* ── footer — the site's own plate, not a generic strip ─────────── */
footer.site{background:var(--ink);color:#E4D9C6;padding-block:clamp(30px,3.4vw,46px) clamp(34px,4vw,54px)}
footer.site a{color:#E4D9C6}
footer.site a:hover{color:#E9A88E;text-decoration:none}
.foot-top{display:grid;grid-template-columns:auto minmax(min-content,1fr) auto;gap:clamp(20px,3vw,50px);
  align-items:start;padding-bottom:clamp(22px,2.6vw,32px);border-bottom:1px solid rgba(228,217,198,.22)}
.foot-mark{color:var(--tile);flex:none;width:clamp(86px,9.4vw,138px);height:auto;margin-top:4px}
.foot-name{font-family:'Libre Caslon Text',var(--display);font-weight:700;
  font-size:clamp(19px,2.5vw,36px);line-height:1;letter-spacing:-.022em;white-space:nowrap}
.foot-name em{font-style:normal;color:#E9A88E}
.foot-line{font-size:16px;color:#B5A794;margin:12px 0 0;max-width:none}
.foot-dom{display:inline-block;margin-top:12px;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#B5A794;font-weight:600;border-top:1px solid rgba(228,217,198,.25);
  padding-top:9px}
.foot-sig{list-style:none;margin:0;padding:0;display:flex;gap:clamp(16px,2vw,30px);flex-wrap:wrap}
.foot-sig li{display:flex;flex-direction:column;gap:5px;border-top:2px solid var(--tile);
  padding-top:10px;min-width:0}
.foot-sig b{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.4vw,36px);
  line-height:.9;color:#E9A88E}
.foot-sig span{font-size:13.5px;color:#B5A794;line-height:1.35}
.foot-cols{display:flex;flex-wrap:wrap;gap:14px clamp(26px,4vw,58px);
  padding-top:clamp(18px,2.2vw,26px)}
.foot-cols div{display:flex;flex-direction:column;gap:8px;min-width:0}
.foot-cols nav{display:flex;flex-wrap:wrap;gap:2px 0;max-width:44em}
.foot-cols nav a{padding-right:13px;margin-right:13px;
  border-right:1px solid rgba(228,217,198,.22)}
.foot-cols nav a:last-child{padding-right:0;margin-right:0;border-right:0}
.foot-cols span{font-family:var(--ui);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#8E8271;font-weight:600}
.foot-cols a{font-size:14.5px;line-height:1.5}

/* ── narrow ───────────────────────────────────────────────────────── *//* ── narrow ───────────────────────────────────────────────────────── */
@media (max-width:1200px){
  .foot-top{grid-template-columns:auto minmax(0,1fr)}
  .foot-sig{grid-column:1/-1;border-top:1px solid rgba(228,217,198,.22);padding-top:18px}
  .foot-name{white-space:normal}
}
@media (max-width:900px){
  body{font-size:18px}
  .lead-grid,.twoup,.fig--break,.cat-list li{grid-template-columns:minmax(0,1fr)}
  .fig--break figcaption{border-top:1px solid var(--ink)}
  .twoup .side{border-left:0;border-top:1px solid var(--hair);padding-left:0;padding-top:24px}
  .sig>div{border-left:0;border-top:1px solid var(--hair);padding:18px 0 0}
  .sig>div:first-child{border-top:0;padding-top:0}
  .fig--inset{float:none;width:auto;margin:24px 0}
  .foot-top{grid-template-columns:minmax(0,1fr);gap:22px}
  .pick h4{min-height:0}
}
@media (max-width:430px){
  .mast-name{white-space:normal;font-size:clamp(21px,7.6vw,30px);line-height:1.06}
  .mark{width:56px}
}
@media (max-width:600px){
  .lead-plate{padding-block:96px 22px}
  .lead-grid{gap:16px}
  .stmt-line b{font-size:1.35em}
  .rn-head,.spot-head,.sup-head{gap:10px}
  .terms{padding:20px 18px}
  .fig--bleed img{height:min(46vh,300px)}
  .art-open>p:first-of-type::first-letter{font-size:3.4em}
  .foot-cols nav a{padding-right:10px;margin-right:10px}
}
@media (max-width:560px){
  .navlist{gap:16px 10px;padding:14px 0 12px;grid-template-columns:repeat(4,max-content)}
  .navlist a{font-size:9.5px;letter-spacing:.06em;max-width:7em;gap:9px}
  .navlist .ico{width:30px;height:30px}
  .mast-line{display:none}
}
@media print{
  nav.sitenav,.supporters{display:none}
  body{background:#fff}
}

/* 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}
.sup-head{flex-wrap:wrap!important}
.sup-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!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:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.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}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!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}

/* op-nav-collapse: this nav printed 224px of stacked links at 390 before any content
   (8 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "centre-rule", seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (18px measured) the button carries the build's
   gutter (clamp(18px,4vw,44px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (860px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "plus" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-fold{display:none}
@media (max-width:860px){
  .nav-fold{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;border-bottom:2px solid currentColor;border-radius:0;padding:8px 6px;letter-spacing:.16em;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-fold-bars{width:11px;height:11px;flex:none;position:relative;border-top:1.5px solid currentColor;margin-top:-1px;box-shadow:inset 5px 0 0 -3.75px currentColor}
  .sitenav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-fold-c:checked ~ .sitenav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .masthead.wrap:has(> .nav-fold){display:flow-root}
  .nav-fold:not(:has(~ .sitenav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2012px at 390, 30% of the whole page. Two columns bring it to
   1468px (27% shorter). Checked before writing: no new overflow, smallest mark still
   138px wide, longest blurb 6 lines, tile heights 172-231px.
   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 (.sup-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){
  .sup-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sup-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-grid > * *{min-width:0!important;max-width:100%}
    .sup-grid img,.sup-grid svg{max-width:100%;height:auto}

}

/* op-blurb-rows: money blurbs ran to 4 rows at 390, 1342px of tier across
   11 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sup-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
  .sup-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sup-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){
  .sup-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
.cat-list h2:where(.rt-h3) a{color: var(--ink);}
h2:where(.rt-h3){font-family: var(--display); font-weight: 400; letter-spacing: -0.018em; margin: 0px;}
h2:where(.rt-h3), h3:where(.rt-h4){font-family: var(--display); font-weight: 400; letter-spacing: -0.018em; margin: 0px;}
.twoup h2:where(.rt-h3){font-size: clamp(26px, 2.8vw, 40px); line-height: 1.06; margin-bottom: 14px;}
.twoup h2:where(.rt-h3) a{color: inherit;}
.twoup h3:where(.rt-h4){font-size: clamp(21px, 1.9vw, 27px); line-height: 1.12; margin-bottom: 10px;}
.twoup h3:where(.rt-h4) a{color: inherit;}
.pick h3:where(.rt-h4){font-size: clamp(20px, 1.55vw, 24px); line-height: 1.12; margin-bottom: 9px; min-height: 2.24em;}
.pick h3:where(.rt-h4) a{color: inherit;}
.pick--img h3:where(.rt-h4){min-height: 0px; font-size: clamp(19px, 1.5vw, 23px);}
.cat-list h2:where(.rt-h3){font-size: clamp(21px, 2.1vw, 29px); line-height: 1.1;}
.cat-list h2:where(.rt-h3) a:hover{color: var(--tile); text-decoration: none;}
.sup-group > h2:where(.rt-h3){font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--quiet); font-family: var(--ui); font-weight: 700; margin-bottom: 14px;}
@media (max-width: 900px){.pick h3:where(.rt-h4){min-height: 0px;}}
h1:where(.rt-h2){font-family: var(--display); font-weight: 400; letter-spacing: -0.018em; margin: 0px;}
.lead-grid h1:where(.rt-h2){font-size: clamp(34px, 5.4vw, 80px); line-height: 0.95; color: rgb(247, 242, 232); text-wrap: balance; max-width: 17em;}
.lead-grid h1:where(.rt-h2) a{color: inherit;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.rn-card > span.rn-fig > img,
  article > a.pick-fig > img,
  article > div.archfig > img,
  article > figure.fig--bleed > img,
  div.art-open.prose > figure.fig--inset > img,
  div.twoup > aside.side > img,
  div.wide > figure.fig--break > img,
  main > figure.fig--bleed > img,
  main > section.lead-band > img){height:auto}
/* op-img-dims:end */