/* ============================================================
   MailCull — Blog v10
   Premium editorial system for the blog listing + single post.
   Anchored to the approved v10 marketing aesthetic so the blog
   feels like the same site as the landing: warm paper, ink, Fin
   orange, IBM Plex Mono micro-labels, crop-mark ticks, quiet
   square-dot fields, big LIGHT Inter headlines, sharp corners.

   READING IS THE PRIORITY. Generous measure, comfortable leading,
   restrained meta, strong hierarchy. Geometry is used sparingly
   so it never competes with the words.

   Base: colors_and_type.css  ·  Chrome: site-chrome.css
   This file overrides a handful of tokens to the v10 paper palette
   and swaps the mono to IBM Plex Mono (loaded per page).
   ============================================================ */

:root {
  /* v10 paper palette (overrides colors_and_type.css for blog pages) */
  --bg:            #f6f3ec;
  --paper-2:       #efeae0;
  --panel:         #fffefb;
  --panel-2:       #faf7f1;
  --ink:           #14120e;
  --ink-soft:      #2a2620;
  --muted:         #6f6a60;
  --muted-2:       #908a7e;
  --line:          #ddd8cd;
  --line-strong:   #c7c1b4;
  --accent:        #ff5600;
  --accent-dark:   #cc4400;
  --accent-lt:     #ff8a4d;
  --good:          #067647;
  --warn:          #b54708;
  --danger:        #c41c1c;
  --font-mono:     "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --measure: 68ch;
  --maxw: 1180px;
  --r: 6px;
  --r-lg: 12px;
  --shadow-ui:    0 1px 2px rgba(20,18,12,0.04), 0 24px 56px -30px rgba(20,18,12,0.22);
  --shadow-lift:  0 3px 8px rgba(20,18,12,0.07), 0 38px 80px -32px rgba(20,18,12,0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
[id] { scroll-margin-top: 96px; }
main { overflow-x: clip; }

.bv-shell { width: min(var(--maxw), calc(100% - 56px)); margin: 0 auto; }
/* Visually-hidden heading: the blog index dropped its visible "Field notes"
   hero and opens with the featured post, but keeps one <h1> for SEO + a11y. */
.bv-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Align shared chrome to the paper palette */
.mc-header { background: var(--bg); }
.mc-header .mc-btn-accent { background: var(--ink); }
.mc-header .mc-btn-accent:hover { background: var(--ink-soft); }
.mc-footer { background: var(--paper-2); }

/* ── Type primitives ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  padding: 7px 13px; border: 1px solid rgba(255,86,0,0.22);
  border-radius: 999px; background: rgba(255,86,0,0.06);
}
.eyebrow.plain { color: var(--muted); border-color: var(--line-strong); background: transparent; }
.kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2);
}

/* ── Crop-mark ticks ── */
.tick { position: absolute; width: 7px; height: 7px; background: var(--ink); z-index: 3; }
.tick.acc { background: var(--accent); }
.tick.tl { top: -3.5px; left: -3.5px; } .tick.tr { top: -3.5px; right: -3.5px; }
.tick.bl { bottom: -3.5px; left: -3.5px; } .tick.br { bottom: -3.5px; right: -3.5px; }

/* ── Square-dot field (filled by blog-v10.js) ── */
.dotfield { position: absolute; z-index: 0; pointer-events: none; overflow: hidden; }
.dotfield i { position: absolute; display: block; }
.dotfield.pool {
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at center, #000 16%, transparent 74%);
          mask-image: radial-gradient(ellipse 60% 62% at center, #000 16%, transparent 74%);
}
.dotfield.dim {
  -webkit-mask-image: radial-gradient(ellipse 78% 86% at 75% 10%, #000 22%, transparent 80%);
          mask-image: radial-gradient(ellipse 78% 86% at 75% 10%, #000 22%, transparent 80%);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--r); border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.1px;
  cursor: pointer; transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-soft); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { background: rgba(20,18,12,0.04); border-color: var(--ink); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink); }
.link-arrow .ar { color: var(--accent); transition: transform .2s ease; }
.link-arrow:hover .ar { transform: translateX(4px); }

/* ── Status chips (product language, reused on covers) ── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid; white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-good   { color: var(--good);   border-color: rgba(6,118,71,0.28);  background: rgba(6,118,71,0.08); }
.chip-warn   { color: var(--warn);   border-color: rgba(181,71,8,0.28);  background: rgba(181,71,8,0.08); }
.chip-danger { color: var(--danger); border-color: rgba(196,28,28,0.28); background: rgba(196,28,28,0.07); }
.chip-muted  { color: var(--muted);  border-color: var(--line-strong);   background: var(--paper-2); }

/* ============================================================
   BRANDED COVER SPECIMEN — the blog's signature visual.
   Instead of stock art, posts are anchored by a clean readout of
   the product's actual output (address + verdict + signals),
   framed with crop-marks and a faint dot field.
   ============================================================ */
.specimen { position: relative; }
.specimen .dotfield { inset: -40px; }
.spec-card {
  position: relative; z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0) 70px),
    var(--panel);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.spec-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.spec-bar .l { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.spec-brand { width: 22px; height: 22px; border-radius: 5px; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--font-sans); font-size: 9px; font-weight: 600; position: relative; }
.spec-brand::after { content: ""; position: absolute; top: 3px; right: 3px; width: 2.5px; height: 2.5px; background: var(--accent); border-radius: 1px; }
.spec-live { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); display: inline-flex; align-items: center; gap: 6px; }
.spec-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--good); }
.spec-body { padding: 20px 18px; }
.spec-addr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spec-addr { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.spec-addr em { font-style: normal; color: var(--accent); }
.spec-signals { margin-top: 16px; display: grid; }
.spec-sig { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.spec-sig .i { display: grid; place-items: center; }
.spec-sig .i svg { width: 14px; height: 14px; }
.spec-sig.good .i { color: var(--good); }
.spec-sig.warn .i { color: var(--warn); }
.spec-sig .k { color: var(--ink); }
.spec-sig .v { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.spec-foot { padding: 11px 16px; border-top: 1px solid var(--line); background: var(--panel-2); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.spec-foot b { color: var(--ink); font-weight: 600; }

/* ============================================================
   LISTING
   ============================================================ */
.blog-hero { padding: 56px 0 38px; position: relative; }
.blog-hero .dotfield { inset: -30px -10px auto auto; width: 360px; height: 240px; }
.blog-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: end; }
.blog-hero .eyebrow { margin-bottom: 22px; }
.blog-hero h1 {
  margin: 0; font-size: clamp(40px, 5.4vw, 68px); font-weight: 400;
  letter-spacing: -0.035em; line-height: 0.98; max-width: 16ch; text-wrap: balance;
}
.blog-hero h1 em { font-style: normal; color: var(--accent); }
.blog-hero p { margin: 22px 0 0; font-size: 18px; line-height: 1.56; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.blog-hero-meta { display: grid; gap: 10px; padding-bottom: 6px; text-align: right; }
.blog-hero-meta .n { font-size: 40px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.blog-hero-meta .l { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }

/* Featured post — full-width banner card (no thumbnail) */
.featured {
  display: block;
  position: relative; overflow: hidden; margin-top: 44px;
  padding: 34px 38px 30px;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 130px), var(--panel);
}
.featured .dotfield { inset: -50px -40px auto auto; width: 400px; height: 280px; }
.featured > *:not(.dotfield) { position: relative; z-index: 1; }
.featured .flag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.featured .flag::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
.featured h2 { margin: 16px 0 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; max-width: 22ch; }
.featured h2 em { font-style: normal; color: var(--accent); }
.featured:hover h2 { color: var(--accent-dark); }
.featured .dek { margin: 15px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--muted); max-width: 64ch; text-wrap: pretty; }
.featured .feat-foot { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.featured .feat-foot .link-arrow .ar { transition: transform .2s ease; }
.featured:hover .feat-foot .link-arrow .ar { transform: translateX(4px); }

/* Two-column main: list + category sidebar (fills the right gutter) */
.blog-main { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 60px; align-items: start; }
.blog-col { min-width: 0; }
.sidebar { position: sticky; top: 88px; display: grid; gap: 30px; }
.side-block { display: grid; }
.side-title { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line-strong); }
.side-cat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--r); font-size: 14px; color: var(--ink); cursor: pointer; transition: background .12s ease, color .12s ease; }
.side-cat:hover { background: var(--panel-2); }
.side-cat .c { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); }
.side-cat.active { color: #fff; background: var(--ink); }
.side-cat.active .c { color: rgba(255,255,255,0.55); }
.side-pop a { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.side-pop a:first-of-type { border-top: 0; padding-top: 2px; }
.side-pop .rank { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); padding-top: 1px; }
.side-pop .pt { font-size: 14px; font-weight: 450; line-height: 1.34; color: var(--ink); transition: color .12s ease; text-wrap: pretty; }
.side-pop a:hover .pt { color: var(--accent-dark); }

/* shared meta line */
.row-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.row-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.row-meta .tag { color: var(--accent); }
.row-meta .go { margin-left: 4px; color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.row-meta .go .ar { color: var(--accent); transition: transform .2s ease; }

/* Toolbar (sharp chips, not pills) */
.toolbar {
  position: sticky; top: 64px; z-index: 20;
  margin-top: 8px; padding: 14px 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(to bottom, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.chip-tag {
  padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: 13px; font-weight: 450; color: var(--ink); background: var(--panel); cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease; white-space: nowrap;
}
.chip-tag:hover { border-color: var(--ink); }
.chip-tag.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.toolbar .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }

/* Year divider — quiet, not the old 80px shout */
.year-divider {
  margin-top: 4px; padding-bottom: 10px;
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--line-strong);
}
.year-divider .y { font-size: 30px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.year-divider .m { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.year-divider .rule { flex: 1; height: 1px; background: var(--line); align-self: center; }

/* The list — single column, top-to-bottom scan */
.post-list { display: grid; }
/* "No posts match this tag" state (rendered by the tag-filter empty branch). */
.blog-empty-filter { margin: 24px 0; padding: 30px 28px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--panel); }
.blog-empty-filter p { margin: 12px 0 0; font-size: 16px; color: var(--muted); }
.post-row {
  position: relative; display: block;
  padding: 28px 0 28px 22px; border-top: 1px solid var(--line);
  transition: background .14s ease;
}
.post-row:first-child { border-top: 0; }
.post-row::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity .14s ease; }
.post-row:hover { background: rgba(20,18,12,0.018); }
.post-row:hover::before { opacity: 1; }
.post-row h3 { margin: 0; font-size: 23px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.25; color: var(--ink); text-wrap: pretty; max-width: 40ch; }
.post-row h3 em { font-style: normal; color: var(--accent); }
.post-row:hover h3 { color: var(--accent-dark); }
.post-row .dek { margin: 9px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.post-row .row-meta { margin-top: 14px; }

/* Pagination */
.pagination { margin-top: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pagination button {
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel);
  font-family: var(--font-mono); font-size: 13px; color: var(--ink); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.pagination button:hover { border-color: var(--ink); }
.pagination button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination button.nav { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; }
.pagination button.dots { border: 0; background: transparent; cursor: default; color: var(--muted-2); }

/* Newsletter — premium dark anchor (matches v10 bands) */
.subscribe {
  position: relative; margin: 64px 0 8px; overflow: hidden;
  padding: 48px 44px; border-radius: var(--r-lg);
  background: radial-gradient(720px 420px at 82% 0%, #221c13, #14120e 64%); color: #f4efe7;
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: 40px; align-items: center;
}
.subscribe .dotfield { inset: 0; }
.subscribe > *:not(.dotfield) { position: relative; z-index: 1; }
.subscribe .eyebrow { color: var(--accent-lt); border-color: rgba(255,138,77,0.3); background: rgba(255,138,77,0.08); }
.subscribe h3 { margin: 16px 0 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; color: #f7f3ec; text-wrap: balance; }
.subscribe h3 em { font-style: normal; color: var(--accent-lt); }
.subscribe p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: #a8a195; max-width: 42ch; }
.subscribe-form { display: grid; gap: 10px; }
.subscribe-form .field { display: flex; gap: 9px; }
.subscribe-form input { flex: 1; min-width: 0; padding: 13px 15px; font-family: var(--font-mono); font-size: 14px; color: #f4efe7; background: rgba(255,255,255,0.04); border: 1px solid #3a352e; border-radius: var(--r); outline: none; }
.subscribe-form input::placeholder { color: #8a847b; }
.subscribe-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,86,0,0.18); }
.subscribe-form .btn-accent { white-space: nowrap; }
.subscribe-form .fine { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a847b; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.progress { position: sticky; top: 64px; z-index: 30; height: 2px; background: transparent; }
.progress::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--accent); transition: width .1s linear; }

.article { padding: 40px 0 0; }
.article-head { max-width: var(--measure); }
.back-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.back-link:hover { color: var(--accent); }
.article-head .eyebrow { margin: 22px 0 0; }
.article-head h1 { margin: 18px 0 0; font-size: clamp(34px, 4.4vw, 54px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.article-head h1 em { font-style: normal; color: var(--accent); }
.article-head .dek { margin: 20px 0 0; font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 56ch; text-wrap: pretty; }

.byline { margin: 26px 0 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.byline .who { display: flex; align-items: center; gap: 12px; }
.byline .ava { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; position: relative; }
.byline .ava::after { content: ""; position: absolute; top: 5px; right: 5px; width: 3px; height: 3px; background: var(--accent); border-radius: 1px; }
.byline .name { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.byline .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.byline .right { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); display: flex; align-items: center; gap: 12px; }

/* Cover specimen on the post */
.article-cover { margin: 28px 0 0; max-width: var(--measure); }

/* 3-column reading layout */
.article-layout {
  margin: 44px 0 0;
  display: grid; grid-template-columns: 200px minmax(0, var(--measure)) 64px;
  gap: 56px; justify-content: center; align-items: start;
}
.toc { position: sticky; top: 96px; }
.toc .lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.toc nav { margin-top: 12px; display: grid; gap: 2px; }
.toc a { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); transition: color .12s ease; }
.toc a::before { content: ""; width: 8px; height: 1px; background: var(--line-strong); flex: none; transform: translateY(-4px); transition: background .12s ease, width .12s ease; }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--accent); }
.toc a.active::before { background: var(--accent); width: 14px; }

.share-rail { position: sticky; top: 96px; display: grid; gap: 8px; justify-items: center; }
.share-rail .lbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); writing-mode: vertical-rl; margin-bottom: 4px; }
.share-rail button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--muted); cursor: pointer; transition: color .12s ease, border-color .12s ease; }
.share-rail button:hover { color: var(--ink); border-color: var(--ink); }
.share-rail button svg { width: 15px; height: 15px; }

/* ── Prose — the reading core ── */
.prose { font-size: 18.5px; line-height: 1.72; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.45em; }
.prose p { text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a:not(.btn) { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* The markdown renderer shifts headings +1, so source `## ` sections
   render as <h3> and `### ` sub-headings as <h4>. The big numbered
   section treatment therefore targets h2+h3; sub-headings are h4. */
.prose h2, .prose h3 {
  margin-top: 1.9em; font-size: 27px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.18; color: var(--ink);
  display: grid; gap: 8px;
}
.prose h2 .h-k, .prose h3 .h-k { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 9px; }
.prose h2 .h-k::before, .prose h3 .h-k::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
.prose h4 { margin-top: 1.6em; font-size: 19px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.5em; }
.prose li { padding-left: 0.3em; }
.prose li::marker { color: var(--accent); }
.prose code { font-family: var(--font-mono); font-size: 0.82em; background: var(--paper-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; color: var(--ink-soft); }
.prose pre { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; background: #14120e; color: #d9d4ca; border-radius: var(--r); padding: 20px 22px; overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* Pull-quote */
.prose blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 28px; position: relative;
  border-left: 3px solid var(--accent);
  font-size: 24px; line-height: 1.34; font-weight: 400; letter-spacing: -0.3px; color: var(--ink);
}
.prose blockquote p { margin: 0; text-wrap: balance; }

/* Markdown tables (renderMarkdown emits .table-wrap > table). Scoped to the
   article prose; the v10 blog sheet had no table rules so they rendered
   unstyled — exercised by posts like the email-verification SMTP-code table. */
.prose .table-wrap { margin: 1.6em 0 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--panel); }
.prose tbody tr:last-child td { border-bottom: 0; }

/* Callout */
.callout { margin: 1.8em 0; display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 22px; background: var(--panel); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: var(--r); }
.callout .ic { width: 26px; height: 26px; border-radius: 6px; background: rgba(255,86,0,0.1); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.callout .lb { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.callout .bd { margin-top: 5px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.callout .bd code { font-size: 0.85em; }

/* End matter */
.post-end { max-width: var(--measure); margin: 56px auto 0; }
.cta-card { position: relative; overflow: hidden; padding: 32px 30px; border-radius: var(--r-lg); background: radial-gradient(560px 360px at 84% 0%, #221c13, #14120e 64%); color: #f4efe7; }
.cta-card .dotfield { inset: 0; }
.cta-card > *:not(.dotfield) { position: relative; z-index: 1; }
.cta-card .lb { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-lt); }
.cta-card h3 { margin: 12px 0 0; font-size: 24px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.12; color: #f7f3ec; text-wrap: balance; }
.cta-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: #a8a195; max-width: 46ch; }
.cta-card .acts { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.cta-card .btn-line { color: #f4efe7; border-color: #3a352e; }
.cta-card .btn-line:hover { background: rgba(255,255,255,0.05); border-color: #f4efe7; }

.next-prev { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.np { padding: 20px 22px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); transition: transform .2s ease, border-color .2s ease; }
.np:hover { transform: translateY(-2px); border-color: var(--ink); }
.np .lb { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.np.right { text-align: right; }
.np h4 { margin: 8px 0 0; font-size: 15.5px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.3; color: var(--ink); }
.post-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.post-foot a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.post-foot a:hover { border-color: var(--ink); }
.post-foot .tags { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }

/* ── Reveal ── */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), transform .6s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); }
  [data-reveal].in { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .article-layout { grid-template-columns: minmax(0, var(--measure)); justify-content: start; gap: 0; }
  .toc, .share-rail { display: none; }
}
@media (max-width: 980px) {
  .blog-main { grid-template-columns: 1fr; gap: 40px; }
  .sidebar { position: static; grid-template-columns: 1fr 1fr; gap: 32px 40px; align-items: start; }
}
@media (max-width: 920px) {
  .bv-shell { width: calc(100% - 40px); }
  .blog-hero-grid { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .blog-hero-meta { text-align: left; }
  .featured { padding: 28px 26px 26px; }
  .subscribe { grid-template-columns: 1fr; gap: 26px; padding: 36px 28px; }
}
@media (max-width: 620px) {
  .bv-shell { width: calc(100% - 32px); }
  .progress { top: 56px; }
  .sidebar { grid-template-columns: 1fr; }
  .post-row h3 { font-size: 20px; }
  .next-prev { grid-template-columns: 1fr; }
  .np.right { text-align: left; }
  .subscribe-form .field { flex-direction: column; }
  .article-head h1, .article-head .dek { max-width: none; }
}