/* ==========================================================================
   I. Wolk Gallery — Eight Arguments
   Palette (named jobs):
     --paper   ground        #EDEFEA
     --ink     ink           #15181A
     --viridian secondary    #10564A   (masthead, footer, full-bleed bands)
     --chrome  accent        #E8A700   (plate tabs, rules, one full band)
     --quiet   muted ink     #5C635E   (credits, meta)
   ========================================================================== */

:root{
  --paper:#EDEFEA;
  --mat:#F7F6F2;
  --ink:#15181A;
  --ink-2:#2A302C;
  --body:#222724;
  --quiet:#5C635E;
  --credit:#6A716D;
  --viridian:#10564A;
  --viridian-deep:#0B3B34;
  --chrome:#E8A700;
  --rule:rgba(21,24,26,.18);
  --rule-strong:rgba(21,24,26,.42);
  --display:"Zilla Slab",Georgia,serif;
  --sans:"Epilogue",system-ui,sans-serif;
  --gutter:clamp(18px,4vw,56px);
  --measure:68ch;
  --shell:1360px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 18px/1.72 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--viridian);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:pretty}
p{margin:0;text-wrap:pretty}
::selection{background:var(--chrome);color:var(--ink)}
:focus-visible{outline:3px solid var(--chrome);outline-offset:2px}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.kicker{font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--viridian)}
.kicker--chrome{color:var(--chrome)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--chrome);color:var(--ink);padding:10px 16px;z-index:99}

/* ---------- masthead : prints its whole index, always open ---------- */
.topbar{height:9px;background:var(--chrome)}
.masthead{background:var(--viridian);color:var(--paper)}
.masthead a{color:var(--paper)}
.masthead a:hover{color:var(--chrome);text-decoration:none}
.masthead-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-block:26px 0}
.wordmark{display:flex;align-items:center;gap:18px}
.wordmark:hover{text-decoration:none}
.wordmark svg{flex:none;color:var(--chrome)}
.wordmark-name{display:block;font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,47px);line-height:.88;letter-spacing:-.022em}
.wordmark-line{display:block;font:600 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--chrome);margin-top:11px}
.masthead-meta{font:400 12px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;opacity:.75;padding-bottom:6px}

.masthead-sections{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:22px;border-top:1px solid rgba(237,239,234,.28)}
.masthead-sections a{display:flex;align-items:center;gap:9px;font:500 12.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;padding:14px 0;border-bottom:3px solid transparent}
.masthead-sections a:hover,.masthead-sections a[aria-current]{border-bottom-color:var(--chrome)}
.masthead-sections svg{flex:none}

.masthead-index{background:var(--viridian-deep);padding-block:28px 32px}
.index-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 34px}
.index-col h2{font:600 11.5px/1.3 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--chrome);padding-bottom:9px;border-bottom:1px solid rgba(237,239,234,.3);display:flex;align-items:center;gap:9px}
.index-col ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.index-col a{font:400 14.5px/1.3 var(--display)}
.masthead-note{font:400 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.6;padding-top:22px}

/* ---------- footer ---------- */
.site-footer{margin-top:84px;background:var(--viridian);color:var(--paper);padding-block:30px 26px}
.site-footer a{color:var(--paper)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:22px 48px;align-items:start}
.footer-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.footer-name{font-family:var(--display);font-weight:700;font-size:30px;line-height:1;letter-spacing:-.02em}
.footer-blurb{font:400 14px/1.55 var(--sans);opacity:.8;margin-top:9px;max-width:52ch}
.footer-col h2{font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--chrome)}
.footer-col{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:8px 20px;align-items:baseline}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14.5px}
.footer-rule{margin-top:22px;padding-top:14px;border-top:1px solid rgba(237,239,234,.25);font:400 12.5px/1.6 var(--sans);opacity:.7}

/* ---------- drawn rules & marks ---------- */
.hand-rule{display:block;color:var(--chrome)}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:13px}
.band-head h2{font-size:clamp(24px,3vw,32px)}
.band-head .band-aside{font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)}

/* ---------- figure system (three treatments, one drawing system) ---------- */
figure{margin:0}
figcaption .cap{font:500 17px/1.45 var(--display);color:var(--ink);margin:0}
figcaption .credit{font:400 12.5px/1.45 var(--sans);color:var(--credit);margin:9px 0 0}

/* 1 · plate — full-bleed, chrome tab, caption offset into a side column */
.fig-plate{position:relative;margin-block:0}
.fig-plate .plate-img{position:relative}
.fig-plate img{width:100%;height:clamp(260px,46vw,620px);object-fit:cover}
.plate-tab{position:absolute;top:28px;left:0;background:var(--chrome);color:var(--ink);
  font:600 11.5px/1 var(--sans);letter-spacing:.2em;padding:9px 13px 10px}
.fig-plate figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:44px;
  max-width:var(--shell);margin-inline:auto;padding:16px var(--gutter) 0}
.fig-plate figcaption .cap{border-top:2px solid var(--chrome);padding-top:13px}

/* 2 · mat — the photograph sits on a mat with a hairline inset */
.fig-mat{background:var(--mat);padding:22px}
.fig-mat .mat-inner{border:1px solid var(--rule-strong);padding:1px}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{margin-top:15px}

/* 3 · marked — drawn corner brackets, caption hangs beside */
.fig-marked{position:relative;padding:12px}
.fig-marked .corner{position:absolute;width:26px;height:26px;color:var(--ink)}
.fig-marked .c-tl{top:0;left:0}.fig-marked .c-tr{top:0;right:0}
.fig-marked .c-bl{bottom:0;left:0}.fig-marked .c-br{bottom:0;right:0}
.fig-marked img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-marked figcaption{margin-top:14px}

/* 4 · strip — letterbox, centred single line */
.fig-strip img{width:100%;height:clamp(180px,26vw,330px);object-fit:cover}
.fig-strip figcaption{max-width:860px;margin-inline:auto;padding:20px var(--gutter) 0;text-align:center}
.fig-strip figcaption .cap{font-size:20px;font-style:italic}

/* generic component form used in the styleguide + inline article figures */
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{margin-top:14px;border-left:3px solid var(--chrome);padding-left:14px}
.article-figure figcaption .cap{font-size:16.5px}

/* ---------- homepage bands ---------- */
.lead-band{position:relative}
.lead-band .lead-img{position:relative}
.lead-band .lead-img img{width:100%;height:clamp(300px,52vw,660px);object-fit:cover}
.lead-plate{position:relative;display:grid;grid-template-columns:minmax(0,700px) minmax(0,1fr);
  gap:52px;align-items:end;margin:-150px var(--gutter) 0}
.lead-copy{background:var(--paper);padding:clamp(24px,3.4vw,44px) clamp(22px,3.2vw,48px) 40px}
.lead-copy h1{font-size:clamp(32px,5vw,54px);line-height:1.02;margin-top:18px}
.lead-copy .standfirst{font:400 17px/1.62 var(--sans);color:#3A403C;margin-top:20px;max-width:56ch}
.readmore{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font:600 12px/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--chrome);padding-bottom:7px}
.readmore:hover{color:var(--viridian);text-decoration:none}
.lead-side{max-width:360px;padding-bottom:10px}

.arg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 72px}
.arg{display:flex;align-items:flex-start;gap:20px;padding:22px 0;border-bottom:1px solid var(--rule)}
.arg-no{font:700 30px/1 var(--display);color:var(--viridian);min-width:42px}
.arg h3{font-size:20px;line-height:1.25;font-weight:500}
.arg h3 a{color:var(--ink)}
.arg p{font-size:15px;line-height:1.5;color:var(--quiet);margin-top:6px}
.arg .arg-ico{color:var(--viridian);margin-top:3px}

.quiet-band{background:var(--chrome);color:var(--ink);margin-top:84px}
.quiet-band .shell{display:flex;align-items:center;gap:clamp(20px,3.4vw,44px);padding-block:clamp(22px,2.6vw,34px);flex-wrap:wrap}
.quiet-band svg{flex:none;width:clamp(110px,13vw,168px);height:auto}
.quiet-band p{flex:1 1 520px;font:500 clamp(19px,2.1vw,26px)/1.32 var(--display);letter-spacing:-.012em;margin:0}

.entry-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px}
.entry-card{display:flex;flex-direction:column}
.entry-card .fig-marked{margin-bottom:4px}
.entry-card h3{font-size:22px;line-height:1.24;font-weight:500;margin-top:10px}
.entry-card h3 a{color:var(--ink)}
.entry-card p{font-size:15px;line-height:1.55;color:var(--quiet);margin-top:9px}
.entry-card .card-kicker{display:flex;align-items:center;gap:8px;margin-top:16px}

.split-band{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,52px);
  background:var(--mat);padding:clamp(24px,3.4vw,44px);align-items:start}
.split-band h2{font-size:clamp(24px,3.2vw,34px);line-height:1.14;margin-top:16px}
.split-band p{font:400 16.5px/1.66 var(--sans);color:#3A403C;margin-top:18px}

/* ---------- supporters ---------- */
.supporters{margin-top:84px}
.sponsors-grid{display:grid;grid-template-columns:repeat(auto-fit,268px);grid-auto-flow:dense;gap:16px;justify-content:start;margin-top:26px}
.sponsor{grid-column:span 1;display:flex;flex-direction:column;border:1px solid var(--rule);
  background:var(--mat);padding:14px;text-decoration:none;color:var(--ink)}
.sponsor:hover{border-color:var(--viridian);text-decoration:none}
.sponsor--wide{grid-column:span 2}
.sponsor img{background:var(--viridian-deep);width:100%;height:76px;padding:12px 16px;
  object-fit:contain;object-position:center}
.sponsor-name{display:block;font:600 13.5px/1.3 var(--sans);letter-spacing:.02em;margin-top:12px}
.sponsor-blurb{display:block;font:400 13.5px/1.5 var(--sans);color:var(--quiet);margin-top:6px}

/* ---------- article ---------- */
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:26px;
  font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--viridian)}
.crumb a{color:var(--viridian)}
.crumb .sep{color:var(--credit)}

.article-head{padding-top:22px}
.article-head h1{font-size:clamp(32px,5.4vw,64px);line-height:1.02;letter-spacing:-.024em;max-width:20ch}
.lead,.article-head .lead{font:400 clamp(18px,2vw,21px)/1.5 var(--sans);color:#3A403C;margin-top:22px;max-width:60ch}
.cause-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 18px;margin-top:26px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0}
.cause-line dt{font:600 10.5px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--credit)}
.cause-line dd{margin:0;font:500 16.5px/1.5 var(--display)}

.prose{max-width:var(--measure);margin-inline:auto}
.prose > p{font-size:19px;line-height:1.75;color:var(--body);margin-top:22px}
.prose > p:first-child{margin-top:0}
.prose h2{font-size:clamp(23px,2.6vw,29px);margin-top:44px;line-height:1.18}
.prose h2 + p{margin-top:16px}
.prose em{font-style:italic}
.prose a{border-bottom:1px solid rgba(16,86,74,.35)}
.prose a:hover{text-decoration:none;border-bottom-color:var(--chrome)}

.wide{max-width:1080px;margin-inline:auto}
.interrupt{margin-top:42px}
.interrupt + p{margin-top:34px}

.pullquote{margin:40px 0 0;padding:0;border:0}
.pullquote p{font:500 clamp(22px,2.8vw,30px)/1.28 var(--display);margin:0;
  border-top:3px solid var(--chrome);border-bottom:1px solid var(--rule);padding:22px 0 24px}
.blockquote{margin:34px 0 0;padding:20px 0 20px 22px;border-left:3px solid var(--viridian)}
.blockquote p{font:400 19px/1.6 var(--display)}
.blockquote cite{display:block;font:500 13px/1.5 var(--sans);font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:var(--credit);margin-top:12px}
.callout{background:var(--mat);border-top:3px solid var(--viridian);padding:24px 26px;margin:34px 0 0}
.callout p{font:400 17px/1.6 var(--sans);color:var(--ink)}
.callout p + p{margin-top:12px}
.note{font:400 15.5px/1.62 var(--sans);color:var(--quiet);margin-top:26px;
  padding-left:16px;border-left:2px solid var(--chrome)}

/* notes-for-design panels */
.panel{background:var(--mat);padding:clamp(22px,3vw,34px)}
.panel-head{display:flex;align-items:center;gap:11px;border-bottom:2px solid var(--ink);padding-bottom:11px}
.panel-head h2,.panel-head h3{font-size:19px;margin:0;font-weight:600}
.panel-head svg{color:var(--viridian);flex:none}
.panel--dark{background:var(--viridian-deep);color:var(--paper)}
.panel--dark .panel-head{border-bottom-color:rgba(237,239,234,.4)}
.panel--dark .panel-head svg{color:var(--chrome)}
.panel--dark .t-when{color:var(--chrome)}
.panel--dark .t-what,.panel--dark .keylist dd{color:var(--paper)}
.panel--dark .keylist dt{color:var(--chrome)}

.timeline{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:8px 26px;
  padding:14px 0;border-bottom:1px solid var(--rule)}
.panel--dark .timeline li{border-bottom-color:rgba(237,239,234,.22)}
.timeline li:last-child{border-bottom:0;padding-bottom:0}
.t-when{font:600 14px/1.45 var(--sans);letter-spacing:.03em;color:var(--viridian)}
.t-what{font:400 16px/1.55 var(--sans);color:var(--body)}

.keylist{margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px 34px}
.keylist div{padding-bottom:14px;border-bottom:1px solid var(--rule)}
.panel--dark .keylist div{border-bottom-color:rgba(237,239,234,.22)}
.keylist dt{font:600 15px/1.4 var(--sans);color:var(--ink)}
.keylist dd{margin:5px 0 0;font:400 15px/1.55 var(--sans);color:var(--quiet)}
.panel--dark .keylist dd{opacity:.86}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin-top:26px}
.statblock{border-top:3px solid var(--chrome);padding-top:12px}
.stat-num{display:block;font:700 40px/1 var(--display);color:var(--viridian)}
.stat-label{display:block;font:400 14px/1.45 var(--sans);color:var(--quiet);margin-top:8px}

table.versus,table.datatable{width:100%;border-collapse:collapse;margin-top:24px;font-size:16px}
table.versus th,table.datatable th{text-align:left;font:600 11px/1.4 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;background:var(--viridian);color:var(--paper);padding:11px 14px}
table.versus td,table.datatable td{padding:13px 14px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
table.versus tbody tr:nth-child(even),table.datatable tbody tr:nth-child(even){background:var(--mat)}
table.versus th:first-child{width:34%}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.chart figcaption{font:400 13.5px/1.5 var(--sans);color:var(--credit);margin-top:10px}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .bar-fill{fill:var(--viridian)}
.chart .bar-fill.alt{fill:var(--chrome)}
.chart text{font-family:var(--sans);font-size:12px;fill:var(--ink)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:26px}
.gallery figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font:400 13px/1.45 var(--sans);color:var(--credit);margin-top:8px}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:24px}
.profile-card{background:var(--mat);padding:22px;display:flex;flex-direction:column}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:20px}
.profile-card .p-role{font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--viridian);margin-top:6px}
.profile-card p{font-size:15px;line-height:1.6;color:var(--quiet);margin-top:10px}
.profile-card .p-links{margin-top:auto;padding-top:14px}
.profile-card .p-attr{font-size:12.5px;color:var(--credit)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:22px}
.org-card{display:flex;align-items:center;gap:12px;border:1px solid var(--rule);padding:12px 14px;background:var(--mat)}
.org-card:hover{border-color:var(--viridian);text-decoration:none}
.org-logo{width:58px;height:36px;object-fit:contain;flex:none;background:var(--viridian-deep);padding:5px 7px}
.org-name{font:600 15px/1.3 var(--sans);color:var(--ink);display:block}
.org-host{font:400 12.5px/1.3 var(--sans);color:var(--credit);display:block}
.entity-ref{white-space:nowrap;border-bottom:1px solid rgba(16,86,74,.4)}

.further-grid,.related-links{list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.further-grid a,.related-links a{display:flex;flex-direction:column;gap:8px;height:100%;
  border:1px solid var(--rule);background:var(--mat);padding:18px;color:var(--ink);
  font:500 18px/1.28 var(--display)}
.further-grid a:hover,.related-links a:hover{border-color:var(--viridian);text-decoration:none;background:var(--paper)}
.related-links .rl-sec{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--viridian);display:flex;align-items:center;gap:7px}

.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list > li > a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;padding:22px 0;color:var(--ink)}
.cat-list > li > a:hover{text-decoration:none;color:var(--viridian)}
.cat-list .n{font:700 26px/1.05 var(--display);color:var(--viridian);min-width:38px}
.cat-list h3{font-size:24px;font-weight:500;line-height:1.2}
.cat-list p{font-size:15.5px;line-height:1.55;color:var(--quiet);margin-top:7px;max-width:70ch}

.section-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);min-height:440px}
.section-hero-copy{background:var(--viridian-deep);color:var(--paper);padding:clamp(28px,4vw,60px);
  display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.section-hero-copy h1{font-size:clamp(30px,4.4vw,54px);line-height:1.02;margin-top:18px}
.section-hero-copy p{font:400 17.5px/1.6 var(--sans);opacity:.88;margin-top:20px;max-width:44ch}
.section-hero-copy .sh-list{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid rgba(237,239,234,.35);
  display:flex;flex-direction:column;gap:9px}
.section-hero-copy .sh-list a{color:var(--paper);font:400 17px/1.3 var(--display)}
.section-hero-img img{width:100%;height:100%;min-height:260px;object-fit:cover}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:30px}
.hub-card{border-top:2px solid var(--ink);padding-top:16px}
.hub-card h2{font-size:23px;display:flex;align-items:center;gap:10px}
.hub-card h2 svg{color:var(--viridian);flex:none}
.hub-card > p{font-size:15px;color:var(--quiet);margin-top:8px}
.hub-card ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:16px}

.page-body{max-width:var(--measure);margin-inline:auto}
.page-body p{font-size:18.5px;line-height:1.72;color:var(--body);margin-top:20px}
.page-body h2{font-size:26px;margin-top:40px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .lead-plate{grid-template-columns:minmax(0,1fr);gap:22px;margin-inline:var(--gutter)}
  .lead-side{max-width:none}
  .fig-plate figcaption{grid-template-columns:minmax(0,1fr);gap:12px}
  .index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-hero{grid-template-columns:minmax(0,1fr)}
  .split-band{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .masthead-index{display:none}
  .arg-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .lead-plate{margin-top:-60px}
}
@media (max-width:620px){
  body{font-size:17px}
  .sponsor--wide{grid-column:span 1}
  .sponsors-grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .sponsor img{height:64px}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .prose > p{font-size:17.5px}
  .quiet-band .shell{gap:18px}
  .cause-line{grid-template-columns:minmax(0,1fr);gap:4px 0}
  .cause-line dd{margin-bottom:10px}
}
@media print{
  .masthead-index,.supporters{display:none}
  body{background:#fff}
}

/* ---------- expander + card variants ---------- */
.expander{margin-top:18px;border-top:1px solid var(--rule)}
.expander summary{list-style:none;cursor:pointer;font:600 11.5px/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--viridian);padding:14px 0;display:flex;align-items:center;gap:10px}
.expander summary::-webkit-details-marker{display:none}
.expander summary::after{content:"+";font:400 18px/1 var(--display)}
.expander[open] summary::after{content:"–"}
.expander summary:hover{color:var(--ink)}
.profile-card.no-photo{border-left:3px solid var(--viridian)}
.profile-card.no-photo .p-mark{color:var(--viridian);margin-bottom:10px}
.org-card.no-logo .org-mark{color:var(--viridian);flex:none}
.sg-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:24px}
.sg-block{margin-top:56px}
.sg-block > h2{font-size:26px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.sg-label{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--credit);margin-top:26px;display:block}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px}
.swatch{border:1px solid var(--rule)}
.swatch i{display:block;height:74px}
.swatch span{display:block;font:500 12.5px/1.5 var(--sans);padding:10px 12px}
.swatch b{display:block;font:400 11.5px/1.4 var(--sans);color:var(--credit);letter-spacing:.06em}

.register-invite{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px 40px;align-items:center;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:30px 0;color:var(--ink)}
.register-invite:hover{text-decoration:none;background:var(--mat)}
.register-invite .ri-title{display:block;font:500 clamp(22px,2.8vw,30px)/1.16 var(--display);margin-top:12px;max-width:22ch}
.register-invite .ri-sub{display:block;font:400 16px/1.6 var(--sans);color:var(--quiet);margin-top:12px;max-width:62ch}
.register-invite .ri-go{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--ink);padding:15px 22px}
.register-invite:hover .ri-go{background:var(--viridian);border-color:var(--viridian);color:var(--paper)}
@media (max-width:760px){.register-invite{grid-template-columns:minmax(0,1fr)}.register-invite .ri-go{justify-self:start}}

/* ---------- article page, second pass ---------- */
.entry-head{display:grid;grid-template-columns:minmax(0,176px) minmax(0,1fr);gap:0 44px;align-items:start;padding-top:30px}
.entry-rail{border-top:3px solid var(--viridian);padding-top:14px}
.entry-no{display:block;font:700 clamp(52px,7vw,86px)/.8 var(--display);color:var(--viridian);letter-spacing:-.035em}
.entry-rail .sec{display:flex;align-items:center;gap:9px;margin-top:16px;font:600 11px/1.35 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--viridian)}
.entry-rail .of{display:block;margin-top:10px;font:400 12.5px/1.4 var(--sans);color:var(--credit)}
.entry-head h1{font-size:clamp(34px,5.6vw,66px);line-height:1.01;letter-spacing:-.025em;max-width:19ch}
.entry-head .lead{margin-top:20px}
.cause-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:30px 0 0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.cause-pair > div{padding:16px 28px 18px 0}
.cause-pair > div + div{border-left:1px solid var(--rule);padding-left:28px}
.cause-pair dt{font:600 10.5px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--credit)}
.cause-pair dd{margin:6px 0 0;font:500 17px/1.42 var(--display)}

.fig-plate .plate-img{border-top:8px solid var(--viridian)}
.fig-marked figcaption .cap{max-width:62ch}

.prose > p.opening::first-letter{float:left;font:700 76px/.72 var(--display);color:var(--viridian);
  padding:6px 12px 0 0;margin-top:2px}
.prose h2{display:flex;align-items:baseline;gap:14px}
.prose h2::before{content:"";flex:none;width:28px;height:3px;background:var(--chrome);transform:translateY(-8px)}
.prose .pullquote{margin-left:-48px;margin-right:-48px}

.panel.bleed{margin-inline:calc(var(--gutter) * -1);padding-inline:max(var(--gutter),34px)}

.method{background:var(--mat);border-top:3px solid var(--chrome);padding:22px 26px;margin-top:44px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.method svg{color:var(--viridian);flex:none}
.method p{font:400 15.5px/1.62 var(--sans);color:var(--quiet)}

.related-links a{padding:0;overflow:hidden;gap:0}
.rl-thumb{width:100%;aspect-ratio:16/10;object-fit:cover}
.rl-body{padding:15px 18px 20px;display:flex;flex-direction:column;gap:9px}
@media (max-width:760px){
  .entry-head{grid-template-columns:minmax(0,1fr);gap:14px}
  .entry-rail{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
  .entry-rail .sec,.entry-rail .of{margin-top:0}
  .cause-pair{grid-template-columns:minmax(0,1fr)}
  .cause-pair > div + div{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .prose .pullquote{margin-inline:0}
  .prose > p.opening::first-letter{font-size:60px}
}

/* 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-mark-fit: width:100% + padding must not overflow the tile — but the declared
   HEIGHT is the mark's size and border-box alone steals the vertical padding from it.
   earlychristianireland declares height:66px with 10px top/bottom padding: border-box
   left a 46px mark and the operator read it as 'logos too small'. Keep the horizontal
   inset, drop the vertical padding, so the mark occupies the full height Design set. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!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. */
.sponsors-grid .sponsor.sponsor img{box-sizing:border-box!important;height:76px!important;display:block!important;width:238px!important;max-width:100%!important;flex:none!important;padding:12px 20px!important}

/* op-mobile-collapse: the money grid is repeat(auto-fit,268px) — FIXED 268px tracks — and the
   wide tiles span two of them, so at 390px the tracks could not fit and a tile collapsed to 40px
   while the row still measured past the screen. One full-width column below 640px, wide tiles
   span one, and the mark's own 238px width (ours, from sp-mark-frame) gives way to the column. */
@media (max-width:640px){
  .sponsors-grid{grid-template-columns:minmax(0,1fr)!important;justify-content:stretch!important}
  .sponsor,.sponsor--wide{grid-column:span 1!important;min-width:0!important}
  .sponsors-grid .sponsor.sponsor img{width:100%!important}
}

/* op-nav-collapse: this nav printed 193px of stacked links at 390 before any content
   (8 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 (18px measured) the button carries the build's
   gutter (clamp(18px,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 (860px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-gate{display:none}
@media (max-width:860px){
  .nav-gate{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-gate-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .masthead-sections{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .nav-gate-c:checked ~ .masthead-sections{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .shell:has(> .nav-gate){display:flow-root}
  .nav-gate:not(:has(~ .masthead-sections)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2163px at 390, 23% of the whole page. Two columns bring it to
   1274px (41% shorter). Checked before writing: no new overflow, smallest mark still
   137px wide, longest blurb 3 lines, tile heights 182-202px.
   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. 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 (.sponsors-grid), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsors-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sponsors-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors-grid > * *{min-width:0!important;max-width:100%}
    .sponsors-grid img,.sponsors-grid svg{max-width:100%;height:auto}
  .sponsors-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsors-grid (11 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){
  .sponsors-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.entry-card > figure.fig-marked > img,
  div > figure.fig-strip > img,
  div.wide > figure.fig-marked.interrupt > img,
  figure.fig-mat > div.mat-inner > img,
  figure.fig-mat.interrupt > div.mat-inner > img,
  figure.fig-plate > div.plate-img > img,
  li > a > img.rl-thumb,
  section > figure.fig-strip > img,
  section.lead-band > div.lead-img > img,
  section.section-hero > div.section-hero-img > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1279px){.sponsors-grid.sponsors-grid:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(268px,calc(50% - 8px)),1fr))!important;justify-content:stretch!important}.sponsors-grid.sponsors-grid > [data-partner]{width:auto!important;max-width:none!important}}