.article-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; padding-top:32px; font-size:15px; color:var(--muted); }
.article-breadcrumb a { text-decoration:underline; text-underline-offset:4px; }
.article-breadcrumb>span[aria-hidden] { color:#aaab9e; }
.article-hero { display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:40px; padding:44px 0 48px; border-bottom:1px solid var(--line); }
.article-hero .eyebrow { color:var(--orange-dark); }
.article-hero h1 { max-width:880px; font-size:clamp(36px,4.3vw,62px); line-height:1.12; font-weight:550; letter-spacing:-.04em; margin:20px 0 24px; text-wrap:balance; }
.article-hero .article-deck { font-size:20px; line-height:1.65; color:var(--muted); max-width:750px; }
.article-meta { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:24px; font-size:15px; color:var(--muted); }
.article-meta strong { font-weight:550; color:var(--ink); }
.article-hero-visual { align-self:center; text-align:center; }
.article-hero-visual img { display:block; width:100%; height:auto; }
.article-hero-visual p { margin-top:18px; color:var(--orange-dark); font-size:16px; font-weight:550; }
.article-layout { display:grid; grid-template-columns:240px minmax(0,760px); justify-content:center; gap:clamp(36px,5vw,80px); padding:48px 0 80px; }
.article-toc { position:sticky; top:calc(var(--header-height) + 26px); align-self:start; max-height:calc(100dvh - var(--header-height) - 60px); overflow:auto; border-left:2px solid #e6d7c8; padding-left:20px; }
.article-toc>p { color:var(--muted); font-size:14px; font-weight:550; margin-bottom:14px; }
.article-toc a { display:block; font-size:16px; line-height:1.55; padding:7px 0; }
.article-toc a:hover { color:var(--orange-dark); }
.article-body { min-width:0; }
.article-body section+section { margin-top:44px; padding-top:36px; border-top:1px solid var(--line); }
.article-body h2 { font-size:30px; font-weight:550; line-height:1.3; letter-spacing:-.025em; margin-bottom:20px; text-wrap:balance; }
.article-body h3 { font-size:21px; line-height:1.4; font-weight:550; margin:26px 0 12px; }
.article-body p,.article-body li,.article-body dd { font-size:18px; line-height:1.85; color:#50554a; overflow-wrap:anywhere; }
.article-body p+p { margin-top:16px; }
.article-body ul,.article-body ol { padding-left:25px; margin:18px 0; }
.article-body li+li { margin-top:12px; }
.article-body strong { font-weight:600; color:var(--ink); }
.article-body a:not(.button) { color:var(--orange-dark); text-decoration:underline; text-underline-offset:4px; }
.article-note { background:#f0ede4; padding:22px 24px; margin:24px 0; border-left:3px solid var(--orange); border-radius:0 12px 12px 0; }
.article-note p { font-size:17px; line-height:1.7; }
.article-body .source-note { font-size:15px; color:var(--muted); margin-top:16px; line-height:1.7; }
.article-roles { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0; }
.article-role { border:1px solid var(--line); border-radius:14px; padding:24px; }
.article-role h3 { margin:0 0 12px; font-size:23px; }
.article-role p { font-size:17px; line-height:1.75; }
.article-workflow { margin:26px 0; border:1px solid #dfd5c4; border-radius:16px; padding:26px; background:#fbf8f1; }
.article-workflow figcaption { font-size:15px; color:var(--muted); margin-bottom:22px; }
.article-workflow ol { list-style:none; padding:0; margin:0; }
.article-workflow li { display:flex; gap:16px; padding:18px 0; border-top:1px solid #e7e0d2; }
.article-workflow li:first-child { border-top:0; padding-top:0; }
.article-step-number { flex-shrink:0; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#ebe2d2; font-size:16px; color:#79563e; font-weight:600; }
.article-workflow li strong { display:block; line-height:1.45; margin:2px 0 7px; }
.article-workflow li p { font-size:17px; line-height:1.65; }
.article-branches { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.article-branches span { border-radius:8px; padding:6px 12px; font-size:16px; background:#e7ecdd; color:#46543a; }
.article-branches span+span { background:#ede6df; color:#6d5e52; }
.article-metrics { margin:24px 0; }
.article-metrics>div { display:grid; grid-template-columns:185px minmax(0,1fr); gap:22px; border-top:1px solid var(--line); padding:18px 0; }
.article-metrics dt { font-size:18px; line-height:1.65; font-weight:550; }
.article-metrics dd { margin:0; font-size:17px; line-height:1.7; }
.article-example { border:1px solid #e4d0b9; background:#faf0e2; border-radius:14px; padding:24px; margin:26px 0; }
.article-example .eyebrow { color:var(--orange-dark); font-size:14px; margin-bottom:18px; }
.article-example-numbers { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.article-example-numbers>div { display:flex; flex-direction:column; gap:9px; }
.article-example-numbers strong { font-size:42px; font-weight:550; line-height:1.1; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.article-example-numbers span { font-size:17px; color:#725c48; }
.article-example p { font-size:17px; line-height:1.75; }
.article-faq details { border-top:1px solid var(--line); padding:18px 0; }
.article-faq summary { cursor:pointer; font-size:19px; line-height:1.5; font-weight:550; }
.article-faq details p { font-size:17px; margin-top:14px; }
.article-cta { margin-top:36px; padding:30px; border-radius:16px; background:#ede9de; }
.article-cta h3 { margin:0 0 14px; font-size:26px; }
.article-cta .button { margin-top:22px; color:white; }
@media(max-width:1000px) { .article-hero { grid-template-columns:minmax(0,1fr) 170px; gap:24px; }.article-layout { grid-template-columns:200px minmax(0,1fr); gap:32px; } }
@media(max-width:700px) {
  .article-breadcrumb { padding-top:24px; font-size:14px; }.article-hero { grid-template-columns:1fr; padding:28px 0 32px; gap:24px; }.article-hero h1 { font-size:38px; margin-block:17px 20px; }.article-hero .article-deck { font-size:18px; }.article-meta { font-size:14px; gap:8px 18px; }
  .article-hero-visual { display:flex; align-items:center; gap:20px; text-align:left; }.article-hero-visual img { width:86px; }.article-hero-visual p { margin:0; font-size:17px; }
  .article-layout { grid-template-columns:1fr; padding-block:30px 52px; gap:36px; }.article-toc { position:static; max-height:none; }.article-toc a { font-size:16px; }.article-body h2 { font-size:27px; }.article-body h3 { font-size:21px; }
  .article-body p,.article-body li,.article-body dd { font-size:17px; }.article-roles { grid-template-columns:1fr; }.article-note,.article-role,.article-example { padding:20px; }.article-workflow { padding:20px 16px; }.article-workflow li { gap:12px; }
  .article-metrics>div { grid-template-columns:1fr; gap:7px; }.article-example-numbers strong { font-size:36px; }.article-cta { padding:24px 20px; }.article-cta .button { width:100%; justify-content:center; white-space:normal; }
}