:root { --blog-navy:#062f61; --blog-deep:#031f42; --blog-cobalt:#084fac; --blog-lilac:#cbb8ff; --blog-paper:#fbfaf8; --blog-ink:#172238; --blog-muted:#677187; --blog-rule:#dfe5ee; }
.editorial-article { background:var(--blog-paper); color:var(--blog-ink); overflow:clip; }
.article-hero { min-height:670px; position:relative; isolation:isolate; background:var(--blog-navy); }
.article-hero__image,.article-hero__shade { position:absolute; inset:0; width:100%; height:100%; }
.article-hero__image { object-fit:cover; object-position:64% 43%; z-index:-3; }
.article-hero__shade { z-index:-2; background:linear-gradient(90deg,rgba(3,31,66,.98) 0%,rgba(5,47,97,.92) 35%,rgba(5,47,97,.42) 59%,rgba(5,47,97,.05) 100%); }
.article-hero__inner { width:min(100% - 64px,1440px); min-height:670px; margin:0 auto; display:flex; align-items:center; }
.article-hero__copy { width:min(620px,52vw); color:#fff; padding:70px 0 82px; }
.article-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:28px; color:#d9cfff; font-size:13px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.article-eyebrow i { font-size:18px; }
.article-hero h1,.article-toc h2,.blog-article-body h2,.blog-article-body h3 { font-family:'Cormorant Garamond',Georgia,serif !important; }
.article-hero h1 { margin:0; font-size:clamp(54px,5.3vw,84px); font-weight:600; line-height:.94; letter-spacing:-.035em; text-wrap:balance; }
.article-accent { width:56px; height:4px; margin:34px 0 26px; background:var(--blog-lilac); }
.article-deck { max-width:510px; margin:0; color:rgba(255,255,255,.9); font-size:20px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.article-meta { display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,.28); font-size:14px; }
.article-meta span { display:inline-flex; align-items:center; gap:9px; }
.article-meta i { color:#d9cfff; font-size:16px; }
.article-layout { width:min(100% - 64px,1320px); margin:0 auto; padding:72px 0 100px; display:grid; grid-template-columns:76px 240px minmax(0,760px); justify-content:center; align-items:start; column-gap:42px; }
.article-share,.article-toc { position:sticky; top:28px; }
.article-share { display:flex; flex-direction:column; align-items:center; gap:12px; padding-right:24px; border-right:1px solid var(--blog-rule); }
.article-share>span { margin-bottom:8px; color:var(--blog-muted); font-size:12px; font-weight:700; letter-spacing:.05em; }
.article-share a { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d7dfeb; border-radius:50%; color:var(--blog-navy); text-decoration:none; transition:color .2s ease,background .2s ease,transform .2s ease; }
.article-share a:hover,.article-share a:focus-visible { color:#fff; background:var(--blog-cobalt); transform:translateY(-2px); }
.article-toc { padding:18px 0 16px 20px; border-left:3px solid #edf0f6; }
.article-toc h2 { margin:0 0 18px; color:var(--blog-navy); font-size:28px; font-weight:600; }
.article-toc ol { margin:0; padding:0; list-style:none; }
.article-toc li+li { margin-top:8px; }
.article-toc a { display:grid; grid-template-columns:22px 1fr; gap:5px; padding:8px 10px 8px 0; color:#5e6880; font-size:13px; line-height:1.45; text-decoration:none; transition:color .2s ease,transform .2s ease; }
.article-toc a:hover,.article-toc a.is-active { color:var(--blog-cobalt); transform:translateX(3px); }
.article-toc a.is-active { font-weight:700; }
.article-toc .is-subsection a { padding-left:12px; }
.article-reading-column { min-width:0; }
.blog-article-body { color:#27344a; font-size:18px; line-height:1.85; }
.blog-article-body>p:first-child::first-letter { float:left; margin:3px 10px 0 0; color:var(--blog-navy); font-family:'Cormorant Garamond',Georgia,serif; font-size:78px; font-weight:600; line-height:.72; }
.blog-article-body p { margin:0 0 24px; }
.blog-article-body h2 { scroll-margin-top:30px; margin:54px 0 18px; color:var(--blog-navy); font-size:clamp(34px,3vw,44px); font-weight:600; line-height:1.1; }
.blog-article-body h2::after { content:''; width:42px; height:3px; display:block; margin-top:14px; background:var(--blog-lilac); }
.blog-article-body h3 { scroll-margin-top:30px; margin:38px 0 14px; color:var(--blog-navy); font-size:30px; }
.blog-article-body a { color:var(--blog-cobalt); text-underline-offset:3px; overflow-wrap:anywhere; }
.blog-article-body img { max-width:100%; height:auto; border-radius:4px; }
.blog-article-body ul,.blog-article-body ol { margin:0 0 26px; padding-left:28px; }
.blog-article-body blockquote { margin:38px 0; padding:8px 0 8px 26px; border-left:3px solid var(--blog-lilac); color:var(--blog-navy); font-size:22px; }
.article-key-takeaway { display:grid; grid-template-columns:58px 1fr; gap:18px; margin:46px 0 0; padding:24px 28px; border:1px solid #e8e0ff; border-radius:12px; background:#f7f3ff; }
.article-key-takeaway__icon { width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#e4d9ff; color:#6949b8; font-size:21px; }
.article-key-takeaway strong { display:block; margin-bottom:6px; color:var(--blog-navy); font-size:15px; }
.article-key-takeaway p { margin:0; color:#46546d; font-size:15px; line-height:1.65; }
.article-author-card { display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:16px; margin-top:54px; padding-top:28px; border-top:1px solid var(--blog-rule); }
.article-author-card__avatar { width:54px; height:54px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--blog-navy); color:#fff; font-size:21px; font-weight:700; }
.article-author-card div { display:flex; flex-direction:column; gap:3px; }
.article-author-card div span { color:var(--blog-muted); font-size:12px; }
.article-author-card div strong { color:var(--blog-ink); font-size:15px; }
.article-author-card a { color:var(--blog-cobalt); font-size:14px; font-weight:700; text-decoration:none; }
.article-author-card a i { margin-left:6px; transition:transform .2s ease; }
.article-author-card a:hover i { transform:translateX(4px); }
@media (max-width:1100px) { .article-hero,.article-hero__inner { min-height:600px; } .article-layout { grid-template-columns:64px 200px minmax(0,680px); column-gap:26px; } }
@media (max-width:900px) { .article-hero,.article-hero__inner { min-height:650px; } .article-hero__shade { background:linear-gradient(90deg,rgba(3,31,66,.96) 0%,rgba(5,47,97,.84) 58%,rgba(5,47,97,.28) 100%); } .article-hero__copy { width:min(650px,88%); } .article-layout { grid-template-columns:58px minmax(0,720px); } .article-toc { display:none; } }
@media (max-width:640px) { .article-hero { min-height:680px; } .article-hero__image { object-position:67% center; } .article-hero__shade { background:linear-gradient(90deg,rgba(3,31,66,.96) 0%,rgba(3,31,66,.82) 72%,rgba(3,31,66,.54) 100%); } .article-hero__inner { width:min(100% - 36px,1440px); min-height:680px; align-items:flex-end; } .article-hero__copy { width:100%; padding:70px 0 52px; } .article-eyebrow { margin-bottom:20px; } .article-hero h1 { font-size:clamp(45px,14vw,64px); } .article-deck { font-size:17px; } .article-meta { gap:12px 18px; } .article-layout { width:min(100% - 36px,1320px); grid-template-columns:1fr; padding:48px 0 72px; } .article-share { position:static; flex-direction:row; justify-content:flex-start; margin-bottom:34px; padding:0 0 22px; border-right:0; border-bottom:1px solid var(--blog-rule); } .article-share>span { margin:0 8px 0 0; } .blog-article-body { font-size:17px; line-height:1.78; } .blog-article-body>p:first-child::first-letter { font-size:66px; } .article-key-takeaway { grid-template-columns:1fr; padding:22px; } .article-author-card { grid-template-columns:48px 1fr; } .article-author-card__avatar { width:48px; height:48px; } .article-author-card a { grid-column:1/-1; margin-top:6px; } }