:root { --ink:#17231e; --leaf:#1f5b45; --paper:#fff; --paper-2:#f8f8f5; --acid:#e0f25d; --line:#d9ddd5; --muted:#66685d; }
* { box-sizing:border-box; } html,body { background:var(--paper); } body { margin:0; color:var(--ink); font-family:Arial,Helvetica,sans-serif; } a { color:inherit; }
.masthead { width:min(1120px,calc(100% - 40px)); margin:auto; display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.wordmark { color:var(--leaf); font-family:Georgia,serif; text-transform:none; letter-spacing:-.06em; font-size:1.7rem; font-weight:bold; text-decoration:none; }.hero,.archive-browser,footer { width:min(1120px,calc(100% - 40px)); margin:auto; }
.hero { padding:74px 0 42px; }.kicker,.eyebrow { margin:0 0 12px; color:var(--leaf); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:bold; } h1,h2,h3 { font-family:Georgia,'Times New Roman',serif; font-weight:normal; }
.hero h1 { margin:0; font-size:clamp(3rem,6vw,5.3rem); letter-spacing:-.07em; line-height:.92; }.intro { font:1.18rem/1.6 Georgia,serif; max-width:610px; margin:24px 0 0; }.archive-browser { padding:32px 0 92px; }
.archive-tools { display:grid; grid-template-columns:2fr 1fr auto; gap:16px; align-items:end; padding:20px; border:1px solid var(--line); background:var(--paper-2); }.archive-tools label { display:grid; gap:7px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }.archive-tools input,.archive-tools select { width:100%; border:1px solid var(--line); border-radius:2px; padding:13px; color:var(--ink); background:#fff; font:1rem Arial,sans-serif; text-transform:none; letter-spacing:normal; }.archive-tools .comment-search { display:flex; align-items:center; gap:8px; padding:12px 0; white-space:nowrap; }.archive-tools .comment-search input { width:auto; accent-color:var(--leaf); }
.result-count { color:var(--muted); font-size:.85rem; margin:26px 0 14px; }.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.post-card { min-height:260px; background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; }.post-card>img { width:100%; height:140px; object-fit:cover; border-bottom:1px solid var(--line); }.post-card__body { padding:20px; display:flex; flex:1; flex-direction:column; }.post-card h2 { font-size:1.55rem; letter-spacing:-.04em; line-height:1.02; margin:0 0 17px; }.post-card h2 a { text-decoration:none; }.post-card h2 a:hover { color:var(--leaf); text-decoration:underline; }.chips { display:flex; gap:6px; flex-wrap:wrap; }.chips span { border:1px solid var(--line); border-radius:99px; padding:4px 8px; color:var(--leaf); font-size:.68rem; line-height:1; }.comment-count { margin:auto 0 0; padding-top:20px; color:var(--muted); font-size:.78rem; }
footer { border-top:1px solid var(--line); padding:25px 0 45px; color:var(--muted); font-size:.78rem; line-height:1.5; } footer a { color:var(--leaf); }.post-page { width:min(820px,calc(100% - 40px)); margin:auto; }.post-page .masthead { width:100%; }.back-link { color:var(--leaf); text-decoration:none; }.reading-post { margin:70px 0 34px; }.reading-post h1 { font-size:clamp(3rem,7vw,5.8rem); letter-spacing:-.07em; line-height:.9; margin:0 0 25px; }.reading-post>.chips { margin-bottom:46px; }.prose { font:1.18rem/1.72 Georgia,serif; }.prose p { margin:0 0 1.4em; }.prose img { display:block; max-width:100%; height:auto; margin:2rem auto; border:1px solid var(--line); }.prose a,.comment a { color:var(--leaf); text-underline-offset:3px; }.prose blockquote { margin:2em 0; padding:0 0 0 20px; border-left:3px solid var(--acid); }.prose pre { overflow:auto; padding:18px; background:#e8e2d5; }.source-note { margin:50px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }.comments { padding:48px 0 100px; }.comments>h2 { font-size:2.1rem; letter-spacing:-.04em; }.comment { padding:22px 0; border-top:1px solid var(--line); }.comment-body { font:1.04rem/1.6 Georgia,serif; }.comment-body p { margin:0 0 1em; }.comment-byline { color:var(--leaf); font-size:.75rem; font-weight:bold; line-height:1.5; margin:12px 0 0; }
@media (max-width:700px) { .masthead { width:min(100% - 28px,1120px); padding:18px 0; }.hero,.archive-browser,footer { width:min(100% - 28px,1120px); }.hero { padding:54px 0 38px; }.archive-tools,.post-grid { grid-template-columns:1fr; }.archive-tools .comment-search { padding:0; }.post-card { min-height:0; }.post-page { width:min(100% - 28px,820px); }.reading-post { margin-top:40px; } }