:root { --ink:#1d1d1f; --muted:#6b6b72; --line:#e5e5ea; --accent:#2f6f5e; --bg:#fbfaf7; --max:760px; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font-family: var(--font-body); font-size:18px; line-height:1.7; }
a { color:var(--accent); }
header.site, footer.site { max-width:1040px; margin:0 auto; padding:18px 24px; display:flex; justify-content:space-between; align-items:center; font-family: var(--font-heading); font-size:15px; }
header.site .brand { font-weight:700; font-size:18px; color:var(--ink); text-decoration:none; }
header.site nav a { margin-left:16px; color:var(--muted); text-decoration:none; }
footer.site { color:var(--muted); border-top:1px solid var(--line); margin-top:48px; }
main { max-width:1040px; margin:0 auto; padding:0 24px; }
h1, h2, h3 { font-family: var(--font-heading); line-height:1.25; }
.page-title { font-size:34px; margin:24px 0; }
.list { display:grid; gap:20px; }
.card { display:grid; grid-template-columns:200px 1fr; gap:20px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; }
.card img { width:100%; height:140px; object-fit:cover; border-radius:6px; }
.card h2 { margin:0 0 4px; font-size:22px; }
.card h2 a { color:var(--ink); text-decoration:none; }
.card p { margin:6px 0; font-size:16px; color:#333; }
.open { font-size:15px; }
.meta { color:var(--muted); font-size:14px; margin:0; }
.draft { background:#fff3cd; color:#7a5b00; padding:2px 8px; border-radius:4px; font-size:12px; }
.post { max-width:var(--max); margin:0 auto; }
.post h1 { font-size:42px; margin:8px 0 16px; }
.post .cover { width:100%; border-radius:8px; margin:12px 0 24px; }
.content h1, .content h2, .content h3 { margin-top:1.6em; }
.content h2 { font-size:28px; }
.content h3 { font-size:22px; }
.content img { max-width:100%; height:auto; border-radius:6px; }
.content figure { margin:1.4em 0; }
.content figcaption { color:var(--muted); font-size:14px; text-align:center; }
.content blockquote { border-left:3px solid var(--accent); margin-left:0; padding-left:16px; color:#444; }
.content pre { background:#f1f1f3; padding:12px; overflow:auto; border-radius:6px; }
.btn { display:inline-block; background:var(--accent); color:#fff; padding:8px 16px; border-radius:6px; text-decoration:none; font-family: var(--font-heading); }
@media (max-width:640px) { .card { grid-template-columns:1fr; } .post h1 { font-size:30px; } body{font-size:17px;} }