/* ============================================================
   core-skills.com — “It was never the windows”
   PALETTE — five members, each with a job:
     --ground  #F2EFE8  paper ground
     --ink     #1a1a17  ink (text on ground)
     --accent  #0E4A34  accent, saturated — bands, panels, plates
     --flag    #D81E5B  flag/alert, saturated — measured values, exceedance
     --mint    #5FD1A0  accent on dark grounds (rail, black panels)
   Neutrals in support: --panel --rule --quiet --black
   The two saturated members (accent 163°, flag 340°) sit 177° apart in hue.
   ============================================================ */
:root{
  --ground:#F2EFE8; --ink:#1a1a17; --accent:#0E4A34; --flag:#D81E5B; --mint:#5FD1A0;
  --panel:#e8e4da; --rule:#c9c3b6; --quiet:#6d685c; --black:#12120f; --dim:#33322b;
  --accent-pale:#8FCFB2; --accent-wash:#dfeee7; --flag-deep:#a01346;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --mono:'Courier Prime',ui-monospace,'Courier New',monospace;
  --rail:302px;
  --t-xs:12px; --t-s:15px; --t-m:17px; --t-b:19px; --t-l:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);font-size:var(--t-b);line-height:1.65;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--flag)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1.06;margin:0}
p{margin:0 0 1.05em}
:focus-visible{outline:2px solid var(--flag);outline-offset:3px}
.kicker,.label,.credit,.plate,.unit,.stat-num,.t-when,.sponsor-name,.rail-foot,.pill{font-family:var(--mono)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--accent);color:var(--ground);padding:10px 14px;z-index:99}

/* ---------- drawn device: icons ---------- */
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:44px;height:44px;stroke-width:1.15}
.ico-xl{width:64px;height:64px;stroke-width:1}

/* ---------- shell + rail header ---------- */
.shell{display:flex;align-items:flex-start;min-height:100vh}
.rail{width:var(--rail);flex:none;background:var(--black);color:#EDEAE3;align-self:stretch;
      position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:30px 24px 34px}
.main{flex:1 1 auto;min-width:0}
.brand{display:flex;flex-direction:column;gap:15px;align-items:flex-start;color:#EDEAE3}
.brand svg{color:var(--mint);width:84px;height:84px}
.brand-name{font-size:44px;font-weight:700;line-height:.92;letter-spacing:-.025em;white-space:nowrap}
.brand-sub{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8f8a7e;margin-top:9px}
.rail hr{border:0;border-top:1px solid #33322b;margin:26px 0 22px}
.navgroup{margin-bottom:6px}
.navgroup>a.g,.navgroup>span.g{display:flex;gap:14px;align-items:center;font-size:20px;font-weight:600;line-height:1.14;color:#EDEAE3;letter-spacing:-.01em;padding:9px 0}
.navgroup>span.g{color:var(--mint)}
.navgroup>a.g .ico,.navgroup>span.g .ico{width:32px;height:32px;stroke-width:1.15;margin-top:0;color:var(--mint)}
.navgroup>a.g:hover{color:var(--mint)}
/* second level: present in the HTML, revealed by the group it belongs to.
   No offset panel, so there is no dead gap to cross. */
.navgroup ul{display:none;list-style:none;margin:2px 0 10px;padding:0 0 0 46px;flex-direction:column;gap:6px}
.navgroup:hover ul,.navgroup:focus-within ul,.navgroup:has(span.g) ul{display:flex}
.navgroup ul a{font-size:var(--t-s);color:#b2ada0;line-height:1.35}
.navgroup ul a:hover,.navgroup ul a[aria-current]{color:#EDEAE3}
.navgroup ul a[aria-current]{border-left:2px solid var(--flag);margin-left:-9px;padding-left:7px}
.rail-foot{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#EDEAE3;display:inline-block}
.rail-foot:hover{color:var(--mint)}

/* ---------- wrappers ---------- */
.wrap{max-width:1160px;margin-inline:auto;padding-inline:clamp(20px,4vw,56px)}
.prose{max-width:73ch}
.band{padding-block:clamp(38px,5vw,68px)}
.band-tight{padding-block:clamp(26px,3vw,40px)}
.rule-top{border-top:1px solid var(--rule)}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:11px;flex-wrap:wrap;line-height:1.45}
.eyebrow .ico{width:22px;height:22px;color:var(--accent)}
.eyebrow a{color:var(--accent);border-bottom:1px solid var(--accent-pale)}
.on-dark .eyebrow,.sheet .eyebrow{color:var(--accent-pale)}
.on-dark .eyebrow .ico,.sheet .eyebrow .ico{color:var(--mint)}

/* ---------- the result sheet (homepage opener) ---------- */
.sheet{background:var(--accent);color:var(--ground)}
.sheet h1{font-size:clamp(34px,4.6vw,66px);margin:18px 0 0;max-width:19ch}
.sheet .dek{font-size:var(--t-l);line-height:1.5;color:var(--accent-wash);max-width:62ch;margin:22px 0 0}
.sheet a{color:var(--ground);border-bottom:1px solid var(--mint)}
.sheet a:hover{color:var(--mint)}
.readout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 280px;gap:clamp(20px,3vw,44px);align-items:end;margin-top:clamp(28px,4vw,52px)}
.readout .bar{height:20px;background:var(--accent-pale)}
.readout .bar.m{background:var(--flag)}
.readout .lab{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-pale);margin-bottom:11px}
.readout .lab.m{color:#F5A8C2}
.readout .sub{font-family:var(--mono);font-size:14px;margin-top:11px;color:var(--accent-wash)}
.delta{display:flex;align-items:center;gap:16px;border-left:1px solid #2c6d53;padding-left:24px}
.delta svg{color:#F5A8C2;flex:none}
.delta .n{font-family:var(--mono);font-weight:700;font-size:clamp(30px,3vw,44px);line-height:.9}
.sheet .attr{font-family:var(--mono);font-size:var(--t-xs);line-height:1.55;color:#7FBEA1;margin:14px 0 0}
.sheet-foot{display:flex;justify-content:space-between;gap:36px;align-items:flex-end;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,40px);padding-top:20px;border-top:1px solid #2c6d53}
.sheet-foot p{margin:0;max-width:66ch;color:var(--accent-wash)}

/* ---------- figure system: three treatments, one family ---------- */
figure{margin:0}
.plate{position:absolute;top:14px;left:14px;background:var(--accent);color:var(--ground);
  font-size:var(--t-xs);letter-spacing:.14em;padding:5px 11px}
.plate.f{background:var(--flag)}
.cap{font-size:var(--t-m);line-height:1.5;margin:12px 0 0;max-width:62ch;color:var(--dim)}
.credit{display:block;font-size:var(--t-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--quiet);margin-top:7px}

/* 1 — full-bleed band, caption in an offset plate below */
.fig-bleed{margin:clamp(30px,4vw,52px) 0}
.fig-bleed .frame{position:relative}
.fig-bleed img{width:100%;height:clamp(260px,42vw,540px);object-fit:cover}
.fig-bleed .capwrap{border-top:2px solid var(--accent);padding-top:12px;margin-top:0;
  display:flex;gap:28px;justify-content:space-between;flex-wrap:wrap}
.fig-bleed .cap{margin:0}

/* 2 — mat: the photograph sits on a mat inside a hairline */
.fig-mat{margin:clamp(26px,3vw,40px) 0}
.fig-mat .frame{position:relative;background:var(--panel);border:1px solid var(--ink);padding:14px}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat.hero img{aspect-ratio:16/9}

/* 3 — a smaller plate; at wide widths it breaks out of the measure and the prose wraps beside it */
.fig-inset{margin:26px 0;width:min(100%,480px)}
.fig-inset .frame{position:relative;border:1px solid var(--rule);padding:8px;background:var(--ground)}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig-inset .cap{font-size:var(--t-s);max-width:46ch}
@media(min-width:1400px){
  .fig-inset{float:right;width:320px;margin:10px -180px 26px 40px}
}
@media(min-width:1240px){
}
.art-body>.strip,.art-body>.fig-bleed,.art-body>h2,.art-body>.pullquote,.art-body>.callout,.art-foot{clear:both}

/* ---------- instrument strip: the notes material, breaking the prose ---------- */
.strip{background:var(--accent);color:var(--ground);margin:clamp(32px,4vw,54px) 0;padding:clamp(24px,3vw,38px) 0}
.strip h2,.strip h3{font-size:var(--t-l);margin:0 0 20px;color:var(--ground)}
.strip .keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px 40px;list-style:none;margin:0;padding:0}
.strip .keys li{border-top:1px solid #2c6d53;padding-top:12px}
.strip .keys .term{display:block;font-family:var(--mono);font-size:var(--t-m);color:var(--mint);margin-bottom:5px}
.strip .keys .desc{font-size:var(--t-m);line-height:1.5;color:var(--accent-wash)}
.strip.dark{background:var(--black)}
.strip.dark .keys li{border-top-color:#33322b}

/* ---------- article components ---------- */
.lead{font-size:clamp(20px,2.1vw,24px);line-height:1.48;color:var(--dim);max-width:60ch}
.pullquote{margin:clamp(30px,3.5vw,46px) 0;padding-left:26px;border-left:3px solid var(--flag);max-width:60ch}
.pullquote p{font-size:clamp(22px,2.4vw,30px);line-height:1.32;margin:0;letter-spacing:-.015em}
.blockquote{margin:30px 0;background:var(--panel);border-left:3px solid var(--accent);padding:22px 26px;max-width:64ch}
.blockquote p{margin:0 0 10px;font-size:var(--t-l);line-height:1.45}
.blockquote cite{font-family:var(--mono);font-size:var(--t-s);font-style:normal;color:var(--quiet)}
.callout{margin:30px 0;border:1px solid var(--ink);background:var(--panel);padding:22px 24px;max-width:66ch}
.callout p{margin:0;font-size:var(--t-m)}
.callout>*+*{margin-top:10px}
p.note{font-size:var(--t-m);color:var(--dim);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0;max-width:64ch}
.entity-ref{white-space:nowrap;border-bottom:1px solid var(--rule)}

/* tables */
.datatable,.versus{width:100%;border-collapse:collapse;font-size:var(--t-m);margin:26px 0}
.datatable th,.versus th{background:var(--black);color:var(--ground);font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.13em;text-transform:uppercase;font-weight:400;text-align:left;padding:11px 13px}
.datatable td,.versus td{padding:12px 13px;border-bottom:1px solid var(--rule);vertical-align:top}
.datatable tbody tr:nth-child(even),.versus tbody tr:nth-child(even){background:var(--panel)}
.versus td:first-child{font-weight:600}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* stats */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;margin:28px 0}
.statblock{border-top:2px solid var(--ink);padding-top:14px}
.stat-num{display:block;font-weight:700;font-size:clamp(30px,3.4vw,46px);line-height:.95;color:var(--flag)}
.statblock:nth-child(odd) .stat-num{color:var(--accent)}
.stat-label{display:block;font-size:var(--t-m);line-height:1.45;color:var(--dim);margin-top:9px}

/* timeline */
.timeline{list-style:none;margin:26px 0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:8px 26px;
  border-top:1px solid var(--rule);padding:13px 0}
.t-when{font-size:var(--t-s);letter-spacing:.04em;color:var(--accent);line-height:1.4}
.t-what{font-size:var(--t-m);line-height:1.5}

/* charts */
.chart{margin:30px 0;border:1px solid var(--ink);background:var(--panel);padding:22px}
.chart svg{width:100%;height:auto;display:block;color:var(--ink)}
.chart figcaption{font-size:var(--t-m);line-height:1.5;color:var(--dim);margin-top:14px;max-width:62ch}
.chart .axis{font-family:var(--mono);font-size:12px;fill:var(--quiet)}
.chart .barfill{fill:var(--accent)}
.chart .barfill.hi{fill:var(--flag)}

/* galleries + article figure default */
.article-figure{margin:26px 0}
.article-figure img{width:100%}
.article-figure figcaption{font-size:var(--t-m);line-height:1.5;color:var(--dim);margin-top:11px;max-width:62ch}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:28px 0}
.gallery figure{display:flex;flex-direction:column}
.gallery img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule)}
.gallery figcaption{font-size:var(--t-s);color:var(--dim);margin-top:9px}
.map-figure .map-slot{width:100%;aspect-ratio:16/10;border:1px solid var(--ink);background:var(--panel)}
.map-figure figcaption{font-size:var(--t-m);color:var(--dim);margin-top:11px}

/* cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:26px 0}
.profile-card{border:1px solid var(--rule);background:var(--panel);padding:20px;display:flex;flex-direction:column}
.profile-card .p-photo{width:84px;height:84px;object-fit:cover;border-radius:50%;margin-bottom:14px}
.profile-card h3{font-size:var(--t-l)}
.profile-card .p-role{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin:7px 0 10px}
.profile-card p{font-size:var(--t-m);margin:0 0 10px}
.profile-card .p-links{margin-top:auto;font-size:var(--t-s)}
.profile-card.no-photo{border-left:3px solid var(--accent)}
.org-grid{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.org-card{flex:0 0 262px;border:1px solid var(--rule);background:var(--ground);padding:14px;display:flex;flex-direction:column;gap:6px}
.org-card:hover{border-color:var(--accent)}
.org-logo{height:34px;width:auto;max-width:100%;object-fit:contain}
.org-name{font-weight:600;font-size:var(--t-m);line-height:1.25}
.org-host{font-family:var(--mono);font-size:var(--t-xs);color:var(--quiet)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;margin:26px 0;background:var(--rule)}
.further-grid a{background:var(--ground);padding:18px 20px;font-size:var(--t-m);line-height:1.35;font-weight:600;display:flex;align-items:flex-start;gap:10px;min-height:96px}
.further-grid a .ico{margin-top:2px;color:var(--accent)}
.related-links{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--rule)}
.related-links li{background:var(--panel)}
.related-links a{display:flex;gap:13px;padding:22px 24px;font-size:var(--t-l);font-weight:600;line-height:1.25;min-height:112px;align-items:flex-start}
.related-links a:hover{background:var(--ground)}
.related-links a .ico{margin-top:4px;width:26px;height:26px;color:var(--accent);flex:none}

/* ---------- article page ---------- */
.art-head{padding-top:clamp(34px,4vw,58px)}
.art-head h1{font-size:clamp(32px,4.2vw,58px);margin:16px 0 0;max-width:24ch}
.art-body{font-size:var(--t-b);line-height:1.68;margin-inline:auto}
.art-body h2{font-size:clamp(24px,2.6vw,32px);margin:clamp(32px,4vw,46px) 0 16px;max-width:40ch}
.art-body h2:first-child{margin-top:26px}
.art-body ul,.art-body ol{max-width:66ch;padding-left:22px}
.art-body li{margin-bottom:8px}
.art-foot{border-top:2px solid var(--ink);margin-top:clamp(40px,5vw,66px);padding-block:30px clamp(46px,6vw,78px)}
.art-foot .eyebrow{margin-bottom:6px}

/* ---------- homepage pieces ---------- */
.lede-piece{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3.5vw,52px);align-items:start}
.lede-piece h2{font-size:clamp(28px,3.4vw,44px);max-width:22ch}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,52px);align-items:start}
.quiet-line{font-size:clamp(24px,3vw,38px);line-height:1.28;letter-spacing:-.02em;max-width:34ch;margin:0}
.quiet-band{display:flex;gap:clamp(20px,3vw,40px);align-items:flex-start}
.quiet-band svg{color:var(--flag)}
.sectionlist{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column}
.sectionlist li{border-top:1px solid var(--rule)}
.sectionlist a{display:block;padding:15px 0}
.sectionlist h3{font-size:var(--t-l);font-weight:600;line-height:1.15;color:var(--ink)}
.sectionlist a:hover h3{color:var(--flag)}
.sectionlist p{font-size:var(--t-m);color:var(--quiet);margin:6px 0 0;max-width:52ch}
.pill{display:inline-block;font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--rule);padding:5px 10px;color:var(--quiet)}

/* ---------- supporters ---------- */
.supporters{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sponsor-tier{display:grid;gap:18px;margin:0;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.sponsor-tier.feat-tier{grid-template-columns:minmax(0,1fr)}
@media(min-width:1160px){.sponsor-tier.feat-tier{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sponsor-tier+.tier-label{margin-top:34px}
.tier-label{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 16px;border-top:2px solid var(--ink);padding-top:10px}
.sponsor{background:var(--ground);border:1px solid var(--rule);padding:14px;
  display:flex;flex-direction:column;gap:11px;color:var(--ink)}
.sponsor:hover{border-color:var(--accent)}
.sponsor-logo{background:var(--black);height:58px;display:flex;align-items:center;justify-content:center;padding:7px 12px}
.sponsor-logo img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-name{font-size:var(--t-s);letter-spacing:.02em;line-height:1.3}
.sponsor.feat{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px;align-items:center}
.sponsor-name,.sponsor-blurb{overflow-wrap:anywhere}
.sponsor.feat .sponsor-logo{height:66px;grid-row:span 2}
.sponsor.feat .sponsor-name{align-self:end;font-size:var(--t-m);font-weight:600}
.sponsor.feat .sponsor-blurb{align-self:start;font-size:var(--t-s);line-height:1.4;color:var(--dim)}
@media(max-width:620px){
  .sponsor,.sponsor.feat{display:flex;flex-direction:column}
  .sponsor.feat .sponsor-logo{grid-row:auto}
}

/* ---------- register / archive ---------- */
.register{width:100%;border-collapse:collapse;font-size:var(--t-m)}
.register th{background:var(--black);color:var(--ground);font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.13em;text-transform:uppercase;font-weight:400;text-align:left;padding:11px 13px}
.register td{padding:13px;border-bottom:1px solid var(--rule);vertical-align:top}
.register td:first-child{font-weight:600;width:32%}
.register tbody tr:hover{background:var(--panel)}
.register .sec{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);white-space:nowrap}

/* ---------- footer ---------- */
.site-foot{background:var(--black);color:#b2ada0;padding-block:clamp(30px,4vw,46px)}
.site-foot .line{color:var(--ground);font-size:var(--t-l);max-width:60ch;margin:0}
.site-foot a{color:var(--mint)}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;margin-top:30px;
  border-top:1px solid #33322b;padding-top:24px;font-size:var(--t-s)}
.foot-cols h4{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;color:#8f8a7e;font-weight:400;margin-bottom:11px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.foot-cols a{color:#b2ada0}
.foot-cols a:hover{color:var(--ground)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .shell{display:block}
  .rail{width:auto;position:static;max-height:none;overflow:visible;padding:24px clamp(20px,4vw,32px) 28px}
  /* no hover on touch: the second level stays open in the header block */
  .navgroup ul{display:flex}
  .rail-nav{display:flex;flex-direction:column;gap:18px}
  .navgroup{margin-bottom:0}
  .navgroup ul{gap:4px}
  .readout{grid-template-columns:1fr 1fr;}
  .delta{grid-column:span 2;border-left:0;border-top:1px solid #2c6d53;padding:18px 0 0}
  .lede-piece,.split{grid-template-columns:minmax(0,1fr)}
  .fig-inset{float:none;margin:26px 0}
}
@media(max-width:560px){
  .readout{grid-template-columns:1fr}
  .delta{grid-column:auto}
  .timeline li{grid-template-columns:1fr}
  .register td:first-child{width:auto}
  .art-head h1,.lede-title,.sheet h1{letter-spacing:-.015em}
  .fig-bleed .capwrap{gap:10px}
  .strip .keys{gap:16px}
  .brand-name{font-size:38px}
  .brand svg{width:66px;height:66px}
}
@media print{.rail,.supporters{display:none}.shell{display:block}}

/* ---------- footer nav, simplified ---------- */
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:26px;border-top:1px solid #33322b;padding-top:20px;font-size:var(--t-m)}
.foot-nav a{color:#b2ada0}
.foot-nav a:hover{color:var(--ground)}

/* ---------- homepage: flagship band ---------- */
.lede-title{font-size:clamp(30px,4vw,52px);max-width:24ch;margin:16px 0 0}
.lede-title a{color:var(--ink)}
.lede-title a:hover{color:var(--flag)}
.lede-lead{margin-top:18px;max-width:58ch}
.lede-piece{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);margin-top:clamp(22px,3vw,34px)}
.lede-side{border-top:2px solid var(--ink);padding-top:16px}
.lede-side .sectionlist{margin-top:8px}
.lede-side .sectionlist li:first-child{border-top:0}

/* ---------- homepage: signature band, plate running to the edge ---------- */
.sig-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding-left:max(calc((100% - 1160px)/2 + clamp(20px,4vw,56px)), clamp(20px,4vw,56px))}
.sig-copy h2{font-size:clamp(26px,3.2vw,42px);max-width:20ch}
.sig-img .frame{position:relative}
.sig-img img{width:100%;height:clamp(280px,32vw,470px);object-fit:cover}
.sig-img .cap{padding-right:clamp(20px,4vw,56px)}
@media(max-width:1000px){
  .sig-grid{grid-template-columns:minmax(0,1fr);padding-inline:clamp(20px,4vw,56px)}
  .lede-piece{grid-template-columns:minmax(0,1fr)}
}

/* 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-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-tier.feat-tier .feat.sponsor .sponsor-logo.sponsor-logo{padding:8px 12px!important;box-sizing:border-box!important;height:38px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.sponsor-tier.feat-tier .feat.sponsor .sponsor-logo.sponsor-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.sponsor-tier .sponsor .sponsor-logo.sponsor-logo{padding:8px 12px!important;box-sizing:border-box!important;height:43px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.sponsor-tier .sponsor .sponsor-logo.sponsor-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.sponsor-tier .sponsor .sponsor-logo.sponsor-logo{display:block!important;width:100%!important}

/* op-nav-collapse: this nav printed 818px of stacked links at 390 before any content
   (17 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "inset-box", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (20px measured) the button carries the build's
   gutter (clamp(20px,4vw,56px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (940px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-fold{display:none}
@media (max-width:940px){
  .nav-fold{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;border:1px solid currentColor;border-radius:2px;padding:10px 15px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-fold-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .rail-nav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-fold-c:checked ~ .rail-nav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .nav-fold:not(:has(~ .rail-nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1705px at 390, 23% of the whole page. Two columns bring it to
   948px (44% shorter). Checked before writing: no new overflow, smallest mark still
   114px wide, longest blurb 3 lines, tile heights 104-189px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsor-tier.feat-tier, .sponsor-tier), 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-tier.feat-tier{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-tier.feat-tier > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier.feat-tier > * *{min-width:0!important;max-width:100%}
    .sponsor-tier.feat-tier img,.sponsor-tier.feat-tier svg{max-width:100%;height:auto}
  .sponsor-tier{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-tier > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier > * *{min-width:0!important;max-width:100%}
    .sponsor-tier img,.sponsor-tier svg{max-width:100%;height:auto}
}

/* op-edge-gutter: copy sat against the screen edge at phone width — main.main — with no gutter at all
   (6 runs of text measured within 2px of the glass; 6 remain, in full-bleed
   elements that are set to the edge deliberately).
   ⚠️ THE 20px 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){
  main.main{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (phone: .sponsor-tier.feat-tier 9 rows at 640). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (max-width:640px){
  .sponsor-tier.feat-tier .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(figure.fig-bleed > div.frame > img,
  figure.fig-inset > div.frame > img,
  figure.fig-mat > div.frame > img,
  figure.fig-mat.hero > div.frame > img,
  figure.sig-img > div.frame > img){height:auto}
/* op-img-dims:end */
@media (min-width:621px) and (max-width:659px){.feat-tier.feat-tier > .sponsor.feat[data-partner]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;row-gap:8px!important}.feat-tier.feat-tier > .sponsor.feat[data-partner] > *{grid-column:1!important;grid-row:auto!important;width:auto!important}}

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}
@media (min-width:700px) and (max-width:1119px){.sponsor-tier.feat-tier:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)}.sponsor-tier.feat-tier:has(> [data-partner]) > [data-partner]{width:auto!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important}.sponsor-tier.feat-tier:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}