:root {
    --accent: #2f5d8a;
    --bg: #fdfdfd;
    --fg: #222831;
    --muted: #6b7280;
    --rule: #e6e8eb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #7aa7d9;
        --bg: #0e1116;
        --fg: #e5e9f0;
        --muted: #8b94a3;
        --rule: #252a33;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 20px;
    background: var(--bg);
    color: var(--fg);
    font: 17px/1.65 Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
    -webkit-text-size-adjust: 100%;
}

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

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

header h1 {
    margin: 0;
    font-family: inherit;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    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: calc(17px - 1px); }
    header { padding-top: 36px; }
}