/* knowingknowledge.com — Register of effects
   Palette: ground · ink · accent (cobalt) · secondary (magenta) · mute */
:root{
  --ground:#F1F0EC;
  --ground-2:#E7E5DF;
  --ink:#0E1013;
  --ink-2:#1A1D21;
  --accent:#2340D8;          /* cobalt — bands, rules, links, numerals */
  --secondary:#E5197B;       /* magenta — contested marks, tinted plates */
  --mute:#4C4E51;
  --hair:rgba(14,16,19,.17);
  --hair-light:rgba(241,240,236,.22);
  --amber:#8A6A1E;
  --display:"Familjen Grotesk",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --pad:clamp(20px,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(--serif);font-size:19px;line-height:1.62;
  font-variant-numeric:oldstyle-nums;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.04;margin:0}
h2,h3{letter-spacing:-.015em;line-height:1.14}
p{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--hair);margin:2.4rem 0}
.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--pad)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.kicker--quiet{color:var(--mute)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}
.ico{width:1.35em;height:1.35em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ico--lg{width:2.4em;height:2.4em;stroke-width:1.3}

/* ---------- masthead ---------- */
.masthead{background:var(--ink);color:var(--ground);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--hair-light)}
.masthead-in{display:flex;align-items:center;gap:22px;padding:12px var(--pad);max-width:1400px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;color:var(--ground);flex:none}
.brand:hover{text-decoration:none;color:#fff}
.brand svg{width:34px;height:34px;stroke:var(--secondary);fill:none;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.brand-name{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.03em}
.brand-name .tld{color:rgba(241,240,236,.5)}
.masthead .spacer{flex:1}
.util{display:flex;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}
.util a{color:rgba(241,240,236,.78);display:flex;align-items:center;gap:7px;padding:7px 9px}
.util a .ico{width:16px;height:16px;stroke-width:1.7;color:var(--secondary)}
.util a:hover{color:#fff;text-decoration:none;background:rgba(241,240,236,.08)}
.menu{position:relative}
.menu>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ground);border:1px solid var(--hair-light);padding:7px 11px;
}
.menu>summary .ico{width:16px;height:16px;stroke-width:1.7}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{border-color:var(--secondary)}
.menu>summary .chev{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.menu[open]>summary{background:var(--accent);border-color:var(--accent)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 10px);width:min(92vw,560px);
  background:var(--ground);color:var(--ink);border:2px solid var(--ink);
  box-shadow:0 26px 60px rgba(14,16,19,.34);padding:14px;z-index:70;
  max-height:min(72vh,620px);overflow:auto;
}
.menu-panel h4{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 10px 4px}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ground)}
.menu-grid a{background:var(--ground);box-shadow:0 0 0 1px var(--hair);display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px;color:var(--ink);font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.15}
.menu-grid a:hover{background:var(--ink);color:var(--ground);text-decoration:none}
.menu-grid a .ico{width:26px;height:26px;stroke-width:1.4;color:var(--accent)}
.menu-grid a:hover .ico{color:var(--secondary)}
.menu-grid a .n{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.1em;color:var(--mute)}
.menu-grid a:hover .n{color:rgba(241,240,236,.6)}
.menu-foot{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;border-top:1px solid var(--hair);padding-top:11px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding-inline:4px}

/* section bar — always visible, icon-led, nine even cells */
.secbar{background:var(--ink-2);border-top:1px solid var(--hair-light)}
.secbar-in{max-width:1400px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(9,1fr)}
.secbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;
  padding:11px 6px 12px;color:rgba(241,240,236,.78);
  box-shadow:inset 1px 0 0 var(--hair-light);text-align:center;
}
.secbar a:first-child{box-shadow:none}
.secbar a .ic{display:flex;align-items:center;justify-content:center;height:26px}
.secbar a .ico{width:24px;height:24px;stroke-width:1.5;color:var(--secondary);flex:none}
.secbar a .lb{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.1}
.secbar a .n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(241,240,236,.5)}
.secbar a .t{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:-.005em;line-height:1.15;text-wrap:balance}
.secbar a:hover{background:var(--accent);color:#fff;text-decoration:none}
.secbar a:hover .ico,.secbar a:hover .n{color:#fff}
.secbar a[aria-current="page"]{background:var(--accent);color:#fff}
.secbar a[aria-current="page"] .ico,.secbar a[aria-current="page"] .n{color:#fff}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- bands ---------- */
section{position:relative}
.band{padding:clamp(38px,5vw,68px) 0}
.band--tight{padding:clamp(26px,3vw,40px) 0}
.band--ink{background:var(--ink);color:var(--ground)}
.band--accent{background:var(--accent);color:#fff}
.band--rule{border-top:2px solid var(--ink)}
.band--hair{border-top:1px solid var(--hair)}
.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px}
.band-head h2{font-size:clamp(26px,3.2vw,38px)}
.band-head p{max-width:56ch;margin:6px 0 0;color:var(--mute);font-size:17px}
.band--ink .band-head p{color:rgba(241,240,236,.7)}
.one-line{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.3vw,40px);line-height:1.24;letter-spacing:-.02em;max-width:34ch;margin:0}
.one-line--wide{max-width:52ch}

/* lead / flagship */
.lead-band{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.lead-media{position:relative;min-height:440px;background:var(--ink)}
.lead-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.lead-media .stamp{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--ground);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px}
.lead-body{padding:clamp(26px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.lead-body h2{font-size:clamp(30px,4.2vw,58px);line-height:1.02}
.lead-body h2 a{color:inherit}
.lead-body .dek{font-size:clamp(18px,1.4vw,21px);line-height:1.48;margin:0;max-width:46ch}
.lead-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.lead-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--hair)}
.lead-facts div{padding:14px 16px 0;border-right:1px solid var(--hair)}
.lead-facts div:last-child{border-right:0}
.lead-facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.lead-facts dd{margin:0;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.25}

/* ---------- register / tables ---------- */
.reg-wrap{position:relative;padding:12px}
.reg-wrap::before,.reg-wrap::after{content:"";position:absolute;width:28px;height:28px;border:2px solid var(--accent)}
.reg-wrap::before{left:0;top:0;border-right:0;border-bottom:0}
.reg-wrap::after{right:0;bottom:0;border-left:0;border-top:0}
table.datatable,table.versus,table.register{width:100%;border-collapse:collapse;font-size:16.5px}
table.datatable th,table.register th,table.versus th{
  background:var(--ink);color:var(--ground);font-family:var(--mono);font-weight:400;
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;text-align:left;padding:11px 12px;vertical-align:bottom;
}
table.datatable td,table.register td,table.versus td{padding:14px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
table.register tbody tr:nth-child(even),table.datatable tbody tr:nth-child(even){background:rgba(35,64,216,.045)}
table.register .no{font-family:var(--mono);font-size:13px;color:var(--accent);white-space:nowrap}
table.register .eff{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2}
table.register .eff a{color:var(--ink)}
table.register .eff a:hover{color:var(--accent)}
table.register .brk{color:var(--mute);font-size:15.5px}
table.versus th:first-child,table.versus td:first-child{width:34%}
.mark{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mark--broad{color:var(--accent)}
.mark--bounded{color:var(--ink)}
.mark--mixed{color:var(--amber)}
.mark--contested,.mark--unsupported{color:var(--secondary)}
.band--ink .mark--bounded{color:var(--ground)}
.reg-key{display:flex;flex-wrap:wrap;gap:16px 26px;margin-top:16px;font-size:15px;color:var(--mute)}
.reg-key b{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:400}

/* ---------- cards ---------- */
.cards{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--ground);box-shadow:0 0 0 1px var(--hair);padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px;min-height:100%}
.card--ink{background:var(--ink);color:var(--ground);box-shadow:0 0 0 1px var(--hair-light)}
.card .num{font-family:var(--mono);font-size:38px;line-height:1;color:var(--accent)}
.card h3{font-size:23px}
.card h3 a{color:inherit}
.card p{margin:0;font-size:16.5px;color:var(--mute)}
.card--ink p{color:rgba(241,240,236,.75)}
.card .mark{margin-top:auto;padding-top:12px}
.sec-grid{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.sec-tile{background:var(--ground);box-shadow:0 0 0 1px var(--hair);padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px}
.sec-tile:hover{background:#fff;text-decoration:none}
.sec-tile .top{display:flex;align-items:center;gap:10px;color:var(--accent)}
.sec-tile .top .n{font-family:var(--mono);font-size:12.5px}
.sec-tile h3{font-size:21px;color:var(--ink)}
.sec-tile p{margin:0;font-size:15.5px;color:var(--mute)}
.sec-tile .count{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* two entries opened up */
.pair{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.pair>article{background:var(--ground);box-shadow:0 0 0 1px var(--hair);padding:clamp(22px,2.4vw,34px)}
.pair h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:12px}
.pair h3 a{color:inherit}
.pair .num-big{font-family:var(--mono);font-size:46px;line-height:1;color:var(--accent);margin-bottom:6px}
.pair .num-big.alt{color:var(--secondary)}
.pair p{font-size:17px}
.pair .article-figure{margin:1.6rem 0 0}
.pair .article-figure img{aspect-ratio:16/10;object-fit:cover}

/* ---------- figures ---------- */
figure{margin:0}
.article-figure{margin:2.5rem 0}
.article-figure .frame{position:relative}
.article-figure .frame::before,.article-figure .frame::after{content:"";position:absolute;width:24px;height:24px;border:2px solid var(--ground);z-index:2;box-shadow:0 0 0 1px rgba(14,16,19,.28)}
.article-figure .frame::before{left:9px;top:9px;border-right:0;border-bottom:0}
.article-figure .frame::after{right:9px;bottom:9px;border-left:0;border-top:0}
.article-figure img{width:100%}
.article-figure figcaption{display:flex;gap:14px;margin-top:12px}
.article-figure figcaption .fno{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--accent);white-space:nowrap;padding-top:4px}
.article-figure figcaption .cap{font-size:16.5px;line-height:1.45;max-width:58ch}
.article-figure figcaption .credit{display:block;font-family:var(--mono);font-size:11.5px;color:#7B7D80;margin-top:6px;letter-spacing:.02em}
/* treatment 2 — mat */
.article-figure--mat{background:var(--ink);padding:14px 14px 4px;color:var(--ground)}
.article-figure--mat .frame::before,.article-figure--mat .frame::after{border-color:rgba(241,240,236,.55)}
.article-figure--mat figcaption{padding:0 4px 14px}
.article-figure--mat figcaption .cap{color:var(--ground)}
.article-figure--mat figcaption .credit{color:rgba(241,240,236,.5)}
/* treatment 3 — inset in the column */
.article-figure--inset{max-width:330px;margin:.5rem 0 1.6rem}
.article-figure--inset .frame::before,.article-figure--inset .frame::after{width:16px;height:16px;left:7px;top:7px}
.article-figure--inset figcaption{display:block;border-top:2px solid var(--accent);padding-top:10px;margin-top:10px}
.article-figure--inset figcaption .fno{display:block;padding:0 0 5px}
.article-figure--inset figcaption .cap{display:block}
.article-figure--inset figcaption .cap{font-size:15.5px}
/* treatment 4 — tinted plate (contested material) */
.article-figure--tint .frame{background:linear-gradient(160deg,var(--secondary),#8E0F4E)}
.article-figure--tint img{mix-blend-mode:luminosity;opacity:.92}
.article-figure--tint figcaption .fno{color:var(--secondary)}
/* treatment 5 — full bleed band */
.article-figure--bleed .frame::before,.article-figure--bleed .frame::after{width:34px;height:34px;left:16px;top:16px}
.article-figure--bleed .frame::after{right:16px;bottom:16px;left:auto;top:auto}
.article-figure--bleed img{max-height:min(70vh,620px);object-fit:cover}
.article-figure--bleed figcaption{padding-inline:var(--pad)}
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:2.2rem 0}
.gallery figure img{aspect-ratio:16/10;object-fit:cover}
.gallery figcaption{font-size:15px;line-height:1.4;margin-top:8px;color:var(--mute)}
.map-figure .map-slot{aspect-ratio:16/10;border:1px solid var(--hair);background:var(--ground-2)}

/* ---------- article ---------- */
.entry-head{border-bottom:2px solid var(--ink);padding:clamp(26px,4vw,52px) 0 0}
.entry-head .where{display:flex;align-items:center;gap:10px;color:var(--accent);font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.entry-head h1{font-size:clamp(34px,5.6vw,68px);max-width:24ch}
.entry-head .lead{font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);line-height:1.45;max-width:52ch;margin:20px 0 26px;font-weight:600}
.entry-data{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:2px solid var(--ink);margin-top:8px}
.entry-data>div{padding:16px 18px 18px;border-right:1px solid var(--hair)}
.entry-data>div:last-child{border-right:0}
.entry-data dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.entry-data dd{margin:0;font-size:16.5px;line-height:1.4}
.entry-data dd.big{font-family:var(--display);font-weight:600}

.article-body{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--pad),1fr)
    [wide-start] minmax(0,110px)
    [text-start] minmax(0,var(--measure))
    [text-end] minmax(0,110px)
    [wide-end] minmax(var(--pad),1fr) [full-end];
  padding:clamp(30px,4vw,54px) 0 20px;
}
.article-body>*{grid-column:text}
.article-body>.wide{grid-column:wide}
.article-body>.full{grid-column:full}
.article-body h2{font-size:clamp(24px,2.6vw,33px);margin:2.2rem 0 .8rem}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:21px;margin:1.6rem 0 .5rem}
.article-body p{font-size:19px}
.article-body p.opener{font-size:21px;line-height:1.5}
/* hard data set to read as data */
.fig{font-family:var(--mono);font-weight:500;font-size:.94em;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap}
.callout .fig,.band--ink .fig{color:#8FA2FF}
.callout--contested .fig{color:#fff}
.datastrip{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:2.2rem 0}
.datastrip>div{background:var(--ground);box-shadow:0 0 0 1px var(--hair);padding:15px 16px 17px;display:flex;flex-direction:column;gap:5px}
.datastrip .d-num{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,33px);line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.datastrip .d-lab{font-size:15px;line-height:1.4;color:var(--mute)}
.article-body>p em{font-style:italic}
.article-body ul,.article-body ol{padding-left:1.2em;margin:0 0 1.2em}
.article-body li{margin-bottom:.45em}

/* prose components */
.lead{font-size:21px;line-height:1.5}
.pullquote{margin:2.2rem 0;padding:0 0 0 22px;border-left:3px solid var(--accent)}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.2vw,28px);line-height:1.28;letter-spacing:-.015em;margin:0}
.blockquote{margin:2rem 0;padding:20px 22px;background:var(--ground-2)}
.blockquote p{margin:0 0 .6em;font-size:18.5px}
.blockquote cite{font-family:var(--mono);font-size:12.5px;font-style:normal;color:var(--mute);letter-spacing:.04em}
.callout{margin:2.2rem 0;background:var(--ink);color:var(--ground);padding:22px 24px}
.callout .kicker{color:#8FA2FF;display:block;margin-bottom:8px}
.callout p{margin:0;font-size:18px}
.callout--contested{background:var(--secondary);color:#fff}
.callout--contested .kicker{color:rgba(255,255,255,.8)}
.note{font-size:16.5px;color:var(--mute);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:12px 0;margin:2rem 0}
.statrow{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:2.4rem 0}
.statrow[data-cells="1"]{grid-template-columns:minmax(0,340px)}
.statrow[data-cells="2"]{grid-template-columns:repeat(2,1fr)}
.statrow[data-cells="3"]{grid-template-columns:repeat(3,1fr)}
.statrow[data-cells="4"]{grid-template-columns:repeat(4,1fr)}
.statrow[data-cells="5"]{grid-template-columns:repeat(5,1fr)}
.statrow[data-cells="6"]{grid-template-columns:repeat(3,1fr)}
.keylist--plain li{grid-template-columns:1fr}
.keylist--plain{margin:1.4rem 0 0}
.statblock{background:var(--ground);box-shadow:0 0 0 1px var(--hair);padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.2vw,40px);line-height:1;color:var(--accent);letter-spacing:-.03em}
.stat-label{font-size:15.5px;line-height:1.4;color:var(--mute)}
.timeline{list-style:none;padding:0;margin:2.4rem 0;border-top:1px solid var(--hair)}
.timeline li{display:grid;grid-template-columns:minmax(130px,220px) 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--hair)}
.t-when{font-family:var(--mono);font-size:13px;color:var(--accent);line-height:1.4}
.t-what{font-size:17px;line-height:1.45}
.keylist{list-style:none;padding:0;margin:2.4rem 0}
.keylist li{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:8px 22px;padding:13px 0;border-top:1px solid var(--hair)}
.keylist li:last-child{border-bottom:1px solid var(--hair)}
.keylist b{font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3;display:block}
.keylist span{font-size:16.5px;line-height:1.45;color:var(--mute)}
.aside-panel{margin:2.4rem 0;border:2px solid var(--ink);padding:20px 22px 22px}
.aside-panel h3{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.aside-panel>*:last-child{margin-bottom:0}
.entity-ref{font-family:var(--mono);font-size:.86em;letter-spacing:.02em}

/* charts */
.chart{margin:2.4rem 0}
.chart svg{width:100%;height:auto;overflow:visible;shape-rendering:geometricPrecision}
.chart .curve,.chart .curve--ghost{stroke-linecap:round;stroke-linejoin:round}
.chart figcaption{font-size:15.5px;color:var(--mute);margin-top:10px;line-height:1.45}
.chart text{font-family:var(--mono);font-size:11px;fill:var(--mute)}
.chart .axis{stroke:var(--hair);stroke-width:1;fill:none}
.chart .barfill{fill:var(--accent)}
.chart .barfill--alt{fill:var(--secondary)}
.chart .curve{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart .curve--ghost{fill:none;stroke:var(--secondary);stroke-width:2;stroke-dasharray:5 5}

/* related + further */
.related-links,.further-grid{margin:0;padding:0;list-style:none}
.further-grid{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.further-grid a{background:var(--ground);box-shadow:0 0 0 1px var(--hair);padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;color:var(--ink);font-family:var(--display);font-weight:600;font-size:18px;line-height:1.25}
.further-grid a:hover{background:#fff;color:var(--accent);text-decoration:none}
.further-grid a small{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.related-links li{border-top:1px solid var(--hair);padding:12px 0}
.related-links li:last-child{border-bottom:1px solid var(--hair)}
.related-links a{font-family:var(--display);font-weight:600;font-size:18px}
.next-strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}

/* cat list */
.cat-list{list-style:none;padding:0;margin:0}
.cat-list li{border-top:1px solid var(--hair)}
.cat-list li:last-child{border-bottom:1px solid var(--hair)}
.cat-list a{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr) auto;gap:12px 28px;align-items:baseline;padding:18px 0;color:var(--ink)}
.cat-list a:hover{text-decoration:none;background:rgba(35,64,216,.05)}
.cat-list .t{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.2}
.cat-list .d{font-size:16.5px;color:var(--mute)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filters button{
  font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  background:transparent;border:1px solid var(--hair);color:var(--mute);padding:8px 12px;cursor:pointer;
}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.filters button:hover{border-color:var(--accent);color:var(--accent)}

/* profile / org cards */
.profile-grid{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:2.2rem 0}
.profile-card{background:var(--ground);box-shadow:0 0 0 1px var(--hair);padding:20px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{font-size:16px;margin:0;color:var(--mute)}
.profile-card.no-photo{border-left:3px solid var(--accent)}
.profile-card .p-attr{font-family:var(--mono);font-size:11.5px;color:#7B7D80;margin-top:auto}
.org-grid{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:2.2rem 0}
.org-card{background:var(--ground);box-shadow:0 0 0 1px var(--hair);padding:16px 18px;display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.org-card:hover{text-decoration:none;background:#fff}
.org-logo{height:34px;width:auto;max-width:100%;object-fit:contain;margin-bottom:6px}
.org-name{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2}
.org-host{font-family:var(--mono);font-size:11.5px;color:var(--mute)}

/* ---------- supporters strip ---------- */
.supporters{background:var(--ink);color:var(--ground);padding:36px 0 30px;border-top:1px solid var(--hair-light)}
.supporters-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:20px}
.supporters-head h2{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,240,236,.7)}
.supporters-head p{margin:0;font-size:15px;color:rgba(241,240,236,.55);max-width:52ch}
.sponsor-tier{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sponsor-tier+.sponsor-tier{margin-top:10px;padding-top:18px;border-top:1px solid var(--hair-light)}
.sponsor{
  width:auto;height:82px;background:var(--ink-2);position:relative;
  display:flex;align-items:center;justify-content:center;padding:14px 18px;
}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
/* reserved state: contract markup kept byte-exact; the slot simply shows the placeholder until a real logo lands */
.sponsor img[src$="placeholder.jpg"]{width:100%;height:44px;object-fit:cover;opacity:.9}
.sponsor:hover{background:#23262b;text-decoration:none}
.sponsor-blurb{display:none}

/* ---------- footer ---------- */
.foot{background:var(--ground-2);color:var(--ink);padding:40px 0 48px;border-top:4px solid var(--secondary)}
.foot-in{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:clamp(28px,4vw,56px);align-items:start}
.foot p{font-size:15.5px;max-width:44ch}
.foot p:first-child{font-family:var(--display);font-size:17px;line-height:1.45;letter-spacing:-.01em}
.foot-cols{display:flex;flex-wrap:wrap;gap:38px;font-family:var(--mono);font-size:12.5px}
.foot-cols div{display:flex;flex-direction:column;gap:7px}
.foot-cols .h{color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.foot a{color:var(--mute)}
.foot a:hover{color:var(--accent)}

/* ---------- generic page ---------- */
.page-head{border-bottom:2px solid var(--ink);padding:clamp(28px,4vw,54px) 0 26px}
.page-head h1{font-size:clamp(34px,5.2vw,62px);max-width:26ch}
.page-head .dek{font-size:19px;max-width:60ch;margin:18px 0 0;color:var(--mute)}
.prose{max-width:var(--measure);padding:clamp(26px,3vw,44px) 0}
.prose h2{font-size:26px;margin:2rem 0 .6rem}
.two-col{display:grid;gap:clamp(24px,3vw,52px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sg-block{border-top:1px solid var(--hair);padding:28px 0 10px}
.sg-block>h2{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--secondary);margin-bottom:18px}

/* ---------- responsive ---------- */
@media (min-width:1040px){
  .article-figure--inset{float:right;max-width:340px;margin:.4rem 0 1.5rem 2.2rem}
  .article-body h2,.article-body .wide,.article-body .full,.article-body>aside,.article-body>blockquote,.article-body>ul,.article-body>ol,.article-body>.datastrip{clear:both}
}
@media (max-width:860px){
  .secbar-in{grid-template-columns:repeat(5,1fr)}
  .secbar a{box-shadow:inset 1px 0 0 var(--hair-light),inset 0 -1px 0 var(--hair-light)}
  .secbar a:first-child{box-shadow:inset 0 -1px 0 var(--hair-light)}
}
@media (max-width:820px){
  .statrow[data-cells="3"],.statrow[data-cells="4"],.statrow[data-cells="5"],.statrow[data-cells="6"]{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .statrow[data-cells]{grid-template-columns:1fr}
  .secbar-in{grid-template-columns:repeat(3,1fr)}
  .secbar a .t{font-size:12px}
}
@media (max-width:1040px){
  .lead-band{grid-template-columns:1fr}
  .lead-media{min-height:320px}
  .article-body{grid-template-columns:[full-start] minmax(var(--pad),1fr) [wide-start] minmax(0,24px) [text-start] minmax(0,var(--measure)) [text-end] minmax(0,24px) [wide-end] minmax(var(--pad),1fr) [full-end]}
}
@media (max-width:820px){
  .masthead-in{flex-wrap:wrap;gap:12px}
  .util{order:3;width:100%;justify-content:flex-start;gap:16px;font-size:11.5px;padding-top:4px;border-top:1px solid var(--hair-light)}
  .menu-panel{position:fixed;left:var(--pad);right:var(--pad);width:auto;top:auto;max-height:70vh;overflow:auto}
  .cat-list a{grid-template-columns:1fr}
  .keylist li,.timeline li{grid-template-columns:1fr;gap:4px}
  .article-figure--inset{max-width:none}
  .entry-data>div{border-right:0;border-bottom:1px solid var(--hair)}
}
@media (max-width:720px){
  table.register thead{display:none}
  table.register tr{display:block;border-bottom:2px solid var(--ink);padding:14px 0}
  table.register tbody tr:nth-child(even){background:transparent}
  table.register td{display:block;border:0;padding:3px 0}
  table.register td.no{font-size:12px}
  table.register td:nth-child(3)::before,table.register td:nth-child(4)::before{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);display:block;margin-top:8px}
  table.register td:nth-child(3)::before{content:"What it predicts"}
  table.register td:nth-child(4)::before{content:"Where it breaks"}
  table.datatable,table.versus{display:block;overflow-x:auto}
  .reg-wrap{padding:10px 2px}
  
  .nameplate h1{font-size:clamp(34px,12vw,104px)}
}
@media (max-width:760px){
  .foot-in{grid-template-columns:1fr}
  .sponsor-tier{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){.sponsor{height:74px}.sponsor-tier{grid-template-columns:1fr}}
@media (max-width:560px){
  .menu-grid{grid-template-columns:1fr}
}
@media (pointer:coarse){
  .util a{min-height:44px}
  .secbar a{min-height:52px;justify-content:center}
  .filters button{min-height:44px}
  .cat-list a{padding:14px 0}
  .further-grid a,.sec-tile,.org-card{min-height:64px}
  .menu-foot a,.foot-cols a{min-height:34px;display:flex;align-items:center}
}
@media (max-width:480px){
  body{font-size:18px}
  .article-body p{font-size:18px}
  .brand-name{font-size:19px}
  .band{padding:30px 0}
  .lead-media .stamp{font-size:11.5px}
  .article-figure figcaption .credit,.foot p:last-child{font-size:12px}
  .mark{font-size:12px}
}
@media (prefers-reduced-motion:no-preference){
  .menu-panel{animation:pop .14s ease-out}
  @keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
@media print{.masthead,.supporters,.filters{display:none}}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}



/* sp-domain-override: per-domain, from work/css_override.css */
/* knowingknowledge — MINIMAL fix. The original defect: Design pins each supporter tile to 82px
   with overflow:visible, so every blurb escaped and printed across the neighbouring logos.
   ⚠️ My first attempt at this made it WORSE: I also forced a 5-column grid and overflow:hidden,
   which squeezed a horizontal logo|blurb tile until the wordmarks were clipped at both edges
   (MASHED.XXX, TRANSFIXED, PURETABOO all lost letters). Design's track count and tile direction
   are fine — only the fixed height was wrong.
   So: unpin the height, stack the tile so the blurb sits UNDER the mark instead of fighting it
   for width, and never clip. Columns are left exactly as Design set them. */
[data-partner]{
  height:auto!important; min-height:0!important; max-height:none!important;
  overflow:visible!important;
  flex-direction:column!important; align-items:flex-start!important; gap:10px!important;
}
[data-partner] img{ max-width:100%!important; height:auto!important; object-fit:contain!important; }
[data-partner] .sponsor-blurb{
  position:static!important; width:100%!important; max-width:100%!important;
  flex:0 0 auto!important;
}

/* The blurb text renders in default LINK BLUE: each tile is an <a> and nothing sets a colour on
   the copy inside it, so it falls through to the user-agent link colour. It was blue in the broken
   state too — this is not a side-effect of the layout fix above. Inherit the surrounding text
   colour instead of picking one, so Design's palette still decides what that is. */
a[data-partner], a[data-partner]:visited{ color:inherit!important; }
a[data-partner] .sponsor-blurb, a[data-partner] .sponsor-name{ color:inherit!important; }

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

/* op-blurb-quieter: the copy inherits the band's near-white ink at body size, so it read louder
   than the marks it describes — operator asked for smaller and dimmer. Same family the band's own
   standfirst uses, so it stays inside Design's palette. Specificity has to match the
   colour:inherit!important rule above, hence the doubled class. */
a[data-partner] .sponsor-blurb.sponsor-blurb{
  font-size:13.5px!important;line-height:1.5!important;color:rgba(241,240,236,.62)!important;
}

/* 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.page-head{padding-inline:var(--pad)}
}

/* op-nav-collapse: this nav printed 243px of stacked links at 390 before any content
   (9 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 "block-fill", 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 (0px measured) the button carries the build's
   gutter (clamp(20px,4vw,48px)) 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 "height-clip" technique and marked with the "plus" 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:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:auto;border:1px solid currentColor;border-radius:3px;padding:12px 16px;margin-inline:clamp(20px,4vw,48px);background:color-mix(in srgb, currentColor 9%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-fold-bars{width:11px;height:11px;flex:none;position:relative;border-top:1.5px solid currentColor;margin-top:-1px;box-shadow:inset 5px 0 0 -3.75px currentColor}
  .secbar{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .nav-fold-c:checked ~ .secbar{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .masthead:has(> .nav-fold){display:flow-root}
  .nav-fold:not(:has(~ .secbar)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1609px at 390, 16% of the whole page. Two columns bring it to
   924px (43% shorter). Checked before writing: no new overflow, smallest mark still
   130px wide, longest blurb 3 lines, tile heights 143-143px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.sponsor-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{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!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}
  .sponsor-tier .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — article reached
   360px in a 320px screen (+40px), inside
   div.pair. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.pair{grid-template-columns:minmax(0,1fr)!important}
  article{min-width:0!important;max-width:100%!important}
}

/* op-edge-gutter: on the about page div.wrap.prose has no horizontal padding at phone width, so every
   paragraph and heading started at x=0 against the glass (18 runs at 390). It takes the 20px gutter
   this build already uses on its own full-width containers. Phone widths only. */
@media (max-width:400px){
  div.wrap.prose{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-tier 6 rows at 768). 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 (min-width:641px){
  .sponsor-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-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px){
  div.wrap.page-head{padding-left:max(0px, calc(max(var(--pad), 18px) - max(0px, (100vw - 1400px) / 2)));padding-right:max(0px, calc(max(var(--pad), 18px) - max(0px, (100vw - 1400px) / 2)))}
}
/* op-tablet-gutter:end */