*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* dark palette (default) */
  --bg: #0d0f14;
  --text: #f2eee5;
  --body: #c9c4b8;
  --muted: #a4a1ad;
  --accent: #e5ae4f;
  --accent-soft: rgba(229, 174, 79, .14);
  --line: rgba(255, 255, 255, .12);
  --surface: rgba(255, 255, 255, .04);
  --serif: Georgia, "Times New Roman", serif;
  --body-bg:
    radial-gradient(circle at 16% 12%, rgba(74, 85, 122, .08), transparent 28rem),
    radial-gradient(circle at 85% 45%, rgba(79, 57, 29, .055), transparent 30rem),
    var(--bg);

  /* Diagram semantic palette — "owned" reuses --accent/--accent-soft so
     diagrams stay gold, matching the rest of the site; the rest are new
     hues for meanings the base palette has no token for. */
  --diagram-owned: var(--accent);
  --diagram-owned-2: #f0c06c;
  --diagram-on-owned: var(--bg);
  --diagram-on-owned-soft: rgba(13, 15, 20, .65);
  --diagram-external: #171c24;
  --diagram-external-line: #3a424e;
  --diagram-external-text: #c6ceda;
  --diagram-boundary-fill: #191f27;
  --diagram-boundary-line: #3d5164;
  --diagram-network: #c98a5f;
  --diagram-supervision: #9186be;
  --diagram-warn: #e0685f;
  --diagram-warn-soft: rgba(224, 104, 95, .14);
  --diagram-ok: #7fae6a;

  /* Chroma code-block palette — warm terminal on near-black surface */
  --code-bg: #11141b;
  --code-fg: #d8d2c4;
  --code-comment: #766f60;
  --code-string: #b7bd7a;
  --code-keyword: #e5ae4f;
  --code-func: #d9954f;
  --code-number: #c9a26a;
  --code-punct: #948d7d;
  --code-variable: #cdbf9a;
  --code-diff-add: #9bbf74;
  --code-diff-add-bg: rgba(155, 191, 116, .12);
  --code-diff-del: #cf7a63;
  --code-diff-del-bg: rgba(207, 122, 99, .12);
  --code-diff-head: #86a3c9;
  --code-error: #e0685f;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #faf8f4;
    --text: #1c1a17;
    --body: #3d3832;
    --muted: #7a7268;
    --accent: #a5741a;
    --accent-soft: rgba(165, 116, 26, .12);
    --line: rgba(0, 0, 0, .12);
    --surface: rgba(0, 0, 0, .04);
    --body-bg:
      radial-gradient(circle at 16% 12%, rgba(165, 116, 26, .05), transparent 28rem),
      radial-gradient(circle at 85% 45%, rgba(180, 150, 100, .04), transparent 30rem),
      var(--bg);

    /* Diagram semantic palette — a solid gold fill needs a deeper shade
       than the text-tuned --accent to keep white text on it AA-compliant
       (8f6416 vs white: 5.25:1); --diagram-owned-2 goes darker still for
       a visibly distinct nested tier. */
    --diagram-owned: #8f6416;
    --diagram-owned-2: #6e4c10;
    --diagram-on-owned: #ffffff;
    --diagram-on-owned-soft: rgba(255, 255, 255, .75);
    --diagram-external: #ffffff;
    --diagram-external-line: #c3c9d4;
    --diagram-external-text: #3d4756;
    --diagram-boundary-fill: #eff2f6;
    --diagram-boundary-line: #a8bfd0;
    --diagram-network: #9a5a34;
    --diagram-supervision: #6e6494;
    --diagram-warn: #b3372c;
    --diagram-warn-soft: rgba(179, 55, 44, .10);
    --diagram-ok: #4a7a3a;

    /* Chroma code-block palette — warm terminal on warm paper surface */
    --code-bg: #f1ebdd;
    --code-fg: #3d3832;
    --code-comment: #948c7c;
    --code-string: #5f7233;
    --code-keyword: #a5741a;
    --code-func: #9a5a17;
    --code-number: #8a6d3f;
    --code-punct: #6b6355;
    --code-variable: #55503f;
    --code-diff-add: #3f7d3f;
    --code-diff-add-bg: rgba(63, 125, 63, .1);
    --code-diff-del: #a83f3f;
    --code-diff-del-bg: rgba(168, 63, 63, .1);
    --code-diff-head: #4a6b8a;
    --code-error: #b3372c;
  }
}

html[data-theme="dark"] {
  --bg: #0d0f14;
  --text: #f2eee5;
  --body: #c9c4b8;
  --muted: #a4a1ad;
  --accent: #e5ae4f;
  --accent-soft: rgba(229, 174, 79, .14);
  --line: rgba(255, 255, 255, .12);
  --surface: rgba(255, 255, 255, .04);
  --body-bg:
    radial-gradient(circle at 16% 12%, rgba(74, 85, 122, .08), transparent 28rem),
    radial-gradient(circle at 85% 45%, rgba(79, 57, 29, .055), transparent 30rem),
    var(--bg);

  --diagram-owned: var(--accent);
  --diagram-owned-2: #f0c06c;
  --diagram-on-owned: var(--bg);
  --diagram-on-owned-soft: rgba(13, 15, 20, .65);
  --diagram-external: #171c24;
  --diagram-external-line: #3a424e;
  --diagram-external-text: #c6ceda;
  --diagram-boundary-fill: #191f27;
  --diagram-boundary-line: #3d5164;
  --diagram-network: #c98a5f;
  --diagram-supervision: #9186be;
  --diagram-warn: #e0685f;
  --diagram-warn-soft: rgba(224, 104, 95, .14);
  --diagram-ok: #7fae6a;

  --code-bg: #11141b;
  --code-fg: #d8d2c4;
  --code-comment: #766f60;
  --code-string: #b7bd7a;
  --code-keyword: #e5ae4f;
  --code-func: #d9954f;
  --code-number: #c9a26a;
  --code-punct: #948d7d;
  --code-variable: #cdbf9a;
  --code-diff-add: #9bbf74;
  --code-diff-add-bg: rgba(155, 191, 116, .12);
  --code-diff-del: #cf7a63;
  --code-diff-del-bg: rgba(207, 122, 99, .12);
  --code-diff-head: #86a3c9;
  --code-error: #e0685f;
}

html[data-theme="light"] {
  --bg: #faf8f4;
  --text: #1c1a17;
  --body: #3d3832;
  --muted: #7a7268;
  --accent: #a5741a;
  --accent-soft: rgba(165, 116, 26, .12);
  --line: rgba(0, 0, 0, .12);
  --surface: rgba(0, 0, 0, .04);
  --body-bg:
    radial-gradient(circle at 16% 12%, rgba(165, 116, 26, .05), transparent 28rem),
    radial-gradient(circle at 85% 45%, rgba(180, 150, 100, .04), transparent 30rem),
    var(--bg);

  --diagram-owned: #8f6416;
  --diagram-owned-2: #6e4c10;
  --diagram-on-owned: #ffffff;
  --diagram-on-owned-soft: rgba(255, 255, 255, .75);
  --diagram-external: #ffffff;
  --diagram-external-line: #c3c9d4;
  --diagram-external-text: #3d4756;
  --diagram-boundary-fill: #eff2f6;
  --diagram-boundary-line: #a8bfd0;
  --diagram-network: #9a5a34;
  --diagram-supervision: #6e6494;
  --diagram-warn: #b3372c;
  --diagram-warn-soft: rgba(179, 55, 44, .10);
  --diagram-ok: #4a7a3a;

  --code-bg: #f1ebdd;
  --code-fg: #3d3832;
  --code-comment: #948c7c;
  --code-string: #5f7233;
  --code-keyword: #a5741a;
  --code-func: #9a5a17;
  --code-number: #8a6d3f;
  --code-punct: #6b6355;
  --code-variable: #55503f;
  --code-diff-add: #3f7d3f;
  --code-diff-add-bg: rgba(63, 125, 63, .1);
  --code-diff-del: #a83f3f;
  --code-diff-del-bg: rgba(168, 63, 63, .1);
  --code-diff-head: #4a6b8a;
  --code-error: #b3372c;
}

body {
  min-height: 100vh;
  background: var(--body-bg);
  color: var(--body);
  font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.03rem;
  line-height: 1.75;
}

/* ── Site wrapper ─────────────────────────────────────────────── */

.site-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2.2rem 5rem;
}

/* ── Site header ──────────────────────────────────────────────── */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 5.2rem;
  margin-bottom: 2.5rem;
}

.monogram {
  font-family: var(--serif);
  color: var(--accent);
  font-size: 1.7rem;
  letter-spacing: -.16em;
  text-decoration: none;
}

.site-header nav {
  display: flex;
  align-items: center;
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .92rem;
  margin-left: 1.7rem;
  transition: color .2s;
}

.site-header nav a:hover { color: var(--text); }

/* ── Single post — two-column wide-canvas layout ──────────────── */

.post-cols {
  display: grid;
  grid-template-columns: minmax(0, 47rem) 17rem;
  gap: 5rem;
  justify-content: center;
}

@media (max-width: 72rem) {
  .post-cols {
    grid-template-columns: minmax(0, 47rem);
    justify-content: center;
  }
  .post-rail { display: none; }
}

.post-wrap {
  width: 100%;
  max-width: 47rem;
  min-width: 0;
  margin: 0 auto;
}

.post-rail {
  position: sticky;
  top: 2.5rem;
  align-self: start;
  font-size: .88rem;
}

.rail-heading {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: .8rem;
  white-space: nowrap;
}

.rail-heading::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--line);
}

.post-rail nav ul {
  list-style: none;
}

.post-rail nav li {
  padding: .3rem 0;
}

.post-rail nav a {
  color: var(--muted);
  text-decoration: none;
}

.post-rail nav a:hover { color: var(--accent); }

h1.post-title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
  color: var(--text);
}

.accent-rule {
  width: 58px;
  height: 3px;
  background: var(--accent);
  margin: 1.4rem 0 1.5rem;
}

.post-subtitle {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--text);
  opacity: .85;
  line-height: 1.3;
  margin-bottom: .5rem;
}

.post-meta {
  margin: 1.6rem 0 3rem;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.post-content { font-size: 1.1rem; }

.post-content p { margin-bottom: 1.3rem; }

.post-content h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin: 2.8rem 0 1.1rem;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.post-content h2::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--line);
}

.post-content h3 {
  font-family: var(--serif);
  color: var(--text);
  font-size: 1.2rem;
  margin: 2rem 0 .8rem;
}

.post-content a { color: var(--accent); }

.post-content strong { color: var(--text); font-weight: 600; }

.post-content ul,
.post-content ol {
  margin: 0 0 1.3rem 1.5rem;
}

.post-content li { margin-bottom: .3rem; }

.post-content code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .88em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: .1em .35em;
  border-radius: 3px;
}

.post-content pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
  margin-bottom: 1.3rem;
  font-size: .9rem;
  line-height: 1.6;
}

.post-content pre code {
  background: none;
  padding: 0;
  color: var(--body);
}

/* ── Chroma syntax highlighting (fenced code blocks) ──────────── */

.post-content .highlight {
  margin-bottom: 1.3rem;
  overflow-x: auto;
  border-radius: 4px;
}

.post-content .highlight pre.chroma {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
  margin-bottom: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--code-fg);
}

.post-content .highlight pre.chroma code {
  background: none;
  padding: 0;
  color: inherit;
}

.chroma .c, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cm {
  color: var(--code-comment);
  font-style: italic;
}

.chroma .k, .chroma .kn, .chroma .kd, .chroma .kc,
.chroma .kr, .chroma .kt, .chroma .kp, .chroma .nt {
  color: var(--code-keyword);
  font-weight: 600;
}

.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc,
.chroma .sd, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx,
.chroma .ss, .chroma .sa, .chroma .l {
  color: var(--code-string);
}

.chroma .nf, .chroma .fm, .chroma .nb {
  color: var(--code-func);
}

.chroma .m, .chroma .mi, .chroma .mf, .chroma .mh, .chroma .mo, .chroma .il {
  color: var(--code-number);
}

.chroma .o, .chroma .ow, .chroma .p {
  color: var(--code-punct);
}

.chroma .n, .chroma .nx, .chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi {
  color: var(--code-variable);
}

.chroma .gi {
  color: var(--code-diff-add);
  background: var(--code-diff-add-bg);
  display: block;
}

.chroma .gd {
  color: var(--code-diff-del);
  background: var(--code-diff-del-bg);
  display: block;
}

.chroma .gu, .chroma .gh {
  color: var(--code-diff-head);
  font-weight: 600;
}

.chroma .ge {
  font-style: italic;
}

.chroma .err {
  color: var(--code-error);
}

/* ── Diagrams (diagram shortcode — hand-authored inline SVG) ──── */

.diagram {
  margin: 0 0 1.3rem;
}

.diagram-frame {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
}

.diagram-frame svg {
  display: block;
  height: auto;
}

.diagram-caption {
  margin-top: .7rem;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
}

.diagram-num {
  color: var(--accent);
  font-weight: 700;
}

/* Diagram SVGs are styled entirely through these classes so every colour
   comes from the theme's custom properties — never a literal value baked
   into the SVG markup itself. Semantic grammar (component ownership,
   boundaries, connection meaning) rather than one generic box style, so a
   diagram still reads correctly in greyscale via shape/border/dash alone. */
/* -fill and -outline classes are meant to be combined on the same shape
   (e.g. class="diagram-fill diagram-outline") — neither sets the other's
   property, so composing them never lets one silently cancel the other. */
.diagram-fill { fill: var(--surface); }
.diagram-outline { stroke: var(--line); stroke-width: 1.5; }
.diagram-connector { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.diagram-connector-arrow { fill: var(--muted); }
.diagram-text { fill: var(--text); font-family: var(--serif); }
.diagram-muted-text { fill: var(--muted); }

/* Owned — a part of the system the diagram is documenting. Solid fill;
   -on-owned/-on-owned-soft are the text colours that go on top of it. */
.diagram-owned { fill: var(--diagram-owned); }
.diagram-owned-2 { fill: var(--diagram-owned-2); }
.diagram-on-owned { fill: var(--diagram-on-owned); }
.diagram-on-owned-soft { fill: var(--diagram-on-owned-soft); }
/* Owned-soft — an optional plugin/config choice within the owned system:
   outlined rather than solid, so it reads as "part of it, but optional". */
.diagram-owned-soft { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }

/* External — a system the diagram documents integration with, not part of
   it. */
.diagram-external { fill: var(--diagram-external); stroke: var(--diagram-external-line); stroke-width: 1.75; }
.diagram-external-text { fill: var(--diagram-external-text); }

/* Boundary — a dashed container grouping nodes by where they run (e.g. "on
   the robot" vs. "off the robot"). */
.diagram-boundary { fill: var(--diagram-boundary-fill); stroke: var(--diagram-boundary-line); stroke-width: 2; stroke-dasharray: 9 7; }

/* Supervised — an external process the owned system starts/restarts and
   outlives: dashed owned-coloured border on a neutral surface. */
.diagram-supervised { fill: var(--surface); stroke: var(--diagram-owned); stroke-width: 2; stroke-dasharray: 7 5; }

/* Warn — a failure/outage state. */
.diagram-warn { fill: var(--diagram-warn-soft); stroke: var(--diagram-warn); stroke-width: 2; }
.diagram-warn-text { fill: var(--diagram-warn); }

/* Connection lines, differentiated by what kind of hop they cross — colour
   is decoration only; each also gets its own dash pattern so the meaning
   still reads in greyscale or print. */
.diagram-line-owned { stroke: var(--diagram-owned); stroke-width: 2.4; fill: none; }
.diagram-line-socket { stroke: var(--muted); stroke-width: 2.4; stroke-dasharray: 16 6 3 6; fill: none; }
.diagram-line-network { stroke: var(--diagram-network); stroke-width: 2.4; stroke-dasharray: 9 8; fill: none; }
.diagram-line-supervision { stroke: var(--diagram-supervision); stroke-width: 2.6; stroke-dasharray: 2 8; stroke-linecap: round; fill: none; }

/* ── Tables (via the render-table.html hook) ─────────────────── */

/* The frame scrolls, never the page — same contract as .diagram-frame. */
.table-frame {
  overflow-x: auto;
  margin: 0 0 1.6rem;
}

.post-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: .92rem;
  line-height: 1.5;
}

/* Column headers reuse the gold small-caps convention already carried by
   .series-row dt and the post-content h2 rail headings. */
.post-content th {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  padding: 0 1.2rem .6rem 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.post-content td {
  color: var(--body);
  vertical-align: top;
  padding: .7rem 1.2rem .7rem 0;
  border-bottom: 1px solid var(--line);
}

.post-content tr:last-child td { border-bottom: none; }
.post-content th:last-child,
.post-content td:last-child { padding-right: 0; }

.post-content td strong { color: var(--text); font-weight: 700; }

.post-content td code {
  font-size: .88em;
  white-space: nowrap;
}

/* Optional per-table modifier: shades one column to draw the eye to it
   (e.g. the "winning" option in a feature-comparison table). Scoped to
   .col-highlight so it never affects the default table styling above. */
.post-content table.col-highlight th:last-child,
.post-content table.col-highlight td:last-child {
  background: var(--accent-soft);
  padding-left: .8rem;
  padding-right: .8rem;
}

/* ── Series summary box (five-row skim box for series articles) ── */

.series-box {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  padding: 1.4rem 1.6rem;
  margin: 0 0 2.5rem;
}

.series-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.4rem;
  padding: .6rem 0;
}

.series-row + .series-row { border-top: 1px solid var(--line); }

.series-row dt {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
}

.series-row dd {
  color: var(--body);
  font-size: .95rem;
  line-height: 1.5;
}

.series-row dd a {
  color: inherit;
  text-decoration-color: var(--line);
}

.series-row dd a:hover { color: var(--accent); text-decoration-color: var(--accent); }

@media (max-width: 38rem) {
  .series-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .3rem;
  }
}

/* ── Series navigation (generated back/forward-link list) ──────── */

.series-nav {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.series-nav-heading {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.series-nav-list {
  list-style: none;
  display: grid;
  gap: .5rem;
}

.series-nav-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.series-nav-num {
  font-family: var(--serif);
  color: var(--muted);
  font-size: .9rem;
  min-width: 1.6rem;
}

.series-nav-title {
  color: var(--muted);
  text-decoration: none;
}

a.series-nav-title:hover { color: var(--accent); }

a.series-nav-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.series-nav-list li.is-current .series-nav-num,
.series-nav-list li.is-current .series-nav-title {
  color: var(--text);
  font-weight: 600;
}

.post-content blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.5rem 0;
  padding: .5rem 0 .5rem 1.4rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Post list (homepage + section pages) ─────────────────────── */

.post-list-wrap { max-width: 47rem; margin: 0 auto; }

.post-list-heading {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: .2rem;
  white-space: nowrap;
}

.post-list-heading::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--line);
}

.post-row {
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line);
}

.post-row-link {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}

.tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.post-row .tag-badges {
  padding-left: calc(3.2rem + 1.4rem);
  margin-top: .6rem;
}

.tag-badge {
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: .25em;
  white-space: nowrap;
  transition: color .2s, text-decoration-color .2s;
}

.tag-badge:hover { color: var(--accent); text-decoration-color: var(--accent); }

.tag-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.post-meta:has(+ .tag-badges) { margin-bottom: 1rem; }

.post-meta + .tag-badges { margin-bottom: 3rem; }

.post-row-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.post-num {
  font-family: var(--serif);
  color: var(--accent);
  font-size: 1.5rem;
}

.post-row-title {
  font-family: var(--serif);
  color: var(--text);
  font-size: 1.55rem;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.post-row-link:hover .post-row-title { color: var(--accent); }

.post-row-link time {
  color: var(--muted);
  font-size: .85rem;
  white-space: nowrap;
}

@media (max-width: 38rem) {
  .post-row-link {
    grid-template-columns: 3.2rem 1fr;
    gap: .5rem 1.4rem;
  }
  .post-row-link time {
    grid-column: 2;
    white-space: normal;
  }
}

/* Rows whose post has an in-article diagram: swap the trailing date
   column for a diagram thumbnail on the right, date moves under the
   title instead (same title → date stacking single.html uses for
   .post-title → .post-meta). */
.post-row-link--diagram {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.post-row-main {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}

.post-row-top {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
}

.post-row-date {
  color: var(--muted);
  font-size: .85rem;
}

/* Fixed 3:2 letterbox frame: the diagram is scaled to fit and centred,
   never cropped or stretched, so every row is the same shape no matter
   the source diagram's own aspect ratio. The !important beats the
   width:100%;height:auto inline style baked into each diagram's <svg>
   by the diagram shortcode. */
.post-row-diagram {
  width: 18rem;
  height: 12rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  padding: .6rem .7rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-row-diagram svg {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.post-row:has(.post-row-link--diagram) .tag-badges {
  padding-left: 0;
}

@media (max-width: 38rem) {
  .post-row-link--diagram {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .post-row-diagram {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 38rem) {
  .theme-toggle { margin-left: 2.4rem; }
}

/* ── Pagination ───────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
  font-size: .88rem;
}

.pag-link {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1rem;
}

.pag-link:hover { opacity: .75; }

.pag-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pag-info { color: var(--muted); }

/* ── Generic list page (taxonomy, section) ────────────────────── */

.list-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 2rem;
}

/* ── Site footer ──────────────────────────────────────────────── */

.site-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
}

.heart { color: var(--accent); }

/* ── Theme toggle ─────────────────────────────────────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  margin-left: 1.7rem;
  transition: color .2s, border-color .2s;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── 404 ──────────────────────────────────────────────────────── */

/* The unreachable link's dashes drift toward the empty slot, like a retry.
   Purely additive: delete this block and the page is still complete. */
.nf-probe { animation: nf-probe 1.4s linear infinite; }
@keyframes nf-probe { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { .nf-probe { animation: none; } }