@charset "utf-8"; /* ═══════════════════════════════════════════════════════════ Non-Convex Notes · Riverrun (cinnabar imprint). Tokens vendored from /Users/hongyis/Local/riverrun/riverrun/tokens.css v0.3 — do not hand-edit values; refresh from the source when Riverrun bumps. ═══════════════════════════════════════════════════════════ */ :root { color-scheme: light; --rr-bg: #fffff8; --rr-bg-raised: #f7f7f2; --rr-bg-inset: #f2f2ec; --rr-bg-tint: #fdfdf6; --rr-ink: #111111; --rr-ink-muted: #6b7280; --rr-ink-faint: #707680; /* tertiary text; 4.55:1 on paper */ --rr-ink-decorative: #9aa0a6; /* non-text marks only */ --rr-line: #e2e1da; --rr-hairline: rgba(17, 17, 17, 0.08); --rr-accent: #5e6ad2; --rr-accent-soft: #b9bfe8; --rr-accent-wash: rgba(94, 106, 210, 0.10); --rr-selection: rgba(94, 106, 210, 0.22); --rr-font-ui-latin: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --rr-font-ui-cjk: "PingFang SC", "Microsoft YaHei", Inter, system-ui, sans-serif; --rr-font-prose-latin: Newsreader, "Noto Serif SC", "Songti SC", Georgia, serif; --rr-font-prose-cjk: "Noto Serif SC", "Songti SC", Newsreader, Georgia, serif; --rr-font-ui: var(--rr-font-ui-latin); --rr-font-prose: var(--rr-font-prose-latin); --rr-font-note: "LXGW WenKai", "Kaiti SC", "Newsreader", serif; --rr-font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; --rr-text-body: 17.5px; --rr-text-meta: 12.5px; --rr-leading-prose: 1.62; --rr-radius-s: 4px; --rr-radius-m: 6px; --rr-radius-pill: 999px; --rr-measure: 680px; --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; } [data-imprint="cinnabar"] { --rr-accent: #b23a2a; --rr-accent-soft: #dcaaa2; --rr-accent-wash: rgba(178, 58, 42, 0.08); --rr-selection: rgba(178, 58, 42, 0.18); } /* The page language leads the composite font stack. */ :lang(en) { --rr-font-ui: var(--rr-font-ui-latin); --rr-font-prose: var(--rr-font-prose-latin); } :lang(zh) { --rr-font-ui: var(--rr-font-ui-cjk); --rr-font-prose: var(--rr-font-prose-cjk); } /* Blog-local tokens (not part of the vendored set) */ :root { --ga-ink-soft: #3d4249; /* blockquotes, homepage summaries */ --ga-img-filter: none; } /* ── Night mode — a deliberate blog divergence from Riverrun's forced-light policy (there, the night surface is a component, not a theme). Values derive from the system's night tokens, warmed to mirror the paper; cinnabar lifted to #d97f6a for 6.8:1 on the night ground. `data-theme` is set on 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: #0b0b09; --rr-bg-raised: #15150f; --rr-bg-inset: #191811; --rr-bg-tint: #0e0e0a; --rr-ink: #e7e5dc; --rr-ink-muted: #9aa0a6; --rr-ink-faint: #82878f; --rr-ink-decorative: #565a5f; --rr-line: #2a2c30; --rr-hairline: rgba(231, 229, 220, 0.09); --rr-accent: #d97f6a; --rr-accent-soft: #7a453b; --rr-accent-wash: rgba(217, 127, 106, 0.10); --rr-selection: rgba(217, 127, 106, 0.28); --ga-ink-soft: #b7b5ab; --ga-img-filter: brightness(0.9); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --rr-bg: #0b0b09; --rr-bg-raised: #15150f; --rr-bg-inset: #191811; --rr-bg-tint: #0e0e0a; --rr-ink: #e7e5dc; --rr-ink-muted: #9aa0a6; --rr-ink-faint: #82878f; --rr-ink-decorative: #565a5f; --rr-line: #2a2c30; --rr-hairline: rgba(231, 229, 220, 0.09); --rr-accent: #d97f6a; --rr-accent-soft: #7a453b; --rr-accent-wash: rgba(217, 127, 106, 0.10); --rr-selection: rgba(217, 127, 106, 0.28); --ga-ink-soft: #b7b5ab; --ga-img-filter: brightness(0.9); } } /* Base */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--rr-bg); scroll-behavior: smooth; } body { font-family: var(--rr-font-prose); font-size: 16px; /* blog runs one notch below Riverrun's 17.5px body token — denser, lucumr-style; system token unchanged */ line-height: var(--rr-leading-prose); margin: 0; padding: 0; font-weight: 400; color: var(--rr-ink); background: var(--rr-bg); 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); } a { color: var(--rr-ink); font-weight: 400; text-decoration: none; border-bottom: 1px solid var(--rr-accent-soft); transition: color var(--rr-duration-fast) var(--rr-ease-out), border-color var(--rr-duration-fast) var(--rr-ease-out); } a:hover { color: var(--rr-accent); border-bottom-color: var(--rr-accent); } @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; } } /* Headlines — weight 500, hierarchy from size and whitespace */ h1, h2, h3, h4, h5, h6 { font-family: var(--rr-font-prose); font-weight: 500; color: var(--rr-ink); line-height: 1.28; text-wrap: pretty; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { border-bottom: none; } h1 { margin: 15px 0 25px 0; font-size: 30px; line-height: 1.25; } h2 { margin: 40px 0 12px 0; font-size: 22px; } h3 { margin: 32px 0 10px 0; font-size: 18.5px; font-weight: 600; } h4 { font-size: 17px; font-weight: 600; } /* Complete passages may switch typographic direction without overriding explicit UI, mono, or note roles. */ :where( p:lang(en), p:lang(zh), li:lang(en), li:lang(zh), dd:lang(en), dd:lang(zh), dt:lang(en), dt:lang(zh), figcaption:lang(en), figcaption:lang(zh), blockquote:lang(en), blockquote:lang(zh) ) { font-family: var(--rr-font-prose); } /* Content H1s (from markdown # headers) - between page title and h2 */ p.date ~ h1, p.date ~ * h1 { font-size: 25px; } /* Layout elements — one column: header, nav, body, footer all align to the same 680px measure (container = measure + padding) */ div.container { max-width: 680px; margin: 48px auto; padding: 0 40px; } /* Header and nav stack on one left edge, at every width — the same edge as the list, the dates, and the footer. No float: a right-aligned nav would be the only element breaking the single column. */ div.header, div.navigation { height: auto; } div.header { margin: 0; } div.navigation { margin: 10px 0 48px; } /* On the homepage the

is the wordmark, so the nav and the title are one masthead unit and get the same tight pairing the wordmark and nav get elsewhere. The tagline below carries the break to the post list. */ div.navigation:has(~ div.body div.home-intro) { margin-bottom: 20px; } div.header { font-family: var(--rr-font-prose); font-style: italic; font-weight: 600; font-size: 20px; } div.header a { border-bottom: none; } span.brand-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--rr-accent); margin-right: 8px; vertical-align: baseline; } div.navigation ul { margin: 0; padding: 0; list-style: none; } div.navigation ul li { display: inline; margin: 0 8px; padding: 0; } /* Flush with the column's left edge, not indented by the item gutter. */ div.navigation ul li:first-child { margin-left: 0; } div.navigation a, button.theme-toggle { font-family: var(--rr-font-ui); font-size: 13px; color: var(--rr-ink-muted); border-bottom: none; } button.theme-toggle { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; transition: color var(--rr-duration-fast) var(--rr-ease-out); } div.navigation a:hover, button.theme-toggle:hover { color: var(--rr-accent); } @media (pointer: coarse) { div.navigation a, button.theme-toggle { display: inline-block; padding: 10px 4px; } } div.body { clear: both; max-width: var(--rr-measure); margin: 0 auto; line-height: var(--rr-leading-prose); text-wrap: pretty; } div.body a { border-bottom: 1px solid var(--rr-accent-soft); } div.body a:hover { border-bottom-color: var(--rr-accent); } div.footer { margin-top: 55px; border-top: 1px solid var(--rr-hairline); padding-top: 18px; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--rr-font-ui); font-size: 13px; color: var(--rr-ink-muted); } div.footer p { margin: 0; } span.footer-meta { font-family: var(--rr-font-mono); font-size: 11.5px; color: var(--rr-ink-faint); } span.footer-meta a { color: var(--rr-ink-faint); } div.footer a { color: var(--rr-ink-muted); border-bottom: none; } div.footer a:hover { color: var(--rr-accent); } /* Margins */ p, div.line-block, ul, ol, pre, table { margin: 15px 0 15px 0; } ul ol, ol ul, ul ul, ol ol { margin: 10px 0; padding: 0 0 0 40px; } li { padding: 0; } li p { margin: 0; padding: 0; } li p + p { margin-top: 15px; } /* Blockquote — Tufte indent, italic, no border bar */ blockquote { font-style: italic; margin: 24px 32px; padding: 0; color: var(--ga-ink-soft); } :lang(zh) blockquote { font-style: normal; } /* Margin-note voice (批：) for asides in posts:
…
— seal added here, keep ≤2 sentences */ div.rr-note { margin: 16px 0 16px 24px; font-family: var(--rr-font-note); font-size: 14.5px; line-height: 1.7; color: var(--rr-ink-muted); } div.rr-note::before { content: "批："; color: var(--rr-accent); } /* Code formatting — quiet monochrome */ pre, code, tt { font-family: var(--rr-font-mono); font-size: 0.86em; } pre, code, tt, kbd, samp { text-autospace: no-autospace; } pre { line-height: 1.7; background: var(--rr-bg-inset); color: var(--rr-ink); padding: 14px 18px; overflow-x: auto; border-radius: var(--rr-radius-m); } code, tt { background: var(--rr-bg-inset); padding: 2px 5px; border-radius: var(--rr-radius-s); } pre code, pre tt { background: none; padding: 0; border-radius: 0; } /* Syntax highlighting (chroma, class-based) — Riverrun quiet monochrome: comments gray, keywords accent, strings soft; everything else ink. */ div.highlight pre { background: var(--rr-bg-inset); } .chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { color: var(--rr-ink-muted); font-style: italic; } .chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { color: var(--rr-accent); } .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss { color: var(--ga-ink-soft); } .chroma .hl { background: var(--rr-accent-wash); } img { max-width: 100%; height: auto; filter: var(--ga-img-filter); } /* Homepage intro — names what this is before the list starts */ div.home-intro h1 { margin: 0 0 6px; font-size: 24px; } div.home-intro p.tagline { margin: 0 0 48px; font-style: italic; font-size: 15px; color: var(--rr-ink-muted); } /* Blog overview — date-on-left rows. No extra indents: date column + detail fill the 680px measure. */ div.entry-overview { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--rr-hairline); } div.entry-overview h1, div.entry-overview div.summary, div.entry-overview div.summary p { display: inline; line-height: 1.5; } div.entry-overview h1 { margin: 0; font-size: 16.5px; font-family: var(--rr-font-prose); font-weight: 500; } div.entry-overview h1 a { font-weight: inherit; border-bottom: none; } div.entry-overview h1 a:hover { color: var(--rr-accent); } div.entry-overview h1:after { content: " —"; color: var(--rr-ink-decorative); } div.entry-overview div.summary, div.entry-overview div.summary p { color: var(--ga-ink-soft); font-size: 15px; } div.entry-overview div.summary, div.entry-overview div.date, div.entry-overview div.summary p { margin: 0; padding: 0; } div.entry-overview div.detail { margin-left: 124px; text-wrap: balance; } div.entry-overview div.date { float: left; width: 104px; color: var(--rr-ink-muted); text-align: right; font-family: var(--rr-font-mono); font-size: 13px; line-height: 27px; } /* Pagination */ div.pagination { margin: 36px 0 0 0; text-align: center; font-family: var(--rr-font-ui); font-size: 13px; color: var(--rr-ink-muted); } div.pagination strong { font-weight: normal; font-style: italic; } /* Single post page */ h1 + p.date { margin-top: -25px; } p.date { color: var(--rr-ink-muted); font-family: var(--rr-font-ui); font-size: 13px; } /* Tables — header rule in ink, rows in hairline, no cell borders */ div.body table { display: block; overflow-x: auto; border: none; border-collapse: collapse; background: none; width: max-content; max-width: 100%; font-size: 15px; } td, th { padding: 8px 12px; border: none; border-bottom: 1px solid var(--rr-hairline); } th { background: none; font-family: var(--rr-font-ui); font-size: 12px; font-weight: 600; text-align: left; color: var(--rr-ink-muted); border-bottom: 1px solid var(--rr-ink); } /* HR — the · · · beat */ hr { border: none; height: auto; margin: 40px auto; text-align: center; } hr::after { content: "· · ·"; color: var(--rr-ink-decorative); letter-spacing: 0.6em; font-size: 14px; } /* Tag Cloud — one size, quiet; weight carries in count order */ div.tag-cloud { line-height: 2.2; text-align: left; font-family: var(--rr-font-ui); font-size: 14px; } div.tag-cloud a.tag { margin: 0 0.8em 0 0; border-bottom: none; color: var(--rr-ink-muted); } div.tag-cloud a.tag:hover { color: var(--rr-accent); } div.tag-cloud a.tag-1 { font-size: 0.95em; } div.tag-cloud a.tag-2 { font-size: 1.0em; } div.tag-cloud a.tag-3 { font-size: 1.05em; } div.tag-cloud a.tag-4 { font-size: 1.1em; } div.tag-cloud a.tag-5 { font-size: 1.15em; } div.tag-cloud a.tag-6 { font-size: 1.2em; } div.tag-cloud a.tag-7 { font-size: 1.25em; } div.tag-cloud a.tag-8 { font-size: 1.3em; } div.tag-cloud a.tag-9 { font-size: 1.35em; } div.tag-cloud a.tag-10, div.tag-cloud a[class*="tag-"]:not([class*="tag-1"]):not([class*="tag-2"]):not([class*="tag-3"]):not([class*="tag-4"]):not([class*="tag-5"]):not([class*="tag-6"]):not([class*="tag-7"]):not([class*="tag-8"]):not([class*="tag-9"]) { font-size: 1.4em; } /* Post tags — pills */ div.post-tags { margin-top: 40px; padding-top: 15px; border-top: 1px solid var(--rr-hairline); font-family: var(--rr-font-ui); font-size: var(--rr-text-meta); } div.post-tags a { display: inline-block; margin-right: 0.6em; border: 1px solid var(--rr-line); border-radius: var(--rr-radius-pill); padding: 2px 9px; color: var(--rr-accent); border-bottom-width: 1px; } div.post-tags a:hover { border-color: var(--rr-accent-soft); } /* Mobile responsive */ @media only screen and (max-width: 900px) { div.entry-overview div.detail { margin-left: 124px; } } @media only screen and (max-width: 800px) { div.body { padding: 0; margin: 0; } div.container { padding: 16px; margin: 0; } /* Header/nav already stack on one left edge at every width; narrow screens only tighten the gap before the content. */ div.navigation { margin-bottom: 30px; } } @media only screen and (max-width: 600px) { div.entry-overview div.date { float: none; width: auto; text-align: left; margin-bottom: 2px; } div.entry-overview div.detail { margin-left: 0; } }