.articles-main {
    padding-top: 56px;
    overflow-wrap: anywhere;
}

.articles-intro h1,
.article-body h1 {
    font: 400 clamp(34px, 4.6vw, 62px)/1.15 Georgia, 'Times New Roman', serif;
    letter-spacing: -1.5px;
}

.articles-intro p {
    margin-top: 24px;
    color: var(--muted);
    font-size: 18px;
}

.article-card {
    margin-top: 40px;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.article-card h2,
.article-body h2,
.article-cta h2 {
    font: 400 clamp(26px, 3vw, 38px)/1.25 Georgia, 'Times New Roman', serif;
}

.article-card p {
    margin-block: 20px;
    color: var(--muted);
}

.article-card h2 a:hover {
    text-decoration: underline;
    text-underline-offset: .15em;
}

.article-body {
    font-size: 18px;
    line-height: 1.8;
}

.article-body h1 {
    margin-bottom: 36px;
}

.article-body h2 {
    margin-block: 56px 24px;
}

.article-body p + p {
    margin-top: 16px;
}

.article-body ul {
    margin-block: 16px;
    padding-inline-start: 28px;
}

.article-body li + li {
    margin-top: 8px;
}

.article-body blockquote {
    margin: 24px 0;
    padding: 18px 24px;
    border-left: 3px solid var(--button);
    background: var(--surface);
}

.article-body a {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.article-cta {
    margin-top: 56px;
    padding: 40px;
    border-radius: 8px;
    background: var(--section-green);
}

.article-cta p {
    margin-block: 20px 24px;
}

.articles-page .nav [aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: .3em;
}

@media (max-width: 600px) {
    .articles-main { padding-top: 32px; }
    .articles-intro h1, .article-body h1 { letter-spacing: -.7px; }
    .article-body { font-size: 16px; }
    .article-body h2 { margin-top: 40px; }
    .article-card, .article-cta { padding: 24px 20px; }
    .article-body blockquote { padding: 16px 18px; }
    .article-cta .btn { width: 100%; gap: 16px; }
}