/* =================================================================
   Mock Test Mitra™  |  assets/css/blog.css
   Essays and analysis under /blog/. Loads after main.css + nav.css.
   Sketch colours (.sk) are used by the SVGs that
   scripts/build_blog_sketches.mjs writes into the pages.
   ================================================================= */

.post-page,
.post {
  --post-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --post-hand: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive;
  --post-rule: var(--border);
  --post-measure: 640px;   /* the text column: about 70 characters a line */
  --post-notes: 260px;     /* margin notes */
  --post-gap: 40px;
  --post-rail: 200px;      /* contents rail */
}
.post {
  padding-top: 24px;
  padding-bottom: 48px;
}

/* ── Header ─────────────────────────────────────────────────────── */
.post-crumbs {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.post-crumbs a { color: var(--text-muted); }
.post-kicker {
  font-family: var(--post-hand);
  font-size: 1.15rem;
  color: var(--accent-text, var(--primary));
  margin: 0 0 6px;
}
.post h1 {
  font-family: var(--post-serif);
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.post-dek {
  font-family: var(--post-serif);
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.post-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 12px 0;
  border-top: 1px solid var(--post-rule);
  border-bottom: 1px solid var(--post-rule);
  margin-bottom: 32px;
}
.post-byline strong { color: var(--text); font-weight: 600; }

/* ── Body ───────────────────────────────────────────────────────── */
.post-body {
  font-family: var(--post-serif);
  font-size: 1.14rem;
  line-height: 1.75;
  color: var(--text);
}
.post-body p { margin: 0 0 1.15em; }
.post-body h2 {
  font-family: var(--post-serif);
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 2.1em 0 0.7em;
}
.post a { color: var(--accent-text, var(--primary)); }
.post-body .nowrap { white-space: nowrap; }
.post-body a, .post-box a { text-decoration: underline; text-underline-offset: 3px; }
.post-body blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--accent-fill, var(--primary));
  font-family: var(--post-hand);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.post-body blockquote p { margin: 0; }
.post-body .post-lede::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.9;
  padding: 0.06em 0.08em 0 0;
  font-weight: 700;
}

/* ── Figures ────────────────────────────────────────────────────── */
.post-figure {
  margin: 2em 0;
  padding: 14px 14px 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
}
.post-figure svg { display: block; width: 100%; height: auto; }
/* A figure fits on one screen (docs/3D-FIGURES-PLAN.md §6 rule 11): a tall
   drawing shrinks to fit, centred, rather than running past the screen. A
   step-through leaves room for its buttons and caption below it. */
.post-figure svg.sk { max-height: 75vh; max-height: 75svh; }
.post-figure.is-stepping svg.sk { max-height: 60vh; max-height: 60svh; }
.post-figure figcaption {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 10px;
}
.post-figure figcaption strong { color: var(--text-secondary); }

/* Wide sketches on desktop, narrow re-drawings on phones. */
.sk--narrow { display: none !important; }
@media (max-width: 560px) {
  .sk--wide { display: none !important; }
  .sk--narrow { display: block !important; }
  .post-figure { padding: 10px 6px 8px; margin-left: -4px; margin-right: -4px; }
}

/* ── Sketch palette ─────────────────────────────────────────────── */
.sk {
  --sk-ink: #1f2937;
  --sk-muted: #5b6b81;
  --sk-red: #c53030;
  --sk-cloak: #9b2c2c;
  --sk-bronze: #b7791f;
  --sk-sea: #2b6cb0;
  --sk-hill: #7a6a4f;
  --sk-accent: #1d4ed8;
  --sk-soft: #ecc94b;
  --sk-land: #eef2f7;
  --sk-paper: var(--card-bg);
  /* Chart marks: checked with the dataviz skill's palette validator (lightness, chroma,
     colour-blind separation, contrast) against #ffffff and, below, #111827. */
  --sk-viz1: #2a78d6;
  --sk-viz2: #eb6834;
  --sk-loss: #c53030;
}
[data-theme="dark"] .sk {
  --sk-ink: #e2e8f0;
  --sk-muted: #a0aec0;
  --sk-red: #fc8181;
  --sk-cloak: #feb2b2;
  --sk-bronze: #f6ad55;
  --sk-sea: #63b3ed;
  --sk-hill: #c9b994;
  --sk-accent: #90cdf4;
  --sk-soft: #b7791f;
  --sk-land: #1a2235;
  --sk-viz1: #3987e5;
  --sk-viz2: #d95926;
  --sk-loss: #e5484d;
}
.sk path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sk .s-ink    { stroke: var(--sk-ink); }
.sk .s-red    { stroke: var(--sk-red); }
.sk .s-cloak  { stroke: var(--sk-cloak); }
.sk .s-bronze { stroke: var(--sk-bronze); }
.sk .s-sea    { stroke: var(--sk-sea); }
.sk .s-hill   { stroke: var(--sk-hill); }
.sk .s-accent { stroke: var(--sk-accent); }
.sk .s-soft   { stroke: var(--sk-soft); }
.sk .f-ink    { fill: var(--sk-ink); }
.sk .f-paper  { fill: var(--sk-paper); }
.sk .f-red    { fill: var(--sk-red); }
.sk .f-land   { fill: var(--sk-land); }
.sk .f-soft   { fill: var(--sk-soft); fill-opacity: 0.55; }
.sk .t {
  font-family: var(--post-hand);
  fill: var(--sk-ink);
}
.sk .t-red    { fill: var(--sk-red); }
.sk .t-sea    { fill: var(--sk-sea); }
.sk .t-accent { fill: var(--sk-accent); }
.sk .t-muted  { fill: var(--sk-muted); }
.sk .t-bold   { font-weight: 700; }
.sk .t-sans   { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.sk .t-italic { font-style: italic; }
.sk .t-halo {
  paint-order: stroke;
  stroke: var(--sk-paper);
  stroke-width: 6px;
  stroke-linejoin: round;
}

/* ── Fact-vs-film table ─────────────────────────────────────────── */
.post-table-wrap { margin: 1.8em 0; }
.post-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
}
.post-table caption {
  text-align: left;
  font-family: var(--post-hand);
  font-size: 1.15rem;
  color: var(--text-secondary);
  padding-bottom: 8px;
}
.post-table th,
.post-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--post-rule);
}
.post-table th { background: transparent; color: var(--text); font-size: inherit; }
.post-table tr:nth-child(even) td { background: transparent; }
.post-table thead th {
  font-weight: 600;
  border-bottom: 2px solid var(--text-muted);
}
.post-table tbody th { font-weight: 600; width: 22%; }
@media (max-width: 560px) {
  .post-table thead { display: none; }
  .post-table caption { display: block; }
  .post-table, .post-table tbody, .post-table tr, .post-table th, .post-table td,
  .post-table tbody th { display: block; width: auto; }
  .post-table tr { padding: 10px 0; border-bottom: 1px dashed var(--post-rule); }
  .post-table th, .post-table td { border: 0; padding: 2px 0; }
  .post-table td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--text-secondary);
  }
}

/* ── Boxes: practice, sources, author ───────────────────────────── */
.post-box {
  margin: 2.2em 0;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.97rem;
  line-height: 1.65;
}
.post-box h2 {
  font-family: var(--post-hand);
  font-size: 1.45rem;
  margin: 0 0 10px;
}
.post-box ol, .post-box ul { margin: 0; padding-left: 1.3em; }
.post-box li { margin-bottom: 0.7em; }
.post-box li:last-child { margin-bottom: 0; }
.post-box--practice { border-left: 4px solid var(--accent-fill, var(--primary)); }
.post-box--sources { font-size: 0.88rem; color: var(--text-secondary); }
.post-author {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.post-author-mark {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--post-hand);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent-fill, var(--primary));
}
.post-author p { margin: 0; }

/* ── Blog index ─────────────────────────────────────────────────── */
.blog-list { list-style: none; margin: 24px 0 0; padding: 0; }
.blog-card {
  display: block;
  padding: 20px 22px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.blog-card:hover { border-color: var(--accent-fill, var(--primary)); transform: translateY(-1px); }
.blog-card-kicker { font-family: 'Kalam', cursive; color: var(--accent-text, var(--primary)); font-size: 1.05rem; }
.blog-card h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 4px 0 8px;
}
.blog-card p { margin: 0 0 8px; color: var(--text-secondary); line-height: 1.6; }
.blog-card-meta { font-size: 0.85rem; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .blog-card { transition: none; }
  .blog-card:hover { transform: none; }
}

/* ── Essay layout: contents rail · text · margin notes ───────────────
   Phones and narrow columns: one column, notes as small boxes in the text.
   Article width ≥ 940px: notes move into a right margin and figures span
   the text and the margin. Column ≥ 1420px: a sticky contents rail in the
   left margin, with the essay still centred.
   Container queries measure the essay's own column, so the layout follows
   the sidebar opening and closing, not just the window. */
.post-page {
  container-type: inline-size;
  max-width: none;   /* the layout centres itself; the rail needs the margins */
}
.post-layout {
  max-width: var(--post-measure);
  margin: 0 auto;
}
.post-rail { display: none; }

.post-body h2,
.post-box h2 { scroll-margin-top: calc(var(--topbar-height, 52px) + 20px); }

/* Margin notes, inline by default */
.post-note {
  margin: 0 0 1.2em;
  padding: 10px 14px;
  border-left: 3px solid var(--accent-fill, var(--primary));
  border-radius: 0 10px 10px 0;
  background: var(--card-bg);
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.post-note b { color: var(--text); font-weight: 600; }
.post-note-label {
  display: block;
  font-family: var(--post-hand);
  font-size: 1rem;
  color: var(--accent-text, var(--primary));
  margin-bottom: 2px;
}
.post-note--source { display: none; }   /* phones: the sources list has them */

/* Contents box under the byline, used wherever the rail is not shown */
.post-toc-mini {
  margin: -12px 0 28px;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.92rem;
}
.post-toc-mini summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-secondary);
}
.post-toc-mini .post-toc { margin: 10px 0 2px; }

.post-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.post-toc li { counter-increment: toc; max-width: none; }
.post-toc a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--post-rule);
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.4;
}
.post-toc a:hover { color: var(--text); border-left-color: var(--text-muted); }
.post-toc a.is-active {
  color: var(--accent-text, var(--primary));
  border-left-color: var(--accent-fill, var(--primary));
  font-weight: 600;
}

@container (min-width: 940px) {
  .post-layout { max-width: calc(var(--post-measure) + var(--post-gap) + var(--post-notes)); }
  .post > :not(.post-body),
  .post-body > :not(.post-note, .post-figure, .post-table-wrap) { max-width: var(--post-measure); }
  .post > .post-box { clear: both; }
  .post-figure,
  .post-table-wrap { clear: right; }
  .post-figure svg { max-width: 860px; margin: 0 auto; }

  .post-note,
  .post-note--source {
    display: block;
    float: right;
    clear: right;
    width: var(--post-notes);
    margin: 0.35em 0 1.4em;
    padding: 2px 0 2px 14px;
    border-left: 2px solid var(--post-rule);
    border-radius: 0;
    background: none;
    font-size: 0.84rem;
  }
  .post-note--term { border-left-color: var(--accent-fill, var(--primary)); }
}

/* The rail sits in the left margin, so the essay itself stays centred.
   It needs room for the essay plus a rail-and-gap on each side. */
@container (min-width: 1420px) {
  .post-toc-mini { display: none; }
  .post-layout { position: relative; }
  .post-rail {
    display: block;
    position: absolute;
    top: 96px;            /* level with the headline */
    bottom: 0;
    right: calc(100% + var(--post-gap));
    width: var(--post-rail);
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.86rem;
  }
  .post-rail-inner {
    position: sticky;
    top: calc(var(--topbar-height, 52px) + 24px);
    max-height: calc(100vh - var(--topbar-height, 52px) - 48px);
    overflow-y: auto;
  }
}

.post-rail-card { margin-bottom: 26px; }
.post-rail-title {
  font-family: var(--post-hand);
  font-size: 1.1rem;
  color: var(--text);
  margin: 0 0 8px;
}
.post-progress {
  height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: var(--post-rule);
  overflow: hidden;
}
.post-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent-fill, var(--primary));
  transform: scaleX(0);
  transform-origin: left center;
}
.post-series {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-series li { margin-bottom: 6px; max-width: none; }
.post-series a { color: var(--text-secondary); text-decoration: none; line-height: 1.4; }
.post-series a:hover { color: var(--text); text-decoration: underline; }
.post-series a[aria-current="page"] { color: var(--text); font-weight: 600; }
.post-rail-cta {
  display: block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-fill, var(--primary));
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.post-rail-cta:hover { filter: brightness(1.08); }
[data-theme="dark"] .post-rail-cta { color: #0a0f1a; }

/* ── Short answer: the direct answer under the headline ───────────────
   Readers who want the conclusion get it first; answer engines and
   featured snippets lift exactly this kind of passage. */
.post-answer {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-left: 4px solid var(--accent-fill, var(--primary));
  border-radius: 0 12px 12px 0;
  background: var(--card-bg);
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.post-answer p { margin: 0; max-width: none; }
.post-answer .post-answer-label {
  font-family: var(--post-hand);
  font-size: 1.1rem;
  color: var(--accent-text, var(--primary));
  margin-bottom: 4px;
}
.post-byline a,
.post-author a[rel="author"] { color: inherit; text-decoration: none; }
.post-byline a:hover,
.post-author a[rel="author"]:hover { text-decoration: underline; }

/* Blog index: author and feed links under the intro. */
.blog-follow {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: -4px 0 24px;
}
.blog-follow a { color: var(--accent-text, var(--primary)); }

/* ── Exact technical figures (to-scale orbits, charts) ──────────────────────
   Drawn by scripts/build_blog_sketches.mjs with plain SVG elements instead of
   rough.js, for figures where the geometry itself is the lesson. Colours stay
   theme classes, so dark mode works. */
.sk .s-muted  { stroke: var(--sk-muted); }
.sk .s-paper  { stroke: var(--sk-paper); }
.sk .f-none   { fill: none; }
.sk .f-panel  { fill: var(--sk-land); fill-opacity: 0.5; stroke: none; }
.sk .f-accent { fill: var(--sk-accent); fill-opacity: 0.85; }
.sk .f-bronze { fill: var(--sk-bronze); fill-opacity: 0.85; }
.sk .f-viz1   { fill: var(--sk-viz1); }
.sk .f-viz2   { fill: var(--sk-viz2); }
.sk .f-loss   { fill: var(--sk-loss); }
.sk .s-viz1   { stroke: var(--sk-viz1); }
.sk .s-viz2   { stroke: var(--sk-viz2); }
.sk .f-muted  { fill: var(--sk-muted); }
.sk .t-paper  { fill: var(--sk-paper); }
.sk .f-earthbar { fill: var(--sk-sea); fill-opacity: 0.35; }
.sk .f-coast    { fill: var(--sk-accent); fill-opacity: 0.9; }
.sk .f-moonbar  { fill: var(--sk-bronze); fill-opacity: 0.45; }
.sk .stop-earth-a { stop-color: var(--sk-sea); stop-opacity: 0.35; }
.sk .stop-earth-b { stop-color: var(--sk-sea); stop-opacity: 0.95; }
.sk .stop-moon-a  { stop-color: var(--sk-muted); stop-opacity: 0.2; }
.sk .stop-moon-b  { stop-color: var(--sk-muted); stop-opacity: 0.75; }
.sk circle, .sk rect, .sk line { stroke-linecap: round; }

/* Step-through figures (assets/js/blog-orbits.js). Without the script, every
   stage is drawn and the steps read as a numbered list under the figure. */
.post-steps {
  margin: 12px 0 0;
  padding-left: 1.4em;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.post-steps li + li { margin-top: 4px; }
.post-figure.is-stepping .sk-step { opacity: 0.16; transition: opacity 0.25s ease; }
.post-figure.is-stepping .sk-step.is-past { opacity: 0.38; }
.post-figure.is-stepping .sk-step.is-current { opacity: 1; }
.post-figure .sk-craft { fill: var(--sk-red); stroke: var(--sk-paper); stroke-width: 1.5; }
.post-figure .stepper { margin-top: 10px; }
.post-figure .stepper__status { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
/* On a phone the step's name gets its own row every time, so a longer name
   never wraps and moves everything below (docs/3D-FIGURES-PLAN.md §6 rule 11). */
@media (max-width: 560px) {
  .post-figure .stepper__status { flex-basis: 100%; padding: 2px 4px 0; }
}
.post-step-caption {
  margin: 8px 0 0;
  min-height: 3.1em;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
  .post-figure.is-stepping .sk-step { transition: none; }
}

/* The journey animation (assets/js/blog-journey.js): a canvas showing space,
   dark in both themes. Its colours live here, so the script never carries one.
   Without the script the still drawing and the numbered steps show instead. */
.post-journey {
  --jr-space: #0b1222;
  --jr-star: #ffffff;
  --jr-text: #f1f5f9;
  --jr-muted: #a9b6c8;
  --jr-earth-a: #9fd3f7;
  --jr-earth-b: #1f5a9e;
  --jr-moon-a: #edf0f4;
  --jr-moon-b: #737b88;
  --jr-orbit: #90cdf4;
  --jr-orbit-past: rgba(160, 174, 192, 0.42);
  --jr-lunar: #f6ad55;
  --jr-path: #90cdf4;
  --jr-craft: #ff8f8f;
  --jr-module: #cbd5e0;
  --jr-site: #ff8f8f;
  --jr-soi: #a9b6c8;
}
[data-theme="dark"] .post-journey { --jr-space: #060a14; }
.post-journey__stage {
  aspect-ratio: 16 / 10;
  max-height: 58vh;
  max-height: 58svh;           /* with its buttons and caption, it fits on one screen */
  border-radius: 10px;
  overflow: hidden;
  background: var(--jr-space);
}
.post-journey__stage canvas { display: block; width: 100%; height: 100%; }
.post-journey.is-live .sk { display: none !important; }
@media (max-width: 560px) {
  .post-journey__stage { aspect-ratio: 1 / 1; }
}
.post-table--numbers td:nth-child(n+3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.post-table--numbers th[scope="rowgroup"] { text-align: left; font-weight: 600; }

/* Worked example: one calculation, every step shown (generated). */
.post-worked {
  margin: 1.8em 0;
  padding: 16px 20px;
  border-left: 4px solid var(--accent-text, var(--primary));
  border-radius: 0 12px 12px 0;
  background: var(--card-bg);
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
}
.post-worked-title { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.post-worked-given, .post-worked-note { margin: 0 0 10px; color: var(--text-secondary); font-size: 0.9rem; }
.post-worked-note { margin: 10px 0 0; }
.post-worked ol { margin: 0; padding-left: 1.4em; }
.post-worked li + li { margin-top: 8px; }
.post-worked-what { display: block; color: var(--text-secondary); font-size: 0.88rem; }
.post-worked mjx-container { overflow-x: auto; overflow-y: hidden; max-width: 100%; }

/* "In words": a formula restated in plain language, right under it. */
.post-inwords {
  margin-top: -0.4em;
  padding-left: 12px;
  border-left: 3px solid var(--post-rule);
  color: var(--text-secondary);
  font-size: 0.95em;
}

/* "Terms used in this essay": every technical term, in plain words. */
.post-glossary {
  margin: -12px 0 28px;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.92rem;
}
.post-toc-mini + .post-glossary { margin-top: -16px; }
.post-glossary summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.post-glossary dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 12px 0 4px;
  line-height: 1.5;
}
.post-glossary dt { font-weight: 600; color: var(--text); }
.post-glossary dd { margin: 0; color: var(--text-secondary); }
@media (max-width: 560px) {
  .post-glossary dl { grid-template-columns: 1fr; gap: 2px; }
  .post-glossary dd { margin-bottom: 8px; }
}