/* Automat blog skin (2026-10-23). Loaded after the blog template's own <style>,
   so it overrides it. Base tokens come from automat.css. */
body { font-family: var(--font); background: var(--paper); color: var(--navy); line-height: 1.6; }
.container { max-width: 820px; padding: 0 24px; }
header.site-head { margin-bottom: 0; padding: 0; color: var(--navy); }
header.site-head .wrap { display: flex; }
header.site-head h1 { font-size: inherit; }
header.site-head a { white-space: normal; }
.blog-title { font-weight: 850; font-stretch: 120%; letter-spacing: -0.025em; line-height: 0.95; font-size: clamp(44px, 6vw, 80px); margin: 64px 0 12px; color: var(--navy); }
.blog-lede { color: var(--muted); font-size: 19px; margin: 0 0 40px; max-width: 32em; }
.post-card, article { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.post-card { margin-bottom: 24px; }
.post-card .card-image, .hero { background: var(--aqua-wash); }
.post-card .card-body { padding: 24px 26px 26px; }
.post-card h2 { font-weight: 800; font-stretch: 112%; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.post-card h2 a { color: var(--navy); }
.post-card h2 a:hover { color: var(--aqua-ink); }
.post-meta { color: var(--muted); font-size: 14px; }
.post-excerpt { color: var(--muted); }
.category-tag { background: var(--aqua-wash); color: var(--navy); border-radius: 999px; font-size: 12px; font-weight: 700; padding: 3px 10px; }
.post-page { padding-top: 48px; }
article h1 { font-weight: 850; font-stretch: 116%; letter-spacing: -0.02em; color: var(--navy); font-size: clamp(30px, 4vw, 44px); line-height: 1.05; }
.post-content { font-size: 18px; }
.post-content h2, .post-content h3 { color: var(--navy); font-weight: 800; font-stretch: 110%; }
.post-content a, .back-link { color: var(--aqua-ink); font-weight: 600; }
.empty { color: var(--muted); }
footer.blog-foot { background: var(--navy); color: var(--muted-on-navy); text-align: left; padding: 0; margin-top: 72px; font-size: 14px; }
footer.blog-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: 40px; padding-bottom: 40px; }
footer.blog-foot img { height: 30px; width: auto; }
footer.blog-foot a { color: var(--white); }
footer.blog-foot nav { display: flex; gap: 8px 24px; flex-wrap: wrap; }