@charset "utf-8";

/* ═══════════════════════════════════════════════════════════
   Gradient Ascent · Riverrun (cinnabar imprint).
   Tokens vendored from ~/src/riverrun/riverrun/tokens.css v0.2 —
   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: #9aa0a6;
    --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: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --rr-font-prose: Newsreader, "Noto Serif SC", "Songti SC", Georgia, serif;
    --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;
}
[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);
}

/* Base */
html { background: var(--rr-bg); }
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);
    text-rendering: optimizeLegibility;
}
::selection { background: var(--rr-selection); }
a { color: var(--rr-ink); font-weight: 400; text-decoration: none; border-bottom: 1px solid var(--rr-accent-soft); transition: color 120ms, border-color 120ms; }
a:hover { color: var(--rr-accent); border-bottom-color: var(--rr-accent); }

/* 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; }

/* 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;
}

div.header { float: left; }
div.navigation { float: right; }
div.header, div.navigation {
    height: 25px;
    margin-bottom: 42px;
}

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;
}

div.navigation a {
    font-family: var(--rr-font-ui);
    font-size: 13px;
    color: var(--rr-ink-muted);
    border-bottom: none;
}
div.navigation a:hover { color: var(--rr-accent); }

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: #3d4249;
}

/* Margin-note voice (批：) for asides in posts:
   <div class="rr-note">…</div> — 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 {
    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);
    box-sizing: border-box;
}
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; }
img { max-width: 100%; height: auto; }

/* 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 36px;
    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-faint);
}

div.entry-overview div.summary,
div.entry-overview div.summary p { color: #3d4249; 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-faint);
    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;
    }
    div.header {
        float: none;
        height: auto;
        margin: 0;
    }
    div.navigation {
        float: none;
        height: auto;
        margin: 10px 0 30px 0;
    }
    div.navigation ul li:first-child { margin-left: 0; }
}

@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;
    }
}