/* molehofje.net — "Adjust" */
:root{
  --ground:#16181A;      /* ground — the workspace */
  --panel:#0F1112;       /* panel chrome */
  --ink:#EFEBE3;         /* ink on ground */
  --paper:#EFEBE3;       /* paper — reading ground */
  --paper-ink:#16181A;   /* ink on paper */
  --accent:#D2601F;      /* accent — orange patch */
  --secondary:#0E8A94;   /* secondary — cyan patch */
  --flag:#C9A227;        /* flag — yellow patch */
  --mute:#8C8781;
  --mute-paper:#5A5C5D;
  --line:#2C2F31;
  --line-paper:#CFCAC0;
  --sans:"Familjen Grotesk",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
  --pad:clamp(20px,3.4vw,52px);
  --measure:68ch;
  --col:700px;
}
*,*::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.55;text-wrap:pretty}
img{max-width:100%;display:block;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--secondary)}
h1,h2,h3,h4{font-weight:700;letter-spacing:-0.025em;line-height:1.02;margin:0}
p{margin:0 0 1.05em}
svg{display:block}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:34px;height:34px;stroke-width:1.3}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--accent);color:var(--ground);padding:8px 12px;z-index:50}

/* ---------- chrome ---------- */
.bar{background:var(--panel);border-bottom:1px solid var(--line);padding:16px var(--pad) 0;color:var(--ink)}
.bar__top{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.mark{display:flex;align-items:flex-end;gap:14px;color:var(--ink)}
.plate{display:grid;grid-template-columns:repeat(3,11px);grid-template-rows:repeat(2,11px);gap:2px;flex:none}
.plate span{display:block}
.plate span:nth-child(1){background:var(--accent)}
.plate span:nth-child(2){background:var(--flag)}
.plate span:nth-child(3){background:#5B8C3E}
.plate span:nth-child(4){background:var(--secondary)}
.plate span:nth-child(5){background:#3B4B8C}
.plate span:nth-child(6){background:var(--ink)}
.plate--lg{grid-template-columns:repeat(3,15px);grid-template-rows:repeat(2,15px)}
.wordmark{font-size:clamp(30px,3.4vw,44px);font-weight:700;line-height:0.84;letter-spacing:-0.035em}
.wordmark .tld{font-family:var(--mono);font-size:0.3em;font-weight:400;letter-spacing:0.12em;color:var(--accent);vertical-align:baseline}
.nav{display:flex;gap:20px;flex-wrap:wrap;padding-bottom:6px;font-family:var(--mono);font-size:12px;letter-spacing:0.13em;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:7px;color:var(--mute);padding-bottom:3px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a .ico{width:16px;height:16px}
.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.nav a.nav--archive{color:var(--secondary)}
.rule{margin-top:12px;height:4px;display:flex;gap:2px}
.rule i{display:block}
.rule i:nth-child(1){flex:6;background:var(--accent)}
.rule i:nth-child(2){flex:3;background:var(--secondary)}
.rule i:nth-child(3){flex:2;background:var(--line)}
.rule--sec i:nth-child(1){flex:3}
.rule--sec i:nth-child(2){flex:1;background:var(--flag)}
.rule--sec i:nth-child(3){flex:8}
.menu-toggle{display:none}

.foot{background:#0B0C0D;border-top:1px solid var(--line);padding:26px var(--pad) 30px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;font-size:15px;color:var(--mute)}
.foot__line{color:var(--ink);font-size:16px}
.foot nav{display:flex;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase}

/* ---------- workspace / homepage ---------- */
.work{display:grid;grid-template-columns:76px minmax(0,1fr) 372px}
.rail{background:var(--panel);border-right:1px solid var(--line);padding:20px 0;display:flex;flex-direction:column;align-items:center;gap:0}
.rail__chip{width:32px;height:32px}
.rail__lbl{font-family:var(--mono);font-size:9px;letter-spacing:0.05em;color:var(--mute);text-transform:uppercase;padding:5px 0 15px;text-align:center}
.canvas{padding:24px var(--pad) 0;min-width:0}
.frame{position:relative;background:#0B0C0D;overflow:hidden}
.hist{margin-top:12px;border:1px solid var(--line);background:var(--panel);padding:10px 13px}
.hist__hd{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.hist svg{width:100%;height:88px;color:var(--mute)}
.lead-item{padding:30px 0 52px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(230px,1fr);column-gap:clamp(24px,3.4vw,60px);row-gap:14px;align-items:end}
.lead-item .kicker{grid-column:1 / -1}
.lead-item h1{grid-column:1;grid-row:2 / span 2;margin:0;max-width:20ch}
.lead-item .deck{grid-column:2;grid-row:2;align-self:end;margin:0}
.lead-item .more{grid-column:2;grid-row:3;justify-self:start;align-self:start}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px}
.kicker--sec{color:var(--secondary)}
.lead-item h1{font-size:clamp(34px,4.8vw,68px);margin:14px 0 14px}
.lead-item h1 a{color:inherit}
.lead-item h1 a:hover{color:var(--accent)}
.deck{font-size:clamp(17px,1.35vw,20px);color:#B9B6AF;margin:0 0 16px}
.more{font-family:var(--mono);font-size:12px;letter-spacing:0.13em;text-transform:uppercase;color:var(--accent);border-bottom:2px solid var(--accent);display:inline-block;padding-bottom:2px}
.adjust{background:var(--panel);border-left:1px solid var(--line);padding:24px 22px 26px;display:flex;flex-direction:column;min-width:0}
.adjust__hd{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute);padding-bottom:16px}
.grp{border-top:1px solid var(--line);padding:16px 0 20px}
.grp__hd{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink)}
.grp h2{font-size:26px;margin:12px 0 10px}
.grp h2 a{color:inherit}
.grp p{font-size:15px;color:#B9B6AF;margin:0 0 14px}
.curve{border:1px solid var(--line);background:var(--ground);padding:9px}
.curve svg{width:100%;height:140px;color:#5A5C5D}
.grp__subs{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:0.09em;text-transform:uppercase;color:var(--mute)}
.shut{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;color:var(--ink)}
.shut:last-of-type{border-bottom:1px solid var(--line)}
.shut__name{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:-0.015em}
.shut__val{font-family:var(--mono);font-size:11px;color:var(--mute)}
.adjust__fig{margin-top:auto;padding-top:22px}

/* signature band — paper area */
.signature{background:var(--paper);color:var(--paper-ink);border-top:8px solid var(--accent);padding:clamp(32px,4vw,56px) var(--pad) clamp(28px,3.2vw,48px)}
.signature__hd{display:flex;justify-content:space-between;gap:24px;font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;padding-bottom:clamp(20px,2.4vw,36px);border-bottom:1px solid var(--paper-ink)}
.signature__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,260px);gap:clamp(28px,4vw,64px);padding-top:clamp(24px,3vw,40px)}
.signature__body>div:first-child{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(220px,0.9fr);column-gap:clamp(24px,3vw,52px);align-content:start}
.signature__body>div:first-child p:first-child{grid-column:1;grid-row:1 / span 2;max-width:none}
.signature__body>div:first-child p:nth-child(2){grid-column:2;grid-row:1;align-self:end;max-width:none}
.signature__body>div:first-child p:nth-child(3){grid-column:2;grid-row:2;align-self:start}
.signature__body p:first-child{font-size:clamp(27px,3.9vw,54px);font-weight:700;line-height:1.05;letter-spacing:-0.035em;margin:0 0 16px;max-width:24ch}
.signature__body p+p{font-size:clamp(18px,1.8vw,25px);font-style:italic;line-height:1.34;color:var(--mute-paper);max-width:36ch;margin:0}
.ladder{display:flex;flex-direction:column;gap:2px}
.ladder div{height:clamp(24px,2.4vw,34px);display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:10px;letter-spacing:0.12em}
.ladder small{display:block;font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--mute-paper);margin-top:11px;letter-spacing:0}

/* stack band — a run of three, unequal */
.band{padding:clamp(38px,4.4vw,68px) var(--pad)}
.band--line{border-top:1px solid var(--line)}
.band__hd{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.band__hd h2{font-size:clamp(24px,2.6vw,34px)}
.run{display:grid;grid-template-columns:1.7fr 1fr;column-gap:clamp(28px,3.4vw,56px);row-gap:clamp(22px,2.4vw,34px)}
.run article:first-child{grid-column:1;grid-row:1 / span 2}
.run article:not(:first-child){display:grid;grid-template-columns:154px minmax(0,1fr);column-gap:16px;row-gap:5px;align-content:start}
.run article:not(:first-child) .run__img{grid-column:1;grid-row:1 / span 2;margin:0}
.run article:not(:first-child) h3,.run article:not(:first-child) p{grid-column:2}
.run .chip{display:none}
.run article h3{font-size:19px;margin:0 0 6px;line-height:1.15}
.run article h3 a{color:inherit}
.run article p{font-size:15px;color:var(--mute);margin:0}
.run article:first-child h3{font-size:27px;line-height:1.08}
.run article:first-child p{font-size:16px;color:#B9B6AF}
.chip{width:26px;height:26px;margin-bottom:12px}
.chip--lg{width:42px;height:42px}

/* ---------- figures ---------- */
figure{margin:0}
.article-figure figcaption,.fig figcaption{font-size:15.5px;line-height:1.45}
.fig{margin:34px 0}
.fig__strip{display:flex;gap:2px}
.fig__strip i{flex:1;height:8px;display:block}
.fig figcaption{padding-top:11px}
.fig cite,.credit{display:block;font-family:var(--mono);font-size:12px;letter-spacing:0.07em;text-transform:uppercase;color:var(--mute);font-style:normal;margin-top:7px;line-height:1.4}
.paper .fig cite,.paper .credit{color:#6A6862}
/* 1 · bleed — breaks the measure */
.fig--bleed{margin:44px calc(var(--pad) * -1)}
.fig--bleed img{width:100%;height:clamp(260px,42vw,540px);object-fit:cover}
.fig--bleed figcaption{padding:11px var(--pad) 0;max-width:calc(var(--col) + var(--pad) * 2);margin-inline:auto}
/* 2 · plate — image on a mat */
.fig--plate{background:var(--ground);color:var(--ink);padding:16px}
.paper .fig--plate{background:#E2DDD2;color:var(--paper-ink)}
.fig--plate img{width:100%;height:auto}
.fig--plate .fig__strip{margin-top:12px}
.fig--plate figcaption{padding-top:10px}
/* 3 · inset — a narrower plate, set left in the column */
.fig--inset{width:min(var(--col),100%);max-width:100%;margin:32px auto;border-left:6px solid var(--accent);padding-left:16px}
.fig--inset img{width:100%}
.fig--inset figcaption{border-bottom:1px solid var(--line-paper);padding-bottom:9px}

.body>.fig--inset:has(+h2),.body>.fig--inset:has(+.panel),.body>.fig--inset:nth-last-child(-n+3){margin:30px 0}
/* ---------- article ---------- */
.paper{background:var(--paper);color:var(--paper-ink)}
.paper a{color:#A8460E}
.paper a:hover{color:#0B6D75}
.art{padding:clamp(30px,3.6vw,52px) var(--pad) 0;max-width:none}
.art__hd{max-width:var(--col);margin-inline:auto;text-align:left}
.art__hd .kicker{justify-content:flex-start}
.art h1,.art .lead{margin-inline:auto;max-width:none}
.fig--logo img{height:clamp(120px,17vw,200px);object-fit:contain;background:#0B0C0D}
.art .kicker{color:#A8460E}
.art h1{font-size:clamp(31px,4.6vw,58px);margin:14px 0 0;letter-spacing:-0.03em}
.lead{font-size:clamp(19px,1.9vw,23px);line-height:1.42;color:#3C3E40;margin:18px 0 0;font-weight:400}
.body{max-width:none;font-size:18.5px;line-height:1.68;overflow-wrap:break-word}
.body>p,.body>h2,.body>h3,.body>ul,.body>ol,.body>hr,.body>.note,.body>.pullquote,.body>.blockquote,.body>.callout,.body>.timeline,.body>.versus,.body>.datatable,.body>.fig--plate,.body>.fig--inset,.body>.related{max-width:var(--col);margin-inline:auto}
.body>.related{max-width:var(--col)}
.body::after{content:"";display:block;clear:both}
.body h2{font-size:clamp(23px,2.3vw,30px);margin:40px auto 14px;max-width:var(--col);clear:both}
.body h3{font-size:20px;margin:30px auto 10px}
.body>.fig--bleed{max-width:none}
.body ul{padding-left:20px}
.body li{margin-bottom:.5em}
.body hr{border:0;border-top:1px solid var(--line-paper);margin:34px auto}
.body strong{font-weight:700}
.entity-ref{white-space:normal;overflow-wrap:break-word}

/* notes-for-design interruptions — full-bleed instrument panels */
.panel{background:var(--ground);color:var(--ink);margin:40px calc(var(--pad) * -1);padding:clamp(24px,3vw,40px) var(--pad)}
.panel--flag{border-top:6px solid var(--flag)}
.panel--sec{border-top:6px solid var(--secondary)}
.panel--acc{border-top:6px solid var(--accent)}
.panel__kick{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--mute);margin:0 auto 8px}
.panel h2,.panel h3{font-size:clamp(20px,2.1vw,27px);margin:0 auto 18px;max-width:var(--col);color:var(--ink)}
.panel>*{max-width:var(--col);margin-inline:auto}
.panel__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px 34px}
.panel__grid>div{border-top:1px solid var(--line);padding-top:11px}
.panel__grid b{display:block;font-size:16px;letter-spacing:-0.01em}
.panel__grid span{display:block;font-size:15px;color:#B9B6AF;line-height:1.45}
.panel a{color:var(--flag)}

/* components */
.pullquote{margin:34px auto;padding:0 0 0 20px;border-left:6px solid var(--secondary)}
.pullquote p{font-size:clamp(21px,2.2vw,28px);font-weight:700;letter-spacing:-0.025em;line-height:1.2;margin:0}
.blockquote{margin:30px auto;padding:18px 20px;background:#E2DDD2}
.blockquote p{font-size:19px;margin:0 0 8px}
.blockquote cite{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;font-style:normal;color:var(--mute-paper)}
.callout{margin:30px auto;padding:18px 20px;background:var(--ground);color:var(--ink)}
.callout p{margin:0;font-size:17px}
.note{font-size:16px;color:var(--mute-paper);border-top:1px solid var(--line-paper);padding-top:10px}
.versus,.datatable{width:100%;border-collapse:collapse;margin:26px auto;font-size:16px}
.versus th,.datatable th{font-family:var(--mono);font-size:10.5px;letter-spacing:0.11em;text-transform:uppercase;text-align:left;padding:10px 12px 10px 0;border-bottom:2px solid currentColor;color:inherit}
.versus td,.datatable td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line-paper);vertical-align:top}
.panel .versus td,.panel .datatable td{border-bottom-color:var(--line)}
.versus tbody th,.datatable tbody th{font-family:var(--sans);font-size:16.5px;letter-spacing:-0.01em;text-transform:none;border-bottom:1px solid var(--line-paper);font-weight:700;padding:11px 22px 11px 0;width:34%;vertical-align:top}
.panel .datatable tbody th,.panel .versus tbody th{border-bottom-color:var(--line);color:var(--ink)}
.panel .datatable td{color:#B9B6AF}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;margin:26px auto}
.statblock{background:var(--ground);color:var(--ink);padding:16px 18px}
.stat-num{display:block;font-family:var(--mono);font-size:34px;line-height:1;color:var(--flag)}
.stat-label{display:block;font-size:14px;color:#B9B6AF;margin-top:8px}
.timeline{list-style:none;margin:22px auto;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);gap:10px 24px;padding:12px 0;border-top:1px solid var(--line)}
.paper>.timeline li,.body .timeline li{border-top-color:var(--line-paper)}
.panel .timeline li{border-top-color:var(--line)}
.t-when{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;color:var(--flag);text-transform:uppercase}
.t-what{font-size:16px}
.chart{margin:28px 0}
.chart svg{width:100%;height:auto;color:currentColor}
.chart figcaption{font-size:15px;color:var(--mute-paper);margin-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:30px 0}
.gallery img{width:100%;height:180px;object-fit:cover}
.gallery figcaption{font-size:14px;color:var(--mute-paper);padding-top:7px}
.map-figure .map-slot{aspect-ratio:16/10;background:var(--ground);border:1px solid var(--line)}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:26px 0}
.profile-card{background:#E2DDD2;padding:16px;display:flex;flex-direction:column;gap:6px}
.profile-card .p-photo{width:100%;height:150px;object-fit:cover}
.profile-card h3{font-size:19px}
.p-role{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute-paper);margin:0}
.p-links,.p-attr{font-size:14px;margin:0}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:24px 0}
.org-card{display:flex;flex-direction:column;gap:5px;background:var(--ground);color:var(--ink);padding:13px 15px}
.org-card .org-logo{max-height:26px;width:auto}
.org-name{font-weight:700;font-size:16px}
.org-host{font-family:var(--mono);font-size:11px;color:var(--mute)}
.further-grid,.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-auto-rows:1fr;gap:2px;list-style:none;margin:0;padding:0}
.related .related-links{display:block;grid-auto-rows:auto}
.related-links li{border-bottom:1px solid var(--line)}
.related-links li:first-child{border-top:1px solid var(--line)}
.related .related-links a{display:grid;grid-template-columns:13px minmax(0,1fr) auto;column-gap:16px;align-items:baseline;background:none;padding:16px 0;color:var(--ink);height:auto}
.related .related-links a::before{content:"";display:block;width:13px;height:13px;background:var(--secondary);transform:translateY(2px)}
.related .related-links a:hover{background:none;color:var(--accent)}
.related .related-links a:hover::before{background:var(--accent)}
.related .related-links b{font-size:clamp(17px,1.7vw,21px);font-weight:700;letter-spacing:-0.02em;line-height:1.2}
.related .related-links span{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute);opacity:1;text-align:right;white-space:nowrap}
.related{margin:56px 0 0;padding:0;clear:both}
.body>.related{max-width:none;margin-inline:calc(var(--pad) * -1);background:var(--ground);color:var(--ink);border-top:6px solid var(--secondary);padding:clamp(24px,3vw,38px) var(--pad) clamp(26px,3vw,42px)}
.related>h2,.related>.related-links{max-width:var(--col);margin-inline:auto}
.related h2{font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--secondary);margin:0 auto 4px;font-weight:400}
.related-links a{display:flex;flex-direction:column;gap:4px;background:#E2DDD2;padding:14px 16px;height:100%;color:var(--paper-ink)}
.related-links a:hover{background:var(--ground);color:var(--ink)}
.related-links b{font-size:17px;line-height:1.2}
.related-links span{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:inherit;opacity:.7}

/* category + archive */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:8px 34px;padding:17px 0;color:var(--ink);align-items:baseline}
.cat-list a:hover{color:var(--accent)}
.cat-list b{font-size:20px;font-weight:700;letter-spacing:-0.02em;line-height:1.18}
.cat-list span{font-size:15.5px;color:var(--mute);line-height:1.45}
.sec-hd{padding:clamp(30px,3.6vw,52px) var(--pad) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px);gap:clamp(24px,4vw,56px);align-items:end}
.sec-hd h1{font-size:clamp(32px,4.6vw,68px);letter-spacing:-0.03em}
.sec-hd p{font-size:17px;color:#B9B6AF;margin:0}
.tabs{padding:26px var(--pad) 0;display:flex;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tabs span{font-family:var(--mono);font-size:11.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--mute);padding:0 22px 11px 0;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs span:first-child{color:var(--ink);border-bottom-color:var(--accent)}
.arch{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(24px,3vw,52px);padding:clamp(28px,3vw,44px) var(--pad) 0}
.arch h2{font-family:var(--mono);font-size:11.5px;letter-spacing:0.15em;text-transform:uppercase;display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:2px solid var(--accent);font-weight:400}
.arch ul{list-style:none;margin:0;padding:0}
.arch li{border-bottom:1px solid var(--line)}
.arch a{display:block;padding:11px 0;font-size:16.5px;color:var(--ink);line-height:1.3}
.arch a:hover{color:var(--accent)}

/* supporters */
.sup{background:var(--panel);border-top:1px solid var(--line);padding:clamp(28px,3vw,44px) var(--pad) 34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(470px,1fr));column-gap:clamp(24px,3vw,56px)}
.sup__hd{grid-column:1 / -1}
.sup__hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.sup__hd h2{font-size:22px}
.sup__hd p{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute);margin:0}
.sup__grp{margin-top:18px}
.sup__grp>h3{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute);font-weight:400;padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:12px}
.sup__slots{display:grid;grid-template-columns:repeat(auto-fit,232px);gap:10px;justify-content:start}
.sponsor{display:flex;flex-direction:column;justify-content:center;gap:7px;width:232px;min-height:74px;padding:13px 15px;background:var(--ground);border:1px solid var(--line);color:var(--ink)}
.sponsor:hover{border-color:var(--accent);color:var(--ink)}
.sponsor--wide{width:474px;grid-column:span 2}
.sponsor-name{font-size:17px;font-weight:700;letter-spacing:-0.015em;line-height:1.15}
.sponsor-blurb{font-size:14px;line-height:1.4;color:#B9B6AF}

/* misc pages */
.plain{padding:clamp(40px,6vw,88px) var(--pad);max-width:60ch}
.plain h1{font-size:clamp(32px,4.4vw,58px);margin-bottom:16px}
.plain p{font-size:19px;color:#B9B6AF}
.sg-sec{padding:34px var(--pad);border-top:1px solid var(--line)}
.sg-sec>h2{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--flag);margin-bottom:18px;font-weight:400}

@media (max-width:1080px){
  .work{grid-template-columns:76px minmax(0,1fr)}
  .adjust{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line)}
  .curve{max-width:340px}
  .curve svg{height:auto;aspect-ratio:1}
  .grp h2{max-width:24ch}
  .adjust__fig{max-width:520px}
  .adjust__fig{margin-top:26px}
  .run{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  :root{--col:100%}
  .work{grid-template-columns:1fr}
  .rail{flex-direction:row;justify-content:flex-start;gap:14px;overflow-x:auto;padding:12px var(--pad);border-right:0;border-bottom:1px solid var(--line)}
  .rail__chip{width:24px;height:24px}
  .rail__lbl{display:none}
  .lead-item{grid-template-columns:1fr}
  .signature__body>div:first-child{grid-template-columns:1fr}
  .signature__body>div:first-child p{grid-column:1 !important;grid-row:auto !important}
  .run article:first-child,.run article:not(:first-child){grid-column:1;grid-row:auto;grid-template-columns:1fr}
  .run article:not(:first-child) .run__img{grid-row:auto;margin-bottom:12px}
  .run article:not(:first-child) h3,.run article:not(:first-child) p{grid-column:1}
  .lead-item h1{grid-column:1;grid-row:auto;max-width:none}
  .lead-item .deck,.lead-item .more{grid-column:1;grid-row:auto}
  .run{grid-template-columns:1fr;gap:26px}
  .run article:first-child h3{font-size:24px}
  .signature__body{grid-template-columns:1fr}
  .sec-hd{grid-template-columns:1fr;gap:18px}
  .cat-list a{grid-template-columns:1fr;gap:5px}
  .fig--inset{width:100%;max-width:100%;margin:26px 0;border-left-width:5px}
  .versus tbody th,.datatable tbody th{width:auto;padding-right:12px}
  .related .related-links a{grid-template-columns:11px minmax(0,1fr);row-gap:5px;padding:14px 0}
  .related .related-links span{grid-column:2;text-align:left}
  .body{font-size:17.5px;line-height:1.62}
  .body>h2{margin:34px auto 12px}
  .panel{margin:30px calc(var(--pad) * -1);padding:24px var(--pad) 26px}
  .panel__grid{gap:12px 20px}
  .versus,.datatable{font-size:15px}
  .versus th,.versus td,.datatable th,.datatable td{padding-right:10px}
  .versus tbody th{padding-right:10px}
  .fig{margin:28px 0}
  .fig--bleed{margin:32px calc(var(--pad) * -1)}
  .art h1{max-width:none}
  .lead{max-width:none}
  .timeline li{grid-template-columns:1fr}
  .art{max-width:none}
  .body{max-width:none}
  .sponsor,.sponsor--wide{width:100%;grid-column:auto}
  .sup__slots{grid-template-columns:1fr}
  .sup{grid-template-columns:1fr}
  /* menu: CSS-only disclosure, no hover panels anywhere */
  .nav{display:none;width:100%;flex-direction:column;gap:0;padding:6px 0 10px}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}
  .menu-lbl{min-height:44px}
  .menu-toggle:checked ~ .nav{display:flex}
  .menu-lbl{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);cursor:pointer;padding-bottom:6px}
}
@media (min-width:761px){.menu-lbl{display:none}}

/* homepage: photographs in the run band + the programs strip */
.run__img{display:block;margin-bottom:12px;position:relative}
.run__img::after{content:"";display:block;height:8px;background:linear-gradient(90deg,#D2601F 0 25%,#C9A227 25% 50%,#5B8C3E 50% 75%,#0E8A94 75% 100%)}
.run article:not(:first-child) .run__img img{height:116px}
.run article:first-child h3{margin-top:2px}
.run__img img{width:100%;height:158px;object-fit:cover}
.run article:first-child .run__img img{height:258px}
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:2px}
.logos a{display:flex;flex-direction:column;gap:7px;background:var(--panel);padding:14px 16px 17px;color:var(--ink)}
.logos a:hover{background:#141617;color:var(--ink)}
.logos__box{display:block;background:#0B0C0D;padding:18px 20px}
.logos__box img{width:100%;height:clamp(96px,9vw,132px);object-fit:contain}
.logos b{font-size:16.5px;letter-spacing:-0.01em}
.logos span{font-size:14.5px;color:var(--mute);line-height:1.4}
@media (max-width:760px){.run__img img,.run article:first-child .run__img img{height:200px}}

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

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

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

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

/* sp-grid-stretch: fixed pixel tracks left the container part-empty. */
.plate--lg{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}

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

/* op-add-marks: operator asked for logo images on this build, which shipped name + sentence only.
   add_tile_logos.py inserted each partner's own assets/logos file as the tile's first child; this
   frames them the way the estate frames every money mark — one height for the whole band, the
   dark plate at #121013, object-fit:contain so a 1:1 and a 14:1 wordmark both sit inside the same
   box, and no filter. The wide tiles get the same height, only a longer plate. */
.sup__slots .sponsor > img{
  width:100%;height:42px;box-sizing:border-box;padding:8px 12px;margin-bottom:3px;
  background:#121013;object-fit:contain;object-position:center center;display:block;
}

/* op-overflow-wide: a.mark overhung the viewport by 27px at 360
   (index.html) — measured width 367px reaching x=387, white-space:normal,
   min-width:auto, inside div.bar__top (flex/wrap).
   Closed at the element that causes it, at phone widths only. */
@media (max-width:640px){
  .mark{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .mark{flex-wrap:wrap}
}

/* op-overflow-wide: nav overhung the viewport by 55px at 320 on
   index.html — width 355px reaching x=375, white-space:normal,
   min-width:auto, inside footer.foot (flex/wrap,
   tracks none). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .foot nav{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .foot nav{flex-wrap:wrap}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1866px at 390, 22% of the whole page. Two columns bring it to
   1391px (25% shorter). Checked before writing: no new overflow, smallest mark still
   134px wide, longest blurb 4 lines, tile heights 130-193px.
   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.
   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 (.sup__slots), 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){
  .sup__slots{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .sup__slots > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup__slots > * *{min-width:0!important;max-width:100%}
    .sup__slots img,.sup__slots svg{max-width:100%;height:auto}

}

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

/* op-article-width: the article column was capped at 700px (91 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --col (declared in .body > p, .body > h2, .body > h3, .body > ul, .body > ol, .body > hr, .body > .note, .body > .pullquote, .body > .blockquote, .body > .callout, .body > .timeline, .body > .versus, .body > .datatable, .body > .fig--plate, .body > .fig--inset, .body > .related) 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.body{--col:min(787px, 100%)!important}
}
@media (min-width:1600px){
  div.body{--col:min(clamp(787px, 54.653vw, 944px), 100%)!important}
  div.body > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (700px) and was left behind when the text went to 787px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again through Design's own measure --col. */
@media (min-width:1024px){
  div.art__hd{--col:min(787px, 100%)!important}
}
@media (min-width:1600px){
  div.art__hd{--col:min(clamp(787px, 54.653vw, 944px), 100%)!important}
}
/* op-article-head:end */
@media (min-width:728px) and (max-width:1439px){.sup__slots.sup__slots:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(232px,calc(50% - 6px)),1fr))!important;justify-content:stretch!important}.sup__slots.sup__slots > [data-partner]{width:auto!important;max-width:none!important}}
@media (min-width:640px) and (max-width:659px){.sup__slots:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}@media (min-width:740px) and (max-width:779px){.sup__slots:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}@media (min-width:1060px) and (max-width:1599px){.sup__slots:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}@media (min-width:1640px) and (max-width:1719px){.sup__slots:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}[data-partner] img{background:transparent!important}