.blog-article {
  --paper: var(--bg);
  --raised: var(--panel);
  --accent-soft: var(--accent-bg);
  --note: var(--bg-2);
  --note-rule: var(--rule-2);
  --serif: var(--font-body);
  --sans: var(--font-head);
  --mono: var(--font-mono);
}
/* ---------- shell ---------- */
.blog-article .shell{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  max-width:1220px;
  margin:0 auto;
  padding-inline:20px;
}
@media (min-width:1040px){
  .blog-article .shell{grid-template-columns:232px minmax(0,1fr);gap:56px;padding-inline:36px}
}

/* ---------- masthead ---------- */
.blog-article .masthead{
  grid-column:1/-1;
  background-image:radial-gradient(var(--grid) 1px,transparent 1px);
  background-size:22px 22px;
  border-bottom:1px solid var(--rule);
  padding-block:52px 30px;
  margin-bottom:46px;
}
.blog-article .kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:-.02em;
  color:var(--ink-3);
  margin:0 0 20px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  align-items:baseline;
}
.blog-article .kicker>span:first-child::before{content:"// ";color:var(--accent)}
.blog-article h1{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(17px,4.1vw,50px);
  line-height:1.06;
  letter-spacing:-.021em;
  margin:0 0 14px;
  max-width:none;
  white-space:nowrap;
  text-wrap:nowrap;
}
.blog-article .standfirst{
  font-size:clamp(17px,2.2vw,20.5px);
  line-height:1.5;
  color:var(--ink-2);
  margin:0 0 30px;
  max-width:46ch;
}
.blog-article .byline{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.62;
  color:var(--ink-2);
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
}
.blog-article .byline b{color:var(--ink);font-weight:500}

/* ---------- rail ---------- */
.blog-article .rail{display:none}
@media (min-width:1040px){
  .blog-article .rail{
    display:block;
    grid-column:1;
    align-self:start;
    position:sticky;
    top:calc(var(--topbar) + 28px);
    padding-bottom:60px;
  }
}
.blog-article .rail-head{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:-.02em;
  color:var(--ink-3);
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
  margin-bottom:12px;
}
.blog-article .rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.blog-article .rail a{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:8px;
  align-items:baseline;
  text-decoration:none;
  color:var(--ink);
  font-family:var(--serif);
  font-size:15px;
  line-height:1.35;
  padding:6px 8px 6px 0;
  border-left:2px solid transparent;
  padding-left:9px;
  transition:color .13s,border-color .13s;
}
.blog-article .rail a .n{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.blog-article .rail a:hover{color:var(--ink)}
.blog-article .rail a:hover .n{color:var(--accent)}
.blog-article .rail a.on{color:var(--ink);border-left-color:var(--accent);background:var(--accent-soft)}
.blog-article .rail a.on .n{color:var(--accent)}
.blog-article .rail a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ---------- article ---------- */
.blog-article .doc{grid-column:1/-1;min-width:0;padding-bottom:96px}
@media (min-width:1040px){.blog-article .doc{grid-column:2}}
.blog-article .doc>*{max-width:65ch}

.blog-article section{
  padding-top:14px;
  margin-bottom:6px;
  scroll-margin-top:24px;
}
.blog-article .sec-num{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:-.02em;
  color:var(--ink-3);
  display:block;
  margin-bottom:9px;
}
.blog-article .sec-num::before{content:"// ";color:var(--accent)}
.blog-article section+section{border-top:1px dashed var(--rule);padding-top:34px;margin-top:22px}
.blog-article h2{
  font-family:var(--sans);
  font-weight:600;
  font-size:21px;
  line-height:1.35;
  margin:0 0 16px;
  text-wrap:balance;
}
.blog-article h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:15px;
  line-height:1.35;
  margin:32px 0 8px;
  text-wrap:balance;
}
.blog-article h2::before{content:"## ";color:var(--ink-3);font-weight:400}
.blog-article h3::before{content:"### ";color:var(--ink-3);font-weight:400}
.blog-article h3 .h-num{margin-right:7px}
.blog-article h4{
  font-family:var(--sans);
  font-weight:600;
  font-size:16px;
  line-height:1.35;
  letter-spacing:.002em;
  margin:32px 0 10px;
  text-wrap:balance;
  padding-top:14px;
  border-top:1px dashed var(--rule);
}
.blog-article hr.sub-end{border:0;border-top:1px dashed var(--rule);margin:32px 0 24px}
.blog-article h4 .h-num{font-family:var(--mono);font-size:12.5px;color:var(--accent);margin-right:8px;font-weight:400}
.blog-article p{margin:0 0 18px}
.blog-article h2+p,.blog-article h3+p,.blog-article h4+p{margin-top:0}
.blog-article em{font-style:italic}
.blog-article strong{font-weight:700}
.blog-article code{
  font-family:var(--mono);
  font-size:.855em;
  background:var(--note);
  border:1px solid var(--rule);
  padding:.08em .36em;
  border-radius:3px;
  letter-spacing:-.02em;
}
.blog-article pre.code{margin:0 0 20px;padding:12px 16px;overflow-x:auto;background:var(--raised);border:1px solid var(--rule);border-radius:var(--radius);font-size:13px;line-height:1.55}
.blog-article pre.code code{background:none;border:0;padding:0;font-size:inherit}
.blog-article .example{margin:0 0 20px;padding:14px 18px 2px;background:var(--raised);border:1px solid var(--rule);border-radius:var(--radius)}
.blog-article .example-label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:-.02em;color:var(--ink-3);margin-bottom:8px}
.blog-article .example-label::before{content:"// ";color:var(--accent)}
.blog-article .example p{margin:0 0 14px}
.blog-article .wordmark{display:inline-block;width:3.94em;height:1em;overflow:hidden;vertical-align:-0.12em}
.blog-article .wordmark img{display:block;width:4.265em;max-width:none;height:1em}
.blog-article .wordmark .night{display:none}
:root[data-theme="dark"] .blog-article .wordmark .day{display:none}
:root[data-theme="dark"] .blog-article .wordmark .night{display:block}
.blog-article a.xref{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.86em;
  padding-bottom:.5px;
}
.blog-article a.xref:hover{border-bottom-color:var(--accent);color:var(--accent)}
.blog-article a.xref:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.blog-article a.ext{color:var(--accent-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px}
.blog-article a.ext:hover{text-decoration-color:var(--accent)}

.blog-article ul.plain{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.blog-article ul.plain>li{
  padding-left:18px;
  position:relative;
}
.blog-article ul.plain>li::before{
  content:"–";
  position:absolute;
  left:0;top:0;
  color:var(--ink-3);
}

/* the residue list — one item, so it reads as a finding not a list */
.blog-article .residue{
  border-left:2px solid var(--accent);
  background:var(--raised);
  padding:15px 20px;
  margin:0 0 20px;
}
.blog-article .residue .lbl{font-weight:600}

.blog-article blockquote.claim{
  margin:30px 0;
  padding:22px 26px;
  background:var(--accent-soft);
  border-left:2px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:18px;
  line-height:1.5;
}
.blog-article blockquote.claim p{margin:0}

.blog-article .draft-note{
  margin:0 0 26px;
  padding:13px 17px;
  background:var(--note);
  border:1px dashed var(--note-rule);
  border-radius:3px;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-2);
}
.blog-article .draft-note b{
  color:var(--accent);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:10.5px;
  display:block;
  margin-bottom:5px;
}

/* ---------- figures ---------- */
.blog-article figure{
  margin:34px 0;
  max-width:none;
  width:100%;
}
@media (min-width:1300px){
  .blog-article figure{width:min(112%,860px)}
}
.blog-article .fig-frame{
  background:var(--raised);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:22px 20px 18px;
  overflow-x:auto;
}
.blog-article figure svg{display:block;width:100%;height:auto;min-width:440px;color:var(--ink)}
.blog-article figcaption{
  font-family:var(--serif);
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-3);
  margin-top:11px;
  max-width:62ch;
}
.blog-article figcaption b{color:var(--ink);font-weight:700}
.blog-article .fig-label{fill:var(--ink);font-family:var(--mono);font-size:12px}
.blog-article .fig-sub{fill:var(--ink-3);font-family:var(--mono);font-size:10.5px}
.blog-article .fig-head{fill:var(--ink-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.11em}
.blog-article .fig-accent{stroke:var(--accent)}
.blog-article .fig-accent-t{fill:var(--accent);font-family:var(--mono);font-size:10.5px}
.blog-article .fig-col{fill:var(--ink);font-family:var(--mono);font-size:10.5px}
.blog-article .fig-box{fill:var(--paper);stroke:var(--ink-3);stroke-width:1}
.blog-article .fig-box-key{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.2}
.blog-article .fig-line{stroke:var(--ink-3);stroke-width:1;fill:none}
.blog-article .fig-dash{stroke:var(--ink-3);stroke-width:1;fill:none;stroke-dasharray:3 3}

/* ---------- references ---------- */
.blog-article .refs{border-top:1px dashed var(--rule);margin-top:56px;padding-top:34px}
.blog-article .refs ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:12px}
.blog-article .refs li{font-size:15px;line-height:1.55;color:var(--ink-2);padding-left:4px}
.blog-article .refs li cite{font-style:italic;color:var(--ink)}
.blog-article .colophon{
  border-top:1px solid var(--rule);
  margin-top:44px;
  padding-top:22px;
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.7;
  color:var(--ink-3);
}


.blog-article .kicker::before { content: none; }
.blog-article .back { display: inline-block; color: var(--accent-ink); margin-bottom: 24px; font-size: 14px; }
.blog-article .back:hover { text-decoration: underline; }
.blog-article .doc { width: 100%; }
.blog-article .masthead h1 { max-width: none; }
.blog-article .masthead .standfirst { max-width: 56ch; }
.blog-article .byline { margin-bottom: 0; }
.blog-article .rail { max-height: calc(100vh - var(--topbar) - 48px); overflow-y: auto; }