/* directoryofeducation.org — palette, type and components
   ground  #F6F5F1  paper, the page
   ink     #101418  text and rules
   deep    #0E3A24  bottle green — identity bands, mats, panels (AREA)
   accent  #DC2626  signal red — the money path, position, active state
   muted   #4d5560  secondary text
*/
:root{
  --ground:#F6F5F1; --ink:#101418; --deep:#0E3A24; --accent:#DC2626;
  --muted:#4d5560; --rule:#101418; --rule-soft:#cfcdc5; --hair:#e2e0d8;
  --mint:#b9cdc0; --dim:#7c8590;
  --display:'Space Grotesk',system-ui,sans-serif;
  --text:'Literata',Georgia,serif;
  --pad:clamp(18px,4vw,48px);
  --measure:68ch;
}
*{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:18px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:#a81b1b;text-decoration:underline}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0}
p{margin:0 0 1.1em}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.wide{max-width:1400px;margin:0 auto;padding-inline:var(--pad)}
.kicker{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px}
.kicker svg{width:18px;height:18px;flex:none}
.eyebrow{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.icn{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}

/* ── masthead ─────────────────────────────────────────── */
.mast{background:var(--deep);color:var(--ground)}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:20px;flex-wrap:wrap}
.mast-id{display:flex;align-items:center;gap:16px;min-width:0}
.mast-mark{width:54px;height:54px;flex:none;stroke:var(--ground);fill:none;stroke-width:2.2;stroke-linecap:square}
.mast-mark .red{stroke:var(--accent);stroke-width:3.6}
.mast h1,.mast .wordmark{font-family:var(--display);font-size:clamp(25px,4.4vw,40px);font-weight:700;letter-spacing:-.04em;line-height:.98;color:var(--ground);display:inline-block;border-bottom:5px solid var(--accent);padding-bottom:3px}
.mast .strap{font-size:13px;line-height:1.45;color:var(--mint);margin:6px 0 0;max-width:62ch}
.mast-flag{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.mast a{color:inherit}
.mast a:hover{text-decoration:none;color:#fff}

/* the scale: nav as a measuring rule, second level always open */
.scale{border-bottom:2px solid var(--rule);background:var(--ground)}
.scale ul{list-style:none;margin:0;padding:0}
.scale-row{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:28px;padding-block:24px 30px;border-top:1px solid var(--rule-soft)}
.scale-sec{position:relative;padding-top:18px}
.scale-sec::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:4px;background:var(--ink)}
.scale-sec.here::before{background:var(--accent);height:6px}
.scale-no{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--dim)}
.scale-sec.here .scale-no{color:var(--accent)}
.scale-name{display:flex;gap:11px;align-items:center;font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-.015em;line-height:1.15;margin:0 0 12px;color:var(--ink)}
.scale-name .icn{width:26px;height:26px;stroke-width:1.5}
.scale-sec:hover .scale-name .icn,.scale-sec.here .scale-name .icn{color:var(--accent)}
.scale-name:hover{text-decoration:none;color:var(--accent)}
.scale-sub li{font-size:13.5px;line-height:1.6;margin-bottom:5px;padding-left:37px}
.scale-sub a{color:var(--muted)}
.scale-sub a:hover{color:var(--accent)}
.scale-util{padding-top:20px;display:flex;flex-direction:column;gap:11px;font-family:var(--display);font-size:13.5px}
.scale-util a{display:flex;align-items:center;gap:10px;color:var(--ink)}
.scale-util a:hover{color:var(--accent);text-decoration:none}
@media(max-width:900px){
  .scale-row{grid-template-columns:1fr;gap:0;border-top:0}
  .scale-sec{padding:14px 0 14px 18px;border-top:1px solid var(--hair)}
  .scale-sec::before{top:0;left:0;width:100%;height:2px}
  .scale-sec.here::before{height:4px}
  .scale-util{padding:14px 0 4px 18px;border-top:1px solid var(--hair);flex-flow:row wrap;gap:16px}
}

/* ── bands ────────────────────────────────────────────── */
section{position:relative}
.band{padding-block:clamp(40px,6vw,76px)}
.band-deep{background:var(--deep);color:var(--ground)}
.band-deep h2,.band-deep h3{color:var(--ground)}
.band-deep p{color:#dbe6de}
.band-ink{background:var(--ink);color:var(--ground)}
.rule-top{border-top:2px solid var(--rule)}
.lead-head{font-size:clamp(30px,5vw,54px);line-height:1.02;text-wrap:pretty}
.dek{font-size:clamp(16px,2vw,19px);line-height:1.5;color:var(--muted);max-width:44ch}
.split{display:grid;grid-template-columns:1fr 320px;gap:clamp(24px,4vw,56px);align-items:end}
@media(max-width:820px){.split{grid-template-columns:1fr;align-items:start}}

/* diagram */
.diagram-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.diagram{display:block;width:100%;height:auto;font-family:var(--display)}
@media(max-width:820px){.diagram-scroll .diagram{min-width:760px}}
.diagram text{font-family:var(--display)}

/* numerals as the repeating mark */
.ledger{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:center}
@media(max-width:760px){.ledger{grid-template-columns:1fr}}
.ledger-num{font-family:var(--display);font-size:clamp(84px,15vw,180px);font-weight:700;line-height:.82;letter-spacing:-.06em;color:var(--deep)}

/* ── figures: one drawing system, three treatments ────── */
figure{margin:0}
figcaption{font-family:var(--display);font-size:15px;line-height:1.35;font-weight:600;color:var(--ink);margin-top:12px}
.credit{display:block;font-family:var(--display);font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);margin-top:7px}
/* 1 · full-bleed, caption plate overlapping with a red bar */
.fig-bleed{position:relative;margin:0}
.fig-bleed img{width:100%;height:clamp(240px,44vw,520px);object-fit:cover}
.fig-bleed figcaption{position:absolute;left:0;bottom:0;max-width:min(560px,90%);background:var(--ground);border-left:6px solid var(--accent);padding:16px 20px;margin:0}
.fig-bleed .credit{color:var(--dim)}
@media(max-width:600px){.fig-bleed figcaption{position:static;max-width:none;border-left:0;border-top:4px solid var(--accent);padding:14px 0 0}}
/* 2 · mat: photograph sits on a green card, caption inside it */
.fig-mat{background:var(--deep);padding:14px 14px 18px}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{color:var(--ground);margin-top:14px}
.fig-mat .credit{color:var(--mint)}
/* 3 · inset: hairline frame, caption hanging under a rule */
.fig-inset{border:2px solid var(--ink);padding:10px}
.fig-inset img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fig-inset figcaption{border-top:1px solid var(--rule-soft);padding-top:10px;margin-top:12px}
/* 4 · plain column figure (styleguide .article-figure) */
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{border-left:4px solid var(--deep);padding-left:14px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gallery img{aspect-ratio:4/3;object-fit:cover}

/* ── article ──────────────────────────────────────────── */
.art-head{padding-block:clamp(30px,5vw,60px) 0}
.art-title{font-size:clamp(32px,6vw,64px);line-height:.99;text-wrap:pretty;margin-bottom:18px}
.byline{font-family:var(--display);font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;border-top:2px solid var(--rule);padding-top:12px;margin-top:26px}
.byline b{color:var(--ink);font-weight:600}
.prose{max-width:var(--measure)}
.prose h2{font-size:clamp(23px,3.2vw,30px);line-height:1.16;margin:2em 0 .6em}
.prose p{font-size:19px;line-height:1.68}
.prose p+p{margin-top:0}
.lead{font-size:clamp(20px,2.6vw,25px);line-height:1.42;font-family:var(--display);font-weight:500;letter-spacing:-.015em;color:var(--ink);margin-bottom:1.2em}
.note{font-size:16px;color:var(--muted);border-left:3px solid var(--rule-soft);padding-left:16px}
.pullquote{margin:2em 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:26px 0}
.pullquote p{font-family:var(--display);font-size:clamp(21px,3vw,28px);line-height:1.3;font-weight:500;letter-spacing:-.02em;margin:0}
.blockquote{margin:2em 0;border-left:6px solid var(--accent);padding:6px 0 6px 22px}
.blockquote p{font-size:20px;line-height:1.5;margin:0 0 .5em}
.blockquote cite{font-family:var(--display);font-size:13.5px;font-style:normal;color:var(--muted)}
.callout{background:var(--deep);color:var(--ground);padding:24px 26px;margin:2em 0}
.callout p{margin:0;font-size:18px;line-height:1.55;color:#e6efe9}
.callout .eyebrow{color:var(--mint);display:block;margin-bottom:10px}

/* full-width interruptions (notes-for-design material) */
.interrupt{background:var(--ground);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding-block:clamp(38px,5.5vw,64px);margin-block:clamp(34px,5vw,60px)}
.interrupt.deep{background:var(--deep);border-color:var(--deep);color:var(--ground)}
.interrupt.deep .i-head,.interrupt.deep th,.interrupt.deep td,.interrupt.deep .t-what{color:var(--ground)}
.interrupt .i-head{font-family:var(--display);font-size:clamp(19px,2.4vw,25px);font-weight:700;letter-spacing:-.02em;margin:0}
.interrupt .i-sub{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.i-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:start}
@media(max-width:760px){.i-grid{grid-template-columns:1fr}}

/* ── data components ──────────────────────────────────── */
.datatable,.versus{width:100%;border-collapse:collapse;font-size:16.5px}
.datatable th,.versus th{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:left;padding:0 14px 10px 0;border-bottom:2px solid var(--ink)}
.datatable td,.versus td{padding:12px 14px 12px 0;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.5}
.datatable td:first-child{font-family:var(--display);font-weight:600;font-size:15.5px;width:34%;min-width:150px}
.versus td:first-child{font-family:var(--display);font-weight:600}
.versus tr td:not(:first-child){width:33%}
.interrupt.deep .datatable td{border-bottom-color:rgba(246,245,241,.22)}
.interrupt.deep .datatable th{border-bottom-color:var(--mint);color:var(--mint)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;background:var(--rule-soft)}
.statblock{background:var(--ground);padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-size:clamp(34px,5vw,54px);font-weight:700;line-height:.9;letter-spacing:-.04em;color:var(--deep)}
.stat-label{font-family:var(--display);font-size:13px;line-height:1.35;color:var(--muted)}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:18px;padding:13px 0;border-top:1px solid var(--hair);align-items:baseline}
.timeline li:first-child{border-top:2px solid var(--ink)}
.interrupt.deep .timeline li{border-top-color:rgba(246,245,241,.22)}
.interrupt.deep .timeline li:first-child{border-top-color:var(--mint)}
.t-when{font-family:var(--display);font-size:15px;font-weight:700;color:var(--accent);letter-spacing:-.01em}
.t-what{font-size:16.5px;line-height:1.5}
@media(max-width:560px){.timeline li{grid-template-columns:1fr;gap:4px}}
.chart{margin:0;overflow-x:auto}
.chart svg{width:100%;height:auto;display:block;font-family:var(--display)}
@media(max-width:700px){.chart svg{min-width:600px}}
.table-scroll{overflow-x:auto}
@media(max-width:620px){
  .datatable,.versus{font-size:15.5px}
  .datatable td:first-child{min-width:0;width:38%}
  .table-scroll .versus{min-width:460px}
}
.chart figcaption{border-top:1px solid var(--rule-soft);padding-top:10px}

/* ── cards, lists, references ─────────────────────────── */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--hair);padding:18px 0}
.cat-list li:first-child{border-top:2px solid var(--ink)}
.cat-list a{font-family:var(--display);font-size:clamp(19px,2.4vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.18;color:var(--ink);display:block}
.cat-list a:hover{color:var(--accent);text-decoration:none}
.cat-list p{font-size:16px;color:var(--muted);margin:8px 0 0;max-width:62ch}
.cat-list .n{font-family:var(--display);font-size:13px;font-weight:700;color:var(--accent);margin-bottom:6px;display:block}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--rule-soft)}
.card{background:var(--ground);padding:22px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:21px;line-height:1.18;min-height:2.4em}
.card p{font-size:15.5px;color:var(--muted);margin:0}
.card .go{margin-top:auto;font-family:var(--display);font-size:13px;font-weight:700;color:var(--accent)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:8px}
.further-grid a{display:block;border-top:2px solid var(--ink);padding-top:12px;font-family:var(--display);font-size:18px;font-weight:600;line-height:1.2;color:var(--ink)}
.further-grid a:hover{color:var(--accent);text-decoration:none}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.related-links a{display:block;border-top:2px solid var(--ink);padding-top:12px;font-family:var(--display);font-size:18px;font-weight:600;line-height:1.2;color:var(--ink)}
.related-links a:hover{color:var(--accent);text-decoration:none}
.entity-ref{font-family:var(--display);font-size:.95em;font-weight:600}
.profile-grid,.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.profile-card{border:2px solid var(--ink);padding:16px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-family:var(--display);font-size:13px;color:var(--accent);margin:0}
.profile-card p{font-size:15.5px;margin:0}
.profile-card .p-links,.profile-card .p-attr{font-family:var(--display);font-size:13px;margin-top:auto}
.org-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 14px;align-items:center;border:1px solid var(--rule-soft);padding:14px;background:#fff}
.org-card .org-logo{grid-row:span 2;width:56px;height:56px;object-fit:contain}
.org-card .org-name{font-family:var(--display);font-weight:600;color:var(--ink);align-self:end}
.org-card .org-host{font-family:var(--display);font-size:12.5px;color:var(--dim);align-self:start}
.org-card.no-logo{grid-template-columns:1fr}

/* CSS-only expander for long lists */
.expander{border-top:1px solid var(--hair)}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander input:checked~.more{display:block}
.expander label{display:inline-flex;gap:8px;align-items:center;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);cursor:pointer;padding:14px 0}
.expander input:checked~label .lbl-open{display:none}
.expander label .lbl-shut{display:none}
.expander input:checked~label .lbl-shut{display:inline}

/* ── supporters ───────────────────────────────────────── */
.supporters{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding-block:26px 30px}
.sup-head{display:flex;justify-content:center;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px;text-align:center}
.sup-head h2{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em}
.sup-grid{display:flex;flex-wrap:wrap;gap:2px;justify-content:center}
.sponsor{flex:0 0 248px;background:var(--deep);color:var(--ground);min-height:158px;padding:18px;display:flex;flex-direction:column;justify-content:center;gap:8px;position:relative}
.sponsor::before{content:"";position:absolute;top:18px;left:18px;width:26px;height:3px;background:var(--accent)}
.sponsor>*{margin-top:0}
.sponsor .sponsor-name{margin-top:14px}
.sponsor:hover{background:#0a2c1b;text-decoration:none}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain;margin-bottom:auto}
.sponsor-name{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ground)}
.sponsor-blurb{font-family:var(--text);font-size:13.5px;line-height:1.45;color:var(--mint)}
@media(max-width:560px){.sponsor{flex:1 1 100%}}

/* ── footer ───────────────────────────────────────────── */
.foot{background:var(--deep);color:var(--ground);padding-block:34px 40px;margin-top:clamp(40px,6vw,80px)}
.foot a{color:var(--ground)}
.foot a:hover{color:var(--accent);text-decoration:none}
.foot-in{display:grid;grid-template-columns:2fr 1fr;gap:36px;align-items:start}
.foot-nav{display:grid;gap:9px;font-family:var(--display);font-size:14px;list-style:none;margin:0;padding:0}
.foot-nav a{display:flex;align-items:center;gap:10px}
.foot-nav .num{color:var(--accent);font-weight:700;font-size:12px;letter-spacing:.08em}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.foot-h{display:block;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:14px;border-bottom:1px solid rgba(246,245,241,.25);padding-bottom:8px}
@media(max-width:620px){.foot-cols{grid-template-columns:1fr;gap:24px}}
.foot .wordmark{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em;border-bottom:4px solid var(--accent);padding-bottom:3px;display:inline-block}
.foot small{display:block;color:var(--mint);font-family:var(--display);font-size:12.5px;margin-top:10px;line-height:1.5}
@media(max-width:700px){.foot-in{grid-template-columns:1fr}}

/* utilities */
.stack{display:grid;gap:clamp(16px,2.4vw,28px)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:900px){.three{grid-template-columns:1fr}}
@media(max-width:700px){.two{grid-template-columns:1fr}}
.bleed-pad{padding-inline:var(--pad)}

/* ── article rhythm: breathing room between blocks ── */
article .fig-bleed+.wrap.prose{padding-top:clamp(28px,4.5vw,48px)}
article .interrupt+.wrap.prose,article section+.wrap.prose{padding-top:clamp(8px,1.6vw,18px)}
article .wrap.prose+.interrupt{margin-top:clamp(30px,4.5vw,52px)}
article .wrap.prose>h2:first-child{margin-top:0}
.interrupt .datatable,.interrupt .timeline,.interrupt .chart,.interrupt .statrow{max-width:980px}

/* ── phones ── */
@media(max-width:600px){
  .mast-in{padding-block:16px}
  .prose p{font-size:17.5px;line-height:1.62}
  .lead{font-size:19.5px;line-height:1.4}
  .byline{font-size:12.5px;gap:6px 12px}
  figcaption{font-size:14px}
  .fig-mat{padding:10px 10px 14px}
  .fig-inset{padding:8px}
  .interrupt .i-head{font-size:20px}
  .statblock{padding:14px 14px 16px}
  .stat-num{font-size:34px}
  .ledger-num{font-size:76px}
  .art-head{padding-top:22px}
  .cat-list a{font-size:19px}
  .sup-head{justify-content:flex-start;text-align:left}
  .sup-grid{justify-content:flex-start}
}
@media(max-width:400px){
  .prose p{font-size:17px}
  .mast .wordmark{font-size:22px;border-bottom-width:4px}
}

/* one centred column for the article: head, prose and read-next share an axis */
article .art-head{max-width:var(--measure)}
.read-next{max-width:var(--measure);margin-top:clamp(30px,5vw,56px)}
.interrupt .datatable,.interrupt .timeline,.interrupt .chart,.interrupt .statrow{margin-inline:auto}

/* ── notes panels: definition cards and two-way comparisons ── */
.deflist{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,2.4vw,32px);max-width:980px;margin-inline:auto}
.def{border-top:3px solid var(--accent);padding-top:13px}
.def-t{display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;margin-bottom:9px}
.def p,.cmp p{font-family:var(--text);font-size:16px;line-height:1.52;margin:0}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);max-width:980px;margin-inline:auto}
.cmp{border-top:5px solid var(--accent);padding-top:15px}
.cmp-h{display:block;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.015em;margin-bottom:10px}
.cmp-note{grid-column:1/-1;font-family:var(--text);font-size:15.5px;line-height:1.5;margin:0;padding-top:16px;border-top:1px solid var(--rule-soft)}
.interrupt.deep .cmp-note{border-top-color:rgba(246,245,241,.28)}
@media(max-width:620px){.compare,.deflist{grid-template-columns:1fr;gap:22px}}

.interrupt .i-head+.deflist,.interrupt .i-head+.compare,.interrupt .i-head+.datatable,.interrupt .i-head+.timeline,.interrupt .i-head+.chart{margin-top:clamp(28px,3.4vw,44px)}

/* everything in the article balanced on one centre axis */
article .art-head{max-width:940px;margin-inline:auto}
article .wrap.prose,.read-next{margin-inline:auto}
article .fig-mat{margin-inline:auto !important}
.interrupt .deflist,.interrupt .compare,.interrupt .datatable,.interrupt .timeline,.interrupt .chart,.interrupt .statrow{margin-inline:auto}
@media(max-width:1000px){article .art-head{max-width:100%}}

/* 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-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-grid .sponsor.sponsor img{height:43px!important;display:block!important;width:100%!important}


/* sp-accent-rule-off: Design draws a 26x3px accent rule at top:18px/left:18px inside every tile
   (.sponsor::before). With the mark at width:100% it lands directly above the logo and reads as a
   printing artefact rather than as a corner mark — the operator's "weird red line along logos".
   The decoration is dropped; the tile's own ground and border are untouched. */
.sponsor::before{display:none!important}

/* op-footer-compact: the footer printed 8 rows for 8 link(s) in
   2 list(s) — 563px at 390, 8% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 563 -> 501px (11% 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(9px,1.94vw,28px)!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px}
}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1776px at 390, 26% of the whole page. Two columns bring it to
   1108px (38% shorter). Checked before writing: no new overflow, smallest mark still
   133px wide, longest blurb 3 lines, tile heights 170-190px.
   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. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sup-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){
  .sup-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:2px!important}
    .sup-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-grid > * *{min-width:0!important;max-width:100%}
    .sup-grid img,.sup-grid svg{max-width:100%;height:auto}
  .sup-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sup-grid (5 tiles), .sup-grid (5 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sup-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sup-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-edge-gutter: copy sat against the screen edge at phone width — figure.fig-bleed > figcaption, span.credit, div.diagram-scroll > svg — with no gutter at all
   (28 runs of text measured within 2px of the glass; 28 remain, in full-bleed
   elements that are set to the edge deliberately).
   ⚠️ THE 18px IS NOT MINE: it is the gutter this build already uses on its own full-width
   containers at the same width, taken as the median of them. Only the columns that TOUCH are
   padded — operator, on kaanet: "Only items needed padding are the ones touching edges of
   browsers ... Not globally." Phone widths only. */
@media (max-width:390px){
  figure.fig-bleed > figcaption{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  span.credit{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  div.diagram-scroll > svg{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
}

/* op-article-width: the article column was capped at 614px (69 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article div.wrap.prose{--measure:min(96.549ch, 100%)!important}
}
@media (min-width:1600px){
  article div.wrap.prose{--measure:min(clamp(96.549ch, 70.000vw, calc(96.549ch * 1.2)), 100%)!important}
  article div.wrap.prose > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.fig-bleed > img,
  div.prose.wrap > figure.fig-inset > img,
  main > figure.fig-bleed > img,
  section > figure.fig-bleed > img,
  section.wrap > figure.fig-mat > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:767px){.sup-grid.sup-grid:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(232px,calc(50% - 6px)),1fr))!important;column-gap:12px!important;row-gap:12px!important;justify-content:stretch!important;align-items:stretch!important}.sup-grid.sup-grid > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}