/* ── prixdublog.com · "Press Sheet" ─────────────────────────────────────────
   Palette roles: ground (newsprint), ink, accent (process magenta),
   secondary (process cyan), flag (chrome yellow).                          */
:root{
  --ground:#EFF2F7;      /* ground  — newsprint, the page itself */
  --ground-2:#DFE5EE;    /* ground  — second tint for bands */
  --mat:#CED7E3;         /* ground  — figure mats */
  --ink:#111620;         /* ink     — text and dark panels */
  --ink-2:#2B3444;
  --accent:#C4006B;      /* accent  — process magenta */
  --secondary:#0E86BE;   /* second  — process cyan */
  --flag:#F2B303;        /* flag    — chrome yellow, used sparingly */
  --rule:rgba(17,22,32,.24);
  --display:"Zilla Slab",Georgia,"Times New Roman",serif;
  --text:"Vollkorn",Georgia,"Times New Roman",serif;
  --gutter:clamp(20px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 19px/1.6 var(--text);text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.015em;text-wrap:pretty;margin:0}
p{margin:0}
::selection{background:var(--flag)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--ground);padding:10px 14px;z-index:20}
.wrap{max-width:1560px;margin:0 auto;padding-inline:var(--gutter)}
.kicker{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:9px}
.kicker--pale{color:var(--flag)}
.ico{flex:none;display:block}

/* ── masthead ───────────────────────────────────────────────────────────── */
.masthead{border-bottom:2px solid var(--ink)}
.mast-row{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;padding:26px 0 18px}
.brand{display:flex;align-items:center;gap:20px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .mark{flex:none}
.brand-name{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,54px);line-height:1;letter-spacing:-.025em;display:block;white-space:nowrap}
.mast-line{max-width:430px;text-align:right;font-size:18px;line-height:1.4;padding-top:8px}
.colourbar{display:flex;height:22px;border-top:1px solid var(--ink)}
.cb{flex:1}
.cb-c{background:var(--secondary)}.cb-m{background:var(--accent)}.cb-y{background:var(--flag)}.cb-k{background:var(--ink)}
.cb-label{flex:2;border-left:1px solid var(--ink);display:flex;align-items:center;padding-left:10px;font-family:var(--display);font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.colourbar--foot{border-top:0;height:14px}

/* nav: five section groups, all entries visible, deliberately unequal columns */
.nav{display:grid;grid-template-columns:1.55fr 1.12fr 1fr .88fr 1.08fr;padding-block:20px 26px}
.navgroup{padding-inline:26px;border-right:1px solid var(--rule)}
.navgroup:first-child{padding-left:0}
.navgroup--album{border-right:0;background:var(--secondary);margin-block:-20px -26px;margin-right:calc(-1 * var(--gutter));padding:20px var(--gutter) 26px 26px}
.navgroup--album .nav-head,.navgroup--album a{color:#08202C}
.navgroup--album a:hover{color:#fff}
.nav-head{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px;list-style:none;cursor:default;margin-bottom:10px}
.nav-head::-webkit-details-marker{display:none}
.navgroup.is-active .nav-head{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.nav-links{display:grid;gap:4px;font-size:16px;line-height:1.3}
.navgroup--code .nav-links{grid-template-columns:1fr 1fr;gap:4px 22px}
.nav-all{display:inline-block;margin-top:10px;font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.6}
.nav-all:hover{opacity:1;color:var(--accent)}
@media (min-width:961px){.nav-head{pointer-events:none}}
@media (max-width:960px){
  .nav{grid-template-columns:1fr;padding-block:6px 14px}
  .navgroup,.navgroup--album{padding:12px 0;border-right:0;border-top:1px solid var(--rule);margin:0}
  .navgroup--album{padding:14px 16px;margin-top:10px}
  .nav-head{cursor:pointer;margin-bottom:0;font-size:13px;padding:4px 0}
  .navgroup[open] .nav-head{margin-bottom:10px}
  .navgroup--code .nav-links{grid-template-columns:1fr}
  .nav-links{font-size:17px;gap:6px}
  .mast-row{flex-direction:column;gap:16px;padding-bottom:14px}
  .mast-line{text-align:left;font-size:17px;padding-top:0}
  .cb-label{font-size:9px;letter-spacing:.14em}
}

/* ── figure system: four treatments, one drawing family ─────────────────── */
.article-figure{margin:0}
.fig-frame{position:relative;display:block}
.fig-frame img{display:block;width:100%;height:auto;object-fit:cover}
.crops{color:var(--ground);position:absolute;inset:0;pointer-events:none}
.crops svg{position:absolute;width:22px;height:22px;opacity:.85}
.crops svg:nth-child(1){top:12px;left:12px}
.crops svg:nth-child(2){top:12px;right:12px}
.crops svg:nth-child(3){bottom:12px;left:12px}
.crops svg:nth-child(4){bottom:12px;right:12px}
.fig-cap{font-size:17px;line-height:1.45;padding-top:12px;max-width:62ch}
.fig-credit{display:block;padding-top:6px;font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.72}
/* 1 · plate — the photograph sits on an ink mat */
.fig-plate .fig-frame{background:var(--ink);padding:16px}
.fig-plate .fig-cap{border-top:3px solid var(--ink);margin-top:12px;padding-top:12px}
/* 2 · column — cyan bar keyed to the palette, caption tight beneath */
.fig-column .fig-frame{border-top:5px solid var(--secondary)}
/* 3 · bleed — breaks the measure, caption offset into the margin */
.fig-bleed{margin-block:34px}
.fig-bleed .fig-frame img{max-height:74vh}
.fig-bleed .fig-cap{max-width:70ch;padding-inline:0}
/* 4 · inset — small, hairline, caption hangs off a rule */
.fig-inset .fig-frame{outline:1px solid var(--rule);outline-offset:-1px}
.fig-inset .fig-cap{border-left:1px solid var(--rule);padding-left:16px;font-size:16px;max-width:44ch}
.fig-tint .fig-frame::after{content:"";position:absolute;inset:0;background:var(--secondary);mix-blend-mode:multiply;opacity:.22}

/* ── homepage bands ─────────────────────────────────────────────────────── */
.band{padding-block:clamp(40px,5vw,68px)}
.band--tight{padding-block:clamp(28px,3vw,40px)}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:28px;flex-wrap:wrap}
.band-head h2{font-size:clamp(26px,3vw,34px)}
.band-head .more{font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}

.lead-band{background:var(--ink);color:var(--ground)}
.lead-figure{position:relative}
.lead-figure img{display:block;width:100%;height:clamp(320px,52vw,660px);object-fit:cover}
.lead-slab{background:var(--ground);color:var(--ink);max-width:1000px;margin-top:-90px;position:relative;padding:clamp(22px,3vw,34px) clamp(22px,3vw,40px);border-top:6px solid var(--accent)}
.lead-slab h1,.lead-slab h2{font-size:clamp(30px,4.4vw,56px);line-height:1.02;margin-top:12px}
.lead-slab .lead-dek{margin-top:18px;font-size:clamp(18px,2vw,21px);line-height:1.5;max-width:74ch}
.lead-slab .lead-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:2px}
.lead-cap{display:flex;justify-content:flex-end;padding:14px 0 26px}
.lead-cap p{max-width:520px;text-align:right;font-size:16px;line-height:1.45;color:var(--ground)}

.rules-grid{display:grid;grid-template-columns:1.22fr 1fr}
.rule-panel{padding:clamp(26px,3vw,44px)}
.rule-panel h3{font-size:clamp(24px,2.6vw,32px);line-height:1.1;margin-top:14px}
.rule-panel p{margin-top:16px;font-size:18px;line-height:1.55}
.rule-panel--ink{background:var(--ink);color:var(--ground)}
.rule-panel--accent{background:var(--accent);color:#FFF3F8}
.rule-panel--accent .kicker{color:#FFF3F8}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.tags span{border:1px solid currentColor;padding:6px 10px;font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.rule-panel .go{display:inline-block;margin-top:20px;font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:inherit;border-bottom:1px solid}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:clamp(18px,2vw,30px)}
.card{display:flex;flex-direction:column;background:var(--ground-2);height:100%}
.card .shot{aspect-ratio:16/10;overflow:hidden;border-bottom:4px solid var(--secondary)}
.card .shot img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{display:flex;flex-direction:column;gap:9px;padding:16px 18px 20px;flex:1}
.card h3{font-size:23px;line-height:1.14;min-height:2.28em}
.card p{font-size:16px;line-height:1.45}
.card .card-meta{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.card:hover h3{color:var(--accent)}

.quiet{background:var(--ground-2);border-block:1px solid var(--rule)}
.quiet .wrap{display:flex;align-items:center;justify-content:center;gap:26px;padding-block:clamp(44px,6vw,78px)}
.quiet p{font-family:var(--display);font-size:clamp(24px,3.4vw,38px);line-height:1.2;text-align:center;max-width:26ch;text-wrap:balance}
.quiet svg{flex:none;opacity:.45}

.split{display:grid;grid-template-columns:1.5fr 1fr;min-height:520px}
.split img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
.split-copy{background:var(--secondary);color:#08202C;padding:clamp(28px,3.4vw,52px) clamp(24px,3vw,44px)}
.split-copy h3{font-size:clamp(26px,3.2vw,40px);line-height:1.06;margin-top:14px}
.split-copy p{margin-top:18px;font-size:18px;line-height:1.55}
.split-links{margin-top:24px;border-top:1px solid rgba(8,32,44,.35);padding-top:16px;display:grid;gap:9px;font-size:17px}
.split-links a{color:#08202C}

.section-index{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--ink)}
.sec-card{padding:20px 20px 24px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.sec-card:last-child{border-right:0}
.sec-no{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;color:var(--accent)}
.sec-card h3{font-size:19px;display:flex;align-items:center;gap:8px}
.sec-card p{font-size:15px;line-height:1.4;opacity:.78}
.sec-card .count{margin-top:auto;padding-top:10px;font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}

/* ── supporters strip (above the footer, footer furniture) ───────────────── */
.supporters{background:var(--ink);color:var(--ground);padding-block:34px 38px;border-top:6px solid var(--flag)}
.sup-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;border-bottom:1px solid rgba(223,229,238,.28);padding-bottom:12px;margin-bottom:20px}
.sup-head h2{font-size:20px;letter-spacing:.16em;text-transform:uppercase}
.sup-head p{font-size:16px;opacity:.7}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));grid-auto-flow:row dense;gap:14px}
.sponsor{grid-column:span 1;display:flex;flex-direction:column;gap:8px;padding:16px;min-height:120px;border:1px solid rgba(223,229,238,.26);background:#181E2A;color:var(--ground)}
.sponsor--wide{grid-column:span 2}
.sponsor:hover{border-color:var(--flag);color:var(--ground)}
.sponsor-name{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.1}
.sponsor:hover .sponsor-name{color:var(--flag)}
.sponsor-blurb{font-size:15px;line-height:1.4;opacity:.82}
@media (max-width:560px){.sponsor-grid{grid-template-columns:1fr}.sponsor--wide{grid-column:span 1}}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--ground);margin-top:0}
.foot a{color:var(--ground)}
.foot a:hover{color:var(--flag)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:28px;padding-block:36px 46px}
.foot-brand p{margin-top:14px;font-size:16px;opacity:.85;max-width:32ch}
.brand--foot .brand-name{font-size:24px}
.brand--foot{color:var(--ground);gap:14px}
.foot-util{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.fcol{display:grid;gap:7px;align-content:start;font-size:16px}
.fcol-head{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-bottom:4px}

/* ── article ────────────────────────────────────────────────────────────── */
.art-head{padding-block:clamp(26px,3vw,44px) 0}
.art-head .breadcrumb{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.72}
.art-head .breadcrumb a{color:var(--accent)}
.art-head h1{font-size:clamp(34px,5.6vw,70px);line-height:.98;margin-top:14px;max-width:26ch}
.art-head .lead{margin-top:20px;font-size:clamp(19px,2.2vw,23px);line-height:1.45;max-width:60ch}
.art-body{display:block;max-width:70ch;margin-inline:auto}
.art-body > *{min-width:0}
.art-body > p{font-size:20px;line-height:1.64;margin-block:0 22px}
.art-body > h2{font-size:clamp(24px,2.8vw,34px);line-height:1.14;margin-block:36px 14px;padding-top:14px;border-top:2px solid var(--ink)}
.art-body > .breakout{width:min(1480px,calc(100vw - 2*var(--gutter)));margin-left:50%;transform:translateX(-50%);margin-block:36px;clear:both}
.art-body a{color:var(--ink);border-bottom:2px solid var(--accent)}
.art-body a:hover{color:var(--accent)}
.art-body em{font-style:italic}
.lead{font-family:var(--text)}
.pullquote{background:var(--ink);color:var(--ground);padding:clamp(22px,3vw,30px);border-left:8px solid var(--flag);margin:0}
.pullquote p{font-family:var(--display);font-size:clamp(21px,2.6vw,27px);line-height:1.28}
.blockquote{margin:0;border-left:4px solid var(--secondary);padding-left:20px}
.blockquote p{font-size:20px;line-height:1.5;font-style:italic}
.blockquote cite{display:block;margin-top:10px;font-family:var(--display);font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.callout{background:var(--ground-2);border-top:4px solid var(--accent);padding:22px 24px;margin:0}
.callout p{font-size:18px;line-height:1.5}
.note{font-size:17px;line-height:1.5;border-left:3px solid var(--secondary);padding-left:14px;opacity:.9}

/* notes-for-design furniture: plates that interrupt the measure */
.plate{background:var(--ink);color:var(--ground);padding-block:clamp(28px,3vw,40px)}
.plate--pale{background:var(--ground-2);color:var(--ink);border-block:1px solid var(--rule)}
.plate-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.plate-head h3{font-size:clamp(20px,2.4vw,27px)}
.plate-head .kicker{color:var(--flag)}
.plate--pale .plate-head .kicker{color:var(--accent)}
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:clamp(14px,2vw,30px);padding-block:14px;border-top:1px solid rgba(223,229,238,.25)}
.plate--pale .timeline li{border-top-color:var(--rule)}
.t-when{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.03em;color:var(--flag)}
.plate--pale .t-when{color:var(--accent)}
.t-what{font-size:18px;line-height:1.5}
.spec-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 clamp(20px,3vw,40px)}
.spec-list li{padding-block:12px;border-top:1px solid rgba(223,229,238,.25);font-size:17px;line-height:1.45;display:grid;grid-template-columns:26px 1fr;gap:10px}
.plate--pale .spec-list li{border-top-color:var(--rule)}
.spec-list .n{font-family:var(--display);font-weight:700;color:var(--flag);font-size:14px;padding-top:3px}
.plate--pale .spec-list .n{color:var(--accent)}

/* data */
.datatable,.versus{width:100%;border-collapse:collapse;font-size:17px}
.datatable th,.versus th{font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-align:left;color:var(--accent);padding:12px 14px 10px 0;border-bottom:2px solid var(--ink)}
.datatable td,.versus td{padding:13px 14px 13px 0;border-top:1px solid var(--rule);vertical-align:top}
.versus tbody th{color:var(--ink);border-bottom:1px solid var(--rule);border-top:1px solid var(--rule);font-size:13px;padding-right:20px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(16px,2vw,28px)}
.statblock{border-top:4px solid var(--secondary);padding-top:10px}
.stat-num{display:block;font-family:var(--display);font-weight:700;font-size:clamp(34px,4vw,50px);line-height:1}
.stat-label{display:block;margin-top:6px;font-size:16px;line-height:1.35;opacity:.8}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-size:16px;padding-top:10px;opacity:.8}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(16px,2vw,24px)}
.profile-card{background:var(--ground);color:var(--ink);border-top:4px solid var(--ink);padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.plate .profile-card{background:#1B2230;color:var(--ground);border-top-color:var(--flag)}
.profile-card h3{font-size:21px;line-height:1.15}
.p-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.p-role{font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.plate .p-role{color:var(--flag)}
.profile-card p{font-size:16px;line-height:1.5}
.p-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:8px;font-size:16px}
.p-attr{font-size:14px;opacity:.6}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.org-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);padding:14px 16px}
.plate .org-card{border-color:rgba(223,229,238,.3);color:var(--ground)}
.org-logo{max-height:34px;width:auto;object-fit:contain;align-self:flex-start;margin-bottom:6px}
.org-name{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.15}
.org-host{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.org-card:hover .org-name{color:var(--accent)}
.plate .org-card:hover .org-name{color:var(--flag)}
.entity-ref{color:var(--accent);border-bottom:1px solid currentColor}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.further-grid a{border:1px solid var(--rule);border-top:4px solid var(--secondary);padding:16px 18px 18px;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.15}
.further-grid a:hover{border-top-color:var(--accent)}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:18px}
.related-links a{border-bottom:1px solid var(--rule);padding-bottom:8px;display:block}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gallery figcaption{font-size:15px;line-height:1.4;padding-top:8px}

/* section / index pages */
.page-head{padding-block:clamp(28px,3.4vw,48px) 0}
.page-head h1{font-size:clamp(36px,6vw,72px);line-height:.98}
.page-head .intro{margin-top:18px;font-size:clamp(18px,2.2vw,22px);line-height:1.5;max-width:62ch}
.cat-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:88px 1.1fr 1fr;gap:clamp(16px,2.4vw,30px);padding-block:24px;align-items:start}
.cat-list .n{font-family:var(--display);font-weight:700;font-size:34px;line-height:.9;color:var(--accent)}
.cat-list h3{font-size:clamp(22px,2.4vw,28px);line-height:1.12}
.cat-list p{font-size:17px;line-height:1.5;opacity:.85}
.cat-list a:hover h3{color:var(--accent)}
.register{border-top:2px solid var(--ink)}
.register h2{font-size:24px;display:flex;align-items:center;gap:10px;padding-top:18px}
.register ul{list-style:none;margin:0 0 26px;padding:0}
.register li{border-top:1px solid var(--rule)}
.register li a{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(14px,2vw,30px);padding-block:14px;font-size:18px;align-items:baseline}
.register .r-brief{font-size:16px;opacity:.75;line-height:1.4}
.prose{max-width:70ch}
.prose p{font-size:19px;line-height:1.62;margin-bottom:20px}
.prose h2{font-size:28px;margin:32px 0 12px}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:18px}
.contact-list li{border-top:1px solid var(--rule);padding-top:14px}

@media (max-width:960px){
  .rules-grid,.split,.section-index,.foot-grid,.art-body{grid-template-columns:1fr}
  .art-body > .breakout{margin-block:26px}
  .section-index .sec-card{border-right:0;border-bottom:1px solid var(--rule)}
  .cat-list a{grid-template-columns:60px 1fr}
  .cat-list p{grid-column:2}
  .register li a{grid-template-columns:1fr}
  .lead-slab{margin-top:-40px}
  .lead-cap p{text-align:left}
  .timeline li,.cat-list a{grid-template-columns:1fr}
  .quiet .wrap{gap:14px}
  .quiet svg{display:none}
}
@media (max-width:640px){
  body{font-size:18px}
  .art-body > p{font-size:19px}
  .foot-grid{gap:22px}
}
@media print{
  .masthead .nav,.supporters,.foot-util{display:none}
  body{background:#fff}
}

/* article lead figure — full-bleed, caption pulled back to the measure */
.art-lead{margin-top:24px}
.art-lead .fig-frame img{height:clamp(300px,46vw,620px);object-fit:cover}
.art-lead .fig-cap{padding-inline:var(--gutter);max-width:min(72ch,100%);margin-inline:auto;width:100%}
.art-foot{border-top:2px solid var(--ink);padding-top:22px;margin-top:12px}
.art-foot h2{font-size:20px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.entity-band .plate-head h3{letter-spacing:.02em}

.art-body .plate > .wrap{padding-inline:clamp(18px,2.2vw,30px);max-width:none}
.sg-block{border-top:2px solid var(--ink);padding-block:26px 34px}
.sg-block > h2{font-size:22px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.sg-block > .sg-note{font-size:15px;opacity:.65;margin-bottom:20px}
.sg-grid{display:grid;gap:26px}
.sg-narrow{max-width:360px}
.expander{border-top:1px solid var(--rule)}
.expander > summary{list-style:none;cursor:pointer;font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding:12px 0}
.expander > summary::-webkit-details-marker{display:none}
.expander[open] > summary{color:var(--ink)}

.art-body > .fig-inset{float:right;width:min(48%,360px);margin:6px 0 22px 30px;clear:both}
.art-body > .fig-inset .fig-frame img{aspect-ratio:4/3}
@media (max-width:760px){.art-body > .fig-inset{float:none;width:auto;margin:26px 0}}

/* ── header menu: one row of sections, one row of the section's entries ──── */
.menu{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;padding-block:11px}
.menu-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 30px}
.menu-row a{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.15em;text-transform:uppercase;padding:7px 0}
.menu-row .num{opacity:.62;font-size:12px}
.menu-row a:hover{color:var(--accent)}
.menu-row a.is-active{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.menu-all{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.submenu{border-top:1px solid var(--rule);background:var(--ground-2)}
.submenu-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;padding-block:11px}
.submenu-label{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.submenu-row a{font-size:16px}
.submenu-row a.is-current{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
@media (max-width:960px){
  .menu{padding-block:8px;gap:8px 20px}
  .menu-row{gap:2px 20px}
  .menu-row a{font-size:13px;letter-spacing:.1em;gap:6px}
  .submenu-row{gap:4px 18px}
  .submenu-row a{font-size:15px}
}

.sec-mark{color:var(--accent);display:block;margin-bottom:12px}
.sec-card h3{font-size:23px;line-height:1.12}
.sec-card{gap:8px}

.brand--foot .brand-name{white-space:nowrap;font-size:26px}
@media (max-width:420px){.brand-name{font-size:26px}}

.art-body > .fig-inset .fig-cap{max-width:none;padding-left:0;border-left:0;border-top:2px solid var(--ink);margin-top:10px;padding-top:10px;font-size:15px}
.art-body > h2{clear:both}
.art-foot{clear:both}

/* a floated inset with no prose left to wrap it stands as a normal figure */
.art-body > .fig-inset:not(:has(~ p)){float:none;width:min(620px,100%);margin:26px 0}

/* two interruptions carried as one row, so short pieces don't stack them */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);align-items:start}
.duo > *{margin:0 !important;float:none !important;width:auto !important;transform:none !important;margin-left:0 !important}
.duo .plate{padding:clamp(20px,2.6vw,28px)}
.duo .plate > .wrap{padding-inline:0}
.duo .fig-inset .fig-cap{max-width:none}
@media (max-width:760px){.duo{grid-template-columns:1fr;gap:24px}}

.art-foot .related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 26px}
.art-foot .related-links a{font-family:var(--display);font-weight:700;font-size:18px;padding-block:10px}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

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

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

/* op-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.mast-row{padding-inline:var(--gutter)}
}

/* op-colourbar-label-fit: operator — "can you work on cyan magneta yellow black text to not
   touch top line?" `.colourbar` is a fixed 22px strip with a 1px top rule, and `.cb-label`
   sits inside it with no vertical padding. At 390 the label wraps to two lines — measured
   157..178 inside a bar of 156..178 — so the first line sat against the rule and the second
   ran out of the strip. Below 640 the strip may grow to fit its label and the label keeps a
   little air above and below. The swatches stretch with it, so the bar stays one object. */
@media (max-width:640px){
  .colourbar{height:auto;min-height:22px}
  .cb-label{padding-block:5px;line-height:1.4}
}

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

  .nav-gate-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .wrap.menu{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-gate-c:checked ~ .wrap.menu{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .masthead:has(> .nav-gate){display:flow-root}
  .nav-gate:not(:has(~ .wrap.menu)){display:none}
}

/* op-overflow-grid: a.card overhung the viewport by 20px at 360
   (index.html) — measured width 360px reaching x=380, white-space:normal,
   min-width:auto, inside div.cards (grid/nowrap).
   Closed at the element that causes it, at phone widths only. */
@media (max-width:640px){
  .cards{grid-template-columns:minmax(0,1fr)}
}

/* op-overflow-grid: a.card overhung the viewport by 60px at 320 on
   index.html — width 360px reaching x=380, white-space:normal,
   min-width:auto, inside div.cards (grid/nowrap,
   tracks 360px). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .cards{grid-template-columns:minmax(0,1fr)}
}

/* op-overflow-grid: a.card overhung the viewport by 60px at 320 on
   index.html — width 360px reaching x=380, white-space:normal,
   min-width:auto, inside div.cards (grid/nowrap,
   tracks 360px). Closed at the element that causes it, phone
   widths only, escalated because the first declaration lost the cascade. */
@media (max-width:640px){
  .cards{grid-template-columns:minmax(0,1fr)!important}
}

/* op-footer-compact: the footer printed 6 rows for 9 link(s) in
   2 list(s) — 810px at 390, 8% 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 810 -> 645px (20% 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:min(2.08vw,30px)!important;row-gap:8px!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:26px}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1594px at 390, 16% of the whole page. Two columns bring it to
   894px (44% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 3 lines, tile heights 130-151px.
   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 (.sponsor-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){
  .sponsor-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid > * *{min-width:0!important;max-width:100%}
    .sponsor-grid img,.sponsor-grid svg{max-width:100%;height:auto}
  .sponsor-grid .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 799px (90 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 70ch (declared in .art-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.art-body{max-width:min(904px, 100%)!important}
}
@media (min-width:1600px){
  div.art-body{max-width:min(clamp(904px, 62.778vw, 1085px), 100%)!important}
  div.art-body > :is(p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
.cat-list a:hover h2:where(.rt-h3){color: var(--accent);}
.card:hover h2:where(.rt-h3){color: var(--accent);}
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; text-wrap: pretty; margin: 0px;}
.rule-panel h2:where(.rt-h3){font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; margin-top: 14px;}
.card h2:where(.rt-h3){font-size: 23px; line-height: 1.14; min-height: 2.28em;}
.split-copy h2:where(.rt-h3){font-size: clamp(26px, 3.2vw, 40px); line-height: 1.06; margin-top: 14px;}
.sec-card h2:where(.rt-h3){font-size: 19px; display: flex; align-items: center; gap: 8px;}
.cat-list h2:where(.rt-h3){font-size: clamp(22px, 2.4vw, 28px); line-height: 1.12;}
.sec-card h2:where(.rt-h3){font-size: 23px; line-height: 1.12;}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px){
  div.wrap.mast-row{padding-left:max(0px, calc(max(var(--gutter), 18px) - max(0px, (100vw - 1560px) / 2)));padding-right:max(0px, calc(max(var(--gutter), 18px) - max(0px, (100vw - 1560px) / 2)))}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.shot > img,
  section.lead-band > div.lead-figure > img,
  section.split > div > img){height:auto}
/* op-img-dims:end */