/* zabludow.com — "Cut from Drawings"
   Palette roles (5): ground · paper · ink · accent (vermilion) · secondary (ultramarine)
   Two saturated members, ~205 degrees of hue apart, both used at area. */

:root{
  --ground:#14120F;      /* dark ground — lead band, footer, plates */
  --paper:#F2EDE2;       /* light ground — reading pages */
  --ink:#1C1A16;         /* ink on paper */
  --ink-rev:#F2EDE2;     /* ink on ground */
  --accent:#E4643F;      /* vermilion — accent on dark */
  --accent-ink:#A8391A;  /* vermilion at text contrast on paper */
  --rust:#9E2F12;        /* vermilion at area — filled bands */
  --secondary:#2E4EA8;   /* ultramarine — filled bands, panels */
  --secondary-pale:#DCE3F6;
  --secondary-ink:#EEF1FB;
  --linen:#DED5C6;       /* figure mats */
  --stone:#8C8577;       /* credits, quiet meta */
  --stone-dk:#B9B0A0;    /* quiet meta on dark */
  --rule:#CFC6B4;        /* hairline on paper */
  --rule-dk:#2E2A24;     /* hairline on ground */

  --serif:"Sorts Mill Goudy",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --w-prose:44rem;
  --w-break:1180px;
  --w-wide:1500px;
  --gutter:clamp(18px,4vw,64px);
  --body:17px;
  --para-gap:1.15em;
  --unit-gap:48px;   /* space above/below every inserted unit (>= 2x para gap, >= 32px) */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:var(--body)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1rem;font-weight:400;line-height:1.6;
  overflow-x:hidden;text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.04;margin:0}
p{margin:0 0 var(--para-gap)}
p:last-child{margin-bottom:0}
figure{margin:0}
table{border-collapse:collapse}
::selection{background:var(--secondary);color:var(--secondary-ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;left:12px;top:12px;z-index:99;
  background:var(--accent);color:#fff;padding:10px 14px}

/* ---------- widths ---------- */
.shell{width:100%;max-width:var(--w-wide);margin-inline:auto;padding-inline:var(--gutter)}
.shell-wide{width:100%;max-width:1760px;margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--w-prose)}

/* ---------- drawn devices ---------- */
.mark{display:block;flex:none;width:34px;height:34px;color:var(--accent);stroke:currentColor;fill:none}
.foot h2 .mark{width:30px;height:30px}
.ico{width:1.55em;height:1.55em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.joint{display:block;width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.4;color:var(--stone)}
.divider{display:flex;align-items:center;gap:18px;margin:0;padding:0;border:0}
.divider::after{content:"";flex:1 1 auto;height:1px;background:var(--rule)}
.on-dark .divider::after,.band-dark .divider::after{background:var(--rule-dk)}

/* ---------- masthead ---------- */
.masthead{background:var(--ground);color:var(--ink-rev);border-bottom:1px solid var(--rule-dk)}
.masthead a{color:var(--ink-rev)}
.masthead-in{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(12px,1.5vw,30px);
  padding-top:clamp(16px,1.8vw,34px)}
.logo{display:flex;align-items:flex-end;gap:clamp(10px,1.1vw,20px);text-decoration:none}
.logo:hover{text-decoration:none}
.logo .mark{width:clamp(34px,3.4vw,62px);height:clamp(34px,3.4vw,62px)}
.wordmark{font-family:var(--serif);font-size:clamp(2rem,3.6vw,4.4rem);line-height:.84;letter-spacing:-.02em}
.tagline{font-size:clamp(.78rem,.78vw,1rem);letter-spacing:.01em;text-transform:none;
  color:var(--stone-dk);max-width:38ch;line-height:1.45;padding-bottom:.5em;font-weight:400}
.nav{border-top:1px solid rgba(242,237,226,.28);margin-top:clamp(12px,1.4vw,26px)}
.nav ul{list-style:none;margin:0;padding:clamp(8px,.7vw,14px) 0 clamp(10px,.8vw,16px);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.5vw,34px);
  font-size:clamp(.76rem,.78vw,1rem);letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.nav a{display:inline-flex;align-items:center;gap:.5em;padding:.35em 0;min-height:44px}
.nav a:hover{color:var(--accent);text-decoration:none}
.nav li.terminal{margin-left:auto}
.nav li.terminal a{color:var(--accent)}
.nav a[aria-current]{color:var(--accent)}
.nav .ico{color:var(--accent)}
.nav-compact{display:none}
@media (max-width:720px){
  .nav ul{display:none}
  .nav-compact{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
  .nav-compact a{min-height:44px;display:inline-flex;align-items:center;color:var(--accent)}
  .tagline{display:none}
}

/* ---------- home: lead band ---------- */
.lead-band{background:var(--ground);color:var(--ink-rev)}
.lead-figure{position:relative}
.lead-figure img{width:100%;aspect-ratio:2.35/1;object-fit:cover;object-position:50% 42%}
.lead-figure .scrim{position:absolute;inset:auto 0 0 0;height:72%;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,15,0),rgba(20,18,15,.62) 52%,rgba(20,18,15,.95))}
.lead-hed{position:absolute;inset:auto 0 0 0;padding:var(--gutter)}
.lead-hed h1{max-width:32ch;font-size:clamp(1.85rem,4.1vw,5.4rem);line-height:.98;color:var(--ink-rev)}
.lead-under{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,56px);
  padding:clamp(20px,2vw,44px) 0 clamp(30px,3vw,64px)}
.lead-deck{font-size:clamp(1.02rem,1.02vw,1.4rem);line-height:1.55;color:#DED5C6;max-width:56ch}
.plate-tag{display:flex;align-items:center;gap:10px;color:var(--accent);margin-bottom:.7em;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;font-family:var(--mono)}
.plate-tag svg{width:86px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4;flex:none}
@media (min-width:900px){
  .lead-under{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
}
@media (min-width:2200px){
  .lead-band .lead-figure{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;
    max-width:2560px;margin-inline:auto}
  .lead-band .lead-figure img{aspect-ratio:4/3}
  .lead-band .scrim{display:none}
  .lead-hed{position:static;padding:clamp(32px,3vw,80px)}
  .lead-hed h1{font-size:5.6rem;max-width:24ch}
}

/* ---------- bands ---------- */
.band{padding-block:clamp(40px,5vw,116px)}
.band-dark{background:var(--ground);color:var(--ink-rev)}
.band-dark a{color:var(--accent)}
.band-blue{background:var(--secondary);color:var(--secondary-ink)}
.band-blue a{color:#fff}
.band-rust{background:var(--rust);color:#FBEFE9}
.band-rust a{color:#fff}
.band-quiet{background:var(--paper)}
.kicker{display:flex;align-items:center;gap:.6em;font-size:.78rem;letter-spacing:.17em;
  text-transform:uppercase;font-weight:700;margin-bottom:1.2em;color:var(--accent-ink)}
.kicker .ico{width:1.5em;height:1.5em}
.band-dark .kicker{color:var(--accent)}
.band-blue .kicker{color:var(--secondary-pale)}
.band-rust .kicker{color:#F6CEBE}
.h-xl{font-size:clamp(1.7rem,3vw,4rem)}
.h-lg{font-size:clamp(1.5rem,2.3vw,3.1rem)}
.h-md{font-size:clamp(1.24rem,1.6vw,2.1rem)}
.h-sm{font-size:clamp(1.1rem,1.3vw,1.65rem)}
.statement{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,3.4rem);line-height:1.2;
  max-width:44ch;margin:0}
/* band head: heading beside prose — two text columns, so neither leaves a tall void */
.band-head{display:grid;gap:clamp(18px,2.4vw,72px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.band-head{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}}
.band-figs{display:grid;gap:clamp(20px,2.2vw,52px);grid-template-columns:minmax(0,1fr);
  margin-top:clamp(30px,3.2vw,76px)}
@media (min-width:760px){.band-figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.band-figs>figure{min-width:0}
.fig-fit .fig-sheet{display:flex;align-items:center;justify-content:center}
.fig-fit .fig-sheet>img{aspect-ratio:3/2;object-fit:contain;width:100%}
.two-col{display:grid;gap:clamp(24px,3.2vw,84px);grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trio{display:grid;gap:clamp(22px,2.4vw,60px);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.trio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prose-band p{max-width:68ch;font-size:clamp(1rem,1vw,1.34rem);line-height:1.62}

/* ---------- figure system ---------- */
/* 1 · mat */
.fig-mat{background:var(--linen);padding:clamp(10px,1vw,22px);position:relative}
.band-dark .fig-mat,.band-blue .fig-mat,.band-rust .fig-mat{background:rgba(242,237,226,.14)}
.fig-mat>img{width:100%}
.fig-mat::before,.fig-mat::after{content:"";position:absolute;width:14px;height:14px;
  border:1px solid rgba(28,26,22,.45)}
.fig-mat::before{top:4px;left:4px;border-right:0;border-bottom:0}
.fig-mat::after{bottom:4px;right:4px;border-left:0;border-top:0}
.band-dark .fig-mat::before,.band-dark .fig-mat::after,
.band-blue .fig-mat::before,.band-blue .fig-mat::after{border-color:rgba(242,237,226,.5)}
/* 2 · bleed with accent strip */
.fig-bleed{position:relative;background:var(--ground)}
.fig-bleed>img{width:100%;aspect-ratio:2.35/1;object-fit:cover}
.fig-bleed .strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em clamp(16px,2vw,48px);
  background:var(--rust);color:#FBEFE9;padding:clamp(10px,.9vw,18px) var(--gutter)}
.fig-bleed .strip .cap{flex:1 1 24ch;max-width:72ch;font-size:clamp(.92rem,.86vw,1.15rem);line-height:1.45}
.fig-bleed .strip .cred{font-size:clamp(.78rem,.7vw,.95rem);color:#F6CEBE;font-family:var(--mono)}
/* 3 · drafting sheet */
.fig-sheet{border:1px solid var(--rule);padding:clamp(9px,.8vw,18px);background:#FBF8F1;position:relative}
.fig-sheet::before{content:"";position:absolute;inset:4px;border:1px solid rgba(140,133,119,.4);pointer-events:none}
.fig-sheet>img{width:100%;position:relative}
.fig-sheet .plate{position:absolute;top:0;right:0;transform:translateY(-100%);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone);padding-bottom:6px}
.band-dark .fig-sheet{background:rgba(242,237,226,.06);border-color:var(--rule-dk)}
/* caption typography — one row on wide screens, stacked on narrow; never inherits image height */
figcaption{margin-top:.85em;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em clamp(14px,1.8vw,44px)}
figcaption .cap{flex:1 1 22ch;max-width:64ch;font-size:clamp(.94rem,.88vw,1.18rem);line-height:1.45;
  border-left:2px solid var(--accent-ink);padding-left:.75em}
figcaption .cred{flex:0 1 auto;font-family:var(--mono);font-size:clamp(.76rem,.7vw,.92rem);
  color:var(--stone);letter-spacing:.02em;line-height:1.5}
.band-dark figcaption .cap,.band-blue figcaption .cap,.band-rust figcaption .cap{border-left-color:var(--accent)}
.band-dark figcaption .cred{color:var(--stone-dk)}
.band-blue figcaption .cred{color:var(--secondary-pale)}
.band-rust figcaption .cred{color:#F6CEBE}
.fig-inset{display:grid;gap:clamp(12px,1.2vw,24px);grid-template-columns:minmax(0,1fr)}
@media (min-width:680px){.fig-inset{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .fig-inset figcaption{margin-top:0;flex-direction:column}}

/* ---------- map ---------- */
.map-figure{margin:0}
.map-frame{background:#0D0F12;border:1px solid var(--rule-dk);padding:clamp(8px,.8vw,16px)}
.map-frame svg{display:block;width:100%;height:auto}
.map-legend{display:flex;flex-wrap:wrap;gap:.5em 1.6em;margin-top:.8em;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.06em;color:var(--stone)}
.band-dark .map-legend{color:var(--stone-dk)}

/* ---------- supporters ---------- */
.supporters{background:var(--ground);color:var(--ink-rev);padding-block:clamp(30px,3.2vw,74px)}
.supporters h2{font-size:clamp(1.2rem,1.5vw,1.9rem);color:var(--ink-rev)}
.sup-lead{color:var(--stone-dk);max-width:62ch;margin-top:.7em;font-size:clamp(.95rem,.9vw,1.18rem)}
.sup-groups{display:grid;gap:clamp(22px,2.4vw,56px);grid-template-columns:minmax(0,1fr);margin-top:clamp(20px,2vw,44px)}
@media (min-width:1000px){.sup-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sup-group h3{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:700;padding-bottom:10px;border-bottom:1px solid var(--rule-dk)}
.sup-list{display:flex;flex-wrap:wrap;gap:0}
.sponsor{flex:0 0 100%;display:flex;align-items:center;gap:clamp(14px,1.4vw,28px);
  padding:14px 0;border-bottom:1px solid var(--rule-dk);min-height:76px;text-decoration:none;color:var(--ink-rev)}
.sponsor:hover{text-decoration:none;background:rgba(242,237,226,.05)}
.sponsor img{flex:0 0 216px;width:216px;height:56px;object-fit:contain;object-position:left center;
  background:#22201B;padding:8px 12px}
.sponsor-name{font-size:clamp(.95rem,.9vw,1.15rem);font-weight:600;line-height:1.3;
  min-width:200px;flex:1 1 200px}
@media (max-width:560px){
  .sponsor{flex-wrap:wrap;min-height:0}
  .sponsor img{flex:0 0 100%;width:100%;height:52px}
}

/* ---------- article ---------- */
/* mobile: one column with a real gutter. the break-out grid starts at 900px. */
.body-grid{display:grid;grid-template-columns:minmax(0,1fr);padding-inline:var(--gutter)}
.body-grid>*{min-width:0}
.body-grid>p,.body-grid>h2,.body-grid>h3,.body-grid>ul,.body-grid>ol,
.body-grid>.unit,.body-grid>.breakout{max-width:var(--w-prose);margin-inline:auto}
.body-grid>.bleed{margin-inline:calc(-1 * var(--gutter))}
@media (min-width:900px){
  .body-grid{
    padding-inline:0;
    grid-template-columns:
      [full-start] minmax(var(--gutter),.45fr)
      [wide-start] minmax(0,.3fr)
      [break-start] minmax(0,.2fr)
      [prose-start] minmax(0,var(--w-prose)) [prose-end]
      minmax(0,.2fr) [break-end]
      minmax(0,.3fr) [wide-end]
      minmax(var(--gutter),.45fr) [full-end];
  }
  .body-grid>p,.body-grid>h2,.body-grid>h3,.body-grid>ul,.body-grid>ol,
  .body-grid>.unit,.body-grid>.breakout{max-width:none;margin-inline:0}
  .body-grid>*{grid-column:prose-start/prose-end}
  .body-grid>.breakout{grid-column:break-start/break-end}
  .body-grid>.wide{grid-column:wide-start/wide-end}
  .body-grid>.bleed{grid-column:full-start/full-end;margin-inline:0}
  .body-grid>.offset-right{grid-column:prose-start/wide-end}
  .body-grid>.offset-left{grid-column:wide-start/prose-end}
}
.body-grid>p,.body-grid>ul,.body-grid>ol{font-size:clamp(1.0625rem,1.02vw,1.4rem);line-height:1.64}
.article-head{padding-block:clamp(24px,2.6vw,60px) clamp(16px,1.6vw,34px)}
.article-head h1{font-size:clamp(1.9rem,3.5vw,4.8rem);line-height:1;max-width:26ch}
.eyebrow{display:flex;align-items:center;gap:.6em;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--accent-ink);margin-bottom:1.1em}
.eyebrow a{color:inherit}
.lead{font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,2.1rem);line-height:1.3;
  max-width:58ch;margin:.9em 0 0;color:var(--ink)}
.byline{margin-top:1.4em;padding-top:.9em;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.body-grid>h2{font-size:clamp(1.34rem,1.85vw,2.5rem);margin:calc(var(--unit-gap) * .8) 0 .55em;line-height:1.08}
.body-grid>h2:first-of-type{margin-top:calc(var(--unit-gap) * .5)}
.body-grid>figure,.body-grid>.unit,.body-grid>.wide,.body-grid>.offset-right,
.body-grid>.offset-left,.body-grid>.bleed{margin-block:var(--unit-gap)}
.article-body{padding-bottom:clamp(30px,3vw,64px)}

/* inserted units */
.unit{padding:clamp(18px,1.8vw,36px)}
.callout{background:var(--secondary);color:var(--secondary-ink);padding:clamp(18px,1.8vw,40px)}
.callout p{font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,2rem);line-height:1.25;max-width:42ch;margin:0}
.pullquote{margin:0;padding:clamp(14px,1.4vw,28px) 0;border-top:2px solid var(--accent-ink);
  border-bottom:1px solid var(--rule)}
.pullquote p{font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,2.2rem);line-height:1.22;margin:0;max-width:40ch}
.blockquote{margin:0;padding-left:clamp(14px,1.2vw,24px);border-left:3px solid var(--secondary)}
.blockquote p{font-size:clamp(1.05rem,1vw,1.35rem);line-height:1.5;font-style:italic}
.blockquote cite{display:block;margin-top:.6em;font-style:normal;font-family:var(--mono);
  font-size:.8rem;letter-spacing:.08em;color:var(--stone)}
.note{background:rgba(46,78,168,.07);border-left:3px solid var(--secondary);
  padding:clamp(12px,1vw,20px) clamp(14px,1.2vw,24px);font-size:clamp(.98rem,.94vw,1.22rem);margin:0}
/* drafting-sheet panel — the Notes-for-Design material */
.sheet{background:#FBF8F1;border:1px solid var(--rule);position:relative;
  padding:clamp(20px,2vw,44px) clamp(18px,1.8vw,40px)}
.sheet::before{content:"";position:absolute;inset:5px;border:1px solid rgba(140,133,119,.35);pointer-events:none}
.sheet>*{position:relative}
.sheet-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4em 1.5em;
  margin-bottom:clamp(14px,1.4vw,28px);padding-bottom:.7em;border-bottom:1px solid var(--rule)}
.sheet-head h3{font-size:clamp(1.1rem,1.3vw,1.7rem)}
.sheet-head .ref{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.sheet-cols{display:grid;gap:clamp(18px,2vw,48px);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.sheet-cols.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;gap:.2em clamp(14px,1.4vw,30px);grid-template-columns:minmax(0,1fr);
  padding:.7em 0;border-top:1px solid var(--rule)}
.timeline li:first-child{border-top:0;padding-top:0}
@media (min-width:620px){.timeline li{grid-template-columns:minmax(8rem,15ch) minmax(0,1fr)}}
.t-when{font-family:var(--mono);font-size:.84rem;letter-spacing:.05em;color:var(--accent-ink);
  text-transform:uppercase;line-height:1.45;padding-top:.15em}
.t-what{font-size:clamp(.98rem,.94vw,1.2rem);line-height:1.5}
.plainlist{list-style:none;margin:0;padding:0}
.plainlist li{position:relative;padding:.5em 0 .5em 1.5em;border-top:1px solid var(--rule);
  font-size:clamp(.98rem,.94vw,1.2rem);line-height:1.5}
.plainlist li:first-child{border-top:0}
.plainlist li::before{content:"";position:absolute;left:0;top:1.05em;width:12px;height:1px;background:var(--accent-ink)}
.statrow{display:grid;gap:clamp(14px,1.4vw,30px);grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.statblock{border-top:2px solid var(--accent-ink);padding-top:.6em}
.stat-num{display:block;font-family:var(--serif);font-size:clamp(1.9rem,2.6vw,3.4rem);line-height:1}
.stat-label{display:block;margin-top:.3em;font-size:.94rem;line-height:1.4;color:var(--ink)}
.datatable,.versus{width:100%;font-size:clamp(.95rem,.9vw,1.15rem)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.datatable th,.datatable td,.versus th,.versus td{text-align:left;padding:.65em 1.2em .65em 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.datatable th,.versus th{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone);font-weight:700}
.versus td+td{color:var(--ink)}

/* end furniture */
.end-unit{margin-block:var(--unit-gap);padding-top:clamp(18px,1.8vw,34px);border-top:2px solid var(--ink)}
.end-unit h2{font-size:clamp(1.15rem,1.3vw,1.7rem);margin-bottom:.9em}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.4vw,28px);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.related-links{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}}
.related-links a{display:block;border-top:1px solid var(--rule);padding-top:.7em;color:var(--ink)}
.related-links a:hover{text-decoration:none;color:var(--accent-ink)}
.related-links .r-sec{display:flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.4em}
.related-links .r-sec .ico{width:1.2em;height:1.2em}
.related-links .r-title{font-family:var(--serif);font-size:clamp(1.05rem,1.1vw,1.45rem);line-height:1.15;display:block}

/* ---------- category / index ---------- */
.page-head{padding-block:clamp(26px,3vw,70px) clamp(20px,2vw,44px)}
.page-head h1{font-size:clamp(1.9rem,3.4vw,4.6rem);max-width:28ch;line-height:1}
.page-head .intro{margin-top:.9em;font-size:clamp(1.05rem,1.1vw,1.5rem);line-height:1.5;max-width:60ch;color:var(--ink)}
.page-head .count{margin-top:1.2em;font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone)}
.subnav{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:clamp(24px,2.6vw,60px)}
.subnav ul{list-style:none;margin:0;padding:.55em 0;display:flex;flex-wrap:wrap;gap:.4em clamp(14px,1.8vw,36px);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.subnav a{display:inline-flex;align-items:center;gap:.45em;min-height:44px;color:var(--ink)}
.subnav a[aria-current]{color:var(--accent-ink)}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,3.8vw,76px);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.cat-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1500px){.cat-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cat-list>li{display:flex;flex-direction:column;min-width:0}
.entry{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink)}
.entry:hover{text-decoration:none}
.entry:hover .e-title{color:var(--accent-ink)}
.entry .e-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.entry .e-fig{background:var(--linen);padding:8px;position:relative;display:block}
.entry .e-fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.entry .e-sec{display:flex;align-items:center;gap:.45em;margin-top:.9em;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink)}
.entry .e-title{font-family:var(--serif);font-size:clamp(1.15rem,1.25vw,1.7rem);line-height:1.12;
  margin-top:.45em;min-height:2.24em}
.entry .e-dek{margin-top:.55em;font-size:clamp(.95rem,.9vw,1.18rem);line-height:1.5;color:#4A4338}
.entry .e-foot{margin-top:auto;padding-top:.9em;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
/* lead entry gets more room */
@media (min-width:760px){
  .cat-list>li.lead-entry{grid-column:1/-1}
  .cat-list>li.lead-entry .entry{flex-direction:row;gap:clamp(20px,2.4vw,56px);align-items:stretch}
  .cat-list>li.lead-entry .e-fig{flex:1 1 58%;padding:10px}
  .cat-list>li.lead-entry .e-fig img{aspect-ratio:16/9;height:100%}
  .cat-list>li.lead-entry .e-body{flex:1 1 42%;display:flex;flex-direction:column;justify-content:center}
  .cat-list>li.lead-entry .e-sec{margin-top:0}
  .cat-list>li.lead-entry .e-title{font-size:clamp(1.5rem,2.3vw,3.1rem);min-height:0}
  .cat-list>li.lead-entry .e-dek{font-size:clamp(1rem,1vw,1.3rem);max-width:52ch}
}
/* dense register (Everything) */
.register{width:100%;font-size:clamp(.95rem,.92vw,1.18rem)}
.register th{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--stone);text-align:left;padding:.6em 1.4em .6em 0;border-bottom:1px solid var(--ink)}
.register td{padding:.75em 1.4em .75em 0;border-bottom:1px solid var(--rule);vertical-align:top}
.register tr:hover td{background:rgba(46,78,168,.05)}
.register .r-t{font-family:var(--serif);font-size:clamp(1.02rem,1.05vw,1.35rem);line-height:1.2}
.register .r-s{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);white-space:nowrap}
.sec-index{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.2vw,48px);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.sec-index{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1400px){.sec-index{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sec-card{border-top:2px solid var(--ink);padding-top:.9em;height:100%;display:flex;flex-direction:column}
.sec-card h2{font-size:clamp(1.2rem,1.4vw,1.85rem);display:flex;align-items:center;gap:.5em}
.sec-card h2 .ico{color:var(--accent-ink)}
.sec-card p{margin-top:.6em;font-size:clamp(.96rem,.92vw,1.18rem);line-height:1.5;color:#4A4338}
.sec-card .n{margin-top:auto;padding-top:.9em;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}

/* ---------- footer ---------- */
.foot{background:var(--ground);color:var(--ink-rev);padding-block:clamp(30px,3.4vw,80px) clamp(34px,4vw,96px);
  margin-top:clamp(30px,3.4vw,80px)}
.foot a{color:#DED5C6}
.foot a:hover{color:var(--accent);text-decoration:none}
.foot-in{display:grid;gap:clamp(22px,2.6vw,64px);grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.foot-in{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}}
.foot h2{font-family:var(--serif);font-size:clamp(1.3rem,1.6vw,2.1rem);display:flex;align-items:center;gap:.5em}
.foot p{margin-top:.8em;color:var(--stone-dk);max-width:42ch;font-size:clamp(.94rem,.88vw,1.15rem)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:.3em 0}
.foot h3{font-family:var(--mono);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--stone);font-weight:700;margin-bottom:.6em}

/* ---------- large displays: the page gains, not the margins ---------- */
@media (min-width:1600px){
  :root{--body:18px;--w-prose:46rem;--w-break:1400px;--w-wide:1720px;--unit-gap:56px}
}
@media (min-width:2100px){
  :root{--body:19.5px;--w-prose:48rem;--w-break:1640px;--w-wide:2040px;--unit-gap:64px}
  .shell-wide{max-width:2360px}
}
@media (min-width:2500px){
  :root{--body:21px;--w-prose:50rem;--w-break:1880px;--w-wide:2320px}
}
@media print{
  .nav,.supporters{display:none}
  body{background:#fff;color:#000}
}

/* ---------- components completed for the component styleguide ---------- */
.article-figure{margin:0}
.article-figure>img{width:100%;background:var(--linen);padding:8px}
.gallery{display:grid;gap:clamp(12px,1.2vw,26px);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--linen);padding:6px}
.chart{margin:0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart .c-bar{fill:var(--secondary)}
.chart .c-bar.alt{fill:var(--accent-ink)}
.chart .c-lbl{font-family:var(--mono);font-size:13px;fill:#4A4338}
.chart .c-val{font-family:var(--mono);font-size:13px;fill:var(--stone)}
.chart .c-line{fill:none;stroke:var(--accent-ink);stroke-width:2.4}
.chart .c-dot{fill:var(--accent-ink)}
.profile-grid{display:grid;gap:clamp(18px,1.8vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.profile-card{border-top:2px solid var(--ink);padding-top:1em;display:flex;flex-direction:column;height:100%}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--linen);padding:6px;margin-bottom:.8em}
.profile-card.no-photo{border-top-color:var(--accent-ink)}
.profile-card h3{font-size:clamp(1.08rem,1.1vw,1.4rem)}
.profile-card .p-role{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);margin:.4em 0 .6em}
.profile-card p{font-size:.98rem;line-height:1.5}
.profile-card .p-links{margin-top:auto;padding-top:.8em;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em}
.profile-card .p-attr{font-family:var(--mono);font-size:.74rem;color:var(--stone);margin-top:.5em}
.org-grid{display:grid;gap:clamp(12px,1.2vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.org-card{display:flex;align-items:center;gap:.9em;border:1px solid var(--rule);padding:.85em 1em;color:var(--ink);min-height:76px}
.org-card:hover{text-decoration:none;border-color:var(--ink)}
.org-card .org-logo{flex:0 0 64px;width:64px;height:40px;object-fit:contain;background:#22201B;padding:4px}
.org-card.no-logo{border-left:3px solid var(--secondary)}
.org-card .org-name{display:block;font-weight:600;line-height:1.25}
.org-card .org-host{display:block;font-family:var(--mono);font-size:.76rem;color:var(--stone);margin-top:.2em;word-break:break-word}
.entity-ref{border-bottom:1px solid var(--accent-ink);white-space:nowrap}
.further-grid{display:grid;gap:clamp(14px,1.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.further-grid a{border-top:1px solid var(--rule);padding-top:.7em;font-family:var(--serif);
  font-size:clamp(1.02rem,1.05vw,1.35rem);line-height:1.18;color:var(--ink)}
.further-grid a:hover{color:var(--accent-ink);text-decoration:none}
.sg-row{border-top:1px solid var(--rule);padding-top:1.4em;margin-top:2.6em}
.sg-row>h2{font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.sg-note{font-family:var(--mono);font-size:.78rem;color:var(--stone);margin:.4em 0 1.4em}

/* 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}
.sup-list{flex-wrap:wrap!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-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* 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}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor{padding:14px 14px!important}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-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-no-mark-ground: operator: remove the extra background. Mark plate #22201B on its own tile. */
.sponsor img,.sponsor-box img,.sp-logo img{background:transparent!important}

/* op-money-columns: the supporters block ran one tile per row — 7 tiles,
   812px at 390, 8% of the whole page. Two columns bring it to
   497px (39% shorter). Checked before writing: no new overflow, smallest mark still
   139px wide, longest blurb 2 lines, tile heights 106-160px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sup-list), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sup-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sup-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-list > * *{min-width:0!important;max-width:100%}
    .sup-list img,.sup-list svg{max-width:100%;height:auto}
}

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

/* op-hover-pad */
.register tr td:first-child{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
@media (min-width:581px) and (max-width:659px){.sup-list.sup-list > .sponsor[data-partner]{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}.sup-list.sup-list > .sponsor[data-partner] > .sponsor-name{flex:none!important;width:auto!important}}
@media (min-width:700px) and (max-width:1100px){.sup-list > [data-partner]{flex:0 0 50%!important}.sup-list > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){flex-basis:100%!important}}