:root { color-scheme: light; --ink:#18231d; --muted:#657166; --paper:#f8f5ec; --line:#d8ddcf; --accent:#d6a971; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.8 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width:820px; margin:auto; padding:44px 24px 100px; }
header { display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding-bottom:28px; }
header img { width:52px; height:52px; border-radius:12px; }
header strong { font-size:20px; letter-spacing:.04em; }
nav { margin-left:auto; display:flex; gap:20px; white-space:nowrap; }
a { color:var(--ink); text-decoration-color:var(--accent); text-underline-offset:4px; }
a:hover { color:#8d603c; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.eyebrow { display:inline-block; color:#9a7853; font-size:11px; font-weight:700; letter-spacing:.22em; margin-top:44px; }
h1 { margin:16px 0 8px; font-size:clamp(38px,6vw,56px); line-height:1.2; letter-spacing:-.04em; }
h2 { margin:46px 0 12px; font-size:22px; padding-top:18px; border-top:1px solid var(--line); }
p,li { color:#344239; }
.lead { font-size:18px; color:var(--muted); margin-top:8px; }
.draft { display:inline-block; padding:5px 11px; border:1px solid #a86c42; border-radius:100px; font-size:12px; color:#8d562f; letter-spacing:.08em; margin-top:28px; }
.box { background:#ecede5; border:1px solid #e1e5d9; border-radius:18px; padding:20px 24px; margin:28px 0; }
ul,ol { padding-left:23px; }
footer { color:var(--muted); font-size:13px; border-top:1px solid var(--line); margin-top:60px; padding-top:22px; }
@media (max-width:600px) { header{align-items:flex-start;flex-wrap:wrap;gap:10px} nav{width:100%;margin-left:0;gap:22px;font-size:13px} main{padding-top:24px} .eyebrow{margin-top:32px} h2{font-size:21px} .box{padding:18px 20px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }