/* ------------------------------------------------------------------
   Blog — editorial index + article template.
   Loaded after /docs/docs.css, which still supplies the body typography
   for generated article content. This file adds the index layout, the
   article shell, code-copy affordances, and the responsive rules.
   ------------------------------------------------------------------ */

:root {
  --b-canvas: #fafaf9;
  --b-raised: #ffffff;
  --b-rail: #f3f3f1;
  --b-ink: #16181b;
  --b-ink-2: #56585c;
  --b-ink-3: #7b7e84;
  --b-hairline: #e7e7e4;
  --b-hairline-strong: #d5d5d1;
  --b-band: #1b1d21;
  --b-band-ink: #f4f3f1;
  --b-band-track: #33373d;
  --b-band-edge: #4a515c;
  --b-select: #efefec;
  --b-amber: #efa23a;
  --b-amber-deep: #b97817;
  --b-amber-tint: #fbf1e2;
  --b-on-amber: #241a08;
  --b-ready: #2e7d55;
}

html[data-theme="dark"] {
  --b-canvas: #141619;
  --b-raised: #1d2024;
  --b-rail: #191b1e;
  --b-ink: #f2f2f0;
  --b-ink-2: #a9acb2;
  --b-ink-3: #8b9099;
  --b-hairline: #26292e;
  --b-hairline-strong: #32363c;
  --b-band: #14161a;
  --b-band-ink: #f4f3f1;
  --b-band-track: #2b2f35;
  --b-band-edge: #414852;
  --b-select: #24272b;
  --b-amber-deep: #eab05a;
  --b-amber-tint: #2a2113;
  --b-ready: #5fc7a0;
}

.blog-page a { text-decoration: none; }

.blog-page a:focus-visible,
.blog-page button:focus-visible {
  outline: 2px solid var(--b-amber-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.blog-inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.blog-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--b-amber-deep);
  font: 600 11px/16px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-kicker::before {
  width: 24px;
  height: 2px;
  background: var(--b-amber);
  content: "";
}

/* ------------------------------- index ------------------------------- */

.blog-intro {
  padding: 60px 0 34px;
  background: var(--b-raised);
}

.blog-intro h1 {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--b-ink);
  font-size: 46px;
  font-weight: 700;
  line-height: 54px;
  letter-spacing: -.025em;
}

.blog-intro > .blog-inner > p {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--b-ink-2);
  font-size: 16px;
  line-height: 26px;
}

/* featured + recent */

.blog-feed {
  padding: 34px 0 56px;
  border-top: 1px solid var(--b-hairline);
  background: var(--b-raised);
}

.blog-feed-grid {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 470px);
  justify-content: space-between;
  gap: 60px;
}

.blog-featured {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  color: inherit;
}

.blog-featured .f-kicker {
  color: var(--b-amber-deep);
  font: 600 10px/14px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.blog-featured h2 {
  margin: 0;
  color: var(--b-ink);
  font-size: 34px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -.022em;
}

.blog-featured:hover h2 { color: var(--b-amber-deep); }

.blog-featured p {
  margin: 0;
  color: var(--b-ink-2);
  font-size: 15px;
  line-height: 24px;
}

.blog-featured .f-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--b-ink-3);
  font: 11px/16px var(--mono);
}

.blog-featured img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 4px;
  border: 1px solid var(--b-hairline);
  border-radius: 8px;
  background: var(--b-rail);
}

.blog-recent {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-left: 1px solid var(--b-hairline);
  padding-left: 32px;
}

.blog-recent-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--b-hairline);
  color: inherit;
}

.blog-recent-item:first-child { padding-top: 0; }

.blog-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--b-ink-3);
  font: 10px/14px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-recent-item h3 {
  margin: 0;
  color: var(--b-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -.015em;
}

.blog-recent-item:hover h3 { color: var(--b-amber-deep); }

.blog-recent-item p {
  margin: 0;
  color: var(--b-ink-2);
  font-size: 13px;
  line-height: 21px;
}

.blog-recent-all {
  padding-top: 20px;
  color: var(--b-amber-deep);
  font-size: 14px;
  font-weight: 600;
}

/* archive */

.blog-archive {
  padding: 56px 0 72px;
  border-top: 1px solid var(--b-hairline);
  background: var(--b-canvas);
}

.blog-archive-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.blog-archive-head h2 {
  margin: 0;
  color: var(--b-ink);
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -.02em;
}

.blog-archive-head p {
  margin: 0;
  color: var(--b-ink-3);
  font: 11px/16px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 30px;
}

/* One substantial editorial row per article. min-height (not height) so a
   long title or description grows the row instead of clipping. */
.blog-item {
  display: grid;
  grid-template-columns: 104px 128px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 18px 22px;
  border: 1px solid var(--b-hairline);
  border-radius: 6px;
  background: var(--b-raised);
  color: inherit;
  transition: border-color .14s ease, background .14s ease;
}

.blog-item:hover {
  border-color: var(--b-hairline-strong);
  background: var(--b-rail);
}

.blog-item:hover .bi-title { color: var(--b-amber-deep); }

.blog-item .bi-date {
  color: var(--b-ink-2);
  font: 10px/17px var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.blog-item .bi-tag {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  max-width: 100%;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid var(--b-amber);
  border-radius: 5px;
  background: var(--b-amber-tint);
  color: var(--b-amber-deep);
  font: 600 9px/12px var(--mono);
  letter-spacing: .06em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.blog-item .bi-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  padding-right: 12px;
}

.blog-item .bi-title {
  color: var(--b-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -.015em;
}

.blog-item .bi-desc {
  color: var(--b-ink-2);
  font-size: 12px;
  line-height: 19px;
}

.blog-item .bi-go {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--b-hairline-strong);
  border-radius: 5px;
  color: var(--b-ink-2);
}

.blog-item:hover .bi-go {
  border-color: var(--b-amber);
  color: var(--b-amber-deep);
}

.blog-item .bi-go svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-item[hidden] { display: none; }

.blog-empty {
  padding: 48px 20px;
  border: 1px solid var(--b-hairline);
  border-radius: 6px;
  background: var(--b-raised);
  text-align: center;
}

.blog-empty strong {
  display: block;
  margin-bottom: 8px;
  color: var(--b-ink);
  font-size: 15px;
}

.blog-empty p {
  margin: 0;
  color: var(--b-ink-2);
  font-size: 13px;
  line-height: 20px;
}

/* pagination */

.blog-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 16px;
}

.blog-count {
  min-width: 200px;
  color: var(--b-ink-2);
  font: 500 10px/14px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.blog-persize {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 36px;
  padding: 3px 4px 3px 10px;
  border-radius: 6px;
  background: var(--b-select);
}

.blog-persize > span {
  padding-right: 6px;
  color: var(--b-ink-2);
  font: 500 9px/12px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.blog-persize button {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--b-ink-2);
  font: 10px/12px var(--mono);
  cursor: pointer;
}

.blog-persize button:hover { color: var(--b-ink); }

.blog-persize button[aria-pressed="true"] {
  background: var(--b-amber);
  color: var(--b-on-amber);
  font-weight: 700;
}

.blog-pages {
  display: flex;
  min-width: 200px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.blog-pages button {
  display: inline-flex;
  min-width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--b-hairline-strong);
  border-radius: 5px;
  background: var(--b-raised);
  color: var(--b-ink);
  font: 10px/12px var(--mono);
  cursor: pointer;
}

.blog-pages button:hover:not(:disabled):not([aria-current]) {
  background: var(--b-rail);
}

.blog-pages button[aria-current="page"] {
  border-color: var(--b-band);
  background: var(--b-band);
  color: var(--b-band-ink);
  font-weight: 700;
}

.blog-pages button:disabled {
  border-color: var(--b-hairline);
  background: var(--b-rail);
  cursor: not-allowed;
  opacity: .5;
}

.blog-pages button svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-pages .gap {
  padding: 0 2px;
  color: var(--b-ink-3);
  font: 10px/12px var(--mono);
}

/* ------------------------------ article ------------------------------ */

/* Reading column plus a sticky "On this page" rail. .doc/.blogpost stay on
   the article element so the generated body keeps its docs typography. */
.article-shell {
  display: grid;
  /* 240px, not 216px: the extra 24px offsets the TOC card's horizontal
     padding so its text measure is unchanged. The article column stays 760px. */
  grid-template-columns: 240px minmax(0, 760px);
  justify-content: center;
  gap: 56px;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 44px 0 72px;
  align-items: start;
}

.article-rail {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

/* The card keeps docs.css's surface + border; this restores real padding
   inside it. The heading and every link start on one inner content line —
   the per-item rail lives in the padding to the left of that line rather
   than pushing the link text inward. */
.blog-page .post-toc {
  margin: 0;
  padding: 20px 18px 22px;
}

.blog-page .post-toc h4 {
  margin: 0 0 14px;
  padding: 0;
  color: var(--b-ink-3);
  font: 600 10px/14px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.blog-page .post-toc ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-page .post-toc li { margin: 0; }

.blog-page .post-toc a {
  position: relative;
  display: block;
  padding: 3px 0;
  border-left: 0;
  color: var(--b-ink-2);
  font-size: 13px;
  line-height: 20px;
}

/* Active/hover rail — sits inside the card padding so it never shifts the
   text off the shared content line. */
.blog-page .post-toc a::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: -10px;
  width: 2px;
  border-radius: 1px;
  background: var(--b-hairline);
  content: "";
  transition: background .14s ease;
}

.blog-page .post-toc a:hover,
.blog-page .post-toc a:focus-visible {
  color: var(--b-amber-deep);
}

.blog-page .post-toc a:hover::before,
.blog-page .post-toc a:focus-visible::before {
  background: var(--b-amber);
}

.blog-page .blogpost > .doc-kicker { margin-bottom: 14px; }

.blog-page .blogpost h1 {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -.028em;
}

.blog-page .blogpost > .lede {
  max-width: 68ch;
  margin-bottom: 22px;
  font-size: 18px;
  line-height: 29px;
}

.blog-page .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--b-hairline);
  color: var(--b-ink-3);
  font: 12px/18px var(--mono);
}

.blog-page .post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 8px;
}

.blog-page .post-tags .chip {
  padding: 4px 9px;
  border: 1px solid var(--b-hairline-strong);
  border-radius: 5px;
  background: var(--b-rail);
  color: var(--b-ink-2);
  font: 9px/12px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.blog-page .blogpost p { max-width: 72ch; }

/* code blocks + copy */

/* The wrapper owns the terminal surface and the button's lane; the <pre>
   inside is the scroller, inset so a long line is clipped *before* the
   button instead of sliding underneath it. */
.blog-page .codeblock {
  position: relative;
  overflow: hidden;
  margin: 22px 0;
  border: 1px solid var(--term-line);
  border-radius: 10px;
  background: var(--term);
}

.blog-page .codeblock > .code {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-right: 14px;
  margin-right: 52px;
}

.blog-page .code {
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Dark surface, light glyph — never amber. */
.blog-page .code-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--b-band-edge);
  border-radius: 5px;
  background: var(--b-band-track);
  color: var(--b-band-ink);
  cursor: pointer;
  opacity: .82;
  transition: opacity .14s ease, background .14s ease;
}

.blog-page .codeblock:hover .code-copy,
.blog-page .code-copy:focus-visible { opacity: 1; }

.blog-page .code-copy:hover { background: #40454d; }

.blog-page .code-copy svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-page .code-copied {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--b-band-track);
  color: var(--b-band-ink);
  font: 10px/14px var(--mono);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .14s ease;
  white-space: nowrap;
}

.blog-page .code-copy.is-copied { color: #7fd6ab; }
.blog-page .code-copy.is-copied .code-copied { opacity: 1; }


/* Tables keep the generator's .tbl-wrap scroller — give it a visible frame
   so a clipped column reads as scrollable rather than missing. Columns are
   never dropped on small screens. */
.blog-page .tbl-wrap {
  margin: 22px 0;
  border: 1px solid var(--b-hairline);
  border-radius: 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.blog-page .tbl-wrap > .tbl { margin: 0; }

.blog-page .tbl-wrap > .tbl th:first-child,
.blog-page .tbl-wrap > .tbl td:first-child { padding-left: 16px; }

.blog-page .tbl-wrap > .tbl th:last-child,
.blog-page .tbl-wrap > .tbl td:last-child { padding-right: 16px; }

.blog-page .tbl-wrap > .tbl tr:last-child td { border-bottom: 0; }

/* images — intrinsic ratio kept so nothing shifts on load */
.blog-page .blogpost img {
  max-width: 100%;
  height: auto;
}

/* ------------------------ shared end-of-post CTA ------------------------
   docs.css gives .note (and anything wearing it) an amber-tinted fill and a
   flex row. On a card that also carries a command and two actions that reads
   as one muddy block in three narrow columns. Here the surface is neutral,
   amber is only the left rule, and the card is two parts: prose, then the
   command and the actions. */

.blog-page .post-cta {
  display: grid;
  /* Prose and the page actions sit side by side; the command takes its own
     full-width row underneath so a 48-character install line renders on one
     line instead of folding four times inside a narrow column. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 250px);
  grid-template-areas:
    "copy links"
    "cmd  cmd";
  align-items: start;
  gap: 20px 32px;
  margin: 8px 0 26px;
  padding: 24px 26px;
  border: 1px solid var(--b-hairline);
  border-left: 3px solid var(--b-amber);
  border-radius: 10px;
  background: var(--b-raised);
  color: var(--b-ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.blog-page .post-cta .cta-copy { grid-area: copy; min-width: 0; }
.blog-page .post-cta .cta-links { grid-area: links; }
.blog-page .post-cta .cta-cmd { grid-area: cmd; }

.blog-page .post-cta b {
  color: var(--b-ink);
  font-weight: 600;
}

/* The command uses the same dark block as the article body, at full width so
   nothing is truncated. */
.blog-page .cta-cmd {
  margin: 0;
  width: 100%;
}

/* Wrap at spaces rather than scroll: the whole command has to be readable
   without interaction, and it must never run under the copy button. */
.blog-page .cta-cmd > .code {
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-x: visible;
}

.blog-page .cta-cmd .code-copy {
  top: 8px;
  right: 8px;
  opacity: 1;
}

.blog-page .cta-links {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Restrained dark primary — the page's one filled action, not an amber slab. */
.blog-page .cta-primary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--b-band);
  border-radius: 8px;
  background: var(--b-band);
  color: var(--b-band-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease;
}

.blog-page .cta-primary:hover {
  background: #2a2d32;
  border-color: #2a2d32;
}

/* In dark mode a near-black button on a dark card sits at ~1.1:1 against its
   own surface — invert it so the primary action stays a visible shape. */
html[data-theme="dark"] .blog-page .cta-primary,
html[data-theme="dark"] .blog-page .post-nl button[type="submit"],
html[data-theme="dark"] .blog-page .post-nl #nl-submit {
  border-color: var(--b-ink);
  background: var(--b-ink);
  color: #15171b;
}

html[data-theme="dark"] .blog-page .cta-primary:hover,
html[data-theme="dark"] .blog-page .post-nl button[type="submit"]:hover,
html[data-theme="dark"] .blog-page .post-nl #nl-submit:hover {
  border-color: #ffffff;
  background: #ffffff;
}

/* Secondary reads as a text link, never a second button. */
.blog-page .cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--b-ink-2);
  font-size: 13.5px;
  font-weight: 500;
}

.blog-page .cta-secondary:hover { color: var(--b-amber-deep); }

.blog-page .cta-arrow {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The dictation variant has no command, so it needs no second column. */
.blog-page .post-cta.desktop-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy links";
  align-items: center;
}

/* ----------------- the other shared cards, same treatment -----------------
   The newsletter block and the :::note callouts carried the same amber fill.
   Neutral surface, hairline border, amber kept as the accent rule only. */

.blog-page .post-nl {
  padding: 20px 22px;
  border: 1px solid var(--b-hairline);
  border-left: 3px solid var(--b-amber);
  border-radius: 10px;
  background: var(--b-raised);
}

.blog-page .post-nl button[type="submit"],
.blog-page .post-nl #nl-submit {
  border: 1px solid var(--b-band);
  background: var(--b-band);
  color: var(--b-band-ink);
  font-weight: 600;
}

.blog-page .post-nl button[type="submit"]:hover,
.blog-page .post-nl #nl-submit:hover {
  background: #2a2d32;
  border-color: #2a2d32;
  filter: none;
}

.blog-page .blogpost .note {
  border: 1px solid var(--b-hairline);
  border-left: 3px solid var(--b-amber);
  background: var(--b-raised);
}

/* Warnings keep a distinguishing wash so the two callouts stay tellable
   apart without either becoming a solid amber block. */
.blog-page .blogpost .note.warn {
  border-color: var(--b-hairline);
  border-left-color: var(--b-amber-deep);
  background: var(--b-amber-tint);
}

/* prev / next */

.article-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--b-hairline);
}

.article-nav a {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px;
  border: 1px solid var(--b-hairline);
  border-radius: 6px;
  background: var(--b-raised);
  color: inherit;
}

.article-nav a:hover {
  border-color: var(--b-amber);
  background: var(--b-rail);
}

.article-nav .an-dir {
  color: var(--b-ink-3);
  font: 9px/12px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.article-nav .an-title {
  color: var(--b-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.article-nav a:hover .an-title { color: var(--b-amber-deep); }

.article-nav .an-next { text-align: right; align-items: flex-end; }

/* ----------------------------- responsive ----------------------------- */

@media (max-width: 1100px) {
  .article-shell {
    grid-template-columns: 212px minmax(0, 1fr);
    gap: 40px;
  }

  .blog-page .post-toc { padding: 18px 16px 20px; }

  .blog-feed-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: 40px;
  }

  .blog-intro h1 { font-size: 40px; line-height: 48px; }
  .blog-featured h2 { font-size: 30px; line-height: 38px; }
}

@media (max-width: 900px) {
  /* TOC becomes a normal block above the article rather than a rail. */
  .article-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 34px;
  }

  .article-rail {
    position: static;
    max-height: none;
    margin-bottom: 26px;
    overflow: visible;
  }

  .blog-page .post-toc a { border-left-width: 2px; }

  /* Two balanced columns collapse to one stack well before they get narrow
     enough to squeeze the command or wrap the button label. */
  .blog-page .post-cta,
  .blog-page .post-cta.desktop-cta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "cmd"
      "links";
    gap: 18px;
  }

  .blog-page .post-cta.desktop-cta {
    grid-template-areas:
      "copy"
      "links";
  }


  .blog-feed-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }

  .blog-recent {
    border-left: 0;
    border-top: 1px solid var(--b-hairline);
    padding-left: 0;
    padding-top: 8px;
  }

  /* Second track is auto, not the desktop 30px action column — a tag pushed
     into a 30px track wraps to one character per line. */
  .blog-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    padding: 18px;
  }

  /* Date and tag share one meta line above the title. */
  .blog-item .bi-date {
    grid-column: 1;
    grid-row: 1;
  }

  .blog-item .bi-tag {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .blog-item .bi-body {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-right: 0;
  }

  .blog-item .bi-go {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    width: auto;
    height: 28px;
    padding: 0 10px;
    gap: 6px;
    font: 600 11px/12px var(--mono);
  }

  .blog-item .bi-go::before { content: "Read"; }
}

@media (max-width: 760px) {
  .blog-inner { width: min(100% - 32px, 1180px); }

  .blog-page .nav-links { gap: 12px; }

  .blog-page .nav-links > a:not(.nav-gh):not(.nav-social) { display: none; }

  .blog-intro { padding: 40px 0 26px; }
  .blog-intro h1 { font-size: 32px; line-height: 40px; }
  .blog-intro > .blog-inner > p { font-size: 15px; line-height: 24px; }

  .blog-featured h2 { font-size: 25px; line-height: 33px; }
  .blog-archive-head h2 { font-size: 27px; line-height: 34px; }

  .blog-page .blogpost h1 { font-size: 30px; line-height: 38px; }
  .blog-page .blogpost > .lede { font-size: 16px; line-height: 26px; }

  .article-shell { width: min(100% - 32px, 1180px); }

  /* Stack the pager so the size options keep real tap targets. */
  .blog-pager {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .blog-count { min-width: 0; text-align: center; }

  .blog-persize {
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .blog-persize::-webkit-scrollbar { display: none; }

  .blog-pages { min-width: 0; justify-content: center; }

  .article-nav { grid-template-columns: minmax(0, 1fr); }
  .article-nav .an-next { text-align: left; align-items: flex-start; }

  .blog-page .post-cta { padding: 20px 18px; }

  /* Full-width primary, secondary beneath it — no side-by-side squeeze. */
  .blog-page .cta-links {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .blog-page .cta-primary { width: 100%; }
  .blog-page .cta-secondary { justify-content: flex-start; }
}

@media (max-width: 400px) {
  .blog-inner,
  .article-shell { width: min(100% - 24px, 1180px); }

  .blog-item { padding: 16px 14px; }
  .blog-item .bi-title { font-size: 16px; line-height: 22px; }
  .blog-page .blogpost h1 { font-size: 26px; line-height: 33px; }

  /* Trim the TOC card's inset on the narrowest screens so entry titles keep
     a usable measure instead of wrapping every second word. */
  .blog-page .post-toc { padding: 16px 14px 18px; }
  .blog-page .post-toc a::before { left: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-page *,
  .blog-page *::before,
  .blog-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}