/* Blog reading scale is independent of the site's large marketing headings. */
body.blog-page {
  --blog-reading-ink:#000;
  --blog-body:var(--blog-bodySize,18px);
  --blog-h2:var(--blog-h2Size,20px);
  --blog-h3:var(--blog-h3Size,18px);
  --blog-leading:var(--blog-lineHeight,1.8);
}
body.blog-page.dark-theme {--blog-reading-ink:var(--site-text)}
body.blog-page #post-title,
body.blog-page #post-summary,
body.blog-page #post-summary :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,td,th,figcaption,strong,b,em,i,span,small),
body.blog-page .blog-article-body,
body.blog-page .blog-article-body :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,td,th,figcaption,strong,b,em,i,span,small),
body.blog-page .blog-post-faq :where(h2,p,li,summary),
body.blog-page .blog-author p {color:var(--blog-reading-ink)!important}
body.blog-page .blog-article-body {
  font-size:var(--blog-body);
  line-height:var(--blog-leading);
  overflow-wrap:anywhere;
}
body.blog-page .blog-article-body :where(p,li,blockquote,td,th,figcaption),
body.blog-page .blog-article-header>p,
body.blog-page #post-summary :where(p,li),
body.blog-page .blog-faq-item :where(p,li,summary) {
  font-size:var(--blog-body)!important;
  line-height:var(--blog-leading);
}
body.blog-page .blog-article-body :where(strong,b,em,i,a,span) {font-size:inherit}
body.blog-page .blog-article-body :where(h1,h2),
body.blog-page #post-summary :where(h1,h2),
body.blog-page .blog-post-faq>h2,
body.blog-page .bc-heading h2 {
  font-size:var(--blog-h2)!important;
  line-height:1.4;
  font-weight:700;
  letter-spacing:-.02em;
}
body.blog-page .blog-article-body h3,body.blog-page #post-summary h3 {font-size:var(--blog-h3)!important;line-height:1.45;font-weight:700}
body.blog-page .blog-article-body :where(h4,h5,h6),body.blog-page #post-summary :where(h4,h5,h6) {font-size:var(--blog-body)!important;line-height:1.5;font-weight:700}
body.blog-page .blog-article-body :where(h1,h2,h3,h4,h5,h6) {scroll-margin-top:calc(var(--public-header-height,100px) + 24px)}
body.blog-page .blog-article-body p {margin-bottom:1.25em}
body.blog-page .blog-author p,
body.blog-page .blog-article-body small {font-size:max(16px,calc(var(--blog-body) - 2px))!important;line-height:1.7}
@media(max-width:600px) {
  body.blog-page {
    --blog-body:var(--blog-mobileBodySize,17px);
    --blog-h2:var(--blog-mobileH2Size,19px);
    --blog-h3:var(--blog-mobileH3Size,17px);
  }
}

/* Index targets include headings rendered in the rich article introduction. */
body.blog-page .blog-article [data-blog-section] {scroll-margin-top:0}
body.blog-page #post-summary :where(h1,h2,h3,h4,h5,h6) {margin:1.3em 0 .5em}
.blog-toc-card[hidden] {display:none!important}
.blog-toc-card nav {max-height:clamp(180px,50vh,560px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.blog-toc-card nav li,.blog-toc-card nav li.blog-toc-subitem {padding-left:calc(10px + var(--toc-depth,0) * 12px);font-size:14px;line-height:1.55}
.blog-toc-card nav li a {overflow-wrap:anywhere}
.blog-toc-card nav li a:focus-visible {outline:2px solid var(--site-primary);outline-offset:-2px}
@media(min-width:821px) {
  body.blog-page .blog-sidebar {align-self:start;top:var(--public-anchor-offset,140px);max-height:calc(100svh - var(--public-anchor-offset,140px) - 20px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  body.blog-page .blog-sidebar>.blog-toc-card {order:-1;max-height:none;overflow:visible}
  body.blog-page .blog-toc-card nav {max-height:none;overflow:visible}
}

/* The article cover belongs below the title, before the introduction. */
body.blog-page .blog-article-header>.blog-featured-image {width:100%;max-width:none;box-sizing:border-box;margin:22px 0 28px}
@media(max-width:600px) {
  body.blog-page .blog-article-header>.blog-featured-image {margin:20px 0 24px}
}

/* Keep the contents index in the title area, below the article cover. */
.blog-article-header>.blog-inline-toc {width:100%;box-sizing:border-box;margin:22px 0 28px;max-height:none;overflow:visible}
.blog-article-header>.blog-inline-toc nav {max-height:420px;overflow-y:auto}
@media(max-width:600px) {
  .blog-article-header>.blog-inline-toc {margin:20px 0 24px;padding:18px 16px}
  .blog-article-header>.blog-inline-toc nav {max-height:360px}
}