/* EVBB — the work of keeping animals
   Palette (each member has one job):
     --ground   bone          page ground
     --ink      near-black    text
     --accent   ultramarine   saturated: bands, icons, links, panel rules
     --second   persimmon     saturated: section marks, kickers, one filled ground
     --mat      warm tint     figure mats and quiet panels
   The two saturated members sit ~230 degrees apart in hue. */

:root{
  --ground:#F7F5F0;
  --ink:#1B1A17;
  --accent:#1F35C4;
  --second:#C7431C;
  --mat:#EAE4D6;
  --rule:#DDD7CA;
  --muted:#6B6459;
  --display:"Vollkorn",Georgia,"Times New Roman",serif;
  --ui:"Manrope","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--display);font-size:18px;line-height:1.6;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;margin:0;text-wrap:pretty;overflow-wrap:break-word}
p{margin:0 0 1.05em}
figure{margin:0}
table{border-collapse:collapse}

.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,4vw,56px)}
.kicker{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.icon{width:1.15em;height:1.15em;flex:0 0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--ground);padding:10px 14px;z-index:20}

/* ---------- masthead ---------- */
.masthead{border-bottom:1.5px solid var(--ink)}
.masthead-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:22px 0 14px}
.wordmark{font-family:var(--display);font-weight:700;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.wordmark:hover{text-decoration:none}
.tagline{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:9px}
.mast-note{font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--muted);max-width:34ch}
.nav{display:flex;flex-wrap:wrap;gap:0;background:var(--ink);margin-bottom:-1.5px}
.nav a{display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;gap:8px;min-height:48px;padding:0 14px;color:#F1EDE3;
  border-right:1px solid rgba(247,245,240,.16);
  font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase}
.nav a .icon{width:18px;height:18px;color:#F1EDE3;opacity:.85}
.nav a:hover{color:#fff;background:var(--accent);text-decoration:none}
.nav a:hover .icon{color:#fff;opacity:1}
.nav a[aria-current]{color:#fff;background:var(--accent);box-shadow:none}
.nav a[aria-current] .icon{opacity:1}
.nav .nav-browse{background:var(--second);color:#fff;border-right:none;flex:1 1 auto;justify-content:center}
.nav .nav-browse .icon{color:#fff;opacity:1}
.nav .nav-browse:hover{background:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#E7E3D8;margin-top:64px}
.band-second+.foot,.band-accent+.foot{margin-top:0}
.foot-in{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding-block:40px 30px}
.foot a{color:#E7E3D8}
.foot .wordmark{color:#F7F5F0}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.foot-note{font-family:var(--ui);font-size:13.5px;line-height:1.6;color:#A39B8C;max-width:52ch}
.foot-sig{font-family:var(--display);font-size:19px;line-height:1.5;color:#F1EDE3;max-width:46ch;margin:0 0 14px}

/* ---------- bands ---------- */
.band{border-bottom:1px solid var(--rule)}
.band-pad{padding:52px 0 56px}
.band-tight{padding:34px 0 38px}
.band-accent{background:var(--accent);color:#F7F5F0;border-bottom:none}
.band-accent a{color:#fff}
.band-second{background:var(--second);color:#FDF6F2;border-bottom:none}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.band-head .all{font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.quiet-line{margin:0 auto;max-width:24em;font-size:clamp(24px,3vw,34px);line-height:1.34;font-weight:500;text-align:center}

/* ---------- lead opener ---------- */
.opener-img{position:relative;background:var(--mat)}
.opener-img img{width:100%;height:clamp(320px,52vw,660px);object-fit:cover}
.opener-text{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px 56px;padding-block:30px 52px}
.opener-text h1{font-size:clamp(34px,4.6vw,60px);line-height:1.04}
.opener-deck{font-family:var(--ui);font-size:17px;line-height:1.6;color:#3B372F;margin:0 0 16px}
.sect-mark{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--second);margin-bottom:14px}
.sect-mark:hover{text-decoration:none;color:var(--ink)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px}
.card{display:flex;flex-direction:column;color:var(--ink)}
.card:hover{text-decoration:none}
.card .shot{display:block;background:var(--mat);padding:12px}
.card .shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card h3{font-size:25px;line-height:1.2;margin:14px 0 8px;min-height:2.4em}
.card:hover h3{color:var(--accent)}
.card:hover .shot{background:#E2DACA}
.card p{font-family:var(--ui);font-size:15px;line-height:1.55;color:#5D574C;margin:0}
.card .card-body{padding-right:6px}
.card-body{display:flex;flex-direction:column;flex:1}

/* ---------- sections grid ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.tile{display:block;background:var(--ground);padding:26px 28px 30px;color:var(--ink)}
.tile:hover{background:var(--mat);text-decoration:none}
.tile .icon{width:34px;height:34px;color:var(--accent)}
.tile h3{font-size:24px;margin:14px 0 8px}
.tile p{font-family:var(--ui);font-size:15px;line-height:1.5;color:#5D574C;margin:0}
.tile .count{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px}

/* ---------- feature plate ---------- */
.plate{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);align-items:stretch}
.plate-text{display:flex;flex-direction:column;justify-content:flex-end;padding:54px clamp(24px,3vw,44px) 54px 0}
.plate-text h2{font-size:clamp(28px,3.2vw,40px);line-height:1.1;margin-bottom:14px}
.plate-text p{font-family:var(--ui);font-size:16px;line-height:1.6;color:#3B372F}
.plate-img{background:var(--mat)}
.plate-img img{width:100%;height:100%;min-height:340px;object-fit:cover}

/* ---------- supporters ---------- */
.sponsor-band{padding:30px 0 34px}
.sponsor-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.sponsor-head h2{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sponsor-head p{font-family:var(--ui);font-size:13px;color:var(--muted);margin:0}
.sponsor-row{display:flex;flex-wrap:wrap;gap:14px}
.sponsor{flex:0 0 232px;height:64px;background:var(--ink);display:grid;place-items:center;padding:10px 14px}
.sponsor img{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor:hover{text-decoration:none;outline:1px solid var(--accent);outline-offset:2px}
.sponsor.feat{box-shadow:inset 0 0 0 2px var(--accent)}
.sponsor-roll .sponsor-row{gap:10px}

/* ---------- article ---------- */
.piece-head{padding-block:48px 8px}
.piece-head h1{font-size:clamp(32px,4.4vw,58px);line-height:1.03;max-width:24ch}
.lead{font-family:var(--ui);font-size:clamp(18px,2vw,21px);line-height:1.55;color:#3B372F;max-width:60ch;margin:20px 0 0}
.piece-body{display:grid;
  grid-template-columns:[full-start] minmax(20px,1fr) [wide-start] minmax(0,150px) [text-start] minmax(0,70ch) [text-end] minmax(0,150px) [wide-end] minmax(20px,1fr) [full-end];
  padding:14px 0 20px}
.piece-body>*{grid-column:text}
.piece-body h2{grid-column:text;font-size:clamp(24px,2.6vw,32px);line-height:1.18;margin:1.5em 0 .5em;padding-top:.5em;border-top:1px solid var(--rule)}
.piece-body p{font-size:19.5px;line-height:1.64;margin:0 0 1.15em}
.piece-body p.opening{font-size:21.5px;line-height:1.58;color:#141310}
.piece-body p.opening::first-line{font-variant-caps:all-small-caps;letter-spacing:.02em}
.piece-body>.wide{grid-column:wide}
.piece-body>.full{grid-column:full}

/* three figure treatments, one drawing system */
.article-figure{margin:30px 0 34px}
.article-figure img{width:100%}
.article-figure figcaption{font-family:var(--ui)}
.fig-cap{display:block;font-family:var(--ui);font-size:16.5px;line-height:1.5;color:#2A2823;max-width:56ch}
.fig-credit{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8A8375;margin-top:8px}
/* 1 — the mat */
.fig-plate{background:var(--mat);padding:clamp(16px,2vw,28px)}
.fig-plate figcaption{margin-top:18px}
/* 2 — full-bleed band, caption offset */
.fig-bleed img{max-height:78vh;object-fit:cover}
.fig-bleed figcaption{max-width:1240px;margin-inline:auto;padding:14px clamp(20px,4vw,56px) 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 40px}
.fig-bleed .fig-cap{border-top:2px solid var(--accent);padding-top:12px;grid-column:2}
.fig-bleed .fig-credit{grid-column:1;grid-row:1;padding-top:14px}
/* 3 — inset in the column, prose beside it */
.fig-inset{float:right;width:46%;margin:8px 0 22px 34px;border-top:1px solid var(--ink);padding-top:12px}
.fig-inset.solo{float:none;width:100%;margin:30px 0 34px}
.fig-inset.solo .fig-cap{font-size:16px;max-width:56ch}
.fig-inset .fig-cap{font-size:15px;max-width:none}
.fig-inset .fig-credit{font-size:11px}
.fig-inset figcaption{margin-top:10px}

.pullquote{margin:34px 0;border-top:2px solid var(--second);border-bottom:1px solid var(--rule);padding:18px 0}
.pullquote p{font-size:clamp(22px,2.6vw,29px);line-height:1.32;font-weight:500;margin:0}
.blockquote{margin:30px 0;padding-left:22px;border-left:3px solid var(--accent)}
.blockquote p{font-size:20px;line-height:1.5;margin:0 0 .5em}
.blockquote cite{font-family:var(--ui);font-size:13.5px;font-style:normal;color:var(--muted)}
.callout{background:var(--mat);padding:24px 26px;margin:30px 0}
.callout p{margin:0;font-size:18.5px;line-height:1.55}
.piece-body p.note,.note{font-family:var(--ui);font-size:14.5px;line-height:1.6;color:var(--muted);border-top:1px solid var(--rule);padding-top:14px;margin:34px 0 0}

/* the lifted material from the writers' notes */
.jobs{margin:36px 0 40px;background:var(--ground);border-top:2px solid var(--accent);border-bottom:1px solid var(--rule);padding:22px 0 6px}
.jobs h3{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.jobs dl{margin:0;display:grid;grid-template-columns:minmax(140px,.7fr) minmax(0,1.6fr);gap:0 28px}
.jobs dt{font-family:var(--ui);font-weight:700;font-size:15.5px;line-height:1.45;padding:12px 0;border-top:1px solid var(--rule)}
.jobs dd{font-family:var(--ui);font-size:15.5px;line-height:1.5;color:#4A453B;margin:0;padding:12px 0;border-top:1px solid var(--rule)}
.jobs dt:first-of-type,.jobs dl>dt:first-child+dd{border-top:none}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,2fr);gap:0 28px;border-top:1px solid var(--rule);padding:12px 0}
.timeline .t-when{font-family:var(--ui);font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--accent)}
.timeline .t-what{font-family:var(--ui);font-size:15.5px;line-height:1.5;color:#4A453B}

/* related */
.further{border-top:1px solid var(--ink);padding-top:20px;margin-top:44px}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule)}
.further-grid a{display:flex;gap:12px;align-items:flex-start;background:var(--ground);padding:18px 20px;
  font-family:var(--display);font-weight:600;font-size:18px;line-height:1.3;color:var(--ink)}
.further-grid a:hover{background:var(--mat);text-decoration:none;color:var(--accent)}
.further-grid a .icon{width:18px;height:18px;color:var(--accent);margin-top:3px}
.related-links{list-style:none;margin:0;padding:0}
.related-links li{border-top:1px solid var(--rule);padding:12px 0}

/* ---------- section (category) pages ---------- */
.cat-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:40px;align-items:end;padding-block:46px 34px}
.cat-hero h1{font-size:clamp(38px,5.5vw,74px);line-height:.98;display:flex;align-items:flex-start;gap:20px}
.cat-hero h1 .icon{width:.9em;height:.9em;color:var(--accent);margin-top:.06em}
.cat-hero p{font-family:var(--ui);font-size:17px;line-height:1.6;color:#3B372F;margin:0}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:0 32px;padding:22px 0;color:var(--ink);align-items:start}
.cat-list a:hover{text-decoration:none}
.cat-list .shot{display:block;background:var(--mat);padding:10px}
.cat-list .shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cat-list h3{font-size:27px;line-height:1.18;margin:0 0 8px}
.cat-list a:hover h3{color:var(--accent)}
.cat-list p{font-family:var(--ui);font-size:15.5px;line-height:1.55;color:#5D574C;margin:0;max-width:64ch}
.sig-strip{font-family:var(--display);font-size:clamp(19px,2.2vw,25px);line-height:1.45;padding-block:34px;max-width:44em}

/* ---------- browse / archive ---------- */
.reg{width:100%;font-family:var(--ui)}
.reg caption{text-align:left;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:26px 0 10px}
.reg th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px 10px 0;border-bottom:2px solid var(--ink)}
.reg td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-size:15.5px;line-height:1.5;color:#4A453B}
.reg td.t{font-family:var(--display);font-size:19px;font-weight:600;line-height:1.3}
.reg td.t a{color:var(--ink)}
.reg td.t a:hover{color:var(--accent)}
.reg td.s{white-space:nowrap}
.reg td.s span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted)}
.reg td.s .icon{width:16px;height:16px;color:var(--second)}

/* ---------- prose pages ---------- */
.page-body{max-width:min(70ch,100%);padding-block:44px 10px}
.page-body h1{font-size:clamp(32px,4.4vw,52px);line-height:1.05;margin-bottom:18px}
.page-body h2{font-size:26px;margin:1.6em 0 .5em}
.page-body p{font-size:19px;line-height:1.64}
.page-body ul{font-size:19px;line-height:1.6;padding-left:1.1em}
.notfound{padding-block:90px 40px;text-align:center}
.notfound h1{font-size:clamp(40px,7vw,84px)}
.notfound p{font-family:var(--ui);font-size:18px;color:var(--muted);margin:16px auto 26px;max-width:44ch}

/* ---------- styleguide-only components ---------- */
.versus,.datatable{width:100%;font-family:var(--ui);margin:26px 0}
.versus th,.datatable th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:10px 14px;border-bottom:2px solid var(--ink)}
.versus td,.datatable td{padding:12px 14px;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.5}
.versus tbody th{border-bottom:1px solid var(--rule);font-size:14px;letter-spacing:.04em;text-transform:none;white-space:normal}
.datatable td.num,.datatable th.num{text-align:right;font-variant-numeric:tabular-nums}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--rule);margin:26px 0}
.statblock{background:var(--mat);padding:20px}
.stat-num{display:block;font-family:var(--display);font-size:42px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--accent)}
.stat-label{display:block;font-family:var(--ui);font-size:13.5px;line-height:1.4;color:#4A453B;margin-top:8px}
.chart{margin:28px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-family:var(--ui);font-size:14px;color:var(--muted);margin-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:28px 0}
.gallery figure{margin:0}
.gallery img{aspect-ratio:16/10;object-fit:cover;width:100%}
.gallery figcaption{font-family:var(--ui);font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:8px}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:26px 0}
.profile-card{background:var(--mat);padding:22px}
.profile-card .p-photo{width:84px;height:84px;object-fit:cover;margin-bottom:14px}
.profile-card.no-photo{border-top:2px solid var(--accent)}
.profile-card h3{font-size:22px;margin-bottom:4px}
.profile-card .p-role{font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--second);margin:0 0 10px}
.profile-card p{font-family:var(--ui);font-size:15px;line-height:1.55}
.profile-card .p-links,.profile-card .p-attr{font-size:13.5px;color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:26px 0}
.org-card{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;background:var(--mat);padding:14px 16px;color:var(--ink)}
.org-card:hover{text-decoration:none;background:#E2DACA}
.org-logo{width:56px;height:36px;object-fit:contain;background:var(--ink)}
.org-card.no-logo{grid-template-columns:1fr}
.org-name{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.25}
.org-host{font-family:var(--ui);font-size:12.5px;color:var(--muted)}
.entity-ref{font-family:var(--ui);font-size:.94em;font-weight:600;white-space:nowrap}
.expander{margin:18px 0}
.expander>summary{cursor:pointer;font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:12px 0;min-height:44px;display:flex;align-items:center}
.expander[open]>summary{border-bottom:1px solid var(--rule)}
.sg-label{font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--second);border-top:2px solid var(--second);padding-top:10px;margin:56px 0 10px}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .opener-text{grid-template-columns:1fr;gap:12px}
  .plate{grid-template-columns:1fr}
  .plate-text{padding:34px 0 30px;order:2}
  .plate-img img{min-height:260px}
  .cat-hero{grid-template-columns:1fr;gap:22px;align-items:start}
  .foot-in{grid-template-columns:1fr;gap:24px}
}
@media (max-width:820px){
  body{font-size:17px}
  .wordmark{font-size:32px}
  .nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(247,245,240,.18)}
  .nav a{min-height:54px;font-size:12px;padding:0 10px;background:var(--ink);border-right:none;text-align:center}
  .nav .nav-browse{grid-column:1/-1;background:var(--second)}
  .mast-note{font-size:13px;margin-bottom:2px}
  .piece-body{grid-template-columns:[full-start] 0 [wide-start] clamp(20px,4vw,56px) [text-start] minmax(0,1fr) [text-end] clamp(20px,4vw,56px) [wide-end] 0 [full-end];padding-inline:0}
  .piece-body p{font-size:18.5px}
  .piece-body p.opening{font-size:20px}
  .piece-body>.wide{padding-inline:clamp(20px,4vw,56px)}
  .fig-inset{float:none;width:100%;margin:24px 0}
  .fig-bleed figcaption{grid-template-columns:1fr}
  .fig-bleed .fig-cap{grid-column:1}
  .fig-bleed .fig-credit{grid-column:1;grid-row:auto;padding-top:0}
  .jobs dl{grid-template-columns:1fr;gap:0}
  .jobs dt{padding-bottom:2px;border-top:1px solid var(--rule)}
  .jobs dd{padding-top:0;border-top:none}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .cat-list a{grid-template-columns:1fr;gap:14px}
  .cat-list .shot{max-width:320px}
  .reg td.s{white-space:normal}
}
@media (max-width:620px){
  .reg thead{display:none}
  .reg tr{display:block;border-bottom:1px solid var(--rule);padding:14px 0}
  .reg td{display:block;border:none;padding:0 0 6px}
  .reg td.t{font-size:20px;padding-bottom:8px}
  .reg caption{padding-top:22px}
}
@media (max-width:560px){
  .sponsor,.sponsor-roll .sponsor{flex:0 0 100%;height:72px}
  .card h3{min-height:0}
  .foot-in{padding-top:32px}
  .versus,.datatable{display:block;overflow-x:auto}
  .piece-head h1{max-width:none}
  .article-figure{margin:24px 0 26px}
}

.wrap-flow{grid-column:text}
.wrap-flow::after{content:"";display:block;clear:both}
.jobs dt.solo{grid-column:1/-1}

/* homepage — entries grouped by how often the job comes round */
.cadence{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule);border-top:1px solid var(--rule)}
.cad-col{background:var(--ground);padding:22px 26px 26px}
.cad-when{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.cad-col a{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--rule);font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink)}
.cad-col a .icon{width:18px;height:18px;color:var(--accent);margin-top:3px}
.cad-col a:hover{color:var(--accent);text-decoration:none}

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

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-row .sponsor.sponsor img{height:40px!important;display:block!important;width:100%!important}

/* op-nav-collapse: this nav printed 219px of stacked links at 390 before any content
   (7 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 "rule-flank", 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 (20px measured) the button carries the build's
   gutter (clamp(20px,4vw,56px)) 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 (900px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "bars" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:900px){
  .menu-switch{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:auto;border:0;padding:10px 0;letter-spacing:.18em;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .menu-switch::before,.menu-switch::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.4}
  .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}
  .nav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .menu-switch-c:checked ~ .nav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .wrap:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   882px at 390, 12% of the whole page. Two columns bring it to
   628px (29% shorter). Checked before writing: no new overflow, smallest mark still
   137px wide, longest blurb 0 lines, tile heights 72-72px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-row), 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){
  .sponsor-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-row (3 tiles), .sponsor-row (3 tiles), .sponsor-row (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){
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
.cat-list a:hover h2:where(.rt-h3){color: var(--accent);}
.card:hover h2:where(.rt-h3){color: var(--accent);}
h2:where(.rt-h3){font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; margin: 0px; text-wrap: pretty; overflow-wrap: break-word;}
.card h2:where(.rt-h3){font-size: 25px; line-height: 1.2; margin: 14px 0px 8px; min-height: 2.4em;}
.tile h2:where(.rt-h3){font-size: 24px; margin: 14px 0px 8px;}
.cat-list h2:where(.rt-h3){font-size: 27px; line-height: 1.18; margin: 0px 0px 8px;}
@media (max-width: 560px){.card h2:where(.rt-h3){min-height: 0px;}}
/* op-heading-levels:end */
@media (min-width:660px) and (max-width:1439px){.sponsor-row.sponsor-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(232px,calc(50% - 7px)),1fr))!important;column-gap:14px!important;row-gap:14px!important;justify-content:stretch!important;align-items:stretch!important}.sponsor-row.sponsor-row > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}