/* Article page: responsive reading, accessibility and rendering performance. */
body[data-article-page]{overflow-wrap:break-word}
body[data-article-page] .article-wrap{grid-template-columns:minmax(0,48rem) minmax(16rem,20rem);justify-content:space-between;align-items:stretch}
body[data-article-page] .article-wrap>article{min-width:0}
body[data-article-page] .article-wrap>.sidebar{align-self:stretch;height:100%}
body[data-article-page] .article-wrap>.sidebar .toc-box{position:sticky;top:5.75rem;z-index:1}
body[data-article-page] .article-head h1{text-wrap:balance}
body[data-article-page] .article-lead{max-width:44rem;font-size:clamp(1.125rem,1.05rem + .35vw,1.3rem);line-height:1.65}
body[data-article-page] .meta{font-size:.875rem;border-bottom: solid 1px var(--line);display: flex;justify-content: flex-end;}
body[data-article-page] .prose{max-width:70ch;font-size:clamp(1.125rem,1.085rem + .2vw,1.2rem);line-height:1.82}
body[data-article-page] .prose p,
body[data-article-page] .prose ul,
body[data-article-page] .prose ol{margin-block:0 1.35em}
body[data-article-page] .prose li+li{margin-top:.45em}
body[data-article-page] .prose h2,
body[data-article-page] .prose h3{scroll-margin-top:6.5rem;text-wrap:balance}
body[data-article-page] .prose h2{font-size:clamp(1.55rem,1.38rem + .65vw,1.9rem)}
body[data-article-page] .prose h3{font-size:clamp(1.25rem,1.16rem + .4vw,1.45rem)}
body[data-article-page] .prose blockquote{font-size:1.08em;line-height:1.72}
body[data-article-page] .prose pre{max-width:100%;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
body[data-article-page] .prose code{overflow-wrap:normal;word-break:normal}
body[data-article-page] .prose img{display: block;margin-inline: auto;max-width: 100%;height: auto;}
body[data-article-page] .article-cover{aspect-ratio:16/8.5;contain:layout paint}
body[data-article-page] .ui-icon{display:block;width:1.15rem;height:1.15rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-article-page] .icon-btn .ui-icon,
body[data-article-page] .menu-toggle .ui-icon{width:1.3rem;height:1.3rem}
body[data-article-page] .download-icon .ui-icon{width:1.65rem;height:1.65rem}
body[data-article-page] .reaction-actions .ui-icon{width:1.1rem;height:1.1rem}
body[data-article-page] .reaction-actions button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
body[data-article-page] .faq-section,
body[data-article-page] .author-card,
body[data-article-page] .reaction-box,
body[data-article-page] .related-section,
body[data-article-page] .comments-section{content-visibility:auto;contain-intrinsic-size:auto 420px}
body[data-article-page] :where(a,button,input,textarea,summary):focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 42%,transparent);outline-offset:3px}

@media(max-width:1000px){
 body[data-article-page] .article-wrap{display:block}
 body[data-article-page] .article-wrap>article{max-width:48rem;margin-inline:auto}
 body[data-article-page] .article-wrap>.sidebar{display:none}
}

@media(max-width:720px){
 body[data-article-page] .page-main{padding-top:1.25rem}
 body[data-article-page] .article-head h1{font-size:clamp(2rem,8.8vw,2.65rem);line-height:1.14}
 body[data-article-page] .article-lead{font-size:1.125rem;line-height:1.62}
 body[data-article-page] .article-actions{position:static;margin:1rem 0;padding:0;border:0;background:transparent;backdrop-filter:none}
 body[data-article-page] .action-btn{flex:1 1 10rem;font-size:.875rem}
 body[data-article-page] .mobile-toc{margin-block:1rem 1.35rem}
 body[data-article-page] .mobile-toc summary{min-height:3rem}
 body[data-article-page] .mobile-toc a{min-height:2.75rem;display:flex;align-items:center;font-size:.9375rem}
 body[data-article-page] .article-cover{margin:1.25rem 0 1.75rem;border-radius:1rem;font-size:clamp(3rem,17vw,4.5rem)}
 body[data-article-page] .prose{font-size:1.125rem;line-height:1.78}
 body[data-article-page] .prose h2{margin-top:1.75em}
 body[data-article-page] .prose blockquote{margin-inline:0;padding:1rem 1rem 1rem 1.125rem}
 body[data-article-page] .prose pre{margin-inline:calc(50% - 50vw);padding-inline:max(1rem,calc((100vw - 100%)/2));border-radius:0;font-size:.8125rem}
 body[data-article-page] .code-copy{right:max(.6rem,calc((100vw - 100%)/2))}
 body[data-article-page] .download-box{margin-block:2rem;padding:1rem;gap:.8rem}
 body[data-article-page] .download-box h2{font-size:1.125rem}
 body[data-article-page] .author-card{align-items:start}
 body[data-article-page] .author-links{flex-wrap:wrap;gap:.5rem 1rem}
}

.article-pagination{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:0.5rem;padding-top:1.75rem;}
.article-page-link{display:grid;align-content:start;gap:.45rem;min-width:0;min-height:7.5rem;padding:1.1rem;border:1px solid var(--line);border-radius:.875rem;background:var(--white);transition:border-color .2s,transform .2s,box-shadow .2s}
.article-page-link:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:var(--shadow)}
.article-page-label{display:flex;align-items:center;gap:.35rem;color:var(--blue);font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.article-page-link strong{font-size:1rem;line-height:1.45;text-wrap:balance}
.article-page-next{text-align:right}
.article-page-next .article-page-label{justify-content:flex-end}
:root[data-theme="dark"] .article-page-link{background:#0d2537}

@media(max-width:560px){
 .article-pagination{grid-template-columns:minmax(0,1fr)}
 .article-page-link{min-height:auto}
 .article-page-next{text-align:left}
 .article-page-next .article-page-label{justify-content:flex-start}
}

@media(max-width:390px){
 body[data-article-page] .article-head h1{font-size:1.9rem}
 body[data-article-page] .meta{gap:.5rem .75rem}
 body[data-article-page] .action-btn{flex-basis:100%}
 body[data-article-page] .download-icon{width:2.75rem;height:2.75rem}
 body[data-article-page] .author-card{grid-template-columns:3.25rem 1fr;gap:.75rem}
 body[data-article-page] .author-card img{width:3.25rem;height:3.25rem}
 body[data-article-page] .related-card{grid-template-columns:5.5rem 1fr}
}

@media(prefers-contrast:more){
 body[data-article-page] .prose a{text-decoration-thickness:2px}
 body[data-article-page] .action-btn{border-color:currentColor}
}

@media print{
 body[data-article-page] .site-header,
 body[data-article-page] .top-strip,
 body[data-article-page] .article-actions,
 body[data-article-page] .mobile-toc,
 body[data-article-page] .sidebar,
 body[data-article-page] .reaction-box,
 body[data-article-page] .comments-section,
 body[data-article-page] .site-footer{display:none!important}
 body[data-article-page] .article-wrap{display:block}
 body[data-article-page] .prose{max-width:none;font-size:11pt;line-height:1.55}
}
