*{box-sizing:border-box}
:root{--page-pad:clamp(18px,4vw,48px);--site-max:1120px;--article-max:820px}
body{margin:0;background:#f6f8fb;color:#162033;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:#162033;text-decoration:none}
header{width:min(calc(100% - (2 * var(--page-pad))),var(--site-max));margin:0 auto;padding:24px 0;display:flex;justify-content:space-between;align-items:center}
header b{font-size:25px}nav a{margin-left:22px}
main{width:min(calc(100% - (2 * var(--page-pad))),960px);margin:55px auto;padding:0}
h1{font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.03;margin:.3em 0}
.lead{font-size:1.22rem;line-height:1.7;color:#536178}
section{background:#fff;border:1px solid #e2e7ef;border-radius:17px;padding:30px;margin:28px 0}
section p,li{line-height:1.75;color:#59667b}li{margin:7px 0}
.tag{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;color:#66758d}
.button{display:inline-block;background:#162033;color:#fff;padding:14px 20px;border-radius:10px;font-weight:700;margin:10px 0 35px}
footer{width:min(calc(100% - (2 * var(--page-pad))),960px);margin:auto;padding:24px 0 45px;color:#7b8798;font-size:14px}

/* Blog article: one column controls every element */
.article-page{width:100%;max-width:none;margin:0;padding:clamp(36px,5vw,72px) var(--page-pad)}
.article-shell{width:min(100%,var(--article-max));margin:0 auto}
.article-header,.article-shell>.blog-hero,.article-shell>section,.article-shell>.button,.article-shell>p{width:100%;max-width:100%;margin-left:0;margin-right:0}\n.article-header{padding:0 30px}
.article-header h1{font-size:clamp(2.35rem,4.5vw,4rem);line-height:1.05;margin:.42em 0 .3em}
.article-header .lead{width:100%;max-width:100%;margin:0;font-size:1.15rem;line-height:1.65}
.blog-hero{margin:24px 0 34px;padding:0}
.blog-hero img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:14px;border:1px solid #e2e7ef}
.blog-hero figcaption{width:100%;margin:9px 0 0;color:#738096;font-size:.88rem;line-height:1.5}
.article-shell>section{margin:30px 0;padding:30px}
.article-shell>.button{width:auto}

@media(max-width:650px){nav{display:none}main{margin-top:20px}.article-page{padding:28px 18px}.article-header{padding:0 22px}.article-shell>section{padding:22px}.blog-hero img{border-radius:10px}}

/* Match hero graphic to the article's inner text width */
.article-shell>.blog-hero{width:calc(100% - 60px);max-width:calc(100% - 60px);margin-left:auto;margin-right:auto}
@media(max-width:650px){.article-shell>.blog-hero{width:calc(100% - 44px);max-width:calc(100% - 44px)}}