/* public blog pages served by the Cloudflare Worker (loaded after app.css + landing.css) */
.blog .post, .blog .blog-index { max-width: 1120px; margin: 0 auto; padding: 48px 24px 80px; }
.blog .post { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.blog .post .prose { padding: 0; max-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 40px 48px; }
.blog .post .prose .eyebrow { color: var(--brand); margin-bottom: 8px; }
.blog .post-side { position: sticky; top: 24px; }
.blog .card.side { padding: 20px; display: grid; gap: 12px; }
.blog .card.side p { color: var(--ink2); font-size: 13px; line-height: 1.55; }
.blog .blog-index h1 { font-size: 44px; margin: 8px 0 12px; }
.blog .lede { color: var(--ink2); font-size: 17px; max-width: 640px; margin-bottom: 36px; }
.blog .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog .post-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 8px; align-content: start; text-decoration: none; color: var(--ink); }
.blog .post-card:hover { border-color: var(--ink3); }
.blog .post-card b { font-size: 17px; line-height: 1.3; } .blog .post-card p { color: var(--ink2); font-size: 13px; line-height: 1.5; }
.blog .empty { color: var(--ink3); }
.blog .foot a { color: var(--ink2); }
@media (max-width: 900px) { .blog .post { grid-template-columns: 1fr; } .blog .post .prose { padding: 24px; } .blog .post-grid { grid-template-columns: 1fr; } .blog .post-side { position: static; } }