/* Blog list and article pages. Colours and fonts come from pages-v1.css. */
.blog main { background: var(--bg); }
.blog-hero { padding: clamp(40px, 7vw, 76px) 0 clamp(28px, 4vw, 44px); text-align: center; }
.blog-hero h1 { max-width: 880px; margin: 16px auto 0; font: 800 clamp(30px, 5vw, 48px)/1.2 var(--font-head); color: var(--ink); }
.blog-hero__sub { margin: 16px auto 0; font-size: 18px; color: var(--muted); }

.post-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); padding: 24px 0 40px; }
.post-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.post-card a { color: inherit; text-decoration: none; }
.post-card img { display: block; width: 100%; height: auto; }
.post-card h2 { margin: 16px 18px 0; font: 800 20px/1.3 var(--font-head); color: var(--ink); }
.post-card a:hover h2 { text-decoration: underline; }
.post-card p { margin: 10px 18px 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.post-card .post-card__meta { margin: 12px 18px 18px; font-size: 13.5px; color: var(--muted); }

.post { max-width: 760px; padding-top: 28px; padding-bottom: 40px; }
.crumbs { font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.post h1 { margin: 14px 0 0; font: 800 clamp(30px, 5vw, 42px)/1.2 var(--font-head); color: var(--ink); }
.post__meta { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
.post__meta a { color: var(--ink); }

.quick-answer { margin: 26px 0 0; padding: 18px 20px; border-radius: var(--radius); background: var(--navy); color: #fff; }
.quick-answer p { margin: 0; font-size: 17.5px; line-height: 1.6; }
.quick-answer .quick-answer__label { margin-bottom: 6px; font: 700 13px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.takeaways { margin: 18px 0 0; padding: 18px 20px; border: 1px solid var(--pos-line); border-radius: var(--radius); background: var(--pos-tint); }
.takeaways h2 { margin: 0 0 8px; font: 800 18px/1.3 var(--font-head); color: var(--ink); }
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { margin-top: 6px; font-size: 16.5px; line-height: 1.5; }

.post__body, .post__faq, .post__sources, .author-box { font-size: 18px; line-height: 1.7; color: var(--text); }
.post__body { margin-top: 26px; }
.post h2 { margin: 34px 0 10px; font: 800 26px/1.3 var(--font-head); color: var(--ink); }
.post h3 { margin: 24px 0 6px; font: 700 20px/1.35 var(--font-head); color: var(--ink); }
.post__body p, .post__faq p { margin: 0 0 16px; }
.post__body ul, .post__body ol { margin: 0 0 16px; padding-left: 22px; }
.post__body li { margin-top: 6px; }
.post__body a, .post__sources a { color: var(--blue); font-weight: 600; }
.post__body img { max-width: 100%; height: auto; border-radius: 12px; }
.post__body table { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 16px; }
.post__body th, .post__body td { padding: 10px; border: 1px solid var(--line); text-align: left; }
.post__body th { background: var(--navy); color: #fff; }
.post__body ul, .takeaways ul, .post__sources ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post .takeaways h2 { margin: 0 0 8px; font-size: 18px; }
.post .author-box h2 { margin: 0 0 6px; font-size: 18px; }
.post__sources { font-size: 16px; }
.post .post__sources h2 { font-size: 20px; }
.blog-hero .hl { display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--blue); transform: none; }
.author-box { margin-top: 34px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-size: 16px; }
.author-box h2 { margin: 0 0 6px; font-size: 18px; }
.author-box p { margin: 0; }
.blog-cards { margin-top: 34px; }
@media (max-width: 480px) {
  .post__body, .post__faq { font-size: 17px; }
  .post h2 { font-size: 23px; }
}