:root { color-scheme: light dark; --paper:#f7f0df; --surface:#fffaf0; --ink:#29231d; --muted:#675f54; --red:#b83327; --jade:#286b58; --gold:#c79239; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif; color:var(--ink); background:var(--paper); line-height:1.75; }
main { width:min(760px,calc(100% - 32px)); margin:0 auto; padding:52px 0 72px; }
header,section { padding:26px; margin-bottom:16px; background:var(--surface); border:1px solid color-mix(in srgb,var(--gold) 36%,transparent); border-radius:22px; }
h1,h2 { font-family:"Songti TC","Noto Serif TC",serif; }
h1 { margin:0 0 6px; font-size:clamp(2rem,8vw,3.2rem); }
h2 { margin-top:0; color:var(--red); }
a { color:var(--jade); }
.eyebrow { color:var(--red); font-weight:700; letter-spacing:.12em; }
nav { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
nav a { padding:8px 13px; border-radius:999px; background:#efe1bd; text-decoration:none; }
footer { padding:14px 4px; color:var(--muted); font-size:.9rem; }
ul { padding-left:1.4rem; }
@media (prefers-color-scheme:dark) { :root { --paper:#15110d; --surface:#211b15; --ink:#f5ead6; --muted:#c4b8a5; } nav a { background:#3b3021; } }