/* Blog styles share the existing site's colour and typography tokens. */
.article-layout, .article-hero, .blog-feature, .blog-topics, .article-related { --red:#55751a; --red-dark:#3f5b10; --blush:#f3f7e9; }
.blog-feature .post__tag, .section > .wrap > .eyebrow { color:#55751a !important; background:none; -webkit-text-fill-color:#55751a; }
.blog-feature { display:grid; grid-template-columns:1fr 1fr; margin-top:1.2rem; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; }
.blog-feature__image { background:#eef1f5; display:flex; align-items:center; }
.blog-feature__image img { width:100%; }
.blog-feature__copy { padding:clamp(1.5rem,4vw,3rem); }
.blog-feature h2 { font-size:clamp(1.4rem,2.5vw,2rem); line-height:1.3; margin:.8rem 0; }
.blog-feature p { color:var(--muted); }
.blog-feature .btn { margin-top:1.4rem; }
.blog-topics { margin-top:3.5rem; }
.blog-topics p { margin:.6rem 0 1.4rem; color:var(--muted); }
.blog-topic-links { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.blog-topic-links a { display:flex; justify-content:space-between; gap:1rem; padding:1.3rem; border:1px solid var(--line); border-radius:10px; font-weight:600; }
.blog-topic-links a:hover { border-color:var(--navy); background:var(--bg-soft); }
.article-hero { padding:2rem 0 3rem; background:var(--bg-soft); border-bottom:1px solid var(--line); }
.article-hero .breadcrumb { color:var(--muted); flex-wrap:wrap; }
.article-hero .breadcrumb [aria-current], .article-hero .breadcrumb a:hover { color:var(--navy); }
.article-hero h1 { max-width:930px; font-size:clamp(2rem,4vw,3.25rem); line-height:1.17; margin:1rem 0; }
.article-deck { max-width:720px; font-size:1.15rem; color:var(--muted); }
.article-meta { font-size:.85rem; color:var(--muted); margin-top:1.4rem; }
.article-meta a { text-decoration:underline; text-underline-offset:3px; }
.article-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); padding-top:3rem; padding-bottom:4rem; align-items:start; }
.article-sidebar { position:sticky; top:115px; font-size:.9rem; }
.article-sidebar h2 { font-size:1.05rem; line-height:1.4; }
.article-sidebar ol { list-style:none; padding:0; margin-top:1rem; }
.article-sidebar li { border-bottom:1px solid var(--line); }
.article-sidebar nav a { display:block; padding:.65rem 0; color:var(--muted); }
.article-sidebar a:hover { color:var(--red-dark); }
.article-sidebar__help { background:var(--blush); border-radius:12px; padding:1.3rem; margin-top:1.8rem; }
.article-sidebar__help p { margin:.6rem 0; }
.article-sidebar__help a { font-weight:700; }
.article-prose { min-width:0; max-width:760px; font-size:1.04rem; line-height:1.8; }
.article-cover { width:100%; border-radius:14px; margin-bottom:2rem; }
.article-prose p { margin:1rem 0; }
.article-prose h2 { font-size:clamp(1.4rem,2.5vw,1.85rem); line-height:1.3; margin:2.6rem 0 1rem; scroll-margin-top:130px; }
.article-prose h3 { font-size:1.15rem; line-height:1.4; margin:1.8rem 0 .6rem; }
.article-prose a:not(.btn), .article-text-link { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.article-prose a:not(.btn):hover, .article-text-link:hover { color:var(--red-dark); }
.article-prose ul { list-style:disc; padding-left:1.4rem; }
.article-prose ol { padding-left:1.4rem; }
.article-prose li { margin:.7rem 0; padding-left:.25rem; }
.article-summary { background:var(--bg-soft); border-left:4px solid var(--red); padding:1.2rem 1.5rem; border-radius:0 10px 10px 0; }
.article-summary p:first-child { margin:0; }
.article-summary p:last-child { margin-bottom:0; }
.article-callout { border:1px solid var(--line); padding:1.4rem; border-radius:12px; margin:1.8rem 0; }
.article-callout h3 { margin:0; }
.article-callout p { margin-bottom:0; }
.article-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; margin:1.5rem 0; }
.article-table { width:100%; border-collapse:collapse; font-size:.9rem; line-height:1.65; min-width:560px; }
.article-table caption { text-align:left; font-weight:600; padding:1rem; background:var(--bg-soft); }
.article-table th, .article-table td { text-align:left; vertical-align:top; padding:1rem; border-bottom:1px solid var(--line); }
.article-table thead { background:var(--navy); color:#fff; }
.article-table tbody th { min-width:145px; }
.article-faq details { border-bottom:1px solid var(--line); }
.article-faq summary { padding:1rem 1.6rem 1rem 0; cursor:pointer; font-weight:600; line-height:1.5; }
.article-faq details p { margin:0 0 1.3rem; }
.article-sources { color:var(--muted); font-size:.86rem; border-top:1px solid var(--line); margin-top:2.8rem; }
.article-sources h2 { font-size:1.2rem; }
.article-cta { padding:clamp(1.3rem,3vw,2.3rem); border-radius:14px; background:var(--blush); margin-top:2.8rem; }
.article-cta h2 { margin-top:.5rem; }
.article-cta > div { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.5rem; }
.article-cta .eyebrow { margin-top:0; }
.article-back { font-size:.9rem; }
.article-related { padding:1.6rem; border:1px solid var(--line); border-radius:12px; background:var(--bg-soft); margin:2rem 0; }
.article-related h2 { font-size:1.45rem; margin:.5rem 0; }
.article-related p { margin:.5rem 0 1rem; }
@media (max-width:860px) { .article-layout { grid-template-columns:1fr; gap:2rem; } .article-sidebar { position:static; } .article-sidebar ol { display:grid; grid-template-columns:1fr 1fr; gap:0 1.2rem; } .article-sidebar__help { display:none; } .article-prose { max-width:none; } .blog-feature { grid-template-columns:1fr; } }
@media (max-width:540px) { .blog-topic-links { grid-template-columns:1fr; } .article-sidebar ol { grid-template-columns:1fr; } .article-hero { padding-top:1.3rem; } .article-prose { font-size:1rem; } .article-summary { padding:1rem; } .article-cta .btn { padding:.85rem 1rem; } }
@media print { .article-sidebar, .article-cta, .site-header, .topbar, .site-footer { display:none; } .article-layout { display:block; } .article-prose { max-width:none; } }
/* Keep the shared mobile drawer in the viewport, above its backdrop. */
@media (max-width:860px) {
  .site-header { backdrop-filter:none; -webkit-backdrop-filter:none; z-index:121; }
  .nav { height:100dvh; transform:none; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .2s, visibility .2s; }
  .nav.open { transform:none; visibility:visible; opacity:1; pointer-events:auto; }
}