/* =========================================================================
   Margens — editorial stylesheet
   A calm, classic reading environment. Type-first, restrained, authorial.
   Sections: 1) reset  2) tokens  3) base type  4) layout  5) header/footer
             6) home & listings  7) article & prose  8) components
             9) code  10) responsive & dark
   ========================================================================= */

/* ---------- 1. Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  font-size: calc(100% * var(--reading-scale, 1)); }
body { min-height: 100vh; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

/* ---------- 2. Design tokens ------------------------------------------- */
:root {
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* "Bibliotheca Elegans" palette — parchment surfaces, warm charcoal ink,
     burnished terracotta accent. Ported from the Stitch design system. */
  --paper:   #faf8f5;   /* parchment base — page substrate */
  --surface: #f4efea;   /* parchment surface — cards, panels */
  --ink:     #1a1816;   /* ink charcoal — titles */
  --ink-soft:#54433e;   /* warm brown — body copy */
  --muted:   #756b60;   /* sepia muted — metadata */
  --faint:   #a89c92;
  --rule:    #e5ddd3;   /* parchment border — hairlines */
  --rule-strong: #d9c2ba;
  --accent:  #4d84ad;   /* muted parchment blue */
  --accent-ink: #35617f; /* deep slate blue */
  --highlight: #e3edf4;  /* pale blue wash */
  --olive-subtle: #505C4A; /* muted olive — meta accents */
  --linen-warm: #efe8df; /* warm linen — image frames */
  --chart-b: #8a6a4a; /* second data series — warm bronze against the blue */
  --chart-c: #5c7a52; /* third series — muted sage against blue and bronze */
  --sepia-tint: #f7f2e6; /* light sepia — post boxes on the home */

  --measure: clamp(40rem, 32rem + 16vw, 50rem); /* fluid reading column */
  --post-measure: 43rem;   /* article column — tighter than --measure */
  --wide: 72rem;           /* header / grids */
  --gutter: clamp(1.1rem, 5vw, 2.5rem);

  --step--1: clamp(0.96rem, 0.92rem + 0.2vw, 1.05rem);
  --step-0:  clamp(1.2rem, 1.14rem + 0.3vw, 1.4rem);
  --step-1:  clamp(1.38rem, 1.28rem + 0.5vw, 1.7rem);
  --step-2:  clamp(1.65rem, 1.44rem + 1.05vw, 2.2rem);
  --step-3:  clamp(2.0rem, 1.62rem + 1.9vw, 3rem);
  --step-4:  clamp(2.45rem, 1.86rem + 2.95vw, 4.1rem);

  --leading: 1.72;
  --leading-tight: 1.18;

  --radius: 3px;
  --shadow: 0 1px 2px rgba(26, 24, 22, 0.06), 0 10px 28px rgba(26, 24, 22, 0.09);
}

/* ---------- 3. Base typography ----------------------------------------- */
body {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: oldstyle-nums proportional-nums;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 40;
}

p, ul, ol, blockquote, figure, pre, table { margin-block: 0; }

a { color: var(--accent); text-decoration-thickness: 1px;
  text-underline-offset: 0.16em; text-decoration-color: var(--rule-strong); }
a:hover { text-decoration-color: currentColor; }

::selection { background: var(--highlight); color: var(--ink); }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink);
  color: var(--paper); padding: 0.6rem 1rem; z-index: 10; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- 4. Layout --------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.site-main { flex: 1 0 auto; padding-block: clamp(2.5rem, 6vw, 5rem); }
.dot { color: var(--faint); margin-inline: 0.5ch; }

/* ---------- 5. Header & footer ----------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--rule-strong); position: relative;
  background: linear-gradient(180deg, #fff, var(--surface));
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--accent-ink) 18%, var(--accent) 50%, var(--accent-ink) 82%, transparent);
}
.site-header::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--rule); opacity: 0.7;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: clamp(0.9rem, 2.2vw, 1.35rem); flex-wrap: wrap;
}
.site-header__brand { text-decoration: none; display: flex; align-items: center; gap: 0.8rem; }
.site-header__logo {
  /* Horizontal wordmark: fixed height, intrinsic ratio drives the width. */
  flex: none; width: auto; height: 2.5rem; display: block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header__brand:hover .site-header__logo { transform: translateY(-1px); }
/* Hamburger toggle — hidden on desktop */
.site-header__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 2.4rem; height: 2.4rem; padding: 0; position: relative;
}
.site-header__burger, .site-header__burger::before, .site-header__burger::after {
  content: ""; position: absolute; left: 50%; width: 1.3rem; height: 1.5px;
  background: var(--ink); transform: translateX(-50%); transition: transform 0.28s ease, opacity 0.2s ease;
}
.site-header__burger { top: 50%; transform: translate(-50%, -50%); }
.site-header__burger::before { top: -0.42rem; }
.site-header__burger::after { top: 0.42rem; }
.nav-open .site-header__burger { background: transparent; }
.nav-open .site-header__burger::before { transform: translateX(-50%) translateY(0.42rem) rotate(45deg); }
.nav-open .site-header__burger::after { transform: translateX(-50%) translateY(-0.42rem) rotate(-45deg); }
/* Post pages: flush cover with header */
.is-post .site-header { border-bottom: none; }
.is-post .site-header::after { display: none; }
.is-post .site-main { padding-block-start: 0; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.site-nav ul { display: flex; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
.site-tools {
  display: flex; align-items: center; gap: 1rem;
  padding-left: clamp(0.9rem, 2vw, 1.4rem); margin-left: 0.2rem;
  border-left: 1px solid var(--rule);
}
.tool {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); transition: color 0.2s ease, transform 0.2s ease;
}
.tool:hover { color: var(--accent); }
.tool:active { transform: scale(0.92); }
.tool--type .tool__aa {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -0.02em; line-height: 1;
}
.tool--type .tool__aa::first-letter { font-size: 1.18em; }
.tool--theme .tool__sun { display: none; }
.tool--theme .tool__moon { display: block; }
[data-theme="dark"] .tool--theme .tool__sun { display: block; }
[data-theme="dark"] .tool--theme .tool__moon { display: none; }
.site-nav a {
  font-family: var(--font-sans); text-decoration: none; color: var(--ink-soft);
  font-size: 0.76rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase;
  padding-block: 0.35rem; position: relative;
  transition: color 0.22s ease;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav a:hover { color: var(--accent); }
.site-nav a:hover::after { transform: scaleX(1); }

.site-footer { background: #f5f3f0; border-top: 3px double var(--rule-strong);
  margin-top: clamp(3rem, 8vw, 6rem); }
.site-footer__top {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2.5rem, 6vw, 4rem);
}
.site-footer__brand-col { max-width: 22rem; }
.site-footer__brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; margin-bottom: 0.9rem;
}
.site-footer__logo { width: 3.1rem; height: 3.1rem; border-radius: 8px; object-fit: contain; }
.site-footer__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--step-1); color: var(--ink); letter-spacing: -0.03em; }
.site-footer__desc { font-family: var(--font-serif); font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); }
.site-footer__col { display: flex; flex-direction: column; gap: 0.55rem; align-content: start; }
.site-footer__col a { font-family: var(--font-sans); text-decoration: none; font-size: 0.82rem; color: var(--ink-soft); }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__base { margin-top: 0; padding-block: 1.2rem; border-top: 1px solid var(--rule); }

/* ---------- 6. Caps, eyebrows, home & listings ------------------------- */

/* Sans, tracked, uppercase micro-labels (Increment's t-Caps). */
.eyebrow, .eyebrow-label {
  font-family: var(--font-sans); text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 500; font-size: 0.72rem; color: var(--muted);
}
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5ch; margin-bottom: 0.7rem; }
.eyebrow--center { justify-content: center; }
.eyebrow-sep { color: var(--faint); }
.eyebrow-theme { color: var(--tc, var(--accent)); text-decoration: none; }
.eyebrow-theme:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.eyebrow-label { display: block; color: var(--faint); margin-bottom: 1.4rem; }
.eyebrow-label--section { padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); margin-bottom: 0; }

/* Arrow links (Increment's u-Arrow). */
.u-arrow { font-family: var(--font-sans); text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 500; font-size: 0.76rem; text-decoration: none;
  color: var(--accent); display: inline-flex; align-items: center; gap: 0.5ch; }
.u-arrow::after { content: "→"; transition: transform 0.2s ease; }
.u-arrow:hover::after { transform: translateX(3px); }

/* Home masthead — left-aligned lede, no floating centred column. */
.hero { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.hero .prose { max-width: 44rem; margin-inline: 0; }
.hero__prose :is(h1, h2) { font-size: var(--step-3); font-weight: 400;
  font-variation-settings: "opsz" 72; margin-bottom: 0.3em; letter-spacing: -0.02em; }
.hero__prose p { font-size: var(--step-1); color: var(--ink-soft); }

/* Home hero — Gazeta Literária style */
.home-hero {
  margin-bottom: 0;
}
/* Section header bar */
.home-hero__bar {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.7rem; margin-bottom: 2rem;
}
.home-hero__bar-left { display: flex; align-items: center; gap: 0.6rem; }
.home-hero__bar-tag {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--accent);
}
.home-hero__bar-sep { color: var(--rule-strong); }
.home-hero__bar-label {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink);
}
.home-hero__bar-right {
  font-family: var(--font-serif); font-style: italic; font-size: 0.82rem;
  color: var(--muted);
}
/* Two-column grid */
.home-hero__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: stretch;
}
/* Text column */
.home-hero__text { display: flex; flex-direction: column; justify-content: space-between; }
.home-hero__meta {
  display: flex; align-items: center; gap: 0.6rem;
}
.home-hero__cat {
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
  background: rgba(77, 132, 173, 0.1); padding: 0.25rem 0.65rem; border-radius: 3px;
}
.home-hero__meta-sep { color: var(--rule-strong); }
.home-hero__reading {
  font-family: var(--font-serif); font-size: 0.82rem; font-style: italic; color: var(--muted);
}
.home-hero__title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.5vw, 3.25rem);
  letter-spacing: -0.015em; line-height: 1.12; margin: 0;
}
.home-hero__title a { color: var(--ink); text-decoration: none; }
.home-hero__title a em {
  font-style: italic; color: var(--accent); font-weight: 400;
}
.home-hero__title a:hover { color: var(--accent-ink); }
.home-hero__excerpt {
  font-family: var(--font-serif); color: var(--ink-soft); font-size: var(--step-0);
  line-height: 1.7; margin: 0;
}
/* Footer row: CTA + date */
.home-hero__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 0.5rem;
}
.home-hero__cta {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; text-decoration: none;
  color: var(--ink); display: inline-flex; align-items: center; gap: 0.5ch;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.home-hero__cta:hover { color: var(--accent); border-color: var(--accent); }
.home-hero__arrow { font-size: 1em; transition: transform 0.2s ease; }
.home-hero__cta:hover .home-hero__arrow { transform: translateX(3px); }
.home-hero__date {
  font-family: var(--font-sans); font-size: 0.7rem; font-style: italic; color: var(--muted);
  letter-spacing: 0.04em;
}
.home-hero__art {
  display: block; position: relative; overflow: hidden;
  border-radius: 2px; text-decoration: none;
}
.home-hero__art img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  filter: contrast(1.03) brightness(0.98);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-hero__art:hover img { transform: scale(1.015); }

/* Home category sections */
.home-section { margin-bottom: clamp(2.8rem, 6vw, 4.5rem); }
.home-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.9rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.home-section__head-left { display: flex; align-items: baseline; gap: 0.9rem; }
.home-section__title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-2);
  letter-spacing: -0.02em; color: var(--ink);
  font-variation-settings: "opsz" 60;
}
.home-section__kicker {
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.home-section__link {
  font-family: var(--font-sans); font-size: 0.76rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  color: var(--accent); display: inline-flex; align-items: center; gap: 0.4ch;
}
.home-section__arrow { font-size: 1em; transition: transform 0.2s ease; }
.home-section__link:hover .home-section__arrow { transform: translateX(3px); }

/* Divider between hero and sections */
.home-divider {
  display: flex; align-items: center; gap: 1rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto;
}
.home-divider__rule { flex: 1; height: 1px; background: var(--rule); }
.home-divider__glyph {
  font-family: var(--font-display); font-size: var(--step-0);
  color: var(--muted); opacity: 0.45; letter-spacing: 0.3em;
}

/* Home card grid — Stitch-style article cards */
.home-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 2.5vw, 2rem);
}
.home-card {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--sepia-tint); border-radius: var(--radius);
  padding: clamp(0.9rem, 1.5vw, 1.2rem);
  box-shadow: 0 1px 3px rgba(26, 24, 22, 0.06);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.home-card:hover {
  box-shadow: 0 6px 20px rgba(26, 24, 22, 0.1);
  transform: translateY(-2px);
}
.home-card__art-link {
  display: block; overflow: hidden; border-radius: var(--radius);
  margin-bottom: 0.9rem; text-decoration: none;
}
.home-card__art-link img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-card:hover .home-card__art-link img { transform: scale(1.04); }
.home-card__meta-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--olive-subtle);
  margin-bottom: 0.4rem;
}
.home-card__title {
  font-family: var(--font-serif); font-weight: 500; font-size: 1.22rem;
  letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 0.45em;
}
.home-card__title a { color: var(--ink); text-decoration: none; }
.home-card__title a:hover { color: var(--accent); }
.home-card__excerpt {
  font-family: var(--font-serif); color: var(--ink-soft); font-size: 0.95rem;
  line-height: 1.6; margin-bottom: 0.5rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.home-card__read {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  color: var(--accent); margin-top: auto; padding-top: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.4ch;
  transition: text-decoration 0.2s ease;
}
.home-card__read:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Section number in the head */
.home-section__num {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.home-section__head { border-bottom-color: var(--rule-strong); }

/* ---- Layout: editorial list (hairline rows) ---- */
.home-rows { display: flex; flex-direction: column; }
.home-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1.2rem; padding: 1.6rem 0.5rem; border-bottom: 1px solid var(--rule);
  transition: background 0.25s ease;
}
.home-row:first-child { border-top: 1px solid var(--rule); }
.home-row:hover { background: rgba(255, 255, 255, 0.4); }
.home-row__main { display: flex; align-items: baseline; gap: 1.4rem; flex: 1 1 28rem; min-width: 0; }
.home-row__num {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--faint); flex: none;
}
.home-row__title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 0.35rem;
}
.home-row__title a { color: var(--ink); text-decoration: none; transition: color 0.2s ease; }
.home-row:hover .home-row__title a { color: var(--accent); }
.home-row__excerpt {
  font-family: var(--font-serif); font-size: 0.95rem; color: var(--ink-soft);
  line-height: 1.6; max-width: 42rem;
}
.home-row__aside {
  display: flex; align-items: center; gap: 1.4rem; flex: 0 0 auto; padding-left: 2.8rem;
}
.home-row__time {
  font-family: var(--font-sans); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--olive-subtle);
}
.home-row__link {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4ch;
}
.home-row:hover .home-row__link { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---- Layout: feature + minis ---- */
.home-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.home-feature {
  background: var(--sepia-tint); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2rem); display: flex; flex-direction: column;
}
.home-feature__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem;
}
.home-feature__tag {
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
  background: rgba(77, 132, 173, 0.1); padding: 0.25rem 0.6rem; border-radius: 3px;
}
.home-feature__time {
  font-family: var(--font-sans); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted);
}
.home-feature__title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.22; letter-spacing: -0.015em; margin-bottom: 0.7rem;
}
.home-feature__title a { color: var(--ink); text-decoration: none; }
.home-feature:hover .home-feature__title a { color: var(--accent); }
.home-feature__excerpt {
  font-family: var(--font-serif); font-size: 1rem; color: var(--ink-soft);
  line-height: 1.65; margin-bottom: 1.4rem;
}
.home-feature__foot {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.home-feature__kicker {
  font-family: var(--font-serif); font-style: italic; font-size: 0.8rem; color: var(--muted);
}
.home-feature__link {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent); text-decoration: none; white-space: nowrap;
}
.home-feature__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.home-split__minors { display: flex; flex-direction: column; gap: 0.9rem; }
.home-mini {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5); transition: border-color 0.25s ease;
}
.home-mini:hover { border-color: var(--rule-strong); }
.home-mini__art { flex: none; width: 5rem; height: 5rem; overflow: hidden; border-radius: 2px; }
.home-mini__art img {
  width: 100%; height: 100%; object-fit: cover; filter: grayscale(1);
  transition: filter 0.45s ease, transform 0.45s ease;
}
.home-mini:hover .home-mini__art img { filter: grayscale(0); transform: scale(1.04); }
.home-mini__text { min-width: 0; }
.home-mini__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  font-family: var(--font-sans); font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--olive-subtle); margin-bottom: 0.3rem;
}
.home-mini__title {
  font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; line-height: 1.25;
}
.home-mini__title a { color: var(--ink); text-decoration: none; }
.home-mini:hover .home-mini__title a { color: var(--accent); }

/* ---- Layout: panorama (closing showcase) ---- */
.home-panorama {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.8rem, 3.5vw, 3rem);
  align-items: center; background: var(--sepia-tint);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
.home-panorama__art { display: block; overflow: hidden; border-radius: var(--radius); background: #fff; }
.home-panorama__art img {
  width: 100%; aspect-ratio: 16 / 11; object-fit: cover; filter: grayscale(1);
  transition: filter 0.7s ease;
}
.home-panorama__art:hover img { filter: grayscale(0); }
.home-panorama__meta {
  display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem;
  font-family: var(--font-sans); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--olive-subtle);
}
.home-panorama__title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.16; letter-spacing: -0.02em; margin-bottom: 0.9rem;
}
.home-panorama__title a { color: var(--ink); text-decoration: none; }
.home-panorama__title a:hover { color: var(--accent); }
.home-panorama__excerpt {
  font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink-soft);
  line-height: 1.7; margin-bottom: 1.4rem;
}
.home-panorama__link {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5ch;
  border-bottom: 1px solid var(--accent); padding-bottom: 2px;
}
.home-panorama__link:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

/* Themes strip — horizontal, coloured, echoes Increment's issue nav. */
.themes-strip { margin-bottom: clamp(2.5rem, 6vw, 4rem);
  padding-block: 1.3rem; border-block: 1px solid var(--rule);
  display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 2.2rem; align-items: baseline; }
.themes-strip .eyebrow-label { margin-bottom: 0; padding-top: 0.35rem; }
.themes-strip ul { display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; margin: 0; }
.themes-strip .u-arrow { grid-column: 2; margin-top: 0.9rem; }
.themes-strip a { font-family: var(--font-sans); text-decoration: none; color: var(--ink);
  font-weight: 500; font-size: var(--step-0); display: inline-flex; align-items: baseline; gap: 0.5ch;
  border-bottom: 2px solid transparent; padding-bottom: 2px; }
.themes-strip ul a:hover { border-bottom-color: var(--tc, var(--accent)); color: var(--tc, var(--accent)); }
.themes-strip__count { font-size: 0.7rem; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--tc, var(--accent)); border-radius: 100px;
  min-width: 1.35em; height: 1.35em; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 0.35em; align-self: center; }

/* Magazine grid */
.mag-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 2.8rem) clamp(1.6rem, 4vw, 2.8rem); margin-top: 1.6rem; }
.mag-grid--briefs { margin-top: 1.4rem; }

.article-block { position: relative; display: flex; flex-direction: column; }
.article-block__link { color: inherit; text-decoration: none; }
.article-block__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.eyebrow-theme { position: relative; z-index: 1; }
.article-block__art { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--rule); margin-bottom: 0.9rem; }
.article-block__art img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.article-block:hover .article-block__art img { transform: scale(1.03); }
.article-block__title { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.2; font-size: var(--step-1); color: var(--ink); text-wrap: balance; }
.article-block__title.serif { font-family: var(--font-serif); font-weight: 500;
  letter-spacing: -0.02em; font-variation-settings: "opsz" 72; }
.article-block:hover .article-block__title { color: var(--tc, var(--accent)); }
.article-block__intro { margin-top: 0.5rem; color: var(--ink-soft); font-size: var(--step-0);
  font-family: var(--font-serif); }
.article-block--lead .article-block__intro { font-size: var(--step-1); line-height: 1.5; }

/* Lead: full width; art beside text on wide screens (Increment's "large"). */
.article-block--lead { grid-column: 1 / -1; padding-bottom: clamp(2rem, 4vw, 2.8rem);
  border-bottom: 1px solid var(--rule); margin-bottom: 0; }
.article-block--lead:has(.article-block__art) { display: grid;
  grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.article-block--lead .article-block__art { margin-bottom: 0; }
.article-block--lead .article-block__title.serif { font-size: var(--step-3); }
.article-block--brief .article-block__title { font-size: var(--step-0); }

.see-all { margin-top: clamp(2rem, 5vw, 3rem); }

/* List / page heads */
.page-head { margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.page-title { font-size: var(--step-3); font-weight: 400;
  font-variation-settings: "opsz" 72; }
.page-title--themed { border-bottom: 4px solid var(--tc, var(--accent));
  display: inline-block; padding-bottom: 0.2rem; }
.page-lead { margin-top: 0.7rem; font-size: var(--step-1); color: var(--muted); font-style: italic; }
.empty { color: var(--muted); font-style: italic; }

/* About page — portrait + intro side by side */
.about-hero {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 2.8rem);
  align-items: center; margin-bottom: clamp(2.2rem, 5vw, 3.4rem);
  padding-bottom: clamp(2rem, 5vw, 3rem); border-bottom: 1px solid var(--rule);
}
.about-hero__photo {
  width: clamp(7rem, 20vw, 11rem); height: clamp(7rem, 20vw, 11rem);
  object-fit: cover; border-radius: 50%; filter: grayscale(1) contrast(1.02);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}
.about-hero__intro .page-title { margin-bottom: 0.3rem; }
.about-hero__intro .page-lead { margin-top: 0.5rem; font-style: italic; color: var(--ink-soft);
  font-family: var(--font-serif); font-size: var(--step-0); line-height: 1.55; }
.about-social {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem;
}
.about-social a {
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--rule-strong); border-radius: 100px; padding: 0.4rem 0.9rem;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.about-social a:hover { color: #faf8f5; background: var(--accent-ink); border-color: var(--accent-ink); }
[data-theme="dark"] .about-social a:hover { color: #1a1816; background: var(--accent); border-color: var(--accent); }
@media (max-width: 40rem) {
  .about-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .about-social { justify-content: center; }
}

/* Themes index list */
.cat-list { border-top: 1px solid var(--rule); max-width: 46rem; }
.cat-list li { border-bottom: 1px solid var(--rule); }
.cat-list a { display: flex; align-items: center; gap: 0.8rem;
  padding: 1.1rem 0.2rem; text-decoration: none; color: var(--ink); }
.cat-dot { width: 0.7rem; height: 0.7rem; border-radius: 100px;
  background: var(--tc, var(--accent)); flex: none; }
.cat-list a:hover .cat-name { color: var(--tc, var(--accent)); }
.cat-name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; flex: 1; }
.cat-count { font-family: var(--font-sans); font-size: var(--step--1); color: var(--faint);
  font-variant-numeric: tabular-nums; }

/* ---------- 7. Article & prose ----------------------------------------- */
.post { max-width: var(--post-measure); }
.post-header { width: 100%; max-width: var(--measure); margin-inline: auto; text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.2rem); padding-top: clamp(2rem, 5vw, 3.5rem); }
.post-title { font-size: clamp(2.4rem, 4.6vw, 3.9rem); font-weight: 400; margin: 0.3em 0 0.5em;
  font-variation-settings: "opsz" 72; letter-spacing: -0.03em; line-height: 1.1;
  font-family: var(--font-display); }
.post-lede { font-size: var(--step-1); color: var(--ink-soft); font-style: italic;
  max-width: 34rem; margin-inline: auto; line-height: 1.5; }
.post-meta { margin-top: 1rem; font-family: var(--font-sans); font-size: 0.78rem;
  letter-spacing: 0.03em; color: var(--muted); display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 0.5ch; }
.post-byline { color: var(--ink-soft); }
/* The date ships in two widths; the short one takes over on narrow screens. */
.post-meta__date--short { display: none; }

/* Cover hero: image as background, white serif title overlaid */
.post-cover { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); height: clamp(17rem, 38vw, 29rem); overflow: hidden; border-radius: 0; }
.post-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.post-cover__overlay {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: clamp(3rem, 7vw, 5rem) clamp(2rem, 6vw, 6rem);
  text-align: center; color: #fff;
}
.post-cover__overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(26, 24, 22, 0.82) 0%, rgba(26, 24, 22, 0.48) 40%, rgba(26, 24, 22, 0.08) 100%);
  transition: opacity 0.65s ease;
}
.post-cover:hover .post-cover__overlay::before { opacity: 0; }
.post-cover__title {
  font-family: var(--font-display); font-weight: 400; color: #fff;
  font-size: clamp(2.6rem, 5.6vw, 4.9rem); line-height: 1.08; letter-spacing: -0.03em;
  font-variation-settings: "opsz" 72; max-width: 20ch; margin: 0 auto;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.16);
  transition: opacity 0.65s ease, text-shadow 0.65s ease;
}
.post-cover:hover .post-cover__title {
  opacity: 0; text-shadow: none;
}
.post-cover__cat {
  position: absolute; bottom: clamp(1.2rem, 2.5vw, 2rem); left: 0; right: 0;
  font-size: 0.76rem; letter-spacing: 0.14em;
  opacity: 0.85;
  transition: opacity 0.65s ease;
}
.post-cover:hover .post-cover__cat { opacity: 0; }
.post-header[hidden] { display: none; }

/* Post intro: compact meta + share bar */
.post-intro {
  max-width: var(--measure); margin-inline: auto;
  padding-block: clamp(0.8rem, 2vw, 1.2rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.post-meta-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.post-meta {
  font-family: var(--font-sans); font-size: 0.78rem;
  letter-spacing: 0.03em; color: var(--muted);
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5ch;
}
/* The centred header variant carries a top margin; inside the bar it would
   knock the text out of vertical alignment with the share circles. */
.post-meta-bar .post-meta { margin: 0; }
.post-share {
  display: flex; align-items: center; gap: 0.4rem;
}
.post-share__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: 1px solid var(--rule); border-radius: 50%;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.post-share__link:hover { color: var(--accent); border-color: var(--accent); }
.post-share__link svg { display: block; }

/* Post quote — an integrated, hand-set "thought" (no box) */
.post-quote {
  max-width: 34rem; margin: clamp(2rem, 5vw, 3.2rem) auto 0;
  padding: 0; text-align: center; position: relative;
}
.post-quote__text {
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  font-style: italic; font-weight: 400; color: var(--ink); line-height: 1.42;
  letter-spacing: -0.01em; font-variation-settings: "opsz" 72;
  border: 0; padding: 0; margin: 0; text-indent: 0; text-wrap: balance;
}
.post-quote__text::before { content: "\201C"; margin-right: 0.04em; }
.post-quote__text::after { content: "\201D"; margin-left: 0.04em; }
.post-quote__source {
  margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.post-quote__source::before {
  content: ""; width: 2.2rem; height: 1px; margin-bottom: 0.7rem;
  background: var(--rule-strong);
}
.post-quote__character {
  font-family: var(--font-serif); font-size: 0.95rem; font-weight: 600;
  font-style: normal; color: var(--accent-ink); letter-spacing: 0;
}
.post-quote__context {
  font-family: var(--font-serif); font-size: 0.82rem; color: var(--ink-soft);
  line-height: 1.5; margin: 0; font-style: italic; max-width: 30rem;
}
.post-quote__book {
  font-family: var(--font-sans); font-size: 0.64rem; color: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0.2rem 0 0;
}

/* End-of-post marker — a hand-set fleuron flanked by thin rules */
.post-end {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  max-width: 12rem; margin: clamp(2.5rem, 6vw, 3.8rem) auto clamp(0.5rem, 2vw, 1rem);
  color: var(--accent);
}
.post-end::before, .post-end::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, var(--rule-strong));
}
.post-end::before { --dir: left; }
.post-end__flourish {
  font-family: var(--font-display); font-size: 1.75rem; line-height: 1;
  color: var(--accent-ink); transform: rotate(-4deg); display: inline-block;
  opacity: 0.9;
}

/* Continue reading — an illuminated index of further reading */
.continue { margin-top: clamp(3.5rem, 8vw, 6rem); }
.continue__head {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.continue__rule {
  flex: 1; max-width: 7rem; height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, var(--rule-strong));
}
.continue__rule:first-child { --dir: left; }
.continue__title {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: var(--step-2); letter-spacing: -0.01em; color: var(--ink);
  white-space: nowrap; font-variation-settings: "opsz" 60;
}
.continue__flourish {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-ink);
  transform: rotate(-6deg); display: inline-block; opacity: 0.85;
}

.related-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.8rem, 3.5vw, 2.6rem);
}
.related-card { display: flex; }
.related-card__link {
  display: flex; flex-direction: column; width: 100%;
  text-decoration: none; color: inherit;
}
.related-card__img { overflow: hidden; border-radius: var(--radius); margin-bottom: 0.85rem; }
.related-card__img img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.related-card__link:hover .related-card__img img { transform: scale(1.04); }
.related-card__body { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.related-card .eyebrow { margin: 0 0 0.1rem; }
.related-card__title {
  font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem;
  line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); transition: color 0.25s ease;
}
.related-card__link:hover .related-card__title { color: var(--accent); }
.related-card__meta {
  font-family: var(--font-sans); font-size: 0.64rem; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.35rem;
}

/* Post navigation — floating vertical-text tabs, revealed on scroll */
.post-nav { display: none; }

@media (min-width: 40.01rem) and (max-width: 74.99rem) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 75rem) {
  .post-nav {
    display: block; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }
  .nav-visible .post-nav { opacity: 1; visibility: visible; pointer-events: auto; }

  .post-nav__item {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 40;
    display: block; text-decoration: none; color: var(--ink);
  }
  .post-nav__item--prev { left: 0; }
  .post-nav__item--next { right: 0; }

  /* Collapsed state: plain elegant vertical serif word */
  .post-nav__spine {
    display: block; writing-mode: vertical-rl;
    font-family: var(--font-display); font-weight: 600; font-style: normal;
    font-size: 1.2rem; letter-spacing: 0.06em; color: var(--ink-soft);
    padding: 0.6rem 0.75rem; transition: color 0.25s ease;
  }
  .post-nav__item--prev .post-nav__spine { transform: rotate(180deg); }
  .post-nav__item:hover .post-nav__spine { color: var(--accent); }

  /* Hover preview: fades in (no slide) */
  .post-nav__panel {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: stretch; width: 21rem;
    background: #fff; border: 1px solid var(--rule-strong);
    box-shadow: 0 8px 28px rgba(26, 24, 22, 0.16); border-radius: 10px; overflow: hidden;
    opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease;
  }
  .post-nav__item--prev .post-nav__panel { left: calc(100% + 0.5rem); }
  .post-nav__item--next .post-nav__panel { right: calc(100% + 0.5rem); flex-direction: row-reverse; }
  .post-nav__item:hover .post-nav__panel { opacity: 1; visibility: visible; }

  .post-nav__img { flex: none; width: 6.5rem; overflow: hidden; }
  .post-nav__img img { width: 100%; height: 100%; object-fit: cover; }
  .post-nav__info {
    display: flex; flex-direction: column; justify-content: center; gap: 0.3rem;
    padding: 0.9rem 1rem; min-width: 0;
  }
  .post-nav__item--next .post-nav__info { text-align: right; }
  .post-nav__label {
    font-family: var(--font-sans); font-size: 0.64rem; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--muted); font-weight: 500;
  }
  .post-nav__title {
    font-family: var(--font-serif); font-weight: 500; font-size: 0.92rem;
    line-height: 1.28; letter-spacing: -0.01em; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .post-nav__item:hover .post-nav__title { color: var(--accent); }
  .post-nav__cat {
    font-family: var(--font-sans); font-size: 0.62rem; text-transform: uppercase;
    letter-spacing: 0.1em; font-weight: 500; color: var(--tc, var(--accent));
  }
}

/* The prose column — the heart of the reading experience. */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose > * + * { margin-top: 1.35em; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { hyphens: auto; }
.prose h2 { font-size: var(--step-2); margin-top: 2.4em; font-variation-settings: "opsz" 60; }
.prose h3 { font-size: var(--step-1); margin-top: 2em; }
.prose h4 { font-size: var(--step-0); font-weight: 400; margin-top: 1.8em; letter-spacing: 0; }
.prose h2 + p, .prose h3 + p { margin-top: 0.7em; }

.prose a { text-decoration: underline; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }
.prose small { font-size: 0.85em; color: var(--muted); }

/* Lists — accent markers, generous rhythm */
.prose ul, .prose ol { padding-left: 0; list-style: none; }
.prose ul > li, .prose ol > li { position: relative; padding-left: 2.2em; }
.prose ul > li::before {
  content: "❧"; position: absolute; left: 0.5em; top: 0;
  color: var(--accent); font-size: 0.85em; line-height: 1.7;
}
.prose ol { counter-reset: prose-ol; }
.prose ol > li { counter-increment: prose-ol; }
.prose ol > li::before {
  content: counter(prose-ol, upper-roman) ".";
  position: absolute; left: 0; top: 0; width: 1.7em; text-align: right;
  font-family: var(--font-display); font-weight: 600; color: var(--accent);
}
.prose li + li { margin-top: 0.6em; }
/* Lead-in label of a list item sits on its own line, as in the reference */
.prose li > strong:first-child {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.08em; color: var(--ink); margin-bottom: 0.15em;
}
.prose li > ul, .prose li > ol { margin-top: 0.6em; }
.prose li > ul > li::before { content: "–"; }

/* Blockquote — parchment plate with decorative quote mark */
.prose blockquote {
  position: relative; margin-block: 2.6em; padding: 1.8em 2em 1.5em;
  background: var(--sepia-tint); border-block: 1px solid var(--rule);
  border-radius: 6px; color: var(--ink);
}
.prose blockquote::before {
  content: "\201C"; position: absolute; top: 0.05em; left: 0.4em;
  font-family: var(--font-display); font-size: 4rem; line-height: 1;
  color: var(--accent); opacity: 0.2; pointer-events: none;
}
.prose blockquote p {
  position: relative; z-index: 1; margin-top: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--step-1); line-height: 1.55; text-align: center;
}
.prose blockquote p + p { margin-top: 0.8em; }
.prose blockquote cite {
  display: block; margin-top: 1.1em; text-align: center; font-style: normal;
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
}

/* Excerpt — a passage transcribed verbatim from a source document. Gets the
   classic inset block quotation instead of the pull-quote plate: this is
   evidence being shown, not a thesis being declared. */
.prose blockquote.excerpt {
  margin-block: 2.4em; margin-inline-end: clamp(0rem, 6vw, 3rem);
  padding: 0.15em 0 0.15em 1.7em;
  background: none; border: 0; border-left: 1px solid var(--accent);
  border-radius: 0;
}
.prose blockquote.excerpt::before { content: none; }
.prose blockquote.excerpt p {
  font-family: var(--font-serif); font-style: normal;
  font-size: var(--step-0); line-height: 1.68; text-align: left;
  color: var(--ink-soft);
}
.prose blockquote.excerpt p + p { margin-top: 0.75em; }
.prose blockquote.excerpt .elision {
  margin-block: 0.45em; color: var(--faint); letter-spacing: 0.24em;
}
.prose blockquote.excerpt cite {
  margin-top: 1em; text-align: left;
  font-size: 0.64rem; letter-spacing: 0.14em;
}

/* Figure bleed — charts and diagrams step outside the reading column for a
   more composed page. The room is derived from the tokens rather than
   guessed: whatever the viewport offers beyond --post-measure, capped at
   5rem a side and floored at 0, so narrow screens collapse back to the
   column with no overflow. --post-measure is a deliberately conservative
   basis: .prose is never wider than it, so the result cannot overshoot. */
.prose .chart,
.prose .flow,
.prose .layers {
  --bleed: min(5rem, max(0px,
    (min(100vw - 2 * var(--gutter), var(--wide)) - var(--post-measure)) / 2));
  width: calc(100% + 2 * var(--bleed));
  margin-inline: calc(-1 * var(--bleed));
}
/* The caption is prose, so it keeps a readable line length even when the
   plate around it grows. */
.prose .chart figcaption,
.prose .layers figcaption { max-width: var(--post-measure); margin-inline: auto; }

/* Chart — data redrawn natively so it inherits the palette, the fonts and
   both themes. Plain inline SVG: no runtime, no library. */
.prose .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__frame { fill: none; stroke: var(--rule); stroke-width: 1; }
.chart__grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.chart__band { fill: var(--accent); opacity: 0.06; }
.chart__area { fill: url(#chartFade); }
.chart__line {
  fill: none; stroke: var(--accent); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round;
}
.chart__dot { fill: var(--paper); stroke: var(--accent); stroke-width: 2; }
.chart__tick {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; fill: var(--muted);
}
.chart__axis {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; fill: var(--faint);
}
.chart__note {
  font-family: var(--font-serif); font-style: italic; font-size: 19px;
  fill: var(--ink-soft);
}
.chart__value {
  font-family: var(--font-display); font-size: 23px; font-weight: 600;
  fill: var(--accent-ink);
}
.chart__leader { stroke: var(--rule-strong); stroke-width: 1.2; stroke-dasharray: 3 3; }
.chart__mark { fill: var(--accent); stroke: none; opacity: 0.55; }
.chart__ref { stroke: var(--accent); stroke-width: 1.2; opacity: 0.5; }
.chart__reflabel {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; fill: var(--accent-ink);
}
.chart__area--alt { fill: url(#chartFade2); }
/* Second series — bronze against the blue, plus its legend row. */
.chart__line--b { stroke: var(--chart-b); }
.chart__mark--b { fill: var(--chart-b); }
.chart__dot--b { stroke: var(--chart-b); }
.chart__value--b { fill: var(--chart-b); }
.chart__key {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; fill: var(--accent-ink);
}
.chart__key--b { fill: var(--chart-b); }
.chart__swatch { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.chart__swatch--b { stroke: var(--chart-b); }
/* The viewBox scales the whole drawing down with the column, so on a phone
   the desktop sizes land at under half their value. Scale strokes and labels
   back up in viewBox units instead of making the reader pan a chart sideways.
   Kept just under a straight 2x so the y labels don't overrun the left edge. */
@media (max-width: 40rem) {
  .chart__line { stroke-width: 4; }
  .chart__dot { stroke-width: 3.5; }
  .chart__leader { stroke-width: 2.4; stroke-dasharray: 5 5; }
  .chart__grid { stroke-width: 2; stroke-dasharray: 4 7; }
  .chart__frame { stroke-width: 2; }
  .chart__ref { stroke-width: 2.4; }
  .chart__mark { r: 5.5; }
  .chart__reflabel { font-size: 23px; letter-spacing: 0.06em; }
  .chart__key { font-size: 25px; letter-spacing: 0.04em; }
  .chart__swatch { stroke-width: 6; }
  .chart__tick { font-size: 26px; letter-spacing: 0.04em; }
  .chart__axis { font-size: 24px; letter-spacing: 0.06em; }
  .chart__note { font-size: 33px; }
  .chart__value { font-size: 39px; }
}

/* Flow comparison — the request path before and after, side by side. Plain
   markup rather than a drawing: the labels stay real, selectable text and
   the two columns stack on a phone. */
.prose .flow { margin-block: 2.8em; }
.flow__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 2.5vw, 1.8rem); align-items: start;
}
.flow__col {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  padding: clamp(0.9rem, 1.8vw, 1.3rem);
}
.flow__col--now { background: var(--sepia-tint); border-color: var(--rule-strong); }
.flow__head {
  margin: 0 0 0.9rem; padding-bottom: 0.55rem; text-align: center;
  font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.flow__col--now .flow__head { color: var(--accent-ink); border-bottom-color: var(--accent); }
/* `.prose ol/ul > li` carries the roman counter, the fleuron and a 2.2em
   indent. Two classes here outweigh its one-class/two-type specificity, so
   the chain opts out without !important. */
.prose .flow__chain,
.prose .flow__fan { list-style: none; margin: 0; padding: 0; }
.prose .flow__chain > li,
.prose .flow__fan > li { margin: 0; padding-left: 0; position: relative; }
.prose .flow__chain > li::before,
.prose .flow__fan > li::before { content: none; }
.flow__node {
  display: block; text-align: center;
  font-family: var(--font-serif); font-size: var(--step--1); line-height: 1.35;
  color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 6px; padding: 0.5rem 0.6rem;
}
.flow__col--now .flow__node { color: var(--ink); }
/* Connector: keeps the arrow the original diagram drew in plain text. */
.prose .flow__chain > li + li { padding-top: 1.6rem; }
.prose .flow__chain > li + li::before {
  content: "↓"; position: absolute; top: 0.1rem; left: 0; right: 0;
  text-align: center; font-family: var(--font-sans); font-size: 0.78rem;
  line-height: 1.4; color: var(--faint);
}
.prose .flow__col--now .flow__chain > li + li::before { color: var(--accent); }
.flow__node--hub { padding-bottom: 0.7rem; border-color: var(--accent); }
.flow__hub {
  display: block; margin-bottom: 0.6rem;
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink);
}
.flow__fan {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem;
}
.prose .flow__fan > li {
  padding: 0.3rem 0.15rem; text-align: center;
  font-family: var(--font-sans); font-size: 0.58rem; line-height: 1.25;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
}
@media (max-width: 34rem) {
  .flow__grid { grid-template-columns: 1fr; }
  .flow__fan { grid-template-columns: repeat(2, 1fr); }
}

/* Layers — concentric containment redrawn as nested plates. The source was a
   bullseye; rectangles carry the same "each layer wraps the next" meaning
   while keeping every label horizontal and legible. Tints come from
   color-mix against --paper, so one declaration serves both themes. */
.prose .layers { margin-block: 2.8em; }
.layers__ring {
  border: 1px solid var(--lc); border-radius: 10px;
  background: color-mix(in srgb, var(--lc) 7%, var(--paper));
  padding: clamp(0.85rem, 1.9vw, 1.35rem);
}
.layers__ring--harness { --lc: var(--chart-b); }
.layers__ring--context { --lc: var(--accent); }
.layers__ring--prompt  { --lc: var(--chart-c); }
.layers__name {
  margin: 0 0 0.8rem; text-align: center;
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--lc);
}
.prose .layers__tags {
  list-style: none; margin: 0 0 1.05rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.38rem;
}
.prose .layers__tags > li {
  margin: 0; padding: 0.34rem 0.75rem; position: static;
  font-family: var(--font-sans); font-size: 0.72rem; line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 100px;
}
.prose .layers__tags > li::before { content: none; }
.layers__core {
  margin: 0 auto; width: fit-content;
  padding: 0.6rem 2rem; border-radius: 100px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; text-align: center;
}

.prose hr { border: 0; text-align: center; margin: 2.6em auto; max-width: 8rem; }
.prose hr::before { content: "❧"; color: var(--faint); font-size: 1.2rem; }

/* Figures — linen-matted plate, echoing the home hero frame. Scoped so the
   code-block <figure> keeps its own dark treatment. */
.prose img { border-radius: var(--radius); margin-inline: auto; }
.prose figure { margin-block: 2.4em; }
.prose figure:has(figcaption) {
  background: var(--linen-warm); border: 1px solid var(--rule); border-radius: 3px;
  padding: clamp(0.7rem, 1.2vw, 1rem);
  box-shadow: 0 1px 4px rgba(26, 24, 22, 0.06);
}
.prose figure img {
  display: block; width: 100%;
  border: 1px solid rgba(26, 24, 22, 0.08); border-radius: 2px;
}
.prose figure figcaption {
  margin-top: 0.7em; text-align: center;
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--step--1); line-height: 1.4; color: var(--muted);
}

/* Table — framed plate with header strip and hairline rows */
.prose-table {
  margin-block: 2.4em; overflow-x: auto;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); box-shadow: var(--shadow);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0; }
.prose thead th {
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
  background: var(--sepia-tint); border-bottom: 1px solid var(--rule);
  text-align: left; padding: 0.75em 1em; white-space: nowrap;
}
.prose tbody td {
  font-family: var(--font-serif); color: var(--ink); text-align: left;
  padding: 0.8em 1em; border-bottom: 1px solid var(--rule);
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr { transition: background 0.2s ease; }
.prose tbody tr:hover { background: var(--sepia-tint); }

/* Heading anchors */
.heading-anchor { text-decoration: none; color: var(--faint); margin-left: 0.4ch;
  opacity: 0; transition: opacity 0.15s ease; font-family: var(--font-serif); }
:is(h2, h3, h4):hover .heading-anchor { opacity: 1; }

/* Drop cap — first paragraph of post automatically */
.is-post .prose > p:first-of-type::first-letter {
  font-family: var(--font-display); font-weight: 700; float: left;
  /* Two-line cap. line-height:1 makes the float box exactly the font size;
     margin-top sinks the glyph so its cap-height meets the first line's
     ascenders, and box height + margins stay under 2 x --leading so the
     float clears exactly two lines. */
  font-size: 3em; line-height: 1;
  margin: 0.098em 0.1em 0.045em 0;
  color: var(--accent-ink);
}


/* Kindle-style text highlights + hover toolbar */
mark.hl {
  background: #ffe27a; color: inherit; border-radius: 2px;
  padding: 0.02em 0; cursor: pointer;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background 0.2s ease;
}
mark.hl[data-color="yellow"] { background: #ffe27a; }
mark.hl[data-color="pink"]   { background: #f7b3c2; }
mark.hl[data-color="blue"]   { background: #a9d2f0; }
mark.hl[data-color="green"]  { background: #b9e0a6; }

.hl-toolbar {
  position: fixed; z-index: 80; display: none; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.55rem; background: #fff; border: 1px solid var(--rule-strong);
  border-radius: 100px; box-shadow: 0 6px 22px rgba(26, 24, 22, 0.18);
}
.hl-toolbar.is-open { display: flex; }
.hl-swatch {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(26, 24, 22, 0.25); padding: 0;
  transition: transform 0.15s ease;
}
.hl-swatch:hover { transform: scale(1.15); }
.hl-swatch--yellow { background: #ffe27a; }
.hl-swatch--pink   { background: #f7b3c2; }
.hl-swatch--blue   { background: #a9d2f0; }
.hl-swatch--green  { background: #b9e0a6; }
.hl-remove {
  width: 1.35rem; height: 1.35rem; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 0.8rem; line-height: 1; border-radius: 50%;
  margin-left: 0.15rem; border-left: 1px solid var(--rule); padding-left: 0.5rem;
}
.hl-remove:hover { color: var(--accent-ink); }
.hl-add {
  position: fixed; z-index: 80; display: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #faf8f5;
  background: var(--accent-ink); border: 0; border-radius: 100px;
  padding: 0.5rem 0.9rem; box-shadow: 0 6px 22px rgba(26, 24, 22, 0.22);
}
.hl-add.is-open { display: block; }
.hl-add:active { transform: scale(0.96); }
/* Touch / small screens: pinned to bottom-center, avoids native toolbar collision */
.hl-add--fixed {
  left: 50% !important; transform: translateX(-50%);
  bottom: clamp(1.6rem, 6vw, 3rem) !important; top: auto !important;
  font-size: 0.84rem; padding: 0.65rem 1.4rem;
}

/* Kindle-style reading progress */
.reading-meta {
  position: fixed; left: 0; bottom: 0; width: 100%; z-index: 45;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 0.7rem clamp(1rem, 4vw, 2.2rem) 0.9rem; pointer-events: none;
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateY(100%); transition: opacity 0.35s ease, transform 0.35s ease;
}
.reading-bar {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; overflow: hidden;
  background: var(--rule);
}
.reading-bar__fill {
  height: 100%; width: 0; background: var(--accent-ink);
  transition: width 0.12s linear;
}
.reading-active .reading-meta { opacity: 1; transform: none; }
@media (max-width: 40rem) {
  .reading-meta { background: var(--surface); border-top: 1px solid var(--rule); }
}
/* ---------- 8. Reusable content components ------------------------------ */
/* Callout / aside boxes. Variants via modifier classes. */
.callout { background: var(--sepia-tint); border: 1px solid var(--rule);
  border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0;
  padding: 1.3em 1.5em; margin-block: 2.2em; font-size: 0.95rem;
  color: var(--ink-soft); box-shadow: var(--shadow); }
.callout > :first-child { margin-top: 0; }
/* Reference lists carry bare URLs. Some have no break opportunity that fits a
   phone, and an unbroken one scrolls the whole page sideways. */
.callout a { overflow-wrap: anywhere; }
.callout > strong:first-child { display: block; margin-bottom: 0.4em;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.callout strong { color: var(--ink); }
.callout--note { border-left-color: #6b7a8a; }
.callout--warn { border-left-color: #b5892f; background: rgba(181, 137, 47, 0.12); }
.callout--tip  { border-left-color: #4d7a55; }

/* Pull quote — big, centered editorial statement. */
.pullquote { border: 0; padding: 0; text-align: center; font-family: var(--font-display);
  font-size: var(--step-2); font-style: italic; font-weight: 500; color: var(--ink);
  line-height: 1.3; margin-block: 1.6em; max-width: 30rem; margin-inline: auto; }
.pullquote::before { content: "“"; color: var(--faint); }
.pullquote::after { content: "”"; color: var(--faint); }

/* Wide media that breaks the measure for emphasis. */
.wide, .prose .wide { max-width: 54rem; width: 100%; }
.bleed { width: min(100vw - 2 * var(--gutter), 62rem);
  margin-inline: calc(50% - min(50vw - var(--gutter), 31rem)); }

.figure { margin-block: 2em; }
.figure img { width: 100%; }

/* A subtle byline / note element usable anywhere. */
.note { font-size: var(--step--1); color: var(--muted); font-style: italic; }

/* ---------- 9. Code ----------------------------------------------------- */
:where(code, kbd, samp) { font-family: var(--font-mono); font-size: 0.86em; }
.prose :not(pre) > code { background: var(--highlight); padding: 0.12em 0.4em;
  border-radius: var(--radius); border: 1px solid var(--rule); }

/* Code block — dark plate with header bar, language badge, copy + gutter */
.code-block {
  margin-block: 2.4em; background: #1e1c1a; color: #e8e4df;
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow);
}
.code-block__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0.9rem; background: #171514; border-bottom: 1px solid #2d2a27;
}
.code-block__lang {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: #e5a882;
  background: #2e2822; border: 1px solid #523b2a;
  padding: 0.1rem 0.5rem; border-radius: 4px;
}
.code-block__copy {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #a89f91; background: none; border: 0;
  cursor: pointer; padding: 0.2rem 0.1rem; transition: color 0.2s ease;
}
.code-block__copy:hover { color: #faf8f5; }
.code-block__copy[data-state="done"] { color: #85c492; }
.code-block__copy[data-state="fail"] { color: #d9825b; }
.code-block__body { display: flex; overflow-x: auto; }
.code-block__lines {
  flex: none; margin: 0; padding: 1.1rem 0.9rem; text-align: right;
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.65;
  color: #5a5248; background: none; border-right: 1px solid #302b26;
  user-select: none; -webkit-user-select: none;
}
.code-block pre.hljs {
  margin: 0; padding: 1.1rem 1.3rem; overflow-x: auto; flex: 1;
  font-size: 0.8rem; line-height: 1.65; color: #ddd6cb; background: none;
}
.code-block code { font-family: var(--font-mono); }

/* highlight.js token theme (warm, muted) */
.hljs-comment, .hljs-quote { color: #7c7361; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-meta { color: #c98a7d; }
.hljs-string, .hljs-regexp, .hljs-addition { color: #a8b98a; }
.hljs-number, .hljs-symbol, .hljs-bullet { color: #d4a373; }
.hljs-title, .hljs-name, .hljs-section, .hljs-selector-id { color: #e6c07b; }
.hljs-function .hljs-title, .hljs-title.function_ { color: #83a9c9; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #d7c9a8; }
.hljs-type, .hljs-class .hljs-title, .hljs-built_in { color: #c9a0dc; }
.hljs-tag { color: #8f8676; }
.hljs-deletion { color: #c98a7d; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ---------- 10. Responsive & dark -------------------------------------- */
@media (max-width: 40rem) {
  /* Apollo-style mobile masthead: white sheet, burger on the left, oversized
     wordmark centred on the viewport, solid black rule closing the block.
     The brand is taken out of flow so the burger's width cannot shift it off
     centre; min-height then has to carry the logo's height. */
  .site-header { position: sticky; top: 0; z-index: 55; background: #fff; }
  .site-header::after { height: 0.5px; background: var(--ink); opacity: 1; }
  .site-header__inner {
    flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; gap: 0.9rem; position: relative; min-height: 2.9rem;
  }
  .site-header__brand {
    flex-direction: row; gap: 0.6rem; z-index: 60;
    /* max-content: an absolute box anchored at left:50% would otherwise be
       shrink-to-fit inside the remaining half and squeeze the wordmark. */
    position: absolute; left: 50%; transform: translateX(-50%); width: max-content;
  }
  .site-header__logo { height: 2.9rem; }
  .site-header__toggle {
    display: block; order: -1; flex: none; z-index: 60;
  }
  .nav-open .site-header__burger, .nav-open .site-header__burger::before,
  .nav-open .site-header__burger::after { background: var(--ink); }
  .nav-open .site-header__burger { background: transparent; }

  /* Overlay menu — white sheet that expands gracefully over the page */
  .site-nav {
    position: fixed; inset: 0; z-index: 50; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff;
    opacity: 0; visibility: hidden;
    clip-path: circle(0% at calc(100% - 2.2rem) 2.2rem);
    transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, visibility 0.5s;
  }
  .nav-open .site-nav {
    opacity: 1; visibility: visible;
    clip-path: circle(150% at calc(100% - 2.2rem) 2.2rem);
  }
  .site-nav ul {
    flex-direction: column; align-items: center; gap: 0; width: 100%;
    opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease 0.12s, transform 0.35s ease 0.12s;
  }
  .nav-open .site-nav ul { opacity: 1; transform: none; }
  .site-nav li { padding: 0.9rem 0; }
  .site-nav a { font-family: var(--font-display); font-size: var(--step-2);
    text-transform: none; letter-spacing: -0.01em; font-weight: 500; border-bottom: 0; }
  .site-tools { border-left: 0; padding-left: 0; margin: 0.8rem 0 0; gap: 2rem; }
  .tool--type .tool__aa { font-size: 1.3rem; }
  .tool--theme svg { width: 22px; height: 22px; }
  .post-title { font-size: var(--step-3); }
  .mag-grid { grid-template-columns: 1fr; }
  .article-block--lead:has(.article-block__art) { grid-template-columns: 1fr; gap: 1rem; }
  .article-block--lead .article-block__title.serif { font-size: var(--step-2); }
  .themes-strip { grid-template-columns: 1fr; }
  .themes-strip .u-arrow { grid-column: 1; }
  /* Hero: §01 rail gone; bleed the image edge-to-edge and reflow as
     meta → art → title → excerpt → CTA. */
  .home-hero__bar { display: none; }
  .home-hero__grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .home-hero__text { display: contents; }
  .home-hero__meta { order: 1; margin-bottom: 0; }
  .home-hero__art {
    order: 2;
    /* Full-bleed: break out of the .wrap padding. */
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    border-radius: 0;
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
  }
  .home-hero__art img { aspect-ratio: 4 / 3; }
  .home-hero__title { order: 3; font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .home-hero__excerpt { order: 4; }
  .home-hero__foot { order: 5; margin-top: 0; }
  .home-grid { grid-template-columns: 1fr; }
  .home-section__head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .home-section__kicker { display: none; }
  .home-split { grid-template-columns: 1fr; }
  .home-panorama { grid-template-columns: 1fr; }
  .home-row__aside { padding-left: 2.4rem; width: 100%; justify-content: space-between; }
  .home-row__main { flex: 1 1 100%; gap: 1rem; }
  .home-divider__glyph { font-size: 0.85rem; }
  .site-footer__top { grid-template-columns: repeat(3, 1fr); gap: 1.8rem 1rem; }
  .site-footer__brand-col { grid-column: 1 / -1; max-width: none; }
  .is-post .prose { font-size: 1.2rem; line-height: 1.75; }
  /* Byline + date + reading time and the share buttons share one row:
     short date, tighter type and smaller circles keep it under 351px. */
  .post-meta__date { display: none; }
  .post-meta__date--short { display: inline; }
  .post-meta-bar { gap: 0.75rem; }
  .post-meta { font-size: 0.72rem; gap: 0.4ch; }
  .post-share { gap: 0.3rem; }
  .post-share__link { width: 1.75rem; height: 1.75rem; }
}

/* Sub-360px (iPhone SE 1st gen and friends): the byline is redundant with the
   header wordmark, so drop it to keep the meta row single-line, and the
   centred wordmark has to shrink or it would run into the burger. */
@media (max-width: 22.5rem) {
  .site-header__logo { height: 2.3rem; }
  .post-meta-bar .post-byline,
  .post-meta-bar .post-byline + .eyebrow-sep { display: none; }
}

/* ---------- Dark theme ------------------------------------------------- */
[data-theme="dark"] {
  --paper:   #171512;   /* inked charcoal ground */
  --surface: #201d19;
  --ink:     #f2f0ed;   /* inverse on-surface */
  --ink-soft:#d3c6bf;
  --muted:   #a89a92;
  --faint:   #6e625c;
  --rule:    #332c28;
  --rule-strong: #473d38;
  --accent:  #9cc6e0;   /* lit parchment blue */
  --accent-ink: #b8d8ec;
  --highlight: #22323d;
  --sepia-tint: #221e18; /* warm dark equivalent */
  --linen-warm: #241f19; /* warm dark mat — image frames */
  --chart-b: #d3a778; /* lit bronze — second data series */
  --chart-c: #9dba90; /* lit sage — third series */
}
[data-theme="dark"] .site-header { background: linear-gradient(180deg, #241f1b, var(--surface)); }
[data-theme="dark"] .site-footer { background: #1c1a16; }
[data-theme="dark"] .hl-toolbar,
[data-theme="dark"] .post-nav__panel { background: var(--surface); }
[data-theme="dark"] .post-nav__spine { background: rgba(32, 29, 25, 0.88); }
[data-theme="dark"] .hl-add { color: #1a1816; }
[data-theme="dark"] img { filter: brightness(0.92) contrast(0.98); }
/* The wordmark is pure black ink on transparency — flip it on dark ground
   (this also overrides the blanket image dimming above). */
[data-theme="dark"] .site-header__logo { filter: invert(1) brightness(0.95); }
@media (max-width: 40rem) {
  [data-theme="dark"] .site-nav { background: var(--paper); }
}

/* Highlights keep dark text for legibility on both themes */
mark.hl { color: #1a1816; }

/* Typography popover */
.type-pop {
  position: fixed; z-index: 80; display: none; flex-direction: column; gap: 0.6rem;
  padding: 0.7rem 0.8rem; background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); min-width: 12rem;
}
.type-pop.is-open { display: flex; }
.type-pop__row { display: flex; align-items: center; }
.type-pop__row--size { justify-content: space-between; gap: 0.6rem; }
.type-pop__btn {
  min-width: 2.2rem; height: 2rem; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: transparent; cursor: pointer; color: var(--ink); font-family: var(--font-serif);
  font-weight: 600; line-height: 1;
}
.type-pop__btn:hover { border-color: var(--accent); color: var(--accent); }
.type-pop__val { font-family: var(--font-sans); font-size: 0.78rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }

/* ---------- Smooth theme transition ------------------------------------ */
/* Fallback (browsers without View Transitions): brief cross-property fade */
.theme-anim, .theme-anim * {
  transition: background-color 0.5s ease, color 0.5s ease,
    border-color 0.5s ease, fill 0.5s ease, box-shadow 0.5s ease !important;
}
/* View Transitions API — gentle crossfade for the theme swap AND for
   page-to-page navigation (cross-document), so links don't feel like a
   hard reload. Progressive enhancement: ignored where unsupported. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.4s; animation-timing-function: ease;
}

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  /* `*` does not match view-transition pseudo-elements — kill them explicitly */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

@media print {
  .site-header, .site-footer, .post-footer, .heading-anchor { display: none; }
  body { background: #fff; color: #000; }
  .code-block { background: #f4f1ea; box-shadow: none; border: 1px solid #ccc; }
  .code-block pre { color: #222; }
  .code-block__bar, .code-block__lines { display: none; }
}