/* ==========================================================================
   mcprush — blog.css  (blog.html: the index · post.html: one post)

   Same Datasheet language as the rest of the site: hairlines instead of
   shadows, mono for anything mechanical, every colour a token.

   The one thing this page needs that no other page does is a measure. Running
   text stops at --bl-measure; tables, code and figures run a little wider so
   the reader can tell an argument from its evidence. The column itself still
   starts at the page gutter, like every other block on the site.
   ========================================================================== */

/* 92ch is the site's prose measure — the same one terms.html and privacy.html
   use through .legal-col — so the blog reads at the same width as the other
   long documents rather than inventing its own. ch is the "0" advance, which
   in Instrument Sans is narrower than it looks, so at 1512 this lands at about
   1,040px of running text; the leading below is raised to 1.72 to carry it. */
:root { --bl-measure: 92ch; --bl-wide: 100ch; }

/* ==========================================================================
   INDEX
   ========================================================================== */

/* ---------- head --------------------------------------------------------- */
.bl-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 24px 56px; align-items: start; padding-bottom: 30px;
}
.bl-head > * { min-width: 0; }
.bl-head h1 { margin-top: 12px; }
.bl-head .lead { margin-top: 12px; max-width: 62ch; }
.bl-head-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); max-width: 62ch; }
.bl-head-facts { padding: 15px 17px; }
.bl-head-facts .spec { margin-bottom: 4px; }

/* ---------- tag filter --------------------------------------------------- */
.bl-filter {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.bl-tag {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface);
  font-size: 13px; color: var(--ink-2); transition: .12s; white-space: nowrap;
}
.bl-tag:hover { border-color: var(--ink-3); color: var(--ink); }
.bl-tag .n { font: 500 12px/1 var(--mono); color: var(--ink-3); }
.bl-tag.on {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
  font-weight: 550;
}
.bl-tag.on .n { color: var(--accent); }

.bl-nowrap { white-space: nowrap; }

/* the tag chip printed on a row, as opposed to the filter button */
.tag.bl-tag-s {
  font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  height: 22px; color: var(--ink-3); background: var(--surface-2);
}

/* ---------- lead post ---------------------------------------------------- */
/* one column since the stats rail went: the four figures it carried are in the
   post it introduces, and a card that repeats the article beside it is a second
   place for the same number to go stale */
.bl-lead {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin: 26px 0 34px; overflow: hidden;
}
.bl-lead > * { min-width: 0; }
.bl-lead-main { padding: 26px 28px 24px; }
.bl-lead-meta { gap: 10px; flex-wrap: wrap; }
.bl-lead-t {
  margin: 15px 0 0; font-size: clamp(24px, 2.5vw, 31px); font-weight: 600;
  letter-spacing: -.028em; line-height: 1.14; max-width: 22ch;
}
.bl-lead-t a:hover { color: var(--accent); }
.bl-lead-d { margin-top: 12px; max-width: 60ch; }
.bl-lead-a {
  margin-top: 14px; font-size: 14px; line-height: 1.62; color: var(--ink-2);
  max-width: 66ch; padding-top: 14px; border-top: 1px dashed var(--line);
}
.bl-lead-foot { margin-top: 20px; gap: 16px; flex-wrap: wrap; }
.bl-lead-side {
  padding: 26px 24px; background: var(--surface-2); border-left: 1px solid var(--line);
}
.bl-lead-nums { margin: 16px 0 14px; }
.bl-lead-nums > div {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; border-top: 1px dashed var(--line-2);
}
.bl-lead-nums > div:first-child { border-top: 0; padding-top: 0; }
.bl-lead-nums .v { font: 600 17px/1 var(--mono); letter-spacing: -.03em; flex: none; min-width: 52px; }
.bl-lead-nums .k { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.bl-lead-side p { line-height: 1.55; }

/* ---------- list --------------------------------------------------------- */
.bl-listhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.bl-rows { border-top: 0; }
.bl-row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) 352px;
  gap: 20px; align-items: start; padding: 20px 0;
  border-bottom: 1px solid var(--line); transition: background .12s;
}
.bl-row:hover { background: var(--surface-2); }
.bl-row-date { font-size: 12.5px; color: var(--ink-3); padding-top: 2px; white-space: nowrap; }
.bl-row-main { min-width: 0; }
.bl-row-t {
  display: block; font-size: 17px; font-weight: 600; letter-spacing: -.018em;
  line-height: 1.3; max-width: 46ch;
}
.bl-row:hover .bl-row-t { color: var(--accent); }
.bl-row-d {
  display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2); max-width: 68ch;
}
/* three tracks rather than a flex row, so the tag, the length and the author
   line up down the page instead of ragging against the longest tag name */
.bl-row-meta {
  display: grid; grid-template-columns: 150px 56px minmax(0, 1fr);
  gap: 10px; align-items: center; padding-top: 3px;
}
.bl-row-meta > * { justify-self: start; min-width: 0; }
.bl-row-meta .bl-au { overflow: hidden; }
.bl-row-time { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }

/* author chip */
.bl-au { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.tile.bl-au-t { width: 24px; height: 24px; font-size: 10.5px; border-radius: 6px; color: var(--ink-2); }
.tile.bl-au-lg { width: 38px; height: 38px; font-size: 14px; border-radius: var(--r2); }

/* ---------- empty state -------------------------------------------------- */
.bl-none { margin-top: 22px; padding: 26px; text-align: center; }
.bl-none .spec { display: inline-flex; }
.bl-none p { margin-top: 10px; font-size: 14px; color: var(--ink-2); }

/* ---------- subscribe ---------------------------------------------------- */
.bl-sub {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 24px 48px; align-items: center;
  margin: 44px 0 0; padding: 26px 28px;
  border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface);
}
.bl-sub > * { min-width: 0; }
.bl-sub h2 { margin-top: 11px; }
.bl-sub p { margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.bl-sub-form { display: flex; gap: 9px; align-items: center; }
.bl-sub-form .field { flex: 1 1 auto; }
.bl-sub-note { margin-top: 11px; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.bl-sub-said {
  margin-top: 11px; padding: 10px 12px; border: 1px dashed var(--line-2);
  border-radius: var(--r1); background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-2);
}

/* ==========================================================================
   ONE POST
   ========================================================================== */
.bl-article { padding-bottom: 8px; }

/* THE HEAD STOPS WHERE THE ARTICLE STOPS. It sits above the grid, so it was
   as wide as the page — title and rule running out under the table of
   contents, which belongs to the article rather than sitting over it. The rail
   column is 244px plus a 26px gutter, so the head keeps that room clear and
   lines up with the body underneath. Below 1080px the rail loses its column
   and the reservation goes with it. */
.bl-art-head { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.bl-article:not(.bl-article-norail) .bl-art-head { padding-right: 270px; }
@media (max-width: 1079px) {
  .bl-article:not(.bl-article-norail) .bl-art-head { padding-right: 0; }
}
.bl-art-meta { gap: 10px; flex-wrap: wrap; }
/* THE HEAD TAKES THE WHOLE COLUMN. The title was capped at 20ch and the dek at
   56ch, which is a measure for body text and a straitjacket for a headline:
   on a wide screen a three-word title broke across three lines with half the
   page empty beside it. The body below keeps its measure — that is what a
   measure is for — and the head, which is read once and at a glance, gets the
   width the article has. */
.bl-art-t {
  margin: 16px 0 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 600;
  letter-spacing: -.032em; line-height: 1.08;
}
.bl-art-dek {
  margin-top: 15px; font-size: 18px; line-height: 1.5; color: var(--ink-2);
  max-width: 78ch;
}
.bl-art-by {
  display: flex; align-items: center; gap: 11px; margin-top: 24px;
  font-size: 13.5px; color: var(--ink-2); flex-wrap: wrap;
}
.bl-art-by b { color: var(--ink); font-weight: 550; }

/* ---------- layout ------------------------------------------------------- */
/* the article takes the room the page has; the rail keeps its own width and
   the two together fill the measure rather than leaving a third of the page
   empty beside a 50-character column */
.bl-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 244px;
  gap: 0 26px; align-items: start;
}
.bl-layout > * { min-width: 0; }
.bl-article-norail .bl-layout { grid-template-columns: minmax(0, 1fr); }

/* ---------- running text ------------------------------------------------- */
.bl-body { padding: 34px 0 8px; }
.bl-body p {
  max-width: var(--bl-measure); font-size: 16px; line-height: 1.72;
  color: var(--ink-2); margin-bottom: 18px;
}
.bl-body p b { color: var(--ink); font-weight: 600; }
.bl-body > p:first-child { font-size: 17px; }
.bl-h {
  max-width: var(--bl-measure); margin: 44px 0 16px;
  font-size: 22px; font-weight: 600; letter-spacing: -.024em; line-height: 1.2;
  color: var(--ink); scroll-margin-top: var(--scroll-pad);
  padding-top: 22px; border-top: 1px solid var(--line);
}
.bl-body > .bl-h:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.bl-ul { max-width: var(--bl-measure); margin: 0 0 20px; }
.bl-ul li {
  position: relative; padding-left: 22px; margin-bottom: 13px;
  font-size: 15.5px; line-height: 1.62; color: var(--ink-2);
}
.bl-ul li b { color: var(--ink); font-weight: 600; }
.bl-ul li::before {
  content: ''; position: absolute; left: 2px; top: 10px;
  width: 6px; height: 6px; border-radius: 1px; background: var(--accent-line);
}

/* pull quote — used three times in the whole blog, on purpose */
.bl-quote {
  max-width: var(--bl-wide); margin: 30px 0 30px;
  padding: 4px 0 4px 22px; border-left: 2px solid var(--accent);
  font-size: 20px; line-height: 1.4; letter-spacing: -.018em;
  color: var(--ink); font-weight: 500;
}

/* the quiet disclosure block */
.bl-note {
  max-width: var(--bl-wide); margin: 26px 0;
  padding: 16px 18px; border: 1px dashed var(--line-2);
  border-radius: var(--r2); background: var(--surface-2);
}
.bl-note p {
  margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
  max-width: none;
}

/* ---------- figures ------------------------------------------------------ */
.bl-code, .bl-figure { max-width: var(--bl-wide); margin: 24px 0 26px; }
.bl-code .code { font-size: 12.5px; line-height: 1.75; }
.bl-code figcaption, .bl-figure figcaption {
  margin-top: 9px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
  max-width: var(--bl-measure);
}
.bl-fig { overflow: hidden; }
.bl-fig .tbl th { white-space: nowrap; }
.bl-fig .tbl td { font-size: 13px; }
.bl-fig-foot {
  padding: 11px 14px; border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-3); line-height: 1.55;
}
.bl-fig-foot b { color: var(--ink-2); font-family: var(--mono); font-weight: 500; }
.bl-fig-foot-in {
  margin: 12px -18px -18px; border-radius: 0 0 var(--r3) var(--r3);
}
.bl-fig-kv .kv .v { font-size: 12.5px; }
.metrics.bl-fig { border-radius: var(--r2); }

/* bar list — the compact alternative to a long, narrow table */
.bl-bar-head, .bl-bar-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 78px 150px 92px;
  gap: 14px; align-items: center; padding: 0 16px;
}
.bl-bar-head > span { white-space: nowrap; }
.bl-bar-head {
  height: 34px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3);
}
.bl-bar-row { height: 38px; border-top: 1px solid var(--line); }
.bl-bar-row:first-of-type { border-top: 0; }
.bl-bar-n { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-bar-c { font-size: 11.5px; }
.bl-bar-v { font-size: 12.5px; text-align: right; }
.bl-bar-head .bl-bar-v, .bl-bar-head .bl-bar-c { text-align: right; }

/* ---------- contents rail ------------------------------------------------ */
.bl-rail { position: sticky; top: 84px; padding-top: 40px; }
.bl-toc {
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface); padding: 14px 15px 8px;
}
.bl-toc-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: default; list-style: none;
}
.bl-toc-sum::-webkit-details-marker { display: none; }
.bl-toc-sum [data-icon] { display: none; color: var(--ink-3); }
.bl-prog { height: 3px; border-radius: 2px; background: var(--surface-3); margin: 12px 0 4px; overflow: hidden; }
.bl-prog span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width .1s linear; }
.bl-toc nav { display: flex; flex-direction: column; padding: 6px 0 6px; }
.bl-toc nav a {
  display: flex; gap: 9px; padding: 7px 0; font-size: 13px; line-height: 1.4;
  color: var(--ink-3); border-top: 1px dashed var(--line); transition: .12s;
}
.bl-toc nav a:first-child { border-top: 0; }
.bl-toc nav a span { color: var(--line-2); flex: none; font-size: 12px; padding-top: 1px; }
.bl-toc nav a:hover { color: var(--ink); }
.bl-toc nav a.on { color: var(--ink); font-weight: 550; }
.bl-toc nav a.on span { color: var(--accent); }

/* ---------- stub post ---------------------------------------------------- */
.bl-stub-a {
  max-width: var(--bl-measure); font-size: 17px; line-height: 1.65; color: var(--ink-2);
  margin-bottom: 22px;
}

/* ---------- unknown slug ------------------------------------------------- */
.bl-missing { padding: 26px 0 0; }
.bl-missing-card { max-width: var(--bl-wide); }
.bl-missing-card p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.bl-slug {
  padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface-2); font-size: 13px; color: var(--ink);
  overflow-wrap: anywhere;
}
.bl-missing .bl-listhead { margin-top: 34px; }

/* ---------- foot of a post ----------------------------------------------- */
.bl-foot { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.bl-author { display: flex; gap: 14px; align-items: flex-start; max-width: var(--bl-wide); }
.bl-author-n { font-size: 14px; margin-bottom: 5px; }
.bl-author p { line-height: 1.6; max-width: 62ch; }

.bl-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.bl-nav-c { display: flex; flex-direction: column; gap: 9px; transition: border-color .14s, background .14s; }
a.bl-nav-c:hover { border-color: var(--line-2); background: var(--surface-2); }
.bl-nav-t { font-size: 15px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }
a.bl-nav-c:hover .bl-nav-t { color: var(--accent); }
.bl-nav-m { font-size: 12px; }
.bl-nav-none { opacity: .6; }
.bl-nav-none .bl-nav-t { font-weight: 400; font-size: 13.5px; }
/* ---------- the rest of a tag, at the foot of a post -----------------------
   The two navigation cards above this offer the neighbours in publication
   order; this offers the other posts about the same thing, which is what
   somebody who finished the article is looking for. Plain list, because it is
   a list of titles and a grid of cards would be a second set of the cards
   directly above it. */
.bl-more { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.bl-more h2 { margin-bottom: 12px; }
.bl-more-list { list-style: none; display: grid; gap: 10px; margin-bottom: 14px; }
.bl-more-list li { display: grid; gap: 2px; }
.bl-more-list a { font-weight: 550; color: var(--ink); text-decoration: none; }
.bl-more-list a:hover { color: var(--accent); }

/* three links now — the blog, the servers and the skills — so the row wraps
   rather than running off a phone */
.bl-back { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* ==========================================================================
   NARROWER
   ========================================================================== */

/* the rail loses its column before the prose gets uncomfortable */
@media (max-width: 1079px) {
  .bl-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bl-rail { position: static; padding-top: 26px; order: -1; }
  .bl-toc { padding-bottom: 4px; }
  .bl-toc-sum { cursor: pointer; min-height: 44px; }
  .bl-toc-sum [data-icon] { display: inline-flex; }
  .bl-toc[open] .bl-toc-sum [data-icon] { transform: rotate(180deg); }
  .bl-toc:not([open]) .bl-prog { display: none; }
  .bl-body { padding-top: 26px; }
}

@media (max-width: 1000px) {
  .bl-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bl-head-facts { max-width: 420px; }
  .bl-lead { grid-template-columns: minmax(0, 1fr); }
  .bl-lead-side { border-left: 0; border-top: 1px solid var(--line); }
  .bl-row { grid-template-columns: 96px minmax(0, 1fr) 300px; gap: 16px; }
  .bl-row-meta { grid-template-columns: 140px minmax(0, 1fr); gap: 8px 10px; }
  .bl-row-meta .bl-row-time { grid-column: 2; }
  .bl-row-meta .bl-au { grid-column: 1 / -1; }
  .bl-sub { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* the row's three columns become one block: the date and the meta line sit
   above and below the title rather than in tracks too narrow to hold them */
@media (max-width: 800px) {
  .bl-row { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 18px 0; }
  .bl-row-date { padding-top: 0; }
  .bl-row-meta { justify-content: flex-start; gap: 10px; padding-top: 2px; }
  .bl-row-t { max-width: none; }
}

@media (max-width: 620px) {
  .bl-head { padding-bottom: 22px; }
  /* the facts card is 180px of supporting detail between the reader and the
     first post, and the lead card prints the same numbers further down */
  .bl-head-facts { display: none; }
  /* Six tags wrapped to three rows at 360 and cost 140px above the first post.
     One line that scrolls sideways instead — the shape core.css gives .seg and
     the docs rail gives its jump links — where the tag cut off at the right
     edge is what says there are more. */
  .bl-filter {
    gap: 6px; padding: 12px 0;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .bl-filter::-webkit-scrollbar { display: none; }
  .bl-tag { flex: none; height: 34px; padding: 0 11px; }

  /* a row is a title, a hint and its meta on one line — three lines of dek
     turns nine rows into four screens of scrolling */
  .bl-row { padding: 15px 0; gap: 7px; }
  .bl-row-t { font-size: 16px; }
  .bl-row-d {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-top: 5px;
  }
  .bl-row-meta {
    display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  }
  .bl-row-meta .bl-au { font-size: 12.5px; }
  .tile.bl-au-t { width: 21px; height: 21px; font-size: 9.5px; border-radius: 5px; }
  .bl-lead { margin: 20px 0 28px; }
  .bl-lead-main { padding: 20px 18px 18px; }
  .bl-lead-side { padding: 20px 18px; }
  /* The clamp bottoms out at 24px, which on a phone made the lead post's title
     larger than the word Blog above it — on a desk the relationship is the other
     way round, 31 under an .h2 of 34. It takes the .h2 step here so the two
     agree again, and it is still the largest thing in a card whose next line is
     14px. */
  .bl-lead-t { max-width: none; font-size: 21px; }
  .bl-lead-foot .btn { width: 100%; justify-content: center; }
  .bl-lead-foot { gap: 14px; }

  .bl-art-t { max-width: none; }
  .bl-art-dek { font-size: 16.5px; max-width: none; }
  .bl-art-head { padding-bottom: 22px; }
  .bl-art-by { margin-top: 18px; gap: 10px; }
  .bl-art-by .btn { margin-left: auto; }

  .bl-body { padding-top: 22px; }
  .bl-body p { font-size: 15.5px; line-height: 1.66; }
  .bl-body > p:first-child { font-size: 16.5px; }
  .bl-h { font-size: 19.5px; margin-top: 34px; padding-top: 18px; }
  .bl-quote { font-size: 17.5px; padding-left: 16px; margin: 24px 0; }
  .bl-ul li { font-size: 15px; }
  .bl-note { padding: 14px 15px; }
  .bl-code, .bl-figure { margin: 20px -2px 22px; }

  .bl-sub { padding: 20px 18px; }
  .bl-sub-form { flex-direction: column; align-items: stretch; }
  .bl-sub-form .btn { width: 100%; justify-content: center; }

  .bl-nav { grid-template-columns: minmax(0, 1fr); }
  .bl-author { flex-direction: column; gap: 12px; }
  .bl-foot { margin-top: 32px; padding-top: 24px; }
}

/* A figure table stacks into labelled rows rather than sliding sideways: on a
   phone a five-column table is either a side-scroller nobody scrolls or a
   column of text nobody can align. This is the third option. */
@media (max-width: 620px) {
  .bl-fig .tbl, .bl-fig .tbl tbody, .bl-fig .tbl tr, .bl-fig .tbl td { display: block; width: 100%; }
  .bl-fig .tbl thead { display: none; }
  .bl-fig .tbl tr {
    padding: 10px 14px; border-bottom: 1px solid var(--line);
  }
  .bl-fig .tbl tbody tr:last-child { border-bottom: 0; }
  .bl-fig .tbl td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 2px 0; border: 0; text-align: left;
  }
  .bl-fig .tbl td.r { text-align: left; }
  .bl-fig .tbl td::before {
    content: attr(data-l); flex: none;
    font: 400 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-3);
  }
  /* the first cell of each row is the row's own heading */
  .bl-fig .tbl td:first-child {
    padding-bottom: 6px; margin-bottom: 3px; border-bottom: 1px dashed var(--line);
    font-size: 14px; font-weight: 550;
  }
  .bl-fig .tbl td:first-child::before { display: none; }
  .bl-fig-kv .kv { flex-wrap: nowrap; }

  /* the bar list keeps its bar: name and total on one line, the bar under it */
  .bl-bar-head { display: none; }
  .bl-bar-row {
    grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
    height: auto; padding: 11px 14px;
  }
  .bl-bar-row .bl-bar-c { grid-row: 2; font-size: 11px; }
  .bl-bar-row .bar { grid-row: 2; grid-column: 2; align-self: center; }
  .bl-bar-row .bl-bar-v { grid-row: 1; grid-column: 2; }
}

/* metrics strips are 4-up on a desktop and 2-up from 640 down, which core.css
   already handles; below 400 the labels need the extra line */
@media (max-width: 400px) {
  .metrics.bl-fig .k { letter-spacing: .06em; }
  .bl-lead-nums .v { min-width: 46px; font-size: 16px; }
}

/* ---------- the post fills its column -------------------------------------
   Asked for twice: the text should run up to the contents rail rather than
   stopping short of it. Inside the post the measure comes off entirely, so the
   only space left between the prose and the rail is the grid's own 26px
   gutter. Line height carries a little more leading, because a line this long
   needs the extra help finding its way back to the left edge. */
.bl-layout .bl-body p,
.bl-layout .bl-body .bl-h,
.bl-layout .bl-body .bl-ul,
.bl-layout .bl-body .bl-quote,
.bl-layout .bl-body .bl-note,
.bl-layout .bl-body .bl-code,
.bl-layout .bl-body .bl-figure { max-width: none; }
.bl-layout .bl-body p { line-height: 1.75; }

/* ---------- the pager -----------------------------------------------------
   Ten posts fit on one screen; forty will not. Every page is one press away
   because at this length a windowed pager with ellipses solves a problem the
   blog does not have — and the current page is stated rather than merely
   highlighted, so it survives a reader who cannot see the fill. */
.bl-pager {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
/* EVERY SEAT THAT LEADS SOMEWHERE IS AN ANCHOR NOW, and an anchor is inline
   where a button is inline-block — so the two declarations that came free on a
   button are stated. One rule for both shapes, so a pager made of links and the
   two disabled buttons at its ends are one control on screen. */
.bl-pg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface); color: var(--ink-2); text-decoration: none;
  font: 500 13px/1 var(--sans); cursor: pointer; transition: .12s;
}
.bl-pg:hover:not(:disabled) { border-color: var(--line-2); color: var(--ink); }
.bl-pg.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.bl-pg:disabled { color: var(--ink-3); cursor: default; opacity: .55; }
/* Previous and Next carry words rather than chevrons: they are the two a
   reader reaches for without looking, and a word is a bigger target */
/* 34px is already the phone's step for a control in a bar — the tag filter at
   the top of this same page is 34, and so are .seg button and a.tag everywhere
   else — so the pager needs no width of its own down there. It had carried a
   36px phone rule, which put two rows of the same page's buttons two pixels
   apart for no reason a reader could name. */
.bl-pg[data-pg]:first-child { margin-right: 4px; }
.bl-pg[data-pg]:last-child { margin-left: 4px; }

/* The `.bl-draw` vocabulary lived here while the figures were inline SVG in
   the article body. They are image files now — written in both palettes by
   scripts/make-blog-figures.mjs and scripts/blog-art.mjs, which carry their
   own <style> — so the rules had nothing left to style. Removed rather than
   left as a comment nobody would dare delete later. */

/* ---- a drawing, as a file rather than as markup -------------------------
   Two images, one shown. An <img> cannot see the page's variables, so each
   figure is written out in both palettes and the theme picks — which also
   means a reader can open one in a new tab, save it, or send it to somebody,
   which is the whole reason they stopped being inline SVG. */
/* EIGHTY PER CENT, NOT THE WHOLE COLUMN. A diagram set as wide as the prose
   reads as a slab the eye has to climb over; set narrower it sits inside the
   text the way a figure in a book does. The phone rule below overrides it —
   there, the figure needs every pixel it can get. */
.bl-shot { width: 80%; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); padding: 0; overflow: hidden; }
.bl-shot img { display: block; width: 100%; height: auto; }
.bl-shot .bl-shot-d { display: none; }
[data-theme="dark"] .bl-shot .bl-shot-l { display: none; }
[data-theme="dark"] .bl-shot .bl-shot-d { display: block; }
.bl-shot figcaption { padding: 0 16px 14px; margin-top: 12px; }

/* A DIAGRAM SHRUNK TO A PHONE IS NOT A DIAGRAM. These are drawn on a 760-unit
   canvas with 11–13px type; scaled into a 345px column that type lands at
   about five pixels, which is a picture of a diagram rather than one. So on a
   narrow screen the figure keeps a legible width and scrolls inside its own
   box — the same rule the wide tables in the cabinets follow, and the reason
   the page itself never scrolls sideways. */
@media (max-width: 1079px) { .bl-shot { width: 100%; } }
@media (max-width: 700px) {
  .bl-shot { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bl-shot img { min-width: 560px; }
  .bl-shot figcaption { position: sticky; left: 0; max-width: calc(100vw - 60px); }
}

/* ---- every insert keeps the figures' width ------------------------------
   The drawings sit at 80% of the column; a table, a code block, a pull quote
   or a note at full width beside them reads as two different documents. One
   width for everything that is not prose, and the prose keeps its measure. */
/* THE OUTER WRAPPER ONLY. `.bl-fig` is the card INSIDE `.bl-figure`, so
   constraining both made a table 80% of 80% — 64% of the column, visibly
   narrower than the drawing above it. */
.bl-body .bl-figure,
.bl-body .bl-code,
.bl-body .bl-quote,
.bl-body .bl-note { width: 80%; max-width: 80%; }
.bl-body .bl-figure .bl-fig { width: 100%; max-width: 100%; }
/* FULL WIDTH FROM THE POINT THE PAGE STOPS BEING WIDE. 80% is a proportion
   that only makes sense next to a wide column: on a phone it is 80% of an
   already narrow measure, which turns a diagram into a stamp and a table into
   a column of wrapped words. The breakpoint is the same 1080px at which the
   table of contents gives up its column — past that the article has all the
   room there is, and so does everything in it. */
@media (max-width: 1079px) {
  .bl-body .bl-figure,
  .bl-body .bl-code,
  .bl-body .bl-quote,
  .bl-body .bl-note { width: 100%; max-width: 100%; }
}