:root { --ink: #17231f; --muted: #5d6763; --line: #d8dfda; --paper: #fbfcfa; --accent: #126c59; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
.shell { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { min-height: 5.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); text-decoration: none; font-size: .83rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.brand-logo { display: block; width: clamp(8.5rem, 20vw, 10.75rem); height: auto; }
nav { display: flex; align-items: center; gap: 1rem; white-space: nowrap; }
nav a, .back-link { color: var(--accent); text-underline-offset: .2em; }
.hero { padding: 6rem 0 3.75rem; border-bottom: 1px solid var(--line); }
.hero h1, .post h1, .post-card h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.035em; line-height: 1.05; }
.hero h1 { margin: .35rem 0 1rem; font-size: clamp(3rem, 9vw, 5.4rem); }
.hero > p:last-child { max-width: 37rem; color: var(--muted); font-size: 1.16rem; }
.eyebrow { margin: 0; color: var(--accent); font-size: .73rem; font-weight: 750; letter-spacing: .095em; line-height: 1.4; text-transform: uppercase; }
.post-list { padding: 1.25rem 0 5rem; }
.post-card { padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.post-card h2 { margin: .55rem 0 0; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.post-card a { color: var(--ink); text-decoration-color: #aebcb6; text-underline-offset: .16em; }
.post { padding: 3.6rem 0 5rem; }
.post-header { margin-top: 2.8rem; padding-bottom: 2.4rem; border-bottom: 1px solid var(--line); }
.post h1 { margin: .5rem 0 1.2rem; font-size: clamp(2.6rem, 7vw, 4.5rem); }
time { color: var(--muted); font-size: .9rem; }
.prose { margin-top: 2.5rem; font-size: 1.08rem; }
.prose > * { max-width: 42rem; }
.prose h2, .prose h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.2; margin-top: 2.4em; }
.prose a { color: var(--accent); text-underline-offset: .18em; }
.prose img { max-width: 100%; height: auto; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding: 2rem 0; }
@media (max-width: 34rem) { .header-inner { min-height: 4.6rem; gap: .75rem; } .brand-logo { width: 7.5rem; } .wordmark { gap: .35rem; font-size: .7rem; } nav { gap: .7rem; font-size: .9rem; } .hero { padding-top: 4.25rem; } }