.blog-hero { background:radial-gradient(ellipse at 85% 0,#e3ebff,transparent 55%),#f6f8fe; padding:28px 0 50px; border-bottom:1px solid var(--line); }
.blog-breadcrumb { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:12px; margin-bottom:33px; }
.blog-hero h1 { max-width:930px; font-size:clamp(2.4rem,4.5vw,3.5rem); font-weight:800; line-height:1.15; letter-spacing:-.055em; margin-bottom:20px; }
.blog-hero p { color:var(--muted); font-size:17px; max-width:780px; margin:0; }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.blog-card { display:flex; flex-direction:column; padding:28px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 3px 12px #182b5305; }
.blog-card-top { display:flex; align-items:center; gap:12px; margin-bottom:22px; }.blog-icon { display:grid; place-items:center; width:43px; height:43px; border-radius:11px; color:var(--primary); background:#edf2fd; font-size:21px; }.blog-category { color:#61718c; font-size:11px; font-weight:650; }
.blog-card h2,.blog-card h3 { font-size:20px; font-weight:750; letter-spacing:-.035em; line-height:1.4; margin:0 0 15px; }.blog-card h2 a,.blog-card h3 a { color:var(--ink); }.blog-card h2 a:hover,.blog-card h3 a:hover { color:var(--primary); }.blog-card p { color:#64728b; font-size:14px; line-height:1.8; margin-bottom:24px; }
.blog-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:12px; }.blog-card-bottom>span { color:var(--muted); }.blog-card-bottom a { font-weight:650; }
.article-heading { max-width:1264px; }.article-heading h1 { max-width:950px; }.article-byline { display:flex; flex-wrap:wrap; gap:12px 25px; margin-top:25px; font-size:12px; color:#60718d; }
.article-layout { display:grid; grid-template-columns:minmax(0,790px) minmax(220px,1fr); gap:70px; padding-top:48px; padding-bottom:65px; align-items:start; }
.article-copy p { font-size:17px; line-height:1.9; color:#42516b; margin-bottom:22px; }.article-copy h2 { font-size:27px; line-height:1.35; letter-spacing:-.035em; margin-top:33px; margin-bottom:18px; }.article-copy a { text-decoration:underline; text-underline-offset:3px; }.article-copy li { color:#42516b; line-height:1.8; margin-bottom:12px; }
.article-aside { position:sticky; top:112px; }.article-tip { padding:25px; border:1px solid #dee6fa; border-radius:12px; background:#eff4ff; }.article-tip>i { font-size:25px; color:var(--primary); }.article-tip h2 { font-size:22px; margin:16px 0 12px; }.article-tip p { font-size:13px; color:#60718d; }.article-tip>a { font-size:13px; font-weight:700; }.article-related { padding-top:30px; }.article-related h2 { font-size:18px; letter-spacing:-.025em; }.article-related a { display:block; padding:17px 0; border-bottom:1px solid var(--line); }.article-related span { display:block; font-size:10px; color:var(--muted); margin-bottom:8px; }.article-related strong { font-size:14px; font-weight:650; color:var(--ink); line-height:1.6; }
.article-sources { border-top:1px solid var(--line); margin-top:35px; padding-top:5px; }.article-sources ul { padding-left:21px; }.article-sources li { font-size:14px; }.article-sources p { font-size:12px; color:var(--muted); }.article-sources h2 { font-size:21px; }
@media(max-width:1100px) { .blog-card { padding:22px; }.blog-grid { gap:18px; }.article-layout { gap:35px; }.navbar-nav { gap:13px; } }
@media(max-width:991px) { .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.article-layout { grid-template-columns:minmax(0,1fr) 230px; gap:30px; }.article-copy p { font-size:16px; } }
@media(max-width:767px) { .blog-hero { padding:24px 0 35px; }.blog-hero h1 { font-size:35px; }.blog-hero p { font-size:15px; }.blog-breadcrumb { margin-bottom:25px; }.blog-grid { grid-template-columns:1fr; gap:18px; }.blog-card { padding:24px; }.article-layout { grid-template-columns:1fr; gap:32px; padding-top:30px; }.article-aside { position:static; }.article-copy h2 { font-size:23px; }.article-byline { gap:8px 16px; }.article-copy p { font-size:16px; } }