/* the blog: long-form prose on the site's grid */
.blog-body { padding-block: 56px 120px; }
.blog-hero { margin: 0 0 48px; }
.blog-hero img { display: block; width: 100%; max-width: 1200px; height: auto; border-radius: 6px; }
.prose.blog { max-width: 760px; gap: 16px; font-size: 18px; line-height: 1.6; }
.prose.blog h2 { font-size: 28px; margin-top: 36px; }
.prose.blog h3 { font-weight: 700; font-size: 20px; color: var(--ink); margin-top: 18px; }
.prose.blog ol { padding-left: 22px; display: grid; gap: 8px; }
.prose.blog ul { border-top: 1px solid var(--rule); }
.prose.blog li { padding: 10px 0; }
.prose.blog code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }
.prose.blog blockquote { border-left: 3px solid var(--blue); padding-left: 18px; color: var(--ink); }
.prose.blog .tbl { overflow-x: auto; }
.prose.blog table { border-collapse: collapse; width: 100%; font-size: 16px; }
.prose.blog th, .prose.blog td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose.blog th { color: var(--ink); font-weight: 700; }
.hero .meta { color: var(--ink-3); font-size: 14px; }
.blog-list { padding-block: 64px; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.posts .post { display: grid; gap: 10px; color: var(--ink-2); }
.posts .post img { width: 100%; height: auto; border-radius: 6px; display: block; }
.posts .post b { color: var(--ink); font-weight: 700; font-size: 19px; line-height: 1.25; }
.posts .post span { font-size: 15px; line-height: 1.45; }
.posts .post:hover b { color: var(--blue); }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .posts { grid-template-columns: 1fr; } }