:root { --ink: #171614; --paper: #f2efe8; --muted: #66625c; --line: #cbc6bc; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Noto Sans SC", sans-serif; }
a { color: inherit; }
header, footer { display: flex; justify-content: space-between; padding: 20px 4vw; border-bottom: 1px solid var(--line); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .05em; }
header a, footer a { text-decoration: none; }
footer { border-top: 1px solid var(--line); border-bottom: 0; }
main { padding: 88px 4vw 120px; }
article { max-width: 920px; margin: 0 auto; }
.eyebrow { margin: 0 0 22px; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .08em; color: var(--muted); }
h1 { max-width: 800px; margin: 0 0 70px; font-family: "Libre Baskerville", "Noto Sans SC", serif; font-size: clamp(34px, 5vw, 66px); font-weight: 400; line-height: 1.3; }
.article-body { max-width: 700px; margin: 0 auto; }
.article-body p { margin: 0 0 25px; font-size: 16px; line-height: 2; }
.article-body h2 { margin: 72px 0 28px; font-family: "Libre Baskerville", "Noto Sans SC", serif; font-size: 25px; font-weight: 400; line-height: 1.5; }
.article-body a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body figure { margin: 42px 0; }
.article-body img { display: block; width: 100%; max-height: 78vh; object-fit: contain; background: #ddd9d1; }
@media (max-width: 700px) { header, footer { padding: 18px 6vw; } main { padding: 58px 6vw 80px; } h1 { margin-bottom: 48px; font-size: 34px; } .article-body p { font-size: 15px; line-height: 1.9; } .article-body figure { margin: 30px 0; } }