:root { --paper:#f8f4e9; --ink:#303b33; --green:#36584b; --muted:#6d7264; --line:#d9d5c7; --brick:#954c3e; --serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",serif; --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { color-scheme:light; scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; -webkit-font-smoothing:antialiased; }
a { color:var(--green); text-decoration-thickness:1px; text-underline-offset:5px; }
a:hover { color:var(--brick); }
a:focus-visible { outline:2px solid var(--brick); outline-offset:5px; border-radius:2px; }
.wrap { width:min(1040px,calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:fixed; top:8px; left:8px; z-index:10; padding:12px 16px; background:var(--paper); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding-block:38px 27px; border-bottom:1px solid var(--line); gap:24px; }
.wordmark { font-family:var(--serif); font-size:24px; font-weight:600; text-decoration:none; letter-spacing:2px; line-height:1.5; }
.wordmark span { display:block; font-family:Georgia,serif; font-weight:400; font-size:13px; letter-spacing:.5px; color:var(--muted); }
nav { display:flex; gap:26px; }
nav a { padding:12px 2px; text-decoration:none; font-size:14px; }
nav a[aria-current] { color:var(--brick); text-decoration:underline; }
h1,h2,h3 { font-family:var(--serif); font-weight:600; text-wrap:balance; }
.intro { display:grid; grid-template-columns:1fr 255px; gap:80px; padding-block:72px 65px; align-items:center; }
.intro h1 { font-size:44px; line-height:1.6; letter-spacing:3px; margin:0 0 24px; }
.intro .lede { max-width:490px; font-family:var(--serif); font-size:18px; line-height:2; margin:0; }
.intro .identity { font-size:12px; color:var(--muted); margin:23px 0 0; }
.portrait { margin:0; transform:rotate(2deg); }
.portrait img { width:100%; height:265px; object-fit:cover; object-position:50% 35%; display:block; border:8px solid #fffdf6; box-shadow:0 3px 12px #303b3310; }
.portrait figcaption { font-family:var(--serif); color:var(--muted); font-size:12px; margin-top:12px; text-align:center; }
.journal { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:68px; border-top:1px solid var(--line); padding-top:38px; }
.section-title { font-size:16px; margin:0 0 30px; color:var(--muted); font-weight:400; }
.entry { margin:0 0 34px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.entry:last-child { border:0; }
.meta { font-size:12px; line-height:1.8; color:var(--muted); display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.category { color:var(--brick); }
.entry h3 { font-size:27px; line-height:1.65; margin:12px 0; }
.entry h3 a { text-decoration:none; }
.entry p { font-family:var(--serif); font-size:16px; line-height:1.9; margin:0; color:var(--muted); }
.read-link { display:inline-block; font-size:13px; margin-top:18px; padding-block:5px; }
.margin-note { padding-top:55px; }
.margin-note h2 { font-size:18px; font-weight:400; margin:0 0 18px; }
.margin-note p { font-family:var(--serif); font-size:14px; line-height:2.1; color:var(--muted); margin:0 0 14px; }
.margin-note a { font-size:13px; }
.sprig { width:70px; height:85px; display:block; margin-bottom:20px; color:var(--green); }
.reading { max-width:680px; margin-inline:auto; padding-top:64px; }
.reading h1 { font-size:36px; line-height:1.6; margin:0 0 22px; letter-spacing:1px; }
.article-meta { padding-bottom:26px; border-bottom:1px solid var(--line); }
.prose { font-family:var(--serif); font-size:18px; line-height:2.05; overflow-wrap:anywhere; padding-top:20px; }
.prose p { margin:0 0 25px; }
.prose h2 { font-size:23px; line-height:1.7; margin:38px 0 22px; }
.prose h3 { font-size:20px; }
.prose img { max-width:100%; height:auto; }
.prose blockquote { border-left:2px solid var(--line); padding-left:20px; margin-left:0; color:var(--muted); }
.prose code { font-size:.85em; }
.prose pre { overflow:auto; background:#efecdf; padding:16px; line-height:1.7; }
.prose li { margin-bottom:8px; }
.post-end { display:flex; flex-wrap:wrap; gap:20px; padding-block:27px; border-top:1px solid var(--line); margin-top:35px; font-size:14px; }
.author-note { color:var(--muted); font-family:var(--sans); font-size:12px; line-height:1.9; }
.archive h2 { font-size:22px; margin:32px 0 24px; }
.archive ul { padding:0; list-style:none; }
.archive li { display:grid; grid-template-columns:92px 1fr; gap:20px; border-bottom:1px solid var(--line); padding-block:22px; align-items:baseline; }
.archive li a { font-family:var(--serif); font-size:21px; text-decoration:none; }
.archive time { color:var(--muted); font-size:13px; }
.archive .category { display:block; font-size:12px; margin-top:10px; }
.site-footer { margin-top:68px; padding-block:28px 40px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.site-footer p { font-family:var(--serif); font-size:16px; margin:0 0 18px; }
.site-footer div { display:flex; flex-wrap:wrap; gap:20px; line-height:1.8; }
.site-footer a { color:var(--muted); }
.not-found { min-height:360px; }
@media(max-width:760px) { .wrap { width:calc(100% - 44px); } .site-header { padding-top:25px; gap:16px; } .wordmark { font-size:20px; letter-spacing:1px; } nav { gap:16px; } nav a { font-size:13px; } .intro { grid-template-columns:1fr 145px; gap:24px; padding-block:48px; } .intro h1 { font-size:30px; letter-spacing:1px; } .intro .lede { font-size:16px; } .portrait img { height:175px; border-width:5px; } .journal { grid-template-columns:1fr; gap:0; } .margin-note { padding-top:0; display:none; } .reading { padding-top:44px; } .reading h1 { font-size:30px; } .prose { font-size:17px; } .entry h3 { font-size:25px; } }
@media(max-width:480px) { .site-header { align-items:start; } nav { gap:14px; padding-top:3px; } .wordmark { font-size:18px; } .wordmark span { font-size:12px; } .intro { grid-template-columns:1fr; position:relative; padding-top:37px; gap:24px; } .intro h1 { font-size:32px; margin-bottom:20px; } .intro .lede { max-width:285px; } .portrait { width:128px; margin-left:auto; margin-top:-3px; } .portrait img { height:144px; } .portrait figcaption { font-size:11px; } .intro .identity { margin-top:18px; } .journal { padding-top:28px; } .section-title { margin-bottom:24px; } .entry h3 { font-size:25px; } .reading h1 { font-size:29px; } .archive li { grid-template-columns:74px 1fr; gap:16px; } .archive li a { font-size:20px; } .site-footer { margin-top:44px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }