/* ═══════════════════════════════════════════════════════════════════════
   rruiying.github.io — editorial-minimal
   Warm paper, hairline rules, big serif headings, one restrained accent.
   All font sizes in rem (base 18px) so browser zoom / font settings scale.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --ink: #1c1c1c;
    --ink-soft: #575757;
    --ink-faint: #8c8c8c;
    --paper: #ffffff;
    --paper-deep: #f4f4f3;
    --hairline: #e6e6e5;
    --accent: #2d4a6d;
    --accent-strong: #16334f;
    --nav-bg: rgba(255, 255, 255, 0.92);
    --sel: #d9e2ec;
    --em: #a13c2f;
    --hl: #fdf0a8;
    --quiz: #6a45a8;
}

[data-theme="dark"] {
    --ink: #e6e4e1;
    --ink-soft: #aeacaa;
    --ink-faint: #7b7975;
    --paper: #141416;
    --paper-deep: #202023;
    --hairline: #2c2c2f;
    --accent: #92b4d8;
    --accent-strong: #bad1ea;
    --nav-bg: rgba(20, 20, 22, 0.9);
    --sel: #31465e;
    --em: #e0917f;
    --hl: #57511f;
    --quiz: #b39ae0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 112.5%;              /* 18px base */
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body {
    transition: background 0.2s, color 0.2s;
    font-family: 'Source Sans 3', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.7;
    font-size: 0.9444rem;           /* 17px */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

::selection {
    background: var(--sel);
}

/* ── Top navigation ─────────────────────────────────────────────────── */
.topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
}

.topnav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.topnav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 34px;
    overflow-x: auto;
    scrollbar-width: none;
}

.topnav-links::-webkit-scrollbar {
    display: none;
}

.topnav-links a {
    display: inline-block;
    font-size: 0.8333rem;
    color: var(--ink-soft);
    white-space: nowrap;
    padding: 18px 0 16px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s;
}

.topnav-links a:hover {
    color: var(--ink);
    text-decoration: none;
}

.topnav-links a.active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.page-wrapper {
    max-width: 1080px;
    margin: 0 auto;
    padding: 72px 32px 96px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 72px;
}

.page-wrapper.narrow {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1010px;
}

.page-wrapper.narrow.with-toc {
    grid-template-columns: 220px minmax(0, 680px);
    justify-content: center;
    gap: 56px;
}

/* ── Homepage sidebar ───────────────────────────────────────────────── */
.sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}

.avatar {
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    margin-bottom: 22px;
    filter: saturate(0.92);
}

.sidebar-name {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 1.3333rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.sidebar-cnname {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 0.8889rem;
    color: var(--ink-faint);
    margin: 2px 0 14px;
}

.sidebar-affiliation {
    font-size: 0.75rem;
    color: var(--ink-soft);
    line-height: 1.6;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--hairline);
}

.sidebar-links {
    list-style: none;
    font-size: 0.75rem;
    line-height: 2.2;
}

.sidebar-links span.label {
    display: inline-block;
    width: 58px;
    color: var(--ink-faint);
    font-size: 0.6667rem;
}

/* ── Homepage main column ───────────────────────────────────────────── */
.main-content h1 {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 1.2222rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 56px 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
}

.main-content section:first-child h1,
.main-content h1:first-child {
    margin-top: 0;
}

.main-content h2 {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 0.8889rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin: 30px 0 10px;
}

.main-content p {
    margin-bottom: 14px;
}

.main-content ul {
    margin: 0 0 14px 20px;
}

.intro-text {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 0.9722rem;
    line-height: 1.85;
    margin-bottom: 14px;
}

.interests {
    font-size: 0.8056rem;
    font-style: italic;
    color: var(--ink-soft);
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}

.empty-note {
    font-size: 0.8333rem;
    color: var(--ink-soft);
}

/* ── CV entries ─────────────────────────────────────────────────────── */
.cv-entry {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
    font-size: 0.8333rem;
    margin-bottom: 14px;
}

.cv-date {
    color: var(--ink-faint);
    font-size: 0.7222rem;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

.cv-details strong {
    font-weight: 600;
}

.cv-details .cv-sub {
    color: var(--ink-soft);
    font-size: 0.7778rem;
}

.cv-list {
    margin: 5px 0 4px 16px;
    font-size: 0.7778rem;
    color: var(--ink-soft);
    line-height: 1.65;
}

.cv-list li {
    margin-bottom: 3px;
}

/* ── News ───────────────────────────────────────────────────────────── */
.news-list {
    list-style: none;
    font-size: 0.8333rem;
}

.news-list li {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid var(--paper-deep);
}

.news-list li:last-child {
    border-bottom: none;
}

.news-date {
    color: var(--ink-faint);
    font-size: 0.7222rem;
    padding-top: 2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Blog index ─────────────────────────────────────────────────────── */
.blog-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.blog-header {
    margin-bottom: 30px;
}

.main-content .blog-title,
.blog-title {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 1.8889rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 0 8px;
}

.blog-subtitle {
    font-size: 0.8056rem;
    color: var(--ink-soft);
    max-width: 560px;
}

/* Folder tree */
.blog-tree {
    position: sticky;
    top: 100px;
    font-size: 0.7778rem;
    line-height: 1.5;
}

.blog-tree-title {
    font-size: 0.6667rem;
    color: var(--ink-faint);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
}

.tree-item {
    display: flex;
    align-items: baseline;
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    color: var(--ink-soft);
    text-align: left;
    padding: 5px 6px;
    border-radius: 3px;
    cursor: pointer;
    gap: 7px;
}

.tree-item:hover {
    color: var(--ink);
    background: var(--paper-deep);
}

.tree-item.active {
    color: var(--ink);
    font-weight: 600;
}

.tree-caret {
    flex: 0 0 auto;
    width: 0.9em;
    color: var(--ink-faint);
    font-size: 0.85em;
    transition: transform 0.15s;
    display: inline-block;
}

.tree-node.open > .tree-item .tree-caret {
    transform: rotate(90deg);
}

.tree-children {
    display: none;
    margin-left: 15px;
    border-left: 1px solid var(--hairline);
    padding-left: 4px;
}

.tree-node.open > .tree-children {
    display: block;
}

.tree-icon {
    flex: 0 0 auto;
    color: var(--ink-faint);
    font-size: 0.9em;
}

.tree-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-count {
    flex: 0 0 auto;
    color: var(--ink-faint);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

/* Search + sort */
.blog-controls {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 10px;
}

.blog-search {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: 0.8333rem;
    color: var(--ink);
    background: none;
    border: none;
    outline: none;
    padding: 4px 0;
}

.blog-search::placeholder {
    color: var(--ink-faint);
}

.blog-sort {
    flex: 0 0 auto;
    font: inherit;
    font-size: 0.7222rem;
    color: var(--ink-soft);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: right;
}

.blog-count {
    font-size: 0.6944rem;
    color: var(--ink-faint);
    margin: 10px 0 6px;
    font-variant-numeric: tabular-nums;
}

/* Post list rows */
.post-item {
    display: block;
    padding: 22px 0;
    border-bottom: 1px solid var(--paper-deep);
}

.post-item:last-child {
    border-bottom: none;
}

.post-item .post-meta {
    font-size: 0.7222rem;
    color: var(--ink-faint);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.post-item .post-title {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 1.1111rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin-bottom: 6px;
}

.post-item .post-title a {
    color: var(--ink);
}

.post-item .post-title a:hover {
    color: var(--accent);
    text-decoration: none;
}

.post-summary {
    font-size: 0.8056rem;
    color: var(--ink-soft);
    max-width: 620px;
    margin-bottom: 6px;
}

.post-tags {
    font-size: 0.7222rem;
    color: var(--ink-faint);
}

.post-tags .tag {
    margin-right: 10px;
}

.post-tags .tag::before {
    content: "#";
    opacity: 0.6;
}

.post-category {
    color: var(--ink-soft);
}

/* ── Post page ──────────────────────────────────────────────────────── */
.back-link {
    display: inline-block;
    font-size: 0.7222rem;
    color: var(--ink-faint);
    margin-bottom: 26px;
}

.back-link:hover {
    color: var(--accent);
}

.post-page h1 {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 1.8889rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    border-bottom: none;
    text-transform: none;
    padding-bottom: 0;
    margin: 0 0 12px;
}

.post-page > .post-meta {
    font-size: 0.7222rem;
    color: var(--ink-faint);
    line-height: 1.9;
    padding-bottom: 20px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--hairline);
    font-variant-numeric: tabular-nums;
}

.post-page p {
    font-family: 'Source Serif 4', 'Noto Serif SC', 'Songti SC', Georgia, serif;
    font-size: 0.9722rem;
    line-height: 1.95;
    margin-bottom: 18px;
}

.post-page ul,
.post-page ol {
    font-family: 'Source Serif 4', 'Noto Serif SC', 'Songti SC', Georgia, serif;
    font-size: 0.9444rem;
    line-height: 1.9;
    margin: 0 0 18px 24px;
}

.post-page li {
    margin-bottom: 7px;
}

.post-page h2 {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 1.2778rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 48px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
}

.post-page h3 {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 1.0278rem;
    font-weight: 600;
    color: var(--ink);
    margin: 32px 0 10px;
}

.post-page blockquote {
    border-left: 2px solid var(--ink-faint);
    padding: 2px 0 2px 20px;
    margin: 0 0 18px;
}

.post-page blockquote p {
    font-size: 0.8333rem;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.post-page blockquote p:last-child {
    margin-bottom: 0;
}

.post-page figure {
    margin: 26px 0;
}

.post-page figure img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 78vh;
    border-radius: 2px;
    border: 1px solid var(--hairline);
    background: #fff;
}

[data-theme="dark"] .post-page figure img {
    filter: brightness(0.85);
}

.post-page figcaption {
    font-size: 0.7222rem;
    color: var(--ink-faint);
    text-align: center;
    margin-top: 9px;
    line-height: 1.5;
}

.post-page code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7222rem;
    background: var(--paper-deep);
    border-radius: 3px;
    padding: 1px 6px;
}

.post-page pre {
    background: var(--paper-deep);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    padding: 14px 18px;
    overflow-x: auto;
    margin-bottom: 18px;
    line-height: 1.6;
}

.post-page pre code {
    background: none;
    padding: 0;
    font-size: 0.7222rem;
}

.post-page table {
    border-collapse: collapse;
    margin: 4px 0 18px;
    font-size: 0.8056rem;
    display: block;
    overflow-x: auto;
}

.post-page th,
.post-page td {
    border: 1px solid var(--hairline);
    padding: 6px 14px;
    text-align: left;
}

.post-page th {
    background: var(--paper-deep);
    font-weight: 600;
}

.post-page hr {
    border: none;
    border-top: 1px solid var(--hairline);
    margin: 32px 0;
}

.post-page mjx-container[display="true"] {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
}

/* ── Table of contents ──────────────────────────────────────────────── */
.post-toc-col {
    min-width: 0;
    /* stretches to the full height of the content row, bounding the sticky nav */
}

.post-toc {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
}

.post-toc-title {
    font-size: 0.6667rem;
    color: var(--ink-faint);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
}

.post-toc ul {
    list-style: none;
}

.post-toc a {
    display: block;
    font-size: 0.7222rem;
    line-height: 1.45;
    color: var(--ink-faint);
    padding: 4px 0 4px 12px;
    border-left: 1px solid var(--hairline);
}

.post-toc .toc-h3 a {
    padding-left: 26px;
    font-size: 0.6944rem;
}

.post-toc a:hover {
    color: var(--ink);
    text-decoration: none;
}

.post-toc a.active {
    color: var(--accent);
    border-left: 2px solid var(--accent);
    padding-left: 11px;
}

.post-toc .toc-h3 a.active {
    padding-left: 25px;
}

/* ── Comments ───────────────────────────────────────────────────────── */
.post-comments {
    margin-top: 56px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
}

.post-comments-title {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 1.0278rem;
    font-weight: 600;
    border-bottom: none;
    margin: 18px 0 4px;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.page-footer {
    grid-column: 1 / -1;
    margin-top: 56px;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
    font-size: 0.6944rem;
    color: var(--ink-faint);
    text-align: center;
}



/* ── Emphasis inside posts ──────────────────────────────────────────── */
.post-page p strong,
.post-page li strong {
    color: var(--em);
    font-weight: 600;
}

.post-page mark {
    background: var(--hl);
    color: var(--ink);
    padding: 0 4px;
    border-radius: 3px;
}

.post-page .admonition {
    border-left: 3px solid var(--accent);
    background: var(--paper-deep);
    border-radius: 0 6px 6px 0;
    padding: 12px 18px 4px;
    margin: 0 0 18px;
}

.post-page .admonition-title {
    font-family: 'Source Sans 3', 'Noto Sans SC', sans-serif;
    font-size: 0.7778rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 6px;
}

.post-page .admonition p {
    font-size: 0.8889rem;
    margin-bottom: 10px;
}

.post-page .admonition.warning {
    border-left-color: #b8860b;
}

.post-page .admonition.warning .admonition-title {
    color: #b8860b;
}


.post-page .quiz-q {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-weight: 600;
    color: var(--quiz);
    margin: 26px 0 10px;
}

.post-page .quiz-badge {
    display: inline-block;
    font-family: 'Source Sans 3', 'Noto Sans SC', sans-serif;
    font-size: 0.6389rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--paper);
    background: var(--quiz);
    border-radius: 3px;
    padding: 1px 9px 2px;
    margin-right: 10px;
    vertical-align: 2px;
}

/* ── Theme toggle ───────────────────────────────────────────────────── */
.theme-toggle {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8889rem;
    line-height: 1;
    padding: 8px 10px;
    border-radius: 5px;
    color: var(--ink-soft);
}

.theme-toggle:hover {
    background: var(--paper-deep);
}

/* ── Sidebar icon links ─────────────────────────────────────────────── */
.sidebar-links li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sidebar-links .sicon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--ink-faint);
}

.sidebar-links .sicon svg {
    width: 14px;
    height: 14px;
}

/* ── Share row ──────────────────────────────────────────────────────── */
.post-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline);
    font-size: 0.7222rem;
}

.post-share .share-label {
    color: var(--ink-faint);
}

.post-share a,
.post-share button {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    color: var(--ink-soft);
    padding: 0;
}

.post-share a:hover,
.post-share button:hover {
    color: var(--accent);
    text-decoration: none;
}

.wechat-qr {
    margin-top: 14px;
}

.wechat-qr img {
    display: block;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: #fff;
    padding: 8px;
}

.wechat-qr-tip {
    font-size: 0.6944rem;
    color: var(--ink-faint);
    margin-top: 6px;
}

/* ── Related posts ──────────────────────────────────────────────────── */
.post-related {
    margin-top: 44px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
}

.post-related ul {
    list-style: none;
    margin: 12px 0 0;
    font-family: inherit;
}

.post-related li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 6px 0;
    margin: 0;
}

.post-related .rel-date {
    flex: 0 0 auto;
    color: var(--ink-faint);
    font-size: 0.6944rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.post-related a {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    font-size: 0.8611rem;
    color: var(--ink);
}

.post-related a:hover {
    color: var(--accent);
    text-decoration: none;
}

/* ── Blog pagination ────────────────────────────────────────────────── */
.blog-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 30px;
    font-size: 0.7778rem;
}

.blog-pager button {
    background: none;
    border: 1px solid transparent;
    font: inherit;
    color: var(--ink-soft);
    padding: 4px 11px;
    border-radius: 4px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.blog-pager button:hover:not(:disabled) {
    color: var(--ink);
    background: var(--paper-deep);
}

.blog-pager button.current {
    color: var(--ink);
    font-weight: 600;
    border-color: var(--hairline);
}

.blog-pager button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ── giscus ─────────────────────────────────────────────────────────── */
.giscus,
#giscus-slot {
    margin-top: 14px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .page-wrapper.narrow.with-toc {
        grid-template-columns: minmax(0, 1fr);
    }

    .post-toc-col {
        display: none;
    }

    .blog-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .blog-tree {
        position: static;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--hairline);
    }
}

@media (max-width: 760px) {
    .topnav-inner {
        padding: 0 20px;
    }

    .topnav-links {
        gap: 22px;
    }

    .page-wrapper {
        grid-template-columns: minmax(0, 1fr);
        padding: 40px 20px 64px;
        gap: 40px;
    }

    .sidebar {
        position: static;
        text-align: center;
    }

    .avatar {
        width: 200px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        margin: 0 auto 18px;
    }

    .sidebar-links {
        display: inline-block;
        text-align: left;
    }

    .cv-entry,
    .news-list li {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}