/* BackPax Mag — "Waymarks"
   PALETTE (5 members, named jobs)
   --ground  #14130F  ground: page field, warm near-black
   --ink     #F2EDE3  ink: type on ground (and ground of inverted plates)
   --accent  #C98A00  accent: ochre — full-area bands, kickers, rules, links
   --second  #2B4BD1  secondary: cobalt — full-area bands (map, notes panels)
   --flag    #B5322C  flag: the painted waymark red, used only to mark a route/turn
   Two saturated members (ochre ~h75, cobalt ~h265) sit far apart in hue and each
   gets real area on the page, not a 2px rule. */

:root{
  --ground:#14130F;
  --ink:#F2EDE3;
  --accent:#C98A00;
  --accent-band:#A87206; /* ochre at full area — dropped in luminance so a whole band is calm */
  --second:#0F5545;
  --second-line:#3E9C80;
  --flag:#B5322C;

  --ink-2:#DDD6C8;   /* body on ground */
  --ink-body:#D6CEBF; /* long-form prose: softened off the full-contrast ink */
  --ink-3:#A9A192;   /* captions */
  --ink-4:#948C7B;   /* credits, quiet furniture */
  --line:#33302A;
  --line-2:#4A443A;
  --panel:#1C1A15;

  --body:17px;
  --w-prose:70ch;
  --w-break:1060px;
  --w-shell:1200px;
  --step:0px;
  --gutter:20px;
  --tile:clamp(190px, calc(24vw - 40px), 470px);

  --serif:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --text:'Lora', Georgia, 'Times New Roman', serif;
}

/* --- breakpoints. Mobile-up to the desktop cap, then FOUR more above it: the
   prose measure, the body size, the break-out width, the shell and the grid
   column counts all keep growing to 2400px+ instead of banking margin. --- */
@media (min-width:700px){ :root{ --gutter:34px; --body:17.5px; --w-shell:1180px; --w-break:1040px; } }
@media (min-width:1000px){ :root{ --gutter:44px; --body:18px; --w-prose:72ch; --w-break:1120px; --w-shell:1280px; } }
@media (min-width:1200px){ :root{ --body:18.5px; --w-prose:74ch; --w-break:1280px; --w-shell:1440px; --step:0px; } }
@media (min-width:1500px){ :root{ --gutter:56px; --body:19px; --w-prose:76ch; --w-break:1500px; --w-shell:1660px; --step:88px; } }
@media (min-width:1800px){ :root{ --body:19.5px; --w-prose:78ch; --w-break:1760px; --w-shell:1940px; --step:120px; } }
@media (min-width:2200px){ :root{ --gutter:72px; --body:20.5px; --w-prose:80ch; --w-break:2060px; --w-shell:2260px; --step:160px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--text);font-size:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
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}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-0.015em;line-height:1.04;margin:0}
::selection{background:var(--accent);color:var(--ground)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.shell{width:min(100% - var(--gutter)*2, var(--w-shell));margin-inline:auto}
.break{width:min(100% - var(--gutter)*2, var(--w-break));margin-inline:auto}
.kicker{font-family:var(--text);font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin:0}
.eyebrow{display:flex;align-items:center;gap:0.6em}
.icon{width:1.45em;height:1.45em;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon--lg{width:2.6em;height:2.6em;stroke-width:1.2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- masthead ---------- */
.masthead{padding:clamp(18px,2vw,40px) 0 0;border-bottom:1px solid var(--line)}
.masthead__name{display:block;text-align:center;font-family:var(--serif);
  font-size:clamp(46px,7vw,150px);line-height:0.86;letter-spacing:-0.02em;color:var(--ink)}
.masthead__name:hover{text-decoration:none;color:var(--ink)}
.masthead__name em{font-style:italic;color:var(--accent)}
.profile-rule{display:block;width:100%;height:clamp(22px,2vw,44px);margin-top:0.35em;color:var(--accent)}
.masthead__line{max-width:none;margin:0.9em auto 0;text-align:center;font-style:italic;
  font-size:0.92rem;color:var(--ink-3);line-height:1.5;text-wrap:nowrap}
@media (max-width:760px){ .masthead__line{max-width:46ch;text-wrap:pretty} }
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(4px,2vw,40px);
  margin-top:clamp(16px,1.6vw,34px);padding:6px 0 8px;border-top:1px solid var(--line)}
.nav a{display:flex;align-items:center;gap:0.5em;color:var(--ink);min-height:44px;padding:0 0.5em;
  font-size:0.76rem;letter-spacing:0.2em;text-transform:uppercase}
.nav a:hover{color:var(--accent);text-decoration:none}
.nav .icon{width:2.15em;height:2.15em;color:var(--accent);stroke-width:1.4}
.nav a:hover .icon{color:var(--ink)}
.nav a[aria-current="page"] .icon{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent)}

/* ---------- bands ---------- */
section{position:relative}
.band{padding:clamp(38px,4.4vw,110px) 0}
.band--tight{padding:clamp(26px,2.6vw,60px) 0}
.band--ochre{background:#221E17;color:var(--ink);border-top:2px solid var(--accent);border-bottom:1px solid var(--line-2)}
.band--ochre .notes-head h2{color:var(--ink)}
.band--ochre a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.band--ochre h1 a,.band--ochre h2 a,.band--ochre h3 a,.band--ochre .lead-title a{text-decoration:none;color:inherit}
.band--ochre h1 a:hover,.band--ochre h2 a:hover,.band--ochre h3 a:hover{text-decoration:underline}
.band--ochre .kicker{color:var(--accent)}
.band--ochre .timeline li,.band--ochre .deflist > div,.band--ochre .statblock{border-color:var(--line-2)}
.band--ochre .t-what,.band--ochre .deflist dd,.band--ochre .stat-label{color:var(--ink-body)}
.band--ochre .kicker{color:var(--accent)}
.band--cobalt{background:var(--second);color:var(--ink)}
.band--cobalt .map-band p{color:#CFE0D7}
.band--cobalt a{color:var(--ink)}
.band--rule{border-top:1px solid var(--line)}

/* ---------- homepage lead ---------- */
.lead-grid{display:grid;gap:clamp(22px,3vw,72px);align-items:end}
@media (min-width:1000px){ .lead-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} }
.lead-title{font-size:clamp(38px,6.2vw,132px);line-height:0.93;max-width:21ch;margin:0.35em 0 0}
.lead-title em{font-style:italic}
.lead-title a{color:inherit}
.lead-dek{font-size:clamp(16px,1.2vw,26px);line-height:1.5;margin:1.1em 0 0;max-width:62ch;text-wrap:pretty}
.lead-meta{margin:1.4em 0 0;font-size:0.82rem;letter-spacing:0.14em;text-transform:uppercase}

/* signature numerals */
.sig{display:grid;gap:clamp(24px,3vw,66px)}
@media (min-width:820px){ .sig{grid-template-columns:repeat(3,1fr)} }
@media (min-width:2200px){ .sig{gap:96px} }
.sig__num{font-family:var(--serif);font-size:clamp(46px,6vw,150px);line-height:0.82;letter-spacing:-0.03em;color:var(--ink)}
.sig__num--word{font-size:clamp(34px,3.6vw,84px)}
.sig svg.spark{display:block;width:100%;height:clamp(28px,2.6vw,58px);color:var(--second-line);margin:0.35em 0 0.6em}
.sig h3{font-size:clamp(20px,1.8vw,40px);line-height:1.06}
.sig h3 a{color:var(--ink)}
.sig p{margin:0.6em 0 0;color:var(--ink-2);font-size:0.94rem;line-height:1.55}

/* ---------- FIGURE SYSTEM — one drawing language, four treatments ----------
   plate: full-bleed band, caption + credit on one row inside the shell
   mat:   photograph sits on a panel with a hairline; accent rule over caption
   inset: small figure inside the prose, text runs beside it on desktop
   step:  image offset out of a coloured panel                              */
figure{margin:0}
.article-figure img,.fig img{width:100%;height:auto}
.figcap{margin-top:0.7em;display:flex;flex-wrap:wrap;gap:0.4em 2.2em;align-items:baseline}
.figcap p{margin:0;flex:1 1 22ch;min-width:0;max-width:82ch;font-size:0.86rem;line-height:1.45;color:var(--ink-3)}
.figcap .credit{flex:0 1 auto;margin:0;font-size:0.82rem;line-height:1.45;color:var(--ink-4);max-width:52ch}
@media (min-width:1000px){ .figcap .credit{margin-left:auto;text-align:right} }

.fig--plate{width:100%}
.fig--plate img{aspect-ratio:16/7;object-fit:cover}
.fig--plate .figcap{padding-top:0.2em;border-top:1px solid var(--line-2);
  width:min(100% - var(--gutter)*2, var(--w-shell));margin-inline:auto;margin-top:0.8em}

.fig--mat{background:var(--panel);border:1px solid var(--line-2);padding:clamp(10px,0.9vw,20px)}
.fig--mat img{aspect-ratio:4/3;object-fit:cover}
.fig--mat .figcap{border-top:2px solid var(--accent);padding-top:0.6em;margin-top:0.8em}

.flow{display:flow-root}
.flow p{margin:0 0 1.05em;font-size:1.18rem;line-height:1.72;color:var(--ink-body);text-wrap:pretty}
.fig--inset{border-top:1px solid var(--line-2);padding-top:0.7em;margin:0 0 1.6em}
.fig--inset img{aspect-ratio:4/5;object-fit:cover}
.fig--inset .figcap{display:block;margin-top:0.7em}
.fig--inset .figcap p{max-width:100%;font-size:0.88rem}
.fig--inset .figcap .credit{margin-top:0.4em;text-align:left}
@media (min-width:820px){
  /* fourth treatment: text wraps the image; caption sits under it at image width */
  .fig--inset{float:left;width:min(44%,360px);margin:0.35em clamp(24px,2.4vw,52px) 1.9em 0}
}
@media (min-width:1000px){
  .fig--inset{width:min(42%,400px)}
}

.fig--step{position:relative;padding:0 0 0 clamp(20px,2.6vw,58px)}
.fig--step::before{content:"";position:absolute;inset:0 30% 26% 0;background:var(--second)}
.fig--step img{position:relative;aspect-ratio:3/2;object-fit:cover;margin-top:clamp(16px,1.8vw,40px)}
.fig--step .figcap{position:relative}

/* ---------- article layout: three visibly different widths ---------- */
.article-body{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [break-start] var(--step)
    [prose-start] min(var(--w-prose), 100% - var(--gutter)*2) [prose-end]
    minmax(0, calc(var(--w-break) - var(--w-prose) - var(--step))) [break-end]
    minmax(var(--gutter),1fr) [full-end];
}
.article-body > *{grid-column:prose-start / prose-end}
.article-body > .flow{grid-column:prose-start / prose-end;margin-bottom:1.05em}
.article-body > .breakout{grid-column:break-start / break-end}
.article-body > .fullbleed{grid-column:full-start / full-end}
.article-body > p,.article-body > h2,.article-body > h3,.article-body > ul,.article-body > ol{max-width:100%}
.article-body p{margin:0 0 1.05em;font-size:1.18rem;line-height:1.72;color:var(--ink-body);text-wrap:pretty}
.article-body h2{font-size:clamp(24px,2.3vw,52px);margin:2.1em 0 0.7em;line-height:1.05}
.article-body h2:first-of-type{margin-top:1.2em}
.article-body > .breakout,.article-body > .fullbleed{margin:2em 0 2.2em}

.post-head{padding:clamp(26px,3vw,72px) 0 clamp(18px,1.8vw,40px)}
/* align the head to the article's break-out column, not the wider shell */
.post-head.shell{width:min(100% - var(--gutter)*2, var(--w-break))}
.post-title{font-size:clamp(34px,5.4vw,120px);line-height:0.93;max-width:22ch}
.post-title em{font-style:italic;color:var(--accent)}
.post-eyebrow{display:flex;align-items:center;gap:0.6em;color:var(--accent);
  font-size:0.74rem;letter-spacing:0.22em;text-transform:uppercase;margin-bottom:1em}
.post-eyebrow a{color:var(--accent)}
.post-summary{margin:1.1em 0 0;font-size:0.84rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-4)}

/* ---------- text components ---------- */
.lead{font-size:1.22rem;line-height:1.46;font-style:italic;color:var(--ink-2);
  margin:1.1em 0 0;max-width:64ch;text-wrap:pretty}
.pullquote{margin:0;border-top:2px solid var(--accent);border-bottom:1px solid var(--line-2);padding:0.9em 0 1em}
.pullquote p{font-family:var(--serif);font-size:clamp(23px,3.1vw,72px);line-height:1.06;
  margin:0;max-width:46ch;color:var(--ink);letter-spacing:-0.015em;text-wrap:balance}
.blockquote{margin:0;padding-left:clamp(14px,1.4vw,28px);border-left:3px solid var(--flag)}
.blockquote p{margin:0;font-size:1.14rem;line-height:1.62;font-style:italic}
.blockquote cite{display:block;margin-top:0.7em;font-style:normal;font-size:0.82rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-4)}
.callout{background:var(--panel);border:1px solid var(--line-2);border-top:3px solid var(--accent);
  padding:clamp(16px,1.6vw,34px);margin:0}
.callout p{margin:0;font-size:1.1rem;line-height:1.6;color:var(--ink-body)}
.callout p + p{margin-top:0.7em}
p.note{font-size:1rem;line-height:1.55;color:var(--ink-3);border-left:2px solid var(--line-2);
  padding-left:0.9em;margin:0 0 1.15em}

/* notes-for-design material, given full-bleed weight instead of a side rail */
.notes-band{padding:clamp(26px,3vw,70px) 0}
.notes-band h2,.notes-band h3{margin:0 0 0.8em}
.notes-band .kicker{margin-bottom:0.8em}
.notes-head{display:flex;flex-wrap:wrap;gap:0.5em 1.6em;align-items:baseline;margin-bottom:1.2em}
.notes-head h2{font-size:clamp(21px,1.9vw,42px)}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;gap:0.2em 1.4em;padding:0.72em 0;border-top:1px solid currentColor;align-items:baseline}
.timeline li:last-child{border-bottom:1px solid currentColor}
@media (min-width:760px){ .timeline li{grid-template-columns:minmax(9ch,17ch) minmax(0,1fr)} }
@media (min-width:1800px){ .timeline li{grid-template-columns:minmax(9ch,22ch) minmax(0,1fr)} }
.t-when{font-family:var(--serif);font-size:1.24em;line-height:1.1}
.t-what{font-size:0.96rem;line-height:1.5;text-wrap:pretty}

.deflist{margin:0;display:grid;gap:0}
.deflist > div{padding:0.72em 0;border-top:1px solid currentColor;display:grid;gap:0.15em 1.4em;align-items:baseline}
.deflist > div:last-child{border-bottom:1px solid currentColor}
@media (min-width:760px){ .deflist > div{grid-template-columns:minmax(12ch,26ch) minmax(0,1fr)} }
.deflist dt{font-weight:600;font-size:0.98rem;line-height:1.4}
.deflist dd{margin:0;font-size:0.96rem;line-height:1.5;text-wrap:pretty}

.statrow{display:grid;gap:clamp(16px,2vw,48px)}
@media (min-width:620px){ .statrow{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} }
.statblock{display:flex;flex-direction:column;gap:0.3em;border-top:2px solid currentColor;padding-top:0.6em}
.stat-num{font-family:var(--serif);font-size:clamp(34px,3.4vw,76px);line-height:0.9;letter-spacing:-0.02em}
.stat-label{font-size:0.86rem;line-height:1.45;opacity:0.86;text-wrap:pretty}

/* tables */
.datatable,.versus{width:100%;border-collapse:collapse;font-size:0.96rem}
.datatable caption,.versus caption{text-align:left;font-size:0.74rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--accent);padding-bottom:0.7em}
.datatable th,.versus th{text-align:left;font-weight:600;font-size:0.74rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink-3);padding:0.6em 1.2em 0.6em 0;border-bottom:1px solid var(--line-2)}
.datatable td,.versus td{padding:0.72em 1.2em 0.72em 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.datatable tr td:last-child,.versus tr td:last-child{padding-right:0}
.versus td:first-child{font-weight:600;width:30%}

/* charts */
.chart{margin:0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:0.8em;font-size:0.86rem;color:var(--ink-3);line-height:1.45;max-width:80ch}
.chart .bar-label{font-family:var(--text);font-size:11px;fill:var(--ink-3)}
.chart .bar-val{font-family:var(--serif);font-size:15px;fill:var(--ink)}

/* gallery */
.gallery{display:grid;gap:clamp(10px,1vw,20px);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.gallery figure{margin:0}
.gallery img{aspect-ratio:1/1;object-fit:cover}
.gallery figcaption{margin-top:0.5em;font-size:0.78rem;color:var(--ink-3);line-height:1.4}

/* map */
.map-band{display:grid;gap:clamp(20px,2.6vw,64px);align-items:center}
@media (min-width:1000px){ .map-band{grid-template-columns:minmax(0,0.85fr) minmax(0,1fr)} }
.map-band h2{font-size:clamp(24px,2.6vw,62px);line-height:1.02;max-width:24ch}
.map-band p{font-size:1.02rem;line-height:1.55;max-width:52ch}
.map-copy{max-width:60ch}
.map-copy h2{margin:0.5em 0 0;max-width:22ch}
.map-copy > p{margin:1em 0 0;max-width:52ch}
.map-legend-head{margin:1.8em 0 0.5em;color:#CFE0D7}
.map-legend{list-style:none;margin:0;padding:0;display:grid;gap:0}
.map-legend li{border-top:1px solid rgba(242,237,227,0.28)}
.map-legend li:last-child{border-bottom:1px solid rgba(242,237,227,0.28)}
.map-legend a{display:flex;align-items:baseline;gap:0.9em;padding:0.66em 0;color:var(--ink);letter-spacing:0.02em;min-height:44px}
.map-place{display:grid;gap:0.12em}
.map-name{font-family:var(--serif);font-size:1.32rem;line-height:1.08}
.map-piece{font-size:0.84rem;line-height:1.35;color:#CFE0D7}
.map-legend a:hover{color:#F7E4BE;text-decoration:none}
.map-legend .map-key{flex:none;position:relative;top:0.2em;width:1.9em;height:1.9em;display:grid;place-items:center;border-radius:50%;
  background:var(--flag);color:var(--ink);font-family:var(--serif);font-size:1.05em;line-height:1}
.map-slot{display:flex;justify-content:center}
.map-slot svg{max-height:min(72vh,760px);width:auto;max-width:100%}
.closer{text-align:center}
.closer__line{font-family:var(--serif);font-size:clamp(28px,4.2vw,96px);line-height:1.04;
  letter-spacing:-0.02em;max-width:26ch;margin:0.4em auto 0.5em}
.closer__line em{font-style:italic;color:var(--accent)}
.closer .profile-rule{color:var(--accent);margin-bottom:clamp(20px,2.2vw,50px)}
.closer__stats{display:grid;gap:clamp(16px,2vw,50px);text-align:left;max-width:var(--w-break);margin-inline:auto}
@media (min-width:820px){ .closer__stats{grid-template-columns:repeat(3,minmax(0,1fr))} }
.closer__stats .stat-num{font-size:clamp(28px,2.6vw,58px)}
.closer__go{justify-content:center}
.closer__go a{font-size:0.8rem;letter-spacing:0.22em;text-transform:uppercase;padding-top:0.4em}
.map-num{font-family:var(--serif);font-size:44px;fill:#F2EDE3}
.map-figure{margin:0}
.map-figure .map-slot{width:100%}
.map-figure svg{width:100%;height:auto;display:block}
.map-figure figcaption{margin-top:0.9em;font-size:0.86rem;color:var(--ink-2);line-height:1.5;max-width:80ch}
.map-pin{fill:var(--flag)}
.map-label{font-family:var(--text);font-size:15px;fill:var(--ink);letter-spacing:0.04em}
@media (min-width:1500px){ .map-label{font-size:17px} }

/* cards */
.profile-grid{display:grid;gap:clamp(16px,1.8vw,40px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.profile-card{display:flex;flex-direction:column;gap:0.5em;background:var(--panel);
  border:1px solid var(--line-2);padding:clamp(14px,1.3vw,26px)}
.profile-card .p-photo{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:0.4em}
.profile-card h3{font-size:1.35rem;line-height:1.1}
.profile-card .p-role{margin:0;font-size:0.76rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent)}
.profile-card p{margin:0;font-size:0.94rem;line-height:1.55;color:var(--ink-2)}
.profile-card .p-links{margin-top:auto;padding-top:0.6em;font-size:0.86rem}
.profile-card .p-attr{font-size:0.8rem;color:var(--ink-4)}
.profile-card.no-photo{border-left:3px solid var(--flag)}

.org-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.org-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.2em 0.9em;align-items:center;
  background:var(--panel);border:1px solid var(--line-2);padding:0.8em 1em;color:var(--ink)}
.org-card:hover{border-color:var(--accent);text-decoration:none}
.org-card .org-logo{grid-row:span 2;width:44px;height:44px;object-fit:contain}
.org-card .org-name{font-weight:600;font-size:0.96rem;line-height:1.3}
.org-card .org-host{font-size:0.76rem;color:var(--ink-4);word-break:break-word}
.entity-ref{white-space:nowrap}

.further-grid{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
@media (min-width:760px){ .further-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} }
.further-grid a{display:flex;min-height:100%;align-items:flex-start;background:var(--ground);
  padding:clamp(12px,1.2vw,24px);color:var(--ink);font-family:var(--serif);font-size:1.28rem;line-height:1.12}
.further-grid a:hover{background:var(--panel);color:var(--accent);text-decoration:none}

.related-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.related-links li{border-top:1px solid var(--line-2)}
.related-links li:last-child{border-bottom:1px solid var(--line-2)}
.related-links a{display:grid;gap:0.15em;padding:0.8em 0;color:var(--ink)}
.related-links a:hover{color:var(--accent);text-decoration:none}
.related-links .r-title{font-family:var(--serif);font-size:1.3rem;line-height:1.1}
.related-links .r-note{font-size:0.86rem;color:var(--ink-3);line-height:1.45}

/* section index / archive */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--line)}
.cat-list li:last-child{border-bottom:1px solid var(--line)}
.cat-list a{display:grid;gap:0.25em 2vw;padding:clamp(12px,1.2vw,26px) 0;color:var(--ink);align-items:baseline}
@media (min-width:900px){ .cat-list a{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} }
.cat-list a:hover{color:var(--accent);text-decoration:none}
.cat-list .c-title{font-family:var(--serif);font-size:clamp(21px,1.9vw,40px);line-height:1.08}
.cat-list .c-brief{font-size:0.92rem;line-height:1.5;color:var(--ink-3);text-wrap:pretty}

.section-head{display:grid;gap:clamp(14px,1.6vw,34px)}
@media (min-width:1000px){ .section-head{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end} }
.section-title{font-size:clamp(32px,4.6vw,104px);line-height:0.95;max-width:24ch}
.section-blurb{margin:0;font-size:1.05rem;line-height:1.55;color:var(--ink-2);max-width:52ch}

.hub{display:grid;gap:clamp(26px,3vw,64px)}
@media (min-width:1000px){ .hub{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1800px){ .hub{grid-template-columns:repeat(3,minmax(0,1fr))} }
.hub h2{font-size:clamp(21px,1.8vw,38px);line-height:1.08;margin-bottom:0.5em}
.hub h2 a{color:var(--ink)}
.hub ul{list-style:none;margin:0;padding:0}
.hub li{border-top:1px solid var(--line)}
.hub li a{display:block;padding:0.6em 0;font-size:0.98rem;line-height:1.4;color:var(--ink-2)}
.hub li a:hover{color:var(--accent);text-decoration:none}

/* ---------- supporters ---------- */
.supporters .kicker{margin-bottom:0.8em}
.supporters__head{display:flex;flex-wrap:wrap;gap:0.4em 2em;align-items:baseline;margin-bottom:clamp(18px,1.8vw,40px)}
.supporters__head h2{font-size:clamp(21px,1.9vw,42px)}
.supporters__head p{margin:0;font-size:0.88rem;color:var(--ink-3);max-width:46ch;line-height:1.5}
.sponsor-run{display:grid;grid-template-columns:repeat(auto-fit,var(--tile,264px));gap:clamp(12px,1.2vw,26px);
  justify-content:space-between;align-items:stretch;margin-bottom:clamp(12px,1.2vw,26px)}
.sponsor{display:grid;gap:0.6em;align-content:start;width:var(--tile,264px);background:var(--panel);border:1px solid var(--line-2);
  padding:14px;color:var(--ink)}
.sponsor:hover{border-color:var(--accent);text-decoration:none}
.sponsor img{width:100%;height:56px;object-fit:contain;object-position:left center;
  background:#0E0D0A;padding:6px 10px;border:1px solid var(--line)}
.sponsor .sponsor-name{font-size:0.82rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.3}
@media (max-width:620px){
  .sponsor-run{grid-template-columns:repeat(2,minmax(0,1fr));--tile:auto}
  .sponsor{width:auto;align-content:start}
  .sponsor-run{align-items:stretch}
  .sponsor img{height:64px}
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:clamp(40px,4vw,110px);padding:clamp(28px,3vw,72px) 0 clamp(30px,3vw,66px);text-align:center}
.foot__name{font-family:var(--serif);font-size:clamp(26px,2.4vw,54px);line-height:0.9}
.foot__name em{font-style:italic;color:var(--accent)}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(2px,1.6vw,36px);margin-top:1.2em}
.foot nav a{color:var(--ink);font-size:0.74rem;letter-spacing:0.2em;text-transform:uppercase;
  min-height:44px;display:flex;align-items:center;padding:0 0.5em}
.foot p{max-width:56ch;margin:1.4em auto 0;font-style:italic;font-size:0.92rem;color:var(--ink-4);line-height:1.5}

.sg-360{container-type:inline-size}
@container (max-width:430px){
  .timeline li,.deflist > div{grid-template-columns:minmax(0,1fr)}
  .figcap .credit{margin-left:0;text-align:left}
}

/* ---------- utility ---------- */
.stack-lg > * + *{margin-top:clamp(26px,3vw,70px)}
.stack > * + *{margin-top:clamp(14px,1.4vw,30px)}
.clearfix::after{content:"";display:block;clear:both}
.plain-page{padding:clamp(30px,3.4vw,80px) 0}
.plain-page h1{font-size:clamp(32px,4.4vw,96px);line-height:0.95;max-width:22ch}
.plain-page p{font-size:1.06rem;line-height:1.65;max-width:70ch;color:var(--ink-2)}
.expander{margin:0}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander input:checked ~ .cat-list .more{display:block}
.expander label{display:inline-block;margin-top:0.9em;font-size:0.76rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--accent);cursor:pointer;border-bottom:1px solid var(--accent);padding-bottom:3px}
.expander input:checked ~ label .lbl-more{display:none}
.expander label .lbl-less{display:none}
.expander input:checked ~ label .lbl-less{display:inline}

/* 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}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.supporters__head{flex-wrap:wrap!important}
.supporters__head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

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

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-blurb-contrast: the design never coloured .sponsor-blurb because its bar was
   marks-only; our copy would inherit the page's dark ink onto a dark tile. */
.sponsor .sponsor-blurb{color:rgba(255,255,255,.82)}
.sponsor .sponsor-name{color:rgba(255,255,255,.95)}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

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

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#E9EDE8;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* 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-run .sponsor.sponsor img{height:56px!important;max-height:none!important;display:block!important;width:314px!important;max-width:100%!important;flex:none!important}

/* op-nav-collapse: this nav printed 163px 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 "centre-pill", 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 (20px) 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 (940px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "plus" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-disclose{display:none}
@media (max-width:940px){
  .nav-disclose{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;margin-inline:auto;justify-self:center;border:1.5px solid currentColor;border-radius:999px;padding:10px 22px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-disclose-bars{width:11px;height:11px;flex:none;position:relative;border-top:1.5px solid currentColor;margin-top:-1px;box-shadow:inset 5px 0 0 -3.75px currentColor}
  .nav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-disclose-c:checked ~ .nav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .shell:has(> .nav-disclose){display:flow-root}
  .nav-disclose:not(:has(~ .nav)){display:none}
}
/* op-heading-levels */
h2.rt-h3{font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.04; margin: 0px;}
.sig h2.rt-h3{font-size: clamp(20px, 1.8vw, 40px); line-height: 1.06;}
.sig h2.rt-h3 a{color: var(--ink);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div > figure.article-figure.fig.fig--mat > img,
  div > figure.article-figure.fig.fig--step > img,
  div.breakout > figure.article-figure.fig.fig--mat > img,
  div.breakout > figure.article-figure.fig.fig--step > img,
  div.flow > figure.article-figure.fig.fig--inset > img,
  main > figure.article-figure.fig.fig--plate > 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}
[data-partner] img{background:transparent!important}