@brandon_m_behring/book-scaffold-astro 3.0.0-alpha.0

package/scripts/validate.mjs

@@ -0,0 +1,179 @@
+#!/usr/bin/env node
+/**
+ * validate.mjs — pre-flight check for book content.
+ *
+ * Catches authoring errors that astro build either misses or surfaces
+ * with insufficient context. Designed to run in <2 s on a medium-sized
+ * book so it's pre-commit-hook friendly.
+ *
+ * Checks performed (per Q14 in the v2.0 plan):
+ *
+ *   1. <Cite key="..." /> — key exists in src/data/references.json.
+ *      (Cite.astro already throws on unknown keys at build time; we
+ *      surface ALL bad keys at once instead of failing on the first.)
+ *
+ *   2. <XRef id="..." /> — id exists in src/data/labels.json. XRef
+ *      doesn't fail the build for unknown ids; without this check,
+ *      typos ship to readers as "[?label]" placeholders.
+ *
+ *   3. <Figure src="/path/..." /> — referenced file exists under
+ *      public/. Figure.astro renders a broken-image icon otherwise.
+ *
+ *   4. Internal markdown links [text](/foo) — target resolves to a
+ *      known chapter slug or a known top-level route. External (http*)
+ *      links are not checked (would need network IO).
+ *
+ *   5. <CodeRef path="..." line={N} /> — when run inside a repo
+ *      whose root is BOOK_REPO_ROOT, the path exists and the line
+ *      number is within file bounds. Skipped when BOOK_REPO_ROOT
+ *      isn't set (the scaffold default; only meaningful for academic
+ *      books that paired with an experiments/ subtree).
+ *
+ * What this DOESN'T do (and why):
+ *   - frontmatter Zod validation — already done by astro build's
+ *     content-collection sync.
+ *   - MDX renders — same; astro build will fail.
+ *   - KaTeX strict-mode — covered by rehype-katex when academic
+ *     profile is active; undefined macros become build errors.
+ *
+ * Usage:
+ *   node scripts/validate.mjs
+ *   BOOK_REPO_ROOT=/abs/path/to/code/repo node scripts/validate.mjs
+ *
+ * Exit code = total failure count (0 = pass, ≥1 = errors).
+ *
+ * Wire into:
+ *   - package.json scripts: "validate": "node scripts/validate.mjs"
+ *   - pre-commit hook: .pre-commit-config.yaml
+ *   - CI build pipeline: run before `astro build`
+ */
+import { readFile, access } from 'node:fs/promises';
+import { glob } from 'node:fs/promises';
+import { resolve, dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = resolve(fileURLToPath(import.meta.url), '../..');
+const CHAPTERS_DIR = resolve(ROOT, 'src/content/chapters');
+const PUBLIC_DIR = resolve(ROOT, 'public');
+const DATA_DIR = resolve(ROOT, 'src/data');
+const PROFILE = process.env.BOOK_PROFILE ?? 'minimal';
+const REPO_ROOT = process.env.BOOK_REPO_ROOT ?? null;
+
+const errors = [];
+const warnings = [];
+const fail = (file, line, msg) => errors.push({ file, line, msg });
+const warn = (file, line, msg) => warnings.push({ file, line, msg });
+
+// ===== Load reference data (graceful when missing) =====
+async function loadJson(path) {
+  try {
+    return JSON.parse(await readFile(path, 'utf8'));
+  } catch {
+    return {};
+  }
+}
+const refs = await loadJson(join(DATA_DIR, 'references.json'));
+const labels = await loadJson(join(DATA_DIR, 'labels.json'));
+
+// ===== Collect chapter files =====
+const chapterFiles = [];
+for await (const f of glob('**/*.{md,mdx}', { cwd: CHAPTERS_DIR })) {
+  if (!f.split('/').pop().startsWith('_')) chapterFiles.push(f);
+}
+
+// ===== Build slug set from chapter filenames (for internal-link check) =====
+const validSlugs = new Set(chapterFiles.map((f) => f.replace(/\.(md|mdx)$/, '')));
+const validTopLevelRoutes = new Set([
+  '/', '/chapters/', '/references/', '/search/', '/print/', '/convergence/',
+]);
+
+// ===== Pattern helpers (regex-based; cheap, good enough for MDX) =====
+const RE_CITE = /<Cite[^>]+key=["']([^"']+)["']/g;
+const RE_XREF = /<XRef[^>]+id=["']([^"']+)["']/g;
+const RE_FIGURE = /<Figure[^>]+src=["']([^"']+)["']/g;
+const RE_CODEREF = /<CodeRef[^>]+path=["']([^"']+)["'](?:[^>]*line=\{(\d+)\})?(?:[^>]*lineEnd=\{(\d+)\})?/g;
+const RE_MD_LINK = /\[(?:[^\]]*)\]\((\/[^)\s#]+)(?:#[^)]*)?\)/g;
+
+async function fileExists(p) {
+  try {
+    await access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function lineOf(content, idx) {
+  return content.slice(0, idx).split('\n').length;
+}
+
+// ===== Run all checks on each chapter =====
+for (const rel of chapterFiles) {
+  const abs = join(CHAPTERS_DIR, rel);
+  const content = await readFile(abs, 'utf8');
+
+  // 1. Cite keys (academic profile only — tools profile uses YAML manifest)
+  if (PROFILE === 'academic') {
+    for (const m of content.matchAll(RE_CITE)) {
+      if (!refs[m[1]]) fail(rel, lineOf(content, m.index), `Unknown bibkey "${m[1]}" — not in references.json`);
+    }
+  }
+
+  // 2. XRef ids
+  for (const m of content.matchAll(RE_XREF)) {
+    if (!labels[m[1]]) fail(rel, lineOf(content, m.index), `Unknown XRef id "${m[1]}" — not in labels.json`);
+  }
+
+  // 3. Figure src exists in public/
+  for (const m of content.matchAll(RE_FIGURE)) {
+    const src = m[1];
+    if (src.startsWith('http')) continue; // external image
+    const path = src.startsWith('/') ? join(PUBLIC_DIR, src) : join(dirname(abs), src);
+    if (!(await fileExists(path))) {
+      fail(rel, lineOf(content, m.index), `Figure src "${src}" not found at ${path}`);
+    }
+  }
+
+  // 4. Internal markdown links resolve
+  for (const m of content.matchAll(RE_MD_LINK)) {
+    const target = m[1].replace(/\/$/, '');
+    if (validTopLevelRoutes.has(target + '/') || validTopLevelRoutes.has(target)) continue;
+    const chMatch = target.match(/^\/chapters\/(.+)$/);
+    if (chMatch && validSlugs.has(chMatch[1])) continue;
+    warn(rel, lineOf(content, m.index), `Internal link "${m[1]}" — target may not resolve (check spelling or route)`);
+  }
+
+  // 5. CodeRef path + line bounds (only when BOOK_REPO_ROOT set)
+  if (REPO_ROOT) {
+    for (const m of content.matchAll(RE_CODEREF)) {
+      const [, path, lineStart, lineEnd] = m;
+      const abs2 = resolve(REPO_ROOT, path);
+      if (!(await fileExists(abs2))) {
+        fail(rel, lineOf(content, m.index), `CodeRef path "${path}" not found at ${abs2}`);
+        continue;
+      }
+      if (lineStart) {
+        const fileLineCount = (await readFile(abs2, 'utf8')).split('\n').length;
+        const lo = Number(lineStart);
+        const hi = lineEnd ? Number(lineEnd) : lo;
+        if (lo > fileLineCount || hi > fileLineCount) {
+          fail(rel, lineOf(content, m.index), `CodeRef line ${lo}-${hi} exceeds file length (${fileLineCount}) in "${path}"`);
+        }
+      }
+    }
+  }
+}
+
+// ===== Report =====
+const format = ({ file, line, msg }) => `  ${file}:${line}  ${msg}`;
+if (warnings.length > 0) {
+  console.warn(`validate: ${warnings.length} warning(s):`);
+  warnings.forEach((w) => console.warn(format(w)));
+}
+if (errors.length === 0) {
+  console.log(`validate: ✓ ${chapterFiles.length} chapter(s) checked (profile=${PROFILE}); no errors.`);
+  process.exit(0);
+}
+console.error(`validate: ✗ ${errors.length} error(s) in ${chapterFiles.length} chapter(s) (profile=${PROFILE}):`);
+errors.forEach((e) => console.error(format(e)));
+process.exit(errors.length);

package/styles/callouts.css

@@ -0,0 +1,303 @@
+/* callouts.css — Shared callout-component styling.
+ *
+ * All callout components render the same .callout wrapper; semantic
+ * variants (.callout-skill, .callout-case, etc.) override the bar color
+ * and background tint. Palette comes from tokens.css; dark mode needs
+ * no overrides because everything references the --warm-*-tint tokens
+ * which re-compute from --paper.
+ */
+
+.callout {
+  padding: var(--space-3) var(--space-4);
+  margin: var(--space-4) 0;
+  border-left: var(--border-bar) solid var(--color-border);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  background: var(--color-bg-subtle);
+  color: var(--color-text);
+}
+
+.callout-title {
+  display: block;
+  font-size: var(--text-base);
+  font-weight: 600;
+  font-style: normal;
+  color: inherit;
+  margin: 0 0 var(--space-2) 0;
+  font-family: var(--font-body);
+  letter-spacing: 0.02em;
+}
+
+/* Body wrapper: collapse vertical margin on first/last children so the
+ * callout has consistent internal padding regardless of content. */
+.callout-body > *:first-child { margin-top: 0; }
+.callout-body > *:last-child  { margin-bottom: 0; }
+
+/* ===== Variant palettes ===== */
+.callout-skill {   /* practical how-to (green / tip) */
+  border-left-color: var(--callout-tip);
+  background: var(--warm-green-tint);
+}
+
+.callout-case {    /* concrete anecdote (blue / info) */
+  border-left-color: var(--callout-info);
+  background: var(--warm-blue-tint);
+}
+
+.callout-concept { /* durable vocabulary (plum / authority) */
+  border-left-color: var(--callout-official);
+  background: var(--warm-plum-tint);
+}
+
+.callout-key {     /* memorize this (blue, thicker bar) */
+  border-left-color: var(--callout-info);
+  background: var(--warm-blue-tint);
+  border-left-width: calc(var(--border-bar) * 1.5);
+}
+
+.callout-try {     /* practice exercise (plum + rose blend) */
+  border-left-color: color-mix(in srgb, var(--warm-plum) 60%, var(--warm-rose));
+  background: color-mix(in srgb, var(--warm-plum-tint) 50%, var(--warm-rose-tint));
+}
+
+.callout-recovery {/* escape route from anti-pattern (rose / warning) */
+  border-left-color: var(--callout-warn);
+  background: var(--warm-rose-tint);
+}
+
+/* Recovery has a structured layout: symptom row + escape body. */
+.callout-recovery .recovery-symptom {
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  margin-bottom: var(--space-2);
+}
+.callout-recovery .recovery-symptom strong {
+  color: var(--color-text);
+}
+
+/* ===== Comparative callouts (Convergence / Divergence) =====
+ * Same gold palette (insight), different border style to signal
+ * "stable signal" (solid) vs "open design space" (dashed). Both surface
+ * in the Evolution cornerstone of every chapter, per the Koller-Friedman
+ * decomposition. */
+.callout-convergence {
+  border-left: var(--border-bar) solid var(--callout-insight);
+  background: var(--warm-gold-tint);
+}
+.callout-divergence {
+  border-left: var(--border-bar) dashed var(--callout-insight);
+  background: var(--warm-gold-tint);
+}
+
+/* Tool badges rendered inline in the Convergence title */
+.callout-convergence .tool-badges {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-left: var(--space-2);
+}
+.tool-badge {
+  display: inline-block;
+  padding: 0.05em 0.45em;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--color-text-muted);
+  font-family: var(--font-code);
+  letter-spacing: 0;
+}
+
+/* Divergence axis label */
+.callout-divergence .divergence-axis {
+  font-weight: 400;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+/* ===== Academic-profile callout variants (Q3 — coexist with tools variants) =====
+ * Maps the 10 academic callouts (NoteBox/ExampleBox/DynConnect/InsightBox/
+ * WarnBox/CounterBox/TipBox/OpenQuestion/PaperBox/ResultBox) to Paul Tol
+ * semantic colors. Each has a default-title prop in the component; CSS
+ * just handles bar color + background tint.
+ *
+ * Blue family — neutral info, examples, dynamical-systems bridge */
+.callout-note,
+.callout-example,
+.callout-dynconnect {
+  border-left-color: var(--callout-info);
+  background: var(--warm-blue-tint);
+}
+
+/* Rose family — alerts, counter-evidence */
+.callout-warn,
+.callout-counter {
+  border-left-color: var(--callout-warn);
+  background: var(--warm-rose-tint);
+}
+
+/* Green family — practical hints, experimental results */
+.callout-tip,
+.callout-result {
+  border-left-color: var(--callout-tip);
+  background: var(--warm-green-tint);
+}
+
+/* Plum — authoritative open questions */
+.callout-openquestion {
+  border-left-color: var(--callout-official);
+  background: var(--warm-plum-tint);
+}
+
+/* Gold — surprising insights */
+.callout-insight {
+  border-left-color: var(--callout-insight);
+  background: var(--warm-gold-tint);
+}
+
+/* Gray dashed — restated paper claims (external source) */
+.callout-paper {
+  border-left-color: var(--color-border);
+  border-left-style: dashed;
+  background: var(--color-bg-subtle);
+}
+
+/* ===== Theorem family (Theorem.astro) =====
+ * Plain (theorem/proposition/lemma/corollary): italic body
+ * Definition family (definition/example/exercise/remark/proof): upright body
+ */
+.theorem {
+  margin: var(--space-4) 0;
+  padding-left: var(--space-4);
+  border-left: var(--border-bar) solid var(--callout-official);
+}
+.theorem-label {
+  font-weight: 600;
+  font-style: normal;
+  display: inline;
+  margin-right: 0.4em;
+}
+.theorem-body {
+  display: block;
+  font-style: italic;
+}
+.theorem-body > *:first-child { display: inline; }
+
+.theorem[data-kind="definition"] .theorem-body,
+.theorem[data-kind="example"] .theorem-body,
+.theorem[data-kind="exercise"] .theorem-body,
+.theorem[data-kind="remark"] .theorem-body,
+.theorem[data-kind="proof"] .theorem-body {
+  font-style: normal;
+}
+
+/* ===== Margin notes (MarginNote.astro) — variant: note/warning/tip ===== */
+.margin-note {
+  font-size: var(--text-sm);
+  padding: var(--space-2) var(--space-3);
+  margin: var(--space-3) 0;
+  border-left: var(--border-bar) solid var(--callout-info);
+  background: var(--warm-blue-tint);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+.margin-note[data-variant="warning"] {
+  border-left-color: var(--callout-warn);
+  background: var(--warm-rose-tint);
+}
+.margin-note[data-variant="tip"] {
+  border-left-color: var(--callout-tip);
+  background: var(--warm-green-tint);
+}
+.margin-note-label {
+  display: inline-block;
+  font-family: var(--font-code);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  margin-right: var(--space-2);
+}
+
+/* ===== Status badges (StatusBadge.astro) — 3-state public taxonomy ===== */
+.status-badge {
+  display: inline-block;
+  font-family: var(--font-code);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  padding: 0.1em 0.55em;
+  border-radius: var(--radius-sm);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--paper);
+  vertical-align: 0.1em;
+}
+.status-badge[data-status="published"]   { background: var(--warm-green); }
+.status-badge[data-status="draft"]       { background: var(--warm-gold); }
+.status-badge[data-status="coming-soon"] { background: var(--color-text-muted); }
+
+/* ===== Figure component (Figure.astro) ===== */
+figure.figure {
+  margin: var(--space-6) 0;
+  text-align: center;
+}
+figure.figure img,
+figure.figure svg {
+  max-width: 100%;
+  height: auto;
+}
+figure.figure figcaption {
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  margin-top: var(--space-2);
+  font-style: italic;
+  text-align: left;
+}
+
+/* ===== CodeBlock header bar with GitHub link ===== */
+.codeblock-frame {
+  margin: var(--space-4) 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--color-code-bg);
+}
+.codeblock-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-bg-subtle);
+  border-bottom: 1px solid var(--color-border);
+  font-family: var(--font-code);
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+.codeblock-header a {
+  font-weight: 500;
+}
+.codeblock-frame pre {
+  margin: 0;
+  border-radius: 0;
+  border: 0;
+}
+
+/* ===== Practice tags (Tag.astro) ===== */
+.practice-tag {
+  display: inline-block;
+  font-family: var(--font-code);
+  font-size: 0.75em;
+  font-weight: 500;
+  padding: 0 0.4em;
+  margin: 0 0.1em;
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+  vertical-align: 0.1em;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.practice-tag[data-kind="official"]     { border-color: var(--callout-official); color: var(--callout-official); }
+.practice-tag[data-kind="convergence"]  { border-color: var(--callout-insight); color: var(--callout-insight); }
+.practice-tag[data-kind="practitioner"] { border-color: var(--callout-tip); color: var(--callout-tip); }

package/styles/chapter.css

@@ -0,0 +1,209 @@
+/* chapter.css — Chapter-specific typography and structural styling.
+ * Uses tokens from tokens.css and the .prose wrapper from layout.css.
+ */
+
+/* ===== Chapter header ===== */
+.chapter-header {
+  margin-bottom: var(--space-8);
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: var(--space-6);
+}
+.chapter-header h1 {
+  margin-top: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+.chapter-description {
+  font-size: var(--text-lg);
+  color: var(--color-text-muted);
+  margin: var(--space-3) 0;
+  text-indent: 0;
+  font-style: italic;
+}
+.chapter-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  font-family: var(--font-code);
+  margin-bottom: var(--space-2);
+}
+.chapter-meta > span {
+  display: inline-flex;
+  gap: 0.3em;
+}
+.chapter-meta-label {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.75em;
+}
+
+/* Volatility + tool badges: reuse .tool-badge from callouts.css */
+.volatility-badge {
+  display: inline-block;
+  padding: 0.05em 0.45em;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  font-family: var(--font-code);
+  letter-spacing: 0;
+}
+.volatility-stable-principle {
+  background: var(--warm-green-tint);
+  color: var(--warm-green);
+  border: 1px solid var(--warm-green);
+}
+.volatility-architectural-pattern {
+  background: var(--warm-gold-tint);
+  color: var(--warm-gold);
+  border: 1px solid var(--warm-gold);
+}
+.volatility-feature-surface {
+  background: var(--warm-rose-tint);
+  color: var(--warm-rose);
+  border: 1px solid var(--warm-rose);
+}
+
+/* Freshness badge — inline with "Last verified" in chapter-meta.
+ * Three status bands map to the same warm palette as volatility:
+ *   fresh       → green  (last_verified is recent relative to volatility threshold)
+ *   verify-soon → gold   (75-100% of threshold elapsed)
+ *   stale       → rose   (past threshold; verify before trusting claims)
+ */
+.freshness-badge {
+  display: inline-block;
+  padding: 0.02em 0.45em;
+  border-radius: var(--radius-sm);
+  font-size: 0.85em;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.4;
+  vertical-align: baseline;
+  cursor: help;
+  /* Prevent the "2026-04-17 · Fresh" pair from breaking across lines when
+   * chapter-meta wraps on narrow viewports. */
+  white-space: nowrap;
+}
+.freshness-badge[data-status='fresh'] {
+  background: var(--warm-green-tint);
+  color: var(--warm-green);
+  border: 1px solid var(--warm-green);
+}
+.freshness-badge[data-status='verify-soon'] {
+  background: var(--warm-gold-tint);
+  color: var(--warm-gold);
+  border: 1px solid var(--warm-gold);
+}
+.freshness-badge[data-status='stale'] {
+  background: var(--warm-rose-tint);
+  color: var(--warm-rose);
+  border: 1px solid var(--warm-rose);
+  font-weight: 600;
+}
+
+.chapter-badge-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+  margin-top: var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+.chapter-badge-row-label {
+  font-weight: 500;
+}
+
+/* ===== Chapter TOC (collapsed <details> at top) ===== */
+.chapter-toc {
+  margin: var(--space-4) 0 var(--space-6);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-subtle);
+  font-size: var(--text-sm);
+}
+.chapter-toc > summary {
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--color-link);
+  list-style: none;
+  padding: var(--space-1) 0;
+}
+.chapter-toc > summary::-webkit-details-marker {
+  display: none;
+}
+.chapter-toc > summary::before {
+  content: "▸ ";
+  display: inline-block;
+  transition: transform 120ms ease;
+}
+.chapter-toc[open] > summary::before {
+  content: "▾ ";
+}
+.chapter-toc ol {
+  list-style: none;
+  padding-left: 0;
+  margin: var(--space-2) 0 0;
+}
+.chapter-toc li {
+  margin: var(--space-1) 0;
+  padding-left: var(--space-3);
+  border-left: 2px solid var(--color-border);
+}
+.chapter-toc li.toc-h3 {
+  padding-left: var(--space-6);
+}
+.chapter-toc a {
+  text-decoration: none;
+  color: var(--color-text);
+}
+.chapter-toc a:hover {
+  text-decoration: underline;
+  color: var(--color-link);
+}
+
+/* ===== Chapter nav (prev/next at bottom) ===== */
+.chapter-nav {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-4);
+  margin-top: var(--space-12);
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--color-border);
+}
+.chapter-nav a {
+  display: block;
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  color: var(--color-text);
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.chapter-nav a:hover {
+  border-color: var(--color-link);
+  background: var(--color-bg-subtle);
+}
+.chapter-nav a .nav-label {
+  display: block;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.25em;
+}
+.chapter-nav a .nav-title {
+  font-weight: 500;
+  color: var(--color-link);
+}
+.chapter-nav .prev { text-align: left; }
+.chapter-nav .next { text-align: right; grid-column: 2; }
+.chapter-nav .prev:only-child { grid-column: 1; }
+
+@media (max-width: 48rem) {
+  .chapter-nav {
+    grid-template-columns: 1fr;
+  }
+  .chapter-nav .next { grid-column: 1; text-align: left; }
+}