/* Single-news reading aid. The approved shared design and motion stay intact. */
html[data-page="story"]{--article-nav-height:3.5rem}
.i-article-content{position:relative}
.i-article-nav{
 position:sticky;top:calc(var(--header-height) + var(--wp-admin-offset,0px));z-index:40;
 display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
 gap:0 clamp(1.5rem,3vw,3rem);min-height:3.5rem;padding:0 var(--gutter);
 background:var(--brand-surface);border-block:1px solid var(--brand-line);
 font-size:.9375rem;line-height:1.4;
}
.i-article-nav-label{color:var(--brand-body);font-size:.8125rem}
.i-article-nav-links{display:flex;flex-wrap:wrap;gap:0 clamp(1rem,2.5vw,2.5rem);list-style:none;padding:0;margin:0}
.i-article-nav-links a{
 position:relative;display:flex;align-items:center;min-height:3.5rem;padding:.65rem 0;
 color:var(--brand-body);transition:color var(--motion-ui) var(--ease);
}
.i-article-nav-links a::after{
 content:"";position:absolute;bottom:.5rem;inset-inline:0;height:1px;
 background:var(--brand-cyan);transform:scaleX(0);transform-origin:left;
 transition:transform var(--motion-ui) var(--ease);
}
.i-article-nav-links a:is(:hover,[aria-current="location"]){color:var(--brand-cyan)}
.i-article-nav-links a:is(:hover,[aria-current="location"])::after{transform:scaleX(1)}
.i-article-nav-links a:focus-visible{outline-offset:3px}
.i-article-position{color:var(--brand-body);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.8125rem}
.i-article-position [data-article-current]{color:var(--brand-cyan)}
.i-article-progress{position:absolute;bottom:-1px;inset-inline:0;height:1px;background:var(--brand-cyan);transform:scaleX(0);transform-origin:left;pointer-events:none}
/* Root scroll-padding already accounts for the main header. Add the article
   navigation and WP toolbar once, including when JavaScript is unavailable. */
html[data-page="story"] body :is([data-article-section],.i-reading [id]){scroll-margin-top:calc(var(--article-nav-height) + var(--wp-admin-offset,0px) + .75rem)}
[data-article-section]:focus-visible{outline:1px solid var(--brand-cyan);outline-offset:-1px}
@media(max-width:800px){
 html[data-page="story"]{--article-nav-height:6rem}
 .i-article-nav{grid-template-columns:minmax(0,1fr);gap:0}
 .i-article-nav-label,.i-article-position{display:none}
 .i-article-nav-links{gap:0 1.25rem}
 .i-article-nav-links a{min-height:2.75rem;font-size:.875rem}
}
@media(prefers-reduced-motion:reduce){
 .i-article-nav-links a,.i-article-nav-links a::after{transition:none}
}