.blog-head { padding: 80px 0 32px; background: var(--peach); color: var(--brown); }
.blog-head h1 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.08em; }
.blog-head p { max-width: 52ch; margin: 14px 0 0; }
.blog-list { padding: 56px 0 90px; }
.posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.posts > li { min-width: 0; }
.posts > li:first-child { grid-column: 1 / -1; }
.post-card { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 18px; background: #fff; border: 1px solid rgba(69,26,3,.15); border-radius: 4px 4px 24px 4px; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(46,16,101,.12); }
.post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; }
.post-card h2, .post-card h3 { font-size: 1.3rem; letter-spacing: -.04em; }
.posts > li:first-child .post-card h2, .posts > li:first-child .post-card h3 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.post-card p { margin: 0; color: var(--muted); }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--stackje-font-display), monospace; font-size: .75rem; color: var(--accent); }
.post-tags { font-size: .78rem; color: var(--muted); }
.blog-empty { padding: 40px 0; color: var(--muted); }
.pager { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.pager a { color: var(--accent); font-weight: 700; }
.article { max-width: 720px; margin: 0 auto; padding: 70px 24px 90px; }
.article h1 { font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.07em; margin: 14px 0 22px; }
.article .cover { width: 100%; border-radius: 4px; margin: 0 0 28px; }
.prose { font-size: 1.08rem; line-height: 1.8; }
.prose h2, .prose h3 { margin: 1.8em 0 .5em; letter-spacing: -.04em; }
.prose img { max-width: 100%; height: auto; }
.prose pre { overflow-x: auto; padding: 14px; background: var(--cream); border-radius: 4px; }
.prose a { color: var(--accent); }
.back-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.home-posts { background: var(--cream); padding: 90px 0; }
.home-posts .wrap { max-width: 1160px; }
.home-posts h2 { font-size: clamp(2rem, 4.3vw, 3.45rem); letter-spacing: -.07em; margin-bottom: 28px; }
.home-posts .all { display: inline-block; margin-top: 26px; color: var(--accent); font-weight: 700; }
.home-posts .posts > li:first-child { grid-column: auto; }
.home-posts .posts > li:first-child .post-card h3 { font-size: 1.3rem; }
@media (max-width: 800px) {
  .posts { grid-template-columns: 1fr; }
  .blog-head { padding: 56px 0 24px; }
}
@media (prefers-reduced-motion: reduce) { .post-card { transition: none; } .post-card:hover { transform: none; } }