/* ecologiasociale.org — "Shared Ground"
   Palette (each member has a job):
     --ground     paper, the page ground
     --ink        text
     --accent     chlorophyll green, saturated — masthead band, section grounds, rules
     --secondary  wine, saturated, far from the accent in hue — panels, figure mats, stage flags
     --muted      supporting text
*/
:root{
  --ground:#F4F3EE;
  --ground-2:#EBEAE3;
  --ink:#14150F;
  --accent:#4F7A12;
  --accent-deep:#3C5D0D;
  --secondary:#7A1F3D;
  --muted:#54574A;
  --rule:rgba(20,21,15,.16);
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:68ch;
  --pad:48px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;text-wrap:pretty;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.08;text-wrap:balance}
p{margin:0 0 1.05em}
svg{flex:none}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.kicker{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--ground);padding:8px 12px;z-index:99}

/* ---------- masthead ---------- */
.masthead{background:var(--accent);color:var(--ground)}
.masthead a{text-decoration:none}
.mast-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:24px 0 18px}
.wordmark{display:flex;align-items:center;gap:14px}
.wordmark strong{font:700 30px/1 var(--sans);letter-spacing:-.035em}
.mast-line{font:500 11.5px/1.5 var(--mono);letter-spacing:.05em;text-align:right;opacity:.85;max-width:24ch}
.mast-nav{border-top:1px solid rgba(244,243,238,.32)}
.mast-nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:6px 30px;margin:0;padding:0;list-style:none}
.mast-nav a{display:flex;align-items:center;gap:9px;padding:16px 0;font:500 16px/1 var(--sans);letter-spacing:-.012em;opacity:.86}
.mast-nav a:hover,.mast-nav a:focus{opacity:1}
.mast-nav .is-here a,.mast-nav a[aria-current]{opacity:1;box-shadow:inset 0 -3px 0 var(--ground)}
.mast-nav .to-end{margin-left:auto}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#B9BBAB;margin-top:64px}
.site-foot a{color:#DDDFD0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:44px 0 32px}
.foot-grid h4{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8B8C80;margin-bottom:14px}
.foot-grid ul{margin:0;padding:0;list-style:none;font-size:14.5px;line-height:2}
.foot-mark{font:600 20px/1 var(--sans);letter-spacing:-.03em;color:var(--ground)}
.foot-bar{border-top:1px solid rgba(244,243,238,.16);padding:16px 0 28px;font:400 13px/1.5 var(--mono);color:#8B8C80;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ---------- homepage bands ---------- */
.band{border-bottom:1px solid var(--rule)}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:34px 0 18px}
.band-head .kicker{color:var(--accent)}
.band-head a{color:var(--muted);font:500 12.5px/1 var(--sans);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px}
.band-head a:hover{color:var(--ink)}

.opener{background:var(--ink);color:var(--ground);border-bottom:1.5px solid var(--ink)}
.opener > img{width:100%;height:clamp(360px,50vh,600px);object-fit:cover;object-position:center 56%}
.opener .inner{padding:26px 0 46px}
.opener .credit{display:block;text-align:right;font:400 12px/1 var(--mono);color:rgba(244,243,238,.5);padding-bottom:22px;border-bottom:1px solid rgba(244,243,238,.18);margin-bottom:26px}
.opener .grid{display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:end}
.opener .eyebrow{color:#C9DE9B}
.opener h1{color:var(--ground);font-size:clamp(38px,5.6vw,76px);letter-spacing:-.042em;line-height:.98;margin:16px 0 0;max-width:14ch}
.opener h1 a{text-decoration:none}
.opener .lead{color:rgba(244,243,238,.86);font-size:clamp(17px,1.4vw,20px);line-height:1.5;margin:0;max-width:46ch}
.opener .readon{color:var(--ground);border-color:var(--ground);margin-top:22px;display:inline-block}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.readon{margin-top:22px;font:500 13px/1 var(--sans);color:var(--secondary);border-bottom:1.5px solid var(--secondary);padding-bottom:4px;align-self:flex-start;text-decoration:none}

/* register band */
.register{width:100%;border-collapse:collapse;font-size:15px}
.register th{font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 18px 10px 0;border-bottom:1.5px solid var(--ink)}
.register th:last-child,.register td:last-child{text-align:right;padding-right:0}
.register td{padding:18px 18px 18px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.register tr:hover td{background:rgba(79,122,18,.06)}
.register .r-icon{width:34px;color:var(--accent);padding-right:12px}
.register .r-sec{font:500 12px/1.4 var(--mono);color:var(--accent);width:112px}
.register .r-title{font:600 21px/1.18 var(--sans);letter-spacing:-.022em;display:block}
.register .r-title a{text-decoration:none}
.register .r-brief{color:var(--muted);font-size:14.5px;line-height:1.45;display:block;margin-top:5px;max-width:56ch}
.register .r-stage{font:500 12px/1.4 var(--mono);color:var(--secondary);width:110px}

/* section hub */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 56px;padding-bottom:16px}
.hub a{display:grid;grid-template-columns:28px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--rule);text-decoration:none}
.hub a:hover .hub-t{color:var(--accent)}
.hub svg{color:var(--accent);margin-top:3px}
.hub-t{font:600 21px/1.15 var(--sans);letter-spacing:-.024em;display:block}
.hub-b{color:var(--muted);font-size:14.5px;line-height:1.45;display:block;margin-top:4px}
.hub-n{font:500 12px/1 var(--mono);color:var(--muted);display:block;margin-top:8px}

.quiet-line{padding:44px 0}
.quiet-line p{font-size:clamp(21px,2vw,29px);line-height:1.34;letter-spacing:-.02em;color:var(--secondary);margin:0;max-width:30ch}
.quiet-line .kicker{color:var(--muted);display:block;margin-bottom:14px}

.plate{background:var(--secondary);color:var(--ground)}
.plate .kicker{opacity:.8}
.plate-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:48px 0 52px;align-items:start}
.plate h2{font-size:clamp(28px,2.6vw,38px);margin:14px 0 0;max-width:18ch}
.plate p.dek{margin:12px 0 0;opacity:.9;max-width:44ch}
.plate ol{margin:0;padding:0;list-style:none;counter-reset:p}
.plate ol li{counter-increment:p;display:grid;grid-template-columns:34px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid rgba(244,243,238,.28)}
.plate ol li::before{content:counter(p,decimal-leading-zero);font:500 12px/1.5 var(--mono);opacity:.7}
.plate ol a{text-decoration:none;font:600 18px/1.2 var(--sans);letter-spacing:-.02em}
.plate ol a:hover{text-decoration:underline}
.plate ol span{display:block;font-size:14px;line-height:1.45;opacity:.85;margin-top:4px}

.seconds{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;padding:32px 0 48px}
.card{display:flex;flex-direction:column;text-decoration:none;height:100%}
.card .c-img{aspect-ratio:16/10;overflow:hidden;background:var(--ground-2);border:1px solid var(--rule)}
.card .c-img img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:24px;margin:14px 0 0;min-height:2.3em}
.card p{color:var(--muted);font-size:15px;line-height:1.5;margin:8px 0 0}
.card .eyebrow{margin-top:14px;order:-1}
.card:hover h3{color:var(--accent)}
.c-meta{margin-top:auto;padding-top:14px;font:500 12px/1 var(--mono);color:var(--secondary)}

/* ---------- supporters ---------- */
.supporters{background:var(--ground-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sup-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;padding:38px 0 44px;align-items:start}
.sup-head .kicker{color:var(--accent);display:block;margin-bottom:12px}
.sup-head h2{font-size:28px}
.sup-head p{color:var(--muted);font-size:15px;line-height:1.55;margin:14px 0 0;max-width:36ch}
.sup-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.sup-list li{border-bottom:1px solid var(--rule)}
.sponsor{display:grid;grid-template-columns:30px 1fr;gap:4px 18px;align-items:baseline;padding:13px 0;text-decoration:none;color:inherit}
.sponsor:hover .sponsor-name{color:var(--accent)}
.sponsor .s-no{font:500 12px/1.6 var(--mono);color:var(--muted)}
.sponsor-name{font:600 18px/1.3 var(--sans);letter-spacing:-.02em}
.sponsor-blurb{grid-column:2;font-size:14.5px;line-height:1.5;color:var(--muted)}

/* ---------- section / category page ---------- */
.sec-hero{background:var(--accent);color:var(--ground)}
.sec-hero .inner{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:end;padding:44px 0 46px}
.sec-hero h1{font-size:clamp(40px,5vw,64px);letter-spacing:-.04em;margin:12px 0 0}
.sec-hero .kicker{opacity:.8}
.sec-hero p{margin:0;font-size:16px;line-height:1.55;opacity:.92}
.sec-hero .sec-mark{margin-bottom:14px;opacity:.95}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list li:first-child{border-top:1.5px solid var(--ink)}
.cat-list a{display:grid;grid-template-columns:150px 1fr 108px;gap:28px;align-items:center;padding:18px 0;text-decoration:none}
.cat-list a:hover{background:rgba(79,122,18,.06)}
.cat-list .thumb{aspect-ratio:3/2;overflow:hidden;border:1px solid var(--rule);background:var(--ground-2)}
.cat-list .thumb img{width:100%;height:100%;object-fit:cover}
.cat-list h2{font-size:23px}
.cat-list p{color:var(--muted);font-size:15px;line-height:1.45;margin:6px 0 0;max-width:62ch}
.cat-list .len{font:500 12px/1.4 var(--mono);color:var(--secondary);text-align:right}
.sec-foot-note{padding:30px 0 8px;color:var(--muted);font-size:15px;max-width:60ch}

/* ---------- article ---------- */
.art-head{padding:44px 0 30px;border-bottom:1.5px solid var(--ink)}
.art-head .inner{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:end}
.art-head h1{font-size:clamp(34px,4.2vw,54px);letter-spacing:-.038em;margin:14px 0 0;max-width:20ch}
.art-head .lead{font-size:20px;line-height:1.45;color:var(--muted);margin:16px 0 0;max-width:52ch}
.art-meta{font:400 13.5px/1.7 var(--mono);color:var(--muted);padding-bottom:6px}
.art-meta div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--rule);padding:6px 0}
.art-meta div:last-child{border-bottom:0}
.art-meta b{font-weight:400;color:var(--ink)}
.art-meta .flag{color:var(--secondary)}
.prose{max-width:var(--measure);margin-inline:auto;padding:0 var(--pad)}
.prose h2{font-size:28px;margin:14px 0 14px;letter-spacing:-.028em}
.prose h2::before{content:"";display:block;width:44px;border-top:3px solid var(--accent);margin-bottom:14px}
.prose p{font-size:18px;line-height:1.66}
.prose a{color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:2px}
.prose a:hover{color:var(--secondary)}
.prose em{font-style:italic}
.art-body{padding:36px 0 0}


/* figure system — three treatments, one drawing system */
figure{margin:0}
figcaption{font-size:15.5px;line-height:1.45}
.fig-cap{font-size:15.5px;line-height:1.45;margin-top:12px}
.fig-credit{display:block;font:400 12.5px/1.5 var(--mono);color:#8B8C80;margin-top:7px}
/* 1 — keyline frame, column width */
.article-figure{max-width:var(--measure);margin-inline:auto;padding:0 var(--pad)}
.article-figure .frame{border:1px solid rgba(20,21,15,.32);padding:10px}
.article-figure img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{padding-left:10px;border-top:0;margin-top:12px}
/* 2 — the mat, full bleed on the secondary colour */
.fig-mat{background:var(--secondary);color:var(--ground);padding:30px 0 24px}
.fig-mat .inner{max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.fig-mat img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.fig-mat figcaption{display:grid;grid-template-columns:1fr 260px;gap:36px;align-items:end;margin-top:16px}
.fig-mat .fig-credit{color:rgba(244,243,238,.7);text-align:right;margin:0}
/* 3 — inset, offset caption, breaks the measure */
.fig-inset{max-width:1180px;margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:36px;align-items:start}
.fig-inset .shot{border-top:3px solid var(--accent)}
.fig-inset img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.fig-inset figcaption{padding-top:6px}

/* notes-for-design panels — the material that breaks the prose */
.fieldnote{background:var(--ground-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fieldnote .inner{max-width:1180px;margin-inline:auto;padding:30px var(--pad) 34px;display:grid;grid-template-columns:270px 1fr;gap:44px;align-items:start}
.fieldnote h3{font-size:22px;max-width:18ch}
.fieldnote .kicker{color:var(--accent-deep);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.fieldnote ul{margin:0;padding:0;list-style:none;columns:2;column-gap:44px}
.fieldnote li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.5}
.fieldnote li b{font-weight:600}
.fieldnote li .dash{color:var(--secondary)}

/* components */
.lead{font-size:20px;line-height:1.45}
.pullquote{margin-inline:auto;max-width:var(--measure);padding:0 var(--pad)}
.pullquote p{font-size:26px;line-height:1.32;letter-spacing:-.02em;color:var(--secondary);border-top:3px solid var(--secondary);padding-top:16px;margin:0}
.blockquote{margin-inline:auto;max-width:var(--measure);padding:0 var(--pad)}
.blockquote p{font-size:19px;line-height:1.5;border-left:3px solid var(--accent);padding-left:18px;margin:0}
.blockquote cite{display:block;margin-top:10px;padding-left:21px;font:400 13px/1.5 var(--mono);color:var(--muted);font-style:normal}
.callout{max-width:var(--measure);margin-inline:auto;padding:0 var(--pad)}
.callout > *{background:rgba(79,122,18,.09);border-left:4px solid var(--accent);padding:18px 22px;margin:0;font-size:17px;line-height:1.55}
.note{max-width:var(--measure);margin-inline:auto;padding:0 var(--pad);color:var(--muted);font-size:15.5px}
.versus,.datatable{width:100%;border-collapse:collapse;font-size:15.5px}
.versus th,.datatable th{text-align:left;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1.5px solid var(--ink);padding:10px 14px 10px 0}
.versus td,.datatable td{border-bottom:1px solid var(--rule);padding:12px 14px 12px 0;vertical-align:top}
.datatable td.num,.datatable th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;padding-right:0}
.table-wrap{max-width:var(--measure);margin-inline:auto;padding:0 var(--pad);overflow-x:auto}
.statrow{max-width:1180px;margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
.statblock{background:var(--ground);padding:20px 22px}
.stat-num{display:block;font:600 40px/1 var(--sans);letter-spacing:-.04em;color:var(--accent)}
.stat-label{display:block;margin-top:8px;font-size:14.5px;line-height:1.4;color:var(--muted)}
.timeline{max-width:var(--measure);margin-inline:auto;padding:0 var(--pad);list-style:none;counter-reset:tl}
.timeline li{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:24px;padding:14px 0;border-bottom:1px solid var(--rule)}
.timeline li:first-child{border-top:1.5px solid var(--ink)}
.t-when{font:500 13px/1.5 var(--mono);color:var(--accent);text-wrap:pretty}
.t-what{font-size:16px;line-height:1.5}
.chart{max-width:var(--measure);margin-inline:auto;padding:0 var(--pad)}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:12px;color:var(--muted);font-size:14.5px}
.gallery{max-width:1180px;margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.gallery figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule)}
.gallery figcaption{font-size:14.5px;color:var(--muted);margin-top:8px;line-height:1.4}
.profile-grid{max-width:1180px;margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.profile-card{border:1px solid var(--rule);background:var(--ground);padding:20px;display:flex;flex-direction:column}
.profile-card .p-photo{width:76px;height:76px;object-fit:cover;border-radius:50%;margin-bottom:14px}
.profile-card h3{font-size:20px}
.profile-card .p-role{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:6px 0 10px}
.profile-card p{font-size:15px;line-height:1.5;color:var(--muted)}
.profile-card .p-links{margin-top:auto;padding-top:10px;font-size:14px}
.profile-card.no-photo{border-top:3px solid var(--secondary)}
.org-grid{max-width:1180px;margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.org-card{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;border:1px solid var(--rule);padding:14px;text-decoration:none;background:var(--ground)}
.org-card .org-logo{width:52px;height:52px;object-fit:contain;background:var(--ink)}
.org-card.no-logo{grid-template-columns:1fr;border-left:3px solid var(--accent)}
.org-name{font-weight:600;display:block}
.org-host{font:400 12.5px/1.4 var(--mono);color:var(--muted);display:block;margin-top:2px}
.entity-ref{font-weight:500;color:var(--accent-deep);white-space:nowrap}
.further-grid{max-width:1180px;margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.further-grid a{border:1px solid var(--rule);border-top:3px solid var(--accent);padding:16px;text-decoration:none;font-weight:600;font-size:17px;line-height:1.25;letter-spacing:-.018em;background:var(--ground)}
.further-grid a:hover{background:rgba(79,122,18,.07)}
.related{max-width:1180px;margin-inline:auto;padding:8px var(--pad) 0}
.related h2{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 40px}
.related-links li{border-top:1px solid var(--rule)}
.related-links a{display:block;padding:14px 0;text-decoration:none;font:600 18px/1.24 var(--sans);letter-spacing:-.02em}
.related-links a:hover{color:var(--accent)}
.related-links span{display:block;font:500 12px/1.4 var(--mono);color:var(--muted);margin-top:6px;letter-spacing:.06em}

/* collapsible long list */
.more-toggle{display:none}
.more-list{max-height:none}
.more-toggle + label{display:inline-block;margin-top:14px;font:500 12.5px/1 var(--sans);color:var(--secondary);border-bottom:1.5px solid var(--secondary);padding-bottom:4px;cursor:pointer}
.more-hidden{display:none}
.more-toggle:checked ~ .more-hidden{display:block}
.more-toggle:checked + label{display:none}

/* simple pages */
.page-head{padding:44px 0 26px;border-bottom:1.5px solid var(--ink)}
.page-head h1{font-size:clamp(32px,4vw,48px)}
.page-head p{color:var(--muted);font-size:18px;margin:14px 0 0;max-width:52ch}
.page-body{padding:34px 0 0;max-width:var(--measure)}
.page-body h2{font-size:24px;margin:28px 0 12px}
.page-body p{font-size:17.5px}
.err{padding:90px 0 60px;text-align:center}
.err h1{font-size:clamp(38px,6vw,72px)}
.err p{color:var(--muted);font-size:19px;margin:18px 0 26px}

/* styleguide only */
.sg-sec{padding:36px 0;border-bottom:1px solid var(--rule)}
.sg-sec > h2{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--secondary);margin-bottom:20px}
.sg-narrow{max-width:380px;border:1px dashed var(--rule);padding:12px 0;overflow:hidden;resize:horizontal}

.art-body > *{margin-bottom:34px}
.art-body > *:last-child{margin-bottom:0}
@media (max-width:980px){
  :root{--pad:28px}
  .opener > img{height:clamp(300px,46vh,420px)}
  .opener .grid{grid-template-columns:1fr;gap:22px;align-items:start}
  .opener .inner{padding-bottom:34px}
  .sec-hero .inner,.art-head .inner,.plate-grid,.sup-grid,.foot-grid,.fieldnote .inner,.fig-inset{grid-template-columns:1fr;gap:24px}
  .fig-mat figcaption{grid-template-columns:1fr;gap:8px}
  .fig-mat .fig-credit{text-align:left}
  .fieldnote ul{columns:1}
  .art-head .inner{gap:28px}
  .register .r-sec,.register .r-stage{display:none}
  .cat-list a{grid-template-columns:96px 1fr;gap:18px}
  .cat-list .len{display:none}
  .mast-nav .to-end{margin-left:0}
  .mast-top{flex-direction:column;align-items:flex-start;gap:10px}
  .mast-line{text-align:left}
}
@media (max-width:560px){
  body{font-size:16px}
  .mast-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .mast-nav a{font-size:15px;padding:12px 0}
  .mast-nav a svg{width:19px;height:19px}
  .mast-nav .to-end{grid-column:1/-1;border-top:1px solid rgba(244,243,238,.22)}
  .prose p{font-size:17px}
  .seconds{gap:30px}
  .card h3{min-height:0}
  .related-links{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media print{.masthead,.site-foot,.supporters{background:#fff;color:#000}}

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


/* sp-list-cols: the supporter register was twelve text-only items stacked one per row in a 587px
   column. Text-only tiles are deliberate on this estate, but one per row is not — two columns
   above 700px, Design's single stack below. */
@media (min-width:700px){
  .sup-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
            column-gap:34px!important;border-top:0!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.band.quiet-line{padding-inline:var(--pad)}
}

/* op-nav-collapse: this nav printed 174px of stacked links at 390 before any content
   (7 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "right-tab", 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 (48px) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (900px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.index-toggle{display:none}
@media (max-width:900px){
  .index-toggle{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;margin-left:auto;border:1px solid currentColor;border-radius:2px;padding:10px 16px;margin-right:48px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .index-toggle-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .mast-nav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .index-toggle-c:checked ~ .mast-nav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .masthead:has(> .index-toggle){display:flow-root}
  .index-toggle:not(:has(~ .mast-nav)){display:none}
}

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 697px at 390, 10% 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 697 -> 521px (25% 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.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:20px}
}

/* op-page-overflow: the page scrolled sideways at 320 — a reached
   328px in a 320px screen (+8px), inside
   div.hub. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.hub{grid-template-columns:minmax(0,1fr)!important}
  a{min-width:0!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 674px (84 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose) 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 div.prose{--measure:min(80.374ch, 100%)!important}
}
@media (min-width:1600px){
  div.art-body div.prose{--measure:min(clamp(80.374ch, 63.194vw, calc(80.374ch * 1.2)), 100%)!important}
  div.art-body div.prose > :is(p:not([class])){font-size:clamp(18px,1.2500vw,21.6px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.register tr td:last-child{padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

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

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:799px){
  div.wrap.page-body{padding-left:max(var(--pad), 18px);padding-right:max(var(--pad), 18px)}
}
@media (min-width:901px) and (max-width:1199px){
  section.wrap.band.quiet-line{padding-left:max(var(--pad), 18px);padding-right:max(var(--pad), 18px)}
}
/* op-tablet-gutter:end */

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