.blog-page-hero{padding-top:44px}
.blog-hero-visual{background-image:linear-gradient(90deg,#060812 0,rgba(6,8,18,.26) 18%,transparent 46%),url('./assets/Blog_Hero.webp');background-position:62% center;border-radius:14px;overflow:hidden}
.blog-section{padding-top:30px}
.blog-toolbar{display:flex;gap:14px;margin:0 0 18px}
.blog-toolbar input{width:100%;background:#0a0d16;border:1px solid var(--soft);color:var(--text);padding:14px 16px;border-radius:10px;font:400 12px/1.4 var(--sans);outline:none}
.blog-toolbar input:focus{border-color:rgba(184,139,240,.55);box-shadow:0 0 0 3px rgba(166,111,234,.09)}

.featured{min-height:0;grid-template-columns:48% 52%;margin-bottom:14px;cursor:pointer}
.featured-img{min-height:205px;height:205px;background-position:center;background-size:cover}
.featured-copy{padding:19px 22px;display:flex;flex-direction:column;justify-content:center}
.featured-copy h2{font:500 27px/1.03 var(--serif);margin:7px 0 8px;letter-spacing:-.015em}
.featured-copy p{font-size:11px;line-height:1.55;color:#b4acb9;margin:0;max-width:520px}
.featured-read{display:inline-block;margin-top:13px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--lav2)}

.blog-cats{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}
.blog-cats button{border:1px solid var(--line);background:#0a0f1d;color:#d7d0dc;border-radius:8px;padding:8px 13px;font:500 9px/1 var(--sans);cursor:pointer}
.blog-cats button:hover,.blog-cats button:focus-visible{border-color:rgba(184,139,240,.5);color:#fff}
.blog-cats button.active{background:#8e57d5;border-color:#9e6bde;color:#fff}

.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.blog-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b1020;cursor:pointer;min-width:0;transition:transform .16s ease,border-color .16s ease}
.blog-card:hover{transform:translateY(-2px);border-color:rgba(184,139,240,.42)}
.blog-card .img{height:142px;background-size:cover;background-position:center}
.blog-card .body{padding:15px 15px 16px}
.blog-card small{color:#b88bf0;text-transform:uppercase;font:600 8.5px/1.2 var(--sans);letter-spacing:.08em}
.blog-card h3{font:500 21px/1.04 var(--serif);margin:7px 0 8px;letter-spacing:-.012em}
.blog-card p{font-size:11px;line-height:1.55;color:#aaa3af;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card .meta{font-size:8.5px;color:#8f8897;margin-top:11px}

.blog-sidebar{min-width:0}
.side-box{padding:17px;margin-bottom:13px}
.side-box h3{font:500 20px/1.1 var(--serif);margin:0 0 12px}
.side-box button.rank,.topic-links button{appearance:none;-webkit-appearance:none;display:block;width:100%;border:0;border-bottom:1px solid var(--soft);background:transparent;color:#d9d2dd;margin:0;padding:10px 0;text-align:left;font:500 10px/1.35 var(--sans);cursor:pointer;text-decoration:none;box-shadow:none}
.side-box button.rank:last-child,.topic-links button:last-child{border-bottom:0}
.side-box button.rank:hover,.topic-links button:hover{color:#fff}
.side-box button.rank b{display:inline-block;min-width:18px;color:#b88bf0;font-weight:600}
.side-box button.rank small{display:block;margin:4px 0 0 18px;color:#817a88;font-size:8px;font-weight:400}
#blogLatest button.rank{padding-left:0}
.blog-note{font-size:9px;line-height:1.5;color:#8f8897}
.topic-links button{color:#bcb4c2;padding:8px 0}
.topic-links button:before{content:'→';color:#9d69e7;margin-right:8px}

.blog-modal{position:fixed;inset:0;background:rgba(2,4,9,.90);z-index:1200;display:none;overflow:auto;padding:28px}
.blog-modal.open{display:block}
.blog-modal-card{width:min(980px,100%);margin:24px auto;background:#0a0d16;border:1px solid var(--soft);border-radius:18px;padding:38px 44px 48px;box-shadow:0 26px 90px rgba(0,0,0,.38)}
.blog-modal-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;border-bottom:1px solid var(--soft);padding-bottom:24px}
.blog-modal-head h2{font:500 clamp(38px,4.2vw,54px)/.98 var(--serif);letter-spacing:-.025em;margin:8px 0 12px;max-width:800px}
.blog-modal-head p{color:#b8b0bd;font-size:14px;line-height:1.65;max-width:760px;margin:0}
.blog-modal-meta{font-size:10px;color:var(--lav2);margin-top:12px}
.blog-modal-close{border:0;background:none;color:var(--text);font-size:32px;line-height:1;cursor:pointer;height:38px}
.blog-modal-body{font-size:16px;line-height:1.82;color:#d9dbe2;padding-top:30px;max-width:760px;margin:0 auto}
.blog-modal-body p{margin:0 0 20px}
.blog-modal-body h3{font:500 28px/1.08 var(--serif);color:#f3edf4;margin:34px 0 13px;letter-spacing:-.012em}
.blog-modal-body h3:first-child{margin-top:0}
.blog-modal-body .article-callout{border-left:2px solid #9d69e7;padding:3px 0 3px 17px;color:#bbb2c0;font-size:14px;margin:28px 0}
.modal-open{overflow:hidden}

@media(max-width:1000px){
 .blog-page-hero{padding-top:0}
 .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .featured{grid-template-columns:44% 56%}
 .featured-img{height:220px;min-height:220px}
 .blog-sidebar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .side-box{margin-bottom:0}
}
@media(max-width:720px){
 .blog-page-hero .page-copy{padding-top:30px!important}
 .blog-hero-visual{min-height:300px!important;border-radius:12px;background-position:68% center}
 .featured{grid-template-columns:1fr}
 .featured-img{height:210px;min-height:210px}
 .featured-copy{padding:18px}
 .featured-copy h2{font-size:25px}
 .blog-grid{grid-template-columns:1fr}
 .blog-card .img{height:190px}
 .blog-card h3{font-size:23px}
 .blog-sidebar{grid-template-columns:1fr}
 .blog-modal{padding:8px}
 .blog-modal-card{margin:8px auto;padding:24px 19px 34px;border-radius:14px}
 .blog-modal-head{gap:12px}
 .blog-modal-head h2{font-size:36px}
 .blog-modal-head p{font-size:13px}
 .blog-modal-body{font-size:15px;line-height:1.78;padding-top:24px}
 .blog-modal-body h3{font-size:25px}
 .blog-cats{overflow-x:auto;display:flex;flex-wrap:nowrap;padding-bottom:3px}
 .blog-cats button{white-space:nowrap}
}
@media(max-width:420px){
 .blog-hero-visual{min-height:260px!important;background-position:70% center}
 .featured-img{height:185px;min-height:185px}
 .blog-modal-head h2{font-size:32px}
}