.article-page {
    max-width: 960px;
    padding: 38px 40px 80px;
    margin: 0 auto;
}
.article-breadcrumb {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #68725e;
    margin-bottom: 46px;
}
.article-breadcrumb a:hover { color: var(--ink); }
.article-page-content { max-width: 760px; margin: 0 auto; }
.article-page-content > .eyebrow { color: #68775c; }
.article-page-content h1 {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.12;
    margin: 0 0 34px;
}
.article-page-content h2 {
    font-size: 28px;
    line-height: 1.25;
    margin: 35px 0 14px;
}
.article-page-content p {
    font-size: 17px;
    line-height: 1.85;
    color: #535e4b;
}
.article-page-content .article-lead {
    font-size: 23px;
    line-height: 1.6;
    color: #34462e;
    margin: 30px 0;
}
.article-page-content .article-visual {
    position: relative;
    height: clamp(220px, 35vw, 370px);
    overflow: hidden;
    border-radius: 5px;
    display: grid;
    place-items: center;
    margin-bottom: 30px;
}
.article-page-content .article-visual img {
    position: static;
    transform: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 22px;
}
.article-page-content .article-note {
    padding: 24px;
    background: #e8ecdf;
    border-left: 3px solid #8a9b75;
    line-height: 1.8;
    font-size: 16px;
    margin: 32px 0;
}
.article-page-content .article-source { font-size: 13px; }
.article-page-content .article-source a { text-decoration: underline; }
.article-page-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 45px;
}
.article-more { margin-top: 60px; }
.article-more > h2 { font-size: 30px; }
.article-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.article-more-grid a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--line);
    background: #edefe5;
    font: 600 17px/1.5 var(--display);
}
.article-more-grid a:hover { background: #dfe6d6; }
@media (max-width: 600px) {
    .article-page { padding: 25px 6% 50px; }
    .article-breadcrumb { margin-bottom: 30px; }
    .article-page-content h2 { font-size: 24px; }
    .article-page-content .article-lead { font-size: 20px; }
    .article-page-content p { font-size: 16px; }
    .article-more-grid { grid-template-columns: 1fr; }
}

/* Cases guide: readable navigation, source notes and native FAQ disclosures. */
.cases-toc {
    display: grid;
    gap: 12px;
    padding: 24px;
    margin: 30px 0 40px;
    border: 1px solid var(--line);
    border-radius: 4px;
}
.cases-toc strong { font-family: var(--display); margin-bottom: 4px; }
.cases-toc a { font-size: 15px; color: #465b3a; }
.cases-toc a:hover { text-decoration: underline; }
.article-page-content a:not(.cases-source-link) { text-decoration: underline; text-underline-offset: 3px; }
.article-page-content .cases-source-link {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #637258;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cases-faq details { border-bottom: 1px solid var(--line); }
.cases-faq summary {
    padding: 20px 0;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}
.cases-faq summary:focus-visible { background: #e8ecdf; }
.cases-faq p { margin-bottom: 24px; }

/* Compact signup within the Cases article. */
.article-newsletter {
    padding: 27px;
    margin-top: 40px;
    border: 1px solid #d7dccf;
    border-radius: 5px;
    background: #ecf0e5;
}
.article-newsletter .form-intro h2,
.article-newsletter-success h2 {
    font-size: 24px;
    line-height: 1.25;
    margin: 0 0 10px;
    max-width: none;
}
.article-newsletter .form-intro > p:last-child,
.article-newsletter-success p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: none;
}
.article-newsletter-form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.article-newsletter-fields { display: flex; gap: 10px; }
.article-newsletter-fields input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #bdc8b2;
    border-radius: 3px;
    background: #fafbf7;
    color: var(--ink);
    font: 16px var(--font);
}
.article-newsletter-fields input:focus-visible { background: #fff; border-color: #647c51; }
.article-newsletter-fields button {
    padding: 12px 20px;
    border: 0;
    border-radius: 3px;
    background: var(--ink);
    color: var(--paper);
    font: 600 13px var(--display);
    white-space: nowrap;
}
.article-newsletter-fields button span { margin-left: 13px; }
.article-newsletter-fields button:hover { background: #35462e; }
.article-newsletter .article-newsletter-hint { font-size: 11px; margin: 9px 0 0; color: #59664f; }
.article-newsletter-success button {
    padding: 0;
    border: 0;
    background: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 13px;
}
@media (max-width: 480px) {
    .article-newsletter { padding: 22px 18px; }
    .article-newsletter .form-intro h2,
    .article-newsletter-success h2 { font-size: 22px; }
    .article-newsletter-fields { flex-direction: column; }
    .article-newsletter-fields button { min-height: 44px; }
}