/* Blog pages: page.css provides the tokens, header, footer and article type; this adds the single-column layout and
   the pieces Markdown posts produce. */
.wrap.blog { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.wrap.blog article { max-width: none; }
.over a { color: inherit; text-decoration: none; }
article h2 { margin-top: 44px; }
article h3 { font-size: 21px; margin: 28px 0 8px; }
article ol { padding-left: 22px; }
article ol li { margin-bottom: 8px; }
article img { display: block; max-width: 100%; height: auto; border-radius: var(--r-lg); margin: 24px 0; }
article img.hero { margin: 8px 0 32px; }
article blockquote { margin: 20px 0; padding: 14px 20px; border-left: 4px solid var(--primary); background: var(--surface-sunk); border-radius: var(--r-sm); }
article table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 16px; display: block; overflow-x: auto; }
article th, article td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
article th { background: var(--surface-sunk); }
article code { background: var(--surface-sunk); border-radius: 6px; padding: 1px 6px; font-size: .92em; }
.cta { margin-top: 48px; padding: 30px; border-radius: var(--r-lg); background: var(--primary-container); color: var(--on-primary-container); }
.cta h2 { margin-top: 0; color: inherit; }
.cta p { color: inherit; }
.cta-btn { display: inline-block; margin-top: 8px; padding: 12px 22px; border-radius: 999px; background: var(--lp-btn); color: var(--lp-on-btn); font-weight: 700; text-decoration: none; }
.related { margin-top: 40px; }
.posts { list-style: none; padding: 0; display: grid; gap: 26px; margin-top: 30px; }
.posts li a { font-size: 22px; font-weight: 700; text-decoration: none; }
.posts li .upd { display: block; margin-top: 4px; }
.posts li p { margin-top: 6px; }