/* ==========================================================================
   Estetica Design Forum — Plate. One stylesheet.
   Palette roles: ground · ink · accent (cobalt) · secondary (chartreuse) · quiet
   ========================================================================== */

:root{
  --ground:#F0F2F0;      /* page ground */
  --ink:#14161A;         /* text, rules, dark panels */
  --accent:#2A45C8;      /* cobalt — kickers, panels, links */
  --secondary:#B8D62B;   /* chartreuse — section grounds, marks */
  --quiet:#6E7370;       /* credits, meta */
  --mat:#E6E7E2;         /* figure mat */
  --rule:#C9CBC6;        /* hairlines */
  --ink-soft:#22252A;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --text:'Source Serif 4',Georgia,serif;
  --gut:clamp(20px,4.5vw,44px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--text);font-size:19px;line-height:1.6;
  text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.2em}
hr{border:0;border-top:1px solid var(--rule);margin:0}
::selection{background:var(--secondary);color:var(--ink)}

.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut)}
.measure{max-width:68ch}
.band{border-bottom:1px solid var(--ink)}
.band--quiet{border-bottom:1px solid var(--rule)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- icons: one drawing system, 24px grid, currentColor ---------- */
.ico{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;overflow:visible}
.ico--nav{font-size:15px}
.ico--kicker{font-size:16px}
.ico--block{font-size:26px}
.ico--big{font-size:64px}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--ink);background:var(--ground)}
.masthead__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:24px 0 18px}
.wordmark{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:700;
  font-size:clamp(22px,3.2vw,30px);letter-spacing:-.03em;line-height:1}
.wordmark .ico{font-size:1.05em;color:var(--accent)}
.masthead__line{font-size:15px;color:var(--quiet);max-width:34ch;text-align:right;line-height:1.35}
.nav{display:flex;flex-wrap:nowrap;align-items:stretch;
  border-top:1px solid var(--ink);font-family:var(--display);font-size:14px;font-weight:600}
.nav__scroll{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav__scroll::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:13px 17px 14px;
  white-space:nowrap;border-right:1px solid var(--rule);transition:background .12s linear}
.nav a:last-child{border-right:0}
.nav a .ico{font-size:18px;align-self:center;position:relative;top:0}
.nav__no{font-size:11px;letter-spacing:.1em;color:var(--quiet);font-variant-numeric:tabular-nums;line-height:1}
.nav__label{line-height:1}
.nav a:hover{background:var(--secondary);color:var(--ink)}
.nav a:hover .nav__no{color:#4A5230}
.nav a[aria-current="page"]{background:var(--accent);color:var(--ground)}
.nav a[aria-current="page"] .nav__no{color:rgba(240,242,240,.72)}
.nav__end{color:var(--accent);border-left:1px solid var(--rule);border-right:0;margin-left:0;flex:0 0 auto}

/* ---------- kickers / meta ---------- */
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.kicker--quiet{color:var(--quiet)}
.meta{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--quiet)}

/* ---------- homepage: opener ---------- */
.opener__plate{background:var(--ink);position:relative}
.opener__plate img{width:100%;height:clamp(300px,52vw,620px);object-fit:cover}
.opener__body{display:grid;grid-template-columns:1fr 400px;gap:clamp(24px,4vw,56px);
  padding:34px 0 48px}
.opener__title{font-size:clamp(38px,6.4vw,74px);letter-spacing:-.035em;line-height:.95;margin:14px 0 0}
.opener__deck{font-size:clamp(18px,2vw,20px);line-height:1.45;margin:0 0 18px}
.credit-line{border-top:1px solid var(--rule);padding-top:11px;font-size:14px;color:var(--quiet);line-height:1.4}
.credit-line strong{font-family:var(--display);font-weight:600;color:var(--ink);display:block;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase}

/* ---------- homepage: dense run ---------- */
.run{display:grid;grid-template-columns:repeat(3,1fr)}
.run>article{padding:32px var(--gut) 40px;border-right:1px solid var(--rule);display:flex;flex-direction:column}
.run>article:last-child{border-right:0}
.run h2{font-size:clamp(24px,2.2vw,29px);line-height:1.03;letter-spacing:-.025em;margin:0 0 10px}
.run p{font-size:16.5px;line-height:1.45;color:var(--ink-soft);margin:0}
.run .kicker{margin:0 0 10px}

/* ---------- homepage: quiet line ---------- */
.statement{padding:clamp(46px,7vw,74px) 0}
.statement p{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.6vw,40px);
  line-height:1.15;letter-spacing:-.025em;max-width:26ch;margin:0;max-width:52ch}

/* ---------- homepage: sections hub ---------- */
.hub{background:var(--secondary)}
.hub__inner{padding:40px 0 48px}
.hub__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink);
  border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.hub__grid a{background:var(--secondary);padding:20px 22px 26px;display:block}
.hub__grid a:hover{background:#C3E03A;color:var(--ink)}
.hub__grid h3{font-size:23px;font-weight:600;letter-spacing:-.02em;margin:14px 0 6px}
.hub__grid p{font-size:15.5px;line-height:1.4;color:#2C3320;margin:0}

/* ---------- homepage: plate feature + compact index ---------- */
.plate{display:grid;grid-template-columns:1fr 340px;gap:clamp(24px,3.4vw,44px);
  padding:clamp(36px,5vw,56px) 0 clamp(40px,5vw,60px);align-items:start}
.plate h2{font-size:clamp(28px,3.4vw,38px);line-height:1.02;letter-spacing:-.03em;margin:12px 0 14px}
.rule-accent{height:3px;background:var(--accent);margin-bottom:16px}
.rule-secondary{height:3px;background:var(--secondary);margin-bottom:16px}
.compact{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ink)}
.compact a{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.compact a:last-child{border-bottom:0}
.compact .ico{font-size:16px;color:var(--accent);position:relative;top:2px}
.compact span{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.15}

/* ==========================================================================
   FIGURE SYSTEM — three treatments, one drawing system
   ========================================================================== */
figure{margin:0}
figcaption{font-size:17px;line-height:1.4}
.fig-credit{display:block;margin-top:6px;font-size:12.5px;letter-spacing:.02em;color:var(--quiet);
  font-family:var(--display);font-weight:500}

/* 1 · bleed — breaks the measure, caption in a column under a cobalt rule */
.fig-bleed{background:var(--ink)}
.fig-bleed img{width:100%;height:clamp(240px,42vw,520px);object-fit:cover}
.fig-bleed figcaption{background:var(--ground);padding:18px 0 0;max-width:56ch}
.fig-bleed .fig-cap-inner{border-top:3px solid var(--accent);padding-top:12px}

/* 2 · mat — photograph sits on a mat, caption inside the mat */
.fig-mat{background:var(--mat);padding:clamp(12px,1.4vw,20px)}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{padding:14px 2px 2px;max-width:52ch}

/* 3 · offset — image flush, caption hangs in the margin beside it */
.fig-offset{display:grid;grid-template-columns:1fr 300px;gap:clamp(20px,3vw,40px);align-items:start}
.fig-offset img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-offset figcaption{border-top:3px solid var(--secondary);padding-top:12px}

/* generic component name used by the styleguide */
.article-figure{background:var(--mat);padding:16px}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{padding:14px 2px 2px;max-width:52ch}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gallery figure{background:var(--mat);padding:12px}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gallery figcaption{font-size:14px;padding-top:10px}

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article-head{padding:36px 0 34px}
.article-head h1{font-size:clamp(34px,5.6vw,68px);line-height:.96;letter-spacing:-.035em;margin:16px 0 0;max-width:22ch}
.lead{font-size:clamp(19px,2.1vw,23px);line-height:1.42;margin:22px 0 0;max-width:44ch;
  font-family:var(--text);font-weight:600}
.article-body{padding:clamp(28px,4vw,44px) 0 0}
.article-body h2{font-family:var(--display);font-size:clamp(24px,2.6vw,31px);font-weight:600;
  letter-spacing:-.025em;line-height:1.06;margin:0 0 18px;max-width:30ch}
.article-body .measure p{font-size:19px;line-height:1.62;color:var(--ink-soft)}
.article-body section{padding-bottom:8px}
.article-body a{color:var(--accent);border-bottom:1px solid rgba(42,69,200,.35)}
.article-body a:hover{background:var(--secondary);color:var(--ink);border-bottom-color:var(--ink)}
.flow>*+*{margin-top:clamp(30px,3.6vw,46px)}
.article-related{padding:clamp(34px,4vw,52px) 0 0;border-top:1px solid var(--rule);margin-top:clamp(36px,4.5vw,58px)}
.article-related>.kicker{display:block;margin-bottom:16px}
.article-related__all{margin:22px 0 56px}

.pullquote{margin:0;background:var(--accent);color:var(--ground);padding:clamp(24px,3vw,38px)}
.pullquote p{font-family:var(--display);font-size:clamp(24px,3vw,33px);line-height:1.14;
  letter-spacing:-.02em;font-weight:600;margin:0;max-width:34ch}
.blockquote{margin:0;border-left:3px solid var(--ink);padding:4px 0 4px 22px}
.blockquote p{font-size:21px;line-height:1.4;margin:0 0 8px}
.blockquote cite{font-style:normal;font-family:var(--display);font-size:14px;font-weight:600;color:var(--quiet)}
.callout{margin:0;background:var(--mat);border-top:3px solid var(--ink);padding:22px 24px}
.callout p{margin:0;font-size:18px;line-height:1.45}
.note{font-size:16px;line-height:1.45;color:var(--quiet);border-left:2px solid var(--secondary);
  padding-left:14px;max-width:52ch}

/* the Notes-for-Design material, shipped as ink plates that interrupt the prose */
.plate-note{background:var(--ink);color:var(--ground)}
.plate-note__inner{padding:clamp(28px,3.6vw,44px) 0}
.plate-note h3{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.025em;
  line-height:1.05;margin:12px 0 20px;max-width:26ch}
.plate-note .kicker{color:var(--secondary)}
.plate-note ul{list-style:none;padding:0;margin:0;columns:2;column-gap:clamp(24px,4vw,56px)}
.plate-note li{break-inside:avoid;padding:12px 0;border-top:1px solid #33363A;
  font-size:16.5px;line-height:1.45;color:#D3D6D1}
.plate-note li b,.plate-note li strong{color:var(--ground);font-weight:600}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.statblock{background:var(--ground);padding:20px 22px 22px}
.stat-num{display:block;font-family:var(--display);font-size:44px;font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--accent)}
.stat-label{display:block;margin-top:8px;font-size:15px;line-height:1.35;color:var(--ink-soft)}

.timeline{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--rule)}
.t-when{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--accent);line-height:1.3}
.t-what{font-size:17px;line-height:1.45}

table{border-collapse:collapse;width:100%}
.versus,.datatable{font-size:16.5px}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.versus th,.datatable th{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--quiet);border-bottom:1px solid var(--ink)}
.versus tbody th{text-transform:none;font-size:16px;letter-spacing:0;color:var(--ink);width:34%}
.table-scroll{overflow-x:auto}

.chart figcaption{font-size:15px;color:var(--quiet);padding-top:10px}
.chart svg{width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--display);font-size:12px;fill:var(--ink)}

/* cards & references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.profile-card{background:var(--mat);padding:20px}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:22px;font-weight:600;letter-spacing:-.02em}
.profile-card .p-role{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin:6px 0 10px}
.profile-card p{font-size:16px;line-height:1.45}
.profile-card.no-photo{border-top:3px solid var(--ink)}
.p-links a{color:var(--accent)}
.p-attr{font-size:13px;color:var(--quiet)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.org-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--rule);background:var(--ground)}
.org-card:hover{border-color:var(--ink)}
.org-logo{max-height:34px;width:auto;object-fit:contain}
.org-name{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.015em}
.org-host{font-size:14px;color:var(--quiet)}
.entity-ref{color:var(--accent);border-bottom:1px solid rgba(42,69,200,.35)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.further-grid a{background:var(--ground);padding:20px 22px 24px;font-family:var(--display);
  font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.12;display:block}
.further-grid a:hover{background:var(--mat)}

.related-links{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.related-links li{background:var(--ground)}
.related-links a{display:flex;gap:12px;align-items:baseline;padding:20px 22px 24px;height:100%}
.related-links a:hover{background:var(--mat)}
.related-links .ico{font-size:16px;color:var(--accent);position:relative;top:2px}
.related-links span{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.15}

/* ==========================================================================
   CATEGORY / INDEX
   ========================================================================== */
.section-head{display:grid;grid-template-columns:1fr 400px;gap:clamp(24px,4vw,56px);
  padding:44px 0 40px;align-items:end}
.section-head h1{font-size:clamp(40px,7vw,84px);line-height:.92;letter-spacing:-.04em}
.section-head .ico--big{color:var(--accent)}
.section-head__title{display:flex;gap:22px;align-items:flex-start}
.section-head p{font-size:19px;line-height:1.45;margin:0}

.cat-list{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list>li>a{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(20px,3vw,44px);
  padding:22px 0 26px;align-items:start}
.cat-list>li>a:hover{background:var(--mat)}
.cat-list h2{font-size:clamp(24px,2.8vw,32px);line-height:1.02;letter-spacing:-.028em;font-weight:600;max-width:24ch}
.cat-list p{font-size:16.5px;line-height:1.5;color:var(--ink-soft);margin:0}
.cat-list .thumb{background:var(--mat);padding:10px}
.cat-list .thumb img{aspect-ratio:16/10;object-fit:cover;width:100%}
.cat-grid{display:grid;grid-template-columns:168px minmax(240px,1fr);gap:22px}

.index-group{padding:32px 0 8px}
.index-group>.kicker{margin-bottom:14px}

/* ==========================================================================
   COLOPHON — supporters. Homepage only, 12 slots, name set as type.
   ========================================================================== */
.colophon{background:var(--ink);color:var(--ground)}
.colophon__inner{padding:clamp(32px,4vw,50px) 0 clamp(36px,4vw,54px)}
.colophon__head{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;
  border-bottom:1px solid #33363A;padding-bottom:14px;margin-bottom:26px}
.colophon__head .kicker{color:var(--secondary)}
.colophon__head p{margin:0;font-size:15px;color:#9A9E98;max-width:58ch}
.colophon__group+.colophon__group{margin-top:36px;padding-top:30px;border-top:1px solid #33363A}
.colophon__group h3{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#9A9E98;margin:0 0 20px}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,252px));gap:20px 22px;
  justify-content:start}
.sponsor{display:flex;flex-direction:column;gap:10px;background:transparent;
  border-top:1px solid #3A3E42;padding:16px 0 4px}
.sponsor:hover{background:transparent;color:var(--ground)}
.sponsor:hover .sponsor-name{color:var(--secondary)}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-name{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.sponsor-blurb{font-size:15px;line-height:1.45;color:#A9ADA8;min-width:200px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--ground)}
.foot__inner{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;padding:38px 0 20px}
.foot h4{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--quiet);margin:0 0 12px}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:16px}
.foot__mark{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;
  font-size:21px;letter-spacing:-.025em}
.foot__mark .ico{color:var(--accent);font-size:22px}
.foot p{font-size:15.5px;line-height:1.45;color:var(--quiet);max-width:40ch;margin:14px 0 0}
.foot__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding:16px 0 30px;font-size:14px;color:var(--quiet)}

/* ==========================================================================
   SIMPLE PAGES
   ========================================================================== */
.page-head{padding:48px 0 26px}
.page-head h1{font-size:clamp(38px,6vw,66px);line-height:.96;letter-spacing:-.035em}
.page-body{padding:0 0 56px}
.page-body h2{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em;margin:34px 0 14px}
.page-body a{color:var(--accent)}
.err{padding:clamp(56px,10vw,120px) 0}
.err h1{font-size:clamp(44px,9vw,96px);line-height:.92;letter-spacing:-.04em;max-width:18ch}
.err p{font-size:21px;margin:22px 0 0;max-width:44ch}
.err .kicker{margin-bottom:18px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  .nav{font-size:13px}
  .nav a{padding:13px 12px 14px;gap:8px}
  .nav a .ico{font-size:16px}
  .nav__no{display:none}
  .nav__scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    scroll-snap-type:x proximity}
  .nav__scroll a{scroll-snap-align:start}
}
@media (max-width:1080px){
  .run{grid-template-columns:1fr 1fr}
  .run>article:nth-child(2){border-right:0}
  .run>article:nth-child(3){border-top:1px solid var(--rule)}
  .hub__grid{grid-template-columns:1fr 1fr}
  .foot__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  body{font-size:18px}
  .masthead__top{flex-direction:column;align-items:flex-start;gap:10px}
  .masthead__line{text-align:left;max-width:46ch}
  .nav{font-size:13.5px}
  .nav a{padding:11px 11px 12px;gap:7px}
  .nav a .ico{font-size:16px}
  .nav__end{border-left:1px solid var(--rule)}
  .opener__body,.plate,.fig-offset,.section-head,.cat-list>li>a,.cat-grid{grid-template-columns:1fr}
  .opener__body{padding:26px 0 36px}
  .plate-note ul{columns:1}
  .cat-list .thumb{max-width:340px}
  .section-head{padding:32px 0 28px}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .foot__inner{grid-template-columns:1fr}
  .sponsor-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media (max-width:620px){
  .run{grid-template-columns:1fr}
  .run>article{border-right:0;border-top:1px solid var(--rule)}
  .run>article:first-child{border-top:0}
  .hub__grid{grid-template-columns:1fr}
  .statement p{font-size:clamp(23px,6vw,30px)}
  .article-head h1,.opener__title{letter-spacing:-.03em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ==========================================================================
   ODDS AND ENDS
   ========================================================================== */
.measure-plus{max-width:88ch}
.chart.bar rect.v{fill:var(--accent)}
.chart.bar rect.v2{fill:var(--secondary)}
.chart.bar line,.chart.line line{stroke:var(--rule)}
.chart.line path{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart.line circle{fill:var(--ink)}
.chart.donut circle.track{fill:none;stroke:var(--rule);stroke-width:22}
.chart.donut circle.arc{fill:none;stroke:var(--accent);stroke-width:22;stroke-linecap:butt}
.chart text.lbl{font-size:11.5px;fill:var(--ink-soft)}
.chart text.big{font-family:var(--display);font-size:26px;font-weight:700;fill:var(--ink)}

/* internal styleguide scaffolding only */
.sg-head{background:var(--ink);color:var(--ground);padding:26px 0}
.sg-head h1{font-size:clamp(28px,4vw,44px)}
.sg-head p{margin:10px 0 0;color:#9A9E98;font-size:16px;max-width:60ch}
.sg-sec{padding:34px 0;border-bottom:1px solid var(--rule)}
.sg-sec>h2{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 20px;font-family:var(--display)}
.sg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:860px){.sg-grid2{grid-template-columns:1fr}}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.sg-swatch{border:1px solid var(--rule)}
.sg-swatch i{display:block;height:72px}
.sg-swatch b,.sg-swatch span{display:block;padding:0 12px}
.sg-swatch b{font-family:var(--display);font-size:14px;padding-top:10px}
.sg-swatch span{font-size:13px;color:var(--quiet);padding-bottom:10px}

/* 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. */
.sponsor-grid .sponsor.sponsor img{box-sizing:border-box!important;height:44px!important;display:block!important;width:100%!important;padding:8px 12px!important;background:#121013!important;box-sizing:border-box!important}


/* sp-tile-pad: the tiles had no padding at all — a transparent ground with a 1px rule on top, so
   mark and copy ran to the tile edge. */
.sponsor{padding:16px 18px!important}

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 703px at 390, 9% 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,
   measured 703 -> 497px (29% 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:clamp(8px,2.22vw,32px)!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   2180px at 390, 29% of the whole page. Two columns bring it to
   1320px (39% shorter). Checked before writing: no new overflow, smallest mark still
   131px wide, longest blurb 3 lines, tile heights 188-211px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.sponsor-grid), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px!important}
    .sponsor-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid > * *{min-width:0!important;max-width:100%}
    .sponsor-grid img,.sponsor-grid svg{max-width:100%;height:auto}
  .sponsor-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 652px (78 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 68ch (declared in .measure) 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){
  article.article-body.flow div.measure{max-width:min(854px, 100%)!important}
}
@media (min-width:1600px){
  article.article-body.flow div.measure{max-width:min(clamp(854px, 59.306vw, 1025px), 100%)!important}
  article.article-body.flow div.measure > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (652px) and was left behind when the text went to 854px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  div.article-head p.lead{max-width:min(686px, 100%)!important}
}
@media (min-width:1600px){
  div.article-head p.lead{max-width:min(calc(clamp(686px, 47.639vw, 823px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-hover-pad */
.cat-list > li > a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
@media (min-width:984px) and (max-width:1199px){.sponsor-grid.sponsor-grid:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(252px,calc(50% - 11px)),1fr))!important;justify-content:stretch!important}.sponsor-grid.sponsor-grid > [data-partner]{width:auto!important;max-width:none!important}}
[data-partner] img{background:transparent!important}
:root body [data-partner][data-partner] img{background:transparent!important}