/* cosmosveganshoppe.com — Setting Point
   Palette roles: ground / ink / accent (ultramarine) / secondary (chartreuse) / flag (vermillion) */

:root{
  --ground:#EFEFEA;      /* ground — page */
  --ground-2:#E2E2DA;    /* ground, recessed — figure mats, strips */
  --ink:#14171A;         /* ink — text, rules, dark bands */
  --ink-2:#3C4145;       /* ink, secondary — body prose */
  --ink-3:#6A6E72;       /* ink, quiet — meta, credits */
  --rule:#C6C6BE;
  --accent:#1B3BD1;      /* accent — ultramarine: links, section marks, one full band */
  --accent-2:#2A48D8;
  --accent-pale:#A9B8F0;
  --secondary:#B7C400;   /* secondary — chartreuse: mechanism rules, highlights */
  --flag:#C6412A;        /* flag — vermillion: faults only */
  --sans:'Bricolage Grotesque','Trebuchet MS',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --pad:40px;
}
@media (max-width:900px){ :root{ --pad:22px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.5;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--secondary);color:var(--ink)}
h1,h2,h3,h4{margin:0;letter-spacing:-.025em;font-weight:700}
p{margin:0}
figure{margin:0}
svg{flex:none}
.u-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- shell ---------- */
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}
.band{padding-block:52px}
.band--tight{padding-block:34px}
.rule-top{border-top:2px solid var(--ink)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.kicker--accent{color:var(--accent)}
.band-head{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--ink);padding-bottom:12px}
.band-head .kicker{font-weight:500}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink);background:var(--ground)}
.masthead__top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;
  padding-block:22px 16px}
.wordmark{display:flex;align-items:center;gap:12px;color:var(--ink)}
.wordmark:hover{text-decoration:none}
.wordmark__name{font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-.03em}
.wordmark__domain{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3);align-self:flex-end;padding-bottom:5px}
.foot .wordmark__domain{color:#8B9095;padding-bottom:2px}
.masthead__line{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.nav{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--rule)}
.nav a{display:flex;align-items:center;gap:8px;padding:12px 14px;color:var(--ink);
  font-family:var(--mono);font-size:14px;border-left:1px solid var(--rule)}
.nav a:first-child{border-left:0}
.nav a:hover{background:var(--ground-2);text-decoration:none}
.nav a svg{color:var(--accent)}
.nav a[aria-current="page"]{background:var(--accent);color:#fff}
.nav a[aria-current="page"] svg{color:#fff}
@media (max-width:900px){
  .nav{grid-template-columns:repeat(2,1fr)}
  .nav a{border-left:1px solid var(--rule);border-top:1px solid var(--rule);font-size:13px;padding:11px 12px}
}
@media (max-width:420px){ .nav{grid-template-columns:1fr} }

/* ---------- homepage lead ---------- */
.lead-band{border-bottom:2px solid var(--ink)}
.lead-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:end;padding-block:40px 34px}
.lead-grid h1{font-size:clamp(38px,5.2vw,66px);line-height:.99;letter-spacing:-.04em;max-width:19ch}
.lead-grid .lead{font-size:20px;line-height:1.45;color:var(--ink-2);max-width:56ch;margin-top:16px}
.lead-cta{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-family:var(--mono);
  font-size:14px;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:3px}
.lead-cta:hover{text-decoration:none;color:var(--ink);border-color:var(--secondary)}
@media (max-width:900px){ .lead-grid{grid-template-columns:1fr;gap:26px} }

/* ---------- register (the signature block) ---------- */
.register{border-top:2px solid var(--ink)}
.register__row{display:grid;grid-template-columns:minmax(200px,.78fr) minmax(230px,.9fr) minmax(0,1.5fr);
  gap:26px 48px;padding:28px 0;border-bottom:1px solid var(--rule)}
.register__row:last-child{border-bottom:2px solid var(--ink)}
.register__id{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;color:var(--ink)}
.register__id:hover{text-decoration:none;color:var(--accent)}
.register__no{font-family:var(--mono);font-size:14px;color:var(--ink-3);padding-top:5px}
.register__title{display:block}
.register__title svg{color:var(--accent);margin-bottom:6px}
.register__title strong{display:block;font-size:26px;line-height:1.1;letter-spacing:-.025em}
.register__title > span{display:block;font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-top:6px}
.register__specs{margin:0;display:grid;gap:14px;align-content:start}
.register__specs dt{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.register__specs dd{margin:4px 0 0;font-family:var(--mono);font-size:15px;line-height:1.45}
.register__mech{border-left:3px solid var(--secondary);padding-left:24px}
.register__mech > p:not(.register__fault){font-size:17px;line-height:1.55;color:var(--ink-2)}
.register__mech p.register__fault{display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px;margin-top:14px;
  font-family:var(--mono);font-size:13.5px;line-height:1.5;color:var(--flag)}
.register__mech p.register__fault svg{margin-top:2px;color:var(--flag)}
@media (max-width:1080px){
  .register__row{grid-template-columns:minmax(200px,.85fr) minmax(0,1.4fr)}
  .register__specs{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 26px}
  .register__mech{grid-column:1 / -1}
}
@media (max-width:640px){
  .register__row{grid-template-columns:1fr;gap:20px}
  .register__specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .register__mech{padding-left:18px}
}

/* ---------- sections hub ---------- */
.hub{display:grid;grid-template-columns:repeat(5,1fr)}
.hub a{padding:24px 20px 26px;color:var(--ink);border-right:1px solid var(--rule)}
.hub a:last-child{border-right:0}
.hub a:hover{background:var(--ground-2);text-decoration:none}
.hub svg{color:var(--accent);width:40px;height:40px}
.hub h3{font-size:22px;margin-top:12px}
.hub p{font-size:15px;color:var(--ink-2);margin-top:7px}
.hub .count{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:12px}
@media (max-width:1000px){ .hub{grid-template-columns:repeat(2,1fr)}
  .hub a{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)} }
@media (max-width:560px){ .hub{grid-template-columns:1fr} }

/* ---------- selection (homepage edit) ---------- */
.sel{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0;border-bottom:2px solid var(--ink)}
.sel__card{display:flex;flex-direction:column;padding:24px 24px 28px;border-left:1px solid var(--rule);color:var(--ink)}
.sel__card:first-child{border-left:0;padding-left:0}
.sel__card:hover{text-decoration:none;background:var(--ground-2)}
.sel__card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.sel__card .kicker{display:flex;align-items:center;gap:7px;margin-top:16px}
.sel__card .kicker svg{color:var(--accent)}
.sel__card h3{margin-top:10px;font-size:26px;line-height:1.12}
.sel__card--lead h3{font-size:34px}
.sel__card p{margin-top:9px;font-size:16px;color:var(--ink-2)}
.sel__card .more{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:13px;color:var(--accent)}
.sel-row{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:2px solid var(--ink)}
.sel-row a{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:baseline;padding:18px 22px 20px 0;color:var(--ink);border-left:1px solid var(--rule)}
.sel-row a:first-child{border-left:0}
.sel-row a:hover{text-decoration:none;color:var(--accent)}
.sel-row .n{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.sel-row strong{font-size:20px;line-height:1.2;letter-spacing:-.02em;display:block}
.sel-row em{display:block;font-style:normal;font-size:15px;color:var(--ink-2);margin-top:5px}
@media (max-width:1000px){ .sel{grid-template-columns:1fr}
  .sel__card{border-left:0;border-top:1px solid var(--rule);padding-inline:0}
  .sel-row{grid-template-columns:1fr}
  .sel-row a{border-left:0;border-top:1px solid var(--rule);padding-right:0} }

/* ---------- standing line band ---------- */
.say{background:var(--accent);color:#fff}
.say__grid{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:center;padding-block:64px}
.say p{font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-.025em;font-weight:500;margin:0;max-width:34ch}
.say aside{border-left:2px solid var(--accent-pale);padding-left:24px;font-family:var(--mono);font-size:14.5px;line-height:1.6;color:#D6DDF9}
.say a{color:#fff;border-bottom:2px solid var(--secondary)}
@media (max-width:900px){ .say__grid{grid-template-columns:1fr;gap:26px;padding-block:44px} }

/* ---------- supporters (directory) ---------- */
.support{border-top:2px solid var(--ink)}
.support__group{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));column-gap:52px}
.support__group > .kicker{grid-column:1 / -1}
.support__group > .kicker{display:block;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.sponsor{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.sponsor:hover{text-decoration:none;background:var(--ground-2)}
.sponsor .sponsor-no{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.sponsor-name{font-size:21px;font-weight:600;letter-spacing:-.02em}
.sponsor-blurb{display:block;margin-top:6px;font-size:16px;color:var(--ink-2);max-width:62ch}
.sponsor--feat .sponsor-name{font-size:24px}
.support__note{margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#C9CBCE;margin-top:0}
.foot__in{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;padding-block:30px}
.foot .wordmark__name{color:var(--ground);font-size:20px}
.foot svg{color:var(--secondary)}
.foot nav{display:flex;flex-wrap:wrap;gap:22px;font-family:var(--mono);font-size:13px}
.foot a{color:#C9CBCE}
.foot a:hover{color:#fff}
.foot__small{font-family:var(--mono);font-size:12.5px;color:#8B9095;padding-bottom:28px;max-width:none;display:flex;justify-content:flex-end}
.foot__small span{display:block;max-width:80ch}

/* ---------- article ---------- */
.art-head{border-bottom:2px solid var(--ink);padding-block:46px 30px}
.art-head .kicker{display:flex;align-items:center;gap:9px;color:var(--accent)}
.art-head h1{font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.04em;max-width:22ch;margin-top:16px}
.art-head .lead{margin-top:18px;font-size:clamp(18px,2vw,22px);line-height:1.42;color:var(--ink-2);max-width:56ch}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.art-meta b{font-weight:500;color:var(--ink)}

.body{max-width:74ch;padding-block:34px 10px}
.body > p:not(.note){font-size:19.5px;line-height:1.62;color:#22262A;margin-top:18px}
.body > p.note{font-size:16px;color:var(--ink-3);margin-top:26px}
.body > p:not(.note):first-child{margin-top:0}
.body h2{font-size:clamp(24px,2.6vw,32px);line-height:1.12;margin-top:44px;max-width:30ch}
.body h2 + p{margin-top:14px}
.body h3{font-size:21px;margin-top:30px}
.body a{border-bottom:1px solid var(--accent)}
.body ul{margin:16px 0 0;padding-left:0;list-style:none}
.body ul li{position:relative;padding-left:22px;margin-top:9px;font-size:18px;line-height:1.55;color:var(--ink-2)}
.body ul li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:2px;background:var(--secondary)}

/* figure system — three treatments */
.article-figure{margin:34px 0}
.fig--specimen{border:1.5px solid var(--ink)}
.fig--specimen .fig__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:9px 14px;
  border-bottom:1.5px solid var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.fig--specimen img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.fig--specimen figcaption{display:grid;grid-template-columns:130px minmax(0,1fr) auto;border-top:1.5px solid var(--ink)}
.fig--specimen figcaption .c-label{padding:13px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.fig--specimen figcaption .c-text{padding:13px 14px 13px 0;font-size:16.5px;font-weight:500;line-height:1.45}
.fig--specimen figcaption .c-credit{padding:13px 14px;font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
@media (max-width:720px){
  .fig--specimen figcaption{grid-template-columns:1fr}
  .fig--specimen figcaption .c-text{padding:0 14px 10px}
  .fig--specimen figcaption .c-label{padding-bottom:6px}
  .fig--specimen figcaption .c-credit{white-space:normal;padding-top:0}
}
.fig--mount{background:var(--accent);padding:22px}
.fig--mount img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.fig--mount figcaption{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:baseline;margin-top:16px}
.fig--mount .c-text{color:#fff;font-size:16.5px;font-weight:500;line-height:1.45;max-width:68ch}
.fig--mount .c-credit{font-family:var(--mono);font-size:12px;color:var(--accent-pale)}
.fig--inset{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start;
  border-top:1px solid var(--rule);padding-top:18px}
.fig--inset img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule)}
.fig--inset .c-label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.fig--inset .c-text{display:block;font-size:16px;font-weight:500;line-height:1.45;margin-top:7px}
.fig--inset .c-credit{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:6px}
@media (max-width:720px){ .fig--inset{grid-template-columns:1fr} }
.fig--bleed{margin:0}
.fig--bleed img{width:100%;height:clamp(240px,44vw,520px);object-fit:cover}
.fig--bleed figcaption{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;align-items:baseline;
  background:var(--ground-2);padding:13px var(--pad)}
.fig--bleed .c-text{font-size:16.5px;font-weight:500;max-width:72ch}
.fig--bleed .c-credit{font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* notes-for-design material — full-measure interrupting registers */
.pane{border-top:2px solid var(--ink);margin:38px 0;padding-top:14px}
.pane__head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.pane__head .kicker{color:var(--accent)}
.pane__head h4{font-size:20px;letter-spacing:-.02em}
.pane__rows{margin-top:14px}
.pane__row{display:grid;grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);gap:10px 26px;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.pane__row b{font-family:var(--mono);font-size:14.5px;font-weight:500;line-height:1.45}
.pane__row span{font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.pane--fault .pane__row b{color:var(--flag)}
.pane__row--plain{grid-template-columns:1fr}
.pane__row--plain span{font-size:17px}
@media (max-width:720px){ .pane__row{grid-template-columns:1fr;gap:5px} }
.pane--wide{background:var(--ground-2);border-top:2px solid var(--ink);padding:20px var(--pad) 6px;margin-inline:calc(-1 * var(--pad))}

.callout{background:var(--ink);color:var(--ground);padding:26px 28px;margin:34px 0}
.callout p{font-size:20px;line-height:1.4;font-weight:500;max-width:60ch}
.pullquote{margin:36px 0;border-top:3px solid var(--secondary);padding-top:18px}
.pullquote p{font-size:clamp(22px,2.6vw,30px);line-height:1.24;letter-spacing:-.025em;font-weight:600;max-width:32ch}
.blockquote{margin:32px 0;border-left:3px solid var(--accent);padding-left:22px}
.blockquote p{font-size:19px;line-height:1.5;color:var(--ink-2)}
.blockquote cite{display:block;margin-top:9px;font-family:var(--mono);font-size:13px;font-style:normal;color:var(--ink-3)}
.note{margin:26px 0;padding:14px 0 0;border-top:1px solid var(--rule);font-size:16px;color:var(--ink-3);max-width:70ch}
.note b{color:var(--ink)}

.art-foot{border-top:2px solid var(--ink);padding-block:26px 40px}
.related-links{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.related-links li{border-left:1px solid var(--rule);padding:0 20px 0 0}
.related-links li:first-child{border-left:0}
.related-links li + li{padding-left:20px}
.related-links a{display:block;font-size:20px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);font-weight:600}
.related-links a:hover{color:var(--accent);text-decoration:none}
.related-links .kicker{display:block;margin-top:6px}
@media (max-width:820px){ .related-links{grid-template-columns:1fr}
  .related-links li,.related-links li + li{border-left:0;border-top:1px solid var(--rule);padding:14px 0 0} }
.art-nav{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;
  border-top:2px solid var(--ink);padding-block:20px 44px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.art-nav a{color:var(--ink)}
.art-nav a:hover{color:var(--accent);text-decoration:none}

/* ---------- category + archive ---------- */
.cat-head{display:grid;grid-template-columns:1fr 400px;gap:52px;border-bottom:2px solid var(--ink);padding-block:44px 36px}
.cat-head h1{font-size:clamp(38px,6vw,72px);line-height:.98;letter-spacing:-.04em}
.cat-head .lead{margin-top:16px;font-size:19px;line-height:1.5;color:var(--ink-2);max-width:54ch}
.cat-aside{border-left:1px solid var(--rule);padding-left:24px}
.cat-aside dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-family:var(--mono);font-size:14.5px}
.cat-aside dt{color:var(--accent)}
.cat-aside dd{margin:0}
@media (max-width:900px){ .cat-head{grid-template-columns:1fr;gap:24px}
  .cat-aside{border-left:0;border-top:1px solid var(--rule);padding:18px 0 0} }
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:2px solid var(--ink)}
.cat-list a{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.4fr);gap:24px;align-items:start;
  padding:20px 0;color:var(--ink)}
.cat-list a:hover{text-decoration:none;background:var(--ground-2)}
.cat-list .n{font-family:var(--mono);font-size:13px;color:var(--ink-3);padding-top:5px}
.cat-list strong{font-size:26px;line-height:1.14;letter-spacing:-.025em}
.cat-list span{font-size:16px;line-height:1.5;color:var(--ink-2)}
@media (max-width:820px){ .cat-list a{grid-template-columns:44px 1fr;gap:8px 16px}
  .cat-list span{grid-column:2} }

/* ---------- generic prose page ---------- */
.page-head{border-bottom:2px solid var(--ink);padding-block:44px 28px}
.page-head h1{font-size:clamp(34px,5vw,58px);line-height:1;letter-spacing:-.04em}
.prose{max-width:70ch;padding-block:30px 48px}
.prose p{font-size:19px;line-height:1.6;color:#22262A;margin-top:18px}
.prose h2{font-size:26px;margin-top:38px}
.prose ul{margin:16px 0 0;padding-left:20px}
.prose li{font-size:18px;line-height:1.55;color:var(--ink-2);margin-top:8px}

/* ---------- styleguide-only components ---------- */
.sg-block{border-top:2px solid var(--ink);padding-block:22px 40px}
.sg-block > .kicker{display:block;margin-bottom:16px}
.versus,.datatable{width:100%;border-collapse:collapse;font-size:16.5px;margin:8px 0}
.versus th,.datatable th{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;color:var(--ink-3);font-weight:500;padding:10px 14px 10px 0;border-bottom:1px solid var(--ink)}
.versus td,.datatable td{padding:14px 14px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}
.versus tbody th{width:26%;color:var(--ink);border-bottom:1px solid var(--rule);font-family:var(--mono);
  font-size:13.5px;letter-spacing:0;text-transform:none}
.datatable td:first-child{font-family:var(--mono);font-size:14.5px}
.tbl-scroll{overflow-x:auto}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border-top:2px solid var(--ink);margin:10px 0}
.statblock{padding:18px 22px 20px 0;border-right:1px solid var(--rule)}
.statblock:last-child{border-right:0}
.stat-num{display:block;font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
.stat-label{display:block;margin-top:8px;font-family:var(--mono);font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.timeline{list-style:none;margin:10px 0;padding:0;border-top:1px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:minmax(160px,.34fr) minmax(0,1fr);gap:10px 24px;
  padding:14px 0;border-bottom:1px solid var(--rule)}
.t-when{font-family:var(--mono);font-size:14px;color:var(--accent);line-height:1.45}
.t-what{font-size:17px;line-height:1.5;color:var(--ink-2)}
@media (max-width:640px){ .timeline li{grid-template-columns:1fr;gap:4px} }
.chart{margin:14px 0;max-width:760px}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:12px;font-size:15px;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:9px}
.chart .bar-label{font-family:var(--mono);font-size:12px;fill:var(--ink-3)}
.chart .bar-val{font-family:var(--mono);font-size:12px;fill:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:10px 0}
.gallery figure{display:flex;flex-direction:column}
.gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule)}
.gallery figcaption{margin-top:9px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.profile-grid,.org-grid,.further-grid{display:grid;gap:16px;margin:10px 0}
.profile-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.profile-card{display:flex;flex-direction:column;border:1.5px solid var(--ink);padding:18px}
.profile-card .p-photo{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:21px}
.profile-card .p-role{font-family:var(--mono);font-size:12.5px;color:var(--accent);margin-top:6px}
.profile-card p{font-size:16px;line-height:1.5;color:var(--ink-2);margin-top:10px}
.profile-card .p-links{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:13px}
.profile-card.no-photo{border-left:4px solid var(--secondary)}
.org-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.org-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--rule);padding:14px;background:var(--ground-2);color:var(--ink);min-width:0}
.org-card:hover{text-decoration:none;border-color:var(--ink)}
.org-logo{max-height:34px;width:auto;object-fit:contain}
.org-name{font-size:18px;font-weight:600;letter-spacing:-.02em}
.org-host{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.entity-ref{font-family:var(--mono);font-size:.94em;border-bottom:1px solid var(--accent)}
.further-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.further-grid a{display:flex;flex-direction:column;justify-content:space-between;min-height:112px;
  border-top:2px solid var(--ink);padding-top:12px;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.further-grid a:hover{color:var(--accent);text-decoration:none}
details.expander{margin-top:10px}
details.expander summary{font-family:var(--mono);font-size:13px;color:var(--accent);cursor:pointer;padding:10px 0}
details.expander[open] summary{color:var(--ink-3)}

/* ---------- narrow-viewport guards ---------- */
@media (max-width:520px){
  .art-meta{gap:8px 18px;font-size:12.5px}
  .art-head h1{letter-spacing:-.03em}
  .sponsor{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .sponsor-name{font-size:19px}
  .register__title strong{font-size:23px}
  .statblock{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .versus,.datatable{font-size:15.5px}
  .fig--specimen figcaption .c-text{font-size:15.5px}
}
html,body{overflow-x:hidden}
.wrap{width:100%}

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

  .menu-switch-bars{width:15px;height:9px;flex:none;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-shadow:inset 0 3.5px 0 -1px currentColor}
  .wrap.nav{display:none}
  .menu-switch-c:checked ~ .wrap.nav{display:grid}
  .masthead:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .wrap.nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1018px at 390, 12% of the whole page. Two columns bring it to
   736px (28% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 3 lines, tile heights 88-181px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.support__group), 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){
  .support__group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:min(3.61vw,52px)!important}
    .support__group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .support__group > * *{min-width:0!important;max-width:100%}
    .support__group img,.support__group svg{max-width:100%;height:auto}
  .support__group .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 817px (90 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 74ch (declared in .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.body{max-width:min(924px, 100%)!important}
}
@media (min-width:1600px){
  article.body{max-width:min(clamp(924px, 64.167vw, 1109px), 100%)!important}
  article.body > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (817px) and was left behind when the text went to 924px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  div.art-head h1{max-width:min(924px, 100%)!important}
  div.art-head p.lead{max-width:min(900px, 100%)!important}
}
@media (min-width:1600px){
  div.art-head h1{max-width:min(calc(clamp(924px, 64.167vw, 1109px) + 0px), 100%)!important}
  div.art-head p.lead{max-width:min(calc(clamp(900px, 62.500vw, 1080px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-name-fit: "Downlow" (102.7px at the featured 24px) ran 3px past its tile at 360. The featured names are set a hair smaller on narrow phones — min(24px, 6.19vw): 22.3px at 360, Design's 24px again from ~388px — so every brand stays WHOLE. Money tiles only. */
@media (max-width:640px){
  [data-partner].sponsor--feat .sponsor-name{font-size:min(24px,6.19vw)!important}
}
/* op-name-fit:end */

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

/* op-odd-tier-lead: money_slots changed a tier's size — .support__group (9 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .support__group:has(> a:nth-of-type(odd):last-of-type) > .sponsor:first-of-type{grid-column:1 / -1!important}
}
@media (min-width:700px) and (max-width:859px){.support__group:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.support__group:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}