/* A quiet reading surface for Balas article overviews. */
.article-wrap { width: min(100% - 96px, 1160px); margin-inline: auto; }
.article-top { padding: 46px 0 76px; background: #f2f7fa; border-bottom: 1px solid var(--line); }
.article-back { display: inline-block; margin-bottom: 54px; color: #006f9e; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.article-category { margin-bottom: 18px; color: #006f9e; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.article-top h1 { max-width: 920px; color: var(--navy); font-size: clamp(42px, 5.2vw, 74px); line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; }
.article-intro { max-width: 760px; margin-top: 28px; color: #385068; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; }
.article-byline { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 35px; padding-top: 19px; border-top: 1px solid #cddde6; color: var(--muted); font-size: 12px; }
.article-byline strong { color: var(--navy); }
.article-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(200px, 1fr); gap: clamp(55px, 8vw, 140px); padding-top: 66px; padding-bottom: 80px; }
.article-content { min-width: 0; }
.article-section { padding-bottom: 36px; margin-bottom: 38px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.article-section h2, .article-takeaways h2 { max-width: 620px; margin-bottom: 19px; color: var(--navy); font-size: clamp(26px, 2.2vw, 34px); line-height: 1.2; letter-spacing: -.03em; }
.article-section p { max-width: 68ch; color: #385068; font-size: 17px; line-height: 1.8; }
.article-takeaways { padding: 32px 36px 34px; background: #e9f4f9; border-radius: 12px; }
.article-takeaways h2 { font-size: 25px; }
.article-takeaways ul { margin: 0; padding-left: 21px; color: var(--navy); font-size: 16px; line-height: 1.7; }
.article-takeaways li + li { margin-top: 9px; }
.article-source { margin-top: 36px; padding-top: 23px; border-top: 1px solid var(--line); }
.article-source strong { display: block; margin-bottom: 8px; color: var(--navy); font-size: 14px; }
.article-source p { font-size: 14px; line-height: 1.7; }
.article-source a { color: #006f9e; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.article-aside-inner { position: sticky; top: 122px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; border-top: 2px solid var(--navy); padding-top: 18px; }
.article-aside-inner strong { margin-bottom: 7px; font-size: 13px; }
.article-aside-inner a { color: #385068; font-size: 13px; line-height: 1.5; }
.article-aside-inner a:hover { color: #006f9e; text-decoration: underline; text-underline-offset: 3px; }
.article-aside-rule { width: 100%; height: 1px; margin: 8px 0 1px; background: var(--line); }
.article-aside-inner span { color: var(--muted); font-size: 12px; }
.article-next { display: flex; justify-content: space-between; align-items: end; gap: 35px; padding: 30px 0 62px; border-top: 1px solid var(--line); }
.article-next div { display: flex; flex-direction: column; gap: 9px; }
.article-next span { color: var(--muted); font-size: 12px; }
.article-next div a { max-width: 620px; color: var(--navy); font-size: clamp(22px, 2vw, 30px); font-weight: 650; line-height: 1.3; letter-spacing: -.025em; }
.article-next a:hover { color: #006f9e; }
.article-all { flex: none; color: #006f9e; font-size: 13px; font-weight: 700; }
.article-cta { padding: 55px 0; background: var(--navy); }
.article-cta .article-wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.article-cta h2 { max-width: 660px; color: white; font-size: clamp(28px, 2.7vw, 39px); }
.article-cta p { margin-top: 10px; color: #c2d6e3; font-size: 15px; }
.article-cta .button { flex: none; }
.article-footer { padding: 27px 0; background: #061f30; }
.article-footer .article-wrap { display: flex; gap: 24px; color: #a9c0ce; font-size: 12px; }
.article-footer span { margin-right: auto; }
.article-footer a:hover { color: white; }
@media (max-width: 900px) { .article-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .article-aside { display: none; } }
@media (max-width: 760px) { .article-wrap { width: min(100% - 44px, 1160px); } .article-top { padding: 26px 0 47px; } .article-back { margin-bottom: 40px; } .article-top h1 { font-size: clamp(36px, 10vw, 52px); } .article-intro { font-size: 17px; margin-top: 23px; } .article-layout { padding-top: 44px; padding-bottom: 50px; } .article-section { padding-bottom: 27px; margin-bottom: 30px; } .article-section p { font-size: 16px; } .article-takeaways { padding: 26px 24px; } .article-next { align-items: flex-start; flex-direction: column; padding-bottom: 48px; } .article-cta .article-wrap { align-items: flex-start; flex-direction: column; } .article-footer .article-wrap { flex-wrap: wrap; gap: 12px 22px; } .article-footer span { flex-basis: 100%; } }