/* Shared colours, typography, header and page width come from portfolio.css. */
.blog-main { min-height: 65vh; padding-block: 48px 72px; }
.blog-intro { padding-bottom: 40px; }
.blog-main h1 { overflow-wrap: anywhere; }
.intro { color: var(--muted); font-size: 19px; max-width: 640px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.section-title span, time { color: var(--muted); font: 13px/1.7 system-ui, sans-serif; }
.post-card { padding-block: 26px; border-bottom: 1px solid var(--line); }
.post-card h3 { margin-block: 8px; }
.post-card p { color: var(--muted); margin-block: 10px; max-width: 75ch; }
.read-more, .back { font-size: 14px; }
.article-header { margin-block: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.prose { max-width: 75ch; overflow-wrap: anywhere; }
.prose h2, .prose h3 { margin-block: 1.8em .6em; }
.prose img { max-width: 100%; height: auto; }
.prose pre { overflow-x: auto; padding: 20px; background: #e3e7e7; border-radius: 8px; }
.prose code { background: #e3e7e7; padding: .15em .3em; font-size: .88em; }
.prose pre code { padding: 0; }
.prose blockquote { border-left: 3px solid var(--green); margin-left: 0; padding-left: 22px; color: var(--muted); }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 14px; }
@media (max-width: 600px) {
  .blog-main { padding-block: 32px 56px; }
  .blog-intro { padding-bottom: 28px; }
  .intro { font-size: 16px; }
  .post-card h3 { font-size: 24px; }
}