.blog-page{background:#fff;color:#101828;min-height:max(320px,calc(100vh - 620px));padding:56px 0 190px}
.blog-page .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.blog-page .wrap--text{max-width:760px}
.blog-page h1{font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.1;font-weight:600;letter-spacing:-.01em;margin:0 0 .6em}
.blog-page h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;font-weight:600;margin:1.6em 0 .5em}
.blog-page h3{font-size:1.25rem;line-height:1.3;font-weight:600;margin:1.4em 0 .4em}
.blog-page p{margin:0 0 1em;line-height:1.7}
.blog-page a{color:inherit}
.blog-page img{max-width:100%;height:auto;display:block}
.blog-empty{color:#4b5563;font-size:1.125rem}
.blog-page .lead{font-size:1.25rem;color:#4b5563;max-width:640px}
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:32px;list-style:none;margin:0;padding:0}
.post-card a{display:block;text-decoration:none}
.post-card a:hover h2,.post-card a:focus-visible h2{text-decoration:underline}
.post-card img{border-radius:16px;margin-bottom:16px;aspect-ratio:16/9;object-fit:cover;width:100%}
.blog-page .post-card h2{font-size:1.35rem;margin:0 0 .4em}
.post-card p{color:#4b5563;margin-bottom:.6em}
.post-card time{color:#6b7280;font-size:.9rem}
.pager{display:flex;justify-content:space-between;gap:12px;margin:48px 0 0}
.pager a{text-decoration:underline}
.post-header{margin-bottom:32px}
.post-header img{border-radius:16px;margin-top:8px}
.post-meta{color:#4b5563;font-size:.95rem;display:flex;flex-wrap:wrap;gap:6px 18px}
.tag{display:inline-block;background:#f3f4f6;border-radius:999px;padding:4px 12px;font-size:.85rem;text-decoration:none;margin-bottom:12px}
.blog-page .prose{max-width:760px;margin:0 auto;padding:0 20px}
.blog-page .prose a{text-decoration:underline}
.blog-page .prose ul{list-style:disc;padding-left:1.4em;margin:0 0 1em}
.blog-page .prose ol{list-style:decimal;padding-left:1.4em;margin:0 0 1em}
.blog-page .prose li{margin:.3em 0;line-height:1.7}
.blog-page .prose blockquote{margin:1.5em 0;padding-left:20px;border-left:4px solid #e5e7eb;color:#4b5563}
.blog-page .prose code{background:#f3f4f6;padding:.1em .35em;border-radius:6px;font-size:.92em}
.blog-page figure{margin:1.5em auto;max-width:760px;padding:0 20px}
.blog-page figure img{border-radius:16px;margin:0 auto}
.blog-page figcaption{font-size:.92rem;color:#4b5563;margin-top:10px}
@media (max-width:640px){.blog-page{padding:36px 0 150px}}