/* Blog: the breadcrumb, the article list, the article page. Colours come from the variables above, so both themes work. */
.breadcrumb { margin: 0 0 1.25rem; font-size: .9rem; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { max-width: none; display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "›"; color: var(--muted); }
.breadcrumb a { color: var(--link); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb a[aria-current="page"] { color: var(--muted); }

/* Blog pages run the full content width. site.css caps .site-main p and .site-main li at 40em
   so ordinary prose keeps a readable measure; on these two page types the cards and the article
   are the content, so that cap shrinks them to about 60% of the 1112px column at 1280 and leaves
   the rest empty. The old site ran both at the full column width. These rules carry .site-main so
   they beat .site-main p / .site-main li on specificity (0,2,0 over 0,1,1), not on !important;
   they only match the blog classes, so other pages keep the cap. */
.site-main .blog-index .lede,
.site-main .post-item,
.site-main .post-item p,
.site-main .post-body,
.site-main .post-body p,
.site-main .post-body li,
.site-main .post-related li,
.site-main .blog-post .post-meta,
.site-main .blog-index .learn-intro,
.site-main .blog-post .learn-intro { max-width: none; }

.post-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.post-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
}
.post-item h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.post-item h2 a { color: var(--ink); text-decoration: none; }
.post-item h2 a:hover { color: var(--brand); text-decoration: underline; }
.post-item p { margin: .25rem 0 0; }
.post-date, .post-meta { color: var(--muted); font-size: .9rem; }

.blog-post .post-meta { margin: -.25rem 0 1.5rem; }
.post-body h2 { margin: 2rem 0 .5rem; color: var(--brand); }
.post-body p, .post-body li { margin-bottom: .75rem; }
.post-related { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.post-related h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.learn-intro {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  background: var(--brand-tint);
  border-radius: var(--radius-sm);
}