:root { color-scheme: light; --ink: #292723; --muted: #716d65; --paper: #f8f4ec; --accent: #b44b32; --line: #ded6c8; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Georgia, 'Yu Mincho', serif; line-height: 1.8; }
a { color: inherit; text-decoration-color: #c8a99d; text-underline-offset: .2em; }
.site-header { padding: 3rem max(5vw, 1.25rem) 2.5rem; text-align: center; border-bottom: 1px solid var(--line); }
.site-title { color: var(--ink); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: bold; letter-spacing: -.04em; text-decoration: none; }
.site-header p { margin: .25rem 0 0; color: var(--muted); font-family: sans-serif; font-size: .85rem; letter-spacing: .12em; }
main { width: min(900px, calc(100% - 2.5rem)); margin: 4rem auto; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .4rem; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.2; }
.eyebrow, .article-number { color: var(--accent); font: bold .7rem sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.button, button { display: inline-block; border: 1px solid var(--ink); padding: .65rem 1rem; background: var(--ink); color: white; font: bold .8rem sans-serif; text-decoration: none; cursor: pointer; }
.article-list { border-top: 1px solid var(--line); }
.card { padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.card h2 { margin: .35rem 0; font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.35; }
.card h2 a { text-decoration: none; }
.card p, .intro { color: var(--muted); }
.read-more { color: var(--accent); font: bold .8rem sans-serif; }
.post { padding: 1rem 0 3rem; }
.post h1 { max-width: 16em; margin-top: .5rem; }
.post-body { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); font-size: 1.12rem; }
.post-nav { display: flex; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: sans-serif; font-size: .85rem; }
.form-page { max-width: 700px; }
form { margin: 2rem 0; }
label { display: block; margin: 1.25rem 0 .35rem; font: bold .85rem sans-serif; }
input, textarea { width: 100%; border: 1px solid #bcb3a5; border-radius: 0; padding: .8rem; background: #fffdf8; color: var(--ink); font: 1rem sans-serif; }
textarea { resize: vertical; }
button { margin-top: 1.25rem; }
code { padding: .1em .3em; background: #ebe4d8; font-size: .85em; }
.back-link { font-family: sans-serif; font-size: .85rem; }
.message { padding: 4rem 0; text-align: center; }
.status { color: var(--accent); font-size: 4rem; font-weight: bold; line-height: 1; }
footer { padding: 2rem; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font: .72rem sans-serif; letter-spacing: .1em; }
@media (max-width: 600px) { main { margin: 2.5rem auto; } .page-heading { align-items: start; flex-direction: column; } .post-nav { gap: 1rem; flex-direction: column; } }