@charset "utf-8";

/* ============================================================
   magic-country.com — "The Reach"
   Palette · 5 members, each with a job
     --paper  ground        warm paper
     --ink    ink           near-black, sets all body text
     --crimson accent       saturated red; whole bands, kickers, rules
     --teal   secondary     saturated blue-green; whole bands, notes grounds
     --mat    tint          figure mats and quiet panels
   The two saturated members (crimson 6° / teal 187°) sit 181° apart in hue.
   ============================================================ */

:root{
  --paper:#F4F0E8;
  --ink:#16130F;
  --crimson:#B8102E;
  --teal:#1D5B63;
  --mat:#E7E1D3;
  --ink-deep:#2A2724;

  --rule:rgba(22,19,15,.20);
  --rule-soft:rgba(22,19,15,.13);
  --ink-70:rgba(22,19,15,.72);
  --ink-55:rgba(22,19,15,.68);

  --display:"Archivo",system-ui,sans-serif;
  --body:"Spectral",Georgia,serif;

  --measure:44rem;
  --gutter:clamp(18px,4vw,56px);
  --bar-h:66px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 18px/1.66 var(--body);

  text-wrap:pretty;
}
img{max-width:100%;display:block}
svg{display:block}
a{color:var(--crimson);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.02}
p{margin:0 0 1.05em}
hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}

.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.kicker{
  font-family:var(--display);font-weight:600;font-size:11.5px;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;color:var(--crimson);
  display:flex;align-items:center;gap:9px;
}
.kicker svg{width:19px;height:19px;flex:none}
.kicker--teal{color:var(--teal)}
.kicker--pale{color:var(--paper)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:99}

/* ---------- masthead (identical on every page) ---------- */
.masthead{border-bottom:1px solid var(--rule)}
.masthead__in{
  max-width:1320px;margin:0 auto;padding:30px var(--gutter) 26px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.wordmark{display:flex;align-items:flex-end;gap:clamp(9px,2.4vw,16px);color:var(--ink);flex:0 0 auto}
.wordmark:hover{text-decoration:none}
.wordmark{align-items:center;min-width:0}
.wordmark__emblem{width:clamp(34px,8.6vw,52px);height:clamp(34px,8.6vw,52px);color:var(--crimson);flex:none}
.wordmark__name{
  font-family:var(--display);font-weight:800;font-size:clamp(22px,3.4vw,44px);
  line-height:1;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap;min-width:0;
}
.wordmark__name em{font-style:normal;margin-left:.04em}
@media(max-width:760px){
  .wordmark__name{white-space:normal;font-size:clamp(23px,6.6vw,34px)}
  .wordmark__name em{display:block;margin-left:0}
}
.masthead__sig{
  font-size:15.5px;line-height:1.45;max-width:31ch;color:var(--ink-70);
  margin:0;padding:0;flex:0 1 auto;min-width:15ch;
}
.masthead__sig b{font-weight:600;color:var(--crimson)}
.masthead--inner .masthead__in{padding-block:24px 20px}
.crumb{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.crumb a{color:var(--ink-55)}

/* ---------- the thumb bar: this site's whole navigation ----------
   Fixed to the bottom edge, capped at a one-handed width, opening
   UPWARD. Nothing is placed out of reach; there is no desktop
   register and no hover dropdown at any width.                     */
.thumbnav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:0 10px calc(10px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
}
.thumbnav__inner{
  pointer-events:auto;
  max-width:392px;margin:0 auto;
  background:var(--ink);color:var(--paper);
  border-top:3px solid var(--crimson);
  display:grid;grid-template-columns:repeat(4,1fr);
  box-shadow:0 -10px 34px rgba(22,19,15,.24);
}
.thumbnav__btn{
  min-height:58px;display:flex;align-items:center;justify-content:center;
  color:var(--paper);cursor:pointer;
  border-left:1px solid rgba(244,240,232,.18);padding:6px;
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.thumbnav__btn:first-child{border-left:0}
.thumbnav__btn:hover{color:#fff;text-decoration:none;background:rgba(244,240,232,.09)}
.thumbnav__btn svg{width:25px;height:25px}
.thumbnav__btn--on{background:var(--crimson)}

#sheet-toggle{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:39;
  max-height:0;overflow:hidden;
  background:var(--paper);border-top:3px solid var(--ink);
  transition:max-height .28s ease;
  box-shadow:0 -18px 50px rgba(22,19,15,.3);
}
#sheet-toggle:checked ~ .sheet{max-height:84vh;overflow:auto}
.sheet__in{padding:26px var(--gutter) calc(var(--bar-h) + 34px);max-width:1100px;margin:0 auto}
.sheet__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:2px solid var(--crimson);padding-bottom:11px;margin-bottom:20px}
.sheet__head h2{font-size:23px}
.sheet__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:18px 28px}
.sheet__sec > a{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:7px}
.sheet__sec > a svg{width:20px;height:20px;color:var(--crimson);flex:none}
.sheet__sec ul{list-style:none;margin:0;padding:0 0 0 29px;display:flex;flex-direction:column;gap:1px}
.sheet__sec li a{font-size:14.5px;line-height:1.5;color:var(--ink-70)}
.sheet__close{
  display:block;text-align:center;margin-top:24px;padding:15px;
  background:var(--ink);color:var(--paper);cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}

/* ---------- figure system · four treatments, one drawing ----------
   F1 .fig--bleed  full-bleed band, caption on a paper plate
   F2 .fig--mat    photograph on a mat, hairline, caption hung beside
   F3 .fig--inset  small figure inside the column, prose beside it
   F4 .fig--arc    flush image with the drawn quarter-arc corner mark
   Shared: caption is typography with a rule; credit is smaller and quieter. */
figure{margin:0}
.cap{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.4}
.credit{font-size:13px;font-style:italic;color:var(--ink-55);margin-top:5px;line-height:1.4}

.fig--bleed{position:relative;margin:0}
.fig--bleed img{width:100%;height:clamp(300px,52vw,660px);object-fit:cover}
.fig--bleed figcaption{
  background:var(--paper);padding:20px 26px 18px;max-width:660px;
  border-top:3px solid var(--crimson);
}
@media(min-width:900px){
  .fig--bleed figcaption{position:absolute;left:0;bottom:0;margin:0}
}

.fig--mat{background:var(--mat);padding:clamp(14px,2vw,22px);margin:2.6em 0}
.fig--mat img{border:1px solid var(--rule);width:100%;aspect-ratio:16/10;object-fit:cover}
.fig--mat figcaption{display:grid;grid-template-columns:26px 1fr;gap:14px;margin-top:16px;max-width:56ch}
.fig--mat figcaption .arcmark{width:26px;height:26px;color:var(--crimson);margin-top:3px}

.fig--inset{
  margin:.4em 0 1.4em;background:var(--paper);
}
.fig--inset img{border:1px solid var(--rule);aspect-ratio:4/3;object-fit:cover;width:100%}
.fig--inset figcaption{padding-top:11px;border-top:1px solid var(--rule);margin-top:11px}
.fig--inset .cap{font-size:14.5px;text-indent:-10px;padding-left:10px}
@media(min-width:700px){
  .fig--inset{float:right;width:44%;margin:.3em 0 1.4em 2em}
}

.fig--wide{margin:2.4em 0}
.fig--wide img{border:1px solid var(--rule);aspect-ratio:16/10;object-fit:cover;width:100%}
.fig--wide figcaption{padding-top:12px;margin-top:12px;border-top:1px solid var(--rule)}

.fig--arc{position:relative;margin:0}
.fig--arc img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig--arc .arcmark{position:absolute;top:-10px;left:-10px;width:30px;height:30px;color:var(--crimson)}
.fig--arc figcaption{margin-top:14px}

/* ---------- homepage bands ---------- */
.band{padding-block:clamp(38px,5vw,64px)}
.band--tight{padding-block:clamp(26px,3vw,38px)}
.band--crimson{background:var(--crimson);color:var(--paper)}
.band--teal{background:var(--teal);color:var(--paper)}
.band--mat{background:var(--mat)}
.band--crimson a,.band--teal a{color:var(--paper)}
.band--crimson .credit,.band--teal .credit{color:rgba(244,240,232,.7)}

.band__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:26px;
}
.band--crimson .band__head,.band--teal .band__head{border-color:rgba(244,240,232,.42)}
.band__head h2{font-size:clamp(24px,3vw,32px)}

/* lead */
.lead-band{position:relative}
.lead-band__plate{
  background:var(--paper);padding:clamp(24px,3vw,38px) clamp(22px,3vw,42px) clamp(22px,3vw,32px);
  max-width:790px;
}
.lead-band__plate h1{font-size:clamp(32px,5.2vw,58px);margin:14px 0 15px}
.lead-band__plate p{font-size:clamp(17px,2vw,20px);margin:0;max-width:62ch}
.lead-band img{width:100%;height:clamp(320px,54vw,700px);object-fit:cover}
@media(min-width:960px){
  .lead-band__plate{position:absolute;left:0;bottom:0}
}
.more{
  display:inline-flex;align-items:center;gap:11px;margin-top:20px;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.09em;color:var(--crimson);
}
.more svg{width:30px;height:8px}

/* the two constraints */
.constraints{display:grid;gap:clamp(28px,4vw,54px)}
.constraints > div{min-width:0}
.constraints > div > div{flex-wrap:wrap}
.constraints > div > div > div{min-width:0;flex:1 1 auto}
.constraints h3{margin-top:14px}
@media(min-width:900px){.constraints{grid-template-columns:1fr 1px 1fr}}
.constraints__rule{background:rgba(244,240,232,.42)}
.constraints h3{font-size:clamp(38px,6vw,68px);line-height:.9;overflow-wrap:normal}
.constraints p:not(.kicker){font-size:16.5px;max-width:46ch;margin:16px 0 0}
.constraints dl{margin:20px 0 0;padding-top:13px;border-top:1px solid rgba(244,240,232,.42);font-family:var(--display);font-weight:600;font-size:14px;line-height:1.55}
.constraints dt{display:inline}
.constraints dd{display:inline;margin:0}
.constraints dd::after{content:"";display:block}
.constraints__emblem{width:70px;height:70px;flex:none;opacity:.9}

/* the selection (dense run) */
.pick{display:grid;gap:0 clamp(26px,3vw,44px)}
@media(min-width:720px){.pick{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.pick{grid-template-columns:repeat(3,1fr)}}
.pick__item{border-top:1px solid var(--rule-soft);padding:17px 0 19px;display:flex;flex-direction:column}
.pick__item h3{font-size:21px;line-height:1.1;margin:9px 0 8px}
.pick__item h3 a{color:var(--ink)}
.pick__item p{font-size:15.5px;color:var(--ink-70);margin:0}

/* quiet line */
.quiet{text-align:center;padding-block:clamp(54px,8vw,96px)}
.quiet svg{width:36px;height:36px;color:var(--teal);margin:0 auto 22px}
.quiet p{font-size:clamp(21px,3.1vw,31px);line-height:1.34;max-width:24em;margin:0 auto;text-wrap:balance}

/* wide plate */
.plate{display:grid;gap:clamp(26px,3.5vw,46px)}
@media(min-width:900px){.plate{grid-template-columns:1.15fr .85fr;align-items:stretch}}
.plate .fig--mat{display:flex;flex-direction:column;margin:0}
.plate .fig--mat img{flex:1;aspect-ratio:auto;min-height:300px}
.plate__list{display:flex;flex-direction:column}
.plate__list li:last-child{border-bottom:1px solid var(--rule)}
.plate__list{list-style:none;margin:0;padding:0}
.plate__list li{border-top:1px solid var(--rule);padding:14px 0}
.plate__list a{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);display:block}
.plate__list span{display:block;font-size:15px;color:var(--ink-70);margin-top:4px}

/* section index */
.secgrid{display:grid;gap:2px}
@media(min-width:680px){.secgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.secgrid{grid-template-columns:repeat(4,1fr)}}
.secgrid__i{
  display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule-soft);
}
.secgrid__i:hover{background:var(--mat);text-decoration:none}
.secgrid__i svg{width:28px;height:28px;color:var(--crimson)}
.secgrid__i strong{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.secgrid__i span{font-size:15px;color:var(--ink-70)}
.secgrid__i em{font-family:var(--display);font-style:normal;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55);margin-top:auto;padding-top:10px}

/* ---------- colophon / supporters ----------
   Name-only slots, one constant tile width, prominence by class. */
.colophon{background:var(--mat);color:var(--ink);padding-block:clamp(34px,4vw,52px);border-top:1px solid var(--rule)}
.colophon__head{border-bottom:1px solid var(--rule);padding-bottom:11px;margin-bottom:22px}
.colophon__head h2{font-size:clamp(20px,2.4vw,26px)}
.colophon__head p{font-size:15px;color:var(--ink-70);margin:8px 0 0;max-width:60ch}
.colophon__group{margin-top:26px}
.colophon__label{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);margin-bottom:13px}
.sponsors{display:grid;grid-template-columns:100%;gap:2px}

@media(min-width:700px){.sponsors{grid-template-columns:repeat(2,calc((100% - 2px)/2))}}
@media(min-width:1080px){.sponsors{grid-template-columns:repeat(3,calc((100% - 4px)/3))}}
.sponsors.sponsors--row{grid-template-columns:100%}
@media(min-width:700px){.sponsors.sponsors--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.sponsors.sponsors--row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sponsor{
  display:flex;align-items:center;min-height:76px;padding:15px 20px;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--rule-soft);
}
.sponsor:hover{background:#fff;border-color:var(--rule);text-decoration:none}
.sponsor-name{font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.25;letter-spacing:-.012em}
.sponsor.feat{background:var(--crimson);color:var(--paper);border-color:var(--crimson)}
.sponsor.feat:hover{background:#a20d28;border-color:#a20d28}
.sponsor.feat .sponsor-name{font-weight:800;font-size:17px}
@media(max-width:520px){
  .sponsor-name{font-size:14.5px}
  .sponsor.feat .sponsor-name{font-size:15px}
}

/* ---------- footer ----------
   Four columns of equal rhythm so no quarter of the width sits idle:
   brand, sections, publication, policy. Collapses 4 → 2 → 1.        */
.foot{
  background:var(--ink);color:var(--paper);border-top:5px solid var(--crimson);
  padding-block:clamp(38px,4.4vw,52px) calc(36px + var(--bar-h) + env(safe-area-inset-bottom,0px));
}
.foot a{color:var(--paper)}
.foot a:hover{color:#fff}
.foot__in{display:grid;gap:30px 36px;grid-template-columns:1fr}
@media(min-width:560px){.foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:880px){.foot__in{grid-template-columns:1.15fr .95fr .8fr 1.15fr;align-items:start}}
.foot__brand{min-width:0}
.foot__mark{display:flex;align-items:center;gap:13px;color:var(--paper)}
.foot__mark:hover{text-decoration:none}
.foot__mark svg{width:32px;height:32px;flex:none}
.foot__mark span{
  font-family:var(--display);font-weight:800;font-size:21px;line-height:1;
  letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;
}
.foot__mark em{font-style:normal;margin-left:.04em}
.foot__line{margin:15px 0 0;font-size:15.5px;line-height:1.5;color:rgba(244,240,232,.78)}
.foot__col{min-width:0}
.foot__col h2{
  font-family:var(--display);font-weight:600;font-size:11px;line-height:1;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(244,240,232,.58);
  padding-bottom:10px;border-bottom:1px solid rgba(244,240,232,.24);margin-bottom:12px;
}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15.5px}
.foot__note{margin:0;font-size:14.5px;line-height:1.55;color:rgba(244,240,232,.7)}
@media(max-width:760px){
  .foot__mark span{white-space:normal;font-size:20px;line-height:1.03}
  .foot__mark em{display:block;margin-left:0}
}

/* ---------- article ---------- */
.art__top{padding-block:clamp(30px,4vw,52px) clamp(22px,3vw,32px)}
.art__top h1{font-size:clamp(33px,6vw,68px);max-width:900px;margin:16px 0 0;text-wrap:balance}
.lead{
  font-size:clamp(19px,2.3vw,23px);line-height:1.45;max-width:52ch;margin:20px 0 0;
  color:var(--ink);font-weight:400;
}
.art__body{padding-block:clamp(26px,3.4vw,44px);max-width:calc(var(--measure) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.art__body h2{
  font-size:clamp(24px,3.2vw,34px);margin:1.5em 0 .6em;padding-top:.5em;
  border-top:1px solid var(--rule);
}
.art__body h2:first-child{border-top:0;margin-top:0;padding-top:0}
.art__body p{font-size:18.5px}

.art__body::after{content:"";display:table;clear:both}

.pullquote{
  margin:2.2em 0;padding:24px 0;
  border-top:3px solid var(--teal);border-bottom:1px solid var(--rule);
}
.pullquote p{font-size:clamp(21px,2.6vw,27px);line-height:1.32;color:var(--teal);margin:0;text-wrap:balance}
.blockquote{margin:2.1em 0;padding:0 0 0 24px;border-left:3px solid var(--crimson)}
.blockquote p{font-size:19.5px;margin:0 0 .6em}
.blockquote cite{font-family:var(--display);font-style:normal;font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--ink-55)}
.callout{margin:2.1em 0;background:var(--mat);border-top:3px solid var(--crimson);padding:22px 24px}
.callout p{margin:0;font-size:17.5px}
.note{
  font-size:16px;color:var(--ink-70);border-left:2px solid var(--teal);
  padding-left:16px;margin:1.6em 0;
}

/* notes-for-design interruption bands — full bleed, not a rail */
.notes-band{background:var(--teal);color:var(--paper);padding-block:clamp(32px,4vw,52px);margin-block:clamp(30px,4vw,48px)}
.notes-band--mat{background:var(--mat);color:var(--ink)}
.notes-band__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid rgba(244,240,232,.4);padding-bottom:11px;margin-bottom:22px}
.notes-band--mat .notes-band__head{border-color:var(--rule)}
.notes-band__head h2{font-size:clamp(21px,2.6vw,28px)}
.notes-band__tag{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.19em;text-transform:uppercase;opacity:.78}
.notes-band__cols{display:grid;gap:26px 40px}
@media(min-width:760px){.notes-band__cols{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.notes-band h3{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:0;margin-bottom:12px}
.notes-band ol{list-style:none;margin:0;padding:0;counter-reset:n}
.notes-band li{
  counter-increment:n;display:grid;grid-template-columns:30px 1fr;gap:12px;
  padding:11px 0;border-top:1px solid rgba(244,240,232,.28);font-size:16px;line-height:1.5;
}
.notes-band--mat li{border-color:var(--rule)}
.notes-band li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--display);font-weight:700;font-size:13px;opacity:.75;padding-top:3px;
}

/* related + section return */
.related{padding-block:clamp(30px,4vw,52px);border-top:3px solid var(--crimson)}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
@media(min-width:760px){.related-links{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.related-links li{display:flex}
.related-links a{
  display:flex;flex-direction:column;gap:7px;padding:18px 20px;width:100%;
  border:1px solid var(--rule-soft);color:var(--ink);background:var(--paper);
}
.related-links a:hover{background:var(--mat);text-decoration:none}
.related-links .r-sec{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--crimson)}
.related-links .r-title{font-family:var(--display);font-weight:700;font-size:18.5px;letter-spacing:-.01em}
.entity-ref{white-space:nowrap}

/* ---------- data display ----------
   Figures the article itself cites, lifted out of the prose. */
.figures{display:grid;grid-template-columns:1fr;gap:2px;margin:2.4em 0;border-top:3px solid var(--crimson)}
@media(min-width:560px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:820px){
  .figures--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .figures--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.figures__i{background:var(--mat);padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.figures__n{
  font-family:var(--display);font-weight:800;font-size:clamp(27px,3.6vw,40px);line-height:.94;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--crimson);overflow-wrap:break-word;
}
.figures__u{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55)}
.figures__l{font-size:14.5px;line-height:1.45;color:var(--ink-70);margin-top:auto;padding-top:6px}
.num{font-family:var(--display);font-weight:700;font-size:.94em;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.art__body > p.opens::first-letter{
  float:left;font-family:var(--display);font-weight:800;font-size:4.1em;line-height:.74;
  margin:.06em .09em 0 0;color:var(--crimson);
}

/* ---------- category + hub pages ---------- */
.cat__top{padding-block:clamp(30px,4vw,54px) clamp(20px,3vw,30px)}
.cat__top h1{font-size:clamp(34px,6.4vw,72px)}
.cat__top p{font-size:clamp(18px,2.2vw,22px);max-width:54ch;margin:16px 0 0;color:var(--ink-70)}
.cat__icon{display:block;width:46px;height:46px;color:var(--crimson);margin-bottom:18px}
.cat__icon svg{width:100%;height:100%}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
@media(min-width:760px){.cat-list{grid-template-columns:1fr 1fr}}
@media(min-width:1120px){.cat-list{grid-template-columns:repeat(3,1fr)}}
.cat-list li{display:flex}
.cat-list article{
  display:flex;flex-direction:column;height:100%;width:100%;
  border:1px solid var(--rule-soft);background:var(--paper);
}
.cat-list img{aspect-ratio:16/10;object-fit:cover;width:100%}
.cat-list .c-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.cat-list h3{font-size:20px;line-height:1.12;margin:10px 0 9px;min-height:2.24em}
.cat-list h3 a{color:var(--ink)}
.cat-list p{font-size:15.5px;color:var(--ink-70);margin:0}
.cat-list .c-tail{margin-top:auto;padding-top:14px;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55)}

.hub__sec{border-top:1px solid var(--rule);padding-block:26px 6px}
.hub__sec h2{font-size:clamp(22px,2.8vw,30px);display:flex;align-items:center;gap:12px}
.hub__sec h2 svg{width:26px;height:26px;color:var(--crimson);flex:none}
.hub__sec > p{color:var(--ink-70);font-size:16px;margin:10px 0 16px}
.hub__list{list-style:none;margin:0;padding:0;display:grid;gap:0 36px}
@media(min-width:700px){.hub__list{grid-template-columns:1fr 1fr}}
.hub__list li{border-top:1px solid var(--rule-soft);padding:12px 0}
.hub__list a{font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--ink)}
.hub__list span{display:block;font-size:15px;color:var(--ink-70);margin-top:4px}

/* ---------- simple page ---------- */
.page__body{padding-block:clamp(28px,3.6vw,46px);max-width:calc(var(--measure) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.page__body h2{font-size:clamp(22px,2.8vw,30px);margin:1.7em 0 .6em}

/* ---------- styleguide-only components ---------- */
.versus,.datatable{width:100%;border-collapse:collapse;margin:2em auto;max-width:var(--measure);font-family:var(--body)}
.versus th,.datatable th{
  text-align:left;padding:11px 13px;background:var(--crimson);color:var(--paper);
  font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
}
.versus td,.datatable td{padding:12px 13px;border-bottom:1px solid var(--rule-soft);font-size:16px;vertical-align:top}
.versus tbody tr:nth-child(even),.datatable tbody tr:nth-child(even){background:rgba(184,16,46,.045)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;margin:2em auto;max-width:var(--measure)}
.statblock{background:var(--mat);padding:20px;display:flex;flex-direction:column;gap:6px;border-top:3px solid var(--teal)}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,50px);line-height:.9;letter-spacing:-.04em}
.stat-label{font-size:14.5px;color:var(--ink-70);line-height:1.4}
.timeline{list-style:none;margin:2em auto;padding:0;max-width:var(--measure);counter-reset:tl}
.timeline li{display:grid;grid-template-columns:minmax(120px,26%) 1fr;gap:18px;padding:14px 0;border-top:1px solid var(--rule)}
.t-when{font-family:var(--display);font-weight:700;font-size:15px;color:var(--crimson);line-height:1.35}
.t-what{font-size:16.5px;line-height:1.5}
@media(max-width:560px){.timeline li{grid-template-columns:1fr;gap:5px}}
.chart{margin:2em auto;max-width:var(--measure)}
.chart svg{width:100%;height:auto}
.chart figcaption{margin-top:12px;font-family:var(--display);font-weight:600;font-size:15px}
.article-figure{margin:2em auto;max-width:var(--measure)}
.article-figure img{width:100%;border:1px solid var(--rule)}
.article-figure figcaption{margin-top:12px;font-family:var(--display);font-weight:600;font-size:15.5px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;margin:2em auto;max-width:var(--measure)}
.gallery img{aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:13.5px;color:var(--ink-55);padding:8px 4px 0;line-height:1.4}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;margin:2em auto;max-width:var(--measure)}
.profile-card{background:var(--mat);border:1px solid var(--rule);padding:20px;display:flex;flex-direction:column}
.profile-card .p-photo{width:96px;height:96px;object-fit:cover;border:1px solid var(--rule);margin-bottom:14px}
.profile-card h3{font-size:22px;margin-bottom:5px}
.profile-card .p-role{font-size:14.5px;color:var(--ink-55);margin:0 0 10px}
.profile-card p{font-size:15.5px}
.profile-card .p-links{margin-top:auto;padding-top:10px;font-size:15px}
.profile-card.no-photo{border-left:3px solid var(--teal)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;margin:2em auto;max-width:var(--measure)}
.org-card{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.org-card:hover{background:var(--mat);text-decoration:none}
.org-name{font-family:var(--display);font-weight:700;font-size:17.5px}
.org-host{font-size:13.5px;color:var(--ink-55)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;margin:2em auto;max-width:var(--measure)}
.further-grid a{padding:16px 18px;border:1px solid var(--rule-soft);background:var(--paper);color:var(--ink);font-family:var(--display);font-weight:700;font-size:17px}
.further-grid a:hover{background:var(--mat);text-decoration:none}

@media(max-width:640px){
  .versus,.datatable{table-layout:fixed}
  .versus th,.datatable th,.versus td,.datatable td{padding:9px 8px;font-size:14.5px;overflow-wrap:anywhere}
  .fig--mat figcaption{grid-template-columns:20px 1fr;gap:10px}
  .fig--mat figcaption .arcmark{width:20px;height:20px}
  .art__top h1{letter-spacing:-.035em}
  .timeline li{grid-template-columns:1fr}
}
@media(max-width:520px){
  body{font-size:17px}
  .art__body p{font-size:17.5px}
  .thumbnav__btn{font-size:10px;letter-spacing:.06em}
}
@media print{.thumbnav,.sheet{display:none}}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* 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}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* op-footer-compact: the footer printed 7 rows for 7 link(s) in
   1 list(s) — 835px at 390, 11% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 835 -> 648px (22% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(6px,2.5vw,36px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

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

/* op-article-width: the article column was capped at 704px (86 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width calc(var(--measure) + var(--gutter) * 2) (declared in .art__body) 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 div.art__body{max-width:min(943px, 100%)!important}
}
@media (min-width:1600px){
  article div.art__body{max-width:min(clamp(943px, 65.486vw, 1132px), 100%)!important}
  article div.art__body > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.fig--bleed > img,
  div.art__body > figure.fig--arc > img,
  div.art__body > figure.fig--inset > img,
  div.art__body > figure.fig--mat > img,
  div.plate > figure.fig--mat > img,
  div.wrap > figure.fig--arc > img,
  li > article > img,
  main > section.lead-band > img){height:auto}
/* op-img-dims:end */

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}