@charset "utf-8";

/* ═══════════════════════════════════════════════════════════
   Non-Convex Notes · Riverrun v1.0 (cinnabar identity).
   Block 1 is ~/src/riverrun/riverrun/tokens.css vendored VERBATIM —
   never hand-edit it; refresh with `make tokens` (see AGENTS.md)
   when Riverrun bumps. Block 2 is the blog layer.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   Riverrun · wilbeibi's personal design system · v1.0 (2026-09)
   White ground, navy ink, one violet accent, system sans.
   The sidenote in the right margin is the signature.
   Drop into any blog / report / repo page and follow README.md.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Riverrun pages force light; the dark surface is a component, not a theme. */
  color-scheme: light;

  /* ---- Color (fly.io-derived grays; one violet) ---- */
  --rr-bg:          #ffffff;                  /* ground */
  --rr-bg-raised:   #f8f9fc;                  /* panels: pre, terminal, figure, docs band */
  --rr-bg-inset:    #f1f2f9;                  /* deeper ground: hover rows, current tree item */
  --rr-bg-tint:     #f5f3ff;                  /* accent-tinted ground: the callout only */
  --rr-ink:         #22183c;                  /* headings, strong, the rule under table heads */
  --rr-ink-body:    #4c4e67;                  /* body prose */
  --rr-ink-muted:   #676b89;                  /* meta, eyebrow, sidenotes, captions, labels */
  --rr-ink-faint:   #9698b6;                  /* placeholders, disabled */
  --rr-ink-decorative: #ccd0e0;               /* non-text marks: secondary bars */
  --rr-line:        #e1e4ef;                  /* rules, borders, table rows */
  --rr-hairline:    rgba(34, 24, 60, 0.08);   /* hairline separators on tinted ground */
  --rr-accent:      #7c3aed;                  /* violet: links, [†] marks, inline code, chart primary */
  --rr-accent-soft: #c4b5fd;                  /* accent on the dark surface (the $ prompt) */
  --rr-accent-wash: #ede9fe;                  /* inline code ground */
  --rr-accent-line: #ddd6fe;                  /* callout border */
  --rr-accent-ink:  #564b80;                  /* callout text */
  --rr-selection:   rgba(124, 58, 237, 0.18); /* ::selection ground */
  --rr-dark-bg:     #22183c;                  /* dark surface: command pill, deck dividers ONLY */
  --rr-dark-ink:    #ffffff;
  --rr-dark-muted:  rgba(255, 255, 255, 0.65);
  --rr-dark-line:   rgba(255, 255, 255, 0.15);

  /* ---- Type: one system sans, one system mono ---- */
  --rr-font-sans-latin: -apple-system, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --rr-font-sans-cjk:   "PingFang SC", -apple-system, "SF Pro Display", "Microsoft YaHei", "Helvetica Neue", system-ui, sans-serif;
  --rr-font-sans:  var(--rr-font-sans-latin);   /* :lang() switches which stack leads */
  --rr-font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* v0.x role aliases — kept so older pages keep resolving; every role is sans now. */
  --rr-font-ui-latin:    var(--rr-font-sans-latin);
  --rr-font-ui-cjk:      var(--rr-font-sans-cjk);
  --rr-font-prose-latin: var(--rr-font-sans-latin);
  --rr-font-prose-cjk:   var(--rr-font-sans-cjk);
  --rr-font-ui:    var(--rr-font-sans);
  --rr-font-prose: var(--rr-font-sans);
  --rr-font-note:  var(--rr-font-sans);

  /* Weights: light body, regular headings. SF Pro is variable; PingFang rounds to Regular/Medium. */
  --rr-weight-body:   350;
  --rr-weight-head:   450;
  --rr-weight-strong: 500;

  /* Scale (built from an 18px body) */
  --rr-text-display: 64px;   /* repo hero, deck titles go larger via clamp */
  --rr-text-h1:      52px;
  --rr-text-h2:      27px;
  --rr-text-h3:      20px;
  --rr-text-lede:    22px;
  --rr-text-body:    18px;
  --rr-text-small:   15.5px;
  --rr-text-note:    14.5px; /* sidenotes */
  --rr-text-meta:    14px;   /* eyebrow, nav, facts, footer */
  --rr-text-mono:    14px;
  --rr-text-label:   13px;   /* table heads, captions */
  --rr-leading-prose: 1.625;
  --rr-leading-ui:    1.4;
  --rr-tracking-head: -0.025em; /* Latin headings only; :lang(zh) resets to 0 */

  /* ---- Space / shape / layout ---- */
  --rr-space-1: 4px;  --rr-space-2: 8px;   --rr-space-3: 12px;
  --rr-space-4: 16px; --rr-space-5: 24px;  --rr-space-6: 32px;
  --rr-space-7: 48px; --rr-space-8: 64px;  --rr-space-9: 96px;
  --rr-radius-s: 4px; --rr-radius-m: 6px;  --rr-radius-l: 12px;
  --rr-radius-pill: 999px;
  --rr-wide:       1200px;  /* page width */
  --rr-measure:    44rem;   /* prose column */
  --rr-rail-left:  13rem;   /* author / toc column */
  --rr-rail-right: 15rem;   /* sidenote column */
  --rr-gutter:     40px;    /* between columns */
  --rr-margin-rail: var(--rr-rail-right); /* v0.x alias */

  /* ---- Interaction ---- */
  --rr-duration-fast: 140ms;
  --rr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rr-focus-width: 2px;
  --rr-focus-offset: 3px;
  --rr-touch-target: 44px;
}

/* ---- Language switch ----
   Set the document's dominant language on <html>. Ordinary borrowed terms
   inherit that paragraph's stack; mark only standalone passages with
   lang="en" or lang="zh-Hans" to change which face leads locally. */
:lang(en) { --rr-font-sans: var(--rr-font-sans-latin); --rr-font-ui: var(--rr-font-sans-latin); --rr-font-prose: var(--rr-font-sans-latin); --rr-font-note: var(--rr-font-sans-latin); }
:lang(zh) { --rr-font-sans: var(--rr-font-sans-cjk);   --rr-font-ui: var(--rr-font-sans-cjk);   --rr-font-prose: var(--rr-font-sans-cjk);   --rr-font-note: var(--rr-font-sans-cjk); }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--rr-bg);
  color: var(--rr-ink-body);
  font-family: var(--rr-font-sans);
  font-size: var(--rr-text-body);
  font-weight: var(--rr-weight-body);
  line-height: var(--rr-leading-prose);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-autospace: normal;
  line-break: strict;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--rr-selection); }

button, input, select, textarea { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--rr-focus-width) solid var(--rr-accent);
  outline-offset: var(--rr-focus-offset);
}
.rr-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

h1, h2, h3 { color: var(--rr-ink); font-weight: var(--rr-weight-head); letter-spacing: var(--rr-tracking-head); text-wrap: balance; margin: 0; }
h1 { font-size: var(--rr-text-h1); line-height: 1.1; max-width: 22ch; }
h2 { font-size: var(--rr-text-h2); line-height: 1.25; letter-spacing: -0.02em; margin: 2em 0 0.8em; }
h3 { font-size: var(--rr-text-h3); line-height: 1.3; letter-spacing: -0.01em; }
:lang(zh) :is(h1, h2, h3), :is(h1, h2, h3):lang(zh) { letter-spacing: 0; }
p  { margin: 0 0 1.25em; text-wrap: pretty; }
strong { font-weight: var(--rr-weight-strong); color: var(--rr-ink); }
em { font-style: italic; }
:lang(zh) em { font-style: normal; font-weight: var(--rr-weight-strong); }
hr { border: 0; border-top: 1px solid var(--rr-line); margin: var(--rr-space-7) 0; }

a {
  color: var(--rr-accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  transition: color var(--rr-duration-fast) var(--rr-ease-out);
}
a:hover { color: var(--rr-ink); }

/* ---- Page frame ---- */
.rr-page { max-width: var(--rr-wide); margin: 0 auto; padding: 0 var(--rr-space-6); }
.rr-eyebrow { display: flex; flex-wrap: wrap; gap: var(--rr-space-2); font-size: var(--rr-text-meta); letter-spacing: 0.02em; color: var(--rr-ink-muted); margin-bottom: 22px; }
.rr-lede { font-size: var(--rr-text-lede); line-height: 1.4; letter-spacing: -0.006em; max-width: 36ch; color: var(--rr-ink-body); margin: 0 0 var(--rr-space-7); text-wrap: pretty; }
.rr-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: var(--rr-text-meta); }
.rr-nav .brand { color: var(--rr-ink); font-weight: var(--rr-weight-head); text-decoration: none; }
.rr-nav .brand span { color: var(--rr-ink-muted); font-weight: var(--rr-weight-body); }
.rr-nav .links { display: flex; gap: 22px; align-items: center; }
.rr-nav .links a { color: var(--rr-ink-body); text-decoration: none; }
.rr-nav .links a:hover { color: var(--rr-ink); }
.rr-footer { display: flex; justify-content: space-between; margin-top: var(--rr-space-9); padding: 20px 0 var(--rr-space-8); border-top: 1px solid var(--rr-line); font-size: var(--rr-text-label); color: var(--rr-ink-muted); }

/* ---- Three-column article: author rail · prose · sidenote rail ---- */
.rr-layout { display: grid; grid-template-columns: var(--rr-rail-left) minmax(0, var(--rr-measure)) 1fr; gap: 0 var(--rr-gutter); align-items: start; }
.rr-who { font-size: var(--rr-text-meta); line-height: var(--rr-leading-ui); color: var(--rr-ink-muted); position: sticky; top: var(--rr-space-5); }
.rr-avatar { width: 40px; height: 40px; border-radius: var(--rr-radius-l); background: var(--rr-bg-inset); margin-bottom: 10px; }
.rr-who .name { color: var(--rr-ink); font-weight: var(--rr-weight-strong); }
.rr-who .handle a { text-decoration: none; }
.rr-facts { margin: var(--rr-space-5) 0 0; padding-top: var(--rr-space-4); border-top: 1px solid var(--rr-line); }
.rr-facts dt { font-size: 12px; color: var(--rr-ink-muted); }
.rr-facts dd { margin: 2px 0 12px; color: var(--rr-ink-body); }
.rr-toc { font-size: var(--rr-text-meta); position: sticky; top: var(--rr-space-5); }
.rr-toc a { display: block; color: var(--rr-ink-body); text-decoration: none; padding: 3px 0; }
.rr-toc a.on, .rr-toc a:hover { color: var(--rr-ink); }
.rr-toc a.on { font-weight: var(--rr-weight-head); }
.rr-prose { position: relative; font-size: var(--rr-text-body); line-height: var(--rr-leading-prose); }
.rr-prose > h2:first-child { margin-top: 0; }

/* ---- Sidenote (signature component) ----
   Inline: a literal [†] in the accent right where the thought belongs.
   Margin: the note sits in the right rail, level with its paragraph — put the
   .rr-sidenote div immediately BEFORE the paragraph that carries the mark.
   Narrow screens: it folds into a bordered box above the paragraph.
   Rules: ≤2 sentences, ≤1 per screen, marks run † ‡ § in order.
   Rants and asides only — serious caveats stay in the prose or a footnote. */
.rr-mark { color: var(--rr-accent); font-size: 0.85em; margin-left: 1px; }
.rr-sidenote { position: absolute; left: 100%; margin-left: var(--rr-gutter); width: var(--rr-rail-right); font-size: var(--rr-text-note); line-height: 1.6; color: var(--rr-ink-muted); }
.rr-sidenote p { margin: 0; }
.rr-sidenote code { font-size: 0.9em; }
@media (max-width: 1180px) {
  .rr-sidenote { position: static; width: auto; margin: 0 0 1.5rem; border: 1px solid var(--rr-line); border-radius: var(--rr-radius-l); padding: 1rem 1.25rem; }
}
@media (max-width: 900px) {
  .rr-layout { grid-template-columns: 1fr; }
  .rr-who { position: static; display: flex; gap: var(--rr-space-4); align-items: center; margin-bottom: var(--rr-space-6); }
  .rr-avatar { margin: 0; }
  .rr-facts, .rr-toc { display: none; }
}

/* ---- Code ---- */
code {
  font-family: var(--rr-font-mono); font-size: 0.92em; color: var(--rr-accent);
  background: var(--rr-accent-wash); padding: 1px 5px; border-radius: var(--rr-radius-s);
}
pre {
  font-family: var(--rr-font-mono); font-size: var(--rr-text-mono); line-height: 1.7;
  color: var(--rr-ink); background: var(--rr-bg-raised); border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius-l); padding: 18px 20px; overflow-x: auto; margin: 0 0 1.5em;
}
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
code, pre, kbd, samp { text-autospace: no-autospace; }
/* Quiet highlighting: comments muted, the prompt/keyword in the accent, nothing else. */
.tok-comment { color: var(--rr-ink-muted); }
.tok-accent  { color: var(--rr-accent); }
.tok-strong  { color: var(--rr-ink); font-weight: var(--rr-weight-strong); }

/* Terminal demo: the same light panel as pre, rows kept verbatim. */
.rr-term { font-family: var(--rr-font-mono); font-size: 13.5px; line-height: 1.7; color: var(--rr-ink); background: var(--rr-bg-raised); border: 1px solid var(--rr-line); border-radius: var(--rr-radius-l); padding: 18px 22px; white-space: pre; overflow-x: auto; }

/* ---- Blockquote: a quiet 2px rule in the line color, never the accent ---- */
blockquote { margin: 0 0 1.25em; padding-left: 18px; border-left: 2px solid var(--rr-line); color: var(--rr-ink-muted); font-style: normal; }
blockquote cite { display: block; margin-top: 8px; font-size: var(--rr-text-label); }

/* ---- Table: ink rule under heads, line rules between rows ---- */
table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: var(--rr-text-small); }
th { text-align: left; font-weight: var(--rr-weight-strong); font-size: var(--rr-text-label); color: var(--rr-ink-muted); border-bottom: 1px solid var(--rr-ink); padding: 8px 0; }
td { padding: 11px 0; border-bottom: 1px solid var(--rr-line); }
th.num, td.num { text-align: right; font-family: var(--rr-font-mono); font-size: var(--rr-text-mono); font-variant-numeric: tabular-nums; }
td.delta { color: var(--rr-accent); font-weight: var(--rr-weight-strong); }

/* ---- Figure (Tufte): panel ground, thin baseline, no grid, no Y axis ---- */
.rr-fig { margin: 0 0 1.5em; padding: 24px 24px 18px; background: var(--rr-bg-raised); border-radius: var(--rr-radius-l); }
.rr-bars { display: flex; gap: 20px; align-items: flex-end; height: 110px; border-bottom: 1px solid var(--rr-line); }
.rr-bar { width: 56px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rr-bar .v { font-family: var(--rr-font-mono); font-size: 12px; color: var(--rr-ink-muted); }
.rr-bar .b { width: 100%; background: var(--rr-ink-decorative); border-radius: 3px 3px 0 0; }
.rr-bar.primary .v { color: var(--rr-accent); font-weight: var(--rr-weight-strong); }
.rr-bar.primary .b { background: var(--rr-accent); }
.rr-bar-labels { display: flex; gap: 20px; font-family: var(--rr-font-mono); font-size: 12px; color: var(--rr-ink-muted); margin-top: 8px; }
.rr-bar-labels span { width: 56px; text-align: center; }
figcaption, .rr-fig-caption { font-size: var(--rr-text-label); color: var(--rr-ink-muted); margin-top: 14px; }

/* ---- Callout: the one tinted box a page gets (a conclusion, a takeaway) ---- */
.rr-callout { background: var(--rr-bg-tint); border: 1px solid var(--rr-accent-line); color: var(--rr-accent-ink); border-radius: var(--rr-radius-l); padding: 20px 24px; font-size: 17px; line-height: 1.55; margin: 0 0 1.5em; }
.rr-callout strong { display: block; margin-bottom: 6px; }

/* ---- Actions: most actions are links; these are for the hero ---- */
.rr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 14px; border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius-m); cursor: pointer; font-size: var(--rr-text-small);
  color: var(--rr-ink); background: transparent; text-decoration: none;
  transition: border-color var(--rr-duration-fast) var(--rr-ease-out), background-color var(--rr-duration-fast) var(--rr-ease-out), transform var(--rr-duration-fast) var(--rr-ease-out);
}
.rr-btn:hover { border-color: var(--rr-ink-faint); background: var(--rr-bg-raised); color: var(--rr-ink); }
.rr-btn:active:not(:disabled) { transform: translateY(1px); }
.rr-btn:disabled, .rr-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.58; }
.rr-btn-small { min-height: 30px; padding: 5px 10px; font-size: var(--rr-text-meta); }
.rr-cmd {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 10px 16px;
  border-radius: var(--rr-radius-m); background: var(--rr-dark-bg); color: var(--rr-dark-ink);
  font-family: var(--rr-font-mono); font-size: var(--rr-text-mono);
}
.rr-cmd .prompt { color: var(--rr-accent-soft); }
.rr-cmd-copy {
  display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 28px;
  padding: 3px 8px; border: 1px solid var(--rr-dark-line); border-radius: var(--rr-radius-s);
  background: transparent; color: var(--rr-dark-muted); cursor: pointer; font-family: var(--rr-font-sans); font-size: 12px;
  transition: color var(--rr-duration-fast) var(--rr-ease-out), border-color var(--rr-duration-fast) var(--rr-ease-out);
}
.rr-cmd-copy:hover, .rr-cmd-copy[data-copied="true"] { color: var(--rr-dark-ink); border-color: var(--rr-accent-soft); }
.rr-cmd-copy:focus-visible { outline-color: var(--rr-dark-ink); }

@media (pointer: coarse) {
  .rr-btn, .rr-cmd-copy { min-height: var(--rr-touch-target); }
}

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

/* ═══════════════════════════════════════════════════════════
   Non-Convex Notes · blog layer on Riverrun v1.0.
   Everything above this line is riverrun/tokens.css verbatim.
   Everything below styles only through var(--rr-*), plus two
   approved site exceptions: the cinnabar identity (riverrun
   extensions/non-convex-notes) and a page-wide night mode.
   ═══════════════════════════════════════════════════════════ */

/* ── Cinnabar imprint — the site accent replaces violet on every role
   violet fills (links, marks, inline code, focus, selection), and the
   ground goes warm off-white with charcoal ink: a reading instrument,
   not a product page. Night mode below keeps the navy grounds. ── */
[data-imprint="cinnabar"] {
    --rr-bg: #fbfaf7; --rr-bg-raised: #f5f3ee; --rr-bg-inset: #eeebe4; --rr-bg-tint: #f9f1ee;
    --rr-ink: #1f1c1a; --rr-ink-body: #3d3935; --rr-ink-muted: #75706a;
    --rr-ink-faint: #a49f98; --rr-ink-decorative: #d6d1c8;
    --rr-line: #e5e1d8; --rr-hairline: rgba(31, 28, 26, 0.08);
    --rr-accent: #b23a2a;
    --rr-accent-soft: #dcaaa2;
    --rr-accent-wash: rgba(178, 58, 42, 0.08);
    --rr-accent-line: rgba(178, 58, 42, 0.30);
    --rr-accent-ink: #7a2a1e;
    --rr-selection: rgba(178, 58, 42, 0.18);
}

/* ── Night mode — a deliberate blog divergence from Riverrun's
   forced-light policy (there, the navy surface is a component,
   not a theme). Grounds derive from the system navy; cinnabar is
   lifted to #d97f6a (6.4:1 on the night ground). `data-theme` is
   set on <html> pre-paint (stored choice or OS); the media block
   below is the no-JS fallback — KEEP THE TWO BLOCKS IN SYNC. ── */
[data-theme="dark"] {
    color-scheme: dark;
    --rr-bg: #131120; --rr-bg-raised: #1b1829; --rr-bg-inset: #221e33; --rr-bg-tint: #1f1a26;
    --rr-ink: #ece9f6; --rr-ink-body: #c3c1d4; --rr-ink-muted: #9997b3;
    --rr-ink-faint: #6d6b88; --rr-ink-decorative: #3f3c58;
    --rr-line: #2b2840; --rr-hairline: rgba(236, 233, 246, 0.09);
    --rr-accent: #d97f6a; --rr-accent-soft: #7a453b;
    --rr-accent-wash: rgba(217, 127, 106, 0.12); --rr-accent-line: rgba(217, 127, 106, 0.35);
    --rr-accent-ink: #e8a08f; --rr-selection: rgba(217, 127, 106, 0.28);
    --ncn-img-filter: brightness(0.9);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --rr-bg: #131120; --rr-bg-raised: #1b1829; --rr-bg-inset: #221e33; --rr-bg-tint: #1f1a26;
        --rr-ink: #ece9f6; --rr-ink-body: #c3c1d4; --rr-ink-muted: #9997b3;
        --rr-ink-faint: #6d6b88; --rr-ink-decorative: #3f3c58;
        --rr-line: #2b2840; --rr-hairline: rgba(236, 233, 246, 0.09);
        --rr-accent: #d97f6a; --rr-accent-soft: #7a453b;
        --rr-accent-wash: rgba(217, 127, 106, 0.12); --rr-accent-line: rgba(217, 127, 106, 0.35);
        --rr-accent-ink: #e8a08f; --rr-selection: rgba(217, 127, 106, 0.28);
        --ncn-img-filter: brightness(0.9);
    }
}
:root { --ncn-img-filter: none; }
html { background: var(--rr-bg); }

/* ── Type — two families, loaded in baseof.html (blog exception to the
   v1.0 system-sans policy: the tokens' SF Pro / PingFang stack falls
   back to Noto Sans Light on Linux and to YaHei on Windows). Serif for
   everything read (prose, titles, ledes, list titles); sans for
   everything used (nav, metadata, dates, footer); mono for code.
   rr-check flags these as off-system fonts — expected residue. ── */
:root {
    --ncn-serif-latin: Newsreader, "Noto Serif SC", "Songti SC", Georgia, "Times New Roman", serif;
    --ncn-serif-cjk:   "Noto Serif SC", "Songti SC", Newsreader, Georgia, serif;
    --ncn-sans-latin:  Inter, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
    --ncn-sans-cjk:    "PingFang SC", "Noto Sans SC", "Microsoft YaHei", Inter, -apple-system, system-ui, sans-serif;
    --rr-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* Newsreader and Inter are drawn at 400/500/600, not the SF-tuned 350/450. */
    --rr-weight-body: 400; --rr-weight-head: 500; --rr-weight-strong: 600;
    --rr-text-body: 19px; --rr-leading-prose: 1.65;
    --ncn-measure: 42rem;   /* ≈ 70 characters of 19px Newsreader */
}
:lang(en) { --rr-font-sans: var(--ncn-sans-latin); --rr-font-ui: var(--ncn-sans-latin); --rr-font-prose: var(--ncn-serif-latin); --rr-font-note: var(--ncn-serif-latin); }
:lang(zh) { --rr-font-sans: var(--ncn-sans-cjk);   --rr-font-ui: var(--ncn-sans-cjk);   --rr-font-prose: var(--ncn-serif-cjk);   --rr-font-note: var(--ncn-serif-cjk); }
.rr-prose, .rr-head h1, .rr-lede, .rr-post h2, .rr-post p { font-family: var(--rr-font-prose); }

/* ── One column. Every block (nav, head, meta, prose, list, footer) is
   the same 42rem measure on the same left edge. ── */
.rr-page { max-width: calc(var(--ncn-measure) + 2 * var(--rr-space-6)); }
.rr-nav { padding-top: var(--rr-space-5); flex-wrap: wrap; gap: 8px 22px; }
.rr-nav .brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.rr-nav .brand .name { color: var(--rr-ink); font-weight: var(--rr-weight-head); }
.rr-nav .brand svg { width: 16px; height: 16px; fill: var(--rr-accent); flex: none; }
.rr-nav .links { gap: 20px; }
.rr-nav .links button {
    border: 0; padding: 0; margin: 0; background: none; cursor: pointer;
    color: var(--rr-ink-body); font-size: inherit; line-height: inherit;
    transition: color var(--rr-duration-fast) var(--rr-ease-out);
}
.rr-nav .links button:hover { color: var(--rr-ink); }
@media (pointer: coarse) {
    .rr-nav .links a, .rr-nav .links button { display: inline-block; padding: 10px 2px; }
}

/* Head: title → lede → one metadata row, then a rule and air before the body. */
.rr-head { padding-top: var(--rr-space-8); }
.rr-head h1 {
    font-size: clamp(34px, 6vw, 46px); line-height: 1.15; letter-spacing: -0.015em;
    max-width: none; margin: 0 0 14px;
}
.rr-head .brand-mark { width: 0.6em; height: 0.6em; fill: var(--rr-accent); vertical-align: -0.02em; margin-right: 0.3em; }
.rr-head .rr-lede { font-size: 21px; line-height: 1.45; max-width: none; margin: 0 0 var(--rr-space-5); }
.rr-head > .rr-lede:last-child { margin-bottom: var(--rr-space-6); }
.ncn-meta {
    font-family: var(--rr-font-ui); font-size: var(--rr-text-meta); line-height: var(--rr-leading-ui);
    color: var(--rr-ink-muted); font-variant-numeric: tabular-nums;
    overflow: hidden; padding: 0 0 18px; border-bottom: 1px solid var(--rr-line); margin: 0 0 var(--rr-space-7);
}
/* Every item carries its own leading "·"; the wrapper is shifted left by one
   separator so a dot that would start a wrapped line is clipped away. */
.ncn-meta .items { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; margin-left: -18px; }
.ncn-meta .items > *::before { content: "·"; display: inline-block; width: 18px; text-align: center; }
.ncn-meta a { color: inherit; text-decoration: none; }
.ncn-meta a:hover { color: var(--rr-accent); }
.ncn-meta .tags a + a::before { content: ", "; color: var(--rr-ink-muted); }
.rr-footer a { color: inherit; text-decoration: none; }
.rr-footer a:hover { color: var(--rr-ink); }

/* Sidenotes have no rail in a single column: always the folded box. */
.rr-sidenote { position: static; width: auto; margin: 0 0 1.5rem; border: 1px solid var(--rr-line); border-radius: var(--rr-radius-l); padding: 1rem 1.25rem; }

/* ── Prose: rules the token sheet leaves to the page ── */
.rr-prose h1 { font-size: var(--rr-text-h2); line-height: 1.25; max-width: none; margin: 2em 0 0.7em; }
.rr-prose h2 { margin: 2em 0 0.7em; }
.rr-prose h3 { margin: 1.6em 0 0.5em; }
.rr-prose h4, .rr-prose h5, .rr-prose h6 {
    color: var(--rr-ink); font-weight: var(--rr-weight-strong); font-size: var(--rr-text-body);
    line-height: 1.35; margin: 1.6em 0 0.5em;
}
.rr-prose ul, .rr-prose ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.rr-prose li + li { margin-top: 0.3em; }
.rr-prose li > ul, .rr-prose li > ol { margin: 0.3em 0 0; }
.rr-prose li p { margin: 0; }
.rr-prose li p + p { margin-top: 0.75em; }
.rr-prose img, .rr-prose video {
    display: block; max-width: 100%; height: auto; margin: 0 auto 1.5em;
    border-radius: var(--rr-radius-l); filter: var(--ncn-img-filter);
}
.rr-prose figure { margin: 0 0 1.5em; }
.rr-prose figure img { margin-bottom: 0; }
.rr-prose figcaption { font-family: var(--rr-font-ui); font-size: var(--rr-text-label); color: var(--rr-ink-muted); margin-top: 8px; }
.rr-prose blockquote p:last-child { margin-bottom: 0; }
.rr-prose a { overflow-wrap: anywhere; }
.rr-prose sup a { text-decoration: none; }
.rr-prose code { font-size: 0.86em; }
.rr-prose .footnotes { margin-top: var(--rr-space-7); font-size: var(--rr-text-note); color: var(--rr-ink-muted); }
.rr-prose .footnotes hr { margin: 0 0 var(--rr-space-4); }
.rr-prose .footnotes ol { padding-left: 1.4em; }

/* Markdown tables scroll inside the column rather than breaking it. */
.rr-prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; font-family: var(--rr-font-ui); font-size: var(--rr-text-small); }
.rr-prose th, .rr-prose td { padding-right: 20px; }
.rr-prose th:last-child, .rr-prose td:last-child { padding-right: 0; }

/* Code — chroma emits classes (markup.highlight.noClasses = false); keep the
   token sheet's quiet rule: comments muted, keywords in the accent, nothing else. */
.rr-prose .highlight { margin: 0 0 1.5em; }
.rr-prose .highlight pre { margin: 0; }
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1,
.chroma .cs, .chroma .cp, .chroma .cpf { color: var(--rr-ink-muted); }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
.chroma .kp, .chroma .kr, .chroma .kt { color: var(--rr-accent); }
.chroma .hl { display: block; background: var(--rr-accent-wash); }
.rr-prose mjx-container { overflow-x: auto; overflow-y: hidden; }

/* ── Lists: a year label, then date · title rows on one left edge ── */
.rr-list { padding-top: var(--rr-space-2); }
.rr-year { padding: var(--rr-space-7) 0 10px; font-family: var(--rr-font-ui); font-size: var(--rr-text-meta); color: var(--rr-ink-muted); font-variant-numeric: tabular-nums; }
.rr-list > .rr-year:first-child { padding-top: 0; }
.rr-post { display: grid; grid-template-columns: 6rem 1fr; gap: 0 var(--rr-space-4); padding: 18px 0; border-top: 1px solid var(--rr-line); }
.rr-post time, .rr-post .count { padding-top: 5px; font-family: var(--rr-font-ui); font-size: var(--rr-text-meta); color: var(--rr-ink-muted); font-variant-numeric: tabular-nums; }
.rr-post h2 { margin: 0 0 3px; font-size: 21px; font-weight: var(--rr-weight-head); line-height: 1.3; letter-spacing: -0.01em; }
.rr-post h2 a { color: inherit; text-decoration: none; }
.rr-post h2 a:hover { color: var(--rr-accent); }
.rr-post p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--rr-ink-muted); }
.rr-pager { display: flex; justify-content: space-between; padding: 18px 0 0; border-top: 1px solid var(--rr-line); font-family: var(--rr-font-ui); font-size: var(--rr-text-meta); }
.rr-pager a { color: var(--rr-ink-body); text-decoration: none; }
.rr-pager a:hover { color: var(--rr-ink); }

/* ── Responsive ── */
@media (max-width: 600px) {
    .rr-head { padding-top: var(--rr-space-7); }
    .rr-nav .links a:first-child { display: none; } /* Home: the brand already is one */
    .rr-nav .links { gap: 16px; }
}
@media (max-width: 520px) {
    .rr-page { padding-left: 20px; padding-right: 20px; }
    .rr-nav .brand .by { display: none; }
    .rr-post { grid-template-columns: 1fr; gap: 2px; }
    .rr-post time, .rr-post .count { padding-top: 0; }
}