/* ═══════════════════════════════════════════════════════════════
   Stoa — a Ghost theme set like a book
   Ink, parchment, one gold, a deco teal. Two families, self-hosted.
   The type system is ported verbatim from stoicai.ca so the two
   sites read as siblings; the ornament vocabulary is drawn from the
   blog's own Art Deco feature art: stepped corner frames, sunburst
   rules, diamond finials.

   Fonts are declared in partials/fonts.hbs so their URLs can go
   through the {{asset}} helper and match the preload hints.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────────── */

:root {
  --font-serif: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  --font-sans: "Source Sans 3", "Source Sans 3 Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Ghost's Typography setting injects --gh-font-heading / --gh-font-body
     only when a custom font is chosen; left at the default, Stoa's own
     serif carries both. */
  --font-body: var(--gh-font-body, var(--font-serif));
  --font-heading: var(--gh-font-heading, var(--font-serif));

  --ink-950: #0b0a08;
  --ink-900: #121009;
  --ink-800: #1b1812;
  --ink-700: #2a2620;
  --ink-600: #3d3830;
  --gold: #c9a84c;
  --gold-bright: #dfc06a;
  --gold-dim: rgba(201, 168, 76, 0.38);
  --gold-faint: rgba(201, 168, 76, 0.14);
  --parchment: #ede6d8;
  --stone: #b3aa99;
  --stone-dim: #8a8272;

  /* Deco teal, sampled from the feature art (cover, gears, MCS, vLLM). */
  --teal: #2f6b66;
  --teal-deep: #183f3f;
  --teal-bright: #4d8c82;
  --teal-code: #5fa094;
  --teal-dim: rgba(47, 107, 102, 0.5);
  --teal-faint: rgba(47, 107, 102, 0.16);

  /* Paper scheme values, referenced by the scheme rules below. */
  --paper: #efe8d9;
  --paper-raised: #e7dfcd;
  --paper-surface: #e2d9c4;
  --paper-rule: #d3c8b0;
  --paper-rule-strong: #b9ad93;
  --paper-muted: #5a5346;
  --paper-dim: #665e4e;
  --paper-gold-text: #7a5f17;
  --paper-gold-hover: #5e480f;

  /* Type scale — fluid between phone and desktop, ratio ~1.3 */
  --step--2: 0.8125rem;
  --step--1: 0.9375rem;
  --step-0: 1.1875rem;
  --step-1: clamp(1.3125rem, 1.15rem + 0.6vw, 1.5625rem);
  --step-2: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem);
  --step-3: clamp(2.125rem, 1.55rem + 2.2vw, 3.125rem);
  --step-4: clamp(2.75rem, 1.7rem + 4.2vw, 5.375rem);

  --measure: 36rem;
  --measure-wide: 44rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --container: 74rem;
  --margin-col: 11rem;
  --margin-gap: 4rem;
  --space-section: clamp(4.5rem, 10vw, 8.5rem);
  --header-h: 4.5rem;
  --radius: 2px;

  /* Semantic aliases. Ink is the default scheme. */
  --bg: var(--ink-950);
  --bg-raised: var(--ink-900);
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --text: var(--parchment);
  --text-muted: var(--stone);
  --text-dim: var(--stone-dim);
  --rule: var(--ink-700);
  --rule-strong: var(--ink-600);
  --link: var(--gold);
  --link-hover: var(--gold-bright);
  --gold-text: var(--gold);
  --teal-text: var(--teal-bright);
  --code-bg: var(--ink-900);
  --code-border: var(--ink-700);
  --code-text: var(--parchment);
  --inline-code-bg: var(--ink-800);
  --header-bg: rgba(11, 10, 8, 0.92);
  --selection: rgba(201, 168, 76, 0.28);
  color-scheme: dark;
}

/* Paper: chosen with the toggle, or by the reader's OS preference when
   scripting is unavailable. Body text stays above WCAG AA in both. */
:root[data-theme="paper"] {
  --bg: var(--paper);
  --bg-raised: var(--paper-raised);
  --surface: var(--paper-surface);
  --surface-2: var(--paper-rule);
  --text: var(--ink-900);
  --text-muted: var(--paper-muted);
  --text-dim: var(--paper-dim);
  --rule: var(--paper-rule);
  --rule-strong: var(--paper-rule-strong);
  --link: var(--paper-gold-text);
  --link-hover: var(--paper-gold-hover);
  --gold-text: var(--paper-gold-text);
  --teal-text: var(--teal);
  --inline-code-bg: var(--paper-surface);
  --header-bg: rgba(239, 232, 217, 0.92);
  --selection: rgba(201, 168, 76, 0.35);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: var(--paper);
    --bg-raised: var(--paper-raised);
    --surface: var(--paper-surface);
    --surface-2: var(--paper-rule);
    --text: var(--ink-900);
    --text-muted: var(--paper-muted);
    --text-dim: var(--paper-dim);
    --rule: var(--paper-rule);
    --rule-strong: var(--paper-rule-strong);
    --link: var(--paper-gold-text);
    --link-hover: var(--paper-gold-hover);
    --gold-text: var(--paper-gold-text);
    --teal-text: var(--teal);
    --inline-code-bg: var(--paper-surface);
    --header-bg: rgba(239, 232, 217, 0.92);
    --selection: rgba(201, 168, 76, 0.35);
    color-scheme: light;
  }
}

/* ─── Base ───────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main { flex: 1 0 auto; }

::selection { background: var(--selection); color: var(--text); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
iframe { max-width: 100%; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

strong, b { font-weight: 600; }
em, i, cite { font-style: italic; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ─── Layout ─────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--gold);
  color: var(--ink-950);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Sections carry a hairline and a two-column marginalia grid on
   desktop: numeral + label in the margin, the argument in the body. */
.section {
  padding-block: var(--space-section);
  border-top: 1px solid var(--rule);
}
.section--raised { background: var(--bg-raised); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section__grid { display: grid; gap: 2rem; }
.section__marker { display: flex; align-items: baseline; gap: 1rem; }
.section__numeral {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-text);
  letter-spacing: 0.04em;
}
.section__label {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
@media (min-width: 64rem) {
  .section__grid {
    grid-template-columns: var(--margin-col) minmax(0, 1fr);
    column-gap: var(--margin-gap);
  }
  .section__marker {
    position: sticky;
    top: 2.5rem;
    align-self: start;
    flex-direction: column;
    gap: 0.75rem;
  }
  .section__numeral { font-size: var(--step-3); }
}
.section__body > * + * { margin-top: 2rem; }

.measure { max-width: var(--measure); }
.measure-wide { max-width: var(--measure-wide); }

/* ─── Type ───────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  text-decoration: none;
}
a.eyebrow:hover { color: var(--link-hover); }

.display {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--text);
}
.h1 { font-size: var(--step-4); }
.h2 { font-size: var(--step-3); line-height: 1.08; }
.h3 {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--text);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}

.muted { color: var(--text-muted); }
.small { font-family: var(--font-sans); font-size: var(--step--1); line-height: 1.5; }
.caption {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--text-dim);
}

/* The soul of the page. One line, set large, given room. */
.pull {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--text);
  padding-top: 2rem;
  border-top: 1px solid var(--gold-dim);
}

/* Epigraph — italic used with intent: only the quoted speak in it. */
.epigraph { max-width: var(--measure); }
.epigraph p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text);
  text-wrap: pretty;
  hanging-punctuation: first;
}
.epigraph figcaption, .epigraph cite {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ─── Ornaments ──────────────────────────────────────────────── */
/* Drawn in CSS and inline SVG. Gold stays the one loud colour; the
   teal appears in hairlines, hovers and the smallest marks. */

/* A rising sunburst over a diamond, hairlines to either side,
   diamond finials at the ends. Used for <hr> and section openers. */
.deco-rule, .prose hr {
  --rule-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='26' viewBox='0 0 60 26'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M37.52 12.26L42.2 10.55M36.13 9.86L39.96 6.64M34 8.07L36.5 3.74M31.39 7.12L32.26 2.2M28.61 7.12L27.74 2.2M26 8.07L23.5 3.74M23.87 9.86L20.04 6.64M22.48 12.26L17.8 10.55'/%3E%3C/g%3E%3Cpath d='M30 10l5 5-5 5-5-5z' fill='%23c9a84c'/%3E%3C/svg%3E");
  --rule-finial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l4 4-4 4-4-4z' fill='%23c9a84c'/%3E%3C/svg%3E");
  display: block;
  height: 26px;
  margin: 0;
  border: 0;
  background:
    var(--rule-ornament) center / 60px 26px no-repeat,
    var(--rule-finial) left center / 7px 7px no-repeat,
    var(--rule-finial) right center / 7px 7px no-repeat,
    linear-gradient(var(--gold-dim), var(--gold-dim)) left center / calc(50% - 26px) 1px no-repeat,
    linear-gradient(var(--gold-dim), var(--gold-dim)) right center / calc(50% - 26px) 1px no-repeat;
}

/* A hairline that ends in two diamonds; quieter than the sunburst. */
.deco-line {
  display: block;
  height: 8px;
  border: 0;
  margin: 0;
  background:
    var(--rule-finial, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l4 4-4 4-4-4z' fill='%23c9a84c'/%3E%3C/svg%3E")) left center / 7px 7px no-repeat,
    var(--rule-finial, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l4 4-4 4-4-4z' fill='%23c9a84c'/%3E%3C/svg%3E")) right center / 7px 7px no-repeat,
    linear-gradient(var(--gold-dim), var(--gold-dim)) center / calc(100% - 14px) 1px no-repeat;
}

/* Stepped-corner frame: a double hairline (border + outline) with a
   ziggurat bracket in each corner, the way the feature art is framed. */
.deco-frame {
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c'%3E%3Cpath d='M.5 24V.5H24'/%3E%3Cpath d='M5.5 24V10.5h5v-5H24' stroke-opacity='.6'/%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c'%3E%3Cg transform='rotate(90 12 12)'%3E%3Cpath d='M.5 24V.5H24'/%3E%3Cpath d='M5.5 24V10.5h5v-5H24' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c'%3E%3Cg transform='rotate(180 12 12)'%3E%3Cpath d='M.5 24V.5H24'/%3E%3Cpath d='M5.5 24V10.5h5v-5H24' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c'%3E%3Cg transform='rotate(270 12 12)'%3E%3Cpath d='M.5 24V.5H24'/%3E%3Cpath d='M5.5 24V10.5h5v-5H24' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  padding: 10px;
  border: 1px solid var(--gold-dim);
  outline: 1px solid var(--teal-dim);
  outline-offset: 4px;
  margin: 5px;
  border-radius: 0;
}
.deco-frame::before {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    var(--corner-tl) top left / 24px 24px no-repeat,
    var(--corner-tr) top right / 24px 24px no-repeat,
    var(--corner-br) bottom right / 24px 24px no-repeat,
    var(--corner-bl) bottom left / 24px 24px no-repeat;
}
.deco-frame > img, .deco-frame > a > img, .deco-frame > picture img { width: 100%; display: block; }
.deco-frame--quiet { outline: 0; padding: 6px; margin: 0; }
.deco-frame--quiet::before { inset: -1px; }

.diamond {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  vertical-align: middle;
  flex: none;
}

/* ─── Buttons & quiet links ──────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn--gold { background: var(--gold); color: var(--ink-950); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink-950); }
.btn--ghost { color: var(--text); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--gold); color: var(--link-hover); }
.btn--sm { padding: 0.65rem 1.1rem; }
.btn[disabled] { opacity: 0.6; cursor: default; }

.link-quiet {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.15rem;
  transition: color 160ms ease, border-color 160ms ease;
}
.link-quiet:hover { color: var(--link-hover); border-color: var(--gold); }

/* ─── Forms ──────────────────────────────────────────────────── */

.field { display: grid; gap: 0.45rem; }
.field label {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text);
}
.field input, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-faint);
}

/* Members subscribe form. Ghost flips data-members-form to
   loading / success / error on the form element. */
.subscribe { max-width: 30rem; }
.subscribe__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.subscribe__row input { flex: 1 1 14rem; }
.subscribe__row .btn { flex: none; }
.subscribe__msg { display: none; margin-top: 0.75rem; font-family: var(--font-sans); font-size: var(--step--1); }
.subscribe[data-members-form="success"] .subscribe__row { display: none; }
.subscribe[data-members-form="success"] .subscribe__msg--success { display: block; color: var(--teal-text); }
.subscribe[data-members-form="error"] .subscribe__msg--error { display: block; color: #c6706a; }
.subscribe[data-members-form="loading"] .btn { opacity: 0.6; pointer-events: none; }

/* ─── Header ─────────────────────────────────────────────────── */

.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex: none;
  min-width: 0;
}
.wordmark__text {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.wordmark__logo { height: 2.25rem; width: auto; }
.wordmark:hover .diamond { background: var(--gold-bright); }

.site-nav { display: none; }
.nav { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.nav__link:hover { color: var(--text); border-color: var(--gold); }
.nav__item--current .nav__link { color: var(--text); border-color: var(--teal-dim); }

.site-tools { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}
.tool:hover { color: var(--link-hover); background: var(--gold-faint); }
.tool svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tool--scheme .icon-sun { display: none; }
:root[data-theme="paper"] .tool--scheme .icon-sun { display: block; }
:root[data-theme="paper"] .tool--scheme .icon-moon { display: none; }
.site-tools .nav__link { display: none; }
.site-tools .btn { display: none; }

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 0;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle__bar {
  display: block;
  width: 22px; height: 1.5px;
  margin-inline: auto;
  background: var(--text);
  transition: transform 200ms ease, opacity 200ms ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-menu {
  border-top: 1px solid var(--rule);
  background: var(--bg-raised);
  padding-block: 1rem 2rem;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu .nav { flex-direction: column; gap: 0; }
.mobile-menu .nav__link {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--text);
  border-bottom: 1px solid var(--rule);
}
.mobile-menu__members { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.mobile-menu__members .btn { flex: 1 1 auto; }

@media (min-width: 64rem) {
  .site-nav { display: flex; align-items: center; gap: 2.25rem; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none !important; }
  .site-tools .nav__link { display: inline-block; margin-inline: 0.75rem 0.25rem; }
  .site-tools .btn { display: inline-flex; margin-left: 0.5rem; }
}

/* ─── Masthead (home) ────────────────────────────────────────── */

.masthead {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.masthead__rule { max-width: 22rem; margin-inline: auto; }
.masthead__title {
  margin-top: 2rem;
  font-size: var(--step-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
}
.masthead__lede { margin-top: 1rem; max-width: 34rem; margin-inline: auto; color: var(--text-muted); }
.masthead__cover {
  max-width: 60rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.masthead__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.masthead__subscribe { margin: 2.25rem auto 0; max-width: 28rem; text-align: left; }
.masthead__subscribe .caption { text-align: center; margin-bottom: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ─── Ledger of posts ────────────────────────────────────────── */

.ledger {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.ledger__row {
  display: grid;
  gap: 0.6rem 2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
  grid-template-areas: "margin" "body" "figure";
}
.ledger__margin { grid-area: margin; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; }
.ledger__body { grid-area: body; min-width: 0; }
.ledger__figure { grid-area: figure; }
.ledger__date {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.ledger__tag {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-text);
  text-decoration: none;
}
.ledger__tag:hover { color: var(--link-hover); }
.ledger__title {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--text);
}
.ledger__title a { text-decoration: none; }
.ledger__title a:hover { color: var(--link-hover); }
.ledger__excerpt { margin-top: 0.5rem; color: var(--text-muted); text-wrap: pretty; max-width: var(--measure); }
.ledger__meta { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.ledger__meta .diamond { width: 4px; height: 4px; }
.ledger__figure {
  display: block;
  width: min(100%, 22rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--gold-dim);
  padding: 4px;
  background: var(--bg-raised);
}
.ledger__figure img { width: 100%; height: 100%; object-fit: cover; }
.ledger__row:hover .ledger__figure { border-color: var(--gold); }
@media (min-width: 48rem) {
  .ledger__row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    grid-template-areas: "margin body";
    align-items: start;
  }
  .ledger__row--figure {
    grid-template-columns: 8.5rem minmax(0, 1fr) 11rem;
    grid-template-areas: "margin body figure";
  }
  .ledger__margin { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-top: 0.35rem; }
  .ledger__figure { width: 100%; margin-top: 0.3rem; }
}

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

.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.pagination__next { text-align: right; }
.pagination__page { text-align: center; letter-spacing: 0.14em; text-transform: uppercase; }

/* ─── Archive headers (tag, author, paged index) ─────────────── */

.archive-header { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.archive-header__title { margin-top: 0.85rem; }
.archive-header__desc { margin-top: 1rem; max-width: var(--measure); color: var(--text-muted); }
.archive-header__facts { margin-top: 1.5rem; }
.author-portrait { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; margin-bottom: 1.25rem; border: 1px solid var(--gold-dim); padding: 3px; }

/* Facts row — quiet and useful. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.25rem;
  margin: 0;
  padding: 1.1rem 0;
  border-block: 1px solid var(--rule);
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.facts li { display: flex; align-items: center; gap: 0.75rem; }
.facts li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex: none; }
.facts a { color: inherit; text-decoration-color: var(--rule-strong); }
.facts a:hover { color: var(--link-hover); }

/* ─── Article ────────────────────────────────────────────────── */

.article__grid {
  display: grid;
  gap: 2rem;
  padding-top: clamp(2.5rem, 6vw, 5rem);
}
.article__header { max-width: var(--measure-wide); }
.article__title { margin-top: 1rem; }
.article__lede { margin-top: 1.25rem; color: var(--text-muted); max-width: var(--measure); }

.article__meta { margin: 0; }
.article__meta dl { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 0; padding: 1rem 0; border-block: 1px solid var(--rule); }
.article__meta dt {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.article__meta dd { margin: 0.15rem 0 0; font-family: var(--font-sans); font-size: var(--step--1); color: var(--text-muted); }
.article__meta a { color: inherit; text-decoration-color: var(--rule-strong); }
.article__meta a:hover { color: var(--link-hover); }
.article__meta .tag-list { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; }

.article__figure { margin: 0; }
.article__figure figcaption { margin-top: 0.9rem; }
.article__figure img { width: 100%; }

.article__body { min-width: 0; }

@media (min-width: 64rem) {
  .article__grid {
    grid-template-columns: var(--margin-col) minmax(0, 1fr);
    column-gap: var(--margin-gap);
    row-gap: 3rem;
  }
  .article__header { grid-column: 2; grid-row: 1; }
  .article__meta { grid-column: 1; grid-row: 1; padding-top: 0.5rem; }
  .article__meta dl { flex-direction: column; gap: 1.1rem; border-top: 0; border-bottom: 0; padding: 0; }
  .article__figure { grid-column: 1 / -1; grid-row: 2; }
  .article__body { grid-column: 2; grid-row: 3; }
}

/* Body copy of posts and pages. */
.prose { counter-reset: h2; overflow-wrap: break-word; }
.prose a { overflow-wrap: anywhere; }
.prose > * { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose p { text-wrap: pretty; }
.prose a { color: var(--link); text-decoration-color: var(--gold-dim); }
.prose a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--font-heading);
  color: var(--text);
  text-wrap: balance;
  position: relative;
}
.prose h2 { font-size: var(--step-2); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin-top: 3rem; }
.prose h3 { font-size: var(--step-1); font-weight: 500; line-height: 1.25; margin-top: 2.25rem; }
.prose h4 { font-size: var(--step-0); font-weight: 600; margin-top: 2rem; }
.prose h5, .prose h6 { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2rem; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.85em; }
.prose h2 + h3 { margin-top: 1.25rem; }

/* Section numerals: gold Roman numerals in the margin on desktop,
   above the heading on narrow screens. */
.prose--numbered > h2 { counter-increment: h2; }
.prose--numbered > h2::before {
  content: counter(h2, upper-roman);
  display: block;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold-text);
  margin-bottom: 0.6rem;
}
@media (min-width: 64rem) {
  .prose--numbered > h2::before {
    position: absolute;
    left: calc(-1 * (var(--margin-col) + var(--margin-gap)));
    top: 0.05em;
    width: var(--margin-col);
    margin: 0;
    font-size: var(--step-3);
    text-align: left;
  }
}

.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li + li { margin-top: 0.4em; }
.prose li > ul, .prose li > ol { margin-top: 0.4em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: -1.2rem;
  top: 0.72em;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker { font-family: var(--font-sans); font-weight: 500; color: var(--gold-text); }

.prose hr { margin-block: 3rem; }
.prose hr + * { margin-top: 3rem; }

.prose img { height: auto; }
.prose figure { margin: 0; }
.prose figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--text-dim);
}
.prose figcaption a { color: var(--link); }

/* Inline code and code blocks. Code always sits on ink, in both
   schemes, so highlighting colours never change. */
.prose code, .prose kbd, .prose samp {
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-variant-ligatures: none;
}
.prose :not(pre) > code {
  padding: 0.08em 0.38em;
  background: var(--inline-code-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text);
  overflow-wrap: anywhere;
}
.prose kbd {
  padding: 0.05em 0.4em;
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  font-size: 0.8em;
}
.prose pre {
  margin: 0;
  padding: 1.15rem 1.3rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.6;
  tab-size: 2;
  scrollbar-color: var(--ink-600) transparent;
}
.prose pre code { font-size: inherit; background: none; border: 0; padding: 0; color: inherit; white-space: pre; }
.prose > pre, .prose > .code, .prose > .kg-code-card, .prose > table, .prose > .table-scroll { max-width: var(--measure-wide); }
.prose .code { position: relative; }
.prose .code[data-lang]::after {
  content: attr(data-lang);
  position: absolute;
  top: 0.55rem;
  right: 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-dim);
  pointer-events: none;
}
.prose .code[data-lang] pre { padding-top: 1.6rem; }
.prose .kg-code-card pre { margin: 0; }

/* Tables as ledgers. */
.prose .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html:not(.js) .prose table { display: block; overflow-x: auto; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  line-height: 1.45;
  text-align: left;
}
.prose th {
  padding: 0.7rem 1rem 0.6rem 0;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--rule-strong);
  vertical-align: bottom;
}
.prose td { padding: 0.65rem 1rem 0.65rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--text-muted); }
.prose td strong { color: var(--text); }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose tbody tr:hover td { background: var(--gold-faint); }

/* Tables pasted from GitHub or docs carry inline colours and borders (white rows on ink).
   Inline styles only lose to !important, so the theme's ledger reasserts itself here. */
.prose table[style], .prose table[style] :is(thead, tbody, tr, th, td, code) {
  background-color: transparent !important;
  color: inherit !important;
  border-color: var(--rule) !important;
}
.prose table[style] { display: table !important; width: 100% !important; max-width: 100% !important; }
.prose table[style] :is(th, td) { padding: 0.65rem 1rem 0.65rem 0 !important; border-width: 0 0 1px !important; border-style: solid !important; }
.prose table[style] th { color: var(--text-dim) !important; border-bottom-color: var(--rule-strong) !important; }
.prose table[style] td { color: var(--text-muted) !important; }
.prose table[style] tbody tr:hover td { background-color: var(--gold-faint) !important; }

/* Quotes: the ordinary blockquote is an epigraph; the alternate
   Koenig blockquote is the pull. */
.prose blockquote {
  margin-block: 2.25rem;
  padding: 0;
  border: 0;
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text);
  text-wrap: pretty;
  hanging-punctuation: first;
}
.prose blockquote p + p { margin-top: 0.75em; }
.prose blockquote cite, .prose blockquote footer {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.prose blockquote.kg-blockquote-alt {
  font-style: normal;
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  padding-top: 2rem;
  margin-block: 3rem;
  border-top: 1px solid var(--gold-dim);
  hanging-punctuation: none;
}

/* Download links written by hand as <p><strong><a href=".../content/files/…">.
   They get a ticket: notched ends, a gold hairline, a diamond. */
.prose p > strong:only-child > a[href*="/content/files/"],
.prose p > a[href*="/content/files/"]:only-child {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.4rem 0.85rem 1.2rem;
  border: 1px solid var(--gold-dim);
  background: var(--gold-faint);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px),
    radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px),
    radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px);
  mask-composite: intersect;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.prose p > strong:only-child > a[href*="/content/files/"]::before,
.prose p > a[href*="/content/files/"]:only-child::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.prose p > strong:only-child > a[href*="/content/files/"]:hover,
.prose p > a[href*="/content/files/"]:only-child:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--text);
}

/* ─── Koenig cards ───────────────────────────────────────────── */

.prose .kg-card { margin-block: 2.25rem; }
.prose > .kg-width-wide { max-width: none; width: 100%; }
.prose > .kg-width-full { max-width: none; width: 100%; }
@media (min-width: 64rem) {
  .prose > .kg-width-full {
    width: calc(100% + var(--margin-col) + var(--margin-gap));
    margin-left: calc(-1 * (var(--margin-col) + var(--margin-gap)));
  }
}

/* Images: a quiet frame on every plate; the stepped corners on wide
   and full plates where there is room for them. Square section art
   is centred at a smaller size (class added by the theme script). */
.prose .kg-image-card { text-align: left; }
.prose .kg-image-card img { width: 100%; }
.prose .kg-image-card > img,
.prose .kg-image-card > a > img {
  border: 1px solid var(--gold-dim);
  padding: 5px;
  background: var(--bg-raised);
}
.prose .kg-image-card--square { max-width: min(100%, 26rem); margin-inline: auto; }
.prose .kg-image-card--square figcaption { text-align: center; }
.prose .kg-image-card.kg-width-wide > img,
.prose .kg-image-card.kg-width-full > img,
.prose .kg-image-card.kg-width-wide > a > img,
.prose .kg-image-card.kg-width-full > a > img {
  padding: 10px;
  outline: 1px solid var(--teal-dim);
  outline-offset: 4px;
}
.prose .kg-image-card.kg-width-wide, .prose .kg-image-card.kg-width-full { position: relative; padding: 5px; }
.prose .kg-image-card.kg-width-wide::before, .prose .kg-image-card.kg-width-full::before {
  content: "";
  position: absolute;
  inset: 0;
  height: auto;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c'%3E%3Cpath d='M.5 24V.5H24'/%3E%3Cpath d='M5.5 24V10.5h5v-5H24' stroke-opacity='.6'/%3E%3C/svg%3E") top left / 24px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c'%3E%3Cg transform='rotate(90 12 12)'%3E%3Cpath d='M.5 24V.5H24'/%3E%3Cpath d='M5.5 24V10.5h5v-5H24' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E") top right / 24px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c'%3E%3Cg transform='rotate(180 12 12)'%3E%3Cpath d='M.5 24V.5H24'/%3E%3Cpath d='M5.5 24V10.5h5v-5H24' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E") bottom right / 24px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c'%3E%3Cg transform='rotate(270 12 12)'%3E%3Cpath d='M.5 24V.5H24'/%3E%3Cpath d='M5.5 24V10.5h5v-5H24' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E") bottom left / 24px 24px no-repeat;
}
.prose .kg-image-card.kg-card-hascaption.kg-width-wide::before,
.prose .kg-image-card.kg-card-hascaption.kg-width-full::before { display: none; }

/* Gallery (layout and lightbox-free JS come from Ghost's card assets). */
.prose .kg-gallery-card { }
.prose .kg-gallery-container { display: flex; flex-direction: column; gap: 6px; }
.prose .kg-gallery-row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; }
.prose .kg-gallery-image { flex: 1 1 0%; min-width: 0; }
.prose .kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }

/* Bookmark */
.prose .kg-bookmark-card { }
.prose .kg-bookmark-container {
  display: flex;
  min-height: 8rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  overflow: hidden;
  transition: border-color 160ms ease;
}
.prose .kg-bookmark-container:hover { border-color: var(--gold); color: inherit; }
.prose .kg-bookmark-content { flex: 1 1 auto; min-width: 0; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; }
.prose .kg-bookmark-title { font-family: var(--font-serif); font-size: var(--step-0); font-weight: 500; line-height: 1.3; color: var(--text); }
.prose .kg-bookmark-description {
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prose .kg-bookmark-metadata {
  margin-top: auto;
  padding-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.prose .kg-bookmark-icon { width: 1.1rem; height: 1.1rem; margin: 0; }
.prose .kg-bookmark-author { color: var(--text-muted); }
.prose .kg-bookmark-publisher::before { content: "·"; margin-right: 0.6rem; }
.prose .kg-bookmark-thumbnail { position: relative; flex: 0 0 14rem; min-height: 8rem; border-left: 1px solid var(--rule); }
.prose .kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) {
  .prose .kg-bookmark-container { flex-direction: column; }
  .prose .kg-bookmark-thumbnail { flex-basis: auto; order: -1; height: 10rem; border-left: 0; border-bottom: 1px solid var(--rule); }
}

/* Callout: tints on the page, never a pale box on ink. */
.prose .kg-callout-card {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.prose .kg-callout-emoji { flex: none; font-size: 1.25rem; line-height: 1.5; }
.prose .kg-callout-text { flex: 1 1 auto; min-width: 0; font-size: var(--step--1); font-family: var(--font-sans); line-height: 1.55; color: var(--text); }
.prose .kg-callout-text a { color: var(--link); }
.prose .kg-callout-card-grey, .prose .kg-callout-card-white { border-left-color: var(--rule-strong); }
.prose .kg-callout-card-blue, .prose .kg-callout-card-green { border-left-color: var(--teal-bright); background: var(--teal-faint); }
.prose .kg-callout-card-yellow, .prose .kg-callout-card-accent { border-left-color: var(--gold); background: var(--gold-faint); }
.prose .kg-callout-card-red { border-left-color: #b5534a; background: rgba(181, 83, 74, 0.12); }
.prose .kg-callout-card-pink { border-left-color: #b9647f; background: rgba(185, 100, 127, 0.12); }
.prose .kg-callout-card-purple { border-left-color: #7d6cae; background: rgba(125, 108, 174, 0.14); }

/* Toggle (Ghost's JS opens and closes it). */
.prose .kg-toggle-card {
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.prose .kg-toggle-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.prose .kg-toggle-heading-text { font-family: var(--font-serif); font-size: var(--step-0); font-weight: 500; line-height: 1.3; color: var(--text); margin: 0; }
.prose .kg-toggle-card-icon { color: var(--gold-text); background: none; border: 0; padding: 0; width: 1.5rem; height: 1.5rem; flex: none; cursor: pointer; }
.prose .kg-toggle-card-icon svg, .prose .kg-toggle-card-icon svg path { fill: currentColor; }
.prose .kg-toggle-content { margin-top: 0.85rem; color: var(--text-muted); font-size: var(--step--1); line-height: 1.55; }
.prose .kg-toggle-content > * + * { margin-top: 0.8em; }
.prose .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; }

/* Button */
.prose .kg-button-card { display: flex; }
.prose .kg-button-card.kg-align-left { justify-content: flex-start; }
.prose .kg-button-card.kg-align-center { justify-content: center; }
.prose .kg-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  color: var(--text);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.prose .kg-btn:hover { border-color: var(--gold); color: var(--link-hover); }
.prose .kg-btn-accent { background: var(--gold); border-color: var(--gold); color: var(--ink-950); }
.prose .kg-btn-accent:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink-950); }

/* Header card. Ghost's header styles are excluded, so the layout is ours:
   a framed plate, centred or split, with an optional image behind. */
.prose .kg-header-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.prose .kg-header-card.kg-size-small { min-height: 12rem; padding-block: clamp(1.75rem, 4vw, 3rem); }
.prose .kg-header-card.kg-size-large { min-height: 26rem; }
.prose .kg-header-card > picture,
.prose .kg-header-card > .kg-header-card-image { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.prose .kg-header-card > picture > .kg-header-card-image { width: 100%; height: 100%; object-fit: cover; }
.prose .kg-header-card.kg-style-image::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(11, 10, 8, 0.45); }
.prose .kg-header-card-content { position: relative; z-index: 1; width: 100%; max-width: 40rem; }
.prose .kg-header-card-text { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.prose .kg-header-card-text.kg-align-left { align-items: flex-start; text-align: left; }
.prose .kg-header-card .kg-header-card-heading,
.prose .kg-header-card h2.kg-header-card-header { font-size: var(--step-3); margin: 0; max-width: none; }
.prose .kg-header-card .kg-header-card-subheading,
.prose .kg-header-card h3.kg-header-card-subheader { font-size: var(--step-0); line-height: 1.5; margin: 0; max-width: none; }
.prose .kg-header-card .kg-header-card-button, .prose .kg-header-card a.kg-header-card-button {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
}
.prose .kg-header-card.kg-layout-split { padding: 0; align-items: stretch; text-align: left; }
.prose .kg-header-card.kg-layout-split > picture { position: relative; inset: auto; flex: 1 1 50%; min-height: 16rem; }
.prose .kg-header-card.kg-layout-split .kg-header-card-content { flex: 1 1 50%; padding: clamp(2rem, 5vw, 3.5rem); align-self: center; }
.prose .kg-header-card.kg-layout-split .kg-header-card-text { align-items: flex-start; }
.prose .kg-header-card.kg-layout-split.kg-swapped { flex-direction: row-reverse; }
@media (max-width: 48rem) {
  .prose .kg-header-card.kg-layout-split, .prose .kg-header-card.kg-layout-split.kg-swapped { flex-direction: column; }
}
.prose .kg-header-card h2.kg-header-card-heading,
.prose .kg-header-card h2.kg-header-card-header {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.08 !important;
}
.prose .kg-header-card .kg-header-card-subheading,
.prose .kg-header-card h3.kg-header-card-subheader { font-family: var(--font-serif) !important; font-weight: 400 !important; }
.prose .kg-header-card.kg-style-dark { background: var(--ink-900) !important; }
.prose .kg-header-card.kg-style-light { background: var(--paper) !important; }
.prose .kg-header-card.kg-style-accent { background: var(--gold) !important; }
.prose .kg-header-card.kg-style-accent h2, .prose .kg-header-card.kg-style-accent p, .prose .kg-header-card.kg-style-accent h3 { color: var(--ink-950) !important; }
.prose .kg-header-card.kg-style-light h2, .prose .kg-header-card.kg-style-light p, .prose .kg-header-card.kg-style-light h3 { color: var(--ink-900) !important; }
.prose .kg-header-card .kg-header-card-button, .prose .kg-header-card a.kg-header-card-button {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  background: var(--gold) !important;
  color: var(--ink-950) !important;
}
.prose .kg-header-card.kg-style-accent a.kg-header-card-button { background: var(--ink-950) !important; color: var(--parchment) !important; }

/* Product */
.prose .kg-product-card { display: flex; }
.prose .kg-product-card-container {
  display: grid;
  gap: 0.85rem;
  width: 100%;
  max-width: 100%;
  padding: 1.25rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.prose .kg-product-card-image { width: 100%; height: auto; }
.prose .kg-product-card-title-container { margin-top: 0.25rem; }
.prose .kg-product-card-title { font-family: var(--font-serif); font-size: var(--step-1); font-weight: 500; line-height: 1.25; margin: 0; }
.prose .kg-product-card-rating { display: flex; gap: 0.15rem; }
.prose .kg-product-card-rating-star svg { width: 1rem; height: 1rem; fill: var(--rule-strong); }
.prose .kg-product-card-rating-active svg { fill: var(--gold); }
.prose .kg-product-card-description { color: var(--text-muted); font-size: var(--step--1); font-family: var(--font-sans); line-height: 1.5; }
.prose .kg-product-card-button {
  display: inline-flex;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  color: var(--text);
}
.prose .kg-product-card-btn-accent { background: var(--gold); border-color: var(--gold); color: var(--ink-950); }
.prose .kg-product-card-btn-accent:hover { background: var(--gold-bright); color: var(--ink-950); }

/* File */
.prose .kg-file-card { }
.prose .kg-file-card-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease;
}
.prose .kg-file-card-container:hover { border-color: var(--gold); color: inherit; }
.prose .kg-file-card-contents { min-width: 0; }
.prose .kg-file-card-title { font-family: var(--font-serif); font-size: var(--step-0); font-weight: 500; line-height: 1.3; }
.prose .kg-file-card-caption { margin-top: 0.25rem; font-family: var(--font-sans); font-size: var(--step--1); color: var(--text-muted); }
.prose .kg-file-card-metadata { margin-top: 0.5rem; display: flex; gap: 0.75rem; font-family: var(--font-sans); font-size: var(--step--2); letter-spacing: 0.06em; color: var(--text-dim); }
.prose .kg-file-card-filename { font-weight: 500; overflow-wrap: anywhere; }
.prose .kg-file-card-filesize::before { content: "·"; margin-right: 0.75rem; }
.prose .kg-file-card-icon { flex: none; width: 2.5rem; height: 2.5rem; color: var(--gold-text); }
.prose .kg-file-card-icon svg { width: 100%; height: 100%; }
.prose .kg-file-card-medium .kg-file-card-caption, .prose .kg-file-card-small .kg-file-card-caption { display: none; }

/* Audio (player logic from Ghost's card assets). */
.prose .kg-audio-card {
  background: var(--bg-raised) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px var(--rule-strong) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-sans) !important;
}
.prose .kg-audio-thumbnail.placeholder { background: var(--teal-deep) !important; }
.prose .kg-audio-thumbnail.placeholder svg { fill: var(--gold) !important; }
.prose .kg-audio-title { font-family: var(--font-serif) !important; font-weight: 500 !important; color: var(--text) !important; }
.prose .kg-audio-time { color: var(--text-dim) !important; }
.prose .kg-audio-player-container input[type=range]::-webkit-slider-runnable-track { background: var(--rule-strong) !important; }
.prose .kg-audio-player-container input[type=range]::-webkit-slider-thumb { background: var(--gold) !important; }
.prose .kg-audio-player-container input[type=range]::-moz-range-thumb { background: var(--gold) !important; }

/* Video (player logic from Ghost's card assets). */
.prose .kg-video-card .kg-video-container { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); }
.prose .kg-video-card video { display: block; width: 100%; }
.prose .kg-video-large-play-icon { background: var(--gold) !important; }
.prose .kg-video-large-play-icon svg { fill: var(--ink-950) !important; }
.prose .kg-video-player-container input[type=range]::-webkit-slider-thumb { background: var(--gold) !important; }

/* Embed */
.prose .kg-embed-card { }
.prose .kg-embed-card iframe { width: 100%; max-width: 100%; border: 0; }
.prose .kg-embed-card iframe[src*="youtube"], .prose .kg-embed-card iframe[src*="youtu.be"], .prose .kg-embed-card iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }

/* Code card (captioned code block). */
.prose .kg-code-card { }
.prose .kg-code-card figcaption { margin-top: 0.75rem; }

/* Signup card (layout from Ghost's card assets; type and colour ours). */
.prose .kg-signup-card { border-radius: var(--radius) !important; border: 1px solid var(--rule-strong); }
.prose .kg-signup-card.kg-style-dark { background: var(--ink-900) !important; }
.prose .kg-signup-card.kg-style-light { background: var(--paper) !important; }
.prose .kg-signup-card.kg-style-accent { background: var(--gold) !important; }
.prose .kg-signup-card h2.kg-signup-card-heading { font-family: var(--font-serif) !important; font-weight: 400 !important; letter-spacing: -0.015em !important; }
.prose .kg-signup-card .kg-signup-card-subheading { font-family: var(--font-serif) !important; }
.prose .kg-signup-card.kg-style-accent h2, .prose .kg-signup-card.kg-style-accent p, .prose .kg-signup-card.kg-style-accent .kg-signup-card-disclaimer { color: var(--ink-950) !important; }
.prose .kg-signup-card.kg-style-light h2, .prose .kg-signup-card.kg-style-light p { color: var(--ink-900) !important; }
.prose .kg-signup-card .kg-signup-card-fields { border: 1px solid var(--rule-strong) !important; border-radius: var(--radius) !important; background: var(--bg) !important; }
.prose .kg-signup-card .kg-signup-card-input {
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
}
.prose .kg-signup-card .kg-signup-card-button {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  background: var(--gold) !important;
  color: var(--ink-950) !important;
}
.prose .kg-signup-card.kg-style-accent .kg-signup-card-button { background: var(--ink-950) !important; color: var(--parchment) !important; }
.prose .kg-signup-card .kg-signup-card-disclaimer { font-family: var(--font-sans) !important; color: var(--text-dim) !important; }
.prose .kg-signup-card .kg-signup-card-success { color: var(--teal-text) !important; font-family: var(--font-sans) !important; }
.prose .kg-signup-card .kg-signup-card-error { color: #c6706a !important; font-family: var(--font-sans) !important; }

/* Call to action card (layout from Ghost's card assets). */
.prose .kg-cta-card { border-radius: var(--radius) !important; font-family: var(--font-sans); }
.prose .kg-cta-card.kg-cta-bg-grey, .prose .kg-cta-card.kg-cta-bg-white { background: var(--bg-raised) !important; }
.prose .kg-cta-card.kg-cta-bg-blue, .prose .kg-cta-card.kg-cta-bg-green { background: var(--teal-faint) !important; }
.prose .kg-cta-card.kg-cta-bg-yellow { background: var(--gold-faint) !important; }
.prose .kg-cta-card.kg-cta-bg-red { background: rgba(181, 83, 74, 0.12) !important; }
.prose .kg-cta-card.kg-cta-bg-pink { background: rgba(185, 100, 127, 0.12) !important; }
.prose .kg-cta-card.kg-cta-bg-purple { background: rgba(125, 108, 174, 0.14) !important; }
.prose .kg-cta-card:not(.kg-cta-bg-none) { border: 1px solid var(--rule-strong); }
.prose .kg-cta-card .kg-cta-text, .prose .kg-cta-card .kg-cta-text p { color: var(--text) !important; font-family: var(--font-serif) !important; font-size: var(--step-0) !important; line-height: 1.5 !important; }
.prose .kg-cta-card .kg-cta-text a { color: var(--link) !important; }
.prose .kg-cta-card .kg-cta-sponsor-label, .prose .kg-cta-card .kg-cta-sponsor-label span { color: var(--text-dim) !important; font-family: var(--font-sans) !important; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--step--2) !important; }
.prose .kg-cta-card .kg-cta-sponsor-label-wrapper { border-color: var(--rule) !important; }
.prose .kg-cta-card a.kg-cta-button {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  background: var(--gold) !important;
  color: var(--ink-950) !important;
}
.prose .kg-cta-card a.kg-cta-button:hover { background: var(--gold-bright) !important; }
.prose .kg-cta-card .kg-cta-image-container img { border: 1px solid var(--gold-dim); padding: 4px; }

/* Collection (post list inside a post). */
.prose .kg-collection-card { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.prose .kg-collection-card-title { font-family: var(--font-sans); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.25rem; }
.prose .kg-collection-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.75rem 1.5rem; }
.prose .kg-collection-card-list { display: grid; gap: 1.25rem; }
.prose .kg-collection-card-post { display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none; color: inherit; }
.prose .kg-collection-card-list .kg-collection-card-post { flex-direction: row; gap: 1.25rem; align-items: flex-start; }
.prose .kg-collection-card-img, .prose .kg-collection-card-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.prose .kg-collection-card-list .kg-collection-card-img { flex: 0 0 10rem; }
.prose .kg-collection-card-post-title { font-family: var(--font-serif); font-size: var(--step-0); font-weight: 500; line-height: 1.3; color: var(--text); }
.prose .kg-collection-card-post:hover .kg-collection-card-post-title { color: var(--link-hover); }
.prose .kg-collection-card-post-excerpt { font-family: var(--font-sans); font-size: var(--step--1); color: var(--text-muted); line-height: 1.45; }
.prose .kg-collection-card-post-meta { display: flex; gap: 0.75rem; font-family: var(--font-sans); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.prose .kg-collection-card-post-meta p { margin: 0; }

/* NFT and Transistor embeds: framed, quiet. */
.prose .kg-nft-card-container { display: block; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; background: var(--bg-raised); }
.prose .kg-nft-image { width: 100%; }
.prose .kg-nft-metadata { padding: 1rem 1.25rem; font-family: var(--font-sans); font-size: var(--step--1); }
.prose .kg-nft-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.prose .kg-nft-title { font-family: var(--font-serif); font-size: var(--step-0); font-weight: 500; margin: 0; }
.prose .kg-nft-opensea-logo { width: 1.5rem; height: 1.5rem; }
.prose .kg-nft-creator { margin-top: 0.35rem; color: var(--text-dim); }
.prose .kg-nft-description { margin-top: 0.6rem; color: var(--text-muted); }
.prose .kg-transistor-card { display: flex; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--bg-raised); text-decoration: none; color: inherit; font-family: var(--font-sans); }
.prose .kg-transistor-icon { flex: none; width: 3rem; height: 3rem; }
.prose .kg-transistor-title { font-family: var(--font-serif); font-size: var(--step-0); font-weight: 500; }
.prose .kg-transistor-description { color: var(--text-muted); font-size: var(--step--1); }

/* Paywall notice rendered by Ghost for gated posts. */
.gh-post-upgrade-cta {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  text-align: center;
}
.gh-post-upgrade-cta h2 { font-family: var(--font-serif); font-size: var(--step-1); font-weight: 500; }
.gh-post-upgrade-cta p { margin-top: 0.75rem; color: var(--text-muted); }
.gh-post-upgrade-cta .gh-btn, .gh-post-upgrade-cta a[data-portal] {
  display: inline-flex;
  margin-top: 1.25rem;
  padding: 0.9rem 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink-950);
}

/* ─── Article footer ─────────────────────────────────────────── */

.article__footer { margin-top: var(--space-section); }
.article__footer .section { padding-block: clamp(2.5rem, 5vw, 4rem); }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; list-style: none; margin: 0; padding: 0; }
.tag-list a {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-text);
  text-decoration: none;
  border-bottom: 1px solid var(--teal-dim);
  padding-bottom: 0.1rem;
}
.tag-list a:hover { color: var(--link-hover); border-color: var(--gold); }

.author-card { display: flex; gap: 1.25rem; align-items: flex-start; max-width: var(--measure-wide); }
.author-card__portrait { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--gold-dim); padding: 3px; }
.author-card__name { font-family: var(--font-serif); font-size: var(--step-1); font-weight: 500; line-height: 1.25; }
.author-card__name a { text-decoration: none; }
.author-card__name a:hover { color: var(--link-hover); }
.author-card__bio { margin-top: 0.4rem; color: var(--text-muted); text-wrap: pretty; }
.author-card__links { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 1.25rem; }

.adjacent {
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.adjacent__link { display: block; padding: 1.35rem 0; text-decoration: none; color: inherit; min-width: 0; }
.adjacent__link + .adjacent__link { border-top: 1px solid var(--rule); }
.adjacent__label { display: block; margin-bottom: 0.4rem; letter-spacing: 0.14em; text-transform: uppercase; }
.adjacent__title { font-family: var(--font-serif); font-size: var(--step-1); font-weight: 500; line-height: 1.25; text-wrap: balance; }
.adjacent__link:hover .adjacent__title { color: var(--link-hover); }
@media (min-width: 48rem) {
  .adjacent { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .adjacent__link + .adjacent__link { border-top: 0; border-left: 1px solid var(--rule); padding-left: 3rem; margin-left: -1.5rem; }
  .adjacent__link--next { text-align: right; }
}

.cta {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  max-width: var(--measure-wide);
}
.cta__title { font-family: var(--font-serif); font-size: var(--step-2); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.cta__text { margin-top: 0.75rem; color: var(--text-muted); text-wrap: pretty; }
.cta .subscribe { margin-top: 1.5rem; }

.article__comments { margin-top: 3rem; max-width: var(--measure-wide); }
/* The comments embed's document has no colour scheme of its own. When the
   embedding element's scheme differs from the embedded document's, browsers
   paint the frame on an opaque canvas, which on ink shows as a white slab.
   Matching the frame element to the document keeps it transparent. */
.article__comments iframe { color-scheme: light; }

/* ─── Error pages ────────────────────────────────────────────── */

.error-page { padding-block: clamp(4rem, 12vw, 9rem); }
.error-page .section__numeral { font-size: var(--step-4); }
.error-page__title { margin-top: 0.5rem; }
.error-page__text { margin-top: 1rem; max-width: var(--measure); }
.error-page .btn { margin-top: 2rem; }
.error-page__stack { margin-top: 2rem; max-width: var(--measure-wide); }

/* ─── Footer ─────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 4rem 2.5rem;
  background: var(--bg);
  margin-top: var(--space-section);
}
.site-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4rem; }
}
.site-footer__line { margin-top: 1.25rem; max-width: 28rem; text-wrap: pretty; }
.site-footer__subscribe .caption { margin-bottom: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.site-footer__base .nav { gap: 1.5rem; }
.site-footer__base .nav__link, .site-footer__base .caption a {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-decoration: none;
  border: 0;
  padding: 0;
}
.site-footer__base .nav__link:hover, .site-footer__base .caption a:hover { color: var(--link-hover); }

/* ─── Syntax highlighting (Prism, self-hosted) ───────────────── */
/* Four voices only: parchment for code, stone for punctuation and
   comments, gold for keywords and tags, teal for strings. */

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--stone-dim); }
.token.punctuation { color: var(--stone); }
.token.operator, .token.entity, .token.url { color: var(--stone); }
.token.keyword, .token.tag, .token.atrule, .token.important, .token.selector { color: var(--gold); }
.token.string, .token.char, .token.attr-value, .token.inserted, .token.regex, .token.template-string { color: var(--teal-code); }
.token.number, .token.boolean, .token.constant, .token.symbol { color: var(--gold-bright); }
.token.function, .token.class-name, .token.builtin { color: var(--parchment); font-weight: 600; }
.token.property, .token.attr-name, .token.variable, .token.parameter { color: var(--parchment); }
.token.deleted { color: #c6706a; }
.token.important, .token.bold { font-weight: 600; }
.language-bash .token.function { font-weight: 400; color: var(--gold-bright); }
.language-diff .token.inserted { color: var(--teal-code); }

/* ─── Print ──────────────────────────────────────────────────── */

@media print {
  :root { --bg: #fff; --text: #111; --text-muted: #333; --text-dim: #555; --rule: #ccc; --rule-strong: #999; --link: #111; }
  .site-header, .site-footer, .article__footer, .skip-link, .tool { display: none !important; }
  .prose pre { white-space: pre-wrap; border: 1px solid #999; }
}