:root { color-scheme: light; --paper:#f8f6f0; --ink:#25322e; --muted:#64716a; --line:#d9dfd7; --accent:#216354; --wash:#edf1e8; --panel:#fffdf8; --reader-size:18px; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --paper:#151c19; --ink:#e4e7df; --muted:#a3afa6; --line:#344139; --accent:#9cc9b4; --wash:#202d25; --panel:#1a241f; } }
:root[data-theme="dark"] { color-scheme:dark; --paper:#151c19; --ink:#e4e7df; --muted:#a3afa6; --line:#344139; --accent:#9cc9b4; --wash:#202d25; --panel:#1a241f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:4px; }
button { font:inherit; cursor:pointer; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.shell { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:5; padding:12px 18px; background:var(--panel); border:1px solid var(--accent); }
.skip-link:focus { top:12px; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:106px; border-bottom:1px solid var(--ink); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); font:600 30px/1.15 Georgia,"Times New Roman",serif; letter-spacing:-1px; }
.brand:hover { text-decoration:none; }
.brand svg { width:32px; height:32px; color:var(--accent); }
.brand-zh { display:inline-block; font:500 17px/1.2 "PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:2px; margin-left:14px; padding-left:14px; border-left:1px solid var(--line); }
.masthead-caption { margin:0; font-size:12px; color:var(--muted); text-align:center; }
.masthead-caption span { display:block; margin-top:3px; font-size:11px; letter-spacing:1px; }
.archive-shortcut { font-size:12px; color:var(--ink); white-space:nowrap; }
.archive-shortcut span { margin-left:5px; color:var(--muted); }
.edition-header { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; padding-block:48px 32px; }
.eyebrow { display:block; margin:0 0 12px; font-size:10px; line-height:1.5; font-weight:650; letter-spacing:1.5px; color:var(--muted); }
h1 { margin:0; font:400 clamp(32px,3.4vw,46px)/1.18 Georgia,"Times New Roman",serif; letter-spacing:-1.4px; }
.edition-subtitle { margin:12px 0 0; font-size:18px; color:var(--muted); letter-spacing:1px; }
.edition-date { text-align:right; white-space:nowrap; padding-bottom:3px; font-size:13px; }
.edition-date time { font-weight:600; }
.edition-date p { margin:5px 0 7px; color:var(--muted); font-size:12px; }
.edition-date>span { font-size:9px; letter-spacing:1.7px; color:var(--muted); }
.reader-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.reading-estimate { margin:0; color:var(--muted); font-size:12px; }
.reading-estimate>span:first-child { margin-left:5px; }
.dot { padding:0 12px; }
.reader-controls { display:flex; align-items:center; gap:16px; }
.language-switch { display:flex; border:1px solid var(--line); border-radius:5px; padding:3px; background:var(--panel); }
.language-switch button { border:0; border-radius:3px; padding:5px 12px; font-size:11px; background:transparent; color:var(--muted); }
.language-switch button[aria-pressed="true"] { background:var(--accent); color:var(--paper); }
.font-controls { display:flex; gap:4px; padding-left:8px; border-left:1px solid var(--line); }
.font-controls button,.theme-toggle { border:0; background:transparent; color:var(--ink); padding:5px 7px; min-width:30px; }
.font-controls button:disabled { opacity:.3; cursor:default; }
.theme-toggle { font-size:21px; line-height:1; }
.reading-layout { display:grid; grid-template-columns:160px minmax(0,1fr); gap:48px; padding-top:36px; }
.contents { min-width:0; }
.contents nav { position:sticky; top:32px; }
.contents nav>.eyebrow { margin-bottom:18px; font-size:9px; }
.contents nav>a { display:block; color:var(--ink); font-size:12px; line-height:1.4; margin:0 0 20px; }
.contents nav>a span { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.contents-note { margin-top:42px; font:italic 14px/1.6 Georgia,serif; color:var(--muted); }
.contents-note span { display:block; font:11px/1.8 "PingFang SC","Microsoft YaHei",sans-serif; margin-top:6px; }
main { min-width:0; }
main:focus { outline:none; }
.reader-section { margin:0 0 48px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.section-heading .eyebrow { margin-bottom:7px; }
h2 { margin:0; font:400 28px/1.25 Georgia,"Times New Roman",serif; letter-spacing:-.4px; }
h2>span { display:inline-block; margin-left:10px; font:400 17px/1.4 "PingFang SC","Microsoft YaHei",sans-serif; color:var(--muted); letter-spacing:1px; }
.section-count { flex-shrink:0; color:var(--muted); font-size:10px; letter-spacing:.5px; padding-bottom:3px; }
.language-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; }
.language-column { min-width:0; }
.language-label { display:block; color:var(--muted); font-size:9px; line-height:1.5; letter-spacing:1.5px; margin-bottom:11px; font-weight:650; }
.language-column p { margin:0; font-size:var(--reader-size); line-height:1.85; overflow-wrap:anywhere; }
.chinese p { line-height:1.95; letter-spacing:.3px; }
.language-column .translation-missing { color:var(--muted); font-size:14px; }
.overview .language-pair { margin-top:25px; }
.overview .language-column p { font-size:calc(var(--reader-size) + 1px); }
.top-story { background:var(--wash); border:1px solid var(--line); padding:28px 30px; }
.top-story>.eyebrow { color:var(--accent); margin-bottom:18px; }
.top-story h3 { margin:0; font:400 25px/1.5 Georgia,"Times New Roman",serif; letter-spacing:-.4px; overflow-wrap:anywhere; }
.top-story .chinese h3 { font:500 21px/1.75 "PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:.3px; }
.why { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.why h4 { margin:0 0 14px; font-size:11px; font-weight:650; }
.why h4>span { font-weight:400; margin-left:8px; color:var(--muted); }
.why .language-label { display:none; }
.why .language-column p { font-size:calc(var(--reader-size) - 2px); color:var(--muted); }
.original-link { display:inline-block; font-size:11px; font-weight:600; margin-top:22px; }
.original-link span { font-weight:400; margin-left:8px; }
.stories { padding:0; margin:0; list-style:none; }
.story { padding:27px 0 30px; border-bottom:1px solid var(--line); }
.story:last-child { border-bottom:0; padding-bottom:0; }
.story-meta { display:flex; gap:12px; align-items:center; margin-bottom:17px; }
.story-number { font:italic 17px/1 Georgia,serif; color:var(--accent); min-width:21px; }
.story-source { font-size:11px; line-height:1.4; color:var(--muted); }
.story-source a { color:var(--accent); }
.story-source a span { display:inline-block; padding-left:3px; }
.collection-notes { color:var(--muted); border-top:1px solid var(--line); padding:19px 0; font-size:11px; margin-bottom:38px; }
.collection-notes summary { cursor:pointer; color:var(--ink); }
.collection-notes summary span { margin-left:8px; color:var(--muted); }
.collection-notes p { margin:14px 0 0; line-height:1.9; }
.collection-notes p span { display:block; }
.edition-note { padding:18px 22px; background:var(--wash); font-size:13px; }
.edition-note span { display:block; margin-top:6px; }
.archive ul { list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
.archive a { display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); padding:12px 14px; font-size:12px; }
.archive a span:last-child { font-size:9px; color:var(--muted); }
.archive a.current { background:var(--wash); border-color:var(--accent); }
.page-footer { border-top:1px solid var(--ink); margin-top:24px; padding:25px 0 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:11px; color:var(--muted); }
.page-footer>a { color:var(--muted); }
.page-footer p { margin:0; text-align:center; }
.page-footer p span { display:block; margin-top:3px; font-size:10px; }
[data-language="en"] .language-column.chinese,[data-language="zh"] .language-column.english { display:none; }
[data-language="en"] .language-pair,[data-language="zh"] .language-pair { grid-template-columns:minmax(0,1fr); max-width:720px; }
@media (max-width:1000px) { .shell { width:calc(100% - 56px); } .reading-layout { grid-template-columns:130px minmax(0,1fr); gap:30px; } .language-pair { gap:24px; } .language-column p { font-size:calc(var(--reader-size) - 1px); } h2>span { display:block; margin:6px 0 0; font-size:15px; } }
@media (max-width:760px) { .shell { width:calc(100% - 40px); } .masthead { min-height:84px; } .brand { font-size:26px; } .masthead-caption { display:none; } .brand-zh { font-size:15px; margin-left:10px; padding-left:10px; } .edition-header { display:block; padding-top:32px; } .edition-date { text-align:left; padding-top:22px; } .edition-date>span { display:none; } .edition-date p { margin-bottom:0; } .reader-toolbar { gap:12px; } .reader-controls { width:100%; justify-content:space-between; gap:10px; } .language-switch button { padding:6px 10px; } .reading-layout { display:block; padding-top:0; } .contents { padding:20px 0; margin-bottom:24px; border-bottom:1px solid var(--line); } .contents nav { display:flex; overflow-x:auto; gap:22px; padding-bottom:4px; } .contents nav>a { flex-shrink:0; margin:0; font-size:11px; } .contents nav>.eyebrow,.contents-note { display:none; } .language-pair { grid-template-columns:minmax(0,1fr); gap:20px; } .language-column p { font-size:var(--reader-size); line-height:1.85; } .chinese p { line-height:1.95; } .language-label { margin-bottom:7px; } .reader-section { margin-bottom:36px; } .top-story { padding:24px 22px; } h2 { font-size:26px; } h2>span { display:inline-block; margin-left:8px; font-size:15px; } .top-story h3 { font-size:24px; } .page-footer { flex-wrap:wrap; gap:16px; } .page-footer>a:last-child { margin-left:auto; } .page-footer p { order:3; width:100%; text-align:left; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (max-width:760px) { .brand-zh { display:block; border:0; padding:0; margin:5px 0 0; font-size:12px; letter-spacing:3px; } .archive-shortcut { font-size:11px; } .reader-controls { flex-wrap:wrap; } }
@media (max-width:400px) { .masthead { gap:12px; } .brand { font-size:24px; gap:8px; } .brand svg { width:26px; height:26px; } .archive-shortcut { font-size:10px; } }
@media print { :root { --paper:#fff; --ink:#111; --muted:#555; --line:#ccc; --accent:#164c40; --wash:#f4f4f4; } .reader-controls,.contents,.archive-shortcut,.page-footer,.collection-notes { display:none; } .shell { width:100%; } .reading-layout { display:block; } .reader-section { break-inside:auto; } .story { break-inside:avoid; } .language-pair { grid-template-columns:1fr 1fr; } .language-column p { font-size:12pt; } }