:root { --blog-bg:#07171d; --blog-panel:#0d252c; --blog-ink:#edf6f4; --blog-muted:#9ab3b5; --blog-line:rgba(143,193,192,.18); --blog-orange:#ff7137; --blog-mint:#72d8ca; }
.blog-page { margin:0; color:var(--blog-ink); background:radial-gradient(circle at 82% -8%,rgba(57,124,130,.2),transparent 34rem),var(--blog-bg); }
.blog-topbar { display:flex; align-items:center; width:min(1280px,calc(100% - 52px)); min-height:78px; margin:auto; border-bottom:1px solid var(--blog-line); }
.blog-brand { display:block; width:158px; }.blog-brand img { display:block; width:100%; }
.blog-topbar nav { display:flex; gap:28px; margin-left:auto; }.blog-topbar nav a { color:#a9bec0; font-size:.77rem; font-weight:750; text-decoration:none; }.blog-topbar nav a:hover,.blog-topbar nav a.is-current { color:#fff; }
.blog-eyebrow { margin:0; color:var(--blog-orange); font-size:.69rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.blog-index-main,.blog-article-main { width:min(1120px,calc(100% - 48px)); margin:auto; }
.blog-index-hero { max-width:880px; padding:clamp(78px,11vw,145px) 0 76px; }
.blog-index-hero h1,.blog-article-hero h1 { margin:14px 0 27px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(3.9rem,8.3vw,7.2rem); font-weight:500; line-height:.91; letter-spacing:-.065em; }
.blog-index-hero h1 em,.blog-article-hero h1 em { color:var(--blog-orange); font-weight:inherit; }
.blog-index-hero>p:last-child { max-width:680px; margin:0; color:#c2d3d4; font-size:1.12rem; line-height:1.7; }
.blog-index-feature { display:grid; grid-template-columns:1.25fr .75fr; overflow:hidden; margin-bottom:100px; border:1px solid var(--blog-line); border-radius:19px; background:linear-gradient(135deg,rgba(15,46,54,.96),rgba(8,28,34,.92)); box-shadow:0 30px 85px rgba(0,0,0,.2); }
.blog-feature-image { display:block; min-height:430px; overflow:hidden; background:#d7d7d7; }.blog-feature-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }.blog-feature-image:hover img { transform:scale(1.018); }
.blog-feature-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,5vw,58px); }.blog-feature-copy h2 { margin:16px 0 18px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.1rem,3.5vw,3.5rem); font-weight:500; line-height:1.02; letter-spacing:-.045em; }.blog-feature-copy>p:not(.blog-eyebrow) { margin:0; color:#b7cbcd; line-height:1.65; }
.blog-feature-tags { display:flex; flex-wrap:wrap; gap:7px; margin:24px 0; }.blog-feature-tags span { padding:6px 9px; border:1px solid var(--blog-line); border-radius:99px; color:#94afb1; font-size:.68rem; }.blog-read-link { align-self:flex-start; color:#f4faf8; font-size:.82rem; font-weight:900; text-decoration:none; }.blog-read-link span { display:inline-block; margin-left:8px; color:var(--blog-orange); transition:transform .2s ease; }.blog-read-link:hover span { transform:translateX(4px); }
.blog-article-hero { max-width:970px; padding:62px 0 70px; }.blog-back { display:inline-block; margin-bottom:68px; color:#91aaac; font-size:.77rem; font-weight:800; text-decoration:none; }.blog-back:hover { color:var(--blog-mint); }.blog-article-hero h1 { font-size:clamp(4rem,9vw,8rem); }
.blog-article-lead { max-width:760px; margin:0; color:#d2e0e0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.18rem,2vw,1.48rem); line-height:1.65; }.blog-article-meta { display:flex; flex-wrap:wrap; gap:9px 25px; margin-top:30px; color:#819da0; font-size:.72rem; }.blog-article-meta span+span::before { content:"·"; margin-right:25px; color:#46666a; }
.blog-article-summary { display:grid; grid-template-columns:140px repeat(4,1fr); gap:1px; margin-bottom:24px; overflow:hidden; border:1px solid var(--blog-line); border-radius:14px; background:var(--blog-line); }.blog-article-summary>* { background:#0c2329; }.blog-article-summary>p { display:grid; align-items:center; padding:20px; }.blog-article-summary div { min-height:104px; padding:19px; }.blog-article-summary strong { display:block; margin-bottom:7px; color:#fff; font-family:Georgia,"Times New Roman",serif; font-size:1.6rem; font-weight:500; }.blog-article-summary span { color:#87a2a5; font-size:.68rem; line-height:1.4; }
.blog-article-toc { display:flex; align-items:center; gap:26px; margin-bottom:84px; padding:18px 4px; border-bottom:1px solid var(--blog-line); }.blog-article-toc>span { color:#65868a; font-size:.64rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.blog-article-toc a { color:#a8bdbf; font-size:.72rem; font-weight:750; text-decoration:none; }.blog-article-toc a:hover { color:var(--blog-orange); }
.blog-prose { max-width:770px; margin:0 auto 38px; }.blog-prose p { color:#b9cdce; font-size:1.02rem; line-height:1.82; }.blog-prose strong { color:#f1f7f5; }.blog-prose h3 { margin:82px 0 20px; color:#f1f7f5; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.8rem,3vw,2.65rem); font-weight:500; letter-spacing:-.035em; }.blog-opening { margin-bottom:120px; }.blog-dropcap::first-letter { float:left; margin:10px 13px 0 0; color:var(--blog-orange); font-family:Georgia,"Times New Roman",serif; font-size:4.3rem; line-height:.73; }
.blog-chapter { scroll-margin-top:24px; margin-bottom:150px; }.blog-chapter-head { display:grid; grid-template-columns:100px 1fr; max-width:900px; margin-bottom:65px; padding-top:34px; border-top:1px solid var(--blog-line); }.blog-chapter-head>span { color:#45666a; font-family:Georgia,"Times New Roman",serif; font-size:2.4rem; }.blog-chapter-head h2 { margin:9px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(3rem,6vw,5.7rem); font-weight:500; line-height:.94; letter-spacing:-.055em; }
.blog-figure { margin:50px 0 23px; }.blog-figure-frame { overflow:hidden; padding:7px; border:1px solid rgba(135,184,185,.2); border-radius:15px; background:#0b2026; box-shadow:0 28px 70px rgba(0,0,0,.22); }.blog-figure img { display:block; width:100%; height:auto; border-radius:10px; }.blog-figure figcaption { display:grid; grid-template-columns:80px minmax(0,680px); gap:18px; padding:16px 8px 0; }.blog-figure figcaption span { color:var(--blog-orange); font-size:.62rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.blog-figure figcaption p { margin:0; color:#789699; font-size:.72rem; line-height:1.55; }
.blog-analysis-link { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:790px; margin:28px auto 76px; padding:20px 22px; border:1px solid rgba(111,215,201,.22); border-radius:12px; color:inherit; background:linear-gradient(135deg,rgba(24,67,72,.7),rgba(10,38,43,.8)); text-decoration:none; transition:border-color .2s ease,transform .2s ease; }.blog-analysis-link:hover { transform:translateY(-2px); border-color:rgba(111,215,201,.55); }.blog-analysis-link span { display:grid; gap:4px; }.blog-analysis-link small { color:var(--blog-mint); font-size:.59rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }.blog-analysis-link strong { color:#eef8f6; font-size:.87rem; }.blog-analysis-link em { color:#78979a; font-size:.68rem; font-style:normal; }.blog-analysis-link>b { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border-radius:50%; color:#17272a; background:var(--blog-mint); }.blog-analysis-link--compact { max-width:700px; margin-top:25px; }
.blog-split-story { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.8fr); gap:50px; align-items:center; margin:92px 0 28px; }.blog-split-story .blog-prose { margin:0; }.blog-split-story .blog-prose h3 { margin-top:0; }.blog-figure--small { margin:0; }.blog-figure--small figcaption { grid-template-columns:70px 1fr; }
.blog-method { scroll-margin-top:24px; max-width:850px; margin:0 0 95px; padding:45px; border:1px solid var(--blog-line); border-radius:16px; background:linear-gradient(135deg,rgba(15,49,57,.82),rgba(8,29,35,.8)); }.blog-method h2 { margin:13px 0 18px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:500; letter-spacing:-.045em; }.blog-method>p:not(.blog-eyebrow) { color:#abc1c2; line-height:1.75; }.blog-method>div { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:8px 14px; margin-top:28px; padding-top:20px; border-top:1px solid var(--blog-line); }.blog-method span { color:#67888b; font-size:.65rem; }.blog-method strong { color:#dbe9e7; font-size:.72rem; }.blog-page .site-footer { border-top-color:var(--blog-line); }
@media (max-width:900px) { .blog-index-feature { grid-template-columns:1fr; }.blog-feature-image { min-height:330px; }.blog-article-summary { grid-template-columns:repeat(2,1fr); }.blog-article-summary>p { grid-column:1/-1; }.blog-article-toc { align-items:flex-start; flex-direction:column; gap:12px; }.blog-split-story { grid-template-columns:1fr; }.blog-figure--small { max-width:640px; margin:auto; } }
@media (max-width:600px) { .blog-topbar,.blog-index-main,.blog-article-main { width:min(100% - 28px,1120px); }.blog-topbar { min-height:66px; }.blog-brand { width:130px; }.blog-topbar nav { gap:15px; }.blog-topbar nav a { font-size:.66rem; }.blog-index-hero { padding:68px 0 52px; }.blog-index-hero h1,.blog-article-hero h1 { font-size:3.55rem; }.blog-feature-image { min-height:230px; }.blog-feature-copy { padding:27px 22px 31px; }.blog-article-hero { padding-top:36px; }.blog-back { margin-bottom:46px; }.blog-article-meta span+span::before { display:none; }.blog-article-summary { grid-template-columns:1fr 1fr; }.blog-article-summary div { min-height:90px; padding:15px; }.blog-article-toc { margin-bottom:62px; }.blog-opening { margin-bottom:86px; }.blog-chapter { margin-bottom:100px; }.blog-chapter-head { grid-template-columns:52px 1fr; margin-bottom:46px; }.blog-chapter-head>span { font-size:1.6rem; }.blog-chapter-head h2 { font-size:3rem; }.blog-prose p { font-size:.95rem; }.blog-prose h3 { margin-top:62px; font-size:2rem; }.blog-figure { width:calc(100% + 16px); margin-left:-8px; }.blog-figure-frame { padding:4px; border-radius:10px; }.blog-figure figcaption { grid-template-columns:62px 1fr; gap:10px; }.blog-analysis-link { margin-bottom:62px; padding:17px; }.blog-analysis-link em { display:none; }.blog-split-story { gap:28px; margin-top:70px; }.blog-method { padding:28px 22px; }.blog-method>div { grid-template-columns:1fr 1fr; } }