@highjumpdigitalsoftware/blog-kit 0.6.0

package/core/manifest/templates.json

@@ -0,0 +1,77 @@
+{
+  "$comment": "Content-type templates surfaced by the MCP's list_templates. Templates are suggestions — any components can be mixed freely. Phase 1 reconciles this against the MCP's current TEMPLATE_SUMMARIES; seeded here as the single source of truth.",
+  "templates": [
+    {
+      "name": "informational",
+      "description": "Explainer / thought-leadership piece that teaches a concept.",
+      "structure": "Intro → TableOfContents → sections → CalloutBox/TipBox asides → FAQList → conclusion CTA",
+      "suggestedComponents": [
+        "TableOfContents",
+        "CalloutBox",
+        "TipBox",
+        "Definition",
+        "Infographic",
+        "FAQList",
+        "CTABanner"
+      ]
+    },
+    {
+      "name": "comparison",
+      "description": "Head-to-head of two or more options.",
+      "structure": "Intro → ComparisonTable → ProConBlock per option → verdict → FAQList",
+      "suggestedComponents": [
+        "ComparisonTable",
+        "ProConBlock",
+        "QuoteBlock",
+        "CalloutBox",
+        "FAQList",
+        "CTABanner"
+      ]
+    },
+    {
+      "name": "how-to",
+      "description": "Step-by-step guide to accomplish a task.",
+      "structure": "Intro → what you'll need → StepBlock sequence → TipBox → FAQList",
+      "suggestedComponents": [
+        "StepBlock",
+        "TipBox",
+        "CalloutBox",
+        "CodeSnippet",
+        "Checklist",
+        "FAQList"
+      ]
+    },
+    {
+      "name": "listicle",
+      "description": "Numbered/curated list of items, tools, or tactics.",
+      "structure": "Intro → numbered items → per-item detail → summary → FAQList",
+      "suggestedComponents": [
+        "NumberedCard",
+        "List",
+        "CalloutBox",
+        "ImageFeature",
+        "FAQList",
+        "CTABanner"
+      ]
+    },
+    {
+      "name": "case-study",
+      "description": "Client/result story with metrics.",
+      "structure": "Hero → results strip → narrative → metrics → quote → CTA",
+      "suggestedComponents": [
+        "MetricHighlight",
+        "StatCard",
+        "BeforeAfter",
+        "QuoteBlock",
+        "ProConBlock",
+        "CTABanner"
+      ]
+    },
+    {
+      "name": "freestyle",
+      "description": "No fixed structure — mix any components as the topic demands.",
+      "structure": "Author's choice.",
+      "suggestedComponents": []
+    }
+  ]
+}

package/dist/core/behaviors/code.js

@@ -0,0 +1,78 @@
+/* ============================================================
+   blog-kit — CodeSnippet behaviour
+   Copy-to-clipboard for code blocks. Each block's copy button
+   reads the exact rendered text from .bk-code__code, writes it to
+   the clipboard, and flips its label to "Copied" for 1.5s. Falls
+   back to a hidden textarea + execCommand where the async Clipboard
+   API is unavailable.
+
+   Framework-neutral ESM: exports initCode() (run it after each
+   client navigation) and also self-runs once on load for plain
+   <script> usage. Idempotent: a block is wired at most once.
+   ============================================================ */
+var RESET_MS = 1500;
+
+function writeClipboard(text) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    return navigator.clipboard.writeText(text);
+  }
+  return new Promise(function (resolve, reject) {
+    try {
+      var ta = document.createElement("textarea");
+      ta.value = text;
+      ta.setAttribute("readonly", "");
+      ta.style.position = "absolute";
+      ta.style.left = "-9999px";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+      resolve();
+    } catch (err) {
+      reject(err);
+    }
+  });
+}
+
+function enhance(root) {
+  if (root.getAttribute("data-bk-code") === "ready") return;
+  root.setAttribute("data-bk-code", "ready");
+
+  var btn = root.querySelector("[data-bk-code-copy]");
+  var code = root.querySelector(".bk-code__code");
+  if (!btn || !code) return;
+
+  var labelEl = btn.querySelector(".bk-code__copy-label");
+  var timer = null;
+
+  btn.addEventListener("click", function () {
+    writeClipboard(code.textContent || "").then(
+      function () {
+        if (labelEl) labelEl.textContent = "Copied";
+        btn.setAttribute("data-copied", "true");
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(function () {
+          if (labelEl) labelEl.textContent = "Copy";
+          btn.removeAttribute("data-copied");
+        }, RESET_MS);
+      },
+      function () {
+        /* clipboard unavailable — silently ignore */
+      }
+    );
+  });
+}
+
+export function initCode() {
+  if (typeof document === "undefined") return;
+  var blocks = document.querySelectorAll("[data-bk-code]");
+  for (var i = 0; i < blocks.length; i++) enhance(blocks[i]);
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initCode);
+  } else {
+    initCode();
+  }
+}

package/dist/core/behaviors/comparison.js

@@ -0,0 +1,52 @@
+/* ============================================================
+   blog-kit — ComparisonTable behaviour
+   The desktop comparison table can overflow its container on
+   narrow viewports. Native overflow-x scrolls fine but gives no
+   visual cue that more columns exist (the hidden-horizontal-
+   scroll trap). This script toggles edge-fade hint classes on the
+   wrap depending on whether the inner scroller can scroll left or
+   right, updating on scroll and resize.
+
+   Framework-neutral ESM: exports initComparison() (run it after
+   each client navigation) and also self-runs once on load for
+   plain <script> usage. Idempotent: a block is wired at most once.
+   ============================================================ */
+function update(wrap, scroller) {
+  var max = scroller.scrollWidth - scroller.clientWidth;
+  var x = scroller.scrollLeft;
+  var canScroll = max > 1;
+  wrap.classList.toggle("bk-comparison__table-wrap--hint-right", canScroll && x < max - 1);
+  wrap.classList.toggle("bk-comparison__table-wrap--hint-left", canScroll && x > 1);
+}
+
+function enhance(wrap) {
+  if (wrap.getAttribute("data-bk-comparison") === "ready") return;
+  wrap.setAttribute("data-bk-comparison", "ready");
+  var scroller = wrap.querySelector(".bk-comparison__scroll");
+  if (!scroller) return;
+  var sync = function () {
+    update(wrap, scroller);
+  };
+  scroller.addEventListener("scroll", sync, { passive: true });
+  if (typeof window.ResizeObserver === "function") {
+    var ro = new ResizeObserver(sync);
+    ro.observe(scroller);
+  } else {
+    window.addEventListener("resize", sync);
+  }
+  sync();
+}
+
+export function initComparison() {
+  if (typeof document === "undefined") return;
+  var blocks = document.querySelectorAll("[data-bk-comparison]");
+  for (var i = 0; i < blocks.length; i++) enhance(blocks[i]);
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initComparison);
+  } else {
+    initComparison();
+  }
+}

package/dist/core/behaviors/delivery-comparison.js

@@ -0,0 +1,52 @@
+/* ============================================================
+   blog-kit — DeliveryComparison behaviour
+   The N-column comparison matrix can overflow its container on
+   narrow viewports. Native overflow-x scrolls fine but gives no
+   visual cue that more columns exist (the hidden-horizontal-scroll
+   trap). This script toggles edge-fade hint classes on the wrap
+   depending on whether the inner scroller can scroll left or right,
+   updating on scroll and resize.
+
+   Framework-neutral ESM: exports initDeliveryComparison() (run it
+   after each client navigation) and also self-runs once on load for
+   plain <script> usage. Idempotent: a block is wired at most once.
+   ============================================================ */
+function update(wrap, scroller) {
+  var max = scroller.scrollWidth - scroller.clientWidth;
+  var x = scroller.scrollLeft;
+  var canScroll = max > 1;
+  wrap.classList.toggle("bk-delivery-comparison--hint-right", canScroll && x < max - 1);
+  wrap.classList.toggle("bk-delivery-comparison--hint-left", canScroll && x > 1);
+}
+
+function enhance(wrap) {
+  if (wrap.getAttribute("data-bk-delivery-comparison") === "ready") return;
+  wrap.setAttribute("data-bk-delivery-comparison", "ready");
+  var scroller = wrap.querySelector(".bk-delivery-comparison__scroll");
+  if (!scroller) return;
+  var sync = function () {
+    update(wrap, scroller);
+  };
+  scroller.addEventListener("scroll", sync, { passive: true });
+  if (typeof window.ResizeObserver === "function") {
+    var ro = new ResizeObserver(sync);
+    ro.observe(scroller);
+  } else {
+    window.addEventListener("resize", sync);
+  }
+  sync();
+}
+
+export function initDeliveryComparison() {
+  if (typeof document === "undefined") return;
+  var blocks = document.querySelectorAll("[data-bk-delivery-comparison]");
+  for (var i = 0; i < blocks.length; i++) enhance(blocks[i]);
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initDeliveryComparison);
+  } else {
+    initDeliveryComparison();
+  }
+}

package/dist/core/behaviors/faq.js

@@ -0,0 +1,61 @@
+/* ============================================================
+   blog-kit — FAQList behaviour
+   Native <details> handles open/close on its own. This script's
+   only job is SEO: lift every rendered Q&A pair into FAQPage
+   JSON-LD so search engines can surface it.
+
+   Framework-neutral ESM: exports initFaq() (run it after each
+   client navigation) and also self-runs once on load for plain
+   <script> usage. Idempotent: a block is processed at most once.
+   ============================================================ */
+function clean(s) {
+  return String(s || "").replace(/\s+/g, " ").trim();
+}
+
+function buildSchema(root) {
+  var items = root.querySelectorAll(".bk-faq__item");
+  var entities = [];
+  for (var i = 0; i < items.length; i++) {
+    var q = items[i].querySelector(".bk-faq__question");
+    var a = items[i].querySelector(".bk-faq__answer");
+    var name = clean(q && q.textContent);
+    var text = clean(a && a.textContent);
+    if (!name) continue;
+    entities.push({
+      "@type": "Question",
+      name: name,
+      acceptedAnswer: { "@type": "Answer", text: text },
+    });
+  }
+  if (!entities.length) return null;
+  return {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: entities,
+  };
+}
+
+function enhance(root) {
+  if (root.getAttribute("data-bk-faq") === "ready") return;
+  root.setAttribute("data-bk-faq", "ready");
+  var schema = buildSchema(root);
+  if (!schema) return;
+  var tag = document.createElement("script");
+  tag.type = "application/ld+json";
+  tag.textContent = JSON.stringify(schema);
+  root.appendChild(tag);
+}
+
+export function initFaq() {
+  if (typeof document === "undefined") return;
+  var blocks = document.querySelectorAll("[data-bk-faq]");
+  for (var i = 0; i < blocks.length; i++) enhance(blocks[i]);
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initFaq);
+  } else {
+    initFaq();
+  }
+}

package/dist/core/behaviors/index.d.ts

@@ -0,0 +1,3 @@
+/** Ambient types for the vanilla-JS behaviours module (copied verbatim to
+ *  dist by copy-assets.mjs; not compiled by tsc). */
+export function initBlogBehaviors(): void;

package/dist/core/behaviors/index.js

@@ -0,0 +1,35 @@
+/* ============================================================
+   blog-kit — behaviours barrel
+   One entry point that wires every interactive component. Importing
+   this module also self-runs each behaviour once on load (see each
+   file's guarded auto-run), so a plain `<script type="module">` that
+   imports it is enough for a static (Astro) site. For SPA frameworks
+   call initBlogBehaviors() after each client-side navigation so newly
+   mounted markup gets enhanced — each enhance step is idempotent, so
+   re-running is safe and only touches not-yet-wired elements.
+   ============================================================ */
+import { initToc } from "./toc.js";
+import { initFaq } from "./faq.js";
+import { initComparison } from "./comparison.js";
+import { initCode } from "./code.js";
+import { initKeywordTable } from "./keyword-table.js";
+import { initDeliveryComparison } from "./delivery-comparison.js";
+
+export {
+  initToc,
+  initFaq,
+  initComparison,
+  initCode,
+  initKeywordTable,
+  initDeliveryComparison,
+};
+
+/** Run every blog-kit behaviour. Idempotent; safe to call on each navigation. */
+export function initBlogBehaviors() {
+  initToc();
+  initFaq();
+  initComparison();
+  initCode();
+  initKeywordTable();
+  initDeliveryComparison();
+}

package/dist/core/behaviors/keyword-table.js

@@ -0,0 +1,52 @@
+/* ============================================================
+   blog-kit — KeywordTable behaviour
+   A six-column SEO keyword-ranking table overflows its container
+   on narrow viewports. Native overflow-x scrolls fine but gives no
+   visual cue that more columns exist (the hidden-horizontal-scroll
+   trap). This script toggles edge-fade hint classes on the wrap
+   depending on whether the inner scroller can scroll left or right,
+   updating on scroll and resize.
+
+   Framework-neutral ESM: exports initKeywordTable() (run it after
+   each client navigation) and also self-runs once on load for
+   plain <script> usage. Idempotent: a block is wired at most once.
+   ============================================================ */
+function update(wrap, scroller) {
+  var max = scroller.scrollWidth - scroller.clientWidth;
+  var x = scroller.scrollLeft;
+  var canScroll = max > 1;
+  wrap.classList.toggle("bk-keyword-table--hint-right", canScroll && x < max - 1);
+  wrap.classList.toggle("bk-keyword-table--hint-left", canScroll && x > 1);
+}
+
+function enhance(wrap) {
+  if (wrap.getAttribute("data-bk-keyword-table") === "ready") return;
+  wrap.setAttribute("data-bk-keyword-table", "ready");
+  var scroller = wrap.querySelector(".bk-keyword-table__scroll");
+  if (!scroller) return;
+  var sync = function () {
+    update(wrap, scroller);
+  };
+  scroller.addEventListener("scroll", sync, { passive: true });
+  if (typeof window.ResizeObserver === "function") {
+    var ro = new ResizeObserver(sync);
+    ro.observe(scroller);
+  } else {
+    window.addEventListener("resize", sync);
+  }
+  sync();
+}
+
+export function initKeywordTable() {
+  if (typeof document === "undefined") return;
+  var blocks = document.querySelectorAll("[data-bk-keyword-table]");
+  for (var i = 0; i < blocks.length; i++) enhance(blocks[i]);
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initKeywordTable);
+  } else {
+    initKeywordTable();
+  }
+}

package/dist/core/behaviors/toc.js

@@ -0,0 +1,130 @@
+/* ============================================================
+   blog-kit — TableOfContents behaviour
+   The TOC is built from the live document, not authored markup:
+   it scans the article for <h2> headings (sub-headings inside MDX
+   components are not document structure and are skipped), renders
+   one numbered entry per heading, smooth-scrolls on click, and
+   runs a scrollspy (IntersectionObserver) that flags the heading
+   currently in view with the --active modifier. If the scope has
+   no <h2>s the container hides itself.
+
+   Scope resolution (centralised so no site has to wrap its body in
+   a particular tag): an explicit data-bk-toc-scope selector wins if
+   it matches; otherwise the TOC scans the prose region that
+   contains it (.bk-prose, then .blog-root), falling back to body.
+
+   Framework-neutral ESM: exports initToc() (run it after each
+   client navigation) and also self-runs once on load for plain
+   <script> usage. Idempotent: a block is wired at most once.
+   ============================================================ */
+function pad2(n) {
+  return n < 10 ? "0" + n : String(n);
+}
+
+function resolveScope(root) {
+  var sel = root.getAttribute("data-bk-toc-scope");
+  if (sel) {
+    var bySel = document.querySelector(sel);
+    if (bySel) return bySel;
+  }
+  return (
+    root.closest(".bk-prose") ||
+    root.closest(".blog-root") ||
+    document.body
+  );
+}
+
+function build(root) {
+  var scope = resolveScope(root);
+  if (!scope) {
+    root.hidden = true;
+    return;
+  }
+
+  // h2 only — sub-headings inside MDX components (h3/h4 from cards,
+  // CTAs, etc.) are not document structure and shouldn't be entries.
+  var headings = scope.querySelectorAll("h2");
+  if (!headings.length) {
+    root.hidden = true;
+    return;
+  }
+  root.hidden = false;
+
+  var list = root.querySelector(".bk-toc__list");
+  if (!list) return;
+  list.textContent = "";
+
+  var links = [];
+  var byId = {};
+
+  Array.prototype.forEach.call(headings, function (el, i) {
+    var id = el.id;
+    var text = el.textContent || "";
+
+    var li = document.createElement("li");
+    li.className = "bk-toc__item";
+
+    var num = document.createElement("span");
+    num.className = "bk-toc__num";
+    num.textContent = pad2(i + 1);
+
+    var a = document.createElement("a");
+    a.className = "bk-toc__link";
+    a.href = id ? "#" + id : "#";
+    a.textContent = text;
+    a.addEventListener("click", function (e) {
+      e.preventDefault();
+      var target = id ? document.getElementById(id) : null;
+      if (target) target.scrollIntoView({ behavior: "smooth" });
+    });
+
+    li.appendChild(num);
+    li.appendChild(a);
+    list.appendChild(li);
+
+    links.push(a);
+    if (id) byId[id] = a;
+  });
+
+  function setActive(id) {
+    for (var i = 0; i < links.length; i++) {
+      links[i].classList.remove("bk-toc__link--active");
+    }
+    var hit = byId[id];
+    if (hit) hit.classList.add("bk-toc__link--active");
+  }
+
+  if (typeof window.IntersectionObserver === "function") {
+    var observer = new IntersectionObserver(
+      function (entries) {
+        for (var i = 0; i < entries.length; i++) {
+          if (entries[i].isIntersecting) setActive(entries[i].target.id);
+        }
+      },
+      { rootMargin: "-80px 0px -60% 0px" }
+    );
+    Array.prototype.forEach.call(headings, function (el) {
+      observer.observe(el);
+    });
+  }
+}
+
+function enhance(root) {
+  if (root.getAttribute("data-bk-toc") === "ready") return;
+  root.setAttribute("data-bk-toc", "ready");
+  build(root);
+}
+
+export function initToc() {
+  if (typeof document === "undefined") return;
+  var blocks = document.querySelectorAll("[data-bk-toc]");
+  for (var i = 0; i < blocks.length; i++) enhance(blocks[i]);
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initToc);
+  } else {
+    initToc();
+  }
+}

package/dist/core/css/base.css

@@ -0,0 +1,146 @@
+/* ============================================================
+   blog-kit — Base layer (scoped reset + prose typography)
+   ------------------------------------------------------------
+   Everything is scoped under .blog-root. Two jobs:
+     1. LEAK-OUT: we never emit a bare element selector, so the
+        blog can't touch the host page.
+     2. LEAK-IN: we re-declare the inherited properties (font,
+        colour, line-height, etc.) explicitly on .blog-root so a
+        host site's body/global styles don't cascade into us.
+   The ONLY thing we intentionally let through is the --blog-*
+   token layer (the tenant's "paint").
+
+   IMPORTANT — specificity: every element rule below is wrapped in
+   :where(.blog-root) so it has NEAR-ZERO specificity (just the
+   element, 0,0,1). That guarantees component classes (.bk-*, 0,1,0)
+   ALWAYS win over these prose defaults. Without :where, a rule like
+   `.blog-root h3` (0,1,1) would out-specify a component's
+   `.bk-verdict-card__verdict` (0,1,0) and, e.g., paint a dark-panel
+   heading near-black → invisible. Base is a fallback; components win.
+   ============================================================ */
+
+.blog-root {
+  /* Re-assert inherited properties so the host can't bleed in */
+  font-family: var(--blog-font-body);
+  font-size: 1rem;
+  line-height: 1.7;
+  font-weight: 400;
+  letter-spacing: normal;
+  color: var(--blog-text);
+  text-align: left;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+:where(.blog-root) *,
+:where(.blog-root) *::before,
+:where(.blog-root) *::after {
+  box-sizing: border-box;
+}
+
+/* --- Headings --- */
+:where(.blog-root) h1,
+:where(.blog-root) h2,
+:where(.blog-root) h3,
+:where(.blog-root) h4,
+:where(.blog-root) h5,
+:where(.blog-root) h6 {
+  font-family: var(--blog-font-display);
+  font-weight: var(--blog-heading-weight);
+  text-transform: var(--blog-heading-transform);
+  letter-spacing: var(--blog-tracking-tight);
+  color: var(--blog-ink);
+  line-height: 1.22;
+  margin: 0 0 var(--blog-sp-4);
+}
+:where(.blog-root) h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.85rem); margin-bottom: var(--blog-sp-5); }
+:where(.blog-root) h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem); margin-top: var(--blog-sp-12); }
+:where(.blog-root) h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); margin-top: var(--blog-sp-8); }
+:where(.blog-root) h4 { font-size: 1.1rem; margin-top: var(--blog-sp-6); }
+:where(.blog-root) h5,
+:where(.blog-root) h6 { font-size: 1rem; margin-top: var(--blog-sp-5); }
+
+/* First heading shouldn't push a big top margin */
+:where(.blog-root) > :first-child { margin-top: 0; }
+
+/* --- Body copy --- */
+:where(.blog-root) p {
+  margin: 0 0 var(--blog-sp-5);
+  color: var(--blog-text);
+}
+:where(.blog-root) strong, :where(.blog-root) b { font-weight: 700; color: var(--blog-ink); }
+:where(.blog-root) em, :where(.blog-root) i { font-style: italic; }
+:where(.blog-root) small { font-size: 0.85em; color: var(--blog-mute-2); }
+
+/* --- Links --- */
+:where(.blog-root) a {
+  color: var(--blog-brand);
+  text-decoration: none;
+}
+:where(.blog-root) a:hover { text-decoration: underline; }
+
+/* --- Lists (prose defaults; component lists opt out via .bk-*) --- */
+:where(.blog-root) ul,
+:where(.blog-root) ol {
+  margin: 0 0 var(--blog-sp-5);
+  padding-left: 1.4em;
+}
+:where(.blog-root) li { margin: 0 0 var(--blog-sp-2); }
+:where(.blog-root) li::marker { color: var(--blog-mute-2); }
+
+/* --- Inline code --- */
+:where(.blog-root) :not(pre) > code {
+  font-family: var(--blog-font-mono);
+  font-size: 0.88em;
+  background: var(--blog-bg-tertiary);
+  border: 1px solid var(--blog-border-subtle);
+  border-radius: var(--blog-radius-xs);
+  padding: 0.12em 0.36em;
+  color: var(--blog-ink);
+}
+
+/* --- Media --- */
+:where(.blog-root) img,
+:where(.blog-root) video,
+:where(.blog-root) svg {
+  max-width: 100%;
+  height: auto;
+}
+:where(.blog-root) img { border-radius: var(--blog-radius-md); }
+
+/* --- Blockquote (prose; PullQuote/QuoteBlock are components) --- */
+:where(.blog-root) blockquote {
+  margin: var(--blog-sp-6) 0;
+  padding: var(--blog-sp-2) 0 var(--blog-sp-2) var(--blog-sp-5);
+  border-left: 3px solid var(--blog-brand);
+  color: var(--blog-mute);
+  font-style: italic;
+}
+
+/* --- Horizontal rule --- */
+:where(.blog-root) hr {
+  border: 0;
+  border-top: 1px solid var(--blog-border-light);
+  margin: var(--blog-sp-10) 0;
+}
+
+/* --- Tables (prose; ComparisonTable is a component) --- */
+:where(.blog-root) table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--blog-sp-6) 0;
+  font-size: 0.95rem;
+}
+:where(.blog-root) th,
+:where(.blog-root) td {
+  text-align: left;
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  border-bottom: 1px solid var(--blog-border-light);
+}
+:where(.blog-root) th { color: var(--blog-ink); font-weight: 600; }
+
+/* --- The article measure --- */
+:where(.blog-root) .bk-prose {
+  max-width: var(--blog-max-content);
+  margin-inline: auto;
+}