/* Blog: list and post pages. Built by blog/build.py; tokens come from base.css. */
.blog, .post { max-width: 720px; padding-top: 56px; padding-bottom: 80px; }
.blog h1, .post h1 { font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.lede { font-size: 1.15rem; color: var(--gray-500); margin: 16px 0 40px; line-height: 1.6; }

.post-list { display: grid; gap: 16px; }
.post-card { display: block; padding: 24px; border: 1px solid var(--gray-150); border-radius: 16px; text-decoration: none; background: var(--white, #fff); transition: border-color .2s, transform .2s; }
.post-card:hover { border-color: var(--gray-300); transform: translateY(-2px); }
.post-card time, .post .date { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); font-weight: 600; }
.post-card h2 { font-size: 1.3rem; color: var(--ink); margin: 6px 0 8px; letter-spacing: -0.02em; }
.post-card p { color: var(--gray-500); line-height: 1.55; }

.post .back { display: inline-block; font-size: .85rem; color: var(--gray-400); text-decoration: none; margin-bottom: 28px; }
.post .back::before { content: "\2190  "; }
.post .date { margin-bottom: 10px; }
main.post h2 { font-size: 1.45rem; margin: 40px 0 12px; color: var(--ink); letter-spacing: -0.02em; }
main.post h3 { font-size: 1.1rem; margin: 28px 0 10px; color: var(--ink); }
.post p, .post li { font-size: 1.05rem; line-height: 1.75; color: var(--gray-700, #374151); }
.post p { margin-bottom: 18px; }
.post ul, .post ol { margin: 0 0 22px 22px; display: grid; gap: 8px; }
.post a { color: var(--ink); text-underline-offset: 3px; }
.post blockquote { margin: 28px 0; padding: 20px 24px; border-left: 4px solid #0f766e; background: var(--gray-50); border-radius: 0 12px 12px 0; font-size: 1.1rem; font-weight: 600; color: var(--ink); }