/* Second Unit — practical action, read as apparatus.
   Type: Bricolage Grotesque (display) + Karla (text). */

:root{
  --paper:#0A0A0B;
  --paper-2:#111114;
  --paper-3:#16161A;
  --ink:#F2F0EB;
  --ink-2:#C3C0B9;
  --mute:#8A8A8F;
  --line:rgba(242,240,235,0.16);
  --line-soft:rgba(242,240,235,0.09);
  --accent:#E9A62B;
  --mat:#3C6BE8;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --text:'Karla',system-ui,sans-serif;
  --gut:clamp(18px,4vw,48px);
  --band:clamp(40px,6vw,84px);
  --maxw:1400px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-0.02em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
figure{margin:0}
table{border-collapse:collapse;width:100%}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--accent);color:var(--paper);padding:10px 14px}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:20}
.masthead-in{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:16px 0;flex-wrap:wrap}
.wordmark{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.4vw,27px);letter-spacing:-0.03em;line-height:1;display:flex;align-items:baseline;gap:12px}
.wordmark b{font-weight:800}
.wordmark span{font-family:var(--text);font-weight:400;font-size:13px;letter-spacing:0;color:var(--mute);white-space:nowrap}
.nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;font-weight:500;align-items:baseline}
.nav a{color:var(--ink-2);white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
.nav .nav-browse{font-family:var(--display);font-weight:600;color:var(--ink);border:1px solid var(--line);padding:5px 12px}
.nav .nav-browse:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- kicker / section furniture ---------- */
.kicker{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.kicker--mat{color:var(--mat)}
.band{padding-block:var(--band);border-top:1px solid var(--line)}
.band--flush{border-top:0}
.band-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px 48px;align-items:end;margin-bottom:36px}
.band-head h2{font-size:clamp(30px,3.4vw,44px)}
.band-head p{margin:0;color:var(--ink-2);font-size:17px}
@media(max-width:820px){.band-head{grid-template-columns:1fr}}

/* ---------- home lead ---------- */
.lead-feature{position:relative;border-bottom:1px solid var(--line)}
.lead-figure{position:relative;width:100%;aspect-ratio:16/7;min-height:340px;overflow:hidden;background:var(--paper-2)}
.lead-figure img{width:100%;height:100%;object-fit:cover}
.lead-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,.96) 4%,rgba(10,10,11,.6) 46%,rgba(10,10,11,.08) 100%);pointer-events:none}
.lead-copy{position:relative;margin-top:-14vw;padding-bottom:8px;max-width:960px}
.lead-copy h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,6.2vw,84px);line-height:0.94;letter-spacing:-0.035em}
.lead-copy .dek{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--ink-2);max-width:60ch;margin:18px 0 0}
.lead-copy .meta{margin-top:16px}
@media(max-width:700px){.lead-copy{margin-top:24px}.lead-figure{aspect-ratio:4/3}}

.meta{font-size:14px;letter-spacing:0.02em;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0}
.meta .dot{opacity:.5}
.meta a{color:var(--ink-2)}

/* ---------- kit line (the site's signature) ---------- */
.kitline{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin:26px 0 0}
.kitline div{background:var(--paper);padding:14px 16px 16px}
.kitline dt,.kitline .k{display:block;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.kitline dd,.kitline .v{margin:0;font-size:16px;line-height:1.35;color:var(--ink)}
.kitline--tight div{padding:10px 12px 12px}

/* ---------- the index ---------- */
.index-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.index-tools button{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:0.02em;color:var(--ink-2);background:transparent;border:1px solid var(--line);padding:7px 14px;cursor:pointer}
.index-tools button:hover{color:var(--ink);border-color:var(--ink-2)}
.index-tools button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.kit-index{border-top:1px solid var(--line)}
.kit-row{display:grid;grid-template-columns:76px minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr) 118px;gap:0 24px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line-soft);position:relative}
.kit-row:hover{background:var(--paper-2)}
.kit-thumb{width:76px;aspect-ratio:4/3;object-fit:cover;background:var(--paper-3)}
.kit-name{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.15;margin:0 0 3px}
.kit-name a{display:inline-block}
.kit-brief{margin:0;font-size:14.5px;color:var(--mute);line-height:1.4;max-width:54ch;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.kit-field{font-size:14.5px;line-height:1.3;color:var(--ink-2)}
.kit-field b{display:block;font-family:var(--display);font-weight:800;font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.kit-sect{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);text-align:right}
@media(max-width:560px){
  .kit-thumb{width:58px}
  .kit-row{grid-template-columns:58px minmax(0,1fr);gap:0 14px}
  .kit-name{font-size:17.5px}
  .map-legend{grid-template-columns:1fr 1fr}
  .band-head h2{font-size:clamp(26px,7vw,34px)}
  .body p{font-size:18px}
  .body>.lead+p::first-letter,.body>h2:first-of-type+p::first-letter{font-size:3.2em}
}
@media(max-width:1080px){
  .kit-row{grid-template-columns:76px minmax(0,1fr);gap:0 18px;padding:14px 0;align-items:start}
  .kit-thumb{width:76px}
  .kit-fields{grid-column:2;margin-top:10px}
  .kit-sect{text-align:left;grid-column:2;margin-top:10px}
}
.kit-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px 24px}
.kit-index.is-collapsed .kit-row:nth-child(n+9){display:none}
.index-more{margin-top:18px}
.index-more button{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);background:transparent;border:1px solid var(--line);padding:11px 20px;cursor:pointer}
.index-more button:hover{border-color:var(--accent);color:var(--accent)}
@media(min-width:1081px){.kit-fields{display:contents}}

/* ---------- cards ---------- */
.card-grid{display:grid;gap:1px;background:var(--line-soft);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.card{display:flex;flex-direction:column;background:var(--paper);padding:0 0 26px}
.card-img{aspect-ratio:3/2;width:100%;object-fit:cover;background:var(--paper-3)}
.card-body{padding:22px 24px 0;display:flex;flex-direction:column;flex:1}
.card-body .kicker{min-height:3.3em}
.card h3{font-size:23px;line-height:1.12;min-height:2.24em;margin:0 0 10px}
.card p{font-size:15.5px;color:var(--ink-2);margin:0 0 16px}
.card .meta{margin-top:auto}

.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:1px;background:var(--line-soft)}
.duo-item{background:var(--paper);display:flex;flex-direction:column}
.duo-item img{width:100%;aspect-ratio:5/4;object-fit:cover}
.duo-copy{padding:30px 32px 34px;display:flex;flex-direction:column;flex:1;gap:14px}
.duo-copy h3{font-size:clamp(24px,2.4vw,32px);line-height:1.06}
.duo-copy p{margin:0;color:var(--ink-2)}
.duo-copy .meta{margin-top:auto}

/* ---------- sections hub ---------- */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:1px;background:var(--line-soft)}
.hub-item{background:var(--paper);padding:26px 26px 30px;display:flex;flex-direction:column;gap:10px;min-height:210px}
.hub-item:hover{background:var(--paper-2)}
.hub-no{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:0.14em;color:var(--mute)}
.hub-item h3{font-size:27px}
.hub-item p{margin:0;color:var(--ink-2);font-size:15.5px}
.hub-item .count{margin-top:auto;font-size:13px;color:var(--accent);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;font-family:var(--display)}

/* ---------- supporters mosaic ---------- */
.supporters{display:grid;grid-template-columns:repeat(auto-fill,minmax(0,272px));gap:14px;justify-content:space-between;align-items:stretch}
.sponsor-group+.sponsor-group{margin-top:30px}
.sponsor-group>h3{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute);margin:0 0 16px}
.sponsor{display:flex;flex-direction:column;gap:10px;background:var(--paper-2);border:1px solid var(--line-soft);padding:18px;min-width:0}
.sponsor:hover{border-color:var(--line);background:var(--paper-3)}
.sponsor img{width:auto;max-width:100%;height:auto;max-height:44px;object-fit:contain;object-position:left center}
.sponsor-logo{display:flex;align-items:center;justify-content:flex-start;background:#08080A;border:1px solid var(--line-soft);padding:10px 14px;width:236px;height:66px;flex:none;overflow:hidden}
.sponsor-name{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.2;color:var(--ink);word-break:break-word}
.sponsor-blurb{font-size:14.5px;line-height:1.45;color:var(--ink-2);min-width:200px}
.sponsor.feat{background:var(--paper-3);border-color:rgba(233,166,43,.35)}
.sponsor.feat .sponsor-name{font-size:17px}
@media(max-width:620px){.supporters{grid-template-columns:1fr}.sponsor-logo{width:100%;max-width:236px}}

/* ---------- map ---------- */
.map-band{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px}
@media(max-width:900px){.map-band{grid-template-columns:1fr}}
.map-figure{border:1px solid var(--line-soft);background:var(--paper-2)}
.map-slot{width:100%}
.map-figure svg{display:block;width:100%;height:auto}
.map-figure figcaption{padding:14px 18px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--mute)}
.map-pin-label{font-family:var(--text);font-weight:500;font-size:21px;fill:#F2F0EB;letter-spacing:0.01em;stroke:#0D0D10;stroke-width:4;paint-order:stroke fill}
.map-legend{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));gap:8px 16px;font-size:14.5px;color:var(--ink-2)}
.map-legend li::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);margin-right:9px;vertical-align:middle}
.map-jump{font-family:var(--text);font-size:15px;color:var(--ink-2);background:none;border:0;padding:2px 0;cursor:pointer;border-bottom:1px solid transparent}
.map-jump:hover{color:var(--accent);border-bottom-color:var(--accent)}
.map-jump[aria-pressed="true"]{color:var(--accent);font-weight:700}
.map-tools{margin:18px 0 0}
.map-reset{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);background:transparent;border:1px solid var(--line);padding:9px 16px;cursor:pointer}
.map-reset:hover{border-color:var(--accent);color:var(--accent)}
.map-figure .pin{cursor:pointer}
.map-figure .pin .pin-dot,.map-figure .pin .pin-halo{transition:opacity .2s}
.map-figure .pin:hover .pin-halo,.map-figure .pin:focus-visible .pin-halo{opacity:.34}
.map-figure .pin.is-active .pin-dot{fill:#FFFFFF}
.map-figure .pin.is-active .pin-halo{opacity:.4}
.map-figure svg{transition:none}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--paper-2);padding-block:44px 34px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:30px 40px}
.footer h4{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:15px}
.footer a{color:var(--ink-2)}
.footer-note{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--mute);max-width:70ch}

/* ---------- article ---------- */
.article-head{border-bottom:1px solid var(--line);padding-block:clamp(28px,4vw,54px) 0}
.article-head>*{max-width:min(700px,100%);margin-inline:auto}
.article-head>.article-hero{max-width:none}
.article-head .eyebrow{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:18px}
.article-head h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.6vw,62px);line-height:0.96;letter-spacing:-0.03em}
.article-hero{margin-top:34px;position:relative}
.article-hero img{width:100%;aspect-ratio:2/1;object-fit:cover;background:var(--paper-3)}
.article-hero figcaption{padding:12px 0 26px;font-size:14.5px;color:var(--mute);max-width:78ch}
@media(max-width:700px){.article-hero img{aspect-ratio:4/3}}

.body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(700px,100%)) minmax(0,1fr);padding-block:clamp(30px,4vw,56px) 0}
.body>*{grid-column:2}
.body .breakout{grid-column:1/-1;margin-inline:calc(-1 * var(--gut))}
.body p{font-size:19.5px;line-height:1.68;color:#E2DFD8}
.body h2{font-size:clamp(26px,2.8vw,36px);margin:44px 0 16px;letter-spacing:-0.025em}
.body h3{font-size:22px;margin:32px 0 12px}
.body a{color:var(--accent);box-shadow:inset 0 -1px 0 rgba(233,166,43,.5)}
.body a:hover{background:rgba(233,166,43,.14)}
.body ul,.body ol{font-size:19px;line-height:1.6}
.body li{margin-bottom:.5em}
.body>.lead{font-size:clamp(20px,2.1vw,25px);line-height:1.45;color:var(--ink);font-family:var(--display);font-weight:400;margin-bottom:1.1em}
.body>.lead+p::first-letter,.body>h2:first-of-type+p::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:3.9em;line-height:.84;padding:5px 12px 0 0;color:var(--accent)}
.body .plate:nth-of-type(even){background:#131318;border-top-color:rgba(233,166,43,.34)}
.body .plate:nth-of-type(even) .plate-kick{color:var(--mat)}

.lead{font-size:21px;line-height:1.45}

/* figures */
.article-figure{margin:38px 0}
.article-figure img{width:100%}
.article-figure figcaption{margin-top:11px;font-size:14.5px;line-height:1.5;color:var(--mute)}
.figure-wide{margin:52px 0}
.figure-wide img{aspect-ratio:21/9;object-fit:cover}
.figure-wide figcaption{padding-inline:var(--gut);max-width:80ch}
.figure-inset{margin:34px 0;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:start;min-width:0}
.figure-inset img{aspect-ratio:1/1;object-fit:cover}
.figure-inset figcaption{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}
@media(max-width:620px){.figure-inset{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin:38px 0}
.gallery img{aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{margin-top:8px;font-size:13.5px;color:var(--mute)}

/* plate = a full-width interruption carrying Notes-for-Design material */
.plate{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(30px,4vw,52px);margin-block:clamp(40px,5vw,64px)}
.plate-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.plate h2,.plate h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,30px);margin:0 0 4px}
.plate .plate-kick{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1px;background:var(--line-soft);margin:26px 0 0;border:1px solid var(--line-soft)}
.statblock{background:var(--paper);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,44px);line-height:0.95;letter-spacing:-0.03em;color:var(--accent)}
.stat-label{font-size:15px;line-height:1.4;color:var(--ink-2)}

.timeline{list-style:none;padding:0;margin:26px 0 0;counter-reset:t;display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.timeline li{background:var(--paper);display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:8px 28px;padding:18px 22px;min-width:0}
.t-when{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.25;color:var(--accent)}
.t-what{font-size:16.5px;line-height:1.5;color:var(--ink-2)}
@media(max-width:680px){.timeline li{grid-template-columns:1fr}}

.notegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;background:var(--line-soft);margin:26px 0 0;border:1px solid var(--line-soft)}
.notegrid>div{background:var(--paper);padding:20px 22px 22px}
.notegrid b{display:block;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:6px;line-height:1.25}
.notegrid span{font-size:16px;line-height:1.5;color:var(--ink-2)}

.pullquote{margin:44px 0;border-top:2px solid var(--accent);border-bottom:1px solid var(--line-soft);padding:22px 0 24px}
.pullquote p{font-family:var(--display);font-weight:400;font-size:clamp(23px,2.6vw,31px);line-height:1.22;letter-spacing:-0.02em;color:var(--ink);margin:0;text-wrap:pretty}
.blockquote{margin:38px 0;padding:0 0 0 22px;border-left:2px solid var(--mat)}
.blockquote p{font-size:19px;line-height:1.55;margin:0 0 10px;color:var(--ink)}
.blockquote cite{font-style:normal;font-size:14.5px;color:var(--mute)}
.callout{margin:36px 0;background:var(--paper-2);border-left:3px solid var(--accent);padding:22px 24px}
.callout p{font-size:18px;line-height:1.55;margin:0;color:var(--ink)}
.note{font-size:15.5px;line-height:1.55;color:var(--mute);border-top:1px solid var(--line-soft);padding-top:14px;margin:32px 0}

.versus,.datatable{margin:34px 0;font-size:16.5px}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.versus th,.datatable th{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line)}
.versus td:first-child,.datatable td:first-child{color:var(--ink)}
.datatable caption,.versus caption{caption-side:top;text-align:left;font-size:14px;color:var(--mute);padding-bottom:10px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.chart{margin:36px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:12px;font-size:14.5px;color:var(--mute)}
.chart text{font-family:var(--text);font-size:13px;fill:var(--ink-2)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;background:var(--line-soft);margin:32px 0;border:1px solid var(--line-soft)}
.profile-card{background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:10px}
.profile-card .p-photo{width:76px;height:76px;object-fit:cover;border-radius:50%}
.profile-card h3{font-size:20px;margin:0}
.profile-card .p-role{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin:0;font-weight:700}
.profile-card p{font-size:15.5px;color:var(--ink-2);margin:0}
.profile-card .p-links{margin-top:auto;font-size:15px}
.profile-card .p-attr{font-size:13px;color:var(--mute)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin:30px 0}
.org-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;background:var(--paper-2);border:1px solid var(--line-soft);padding:14px 16px}
.org-card:hover{border-color:var(--line)}
.org-logo{width:52px;height:52px;object-fit:contain;background:#08080A}
.org-name{font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--ink);display:block}
.org-host{font-size:13.5px;color:var(--mute);display:block}
.entity-ref{color:var(--accent);white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;margin:30px 0}
.further-grid a{background:var(--paper-2);border:1px solid var(--line-soft);padding:18px 20px;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.2}
.further-grid a:hover{border-color:var(--accent)}

.related{border-top:1px solid var(--line);margin-top:var(--band);padding-block:clamp(30px,4vw,50px)}
.related>*{max-width:min(1100px,100%);margin-inline:auto}
.related-links{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.related-links li{background:var(--paper)}
.related-links a{display:flex;flex-direction:column;gap:8px;padding:22px 24px;height:100%}
.related-links a:hover{background:var(--paper-2)}
.related-links strong{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.15;color:var(--ink)}
.related-links span{font-size:14.5px;color:var(--mute)}
.related-links:empty{display:none}

/* category / browse */
.cat-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.cat-list li{border-bottom:1px solid var(--line-soft)}
.cat-list a{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,320px);gap:0 28px;padding:20px 0;align-items:start}
.cat-list a:hover{background:var(--paper-2)}
.cat-list img{width:120px;aspect-ratio:4/3;object-fit:cover;background:var(--paper-3)}
.cat-list strong{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.14;color:var(--ink);display:block;margin-bottom:7px}
.cat-list p{margin:0;font-size:15.5px;color:var(--mute)}
.cat-list .cat-kit{font-size:15px;color:var(--ink-2)}
.cat-list .cat-kit b{display:block;font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
@media(max-width:900px){.cat-list a{grid-template-columns:96px minmax(0,1fr)}.cat-list img{width:96px}.cat-list .cat-kit{display:none}}

.page-head{padding-block:clamp(34px,5vw,70px) 0;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(38px,6vw,78px);line-height:0.94;letter-spacing:-0.035em}
.page-head .standfirst{font-size:clamp(18px,1.8vw,22px);line-height:1.45;color:var(--ink-2);max-width:62ch;margin:20px 0 clamp(28px,4vw,44px)}
.prose{max-width:72ch;padding-block:clamp(30px,4vw,52px)}
.prose p,.prose li{font-size:19px;line-height:1.66;color:#E2DFD8}
.prose h2{font-size:28px;margin:38px 0 14px}
.prose a{color:var(--accent)}

.form-row{display:grid;gap:8px;margin-bottom:20px;max-width:52ch}
.form-row label{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;color:var(--mute)}
.form-row input,.form-row textarea,.form-row select{font-family:var(--text);font-size:17px;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);padding:12px 14px}
.form-row input:focus,.form-row textarea:focus{border-color:var(--accent);outline:none}
.btn{font-family:var(--display);font-weight:600;font-size:16px;background:var(--accent);color:var(--paper);border:0;padding:13px 22px;cursor:pointer;display:inline-block}
.btn:hover{background:#F5B843;color:var(--paper)}

details.expander{border-top:1px solid var(--line-soft);margin-top:14px}
details.expander summary{font-family:var(--display);font-weight:600;font-size:15px;color:var(--accent);cursor:pointer;padding:12px 0;list-style:none}
details.expander summary::-webkit-details-marker{display:none}
details.expander summary::after{content:" +"}
details.expander[open] summary::after{content:" –"}

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

/* The marks sat 34px from the left of their card and 218px from the right — every one of the
   twelve. Our own injected `.sponsor img` rule sets width:auto with content-box padding, so the
   plate shrinks to the mark and aligns to the start of the card instead of sitting in the middle
   of it. Centre it; the name and copy below stay left-aligned, which is correct for text. */
.sponsor img{display:block;margin-inline:auto}

/* 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. */
.supporters .sponsor .sponsor-logo.sponsor-logo{display:block!important;width:100%!important}
.supporters .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}

/* op-no-ground-centre: operator: remove the extra background, centre up. The background is the
   TILE (rgb(22,22,26) on a darker page) and the artwork was pinned left by object-position
   (0% 50%). Both corrected. */
.supporters .sponsor{background:transparent}
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center center!important}

/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.masthead-in{padding-inline:var(--gut)}
}

/* op-mark-plate-fill: operator — "same here, left alignment, looks odd". The tiles do fill the
   row (measured 460 of 460 at a 500 viewport), but the mark's plate does not: Design's phone
   rule `@media(max-width:620px){.sponsor-logo{width:100%;max-width:236px}}` keeps the 236px
   desktop plate, so at 500 the panel sat at x=19 with 205px of empty tile to its right. At
   1440 the same plate is 234px inside a 272px tile, i.e. it fills — the cap was written for
   that narrow tile and only misfires once the grid drops to one tile per row.
   The cap is lifted at those widths so the plate spans the tile, and the mark is centred in
   the wider panel (Design centred nothing because the panel used to be barely wider than the
   logo). Panel ground, border, height and the logo's own size are Design's, untouched. */
@media(max-width:620px){
  .supporters .sponsor .sponsor-logo{max-width:none;justify-content:center}
}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 784px at 390, 6% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 784 -> 545px (30% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(8px,2.78vw,40px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   2361px at 390, 18% of the whole page. Two columns bring it to
   1346px (43% shorter). Checked before writing: no new overflow, smallest mark still
   99px wide, longest blurb 3 lines, tile heights 208-228px.
   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 (.supporters), 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){
  .supporters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .supporters > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .supporters > * *{min-width:0!important;max-width:100%}
    .supporters img,.supporters svg{max-width:100%;height:auto}
  .supporters .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 700px (80 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(0px, 1fr) minmax(0px, min(700px, 100%)) minmax(0px, 1fr)" (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){
  div.wrap.body{grid-template-columns:minmax(0px, 1fr) min(893px, 100%) minmax(0px, 1fr)!important}
}
@media (min-width:1600px){
  div.wrap.body{grid-template-columns:minmax(0px, 1fr) min(clamp(893px, 62.014vw, 1072px), 100%) minmax(0px, 1fr)!important}
  div.wrap.body > :is(p:not([class]), p.note){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.kit-row{padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.card > a > img.card-img,
  article.duo-item > a > img,
  div.article-head.wrap > figure.article-hero > img,
  div.body.wrap > figure.article-figure > img,
  div.body.wrap > figure.article-figure.breakout.figure-wide > img,
  div.body.wrap > figure.article-figure.figure-inset > img,
  div.gallery > figure > img,
  div.is-collapsed.kit-index > div.kit-row > img.kit-thumb,
  li > a > img,
  main > figure.article-figure > img,
  section.lead-feature > figure.lead-figure > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:919px){.supporters:has(> [data-partner]){grid-template-columns:repeat(2,minmax(0,272px))!important;justify-content:center!important;column-gap:var(--sp-gap,18px)!important}}@media (min-width:960px) and (max-width:1239px){.supporters:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,239px),1fr))!important;justify-content:stretch!important;column-gap:var(--sp-gap,14px)!important}.supporters:has(> [data-partner]) > [data-partner]{width:auto!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}@media (min-width:1280px){.supporters:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,239px),1fr))!important;justify-content:stretch!important;column-gap:var(--sp-gap,14px)!important}.supporters:has(> [data-partner]) > [data-partner]{width:auto!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}
.supporters.supporters > [data-partner][data-partner] .sponsor-logo{border:0!important}