/* Scoped article styles. The public shell continues to use v2.css?v=4. */
.blog-page main { padding-block: 42px 80px; }
.blog-page .blog-heading { max-width: 900px; margin-bottom: 42px; }
.blog-page .blog-heading h1 { font-size: clamp(2.35rem, 5.1vw, 4.4rem); max-width: 20ch; }
.blog-page .blog-intro { font-size: 1.125rem; margin-top: 24px; }
.blog-page .blog-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--muted); font-size: .875rem; margin-top: 22px; }
.blog-page .blog-back { display: inline-block; text-decoration: underline; text-underline-offset: 5px; margin-bottom: 32px; font-size: .875rem; }
.blog-page .blog-grid { display: grid; gap: 20px; }
.blog-page .blog-card { padding: 26px; background: var(--surface); min-width: 0; }
.blog-page .blog-card h2 { font-size: 1.65rem; line-height: 1.25; letter-spacing: -.025em; margin-block: 18px; }
.blog-page .blog-card p { font-size: 1rem; }
.blog-page .blog-card .blog-meta { margin-top: 0; }
.blog-page .blog-card a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.blog-page .blog-rss { display: inline-block; margin-top: 32px; text-decoration: underline; text-underline-offset: 5px; }
.blog-page .blog-article { max-width: 68ch; margin-inline: auto; font-size: 1.0625rem; overflow-wrap: anywhere; }
.blog-page .blog-body { color: var(--ink); line-height: 1.85; }
.blog-page .blog-body p { max-width: none; color: inherit; margin-block: 22px; }
.blog-page .blog-body h2 { font-size: clamp(1.75rem, 3vw, 2.3rem); margin-block: 44px 18px; }
.blog-page .blog-body h3 { font-size: 1.4rem; margin-block: 32px 14px; }
.blog-page .blog-body a, .blog-page .blog-sources a, .blog-page .blog-related a { text-decoration: underline; text-underline-offset: 4px; }
.blog-page .blog-body ul, .blog-page .blog-body ol { padding-left: 1.4em; margin-block: 22px; }
.blog-page .blog-body li + li { margin-top: 10px; }
.blog-page .blog-body code { font-size: .9em; background: var(--raised); padding: 2px 5px; border-radius: 3px; white-space: break-spaces; }
.blog-page .blog-body blockquote { margin: 28px 0; padding: 8px 24px; background: var(--surface); }
.blog-page .blog-body hr { border: 0; border-top: 1px solid var(--line); margin-block: 38px; }
.blog-page .blog-table { width: 100%; overflow-x: auto; margin-block: 28px; }
.blog-page table { width: 100%; border-collapse: collapse; font-size: .9rem; text-align: left; }
.blog-page th, .blog-page td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 110px; }
.blog-page th { font-weight: 600; background: var(--surface); }
.blog-page .blog-sources, .blog-page .blog-related { margin-top: 48px; }
.blog-page .blog-sources h2, .blog-page .blog-related h2, .blog-page .blog-cta h2 { font-size: 1.5rem; }
.blog-page .blog-sources ol, .blog-page .blog-related ul { padding-left: 1.3em; }
.blog-page .blog-sources li + li, .blog-page .blog-related li + li { margin-top: 14px; }
.blog-page .blog-sources small { display: block; color: var(--muted); }
.blog-page .blog-cta { margin-top: 48px; padding: 28px; background: var(--surface); }
.blog-page .blog-cta .button { margin-top: 22px; white-space: normal; }
@media (min-width: 761px) {
  .blog-page main { padding-block: 72px 112px; }
  .blog-page .blog-heading { margin-bottom: 54px; }
  .blog-page .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .blog-page .blog-card { padding: 36px; }
  .blog-page .blog-article { font-size: 1.125rem; }
}