:root { --serif: "Cormorant Garamond", Georgia, serif; --ui: "Manrope", system-ui, -apple-system, Arial, sans-serif; }
[data-theme="dark"] { --bg:#130f0d; --card:rgba(255,240,230,.05); --ink:#f7eee7; --muted:#bba69b; --copper:#c98a6f; --line:rgba(244,218,205,.16); color-scheme:dark; }
[data-theme="light"] { --bg:#f8f1ea; --card:#fffaf5; --ink:#2a1d18; --muted:#76615a; --copper:#96593f; --line:rgba(90,55,40,.16); color-scheme:light; }
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); font:16px/1.65 var(--ui); -webkit-font-smoothing:antialiased; }
a { color:var(--copper); text-underline-offset:3px; }
.bar { max-width:760px; margin:0 auto; padding:22px 20px 0; display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.bar .logo { font:500 30px/1 var(--serif); letter-spacing:.04em; color:var(--ink); text-decoration:none; }
.bar a.back { font-size:14px; color:var(--muted); text-decoration:none; }
.bar a.back:hover { color:var(--copper); }
main { max-width:760px; margin:0 auto; padding:28px 20px 40px; }
h1 { font:500 clamp(32px,6vw,44px)/1.12 var(--serif); margin-bottom:6px; }
.ed { color:var(--muted); font-size:14px; margin-bottom:28px; }
h2 { font:500 26px/1.2 var(--serif); margin:34px 0 10px; color:var(--ink); }
h3 { font:600 16px/1.4 var(--ui); margin:18px 0 6px; }
p, li { color:var(--ink); }
p { margin:10px 0; }
ul, ol { margin:10px 0 10px 22px; }
li { margin:5px 0; }
.note { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:16px 0; font-size:15px; }
.draft { background:#7a2d1f; color:#fff; padding:10px 16px; text-align:center; font-size:14px; }
footer { max-width:760px; margin:0 auto; padding:24px 20px 48px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
footer nav { display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:12px; }
footer a { color:var(--muted); }
footer a:hover { color:var(--copper); }