* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.article-page { margin: 0; color: #263f58; background: #f2f2f2; }
.article-topbar { color: #fff; background: #184e87; }
.article-shell { width: calc(100% - (var(--site-gutter) * 2)); max-width: var(--site-width); margin: 0 auto; padding: 64px 0 84px; }
.article-back { display: inline-flex; gap: 8px; margin-bottom: 42px; color: #6387a6; font-size: .86rem; font-weight: 700; text-decoration: none; }
.article-heading { max-width: 1280px; }
.article-category { display: inline-block; margin-bottom: 20px; padding: 8px 13px; color: #184e87; border-radius: 999px; background: #dce8f1; font-family: 'Lexend', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.article-heading h1 { margin: 0 !important; max-width: 810px !important; color: #173f69; font-size: clamp(3.2rem, 3vw, 4.5rem) !important; line-height: .98 !important; letter-spacing: -.055em !important; }
.article-deck { max-width: 1280px; margin: 26px 0 0; color: #5b6f83; font-size: 1.2rem; line-height: 1.65; }
.article-details { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 30px 0 42px; padding-top: 22px; border-top: 1px solid rgba(24,78,135,.15); color: #6387a6; font-size: .82rem; }
.article-cover { overflow: hidden; margin: 0 0 56px; border-radius: 26px; background: #dce8f1; box-shadow: 0 20px 55px rgba(24,78,135,.13); }
.article-cover img { display: block; width: 100%; max-height: 610px; object-fit: cover; }
.article-content { max-width: 1280px; margin: 0; }
.article-content p { margin: 0 0 27px; color: #344e68; font-size: 1.08rem; line-height: 1.9; }
.article-content .lead::first-letter { float: left; margin: 8px 10px 0 0; color: #184e87; font-family: 'Lexend', sans-serif; font-size: 4.6rem; font-weight: 700; line-height: .72; }
.article-content blockquote { margin: 42px 0; padding: 32px 42px; color: #184e87; border-left: 5px solid #6387a6; border-radius: 0 18px 18px 0; background: #e6f0f6; font-family: 'Lexend', sans-serif; font-size: 1.35rem; line-height: 1.55; }
.article-content h2 { margin: 52px 0 20px; color: #173f69; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
.article-content h3 { margin: 38px 0 16px; color: #173f69; font-size: 1.45rem; line-height: 1.25; }
.article-content ul, .article-content ol { margin: 0 0 30px; padding-left: 30px; color: #344e68; font-size: 1.04rem; line-height: 1.8; }
.article-content a { color: #184e87; font-weight: 700; }
.article-content > img { display: block; width: 100%; max-height: 620px; margin: 48px 0; border-radius: 22px; object-fit: cover; }
.article-figure { margin: 48px 0; }
.article-figure img { display: block; width: 100%; max-height: 620px; border-radius: 22px; object-fit: cover; }
.article-figure figcaption { margin-top: 10px; color: #7a8998; font-size: .78rem; }
.article-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 44px 0; }
.article-fact { padding: 24px 18px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(24,78,135,.07); }
.article-fact strong { display: block; margin-bottom: 8px; color: #184e87; font-family: 'Lexend', sans-serif; font-size: 1.38rem; }
.article-fact span { color: #63768a; font-size: .82rem; line-height: 1.45; }
.article-tips { margin: 28px 0 40px; padding: 6px 0; list-style: none; counter-reset: tips; }
.article-tips li { position: relative; margin-bottom: 14px; padding: 20px 20px 20px 68px; border-radius: 15px; background: #fff; color: #405970; font-size: 1rem; line-height: 1.65; counter-increment: tips; }
.article-tips li::before { content: counter(tips, decimal-leading-zero); position: absolute; top: 20px; left: 20px; color: #6387a6; font-family: 'Lexend', sans-serif; font-size: .85rem; font-weight: 700; }
.article-end { margin-top: 58px; padding-top: 28px; border-top: 1px solid rgba(24,78,135,.16); }
.article-end a { color: #184e87; font-weight: 700; text-decoration: none; }
@media (max-width: 800px) {
    .article-figure, .article-content blockquote { margin-right: 0; margin-left: 0; }
    .article-facts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .article-shell { width: calc(100% - 40px); }
    .article-shell { padding: 42px 0 62px; }
    .article-back { margin-bottom: 30px; }
    .article-deck { font-size: 1.05rem; }
    .article-cover { margin-bottom: 40px; border-radius: 18px; }
    .article-content p { font-size: 1rem; line-height: 1.78; }
    .article-content blockquote { padding: 26px 24px; font-size: 1.12rem; }
}