/* slowyapp.com — Direction A "Trace" */
:root{
  --ground:#FCFCFB;      /* ground — white */
  --ink:#131513;         /* ink */
  --oxide:#9E1350;       /* accent */
  --green:#234C3E;       /* secondary */
  --plate:#F2F2F0;       /* mats and panels */
  --rule:#DEDEDA;
  --muted:#57594F;
  --ink-soft:#2C2E2B;
  --pale:#C9C9C4;
  --deep:#101815;
  --serif:'Spectral',Georgia,serif;
  --sans:'Libre Franklin',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --pad:clamp(18px,4vw,64px);
  --measure:35em;
}
*,*::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.65;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--oxide);text-decoration:none}
a:hover{color:var(--green);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);letter-spacing:-.02em;margin:0}
p{margin:0}
figure{margin:0}
ul,ol{margin:0}
.wrap{padding-inline:var(--pad)}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oxide)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--ground);padding:8px 12px;z-index:20}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:34px;height:34px}

/* ---------- masthead ---------- */
.masthead{padding-top:clamp(20px,3vw,40px)}
.mast-row{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:22px}
.brand{display:flex;align-items:center;gap:clamp(10px,1.1vw,18px);color:var(--oxide);text-decoration:none}
.brand:hover{text-decoration:none}
.brand svg{flex:none;width:clamp(86px,9.6vw,142px);height:auto;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.brand-txt{display:flex;flex-direction:column;gap:2px}
.brand-name{font-family:var(--serif);font-weight:800;font-size:clamp(38px,4.6vw,64px);line-height:.9;letter-spacing:-.03em;color:var(--ink)}
.brand-dom{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.standing{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--ink-soft);max-width:23em;margin-top:12px}

/* full index (homepage + hub) */
.index{flex:1 1 520px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:24px 30px;padding-top:6px}
.index-grp{display:flex;flex-direction:column;gap:7px;min-width:0}
.index-head{display:flex;align-items:center;gap:9px;color:var(--oxide);font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.25}
.index-grp a{color:var(--ink);font-size:15px}
.index-grp a.index-head{color:var(--oxide)}

/* compact bar (inner pages) */
.bar{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);padding:18px 0 14px}
.bar .brand svg{width:clamp(64px,7vw,88px)}
.bar .brand-name{font-size:clamp(34px,5vw,46px)}
.bar-nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.bar-nav a{color:var(--ink);display:flex;align-items:center;gap:7px}
.bar-nav a[aria-current="page"]{color:var(--oxide);border-bottom:2px solid var(--oxide)}
.bar-nav .ico{width:18px;height:18px}

/* ---------- homepage bands ---------- */
.band{padding-block:clamp(38px,5vw,66px)}
.band-tight{padding-block:clamp(26px,3vw,40px)}
.band-green{background:var(--green);color:var(--ground)}
.band-green h2,.band-green h3{color:var(--ground)}
.band-oxide{background:#A81351;color:#FFEAF2}
.band-oxide h2,.band-oxide h3{color:#fff}
.rec{border-top-color:#F3C9DA}
.band-head{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:baseline;border-bottom:1px solid currentColor;padding-bottom:13px;margin-bottom:clamp(22px,3vw,34px)}
.band-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:300}
.band-head .more{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.band-green .more,.band-oxide .more{color:inherit}

/* hero */
.hero{position:relative;margin-top:22px}
.hero-img{position:relative;aspect-ratio:16/7;min-height:min(280px,62vw);background:var(--pale);overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover}
.plinth{background:var(--ground);padding:24px clamp(18px,3vw,30px) 20px;display:flex;gap:14px;align-items:flex-start;max-width:660px}
.plinth h2{font-size:clamp(24px,3vw,34px);font-weight:400;line-height:1.14}
.plinth .brief{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin-top:8px}
.corner{width:16px;height:16px;flex:none;stroke:var(--oxide);fill:none;stroke-width:2}
.lead-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(24px,4vw,58px);align-items:start;padding-top:clamp(26px,4vw,50px)}
.lead-grid h1{font-size:clamp(38px,5.6vw,70px);font-weight:300;line-height:1.02;letter-spacing:-.025em}
.deck{font-family:var(--serif);font-size:clamp(18px,2vw,21px);line-height:1.48;color:var(--ink-soft)}
.deck+p{font-size:16px;line-height:1.68;color:var(--ink-soft);margin-top:14px}

/* three dials */
.dials{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(24px,3vw,48px)}
.dial{display:flex;flex-direction:column;gap:11px}
.dial-no{font-family:var(--mono);font-size:40px;line-height:1;color:#F09CBE}
.dial h3{font-size:25px;font-weight:600}
.dial p{font-size:15.5px;line-height:1.64;color:#CFE2D6}
.dial a{color:var(--ground);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* dense run */
.run{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.stack-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px 20px;padding:20px 0;border-top:1px solid var(--rule)}
.stack-row:first-child{border-top:2px solid var(--ink)}
.stack-row:last-child{border-bottom:2px solid var(--ink)}
.stack-row .n{font-family:var(--mono);font-size:15px;color:var(--oxide)}
.stack-row h3{font-size:23px;font-weight:600}
.stack-row p{font-size:15.5px;line-height:1.62;color:var(--ink-soft);margin-top:6px}
.stack-row .reach{font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--muted);margin-top:8px}
.side{background:var(--plate);padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:14px}
.side h3{font-size:22px;font-weight:600}
.side-list{list-style:none;padding:0;display:flex;flex-direction:column}
.side-list li{border-top:1px solid var(--rule);padding:11px 0}
.side-list li:first-child{border-top:none}
.side-list a{font-family:var(--serif);font-size:18px;color:var(--ink)}
.side-list span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}

/* quiet line */
.quiet{background:var(--deep);color:var(--ground)}
.quiet p{font-family:var(--serif);font-size:clamp(26px,3.6vw,44px);font-weight:300;font-style:italic;line-height:1.26;text-align:center;border-top:1px solid rgba(228,237,230,.32);border-bottom:1px solid rgba(228,237,230,.32);padding-block:clamp(26px,3.4vw,44px);text-wrap:balance}

/* record plate */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px 36px}
.rec{display:flex;flex-direction:column;gap:5px;border-top:1px solid rgba(255,255,255,.45);padding-top:11px}
.rec a{font-family:var(--serif);font-size:19px;font-weight:600;color:#fff}
.rec span{font-size:14.5px;line-height:1.55;color:#F3C9DA}

/* ---------- figures ---------- */
.article-figure{margin-block:34px}
.article-figure img{width:100%;height:auto;background:var(--pale)}
.article-figure figcaption{font-family:var(--serif);font-size:17px;line-height:1.5;padding-top:12px;max-width:28em}
.article-figure .credit{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:#74766E;margin-top:7px;font-style:normal}
/* treatment 1 — matted plate with drawn corner marks */
.fig-mat{background:var(--plate);padding:20px;position:relative}
.fig-mat .cm{position:absolute;width:18px;height:18px;stroke:var(--oxide);fill:none;stroke-width:2}
.fig-mat .cm-tl{left:7px;top:7px}
.fig-mat .cm-br{right:7px;bottom:7px}
.fig-mat figcaption{padding:14px 4px 0}
/* treatment 2 — full-bleed band, caption on a plinth */
.fig-bleed{margin-inline:calc(-1 * var(--pad));margin-block:40px}
.fig-bleed img{aspect-ratio:16/7;object-fit:cover;min-height:min(240px,60vw)}
.fig-bleed figcaption{background:var(--ground);margin-inline:var(--pad);margin-top:-58px;position:relative;max-width:560px;padding:20px 24px 16px;border-left:3px solid var(--oxide)}
/* treatment 3 — offset: image steps left, caption hangs right */
.fig-offset{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:0 24px;align-items:end}
.fig-offset img{border-top:2px solid var(--ink)}
.fig-offset figcaption{padding-bottom:6px;border-bottom:1px solid var(--rule)}
/* treatment 4 — inline chip inside the column */
.fig-chip{width:min(46%,290px);margin:6px 0 18px}
.fig-chip figcaption{font-size:15px;padding-top:9px}
.fig-chip .credit{margin-top:5px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px;margin-block:34px}
.gallery figure{background:var(--plate);padding:12px}
.gallery figcaption{font-family:var(--serif);font-size:15px;line-height:1.45;padding-top:9px}
.map-figure .map-slot{aspect-ratio:4/3;background:var(--plate);border:1px solid var(--rule)}

/* ---------- article ---------- */
.art-head{padding-top:clamp(26px,4vw,46px)}
.art-kicker{display:flex;align-items:center;gap:10px;color:var(--oxide);font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.art-head h1{font-size:clamp(34px,5vw,64px);font-weight:300;line-height:1.03;letter-spacing:-.03em;margin-top:16px;max-width:12em}
.art-head .lead{font-family:var(--serif);font-size:clamp(19px,2.2vw,23px);line-height:1.45;color:var(--ink-soft);margin-top:18px;max-width:26em}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:20px;border-top:1px solid var(--rule);padding-top:12px}
.prose{max-width:var(--measure);font-size:18.5px;line-height:1.72;color:#1D1F1C}
.prose>p+p{margin-top:20px}
.prose h2{font-size:clamp(24px,3vw,32px);font-weight:400;margin-top:44px;padding-top:14px;border-top:1px solid var(--rule)}
.prose h2+p{margin-top:16px}
.prose h3{font-size:21px;font-weight:600;margin-top:32px}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.prose::after{content:"";display:block;clear:both}
.wide{max-width:1180px}

/* notes-for-design material */
.notes-band{background:var(--plate);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding-block:clamp(24px,3vw,38px);margin-block:clamp(34px,4vw,52px)}
.notes-band.on-green{background:var(--green);color:var(--ground);border-color:var(--green)}
.notes-band.on-green h2,.notes-band.on-green .kicker{color:var(--ground)}
.notes-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.notes-head h2{font-size:clamp(21px,2.4vw,27px);font-weight:600}
.callout{background:var(--plate);border-left:4px solid var(--oxide);padding:20px 22px;margin-block:30px;font-size:17px;line-height:1.6}
.callout p+p{margin-top:12px}
.keylist{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:2px 30px}
.keylist li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:13px 0;border-top:1px solid var(--rule)}
.notes-band.on-green .keylist li{border-color:rgba(242,235,224,.35)}
.keylist .kn{font-family:var(--mono);font-size:13px;color:var(--oxide)}
.notes-band.on-green .keylist .kn{color:#F09CBE}
.keylist .kt{font-size:16px;line-height:1.55}
.keylist .kt b{font-family:var(--serif);font-weight:600;font-size:17.5px;display:block}
.timeline{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:0 26px}
.timeline li{border-top:2px solid currentColor;padding:14px 0 4px;display:flex;flex-direction:column;gap:7px}
.timeline .t-when{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--oxide)}
.notes-band.on-green .timeline .t-when{color:#F09CBE}
.timeline .t-what{font-size:16px;line-height:1.55}
.pullquote{margin-block:36px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding-block:22px}
.pullquote p{font-family:var(--serif);font-size:clamp(22px,2.8vw,30px);font-weight:300;font-style:italic;line-height:1.3}
.blockquote{margin-block:32px;padding-left:22px;border-left:3px solid var(--rule)}
.blockquote p{font-family:var(--serif);font-size:20px;line-height:1.45}
.blockquote cite{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--muted);margin-top:10px;font-style:normal}
.note{font-size:15.5px;line-height:1.6;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px;margin-block:26px;max-width:30em}

/* tables, stats, charts */
.datatable,.versus{width:100%;border-collapse:collapse;font-size:15.5px;margin-block:30px;display:block;overflow-x:auto}
.datatable th,.datatable td,.versus th,.versus td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.datatable thead th,.versus thead th{background:var(--deep);color:var(--ground);font-family:var(--sans);font-weight:600;font-size:14px;border-bottom:none}
.versus tbody th{font-family:var(--serif);font-size:16.5px;font-weight:600;width:26%}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:2px 24px;margin-block:30px}
.statblock{border-top:2px solid var(--oxide);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--serif);font-size:clamp(30px,4vw,44px);font-weight:600;line-height:1}
.stat-label{font-size:14.5px;line-height:1.5;color:var(--muted)}
.chart{margin-block:32px;background:var(--plate);padding:20px}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-family:var(--serif);font-size:16px;line-height:1.5;padding-top:14px;border-top:1px solid var(--rule);margin-top:14px}
.chart figcaption .credit{font-family:var(--mono);font-size:11.5px;color:#74766E;display:block;margin-top:6px}

/* cards / references */
.profile-grid,.org-grid,.further-grid{display:grid;gap:16px;margin-block:30px}
.profile-grid{grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.profile-card{background:var(--plate);padding:20px;display:flex;flex-direction:column;gap:9px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--pale)}
.profile-card h3{font-size:20px;font-weight:600}
.profile-card .p-role{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--oxide)}
.profile-card p{font-size:15.5px;line-height:1.6}
.profile-card .p-links{font-size:14.5px}
.profile-card .p-attr{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:auto}
.org-grid{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.org-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 14px;align-items:center;background:var(--plate);padding:14px 16px;border:1px solid var(--rule)}
.org-card .org-logo{grid-row:span 2;width:56px;height:56px;object-fit:contain;background:var(--ink)}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-name{font-family:var(--serif);font-size:17.5px;font-weight:600;color:var(--ink)}
.org-host{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.entity-ref{white-space:nowrap}
.further-grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.further-grid a{background:var(--plate);border-top:2px solid var(--oxide);padding:16px;font-family:var(--serif);font-size:18px;color:var(--ink)}
.related{margin-block:clamp(34px,4vw,54px);border-top:2px solid var(--ink);padding-top:16px}
.related-links{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:14px;margin-top:14px}
.related-links li{border-top:1px solid var(--rule);padding-top:12px}
.related-links a{font-family:var(--serif);font-size:19px;color:var(--ink)}
.related-links span{display:block;font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:5px}
.cat-list{list-style:none;padding:0;display:flex;flex-direction:column}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:2px solid var(--ink)}
.cat-list a{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,260px);gap:10px 26px;padding:22px 0;align-items:start;color:var(--ink)}
.cat-list a:hover{text-decoration:none;background:var(--plate)}
.cat-list .cn{font-family:var(--mono);font-size:28px;color:var(--oxide);line-height:1}
.cat-list h2{font-size:clamp(22px,2.6vw,30px);font-weight:400}
.cat-list .cb{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin-top:7px}
.cat-list .cthumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--pale)}
.cat-list li:first-child{border-top:2px solid var(--ink)}

/* expander for long lists */
.expander{margin-top:14px}
.expander summary{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--oxide);cursor:pointer}
.expander[open] summary{margin-bottom:10px}

/* ---------- supporters ---------- */
.supporters{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sup-head{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.sup-head h2{font-size:clamp(20px,2.2vw,26px);font-weight:600}
.sup-head p{font-size:15px;color:var(--muted);max-width:27em}
.sup-group{display:flex;flex-wrap:wrap;gap:14px}
.sup-group+.sup-group{margin-top:14px}
.sponsor{flex:0 0 auto;width:244px;height:76px;background:var(--deep);display:flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--ink)}
.sponsor:hover{background:#1C2A23;text-decoration:none}
.sponsor img{max-height:38px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor.feat{width:300px;height:96px;padding:14px 20px}
.sponsor.feat img{max-height:48px}
.sup-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-top:16px}

/* ---------- footer (compact) ---------- */
.foot{background:var(--deep);color:var(--pale);margin-top:clamp(36px,4vw,60px);padding-block:22px 20px}
.foot a{color:var(--pale)}
.foot-row{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid rgba(252,252,251,.16)}
.foot .brand svg{width:52px}
.foot .brand-name{color:var(--ground);font-size:26px}
.foot .brand-dom{color:#8F9A92}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.foot-nav a{display:flex;align-items:center;gap:7px}
.foot-nav .ico{width:16px;height:16px;color:#F09CBE}
.foot-end{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;align-items:center;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#93958C}
.foot-util{display:flex;gap:18px}

/* ---------- utility / static pages ---------- */
.page-head{padding-top:clamp(28px,4vw,52px);border-bottom:2px solid var(--ink);padding-bottom:22px}
.page-head h1{font-size:clamp(36px,6vw,76px);font-weight:300;line-height:.98;letter-spacing:-.035em}
.page-head .lead{font-family:var(--serif);font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--ink-soft);margin-top:16px;max-width:28em}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(20px,3vw,34px);padding-top:clamp(26px,3vw,40px)}
.hub-card{background:var(--plate);padding:22px;display:flex;flex-direction:column;gap:12px}
.hub-card h2{font-size:24px;font-weight:600;display:flex;align-items:center;gap:11px}
.hub-card>p{font-size:15.5px;color:var(--ink-soft)}
.hub-card ul{list-style:none;padding:0;display:flex;flex-direction:column}
.hub-card li{border-top:1px solid var(--rule);padding:9px 0}
.hub-card a{font-family:var(--serif);font-size:17.5px;color:var(--ink)}
.hub-card .sec-link{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--oxide)}
.sg-block{border-top:2px solid var(--ink);margin-top:44px;padding-top:16px}
.sg-block>h2{font-size:26px;font-weight:600}
.sg-block>p.note{margin-top:8px}

@media (max-width:900px){
  .run{grid-template-columns:minmax(0,1fr)}
  .fig-offset{grid-template-columns:minmax(0,1fr)}
  .fig-offset figcaption{border-bottom:none;border-top:1px solid var(--rule);padding-top:12px}
  .cat-list a{grid-template-columns:56px minmax(0,1fr)}
  .cat-list .cthumb{grid-column:1 / -1;max-width:none;margin-top:4px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .prose{font-size:17.5px}
  .fig-chip{float:none;width:100%;margin:24px 0}
  .fig-bleed figcaption{margin-top:0;max-width:none}
  .plinth{max-width:none}
  .hero-img{aspect-ratio:4/3;min-height:0}
  .sponsor{width:100%;height:76px}
  .sponsor.feat{width:100%;height:92px}
  .art-head h1{max-width:none}
  .keylist li{grid-template-columns:26px minmax(0,1fr);gap:10px}
}
@media print{
  .foot-index,.supporters,.bar-nav{display:none}
  body{background:#fff}
}

/* homepage masthead menu — six sections on one row; the full 28-entry index lives in the footer and on the browse page */
.masthead .mast-row{align-items:flex-end;justify-content:space-between;border-bottom:none;padding-bottom:14px}
.masthead .standing{margin:0 0 6px;text-align:right;max-width:20em}
.mast-menu{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.mast-menu a{display:flex;align-items:center;gap:9px;padding:14px clamp(14px,1.7vw,22px);color:var(--ink);border-left:1px solid var(--rule);flex:1 1 auto;min-width:0}
.mast-menu a:first-child{border-left:none;padding-left:0}
.mast-menu a:hover{text-decoration:none;background:var(--plate);color:var(--oxide)}
.mast-menu .ico{width:20px;height:20px;color:var(--oxide)}
.mast-menu .mm-no{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--oxide)}
.mast-menu .mm-t{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.mast-menu .mm-all{flex:0 0 auto;background:var(--ink)}
.mast-menu .mm-all .mm-t{color:var(--ground);font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.mast-menu .mm-all:hover{background:#A81351}
.mast-menu .mm-all:hover .mm-t{color:#fff}
@media (max-width:900px){
  .masthead .standing{text-align:left;margin-top:10px}
  .mast-menu a{flex:1 1 46%;padding-left:0;border-left:none;border-top:1px solid var(--rule)}
  .mast-menu a:nth-child(-n+2){border-top:none}
  .mast-menu .mm-all{flex:1 1 100%;justify-content:center;padding:13px 0}
}
@media (max-width:520px){
  .mast-menu a{flex:1 1 100%;border-top:1px solid var(--rule)}
  .mast-menu a:first-child{border-top:none}
}
/* dial marks, tighter side list, bufferbloat band, record icons */
.dial-mark{display:flex;align-items:center;gap:12px;color:#F09CBE}
.dial-mark .ico-lg{width:30px;height:30px}
.dial-no{font-size:26px}
.side-list--tight li{padding:9px 0}
.side-list--tight a{font-size:17px}
.bb-text{display:flex;flex-direction:column;gap:16px;align-self:center}
.bb-text h2{font-size:clamp(30px,4vw,50px);font-weight:300;line-height:1.05}
.bb-text .related-links{grid-template-columns:minmax(0,1fr);gap:0}
.bb-text .related-links li{padding:11px 0;border-top:1px solid var(--rule)}
.rec{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:auto auto;gap:5px 11px;align-items:start}
.rec .ico{grid-column:1;grid-row:1;color:#F3C9DA;align-self:center}
.rec a{grid-column:2;grid-row:1}
.rec span{grid-column:2;grid-row:2}
/* hero stage — the lead frame runs full width behind the masthead */
.hero-stage{position:relative;overflow:hidden;background:var(--deep);color:var(--ground);min-height:clamp(500px,84vh,880px);display:flex;flex-direction:column;justify-content:space-between}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-stage::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(12,18,15,.8) 0%,rgba(12,18,15,.58) 24%,rgba(12,18,15,.26) 44%,rgba(12,18,15,.06) 62%,rgba(12,18,15,.4) 100%),
  linear-gradient(96deg,rgba(12,18,15,.5) 0%,rgba(12,18,15,.16) 44%,rgba(12,18,15,0) 66%)}
.hero-stage>.masthead,.hero-stage>.hero-foot{position:relative;z-index:2}
.over{padding-top:clamp(18px,2.6vw,34px);padding-bottom:2px}
.over::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;background:linear-gradient(180deg,rgba(12,18,15,.45) 0%,rgba(12,18,15,.22) 70%,rgba(12,18,15,0) 100%);pointer-events:none}
.over{isolation:isolate}
.over .mast-menu{backdrop-filter:blur(4px);background:linear-gradient(180deg,rgba(12,18,15,.3),rgba(12,18,15,.5))}
.over .brand{color:#F09CBE}
.over .brand-name{color:var(--ground)}
.over .brand-dom{color:#B9C4BC}
.over .standing{color:#DCE2DD}
.over .mast-menu{border-top-color:rgba(252,252,251,.55);border-bottom-color:rgba(252,252,251,.55)}
.over .mast-menu a{color:var(--ground);border-left-color:rgba(252,252,251,.3)}
.over .mast-menu a:hover{background:rgba(252,252,251,.14);color:#fff}
.over .mast-menu .mm-no,.over .mast-menu .ico{color:#F09CBE}
.over .mast-menu a:hover .mm-no,.over .mast-menu a:hover .ico{color:#FFC6DC}
.over .mast-menu .mm-all{background:#A81351}
.over .mast-menu .mm-all .mm-t{color:#fff}
.hero-foot{padding-bottom:clamp(18px,3vw,40px)}
.hero-foot .plinth{background:rgba(12,18,15,.62);backdrop-filter:blur(7px);color:var(--ground);box-shadow:none;border-left:3px solid #A81351;padding:22px clamp(18px,2.4vw,28px) 18px}
.hero-foot .plinth h2 a{color:var(--ground)}
.hero-foot .plinth h2 a:hover{color:#F09CBE;text-decoration:none}
.hero-foot .plinth .kicker{color:#F09CBE}
.hero-foot .plinth .brief{color:#D3DAD4}
.hero-foot .plinth .note{color:#AEB8B0;border-top-color:rgba(252,252,251,.22)}
.hero-foot .plinth .credit{color:#8C978F}
.hero-foot .plinth .corner{stroke:#F09CBE}
@media (max-width:640px){
  .hero-stage{min-height:0;padding-bottom:0}
  .hero-stage::after{background:linear-gradient(180deg,rgba(16,24,21,.92) 0%,rgba(16,24,21,.7) 50%,rgba(16,24,21,.86) 100%)}
  .hero-foot{padding-top:30px}
}
.plinth .note .credit{display:block;margin-top:6px}
/* ---------- article body rhythm ---------- */
.art-body{max-width:1160px;margin-inline:auto;padding-inline:var(--pad)}
.art-body .prose{max-width:35em;margin-inline:auto;font-size:18.5px;line-height:1.75}
.art-body .prose+.prose{margin-top:26px}
.art-body>.article-figure,.art-body>.pullquote{width:min(100%,880px);margin-inline:auto}
.art-body>.article-figure{margin-block:clamp(38px,5vw,68px)}
.art-body>.pullquote{margin-block:clamp(42px,5.5vw,74px);max-width:min(100%,820px);border-top-width:2px;border-bottom-width:2px}
.art-body>.pullquote p{text-align:center;text-wrap:balance}
.art-body>.notes-band{margin-inline:calc(50% - 50vw);width:100vw;margin-block:clamp(52px,6.5vw,92px);padding-block:clamp(32px,4vw,56px)}
.art-body>.notes-band .wrap{max-width:1160px;margin-inline:auto}
.art-body>.notes-band:first-child,.art-body>.article-figure:first-child{margin-top:0}
.art-body>*:last-child{margin-bottom:0}
.fig-strip img{aspect-ratio:21/9;object-fit:cover}
.fig-strip figcaption{border-top:1px solid var(--rule);padding-top:12px;margin-top:14px}
.keylist--inprose{grid-template-columns:minmax(0,1fr);margin-block:26px}
.article-figure.fig-bleed{margin-inline:0;margin-block:clamp(26px,3vw,42px) 0}
.fig-bleed figcaption{margin-inline:auto;max-width:1160px;padding-inline:calc(var(--pad) + 24px)}
.prose>h2:first-child{margin-top:0;border-top:none;padding-top:0}
@media (max-width:640px){
  .art-body{padding-inline:var(--pad)}
  .art-body>.notes-band{margin-inline:calc(-1 * var(--pad));width:auto}
  .fig-strip img{aspect-ratio:16/9}
}

/* ---------- mobile audit refinements ---------- */
@media (max-width:640px){
  /* fine print a notch up */
  .brand-dom,.foot-end,.org-host,.profile-card .p-attr{font-size:12.5px}
  .article-figure .credit,.article-figure figcaption .credit,.chart figcaption .credit,.fig-chip .credit,.plinth .credit{font-size:12.5px}
  .art-meta,.bar-nav,.foot-nav,.kicker{font-size:12.5px}
  /* comfortable hit areas */
  .mast-menu a{min-height:48px}
  .bar-nav a,.foot-nav a,.foot-end a,.index-grp a,.hub-card a,.side-list a,.related-links a,.rec a,.dial a,.more,.sec-link,a.kicker,.expander summary{min-height:40px;display:flex;align-items:center;gap:7px}
  .foot-end{gap:4px 20px}
  .related-links li,.side-list li,.hub-card li{padding-block:6px}
  /* full-bleed caption sits on the page gutter, not a hanging indent */
  .fig-bleed figcaption{padding:18px var(--pad) 16px;margin-inline:0}
  /* charts keep legible labels: scroll rather than shrink */
  .chart{padding:14px;overflow-x:auto}
  .chart svg{min-width:520px}
  .chart figcaption{position:sticky;left:0}
  /* tighten the stacked index so content arrives sooner */
  .mast-menu{padding-block:2px}
}

/* 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-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sup-group .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-nav-collapse: this nav printed 348px 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 "bracket", seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (18px measured) the button carries the build's
   gutter (clamp(18px,4vw,64px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (860px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-disclose{display:none}
@media (max-width:860px){
  .nav-disclose{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-inline:auto;justify-self:center;border:0;padding:10px 4px;letter-spacing:.2em;gap:12px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .nav-disclose::before{content:"[";opacity:.55}
  .nav-disclose::after{content:"]";opacity:.55}
  .nav-disclose-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .mast-menu{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-disclose-c:checked ~ .mast-menu{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .bar-nav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-disclose-c:checked ~ .bar-nav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .bar:has(> .nav-disclose){display:flow-root}
  .masthead.wrap.over:has(> .nav-disclose){display:flow-root}
  .nav-disclose:not(:has(~ .mast-menu)):not(:has(~ .bar-nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1116px at 390, 16% of the whole page. Two columns bring it to
   544px (51% shorter). Checked before writing: no new overflow, smallest mark still
   127px wide, longest blurb 0 lines, tile heights 76-92px.
   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.
   Only the tier(s) that were one-per-row are touched (.sup-group), 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-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sup-group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-group > * *{min-width:0!important;max-width:100%}
    .sup-group img,.sup-group svg{max-width:100%;height:auto}
}

/* op-article-width: the article column was capped at 648px (75 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 35em (declared in .art-body .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{max-width:min(884px, 100%)!important}
}
@media (min-width:1600px){
  div.art-body div.prose{max-width:min(clamp(884px, 61.389vw, 1061px), 100%)!important}
  div.art-body div.prose > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.article-figure.fig-bleed > img,
  div.art-body > figure.article-figure.fig-mat > img,
  div.art-body > figure.article-figure.fig-strip > img,
  div.hero-stage > div.hero-bg > img,
  div.run > figure.article-figure.fig-mat > img,
  li > a > img.cthumb){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1439px){.sup-group.sup-group:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(244px,calc(50% - 7px)),1fr))!important;column-gap:14px!important;row-gap:14px!important;justify-content:stretch!important;align-items:stretch!important}.sup-group.sup-group > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}