/* Reading chrome only; source examples and diagrams remain unchanged. */
.article-page header.learning-article-hero{padding:24px;gap:16px;grid-template-columns:minmax(0,1fr) 110px}
.article-page .learning-article-hero h1{font-size:clamp(24px,3.2vw,38px);line-height:1.5;margin:12px 0}
.article-page .learning-article-hero .learning-article-intro>p{font-size:16px;line-height:1.8;margin:12px 0}
.article-page .learning-article-hero .hero-meta{margin-top:14px;padding-top:12px;font-size:12px;gap:10px}
.article-page .article-navigator{width:110px;align-self:center;margin:0}
.article-page .article-navigator img{width:90px;height:auto}
.article-page .article-navigator figcaption{font-size:10px;white-space:normal}
.article-page .article-start{padding:12px 0 0;margin:0;display:flex;flex-wrap:wrap;gap:8px;border:0}
.article-page .article-start>p,.article-page .article-start>strong{display:none}
.article-page .article-start>a{min-height:44px;padding:10px 16px;font-size:14px}
.article-page .answer-summary{padding:18px 22px;margin:16px 0;border-radius:16px}
.article-page .answer-summary h2{font-size:18px;margin:4px 0}
.article-page .answer-summary p,.article-page .answer-summary li{font-size:14px;line-height:1.8}
.article-page .answer-summary ul{margin:8px 0}
.reading-tools{padding:12px 16px;border:1px solid #d8e1ea;border-radius:12px;margin:16px 0;background:#f6f8fb;font-size:13px}
.reading-tools button,.reading-tools a,.article-page .reading-extras>summary,.article-page .reading-toc>summary{display:inline-flex;min-height:44px;align-items:center;padding:8px 12px;color:#123052;background:white;border:1px solid #d8e1ea;border-radius:8px;cursor:pointer;margin:3px;font-weight:700}
.reading-tools button[aria-pressed=true]{background:#123052;color:white}
.reading-tools [hidden]{display:none!important}
.reading-tools [role=status]{line-height:1.7;margin:6px 3px}
.article-page .reading-extras{margin:16px 0}.article-page .reading-extras>summary,.article-page .reading-toc>summary{display:flex}
.article-page .reading-toc .toc{margin-top:6px}.article-page .reading-practice{padding:20px;border:1px solid #b6d5d0;border-radius:14px;background:#f0f8f6;margin:24px 0}
.article-page .reading-practice h3{font-size:20px;margin:0 0 10px}
.article-page dialog.reading-zoom{width:96vw;max-width:none;height:94dvh;border:1px solid #d8e1ea;border-radius:16px;padding:16px;color:#123052}
.reading-zoom::backdrop{background:#0008}.reading-zoom .zoom-content{overflow:auto;height:calc(100% - 64px)}
body[data-reading-size="0"] article p,body[data-reading-size="0"] article li{font-size:15px!important}
body[data-reading-size="2"] article p,body[data-reading-size="2"] article li{font-size:19px!important;line-height:1.9}
@media(max-width:600px){.article-page .wrap{padding-top:16px}.article-page .learning-article-hero{padding:16px;grid-template-columns:minmax(0,1fr) 72px;gap:10px}.article-page .article-navigator{width:72px}.article-page .article-navigator img{width:66px}.article-page .hero-kicker strong{font-size:10px}.article-page .hero-kicker>span{font-size:11px}.article-page .learning-article-hero h1{font-size:24px}.article-page .hero-meta>span:first-child{display:none}}
/* Keep the introduction full-width; the navigator accompanies the entry link. */
.article-page .learning-article-hero{box-shadow:none;border-radius:16px}
.article-page[data-track=bf] .hero-kicker strong{background:#1d4e89}.article-page[data-track=ct] .hero-kicker strong{background:#11645f}
@media(max-width:600px){
 .article-page header.learning-article-hero{padding:16px;grid-template-columns:minmax(0,1fr) 80px;gap:8px}
 .article-page .learning-article-intro{display:contents}
 .article-page .learning-article-intro .hero-kicker{grid-column:1/-1;grid-row:1;margin:0}
 .article-page .learning-article-intro h1{grid-column:1/-1;grid-row:2;margin:6px 0;font-size:23px;line-height:1.5}
 .article-page .learning-article-intro>p{grid-column:1/-1;grid-row:3;margin:4px 0;font-size:15px;line-height:1.8}
 .article-page .learning-article-intro .hero-meta{grid-column:1;grid-row:4;margin-top:0;padding-top:0;border:0}
 .article-page .article-navigator{grid-column:2;grid-row:4/6;width:80px;align-self:end;display:flex;flex-direction:column;align-items:center}
 .article-page .article-navigator img{width:42px}.article-page .article-navigator figcaption{font-size:10px;white-space:nowrap}
 .article-page .article-start{grid-column:1;grid-row:5;padding:0;background:transparent;align-self:center}
 .article-page .article-start>a{padding:8px;font-size:12px}
}