:root {
    --accent: #4a5a6b;
    --bg: #fbfaf8;
    --fg: #23201d;
    --muted: #7b746d;
    --rule: #e3ded7;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161513;
        --fg: #e6e1da;
        --muted: #938c84;
        --rule: #2e2b27;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 20px;
    background: var(--bg);
    color: var(--fg);
    font: 17px/1.65 Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 42rem; margin: 0 auto; }

header {
    padding: 56px 0 28px;
    border-bottom: 1px solid var(--rule);
}

header h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--accent);
}

header h1 a { color: inherit; text-decoration: none; }

.tagline {
    margin: 8px 0 18px;
    color: var(--muted);
    font-size: 0.95rem;
    font-style: italic;
}

nav { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
nav a { color: var(--muted); text-decoration: none; margin-right: 4px; }
nav a:hover { color: var(--accent); }

main { padding: 8px 0 24px; }

.entry { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.entry:last-child { border-bottom: none; }

.entry h2 { margin: 6px 0 10px; font-size: 1.2rem; font-weight: 400; }
.entry h2 a { color: var(--fg); text-decoration: none; }
.entry h2 a:hover { color: var(--accent); }
.entry p { margin: 0; color: var(--muted); }

time {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

article.post { padding: 32px 0 8px; }
article.post h1 { margin: 10px 0 24px; font-size: 1.6rem; font-weight: 400; line-height: 1.3; }
article.post p { margin: 0 0 1.1em; }
article.post p:first-of-type { font-size: 1.05rem; }

.back { display: inline-block; margin: 20px 0 0; font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--accent); }

footer {
    margin-top: 48px;
    padding: 20px 0 56px;
    border-top: 1px solid var(--rule);
    font-size: 0.82rem;
    color: var(--muted);
}

@media (max-width: 480px) {
    body { font-size: 16px; }
    header { padding-top: 36px; }
}