.article-hero{padding:72px 0 64px;background:var(--cream);border-bottom:1px solid var(--line)}
.article-hero .wrap{max-width:1000px}.breadcrumbs{display:flex;gap:8px;align-items:center;margin-bottom:35px;font-size:11px;color:var(--muted)}.breadcrumbs a{text-decoration:none}.article-hero h1{max-width:900px;font-size:clamp(49px,6vw,78px)}.article-hero .article-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-size:12px;color:var(--muted)}
.article-layout{display:grid;grid-template-columns:minmax(0,720px) 260px;gap:85px;align-items:start;max-width:1100px}.article-body{font-size:17px;line-height:1.82}.article-body>p{margin:0 0 24px}.article-body>p:first-child{font:25px/1.55 var(--display);color:var(--ink)}.article-body h2{font-size:38px;margin:64px 0 20px;padding-top:5px}.article-body h3{font-size:26px;margin:38px 0 13px}.article-body ul,.article-body ol{margin:0 0 28px;padding-left:24px}.article-body li{padding:5px 0}.article-body strong{color:var(--wine)}.article-body blockquote{margin:40px 0 0;padding:22px 25px;background:var(--cream);border-left:3px solid var(--orange);font-size:14px;color:var(--muted)}.article-body a{color:var(--wine);text-underline-offset:3px}.article-body h2+ul{margin-top:0}
.article-aside{position:sticky;top:118px;padding:26px;border-top:3px solid var(--wine);background:#eee5d9}.article-aside .eyebrow{margin-bottom:15px}.article-aside p{font-size:13px;line-height:1.65;color:var(--muted);margin-bottom:20px}.article-aside .btn{width:100%;padding:14px 15px;text-align:center}.article-aside small{display:block;margin-top:12px;color:var(--muted);font-size:10px;line-height:1.5}
.article-related{background:var(--green);color:#fff9ec}.article-related .wrap{max-width:1000px}.article-related h2{color:inherit;margin-bottom:25px}.article-related p{color:#c7cfba;max-width:60ch;margin-bottom:28px}.article-related .btn--outline{color:#fff9ec;border-color:#ffffff66}
@media(max-width:900px){.article-layout{grid-template-columns:1fr;gap:45px}.article-aside{position:static;max-width:520px}.article-hero{padding-top:55px}.article-body h2{margin-top:52px}}
@media(max-width:650px){.article-hero{padding:42px 0 46px}.article-hero h1{font-size:clamp(42px,12vw,58px)}.article-hero .article-meta{gap:10px 18px}.article-layout{gap:35px}.article-body{font-size:16px;line-height:1.75}.article-body>p:first-child{font-size:22px}.article-body h2{font-size:32px;margin-top:45px}.article-body h3{font-size:24px}.article-aside{padding:23px}.article-related h2{font-size:38px}}