@layer components {
  .blog-page { padding-block:56px 30px; }
  .blog-heading { max-width:850px; margin-bottom:42px; }
  .blog-heading h1 { font-size:clamp(36px,4.5vw,60px); margin:18px 0; }
  .blog-heading>p:last-child { color:var(--muted); max-width:650px; }
  .blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .blog-card { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
  .blog-card-image { display:block; }
  .blog-card-image img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
  .blog-card-content { padding:28px; }
  .blog-card-content h2 { font-size:29px; line-height:1.2; margin:12px 0 16px; }
  .blog-card-content>p:not(.eyebrow) { color:var(--muted); font-size:15px; }
  .blog-card-content>.text-link { margin-top:22px; }
  .blog-meta { color:var(--muted); font-size:13px; line-height:1.8; }
  .blog-meta span { margin-inline:7px; }
  .blog-breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px; margin-bottom:34px; }
  .blog-breadcrumbs a:hover, .blog-card h2 a:hover { color:var(--green); text-decoration:underline; text-underline-offset:4px; }
  .article-heading { max-width:930px; margin-inline:auto; }
  .article-heading h1 { font-size:clamp(34px,4vw,56px); line-height:1.12; margin:18px 0 22px; text-wrap:balance; }
  .article-lead { margin-top:24px; font-size:21px; line-height:1.65; color:#46564f; }
  .article-cover { max-width:1040px; }
  .article-cover img { width:100%; height:auto; border-radius:18px; }
  .article-cover figcaption { margin-top:10px; font-size:12px; color:var(--muted); }
  .article-content { max-width:780px; margin-inline:auto; font-size:18px; line-height:1.85; overflow-wrap:anywhere; }
  .article-content h2 { font-size:clamp(26px,3vw,34px); line-height:1.25; margin-top:52px; scroll-margin-top:28px; }
  .article-content h3 { font-size:23px; line-height:1.4; margin-top:32px; }
  .article-content ul, .article-content ol { padding-left:24px; }
  .article-content li+li { margin-top:9px; }
  .article-content a { color:var(--green); }
  .article-status, .article-toc, .article-cta { padding:24px 28px; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
  .article-toc { background:#fff; }
  .article-toc ol { margin-top:14px; }
  .article-status p+p, .article-cta p+p { margin-top:12px; }
  .article-cta .button { text-decoration:none; margin-top:16px; color:var(--ink); }
  .article-table { overflow-x:auto; margin-top:24px; }
  .article-table table { width:100%; border-collapse:collapse; font-size:15px; }
  .article-table th, .article-table td { text-align:left; vertical-align:top; padding:14px; border-bottom:1px solid var(--line); }
  .article-table th { background:var(--soft); }
  .article-sources { font-size:14px; color:var(--muted); }
  .blog-back { max-width:780px; margin:42px auto 0; padding-top:26px; border-top:1px solid var(--line); }
}
@layer responsive {
  @media(max-width:850px) { .blog-grid { grid-template-columns:1fr; } .blog-card { max-width:720px; } }
  @media(max-width:640px) {
    .blog-page { padding-block:32px 16px; }
    .blog-card-content { padding:22px; }
    .blog-card-content h2 { font-size:26px; }
    .article-lead { font-size:18px; }
    .article-content { font-size:16px; line-height:1.8; }
    .article-content h2 { margin-top:36px; }
    .article-status, .article-toc, .article-cta { padding:20px; }
    .article-table th, .article-table td { padding:10px; }
  }
}

/* WordPress sets figure margins outside cascade layers. */
.blog-article > .article-cover { margin:36px auto 44px; }
@media(max-width:640px) {
  .blog-article > .article-cover { margin-block:28px 32px; }
}