.blog-filters { display:flex; flex-wrap:wrap; gap:8px 24px; border-bottom:1px solid var(--border); }
.blog-filters button { border:0; border-bottom:2px solid transparent; background:transparent; padding:12px 0; font:inherit; font-size:14px; font-weight:600; color:#586761; cursor:pointer; }
.blog-filters button[aria-pressed="true"] { color:#253b31; border-bottom-color:#506c5f; }
.blog-filters button:focus-visible, .reading-content a:focus-visible { outline:2px solid #506c5f; outline-offset:4px; }
.blog-result-count { margin:18px 0 28px; font-size:14px; color:#586761; }
.catalog-design .blog-card { display:flex; flex-direction:column; border-radius:6px; }
.catalog-design .blog-card[hidden] { display:none; }
.catalog-design .blog-card-content { flex:1; display:flex; flex-direction:column; }
.catalog-design .blog-card-tag { color:#3e594c; }
.catalog-design .blog-card h3 a { color:inherit; }
.catalog-design .blog-card h3 a:hover { text-decoration:underline; }
.catalog-design .blog-card-content > p { margin-bottom:20px; }
.catalog-design .blog-card-meta { margin-top:auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.catalog-design .article-link { margin-top:18px; }
.article-page > .container { max-width:1000px; }
.article-page .breadcrumbs { max-width:720px; margin:0 auto 28px; font-size:13px; }
.reading-content { max-width:920px; margin-inline:auto; }
.reading-content > :not(.article-cover) { max-width:720px; margin-inline:auto; }
.reading-content .article-heading { display:block; padding:0; margin-bottom:28px; }
.catalog-design .reading-content h1 { font-size:42px; line-height:1.16; font-weight:750; letter-spacing:0; margin:14px 0 18px; text-wrap:balance; }
.editorial-category { font-size:13px; font-weight:700; color:#506c5f; }
.reading-content .editorial-summary { font-size:20px; line-height:1.6; color:#52645a; }
.reading-content .editorial-meta { font-size:13px; line-height:1.6; color:#66746d; margin:18px 0 0; padding-top:16px; border-top:1px solid #d5ddd8; }
.reading-content h2 { font-size:25px; line-height:1.35; margin:36px 0 14px; letter-spacing:0; }
.reading-content p { font-size:17px; line-height:1.8; color:#46534d; margin:0 0 20px; }
.reading-content li { font-size:16px; line-height:1.7; margin-bottom:8px; }
.reading-content section { padding:0; margin-top:32px; scroll-margin-top:130px; }
.reading-content section h2 { margin:0 0 12px; }
.reading-content .article-cover { height:auto; margin:0 0 32px; }
.reading-content .article-cover img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:contain; border-radius:4px; opacity:1; }
.article-cover figcaption { font-size:11px; line-height:1.5; color:#68756e; margin-top:8px; text-align:right; }
.catalog-design .blog-card-img { display:block; height:auto !important; aspect-ratio:3 / 2; flex-shrink:0; }
.catalog-design .blog-card-img img { display:block; width:100%; height:100%; object-fit:contain; }
.article-contents { padding-block:20px; border-block:1px solid #cdd6d0; margin:30px 0; }
.article-contents h2, .article-takeaway h2, .article-sources h2 { margin-top:0; font-size:20px; }
.article-contents a, .article-sources a, .article-next-step a { color:#375a48; text-decoration:underline; text-underline-offset:3px; }
.article-takeaway { border-left:3px solid #506c5f; padding-left:22px; margin:36px 0; }
.article-sources { border-top:1px solid #cdd6d0; padding-top:24px; margin-top:36px; }
.article-sources p { font-size:13px; color:#66746d; }
.reading-content .article-sources, .reading-content .article-next-step { padding-top:24px; }
.article-next-step { border-top:1px solid #cdd6d0; margin-top:36px; }
.article-next-step a { display:inline-block; margin:0 24px 12px 0; }
.article-page .article-navigation { max-width:720px; margin:44px auto 0; gap:24px; flex-wrap:wrap; font-size:14px; line-height:1.6; }
.article-navigation a { flex:1; min-width:160px; }
@media(max-width:600px) {
  .blog-filters { gap:4px 18px; }
  .blog-filters button { font-size:13px; }
  .reading-content .editorial-summary { font-size:18px; }
  .catalog-design .reading-content h1 { font-size:30px; line-height:1.2; text-wrap:pretty; }
  .reading-content p { font-size:16px; line-height:1.75; }
  .catalog-design .reading-content h2 { font-size:22px !important; line-height:1.35; }
  .reading-content .article-heading { margin-bottom:24px; }
  .reading-content section { margin-top:26px; }
  .article-navigation { flex-direction:column; }
}