/* Network Bio blog template. Plain loads from the site's own /dist/fonts on network.bio; Geist stands in elsewhere. */
@font-face{font-family:Plain;font-weight:250;font-style:normal;font-display:swap;src:url(/dist/fonts/Plain-Thin.woff2) format("woff2")}
@font-face{font-family:Plain;font-weight:400;font-style:normal;font-display:swap;src:url(/dist/fonts/Plain-Regular.woff2) format("woff2")}
@font-face{font-family:Plain;font-weight:400;font-style:italic;font-display:swap;src:url(/dist/fonts/Plain-Italic.woff2) format("woff2")}
@font-face{font-family:Plain;font-weight:500;font-style:normal;font-display:swap;src:url(/dist/fonts/Plain-Medium.woff2) format("woff2")}
:root{
  box-sizing:border-box; color-scheme:light;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  --bg:#FFFFFF; --ink:#14212B; --ink-2:#5B6B75; --rule:#DCE3E7; --mist:#F3F6F7;
  --accent:#0E8F8A; --accent-ink:#0A6D69; --fig-bg:#FFFFFF; --shade:rgba(20,33,43,.84);
  --sans:"Plain","Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:640px; --wide:1120px; --gut:248px;
}
@media screen and (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:#0F161B; --ink:#E6ECEF; --ink-2:#9DAAB2; --rule:#26323A; --mist:#172027; --accent:#63BDB6; --accent-ink:#7FCFC8; --shade:rgba(0,0,0,.86);}}
@media screen{:root[data-theme="dark"]{color-scheme:dark; --bg:#0F161B; --ink:#E6ECEF; --ink-2:#9DAAB2; --rule:#26323A; --mist:#172027; --accent:#63BDB6; --accent-ink:#7FCFC8; --shade:rgba(0,0,0,.86);}}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 24px); scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:inherit}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
img{max-width:100%; height:auto}
:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px}
.nw{white-space:nowrap}
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:30; padding-top:env(safe-area-inset-top,0px); pointer-events:none}
.progress i{display:block; height:2px; width:0; background:var(--accent)}
.site{display:flex; align-items:center; gap:14px; max-width:var(--wide); margin:0 auto; padding:22px 24px; border-bottom:1px solid var(--rule)}
.site a{color:var(--ink); text-decoration:none; display:flex; align-items:center}
.logo{height:14px; width:auto; display:block}
.site .sec{font:400 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.hero{max-width:var(--wide); margin:0 auto; padding:clamp(40px,7vw,88px) 24px 0}
.hero .inner{max-width:none} .hero h1{max-width:880px}
.tags{display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 22px; padding:0; list-style:none}
.tags li{font:400 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
h1{font:250 clamp(38px,6vw,68px)/1.04 var(--sans); letter-spacing:-.015em; margin:0 0 20px; text-wrap:balance}
.dek{font:400 clamp(19px,1.9vw,22px)/1.45 var(--sans); color:var(--ink-2); margin:0 0 32px; max-width:40ch; text-wrap:balance}
.byline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:18px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.faces{display:flex}
.faces img{width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--bg); display:block}
.faces img+img{margin-left:-10px}
.byline .who{font:500 15px/1.3 var(--sans); flex:1 1 12em; min-width:0; text-wrap:balance}
.byline .when{font:400 11px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-left:auto}
@media (max-width:640px){.byline .when{margin-left:0; flex-basis:100%}}
.layout{max-width:var(--wide); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:minmax(0,1fr); gap:0}
@media (min-width:1180px){.layout{grid-template-columns:200px minmax(0,1fr); column-gap:48px}}
.toc{display:none}
@media (min-width:1180px){
  .toc{display:block; position:sticky; top:calc(env(safe-area-inset-top,0px) + 32px); align-self:start; padding-top:56px}
  .toc p{font:400 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:0 0 14px}
  .toc ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--rule)}
  .toc a{display:block; padding:6px 0 6px 14px; margin-left:-1px; border-left:1px solid transparent; color:var(--ink-2);
         text-decoration:none; font:400 13px/1.35 var(--sans)}
  .toc a span{font-family:var(--mono); font-size:11px; margin-right:6px}
  .toc a.on{color:var(--ink); border-left-color:var(--accent)}
}
.post-body{min-width:0; padding-bottom:40px}
.lede-wrap{display:grid; gap:28px; padding:48px 0 8px; max-width:var(--measure)}
@media (min-width:900px){.lede-wrap{max-width:none; grid-template-columns:minmax(0,var(--measure)) minmax(200px,1fr); column-gap:40px; align-items:start} .cover{justify-self:end}}
.lede{font:400 clamp(18px,1.6vw,20px)/1.6 var(--sans); margin:0}
.lede+.lede{margin-top:18px}
.cover{margin:0}
.cover img{display:block; width:100%; max-width:220px; height:auto; border-radius:3px; box-shadow:0 1px 0 var(--rule)}
.cover figcaption{font:400 13px/1.45 var(--sans); color:var(--ink-2); margin-top:10px; max-width:220px}
@media (max-width:899px){.cover{display:grid; grid-template-columns:88px minmax(0,1fr); column-gap:16px; align-items:end}
  .cover img{max-width:88px} .cover figcaption{margin-top:0; max-width:32ch}}
.prose{max-width:var(--measure)}
section.s{margin-top:64px; padding-top:36px; border-top:1px solid var(--rule)}
.num{font:400 12px/1 var(--mono); letter-spacing:.08em; color:var(--accent-ink); margin:0 0 14px}
h2{font:400 clamp(26px,3vw,36px)/1.15 var(--sans); letter-spacing:-.01em; margin:0 0 20px; text-wrap:balance}
.prose p{font:400 18px/1.65 var(--sans); margin:0 0 22px; text-wrap:pretty}
blockquote{margin:32px 0; padding:4px 0 4px 22px; border-left:2px solid var(--accent);
  font:250 clamp(24px,2.8vw,32px)/1.25 var(--sans); letter-spacing:-.01em}
.prose blockquote p{font:inherit; margin:0; letter-spacing:inherit}
blockquote p span{display:inline-block}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:32px 0; padding:26px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
@media (max-width:640px){.stats{grid-template-columns:1fr; gap:20px}}
.stats b{display:block; font:250 clamp(30px,3.4vw,40px)/1 var(--sans); letter-spacing:-.01em; color:var(--accent-ink); margin-bottom:10px; font-variant-numeric:tabular-nums}
.stats b small{font-size:.5em; font-weight:400; letter-spacing:0; margin-left:.25em; color:var(--ink-2)}
.stats span{display:block; font:400 14px/1.5 var(--sans); color:var(--ink-2)}
ol.steps{list-style:none; counter-reset:s; margin:4px 0 32px; padding:0}
ol.steps li{counter-increment:s; position:relative; padding:12px 0 12px 44px; border-top:1px solid var(--rule); font:400 18px/1.5 var(--sans)}
ol.steps li:last-child{border-bottom:1px solid var(--rule)}
ol.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:15px; font:400 12px/1.5 var(--mono); color:var(--accent-ink)}
figure.f{margin:48px 0; max-width:var(--wide)}
.tblfig{margin-left:0; margin-right:0}
figure.f .zoom{display:block; width:calc(100% * var(--vw,1200) / 1200); padding:0; border:0; border-radius:10px; background:none; cursor:zoom-in; text-align:left}
figure.f img{display:block; width:100%; height:auto; background:var(--fig-bg); border-radius:10px}
@media screen and (prefers-color-scheme:dark){:root:not([data-theme="light"]) figure.f img{box-shadow:0 0 0 1px var(--rule)}}
@media screen{:root[data-theme="dark"] figure.f img{box-shadow:0 0 0 1px var(--rule)}}
@media screen and (prefers-color-scheme:dark) and (prefers-contrast:no-preference){:root:not([data-theme="light"]) figure.f img{filter:brightness(.92)}}
@media screen and (prefers-contrast:no-preference){:root[data-theme="dark"] figure.f img{filter:brightness(.92)}}
figure.f figcaption, .tblfig figcaption{font:400 15px/1.5 var(--sans); color:var(--ink-2); margin-top:14px; max-width:var(--measure)}
figure.f figcaption b, .tblfig figcaption b{font-weight:500; color:var(--ink)}
.sources{margin-top:64px; padding-top:36px; border-top:1px solid var(--rule)} .sources > *{max-width:var(--measure)}
.sources h2{font-size:22px}
.sources ol{margin:0; padding:0 0 0 22px}
.sources li{font:400 15px/1.55 var(--sans); color:var(--ink-2); margin-bottom:12px}
.sources li::marker{font-family:var(--mono); font-size:12px}
footer{max-width:var(--wide); margin:40px auto 0; padding:28px 24px 44px; border-top:1px solid var(--rule);
  display:flex; gap:18px; flex-wrap:wrap; align-items:center; font:400 13px/1.4 var(--sans); color:var(--ink-2)}
footer a{color:var(--ink-2)} footer a.home{color:var(--ink)} footer .sp{margin-left:auto}
@media (max-width:640px){footer .sp{margin-left:0} section.s{margin-top:48px; padding-top:28px}}
.lb{position:fixed; inset:0; z-index:40; background:var(--shade); display:none; align-items:center; justify-content:center; overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 56px) calc(env(safe-area-inset-right,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 16px) calc(env(safe-area-inset-left,0px) + 16px)}
.lb.on{display:flex}
.lb img{max-width:100%; max-height:100%; width:auto; height:auto; background:#fff; border-radius:8px}
.lb button{position:fixed; top:calc(env(safe-area-inset-top,0px) + 12px); right:calc(env(safe-area-inset-right,0px) + 16px); font:500 14px/1 var(--sans); color:#fff;
  background:var(--shade); border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:10px 16px; cursor:pointer}
.lb button:focus-visible{outline-color:#fff}

/* figures: one type scale for every figure, and a full-width breakout on wide screens */
@media (min-width:1180px){ figure.f{margin-left:calc(-1 * var(--gut)); width:calc(100% + var(--gut)); max-width:none}
  figure.f .zoom{margin-left:auto}
  figure.f figcaption{margin-left:calc(100% * (1200 - var(--vw,1200) + var(--in,48)) / 1200)}
  .tblfig{margin-left:calc(-1 * var(--gut)); width:calc(100% + var(--gut))} }
.toc{transition:opacity .2s ease} .toc.hide{opacity:0; pointer-events:none} .toc.hide:focus-within{opacity:1; pointer-events:auto; background:var(--bg); box-shadow:16px 0 0 var(--bg)}
@media (prefers-reduced-motion:reduce){.toc{transition:none}}
.tap{display:none; white-space:nowrap; font:400 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); margin-left:0}
@media (hover:none),(max-width:760px){.tap{display:inline}}
/* key results band */
.keys{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:0; padding:26px 0 28px; border-bottom:1px solid var(--rule)}
@media (max-width:760px){.keys{grid-template-columns:1fr; gap:20px}}
.keys .k{margin:0} .keys dt{font:400 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px}
.keys .v{display:block; font:250 clamp(34px,3.6vw,44px)/1 var(--sans); color:var(--accent-ink); letter-spacing:-.01em; margin-bottom:10px; font-variant-numeric:tabular-nums}
.keys dd{margin:0; font:400 15px/1.5 var(--sans); color:var(--ink-2)}
/* single key number inside a section */
.keynum{display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:baseline; margin:32px 0; padding:22px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.keynum b{font:250 clamp(34px,4vw,48px)/1 var(--sans); color:var(--accent-ink); letter-spacing:-.01em; white-space:nowrap}
.keynum span{font:400 15px/1.5 var(--sans); color:var(--ink-2)}
@media (max-width:520px){.keynum{grid-template-columns:1fr; gap:10px}}
/* inline citations */
sup.cite{font:500 .62em/0 var(--sans); vertical-align:super; margin-left:1px}
sup.cite a{text-decoration:none; color:var(--accent-ink); padding:0 1px}
sup.cite a:hover{text-decoration:underline}
.sources li:target{background:var(--mist); border-radius:4px; box-shadow:0 0 0 6px var(--mist)}
/* native results table (Figure 5) */
.tblfig{margin-top:48px; margin-bottom:48px} .tblwrap{overflow-x:auto}
.tbl{width:100%; table-layout:fixed; border-collapse:collapse; background:var(--mist); border-radius:14px; overflow:hidden; font-family:var(--sans)}
.tbl caption{text-align:left; font:500 clamp(20px,2.2vw,24px)/1.25 var(--sans); letter-spacing:-.01em; padding:0 0 16px; color:var(--ink)}
.tbl th{font:500 12.5px/1.3 var(--sans); color:var(--ink-2); text-align:left; padding:18px 18px 12px; border-bottom:1px solid var(--rule); vertical-align:bottom}
.tbl td{padding:18px; vertical-align:top; border-top:1px solid var(--rule); font:400 14px/1.45 var(--sans); color:var(--ink-2)}
.tbl tbody tr:first-child td{border-top:0}
.tbl .nm{font:500 16px/1.3 var(--sans); color:var(--ink); display:block; margin-bottom:8px}
.tbl .mode{display:inline-block; font:500 11.5px/1 var(--sans); color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:999px; padding:5px 9px}
.tbl .src{display:block; margin-top:12px; font-size:12.5px}
.tbl .lab{font:250 38px/1 var(--sans); color:var(--ink); display:block; font-variant-numeric:tabular-nums}
.tbl .labu{font-size:12.5px; display:block; margin-top:6px}
.tbl .first{color:var(--ink); font-weight:500}
.tbl .au{font:400 24px/1 var(--sans); color:var(--accent-ink); font-variant-numeric:tabular-nums} .tbl .q{display:inline-block; font-size:12.5px; margin-left:6px}
@media (min-width:1180px){.tbl th{white-space:nowrap}}
.spark{position:relative; height:8px; background:var(--rule); border-radius:4px; margin:10px 0 12px; max-width:220px}
.spark i{position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:4px}
.spark b{position:absolute; top:-4px; width:2.5px; height:16px; background:var(--ink); border-radius:1px; transform:translateX(-50%); box-shadow:0 0 0 1.5px var(--mist)}
.tbl .base{display:block; font-size:13px} .tbl .base strong{color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums}
.tbl .ex{display:block; margin-top:4px; font-size:13px; color:var(--ink)}
.tnotes{list-style:none; margin:14px 0 0; padding:0; max-width:var(--measure)} .tnotes li{font:400 13px/1.5 var(--sans); color:var(--ink-2)} .tnotes li+li{margin-top:6px}
@media (max-width:960px){
  .tbl colgroup{display:none} .tbl{table-layout:auto; background:none; border-radius:0; overflow:visible}
  .tbl caption{display:block} .tbl tbody{background:var(--mist); border-radius:14px}
  .tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .tbl, .tbl tbody, .tbl tr, .tbl td{display:block; width:100%}
  .tbl tr{padding:6px 0; border-top:1px solid var(--rule)} .tbl tbody tr:first-child{border-top:0}
  .tbl td{border-top:0; padding:10px 18px}
  .tbl td[data-h]::before{content:attr(data-h); display:block; font:400 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:8px}
}
@media (min-width:561px) and (max-width:960px){
  .tbl tr{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:8px; padding:10px 0}
  .tbl td:last-child{grid-column:1 / -1}
}
.cite-box{margin-top:28px; padding:18px 20px; background:var(--mist); border-radius:10px; font:400 14px/1.5 var(--sans); color:var(--ink)}
.cite-box p{margin:0} .cite-box .h{font:400 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:10px}
/* phone lightbox: show the figure near native size and let the reader pan */
@media (max-width:760px){ .lb{align-items:flex-start; justify-content:flex-start; overflow:auto; -webkit-overflow-scrolling:touch}
  .lb img{max-width:none; max-height:none; width:1000px} }

@media print{.progress,.toc,.lb,.tap{display:none!important} figure.f,.tbl tr,.keys .k,.stats,.keynum,h2,.cite-box{break-inside:avoid} .num,h2,.tbl caption{break-after:avoid}}
