.article-layout,
.article-shell{width:min(1120px,calc(100% - 40px));max-width:1120px;margin-inline:auto}
.article-hero{padding:112px 0 56px}
.article-column{width:min(860px,calc(100% - 40px));margin:0 auto}
.article-hero .breadcrumbs{width:auto;max-width:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.article-hero .breadcrumbs a{color:var(--muted);text-decoration:none}
.article-hero .breadcrumbs a:hover{color:var(--ink)}
.article-hero .breadcrumbs [aria-current="page"]{color:var(--ink)}
.article-hero .eyebrow{margin:0 0 24px}
.article-hero h1{max-width:820px;margin:0;font-size:clamp(40px,5.2vw,60px);line-height:1.1;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.article-deck{max-width:760px;margin:24px 0 0;color:var(--muted);font-size:17px;line-height:1.65}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px}
.article-meta .meta-pill,.meta-pill{display:inline-flex;align-items:center;margin:0;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;width:auto}
.article-main{background:var(--surface);padding:64px 0 96px}
.toc-card{position:relative;z-index:1;margin:0 0 48px;padding:28px 32px;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:16px;background:var(--paper)}
.toc-card h2{margin:0 0 18px;font-size:20px;line-height:1.3;letter-spacing:-.2px;font-weight:650}
.toc-card ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.toc-card li{margin:0;border-top:1px solid var(--line)}
.toc-card li:first-child{border-top:0}
.toc-card a{display:flex;align-items:center;gap:12px;padding:12px 0;color:var(--ink);text-decoration:none;text-underline-offset:4px}
.toc-card a:hover{color:var(--brand)}
.toc-card a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);flex:0 0 auto;color:var(--brand);font-size:12px;font-weight:700;letter-spacing:.04em}
.toc-count{display:inline-flex;margin-top:18px;padding:6px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:13px}
.article-body h2{margin:52px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line);scroll-margin-top:96px;font-size:28px;line-height:1.22;letter-spacing:-.25px;font-weight:650}
.article-body h2:first-of-type{margin-top:0}
.article-body h3{margin:28px 0 12px;font-size:20px;font-weight:650}
.article-body p,.article-body li{color:#55514e;font-size:16px;line-height:1.82}
.article-body > p:first-of-type{font-size:18px;color:var(--ink);line-height:1.7}
.article-body p{margin:0 0 18px}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:24px}
.article-body li{padding-left:4px;margin:0 0 7px}
.article-body ul li::marker{color:var(--brand)}
.article-body a{text-underline-offset:3px}
.note-card{margin:28px 0;padding:22px 24px;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:14px;background:var(--paper)}
.note-card strong{display:block;margin-bottom:8px}
.article-cta{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:20px;margin-top:64px;padding:28px 32px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink)}
.article-cta svg{width:48px;height:48px;padding:10px;border-radius:12px;background:var(--brand-soft);color:var(--brand)}
.article-cta h2{margin:0 0 8px;color:var(--ink);font-size:22px;line-height:1.25}
.article-cta p{margin:0;color:var(--muted)}
.article-cta .button{background:var(--night);color:var(--surface);border-radius:999px;white-space:nowrap}
.recommend-float{position:fixed;z-index:40;right:24px;bottom:24px;width:min(320px,calc(100vw - 32px));padding:20px 48px 20px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink)}
.recommend-float svg{width:24px;height:24px;margin-bottom:10px;color:var(--brand)}
.recommend-float strong{display:block;margin-bottom:5px;color:var(--ink)}
.recommend-float a{color:var(--brand);font-weight:650;text-underline-offset:4px}
.recommend-float .float-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer}
.recommend-float[hidden]{display:none}
@media(max-width:700px){.article-hero{padding:96px 0 44px}
.article-column{width:min(100% - 32px,860px)}
.article-main{padding:44px 0 72px}
.article-cta{grid-template-columns:44px 1fr;padding:22px}
.article-cta .button{grid-column:1/-1;justify-self:start}
.recommend-float{right:16px;bottom:16px}
.toc-card{padding:22px}
}