/* Editorial surfaces extend the existing site without changing global service styles. */
.editorial-page { --blog-paper:#f5f3ec; --blog-green:#204c3f; --blog-line:#d8dfd7; --blog-muted:#53645b; background:var(--blog-paper); color:#172e24; }
.editorial-main { padding-bottom:64px; }
.editorial-page .skip-link { position:fixed; left:16px; top:8px; z-index:2000; padding:12px 18px; border-radius:8px; background:#fffdf6; color:#204c3f; transform:translateY(-180%); }
.editorial-page .skip-link:focus { transform:translateY(0); }
.editorial-page .blog-wrap { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.blog-crumbs { display:flex; flex-wrap:wrap; gap:9px; padding-top:28px; color:var(--blog-muted); font-size:14px; }
.blog-crumbs a { text-decoration:underline; text-underline-offset:4px; }
.blog-intro { padding:52px 0 36px; max-width:920px; }
.blog-eyebrow { display:block; color:var(--blog-green); font-size:12px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; }
.editorial-page .blog-intro h1 { max-width:900px; font-size:clamp(35px,4.8vw,62px); line-height:1.09; letter-spacing:-.045em; margin:0 0 24px; font-weight:650; }
.blog-intro>p { max-width:720px; color:var(--blog-muted); font-size:19px; line-height:1.65; margin:0; }
.blog-topics { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 34px; }
.blog-topics a { display:inline-flex; align-items:center; min-height:44px; padding:10px 17px; border:1px solid var(--blog-line); border-radius:100px; background:#fffdf7; font-size:14px; transition:background .18s,color .18s; }
.blog-topics a:hover,.blog-topics a[aria-current] { background:var(--blog-green); color:white; border-color:var(--blog-green); }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.blog-card { border:1px solid var(--blog-line); border-radius:22px; overflow:hidden; background:#fffdf8; display:flex; flex-direction:column; min-width:0; }
.blog-card-image { display:block; overflow:hidden; aspect-ratio:16/9; background:#e5e8dd; }
.blog-card-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .28s ease; }
.blog-card:hover .blog-card-image img { transform:scale(1.025); }
.blog-card-body { padding:28px; display:flex; flex-direction:column; flex:1; }
.blog-card-meta { color:var(--blog-muted); display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; margin:0 0 13px; }
.blog-card h2,.blog-card h3 { font-size:26px; font-weight:650; line-height:1.23; letter-spacing:-.025em; margin:0 0 13px; }
.blog-card p { margin:0 0 22px; color:var(--blog-muted); line-height:1.65; }
.blog-card-link { margin-top:auto; color:var(--blog-green); font-weight:700; display:inline-flex; min-height:44px; align-items:center; gap:12px; text-underline-offset:5px; }
.blog-card-link:hover { text-decoration:underline; }
.blog-editor-note { margin:36px 0 0; border-top:1px solid var(--blog-line); padding:24px 0; color:var(--blog-muted); max-width:800px; line-height:1.7; }
.article-intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr); gap:42px; align-items:center; padding:42px 0 42px; }
.editorial-page .article-intro h1 { font-size:clamp(32px,3.8vw,49px); max-width:800px; line-height:1.12; letter-spacing:-.04em; margin:0 0 24px; font-weight:650; }
.article-intro .article-lead { font-size:18px; color:var(--blog-muted); line-height:1.7; margin:0 0 22px; }
.article-cover { margin:0; }
.article-cover img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:22px; }
.article-cover figcaption { font-size:12px; line-height:1.5; color:var(--blog-muted); margin-top:12px; }
.article-layout { display:grid; grid-template-columns:230px minmax(0,760px); gap:54px; align-items:start; padding-top:34px; border-top:1px solid var(--blog-line); }
.article-toc { position:sticky; top:130px; padding-bottom:24px; font-size:14px; }
.article-toc strong { display:block; margin-bottom:15px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.article-toc a { display:block; padding:10px 0; color:var(--blog-muted); line-height:1.5; text-underline-offset:4px; }
.article-toc a:hover { color:var(--blog-green); text-decoration:underline; }
.article-body { min-width:0; font-size:17px; line-height:1.85; }
.article-body section { scroll-margin-top:135px; margin:0 0 42px; }
.article-body h2 { font-size:clamp(24px,2.4vw,31px); line-height:1.28; letter-spacing:-.025em; font-weight:650; margin:0 0 18px; }
.article-body p { margin:0 0 18px; }
.article-body ul,.article-body ol { margin:16px 0 0; padding-left:22px; }
.article-body li { padding-left:6px; margin:9px 0; }
.article-source-links { font-size:13px; line-height:1.6; color:var(--blog-muted); }
.article-source-links a,.article-sources a { text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }
.article-takeaway { padding:24px 27px; border-left:3px solid var(--blog-green); background:#e9eee5; border-radius:0 14px 14px 0; margin:0 0 38px; }
.article-takeaway strong { display:block; font-size:13px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:8px; }
.article-checklist { background:#fffdf8; border:1px solid var(--blog-line); padding:28px; border-radius:18px; }
.article-cta { background:var(--blog-green); color:#fffef5; border-radius:20px; padding:32px; }
.article-cta p { color:#e0e9df; }
.article-cta .blog-button { display:inline-flex; min-height:48px; justify-content:center; align-items:center; background:#fffdf6; color:#204c3f; padding:13px 20px; border-radius:11px; font-size:15px; font-weight:750; line-height:1.5; text-align:center; }
.article-sources { font-size:14px; color:var(--blog-muted); }
.article-sources ol { padding-left:20px; }
.article-related { padding-top:32px; }
.article-related h2 { font-size:29px; letter-spacing:-.03em; }
.blog-mini-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.blog-mini-grid .blog-card h3 { font-size:22px; }
.blog-mini-grid .blog-card-body { padding:22px; }
.editorial-related { padding:42px 0; }
.editorial-related .wrap { width:min(1180px,calc(100% - 40px)); }
.editorial-related h2 { font-size:28px; line-height:1.25; }
.editorial-related p { max-width:760px; }
.editorial-related .blog-card { color:#172e24; }
.editorial-related .blog-card p { color:#53645b; }
.editorial-related .blog-card-meta { color:#53645b; }
.editorial-related .blog-card-link { color:#204c3f; }
.editorial-related .blog-card { border-color:#d8dfd7; }
.blog-feed { margin-top:28px; font-size:14px; }
.blog-feed a { text-decoration:underline; text-underline-offset:4px; }
.editorial-page :where(a,button,summary):focus-visible { outline:3px solid #9b6d26; outline-offset:4px; }
@media(max-width:900px) { .article-intro { grid-template-columns:minmax(0,1fr) 260px; gap:26px; } .article-layout { grid-template-columns:180px minmax(0,1fr); gap:30px; } .blog-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .editorial-page .blog-wrap { width:calc(100% - 32px); } .blog-intro { padding:35px 0 28px; } .blog-intro>p { font-size:17px; } .blog-grid,.blog-mini-grid { grid-template-columns:minmax(0,1fr); gap:18px; } .blog-card-body { padding:23px; } .blog-card h2 { font-size:24px; } .article-intro { grid-template-columns:minmax(0,1fr); padding:30px 0; gap:24px; } .article-intro .article-lead { font-size:17px; } .article-cover img { aspect-ratio:16/10; } .article-layout { display:block; padding-top:20px; } .article-toc { position:static; border-bottom:1px solid var(--blog-line); margin-bottom:28px; } .article-toc a { padding:8px 0; } .article-body { font-size:16px; line-height:1.85; } .article-body section { scroll-margin-top:115px; margin-bottom:32px; } .article-cta,.article-checklist { padding:23px; } .article-cta .blog-button { width:100%; } }
@media(prefers-reduced-motion:reduce) { .blog-card-image img,.blog-topics a { transition:none; } }