/* Gering & Lopez — Cross-Section
   A painting is a stack; the site is arranged like one. */

:root{
  --paper:#f1ebdd; --panel:#efe7d4; --ink:#2a2318; --body:#3a3226;
  --muted:#6e6455; --accent:#8c4a28; --rule:rgba(42,35,24,.30); --rule-2:rgba(42,35,24,.55);
  --divider:#c8b89a; --dark:#221c13; --light-ink:#f4e9d8;
  --l-stretcher:#8a6a44; --l-canvas:#cfb587; --l-ground:#e3d9bf;
  --l-paint:#8c4a28; --l-varnish:#c9903a; --l-light:#ead9ab; --l-frame:#514537;
  --sans:'Bricolage Grotesque',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --display:'EB Garamond',Georgia,serif;
  --gut:clamp(18px,4.4vw,52px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--serif);font-size:19px;line-height:1.72;
  text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);font-weight:700;margin:0;line-height:1.1}
p{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.eyebrow.mute{color:var(--muted)}
.band{border-top:2px solid var(--ink);padding:44px 0}
.band-head{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;
  justify-content:space-between;margin-bottom:26px}
.band-head h2{font-size:clamp(22px,2.6vw,30px)}
.band-note{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted);margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:8px 14px;background:var(--ink);color:var(--light-ink)}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink)}
.masthead-in{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:flex-end;
  justify-content:space-between;padding-block:26px 20px}
.lockup{font-family:var(--display);font-size:clamp(20px,2.4vw,25px);font-weight:600;
  letter-spacing:.2em;color:var(--ink);text-decoration:none;display:block}
.lockup:hover{color:var(--ink)}
.lockup .amp{font-style:italic;font-weight:500;color:var(--accent)}
.standing{font-family:var(--display);font-style:italic;font-size:14.5px;color:var(--muted);margin:6px 0 0}
.layer-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-bottom:3px}
.layer-nav a{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.11em;
  color:var(--muted);text-decoration:none}
.layer-nav a:hover{color:var(--ink)}
.layer-nav a.on{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:2px}
.layer-nav .sep{color:var(--divider)}
.layer-nav .util{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.11em;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}

/* ---------- layer strip (horizontal depth gauge) ---------- */
.strip{display:flex;width:100%;border-bottom:1px solid var(--rule-2)}
.strip a{flex:1 1 0;min-width:0;height:34px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.1em;
  color:var(--ink);position:relative;overflow:hidden;white-space:nowrap}
.strip a.dk{color:var(--light-ink)}
.strip a.here{outline:2px solid var(--ink);outline-offset:-2px;z-index:1}
.strip a:hover{filter:brightness(1.06)}
.strip-note{font-family:var(--sans);font-size:10.5px;letter-spacing:.04em;color:var(--muted);
  padding:8px 0 0;margin:0}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:2px solid var(--ink)}
.hero img{width:100%;height:clamp(300px,52vw,620px);object-fit:cover}
.hero-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:baseline;
  padding:14px 0 18px;border-top:1px solid var(--rule)}
.hero-cap p{margin:0;font-size:16px;color:var(--muted);max-width:78ch}
.credit{font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}

.thesis{padding:46px 0 40px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:16px 56px;align-items:end}
.thesis h1{font-size:clamp(30px,4.6vw,52px);line-height:1.04;max-width:17ch}
.thesis p{margin:0;font-size:clamp(17px,1.5vw,19px);color:var(--body)}

/* ---------- the stack (homepage index) ---------- */
/* stack index — see cross-section block below */

/* ---------- feature ---------- */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:34px;align-items:start}
.feature h2{font-size:clamp(28px,3.6vw,44px);line-height:1.06}
.feature .lead{font-size:19.5px;color:var(--body);margin:16px 0 0}
.feature img{aspect-ratio:4/3;object-fit:cover;width:100%;border:1px solid var(--rule)}
.pullquote{margin:26px 0 0;border-left:3px solid var(--accent);padding:2px 0 2px 24px}
.pullquote p{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.4vw,29px);
  line-height:1.34;color:var(--ink);margin:0}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:11px;
  letter-spacing:.14em;color:var(--muted);margin-top:12px}
.btn{display:inline-block;margin-top:22px;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  border:1px solid var(--ink);padding:11px 20px}
.btn:hover{background:var(--ink);color:var(--light-ink)}
.meta{font-family:var(--sans);font-size:13px;letter-spacing:.03em;color:var(--muted);margin:0 0 14px}

/* ---------- sampler ---------- */
.sampler{border-top:1px solid var(--rule)}
.samp{display:grid;grid-template-columns:118px minmax(0,1fr) minmax(0,1.1fr);gap:10px 30px;
  padding:22px 0;border-bottom:1px solid var(--rule);align-items:start}
.samp .tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ink);
  border-left:6px solid var(--band);padding-left:10px}
.samp .tag small{display:block;font-weight:600;letter-spacing:.08em;color:var(--muted);font-size:9.5px;margin-top:4px}
.samp p{margin:0;font-size:17px}
.samp ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.samp ul a{font-size:16.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.samp ul a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- supporters ---------- */
.bench{display:flex;flex-wrap:wrap;gap:12px}
.sponsor{flex:1 1 300px;min-width:0;background:var(--dark);border:1px solid var(--ink);
  padding:10px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-decoration:none}
.sponsor img{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain;
  min-height:40px;margin-inline:auto}
.sponsor-name{display:block;min-height:1em;font-family:var(--sans);font-size:11.5px;
  letter-spacing:.1em;color:var(--light-ink);text-align:center;line-height:1}
.sponsor:hover{background:#2f2718}
.sponsor.feat{flex:1 1 460px;padding:16px 30px;gap:8px}
.sponsor.feat img{max-height:48px;min-height:48px}
.bench-tier{margin-bottom:12px;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;color:var(--muted)}

/* ---------- footer ---------- */
.site-foot{border-top:2px solid var(--ink);margin-top:8px;padding:30px 0 44px}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:22px 48px;align-items:start}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;padding:0;list-style:none}
.foot-nav a{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--muted);text-decoration:none}
.foot-nav a:hover{color:var(--ink)}
.disclaimer{font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted);margin:0}

/* ---------- article ---------- */
.post{display:grid;
  grid-template-columns:minmax(var(--gut),1fr) min(72ch,100% - (2 * var(--gut))) minmax(var(--gut),1fr)}
.post > *{grid-column:2}
.post > .bleed{grid-column:1 / -1}
.post-head{padding:44px 0 6px}
.post-head h1{font-size:clamp(30px,4.4vw,50px);line-height:1.05}
.lead{font-size:21px;line-height:1.6;color:var(--body);margin:18px 0 0}
.byline{font-family:var(--sans);font-size:13.5px;letter-spacing:.04em;color:var(--muted);margin:18px 0 0;
  padding-top:14px;border-top:1px solid var(--rule)}
.post > h2{font-size:clamp(21px,2.4vw,27px);margin:40px 0 14px}
.post > h3{font-size:19px;margin:28px 0 10px}
.post > ul{padding-left:20px;margin:0 0 1.2em}
.post > ul li{margin-bottom:.5em}
.post > .pullquote{margin:34px 0}
.post-sec{margin:34px 0 0}
.post-sec h2{font-size:clamp(21px,2.4vw,27px);margin:0 0 14px}
.post-sec .note{font-size:17px;color:var(--muted);border-left:2px solid var(--divider);padding-left:16px}
.post-sec ul{padding-left:20px}
.post-sec li{margin-bottom:.5em}

.article-figure{margin:0}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;
  align-items:baseline;font-size:15.5px;color:var(--muted);padding:12px var(--gut) 0}
.bleed.article-figure img{height:clamp(240px,42vw,520px)}
.post > .article-figure:not(.bleed) figcaption{padding-inline:0}
.figure-band{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-bottom:16px;margin:40px 0}

/* specimen — the prose interruption */
.specimen{background:var(--panel);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  margin:44px 0;padding:30px 0 34px}
.specimen .inner{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.specimen h2{font-size:clamp(19px,2.2vw,25px);margin:0 0 4px}
.specimen .kick{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  color:var(--accent);margin:0 0 10px}
.spec-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 34px;margin:20px 0 0}
.spec-list > div{border-top:1px solid var(--rule);padding-top:12px}
.spec-list dt{font-family:var(--sans);font-weight:700;font-size:14.5px;color:var(--ink);
  display:block;margin-bottom:4px}
.spec-list dd{margin:0;font-size:16.5px;line-height:1.6;color:var(--body)}
.spec-plain{margin:18px 0 0;padding-left:20px}
.spec-plain li{margin-bottom:.55em;font-size:17px}

.timeline{list-style:none;counter-reset:t;margin:20px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0}
.timeline li{border-top:3px solid var(--accent);padding:14px 20px 4px 0}
.t-when{display:block;font-family:var(--sans);font-weight:700;font-size:13.5px;letter-spacing:.06em;
  color:var(--ink);margin-bottom:6px}
.t-what{display:block;font-size:16.5px;line-height:1.55;color:var(--body)}

.callout{background:var(--panel);border:1px solid var(--ink);border-left:6px solid var(--accent);
  padding:20px 24px;margin:34px 0}
.callout p:last-child{margin-bottom:0}
.callout h2{font-size:19px;margin-bottom:10px}
.callout ul{margin:0;padding-left:20px}
.callout li{margin-bottom:.4em;font-size:17px}
.note{font-size:17px;color:var(--muted)}
.blockquote{margin:32px 0;padding-left:24px;border-left:1px solid var(--rule-2)}
.blockquote p{font-family:var(--display);font-size:22px;font-style:italic;line-height:1.45;color:var(--ink)}
.blockquote cite{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.1em;color:var(--muted)}

.updown{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:44px 0 0}
.updown a{border:1px solid var(--rule-2);padding:16px 20px;text-decoration:none;display:block}
.updown a:hover{background:var(--panel)}
.updown .dir{display:block;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;
  color:var(--muted);margin-bottom:6px}
.updown .ttl{font-family:var(--serif);font-size:17px;color:var(--ink)}

.related{margin:44px 0 10px;border-top:2px solid var(--ink);padding-top:18px}
.related-links{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 30px}
.related-links li{border-top:1px solid var(--rule);padding-top:10px}
.related-links a{font-family:var(--serif);font-size:17.5px;color:var(--ink);text-decoration:none}
.related-links a:hover{color:var(--accent)}
.related-links .rmeta{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;
  color:var(--muted);margin-top:4px}
.post-end{padding-bottom:40px}

/* ---------- category / index lists ---------- */
.cat-hero{padding:40px 0 34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px 48px;align-items:end}
.cat-hero h1{font-size:clamp(34px,6vw,64px);letter-spacing:.02em}
.cat-hero p{margin:0;font-size:18.5px;color:var(--body)}
.cat-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list > li > a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;
  gap:8px 30px;align-items:baseline;padding:20px 0;text-decoration:none}
.cat-list > li > a:hover{background:var(--panel)}
.cat-list .t{font-family:var(--sans);font-weight:700;font-size:20px;line-height:1.18;color:var(--ink)}
.cat-list .d{font-size:16.5px;color:var(--body);margin:0}
.cat-list .m{font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.hub-sec{margin:0 0 8px}
.hub-sec h2{font-size:24px;margin-bottom:2px}

.prose{max-width:70ch;padding-block:40px 20px}
.prose h1{font-size:clamp(30px,4.4vw,46px);margin-bottom:16px}
.prose h2{font-size:23px;margin:32px 0 10px}

/* ---------- styleguide-only helpers ---------- */
.versus,.datatable{width:100%;border-collapse:collapse;margin:24px 0;font-size:16.5px}
.versus th,.versus td,.datatable th,.datatable td{border:1px solid var(--rule);padding:10px 14px;
  text-align:left;vertical-align:top}
.versus th,.datatable th{font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);background:var(--panel)}
.table-scroll{overflow-x:auto}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:24px 0}
.statblock{border-top:3px solid var(--accent);padding:12px 0 0}
.stat-num{display:block;font-family:var(--sans);font-weight:700;font-size:34px;color:var(--ink);line-height:1}
.stat-label{display:block;font-size:15px;color:var(--muted);margin-top:6px}
.chart{margin:26px 0}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-size:15px;color:var(--muted);margin-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:24px 0}
.gallery figure{margin:0}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font-size:14.5px;color:var(--muted);margin-top:8px}
.profile-grid,.org-grid,.further-grid{display:grid;gap:14px;margin:24px 0;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.profile-card{border:1px solid var(--rule-2);padding:20px;display:flex;flex-direction:column}
.profile-card h3{font-size:19px;margin-bottom:4px}
.p-photo{width:72px;height:72px;object-fit:cover;margin-bottom:12px}
.p-role{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--accent);margin:0 0 10px}
.p-links{margin-top:auto;padding-top:12px;font-family:var(--sans);font-size:13px}
.p-attr{font-size:13px;color:var(--muted)}
.org-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--rule-2);
  padding:16px 18px;text-decoration:none;background:var(--panel)}
.org-logo{max-height:34px;width:auto;object-fit:contain}
.org-name{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink)}
.org-host{font-family:var(--sans);font-size:12px;color:var(--muted)}
.entity-ref{white-space:nowrap}
.further-grid a{border:1px solid var(--rule-2);padding:16px 18px;text-decoration:none;
  font-family:var(--serif);font-size:17px;color:var(--ink);display:flex;align-items:center;min-height:74px}
.further-grid a:hover{background:var(--panel)}
details.more{margin:16px 0}
details.more summary{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);cursor:pointer;padding:8px 0}
.sg-block{border-top:2px solid var(--ink);padding:30px 0 10px;margin-top:26px}
.sg-block > h2{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .thesis,.feature,.cat-hero,.foot-in{grid-template-columns:minmax(0,1fr);gap:20px}
  .samp{grid-template-columns:minmax(0,1fr);gap:12px}
  .samp .tag{border-left:0;border-top:6px solid var(--band);padding:8px 0 0}
  .cat-list > li > a{grid-template-columns:minmax(0,1fr);gap:6px}
  .strip a{font-size:0}
  .strip a::after{content:attr(data-n);font-size:10px;letter-spacing:.06em}
}
@media (max-width:640px){
  body{font-size:18px}
  .hero-cap{grid-template-columns:minmax(0,1fr)}
  
  .sponsor{flex:1 1 100%;padding:10px 16px}
  .sponsor.feat{flex:1 1 100%;padding:12px 18px;gap:6px}
  .sponsor.feat img{max-height:40px;min-height:40px}
  .article-figure figcaption{grid-template-columns:minmax(0,1fr)}
  .lead{font-size:19px}
  /* touch targets */
  .layer-nav{gap:0 14px}
  .layer-nav a,.layer-nav .util{display:inline-block;padding:12px 0}
  .strip a{height:46px}
  .samp ul{gap:0}
  .samp ul a{display:inline-block;padding:9px 0}
  .foot-nav{gap:0 20px}
  .foot-nav a{display:inline-block;padding:14px 0}
  .cat-list > li > a{padding:24px 0}
  .related-links a{display:inline-block;padding:7px 0}
  .updown a{padding:20px}
}
@media print{
  .layer-nav,.strip,.bench,.site-foot .foot-nav{display:none}
  body{background:#fff}
}


/* ---------- cross-section index ---------- */
.xsec{position:relative;border:2px solid var(--ink);background:var(--paper)}
.stack-row{display:grid;grid-template-columns:74px minmax(0,1fr);gap:0;padding:0;text-decoration:none;
  border-top:1px solid var(--rule-2);background:var(--tint);transition:opacity .18s ease,filter .18s ease}
.stack-row:first-child{border-top:0}
.stack-row:hover{filter:none}
.xs-edge{background:var(--band);position:relative;border-right:1px solid var(--rule-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.xs-edge b{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--ink);opacity:.55;position:relative}
.stack-row.dk .xs-edge b{color:var(--light-ink);opacity:.7}
.xs-edge::after{content:"";position:absolute;inset:0;opacity:.5}
.xs-edge.grain::after{background:repeating-linear-gradient(96deg,rgba(0,0,0,.22) 0 1px,transparent 1px 9px)}
.xs-edge.weave::after{background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 6px),
  repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 6px)}
.xs-edge.grit::after{background:radial-gradient(rgba(0,0,0,.2) 1px,transparent 1.2px) 0 0/7px 7px}
.xs-edge.gloss::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 60%)}
.row-in{display:grid;grid-template-columns:176px minmax(0,1fr) minmax(0,auto);gap:6px 26px;
  align-items:center;padding:20px 26px;transition:transform .18s ease}
.stack-row .lab{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:.1em;color:var(--ink)}
.stack-row .gloss{font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--body)}
.stack-row .lead-a{font-family:var(--serif);font-size:16.5px;color:var(--ink);text-align:right}
.stack-row .depth{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--muted);display:block;margin-top:5px}
.stack-row.peeled{opacity:.26;filter:saturate(.35)}
.stack-row.peeled .row-in{transform:translateX(16px)}
.stack-row.at{position:relative;z-index:2;box-shadow:inset 0 0 0 2px var(--ink)}
.row-in{min-height:calc(38px + var(--pieces,3) * 16px)}
.xsec:not(.is-live) .stack-row{opacity:1;filter:none}
.xs-gauge{position:absolute;left:0;top:100%;width:74px;height:0;z-index:3;cursor:ns-resize;
  transition:top .18s ease}
.xs-gauge::before{content:"";position:absolute;left:0;right:-6px;top:-1px;height:3px;background:var(--ink)}
.xs-gauge::after{content:"\25C6";position:absolute;right:-19px;top:-11px;font-size:13px;color:var(--ink);
  line-height:1;background:var(--paper);padding:2px}
.xsec:not(.is-live) .xs-gauge{display:none}
.xsec-read{font-family:var(--sans);font-size:13px;letter-spacing:.02em;color:var(--muted);
  margin:12px 0 0;min-height:2.6em}
.xsec-read b{color:var(--ink)}
.xsec-legend{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.1em;color:var(--muted);margin:0 0 14px}

/* hero */
.hero-rule{display:flex;height:10px}
.hero-rule span{flex:1}
.hero-over{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:baseline;
  padding:14px 0 20px;border-bottom:1px solid var(--rule)}
.hero-over p{margin:0;font-size:16.5px;color:var(--muted);max-width:80ch}

/* ---------- layer page signature ---------- */
.layer-hero{position:relative}
.layer-hero img{width:100%;height:clamp(220px,34vw,400px);object-fit:cover}
.core-figure{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 28px;align-items:stretch;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin:34px 0 0;padding:26px 0}
.core{display:flex;flex-direction:column;border:1px solid var(--rule-2)}
.core span{flex:1;position:relative;min-height:26px;display:flex;align-items:center;padding-left:8px;
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--ink);opacity:.55}
.core span.dk{color:var(--light-ink);opacity:.7}
.core span.here{opacity:1;box-shadow:inset 0 0 0 2px var(--ink);z-index:1;font-weight:700}
.core-note h2{font-size:20px;margin-bottom:8px}
.core-note p{font-size:16.5px;margin:0 0 .7em}
.core-note .rel{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--muted);margin:0}
.look{border-bottom:2px solid var(--ink);padding:28px 0 30px}
.look-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px 34px;margin-top:18px}
.look-grid > div{border-top:1px solid var(--rule);padding-top:12px}
.look-grid dt{font-family:var(--sans);font-weight:700;font-size:14.5px;color:var(--ink);display:block;margin-bottom:5px}
.look-grid dd{margin:0;font-size:16.5px;line-height:1.6}
.look-grid .src{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.05em;margin-top:8px}

/* ---------- specimen variants ---------- */
.specimen.is-versus .inner > .table-scroll{margin-top:16px}
.specimen .versus{margin:0;background:var(--paper)}
.specimen .versus td:first-child{font-family:var(--sans);font-weight:700;font-size:14.5px;width:30%}
.dodont{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 34px;margin-top:18px}
.dodont > div{border-top:3px solid var(--accent);padding-top:12px}
.dodont > div.not{border-top-color:var(--muted)}
.dodont h3{font-family:var(--sans);font-size:11px;letter-spacing:.16em;color:var(--accent);margin-bottom:10px}
.dodont > div.not h3{color:var(--muted)}
.dodont ul{margin:0;padding-left:18px}
.dodont li{margin-bottom:.5em;font-size:16.5px;line-height:1.55}

@media (max-width:900px){
  .stack-row{grid-template-columns:54px minmax(0,1fr)}
  .row-in{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 18px}
  .stack-row .lead-a{text-align:left}
  .xs-gauge{width:54px}
  .core-figure{grid-template-columns:64px minmax(0,1fr);gap:0 20px}
}
@media (max-width:640px){
  .xsec-read{font-size:12.5px}
  .stack-row.peeled .row-in{transform: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}

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

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

}

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

/* op-article-width: the article column was capped at 691px (81 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(var(--gut),1fr) min(72ch,100% - (2 * var(--gut))) minmax(var(--gut),1fr)" (declared in .post) 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){
  article.post{grid-template-columns:minmax(var(--gut),1fr) min(873px, 100%) minmax(var(--gut),1fr)!important}
}
@media (min-width:1600px){
  article.post{grid-template-columns:minmax(var(--gut),1fr) min(clamp(873px, 60.625vw, 1048px), 100%) minmax(var(--gut),1fr)!important}
  article.post > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.cat-list > li > a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.post > figure.article-figure.bleed.figure-band > img,
  div.feature > figure.article-figure > img,
  main > div.hero > img,
  main > figure.layer-hero > img){height:auto}
/* op-img-dims:end */
@media (min-width:700px) and (max-width:1039px){.bench:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.bench:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}