/* Shared site navigation and mobile reading improvements for existing article / tool / project pages. */
body.article-page,body.tool-page,body.project-page{--new-ink:#202c29;--new-green:#165d50;--new-line:#e2e8e4}
body.article-page .site-header,body.tool-page .site-header,body.project-page .site-header{background:rgba(255,255,255,.96);border-bottom:1px solid #e2e8e4;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body.article-page .header-inner,body.tool-page .header-inner,body.project-page .header-inner{height:66px;width:min(1160px,calc(100% - 48px));margin:auto}
body.article-page .brand,body.tool-page .brand,body.project-page .brand{align-items:center;min-height:44px;display:flex;gap:12px}
body.article-page .brand-name,body.tool-page .brand-name,body.project-page .brand-name{color:#20342b;font-size:20px;font-weight:750;letter-spacing:-.05em}
body.article-page .brand-dot,body.tool-page .brand-dot,body.project-page .brand-dot{color:#165d50}
body.article-page .brand-tagline,body.tool-page .brand-tagline,body.project-page .brand-tagline{font-size:12px;color:#748179;border-left:1px solid #d4ded6;padding-left:12px;white-space:nowrap}
body.article-page .nav-main,body.tool-page .nav-main,body.project-page .nav-main{gap:22px;align-items:center}
body.article-page .nav-link,body.tool-page .nav-link,body.project-page .nav-link{font-size:13px;min-height:42px;color:#4b5c51}
body.article-page .nav-cta,body.tool-page .nav-cta,body.project-page .nav-cta{font-size:13px;min-height:40px;padding:9px 15px;background:#165d50;color:#fff;border-radius:9px}
body.article-page .nav-toggle,body.tool-page .nav-toggle,body.project-page .nav-toggle{width:44px;height:44px}
body.article-page :focus-visible,body.tool-page :focus-visible,body.project-page :focus-visible{outline:3px solid #3e9e86;outline-offset:3px}
body.article-page .article-content,body.article-page .article-body p{overflow-wrap:anywhere}
body.article-page img,body.tool-page img,body.project-page img{max-width:100%;height:auto}
@media(max-width:850px){
 body.article-page .nav-toggle,body.tool-page .nav-toggle,body.project-page .nav-toggle{display:flex}
 body.article-page .nav-main,body.tool-page .nav-main,body.project-page .nav-main{position:absolute;top:66px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 18px;background:#fff;border-bottom:1px solid #e2e8e4;box-shadow:0 18px 30px rgba(10,30,20,.1);transform:none;opacity:1;pointer-events:auto}
 body.article-page .nav-main.nav-open,body.tool-page .nav-main.nav-open,body.project-page .nav-main.nav-open{display:flex}
 body.article-page .nav-link,body.tool-page .nav-link,body.project-page .nav-link{min-height:47px;width:100%;display:flex;align-items:center;justify-content:flex-start;font-size:15px}
 body.article-page .nav-cta,body.tool-page .nav-cta,body.project-page .nav-cta{min-height:45px;width:100%;margin-top:8px;font-size:15px}
}
@media(max-width:620px){
 body.article-page .header-inner,body.tool-page .header-inner,body.project-page .header-inner{height:60px;width:calc(100% - 36px)}
 body.article-page .nav-main,body.tool-page .nav-main,body.project-page .nav-main{top:60px}
 body.article-page .brand-name,body.tool-page .brand-name,body.project-page .brand-name{font-size:19px}
 body.article-page .brand-tagline,body.tool-page .brand-tagline,body.project-page .brand-tagline{font-size:10px}
 body.article-page .article-hero,body.tool-page .tool-hero{padding-top:27px;padding-bottom:24px}
 body.article-page .article-title,body.tool-page .tool-title{font-size:clamp(25px,7vw,33px);line-height:1.35;letter-spacing:-.035em;overflow-wrap:anywhere}
 body.article-page .article-subtitle,body.tool-page .tool-subtitle{font-size:14px;line-height:1.8}
 body.article-page .article-content{font-size:16px;line-height:1.9}
 body.article-page .article-content p{font-size:15px;line-height:1.93}
 body.article-page .article-content h2{font-size:23px;line-height:1.4}
 body.article-page .article-content h3{font-size:19px;line-height:1.4}
 body.article-page .article-body .container,body.tool-page .container{width:calc(100% - 36px)}
 body.tool-page input,body.tool-page select,body.tool-page textarea{font-size:16px;max-width:100%}
 body.article-page table,body.tool-page table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:360px){body.article-page .brand-tagline,body.tool-page .brand-tagline,body.project-page .brand-tagline{display:none}}

@media(max-width:620px){
 body.tool-page .section{padding-top:21px;padding-bottom:28px}
 body.tool-page .tool-layout{margin-top:14px}
 body.tool-page .tool-panel,body.tool-page .tool-result,body.tool-page .tool-aside,body.tool-page .tool-note{padding:19px}
}