/* Shared article typography; scoped to leave the site header and footer intact. */
.blog-article {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 140px 32px 88px;
}

.blog-article .blog-article-header {
    margin-bottom: 36px;
}

.blog-article h1 {
    font-family: MyriadProCond, sans-serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 700;
    font-style: italic;
    line-height: 1.08;
    color: var(--color-primary, #003b58);
    text-wrap: balance;
}

.blog-article .blog-article-body {
    max-width: 760px;
    font-size: 20px;
    line-height: 1.65;
    overflow-wrap: break-word;
}

.blog-article-body p {
    margin-bottom: 1em;
}

.blog-article-body > p:first-child {
    font-size: 23px;
    line-height: 1.5;
    color: var(--color-primary, #003b58);
}

.blog-article-body h2 {
    margin: 1.5em 0 0.55em;
    font-size: 32px;
    line-height: 1.2;
    color: var(--color-primary, #003b58);
}

.blog-article-body ul,
.blog-article-body ol {
    padding-left: 1.4em;
    margin: 0 0 1.25em;
}

.blog-article-body ul > li { list-style-type: disc; }
.blog-article-body ol > li { list-style-type: decimal; }
.blog-article-body li { margin-bottom: 0.4em; }
.blog-article-body img { max-width: 100%; height: auto; }
.blog-article-body figure { margin: 2em 0; }
.blog-article-body figcaption { font-size: 16px; margin-top: 0.5em; }

.blog-article a {
    color: var(--color-primary, #003b58);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-article a:hover { text-decoration-thickness: 2px; }
.blog-article a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.blog-article .blog-article-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-top: 48px;
    padding: 24px 0 0;
    border-top: 1px solid #d5e0e5;
    font-size: 18px;
}

@media (max-width: 600px) {
    .blog-article { padding: 110px 22px 56px; }
    .blog-article .blog-article-body { font-size: 18px; }
    .blog-article-body > p:first-child { font-size: 21px; }
    .blog-article-body h2 { font-size: 28px; }
}