:root { --ink: #242826; --soft: #68716c; --paper: #fcfcfa; --line: rgba(36, 40, 38, .14); --serif: "Noto Serif SC", "Songti SC", SimSun, serif; --sans: "Manrope", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); margin: 0; }
a { color: inherit; text-decoration: none; }
.blog-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; height: 64px; justify-content: space-between; padding: 0 max(5vw, 24px); }
.blog-brand { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.blog-header nav { display: flex; gap: 22px; }
.blog-header nav a { color: var(--soft); font-size: 13px; }
.blog-header nav a[aria-current="page"], .blog-header nav a:hover { color: var(--ink); }
.post-shell, .archive-shell { margin: 0 auto; max-width: 780px; padding: 72px max(5vw, 24px) 96px; }
.back-link { color: var(--soft); display: inline-block; font-size: 13px; margin-bottom: 46px; }
.back-link:hover { color: var(--ink); }
.post-meta, .page-kicker { color: var(--soft); font-size: 12px; margin: 0 0 15px; }
.post h1, .archive-shell h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 54px); line-height: 1.28; margin: 0; }
.post-excerpt { color: var(--soft); font-family: var(--serif); font-size: 19px; line-height: 1.8; margin: 24px 0 38px; }
.post-cover { display: block; margin: 0 0 40px; max-height: 460px; object-fit: cover; width: 100%; }
.post-content { font-family: var(--serif); font-size: 17px; line-height: 2; max-width: 680px; }
.post-content p { margin: 0 0 25px; }
.post-content h2 { font-size: 26px; line-height: 1.5; margin: 45px 0 18px; }
.post-tags { color: var(--soft); font-size: 12px; margin-top: 50px; }
.archive-list { margin-top: 40px; }
.archive-item { border-top: 1px solid var(--line); display: grid; gap: 8px 28px; grid-template-columns: 112px minmax(0, 1fr); padding: 22px 0; }
.archive-item:last-child { border-bottom: 1px solid var(--line); }
.archive-date { color: var(--soft); font-size: 12px; }
.archive-item h2 { font-family: var(--serif); font-size: 21px; line-height: 1.45; margin: 0; }
.archive-item p { color: var(--soft); font-size: 14px; grid-column: 2; line-height: 1.75; margin: 0; }
.empty-state { color: var(--soft); font-size: 15px; padding: 30px 0; }
.blog-footer { border-top: 1px solid var(--line); color: var(--soft); font-size: 12px; padding: 24px max(5vw, 24px); }
@media (max-width: 600px) { .post-shell, .archive-shell { padding-top: 48px; } .archive-item { display: block; } .archive-date { display: block; margin-bottom: 8px; } .archive-item p { margin-top: 8px; } .post-content { font-size: 16px; } }