@import url("./common.css");

.article-page { background-image:none; }
.article-page::before,.article-page::after { display:none; }
.blog-main { width:min(1160px,calc(100% - 80px)); margin:0 auto; padding:145px 0 90px; }
.blog-intro { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:60px; padding-bottom:54px; }
.blog-kicker { color:#9eddb3; font:11px var(--font-mono); letter-spacing:.1em; margin:0 0 20px; }
.blog-intro h1 { font-size:clamp(40px,4.8vw,64px); line-height:1.15; letter-spacing:-.045em; font-weight:550; margin:0; }
.blog-intro>p { max-width:440px; margin:0 0 4px; color:#9fb2a5; font-size:16px; line-height:1.9; }
.blog-feature { display:grid; grid-template-columns:1fr 1.05fr; background:#101a14; border:1px solid #ffffff0c; border-radius:12px; overflow:hidden; color:inherit; }
.blog-art { min-height:350px; background:radial-gradient(ellipse at 25% 20%,#559e682b,transparent 70%),#14231a; display:flex; flex-direction:column; justify-content:center; padding:40px; gap:30px; border-right:1px solid #ffffff0c; }
.blog-art>span { color:#88aa94; font:11px var(--font-mono); letter-spacing:.07em; }
.blog-art>strong { color:#d3ebd9; font-size:clamp(36px,4vw,56px); font-weight:500; letter-spacing:-.04em; }
.blog-branches { display:flex; gap:10px; flex-wrap:wrap; }
.blog-branches span { color:#b3d5bf; border-top:1px solid #4a7056; padding-top:12px; flex:1; font:11px var(--font-mono); }
.blog-feature-copy { padding:42px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.blog-meta { display:flex; flex-wrap:wrap; gap:10px 18px; color:#829c8b; font-size:12px; line-height:1.6; }
.blog-meta .blog-category { color:#a4d6b5; }
.blog-feature h2 { font-weight:500; font-size:clamp(25px,2.7vw,34px); letter-spacing:-.03em; line-height:1.4; margin:20px 0 16px; }
.blog-feature-copy>p { color:#9db1a4; line-height:1.9; font-size:14px; margin:0 0 28px; }
.blog-read { color:#bce7cb; font-size:13px; display:flex; gap:14px; align-items:center; }
.blog-feature:hover { background:#142118; border-color:#4a7056; }
.blog-feature:hover .blog-read,.blog-card:hover .blog-read { color:#e6f5ec; }
.blog-section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:54px 0 22px; border-bottom:1px solid #ffffff13; }
.blog-section-heading h2 { font-size:23px; font-weight:500; letter-spacing:-.025em; margin:0; }
.blog-section-heading>span { font:11px var(--font-mono); color:#789382; }
.blog-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.blog-card { display:block; color:inherit; padding:32px 0; border-bottom:1px solid #ffffff13; }
.blog-card-number { display:block; font:12px var(--font-mono); color:#617c69; margin-bottom:24px; }
.blog-card h3 { font-size:25px; font-weight:500; line-height:1.45; letter-spacing:-.025em; margin:15px 0 12px; text-wrap:balance; }
.blog-card>p { font-size:14px; color:#9db1a4; line-height:1.9; margin:0 0 24px; }
.blog-card:hover h3 { color:#bce7cb; }
.blog-resource { margin-top:60px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:28px 0; border-block:1px solid #ffffff13; }
.blog-resource h2 { font-weight:500; font-size:20px; margin:0 0 9px; }
.blog-resource p { margin:0; color:#94aa9c; font-size:14px; line-height:1.8; }
.blog-resource a { color:#bce7cb; white-space:nowrap; font-size:13px; }
.article-main { width:min(1160px,calc(100% - 80px)); margin:0 auto; padding:120px 0 90px; }
.article-back { color:#8fae9b; font-size:13px; }
.article-back:hover { color:#d3ebd9; }
.article-heading { max-width:830px; margin:48px 0; }
.article-heading h1 { font-weight:550; letter-spacing:-.04em; font-size:clamp(32px,3.8vw,48px); line-height:1.3; margin:22px 0; text-wrap:balance; }
.article-description { color:#a4baac; line-height:1.9; font-size:18px; margin:0 0 24px; }
.article-byline { font-size:12px; color:#7c9987; }
.article-layout { display:grid; grid-template-columns:220px minmax(0,740px); gap:65px; align-items:start; border-top:1px solid #ffffff13; padding-top:42px; }
.article-toc { position:sticky; top:110px; display:flex; flex-direction:column; gap:14px; font-size:12px; line-height:1.7; }
.article-toc strong { font-weight:500; color:#c5dccd; margin-bottom:6px; }
.article-toc a { color:#8fa99a; }
.article-toc a:hover { color:#bce7cb; }
.article-body { min-width:0; color:#bdcec3; font-size:16px; line-height:1.95; overflow-wrap:anywhere; }
.article-body section { margin-bottom:42px; scroll-margin-top:0; }
.article-body h2 { color:#e4f0e8; font-size:26px; font-weight:500; line-height:1.45; letter-spacing:-.02em; margin:0 0 20px; }
.article-body p { margin:0 0 20px; }
.article-body a { color:#a6dcbc; text-decoration:underline; text-decoration-color:#568568; text-underline-offset:4px; }
.article-body a:hover { color:#e1f7e9; }
.article-body ul,.article-body ol { padding-left:24px; margin:0 0 24px; }
.article-body li { padding-left:6px; margin-bottom:12px; }
.article-body blockquote { margin:24px 0; border-left:2px solid #80b491; padding:10px 22px; background:#142219; color:#c2dfcd; }
.article-body blockquote p:last-child { margin:0; }
.article-body pre { max-width:100%; overflow-x:auto; padding:20px; margin:24px 0; border:1px solid #ffffff13; border-radius:6px; background:#101b14; color:#c3dfcc; font:12px/1.9 var(--font-mono); letter-spacing:0; }
.article-body pre code { font:inherit; }
.article-table-wrap { overflow-x:auto; margin:26px 0; }
.article-body table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.7; min-width:420px; }
.article-body th,.article-body td { text-align:left; padding:16px 14px; border-bottom:1px solid #ffffff13; vertical-align:top; }
.article-body th { color:#c6e3d0; font-weight:500; background:#102017; }
.article-body th:first-child,.article-body td:first-child { padding-left:0; }
.article-sources { border-top:1px solid #ffffff13; padding-top:30px; font-size:14px; }
.article-sources h2 { font-size:20px; }
.article-related { margin-top:48px; border-top:1px solid #ffffff13; padding-top:32px; }
.article-related h2 { font-size:20px; font-weight:500; margin:0; }
.article-related .blog-grid { gap:30px; }
.article-related .blog-card h3 { font-size:20px; }
@media(max-width:900px) {
 .blog-main,.article-main { width:calc(100% - 48px); }
 .blog-intro { gap:30px; }.blog-art,.blog-feature-copy { padding:28px; }
 .article-layout { grid-template-columns:170px minmax(0,1fr); gap:32px; }
}
@media(max-width:640px) {
 .blog-main { width:calc(100% - 40px); padding:110px 0 55px; }
 .blog-intro { grid-template-columns:1fr; gap:22px; padding-bottom:32px; }.blog-intro h1 { font-size:40px; }.blog-intro>p { font-size:14px; }
 .blog-feature { grid-template-columns:1fr; }.blog-art { min-height:215px; border-right:0; border-bottom:1px solid #ffffff0c; padding:28px; gap:24px; }.blog-art>strong { font-size:42px; }
 .blog-feature-copy { padding:26px; }.blog-feature h2 { font-size:26px; }.blog-feature-copy>p { font-size:14px; }
 .blog-grid { grid-template-columns:1fr; gap:0; }.blog-section-heading { padding-top:36px; }.blog-section-heading>span { font-size:10px; }
 .blog-card { padding:26px 0; }.blog-card h3 { font-size:23px; }.blog-card-number { margin-bottom:18px; }
 .blog-resource { margin-top:36px; flex-direction:column; align-items:flex-start; gap:18px; }
 .article-main { width:calc(100% - 40px); padding:100px 0 55px; }.article-heading { margin:32px 0; }.article-heading h1 { font-size:33px; }.article-description { font-size:16px; }
 .article-layout { grid-template-columns:1fr; gap:32px; padding-top:26px; }.article-toc { position:static; padding-bottom:26px; border-bottom:1px solid #ffffff13; gap:10px; }
 .article-body { font-size:15px; }.article-body h2 { font-size:24px; }.article-body section { margin-bottom:34px; }
}