:root{
  --bg:#080d12;
  --panel:#111922;
  --panel-2:#151f2a;
  --line:#263545;
  --text:#edf4fb;
  --muted:#9fb0c1;
  --gold:#f4c84f;
  --gold-2:#8a6a18;
  --green:#41d89a;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.blog-topbar{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line);
  background:rgba(8,13,18,.92);
  backdrop-filter:blur(14px);
}
.topbar-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px;object-fit:contain}
.brand strong,.brand small{display:block}
.brand small{color:var(--muted);font-size:12px}
.blog-topbar nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.blog-topbar nav a{color:#cbd8e5;font-weight:800;font-size:14px}
.blog-topbar nav .btn,.pager a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--gold-2);
  border-radius:8px;
  padding:0 14px;
  background:#201906;
  color:#ffe7a6;
}
.blog-hero{padding:42px 0 24px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:24px;align-items:end}
.eyebrow,.pill{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  border:1px solid #3c3320;
  border-radius:999px;
  padding:0 10px;
  background:#171307;
  color:#ffdf80;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
h1{margin:12px 0 10px;font-size:52px;line-height:1.02;letter-spacing:0}
.lead{max-width:720px;margin:0;color:#c1cfdd;font-size:18px;line-height:1.65}
.hero-ad,.inline-ad,.side-ad,.article-ad{
  border:1px dashed #5a4820;
  border-radius:8px;
  min-height:110px;
  display:grid;
  align-content:center;
  gap:6px;
  padding:18px;
  background:#111107;
  color:#ffe7a6;
}
.hero-ad span,.inline-ad span,.side-ad span,.article-ad span{color:#bca865;font-size:12px;font-weight:900;text-transform:uppercase}
.blog-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;padding:18px 0 54px}
.blog-main{min-width:0}
.featured-card{
  display:grid;
  grid-template-columns:minmax(320px,.95fr) minmax(0,1fr);
  gap:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  margin-bottom:18px;
}
.featured-media,.post-media{display:block;background:#0d141b}
.featured-media img,.post-media img{width:100%;height:100%;display:block;object-fit:fill;background:#0d141b}
.featured-media{aspect-ratio:16/9;min-height:0}
.featured-copy{padding:26px;align-self:center}
.featured-copy h2,.post-copy h2{margin:12px 0 10px;line-height:1.15;letter-spacing:0}
.featured-copy h2{font-size:34px}
.featured-copy p,.post-copy p{color:#afbdca;line-height:1.55}
.featured-copy small,.post-copy small{color:var(--muted);font-weight:800}
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.post-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.post-media{aspect-ratio:16/9;height:auto}
.post-copy{padding:18px}
.post-copy h2{font-size:21px}
.inline-ad{grid-column:1/-1;min-height:96px}
.media-fallback{
  min-height:100%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#172638,#1d1707);
  color:#ffe7a6;
  font-size:28px;
  font-weight:1000;
}
.media-fallback.small{font-size:20px}
.blog-sidebar,.article-side{display:grid;align-content:start;gap:16px}
.side-box{
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
  background:var(--panel);
}
.side-box h2{margin:0 0 12px;font-size:18px}
.side-box a{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  padding:12px 0;
  color:#d8e3ee;
  font-weight:850;
}
.side-box a.active{color:#ffe7a6}
.side-box a span{color:var(--muted);font-size:12px}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px}
.pager span{color:var(--muted);font-weight:800}
.empty-state{
  grid-column:1/-1;
  border:1px solid var(--line);
  border-radius:8px;
  padding:24px;
  background:var(--panel);
  color:var(--muted);
}
.article-wrap{display:grid;grid-template-columns:minmax(0,760px) 300px;gap:28px;padding:36px 0 60px}
.back-link{color:#ffe7a6;font-weight:900}
.article-main{min-width:0}
.article-head{margin-top:20px}
.article-head h1{font-size:46px}
.article-head p{color:#bcc9d6;font-size:18px;line-height:1.65}
.article-head small{color:var(--muted);font-weight:900}
.article-hero{
  width:100%;
  aspect-ratio:16/9;
  object-fit:fill;
  background:#0d141b;
  border:1px solid var(--line);
  border-radius:8px;
  margin:24px 0 0;
}
.article-ad{margin:18px 0}
.article-body{
  border:1px solid var(--line);
  border-radius:8px;
  padding:26px;
  background:var(--panel);
}
.article-body h2{font-size:27px;margin:26px 0 10px;letter-spacing:0}
.article-body h2:first-child{margin-top:0}
.article-body p,.article-body li{color:#d2dde8;line-height:1.78;font-size:16px}
.article-body ul{padding-left:22px}
@media(max-width:900px){
  .hero-grid,.blog-shell,.featured-card,.article-wrap{grid-template-columns:1fr}
  h1,.article-head h1{font-size:38px}
  .post-grid{grid-template-columns:1fr}
  .featured-media{min-height:0}
}
@media(max-width:640px){
  .topbar-inner{align-items:flex-start;flex-direction:column;padding:14px 0}
  .blog-topbar nav{width:100%}
  .blog-topbar nav a{font-size:13px}
  .blog-hero{padding-top:28px}
  .hero-ad,.inline-ad,.side-ad,.article-ad{display:none!important}
  .article-body{padding:18px}
}