:root { color-scheme: light; --paper:#fffaf2; --ink:#352a25; --muted:#76655c; --red:#ab4325; --line:#eaded0; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif; line-height:1.85; }
a { color:var(--red); text-underline-offset:4px; }
header,main,footer { max-width:800px; margin:auto; padding:24px; }
header { display:flex; gap:20px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font-weight:800; font-size:20px; text-decoration:none; }
nav { display:flex; gap:20px; font-size:14px; }
main { padding-top:44px; padding-bottom:60px; }
h1 { font-size:clamp(28px,5vw,38px); line-height:1.35; margin:0 0 12px; }
h2 { font-size:21px; line-height:1.5; margin:36px 0 10px; }
p,li { font-size:16px; }
.intro { font-size:18px; color:var(--muted); }
.date { font-size:14px; color:var(--muted); }
.callout { border-left:4px solid var(--red); background:#f4e9db; padding:16px 20px; border-radius:0 12px 12px 0; }
details { padding:18px 0; border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:700; font-size:18px; }
details p:last-child { margin-bottom:0; }
footer { border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
@media(max-width:520px) { header { align-items:flex-start; flex-direction:column; gap:8px; } main { padding-top:30px; } }