/* kaanet.com — "The Pot" ------------------------------------------------- */
:root{
  --paper:#f4f2ec;      /* ground  */
  --paper-2:#e8e5de;    /* ground, recessed */
  --ink:#17181a;        /* ink     */
  --red:#c0212e;        /* accent  — taegeuk red */
  --blue:#0047a0;       /* secondary — taegeuk blue */
  --rule:#d6d2c9;
  --muted:#6f7173;
  --f-display:'Epilogue',system-ui,sans-serif;
  --f-body:'Alegreya',Georgia,serif;
  --f-mono:'Sometype Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:19px;line-height:1.7;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:900;letter-spacing:-.03em;line-height:1;margin:0}
p{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--rule);margin:0}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.ic-lg{width:34px;height:34px;stroke-width:1.5}
.wrap{max-width:1360px;margin:0 auto;padding-inline:clamp(18px,4vw,48px)}
.measure{max-width:68ch;margin-inline:auto}
.kick{font-family:var(--f-mono);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--red);display:inline-flex;align-items:center;gap:10px;padding:8px 14px 7px;line-height:1}
.kick a{color:inherit}
.kick a:hover{color:inherit;text-decoration:underline;text-underline-offset:3px}
.kick .ic{width:19px;height:19px}
.kick--blue{background:var(--blue)}
.kick--muted{background:var(--ink);color:#fff}
@media(max-width:600px){.kick{font-size:12px;letter-spacing:.1em;padding:7px 11px 6px}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}

/* masthead --------------------------------------------------------------- */
.masthead{border-bottom:0}
.masthead__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;padding:26px 0 20px}
.wordmark{font-family:var(--f-display);font-weight:900;font-size:clamp(38px,5.4vw,68px);letter-spacing:-.045em;line-height:.84;text-transform:lowercase}
.wordmark i{font-style:normal;color:var(--red)}
.standing{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px;max-width:58ch;line-height:1.6}
.nav{background:var(--blue);color:#fff;border-top:4px solid var(--red)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:15px 16px;font-family:var(--f-mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.nav .ic{width:24px;height:24px;opacity:.85}
.nav a:hover{background:var(--red);color:#fff}
.nav a:hover .ic{opacity:1}
.nav a[aria-current]{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 -4px 0 #fff}
.nav a[aria-current] .ic{opacity:1}
@media(max-width:1120px){
  .nav a{font-size:14px;gap:9px;padding:13px 13px}
  .nav .ic{width:21px;height:21px}
}
@media(max-width:860px){
  .nav a{font-size:13px;letter-spacing:.07em;padding:12px 10px;gap:7px}
  .nav .ic{width:18px;height:18px}
}

/* homepage bands --------------------------------------------------------- */
.band{padding:clamp(44px,6vw,88px) 0}
.band--tight{padding:clamp(28px,3.5vw,44px) 0}
.band--red{background:var(--red);color:#f7eceb}
.band--recess{background:var(--paper-2)}
.band--rule{border-top:1px solid var(--ink)}

.lede{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(24px,4vw,64px);align-items:end}
.numeral{font-family:var(--f-display);font-weight:900;font-size:clamp(120px,21vw,290px);line-height:.76;letter-spacing:-.065em;color:var(--red);margin-left:-.045em}
.lede__text{font-size:clamp(20px,1.6vw,25px);line-height:1.38;padding-bottom:6px}
.curve{display:block;width:100%;height:74px;color:var(--ink)}

.tally{display:flex;flex-direction:column;align-items:stretch;gap:26px}
.tally__set{display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between;gap:0 clamp(16px,4vw,72px)}
.tally__n{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,6.1vw,112px);line-height:.8;letter-spacing:-.05em;color:#fff;white-space:nowrap}
.tally__y{display:inline-block;font-family:var(--f-mono);font-size:clamp(10px,1vw,12px);letter-spacing:.14em;color:var(--red);background:#fff;padding:4px 8px 3px;margin-bottom:12px}
.tally__note{max-width:none;font-size:clamp(13px,1.25vw,17px);line-height:1.5;margin:0;white-space:nowrap}
@media(max-width:560px){.tally__note{white-space:normal;font-size:14px}}

.streets{border-top:2px solid var(--ink)}
.street{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;border-bottom:1px solid var(--rule);padding:16px 0}
.street:last-child{border-bottom:2px solid var(--ink)}
.street__n{font-family:var(--f-display);font-weight:900;letter-spacing:-.035em;line-height:1;font-size:clamp(24px,3.4vw,44px)}
.street--lead .street__n{font-size:clamp(30px,4.6vw,62px)}
.street__d{font-size:17px;color:#4b4c4d;max-width:52ch}

.quiet{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:flex-start}
.quiet__n{font-family:var(--f-display);font-weight:900;font-size:clamp(64px,9vw,124px);line-height:.8;letter-spacing:-.05em;color:var(--rule)}

/* ledger ----------------------------------------------------------------- */
.ledger{font-family:var(--f-mono);font-size:13px;width:100%;border-collapse:collapse}
.ledger caption{text-align:left;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);padding-bottom:14px}
.ledger th{text-align:left;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 14px 12px 0;border-bottom:1px solid var(--ink)}
.ledger td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule)}
.ledger tr.mark td{background:var(--blue);color:var(--paper)}
.ledger tr.mark td:first-child{padding-left:12px}
.ledger .n{color:var(--red)}
.ledger tr.mark .n{color:#ffd6d3}

/* figures ---------------------------------------------------------------- */
figure{margin:0}
.article-figure{margin:38px 0}
.article-figure img{width:100%}
.article-figure figcaption{font-size:16.5px;line-height:1.5;border-top:2px solid var(--red);padding-top:10px;margin-top:14px;max-width:62ch}
.article-figure .credit{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:7px;line-height:1.5}
/* 1 — mat */
.article-figure--mat{background:var(--paper-2);padding:16px}
.article-figure--mat img{border:1px solid var(--ink)}
/* 2 — full-bleed band breaking the measure */
.article-figure--bleed{margin:56px 0;background:var(--ink)}
.article-figure--bleed img{width:100%;max-height:70vh;object-fit:cover}
.article-figure--bleed figcaption{color:var(--paper);border-top-color:var(--red);margin:0;padding:14px clamp(18px,4vw,48px) 20px;max-width:74ch}
.article-figure--bleed .credit{color:#9a9c9e}
/* 3 — inset, prose runs beside it */
.article-figure--inset{max-width:330px;margin:8px 0 22px}
.article-figure--inset img{border-top:3px solid var(--blue)}
.article-figure--inset figcaption{font-size:15px;border-top-width:1px;border-top-color:var(--ink)}
@media(min-width:820px){
  .article-figure--inset{float:right;width:300px;margin:10px 0 26px 36px}
}
@media(min-width:1280px){
  .article-figure--inset{width:330px;margin-right:-140px}
}
@media(max-width:899px){.article-figure--inset{max-width:none}}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:32px 0}
.gallery figure{background:var(--paper-2);padding:12px}
.gallery figcaption{font-size:15px;line-height:1.45;margin-top:10px;border-top:1px solid var(--ink);padding-top:8px}
.map-figure .map-slot{min-height:260px;border:1px solid var(--ink);background:var(--paper-2)}

/* article components ----------------------------------------------------- */
.lead{font-family:var(--f-body);font-size:clamp(21px,2vw,26px);line-height:1.42;font-style:italic;color:#3a3b3d;margin:0 0 34px}
.prose{font-size:19.5px;line-height:1.74}
.prose h2{font-size:clamp(26px,2.6vw,36px);margin:52px 0 18px;letter-spacing:-.025em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--f-mono);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:40px 0 12px}
.prose a{border-bottom:1px solid var(--red);padding-bottom:1px}
.prose a:hover{background:var(--red);color:var(--paper);border-bottom-color:transparent}
.prose ul,.prose ol{padding-left:1.1em;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.pullquote{margin:44px 0;border-top:2px solid var(--red);border-bottom:2px solid var(--red);padding:22px 0}
.pullquote p{font-family:var(--f-display);font-weight:800;font-size:clamp(24px,2.7vw,34px);line-height:1.16;letter-spacing:-.02em;margin:0}
.blockquote{margin:34px 0;border-left:3px solid var(--red);padding:2px 0 2px 22px}
.blockquote p{font-style:italic;font-size:20px;margin:0 0 .5em}
.blockquote cite{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.callout{background:var(--blue);color:#eef3fb;padding:24px 26px;margin:38px 0}
.callout p{margin:0;font-size:18.5px;line-height:1.55}
.callout p+p{margin-top:.7em}
.note{font-family:var(--f-mono);font-size:13.5px;line-height:1.65;color:#4b4c4d;border-left:2px solid var(--blue);padding-left:16px;margin:28px 0}

.panel{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:30px 0;margin:52px 0}
.panel__h{font-family:var(--f-display);font-weight:900;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;margin:10px 0 20px}

.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0}
.timeline li{border-top:2px solid var(--ink);padding:14px 20px 6px 0;display:flex;flex-direction:column;gap:7px}
.t-when{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.09em;color:var(--red);text-transform:uppercase}
.t-what{font-size:16.5px;line-height:1.48}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px}
.statblock{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--rule);padding-top:12px}
.stat-num{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3vw,42px);line-height:.95;letter-spacing:-.03em}
.stat-label{font-size:16px;line-height:1.45;color:#4b4c4d}

.datatable,.versus{width:100%;border-collapse:collapse;font-size:17px}
.datatable caption,.versus caption{text-align:left;font-family:var(--f-mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);padding-bottom:12px}
.datatable th,.versus th{text-align:left;font-family:var(--f-mono);font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 18px 10px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.datatable td,.versus td{padding:12px 18px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
.versus tbody th{color:var(--ink);text-transform:none;font-family:var(--f-body);font-size:17px;letter-spacing:0;border-bottom:1px solid var(--rule);padding-right:24px}
.chart{margin:36px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-family:var(--f-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--rule);padding-top:9px;margin-top:12px}

/* cards ------------------------------------------------------------------ */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:34px 0}
.profile-card{background:var(--paper-2);padding:20px;display:flex;flex-direction:column;gap:10px}
.profile-card .p-photo{width:100%;aspect-ratio:3/2;object-fit:cover}
.profile-card h3{font-size:22px}
.profile-card .p-role{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:0}
.profile-card p{font-size:16.5px;line-height:1.5;margin:0}
.profile-card .p-links{font-family:var(--f-mono);font-size:12.5px;margin-top:auto;padding-top:8px}
.profile-card .p-attr{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:30px 0}
.org-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--ink);padding:14px 16px;background:var(--paper)}
.org-card:hover{background:var(--paper-2)}
.org-logo{max-height:34px;width:auto;object-fit:contain}
.org-name{font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:-.02em}
.org-host{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.entity-ref{border-bottom:1px solid var(--blue);color:var(--blue)}
.entity-ref:hover{background:var(--blue);color:var(--paper);border-bottom-color:transparent}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 26px;margin:0}
.further-grid a{border-top:2px solid var(--ink);padding:14px 0 18px;font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.015em;line-height:1.2}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.related-links li{background:var(--paper);border:1px solid var(--ink);border-top:4px solid var(--red);display:flex}
.related-links a{display:flex;flex-direction:column;justify-content:space-between;gap:22px;width:100%;padding:16px 18px 16px;font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.16;letter-spacing:-.018em}
.related-links a::after{content:"Read \2192";font-family:var(--f-mono);font-weight:400;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.related-links li:hover{background:var(--red);border-color:var(--red)}
.related-links li:hover a,.related-links li:hover a::after{color:#fff}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:first-child{border-top:2px solid var(--ink)}
.cat-list a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 20px;padding:18px 0;align-items:baseline}
.cat-list .c-n{font-family:var(--f-mono);font-size:13px;color:var(--red)}
.cat-list .c-t{font-family:var(--f-display);font-weight:800;font-size:clamp(20px,2.2vw,27px);letter-spacing:-.025em;line-height:1.12}
.cat-list .c-b{grid-column:2;font-size:16.5px;line-height:1.5;color:#4b4c4d;margin-top:7px;max-width:62ch}

/* feed cards (even height) ---------------------------------------------- */
.feed{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px}
.feed article{display:flex;flex-direction:column;background:var(--paper-2);height:100%}
.feed img{aspect-ratio:8/5;object-fit:cover;width:100%}
.feed .body{display:flex;flex-direction:column;gap:9px;padding:16px 18px 20px;flex:1}
.feed h3{font-size:21px;letter-spacing:-.02em;line-height:1.14;min-height:2.28em}
.feed p{font-size:16px;line-height:1.5;margin:0;color:#4b4c4d}
.feed .meta{margin-top:auto;padding-top:12px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:8px}

/* supporters ------------------------------------------------------------- */
.supporters{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.sponsor-run{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px;margin-top:22px}
.sponsor{display:flex;flex-direction:column;gap:9px;min-height:126px;border-top:1px solid var(--rule);padding-top:11px}
.sponsor-name{font-family:var(--f-mono);font-size:14px;line-height:1.35;letter-spacing:.01em}
.sponsor:hover .sponsor-name{color:var(--red)}
.sponsor-blurb{font-size:15px;line-height:1.45;color:#4b4c4d}

/* footer ----------------------------------------------------------------- */
.foot{background:var(--ink);color:#cdc9c0;margin-top:0}
.foot__in{display:grid;grid-template-columns:minmax(280px,1.2fr) repeat(auto-fit,minmax(150px,1fr));gap:34px 40px;padding:52px 0 44px}
.foot .wordmark{color:var(--paper);font-size:clamp(30px,3.4vw,42px)}
.foot i{color:#e2515c}
.foot__line{font-size:16px;line-height:1.55;margin-top:14px;max-width:44ch}
.foot h4{font-family:var(--f-mono);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#8b8c8d;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot a{font-size:16px}
.foot a:hover{color:#e2515c}
.foot__bar{border-top:1px solid #2f3134;padding:16px 0 22px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#8b8c8d}

/* article head ----------------------------------------------------------- */
.ahead{padding:clamp(30px,4vw,56px) 0 0}
.ahead h1{font-size:clamp(34px,5.4vw,72px);line-height:.98;margin:16px 0 0;max-width:26ch}
.ahead .sub{margin-top:22px}
.crumb{font-family:var(--f-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumb a{color:var(--red)}
.section-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:clamp(20px,4vw,60px);align-items:end}
@media(max-width:820px){.lede,.section-hero{grid-template-columns:1fr}}
.endmark{display:flex;align-items:center;gap:12px;margin:40px 0 0;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.endmark span{flex:1;height:1px;background:var(--rule)}

/* mobile ----------------------------------------------------------------- */
@media(max-width:700px){
  body{font-size:18px}
  .prose{font-size:18.5px}
  .masthead__top{padding:20px 0 14px}
  .standing{font-size:11px;letter-spacing:.08em}
  .article-figure--bleed img{max-height:56vh}
  .article-figure--bleed figcaption{padding:12px 18px 18px}
  .ledger{font-size:12px}
  .ledger th,.ledger td{padding:10px 10px 10px 0}
  .datatable,.versus{font-size:16px}
  .datatable th,.versus th,.datatable td,.versus td{padding:10px 12px 10px 0}
  .cat-list a{grid-template-columns:38px minmax(0,1fr);gap:0 12px}
  .quiet__n{font-size:64px}
  .panel{padding:22px 0;margin:40px 0}
  .foot__in{grid-template-columns:1fr;gap:28px}
}
@media(max-width:400px){
  .nav a{font-size:12px;letter-spacing:.04em;padding:11px 8px}
  .tally__set{gap:0 10px}
}

/* hero lede — the opening block sits on the photograph ------------------- */
.hero-lede{margin:0}
.hero-lede__stack{display:grid}
.hero-lede__stack>*{grid-area:1/1}
.hero-lede__stack img{width:100%;height:100%;max-height:560px;object-fit:cover}
.hero-lede__wash{background:linear-gradient(180deg,rgba(244,242,236,.95) 0%,rgba(244,242,236,.88) 55%,rgba(244,242,236,.78) 100%)}
.hero-lede__in{align-self:center;padding:clamp(26px,3.4vw,52px) 0;color:var(--ink)}
.hero-lede .numeral{font-size:clamp(88px,14.5vw,208px)}
.hero-lede .lede__text{font-size:clamp(18px,1.35vw,22px)}
.hero-lede .curve{height:52px;margin-top:22px!important}
.hero-lede__in .curve{color:var(--ink);opacity:.7}
@media(max-width:700px){
  .hero-lede__wash{background:linear-gradient(180deg,rgba(244,242,236,.96),rgba(244,242,236,.9))}
  .hero-lede__in{padding:30px 0}
}

/* the kye, as arithmetic ------------------------------------------------- */
.kye{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(28px,4vw,56px);align-items:start}
.eq{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px;border-top:2px solid var(--ink);padding:20px 0 22px}
.eq--sec{border-top:1px solid var(--rule);border-bottom:2px solid var(--ink);padding:16px 0 18px}
.eq__t{display:flex;flex-direction:column;gap:5px}
.eq__n{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,3.6vw,52px);line-height:.9;letter-spacing:-.04em;white-space:nowrap}
.eq--sec .eq__n{font-size:clamp(24px,2.6vw,36px)}
.eq__n--red{color:var(--red)}
.eq__n--blue{color:var(--blue)}
.eq__l{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.eq__op{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.4vw,34px);color:var(--red);line-height:1;padding-bottom:22px}
.eq--sec .eq__op{padding-bottom:16px}
.kye__pos{margin-top:34px}
.kye__pos .n{font-family:var(--f-mono);color:var(--red);font-size:14px}
.kye__ring{border-top:2px solid var(--ink);padding-top:22px}
.ring{width:100%;max-width:330px;height:auto;color:var(--ink)}
.kye__cap{font-size:16px;line-height:1.5;color:#4b4c4d;margin:18px 0 0;max-width:36ch}
@media(max-width:860px){
  .kye{grid-template-columns:1fr}
  .kye__ring{display:flex;gap:22px;align-items:flex-start}
  .ring{max-width:170px}
}
@media(max-width:520px){.kye__ring{flex-direction:column}}

/* supporters, dressed --------------------------------------------------- */
.supporters{background:var(--paper-2);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sup__head{display:flex;align-items:center;gap:20px}
.sup__mark{width:74px;height:45px;flex:none;color:var(--red)}
.sup__h{font-family:var(--f-display);font-weight:900;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.025em;margin:8px 0 0}
.sponsor-run{margin-top:30px}
.sponsor{background:var(--paper);border:1px solid var(--ink);border-top:4px solid var(--red);padding:14px 16px 16px;gap:8px;min-height:134px;justify-content:flex-start}
.sponsor-name{font-family:var(--f-display);font-weight:800;font-size:18px;line-height:1.14;letter-spacing:-.02em}
.sponsor-blurb{font-size:15px;line-height:1.42;color:#4b4c4d;margin-top:auto}
.sponsor:hover{background:var(--red);border-color:var(--red)}
.sponsor:hover .sponsor-name,.sponsor:hover .sponsor-blurb{color:#fff}

.hero-lede figcaption{max-width:none}
.hero-lede .credit{display:inline;margin-left:14px}
@media(min-width:620px){.hero-lede figcaption{white-space:nowrap}}

/* "what a position is worth" — read as banded rows ---------------------- */
.kye__pos{margin-top:30px;border-collapse:collapse}
.kye__pos thead th{vertical-align:bottom;padding:0 16px 9px 12px;border-bottom:2px solid var(--ink)}
.kye__pos tbody th,.kye__pos tbody td{vertical-align:top;padding:13px 16px 13px 12px;border-bottom:1px solid var(--rule);line-height:1.4}
.kye__pos tbody tr:nth-child(odd) th,.kye__pos tbody tr:nth-child(odd) td{background:var(--paper-2)}
.kye__pos tbody th{width:1%;white-space:nowrap;border-left:4px solid var(--red)}
.kye__pos .n{font-family:var(--f-mono);font-size:16px;color:var(--red);font-weight:500}
.kye__pos tbody td:last-child{font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.015em}
.kye__pos tbody tr:last-child th,.kye__pos tbody tr:last-child td{border-bottom:2px solid var(--ink)}
@media(max-width:700px){
  .kye__pos{font-size:15px}
  .kye__pos thead th{font-size:11px;padding:0 10px 8px 9px}
  .kye__pos tbody th,.kye__pos tbody td{padding:11px 10px 11px 9px}
  .kye__pos tbody td:last-child{font-size:15.5px}
}

/* growth line — the census series, plotted ------------------------------ */
.growth{margin:26px 0 0;color:var(--ink)}
.growth__svg{width:100%;height:auto;max-height:190px;display:block}
.growth__legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;border-top:1px solid var(--ink);margin-top:14px;padding-top:9px}
.growth__key{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.growth__swatch{width:26px;height:3px;background:var(--red);flex:none}
.growth__src{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media(max-width:700px){
  .growth__svg{max-height:150px}
  .growth__legend{gap:4px 14px}
  .growth__src{font-size:10.5px}
}

.ring__legend{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#4b4c4d}
.ring__legend li{display:flex;align-items:center;gap:11px}
.rk{width:13px;height:13px;flex:none;box-sizing:border-box}
.rk--paid{background:var(--red);border:1.4px solid var(--red)}
.rk--now{background:var(--paper);border:3px solid var(--red)}
.rk--todo{background:none;border:1px solid var(--ink);opacity:.55}
@media(max-width:860px){
  .kye__ring{flex-wrap:wrap}
  .ring{max-width:280px}
  .ring__legend{margin-top:14px}
}

/* a band with a photograph behind it ------------------------------------ */
.band--plate{position:relative;display:grid;isolation:isolate;background:var(--ink);color:#efe9de}
.band--plate>*{grid-area:1/1}
.band--plate .band__bg{width:100%;height:100%;object-fit:cover;max-height:none}
.band--plate{max-height:none}
.band--plate .band__wash{background:linear-gradient(90deg,rgba(23,24,26,.94) 0%,rgba(23,24,26,.9) 52%,rgba(23,24,26,.6) 100%)}
.band--plate .band__in{align-self:center;padding:clamp(26px,3vw,44px) 0;position:relative;z-index:1}
.band--plate .quiet{gap:10px 28px;align-items:center}
.band--plate .quiet__n{font-size:clamp(46px,5.4vw,80px)}
.band--plate h2{font-size:clamp(20px,2.2vw,27px)!important;margin:0 0 10px!important}
.band--plate .band__in p{font-size:17px;line-height:1.55}
.band--plate .quiet__n{color:rgba(255,255,255,.22)}
.band--plate h2{color:#fff}
.band--plate .related-links li{background:transparent;border-color:rgba(255,255,255,.4);border-top-color:var(--red)}
.band--plate .related-links a{color:#fff}
.band--plate .related-links li:hover{background:var(--red);border-color:var(--red)}
@media(max-width:700px){.band--plate .band__wash{background:rgba(23,24,26,.93)}}

/* footer ----------------------------------------------------------------- */
.foot__in{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.1fr);gap:32px clamp(32px,5vw,72px);padding:44px 0 32px;align-items:start}
.foot__secs{display:flex;flex-direction:column;gap:0}
.fsec{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:baseline;gap:4px 20px;padding:9px 12px;border-top:1px solid #2f3134}
.fsec:hover{background:var(--red)}
.fsec:hover .fsec__b{color:#fff}
.fsec__h{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.fsec__h .ic{width:17px;height:17px;color:var(--red)}
.fsec:hover .fsec__h .ic{color:#fff}
.fsec__b{font-size:15px;line-height:1.35;color:#a3a09a}
@media(max-width:520px){.fsec{grid-template-columns:1fr;gap:3px}}
.foot__bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;border-top:1px solid #2f3134;padding:16px 0 24px}
.foot__nav{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.foot__mark{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8b8c8d}
@media(max-width:820px){.foot__in{grid-template-columns:1fr;padding:40px 0 30px}}

.growth--onred{margin:34px 0 26px;color:#fff}
.growth--onred .growth__svg{max-height:220px}
.growth--onred .growth__legend{border-top-color:rgba(255,255,255,.45)}
.growth--onred .growth__key{color:#fff}
.growth--onred .growth__swatch{background:#fff;height:4px}
.growth--onred .growth__src{color:#ffd6d3}
@media(max-width:700px){.growth--onred{margin:24px 0 20px}.growth--onred .growth__svg{max-height:170px}}

/* census band, compacted ------------------------------------------------- */
.band--red{padding:clamp(26px,3vw,46px) 0}
.tally{gap:16px}
.tally__n{font-size:clamp(28px,5.1vw,84px)}
.tally__y{margin-bottom:8px;padding:3px 7px 2px}
.growth--onred{margin:4px 0 2px}
.growth--onred .growth__svg{height:clamp(86px,9vw,124px);max-height:none}
.growth--onred .growth__legend{margin-top:9px;padding-top:7px}
.growth--onred .growth__key{font-size:11.5px;letter-spacing:.08em}
.tally__note{font-size:clamp(12.5px,1.1vw,15px)}
@media(max-width:700px){
  .growth--onred .growth__svg{height:78px}
  .growth--onred .growth__key{font-size:10.5px;letter-spacing:.04em}
}

/* five streets, as pictures --------------------------------------------- */
.strip{display:grid;grid-template-columns:1.85fr 1fr 1fr 1fr 1fr;gap:16px;margin-top:8px}
.strip__c{display:flex;flex-direction:column;gap:0}
.strip__c img{width:100%;height:clamp(230px,25vw,400px);object-fit:cover;border-top:4px solid var(--red)}
.strip__n{font-family:var(--f-display);font-weight:900;letter-spacing:-.03em;line-height:1.04;font-size:20px;margin-top:14px}
.strip__c--lead .strip__n{font-size:clamp(24px,2.5vw,34px)}
.strip__p{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-top:7px}
.strip__l{font-size:15.5px;line-height:1.42;color:#4b4c4d;margin-top:8px}
.strip__c--lead .strip__l{font-size:17px}
.strip__cr{font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#8b8c8d;margin-top:auto;padding-top:10px;line-height:1.45}
.strip__c:hover .strip__n{color:var(--red)}
.strip__c:hover img{outline:3px solid var(--red);outline-offset:-3px}
@media(max-width:1000px){
  .strip{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .strip__c img{height:220px}
  .strip__c--lead{grid-column:1/-1}
  .strip__c--lead img{height:300px}
}
@media(max-width:560px){
  .strip{grid-template-columns:1fr 1fr;gap:14px}
  .strip__c img{height:170px}
  .strip__c--lead img{height:230px}
  .strip__n{font-size:17px}
}

/* 1992 band — hold it to a short, wide plate ---------------------------- */
.band--plate{padding:0}
.band--plate .band__bg{max-height:340px;height:340px}
.band--plate .band__in{padding:22px 0}
.band--plate .quiet{gap:8px 24px;align-items:flex-start}
.band--plate .quiet__n{font-size:clamp(38px,4vw,58px);line-height:.9}
.band--plate h2{font-size:clamp(18px,1.9vw,23px)!important;margin:0 0 8px!important}
.band--plate .band__in p{font-size:16px;line-height:1.5;margin:0 0 14px}
.band--plate .related-links{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.band--plate .related-links a{font-size:16px;padding:11px 13px;gap:12px}
.band--plate .related-links a::after{font-size:10.5px}
@media(max-width:820px){
  .band--plate .band__bg{max-height:none;height:100%}
  .band--plate .band__in{padding:26px 0}
}

/* ======================= article pages, v2 ============================== */
.ahead{border-bottom:1px solid var(--ink)}
.ahead__in{padding:clamp(24px,3.4vw,50px) 0 clamp(22px,2.8vw,38px)}
.ahead__top{display:flex;flex-wrap:wrap-reverse;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:clamp(16px,2.2vw,28px)}
.ahead .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ahead .crumb a{color:var(--ink)}
.ahead .crumb a:hover{color:var(--red)}
.ahead .crumb span{color:var(--rule)}
.ahead h1{font-size:clamp(29px,5.4vw,72px);line-height:.99;margin:0;max-width:25ch}
.ahead .lead{margin:clamp(16px,2vw,26px) 0 0;max-width:58ch;font-style:italic}
.article{padding:clamp(28px,3.8vw,60px) 0 clamp(26px,3.4vw,52px)}
.prose h2{counter-increment:sec;position:relative;padding-top:22px;border-top:2px solid var(--ink)}
.prose h2::before{content:"§ " counter(sec,decimal-leading-zero);position:absolute;top:8px;left:0;font-family:var(--f-mono);font-weight:400;font-size:11.5px;letter-spacing:.16em;color:var(--red)}
.prose{counter-reset:sec}
.prose>p:first-of-type::first-letter{font-family:var(--f-display);font-weight:900;font-size:3.1em;line-height:.82;float:left;margin:.06em .09em 0 0;color:var(--red)}

/* "intersections" — the blocks that break the prose --------------------- */
.pane{margin:clamp(32px,3.8vw,52px) 0;background:var(--paper-2);border-top:4px solid var(--red);padding:clamp(18px,2.2vw,28px)}
.pane__hd{margin:0 0 clamp(14px,1.6vw,20px)}
.pane__hd .kick{margin:0}
.pane .timeline{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pane .timeline li{border-top:2px solid var(--ink);padding:13px 20px 10px 0}
.pane .versus{font-size:16.5px}
.pane .versus tbody th{padding:12px 22px 12px 0;border-bottom:1px solid rgba(23,24,26,.18)}
.pane .versus td{border-bottom:1px solid rgba(23,24,26,.18);padding:12px 0}
.pane .versus tr:last-child th,.pane .versus tr:last-child td{border-bottom:0;padding-bottom:0}
.pane.chart{padding-bottom:clamp(14px,1.8vw,22px)}
.pane.chart svg{margin:0 auto}
.pane.chart figcaption{border-top:1px solid rgba(23,24,26,.25);margin-top:14px;padding-top:10px}
@media(min-width:1180px){
  .pane--wide{width:calc(100% + 180px);margin-left:-90px}
}
.callout{padding:clamp(20px,2.4vw,28px);margin:clamp(32px,3.8vw,48px) 0}
.callout__h{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:#ffd6d3;margin:0 0 14px}
.callout p+p{margin-top:.6em}
.pullquote{margin:clamp(34px,4vw,50px) 0;padding:clamp(18px,2vw,26px) 0}
.article-figure{margin:clamp(30px,3.6vw,46px) 0}
.fignum{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:7px}
.article-figure--bleed .fignum{color:#ff8d84}
.figtext{display:block}
.readnext{border-top:1px solid var(--ink);background:var(--paper-2)}
.readnext .related-links{margin-top:20px}

/* ======================= mobile, whole site ============================= */
@media(max-width:640px){
  .nav ul{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-ms-overflow-style:none}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:0 0 auto}
  .nav a{padding:12px 12px;font-size:13px}
  .prose>p:first-of-type::first-letter{font-size:2.7em}
  .prose h2{padding-top:20px}
  .kye__math{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kye__pos{min-width:520px}
  .ring{max-width:100%}
  .eq__n{font-size:clamp(26px,8vw,34px)}
  .eq__op{padding-bottom:18px;font-size:22px}
  .strip__cr{font-size:9.5px}
  .growth--onred .growth__legend{flex-direction:column;gap:5px}
}
@media(max-width:420px){
  .tally__set{gap:0 8px}
  .tally__n{font-size:clamp(22px,6.6vw,30px)}
  .tally__y{font-size:9.5px;padding:2px 5px 1px;letter-spacing:.1em}
  .wordmark{font-size:clamp(32px,10vw,40px)}
  .ahead h1{font-size:clamp(26px,7.6vw,32px)}
  .article-figure figcaption{font-size:15.5px}
  .pane{padding:15px}
  .callout{padding:17px}
}

/* images always reserve their box ---------------------------------------- */
.article-figure img,.strip__c img,.band__bg,.gallery img,.feed img,.profile-card .p-photo{aspect-ratio:8/5}
.article-figure img{min-height:1px}
.article-figure--bleed img{aspect-ratio:auto}
.band--plate .band__bg{aspect-ratio:auto}
.feed img{aspect-ratio:8/5}
.profile-card .p-photo{aspect-ratio:3/2}
.strip__c img{aspect-ratio:auto}

/* chronology — an actual timeline, spine and markers -------------------- */
.timeline{display:block;list-style:none;margin:0;padding:0 0 0 34px;position:relative;grid-template-columns:none}
.timeline::before{content:"";position:absolute;left:7px;top:9px;bottom:9px;width:2px;background:var(--ink)}
.timeline li{display:grid;grid-template-columns:190px minmax(0,1fr);gap:3px 24px;align-items:baseline;position:relative;border:0;padding:0 0 22px;margin:0}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-34px;top:4px;width:16px;height:16px;box-sizing:border-box;background:var(--paper);border:3px solid var(--red)}
.pane .timeline{grid-template-columns:none;padding:0 0 0 34px}
.pane .timeline li{border-top:0;padding:0 0 22px}
.pane .timeline li:last-child{padding-bottom:0}
.pane .timeline li::before{background:var(--paper-2)}
.t-when{display:block;margin:0;font-size:12.5px;line-height:1.4;padding-top:2px}
.t-what{display:block;margin:0}
@media(max-width:640px){
  .timeline{padding-left:28px}
  .timeline::before{left:5px}
  .timeline li{grid-template-columns:1fr;gap:4px;padding-bottom:20px}
  .timeline li::before{left:-28px;width:13px;height:13px;border-width:3px;top:5px}
  .t-what{font-size:16px}
}

/* inset figure — right-aligned block, no text wrap ---------------------- */
.article-figure--inset{float:none!important;width:min(100%,430px);max-width:none;margin:clamp(26px,3vw,40px) 0 clamp(26px,3vw,40px) auto}
.article-figure--inset img{border-top:4px solid var(--blue)}
.article-figure--inset figcaption{border-top:1px solid var(--ink);font-size:16px;max-width:none}
.article-figure--inset .fignum{color:var(--blue)}
@media(min-width:1280px){
  .article-figure--inset{width:430px;margin-right:-150px}
}
@media(max-width:560px){
  .article-figure--inset{width:100%;margin-left:0}
}

/* article section headings --------------------------------------------- */
.prose h2{border-top:3px solid var(--ink);padding-top:0;margin:clamp(48px,5vw,72px) 0 clamp(16px,1.8vw,24px);font-size:clamp(26px,3vw,40px);line-height:1.02;letter-spacing:-.03em;max-width:30ch}
.prose h2::before{content:"§ " counter(sec,decimal-leading-zero);position:static;display:inline-block;margin:16px 0 16px;padding:6px 11px 5px;background:var(--red);color:#fff;font-family:var(--f-mono);font-weight:400;font-size:11.5px;letter-spacing:.18em;line-height:1;vertical-align:middle}
.prose h2:first-child{margin-top:0;border-top:0}
.prose h2:first-child::before{margin-top:0}
.prose h3{margin:clamp(34px,3.4vw,44px) 0 12px;font-size:12.5px;letter-spacing:.18em;color:var(--ink);border-left:3px solid var(--red);padding-left:12px}
@media(max-width:640px){
  .prose h2{margin-top:40px;font-size:clamp(24px,6.4vw,30px)}
  .prose h2::before{margin:13px 0 13px;font-size:10.5px;padding:5px 9px 4px}
}

/* section / archive index rows ------------------------------------------ */
.cat-list li:first-child{border-top:3px solid var(--ink)}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:62px minmax(0,1fr);gap:0 26px;align-items:start;padding:22px 14px 24px 0}
.cat-list a:hover{background:var(--paper-2)}
.cat-list .c-n{justify-self:start;display:inline-block;background:var(--red);color:#fff;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;line-height:1;padding:6px 8px 5px;margin-top:7px}
.cat-list a:hover .c-n{background:var(--ink)}
.cat-list .c-t{grid-column:2;font-size:clamp(21px,2.2vw,28px);line-height:1.1;letter-spacing:-.028em;max-width:34ch}
.cat-list a:hover .c-t{color:var(--red)}
.cat-list .c-b{grid-column:2;font-size:16.5px;line-height:1.5;color:#4b4c4d;margin-top:9px;max-width:58ch}
@media(max-width:640px){
  .cat-list a{grid-template-columns:44px minmax(0,1fr);gap:0 14px;padding:17px 0 19px}
  .cat-list .c-n{font-size:10.5px;padding:5px 6px 4px;margin-top:5px}
  .cat-list .c-t{font-size:clamp(19px,5.4vw,23px)}
  .cat-list .c-b{font-size:15.5px;margin-top:7px}
}

/* the § plate sits on its own line, not inline with the title ----------- */
.prose h2::before{display:block;width:-moz-max-content;width:max-content;vertical-align:baseline;margin:22px 0 15px}
.prose h2:first-child::before{margin-top:0}
.prose h2{padding-top:0}
@media(max-width:640px){.prose h2::before{margin:18px 0 12px}}

/* inset figure — image and caption side by side, filling the measure ---- */
.article-figure--inset{float:none!important;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(160px,1fr);gap:0 26px;align-items:start;width:100%!important;max-width:none;margin:clamp(30px,3.6vw,46px) 0!important}
.article-figure--inset img{grid-column:1;border-top:4px solid var(--blue);width:100%}
.article-figure--inset figcaption{grid-column:2;margin-top:0;border-top:4px solid var(--blue);padding-top:11px;font-size:16px;max-width:none}
@media(min-width:1280px){.article-figure--inset{margin-right:0!important}}
@media(max-width:640px){
  .article-figure--inset{grid-template-columns:1fr;gap:0}
  .article-figure--inset figcaption{grid-column:1;border-top-width:1px;border-top-color:var(--ink);margin-top:13px}
}

.prose h2{max-width:none;text-wrap:balance}

/* 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;flex-wrap:nowrap!important;align-items:center!important;height:auto!important;min-height:0!important}
.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}

/* sp-grid-stretch: fixed pixel tracks left the container part-empty. */
.pane .timeline{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-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.masthead__top{padding-inline:clamp(18px,4vw,48px)}
  .wrap.band{padding-inline:clamp(18px,4vw,48px)}
  .wrap.band__in{padding-inline:clamp(18px,4vw,48px)}
  .wrap.foot__in{padding-inline:clamp(18px,4vw,48px)}
  .wrap.ahead__in{padding-inline:clamp(18px,4vw,48px)}
  .wrap.article{padding-inline:clamp(18px,4vw,48px)}
}

/* op-mq-specificity: Design's own phone rule for the chronology never took effect.
   `@media(max-width:640px){.timeline{padding-left:28px}}` is outranked by the earlier
   `.pane .timeline{padding:0 0 0 34px}` (two classes beat one), so at phone width the
   padding stayed 34px while the marker moved to left:-28px and the spine to left:5px.
   Measured at 390: marker 39..52, spine 38..40 — the rail ran down the marker's left
   border instead of through it (desktop: marker 314..330, spine 321..323, centred).
   Restated at matching specificity so Design's intended 28px applies. */
@media (max-width:640px){
  .pane .timeline{padding-left:28px}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1414px at 390, 20% of the whole page. Two columns bring it to
   894px (37% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 3 lines, tile heights 109-152px.
   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 (.sponsor-run), 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-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px!important}
    .sponsor-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-run > * *{min-width:0!important;max-width:100%}
    .sponsor-run img,.sponsor-run svg{max-width:100%;height:auto}

}

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

/* op-article-width: the article column was capped at 689px (87 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){
  div.article div.measure{max-width:min(810px, 100%)!important}
}
@media (min-width:1600px){
  div.article div.measure{max-width:min(clamp(810px, 56.250vw, 972px), 100%)!important}
  div.article div.prose > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px) and (max-width:1399px){
  div.ahead__top{padding-left:max(clamp(18px,4vw,48px), 18px);padding-right:max(clamp(18px,4vw,48px), 18px)}
  div.kye{padding-left:max(clamp(18px,4vw,48px), 18px);padding-right:max(clamp(18px,4vw,48px), 18px)}
  div.section-hero{padding-left:max(clamp(18px,4vw,48px), 18px);padding-right:max(clamp(18px,4vw,48px), 18px)}
  div.strip{padding-left:max(clamp(18px,4vw,48px), 18px);padding-right:max(clamp(18px,4vw,48px), 18px)}
  div.wrap.ahead__in{padding-left:max(clamp(18px,4vw,48px), 18px);padding-right:max(clamp(18px,4vw,48px), 18px)}
  div.wrap.foot__in{padding-left:max(clamp(18px,4vw,48px), 18px);padding-right:max(clamp(18px,4vw,48px), 18px)}
  div.wrap.masthead__top{padding-left:max(clamp(18px,4vw,48px), 18px);padding-right:max(clamp(18px,4vw,48px), 18px)}
  section.wrap.band{padding-left:max(clamp(18px,4vw,48px), 18px);padding-right:max(clamp(18px,4vw,48px), 18px)}
  div.wrap.ahead__in div.ahead__top{padding-left:0;padding-right:0}
  section.wrap.band div.kye{padding-left:0;padding-right:0}
  section.wrap.band div.strip{padding-left:0;padding-right:0}
}
/* op-tablet-gutter:end */