/* Article content shares its typography and layouts with the editorial canvas. */
.blog-content {
    color: #18392e;
    font-family: Inter, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.blog-content h2, .blog-content h3, .blog-content h4 {
    font-family: "Plus Jakarta Sans", Inter, Arial, sans-serif;
    color: #18392e;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.3px;
    margin: 28px 0 12px;
}
.blog-content h2 { font-size: 28px; }
.blog-content h3 { font-size: 22px; }
.blog-content h4 { font-size: 18px; }
.blog-content p { margin: 0 0 18px; }
.blog-content ul, .blog-content ol { margin: 0 0 18px; padding-left: 24px; }
.blog-content a { color: #32735d; text-underline-offset: 4px; }
.blog-content img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-content blockquote { border-left: 4px solid #32735d; margin: 24px 0; padding-left: 24px; }
.blog-content .blog-align-left { text-align: left; }
.blog-content .blog-align-center { text-align: center; }
.blog-content .blog-align-right { text-align: right; }
.blog-content .blog-align-justify { text-align: justify; }
.blog-content .blog-lead { font-size: 20px; color: #50695f; }
.blog-content .blog-callout { padding: 24px; margin: 28px 0; background: #edf4ee; border-left: 4px solid #32735d; border-radius: 0 12px 12px 0; }
.blog-content .blog-callout > :first-child, .blog-content .blog-columns > div > :first-child { margin-top: 0; }
.blog-content .blog-callout > :last-child, .blog-content .blog-columns > div > :last-child { margin-bottom: 0; }
.blog-content .blog-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin: 28px 0; }
.blog-content figure { margin: 28px 0; }
.blog-content .blog-caption { color: #60746b; font-size: 14px; margin-top: 8px; }
.blog-content table { border-collapse: collapse; width: 100%; table-layout: fixed; margin: 28px 0; overflow-wrap: anywhere; }
.blog-content th, .blog-content td { border: 1px solid #cbd9ce; padding: 12px; text-align: left; }
.blog-content th { background: #edf4ee; }
@media (max-width: 540px) {
    .blog-content h2 { font-size: 24px; }
    .blog-content h3 { font-size: 20px; }
    .blog-content .blog-columns { grid-template-columns: 1fr; gap: 20px; }
    .blog-content .blog-callout { padding: 20px; }
}