:root{
  --blog-content:860px;
  --blog-aside:300px;
}

.blog-page .site-header{
  position:sticky;
}

.blog-hero{
  padding:72px 0 42px;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
}

.blog-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 16%, rgba(54,255,158,.10), transparent 22%),
    radial-gradient(circle at 82% 22%, rgba(139,124,255,.09), transparent 24%);
  pointer-events:none;
}

.blog-hero .container{
  position:relative;
  z-index:2;
}

.blog-breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:.88rem;
  margin-bottom:18px;
}

.blog-breadcrumbs a{
  text-decoration:none;
  color:inherit;
}

.blog-breadcrumbs a:hover,
.blog-breadcrumbs a:focus-visible{
  color:var(--text);
}

.blog-breadcrumbs .sep{
  opacity:.5;
}

.blog-hero h1{
  font-size:clamp(2.5rem, 6vw, 5rem);
  line-height:.94;
  max-width:14ch;
  margin-bottom:18px;
}

.blog-subtitle{
  max-width:78ch;
  color:#bdd0e2;
  line-height:1.85;
  font-size:1.04rem;
  margin-bottom:20px;
}

.blog-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.blog-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.9rem;
}

.blog-shell{
  padding:56px 0 84px;
}

.blog-layout{
  display:grid;
  grid-template-columns:minmax(0, var(--blog-content)) minmax(260px, var(--blog-aside));
  gap:26px;
  align-items:start;
}

.blog-article,
.blog-sidebar-card,
.blog-card,
.blog-cta,
.blog-figure{
  border:1px solid rgba(255,255,255,.08);
  border-radius:0;
  background:linear-gradient(180deg, rgba(18,26,34,.88), rgba(12,18,27,.98));
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.blog-article{
  padding:30px;
}

.blog-article p{
  color:#c3d2e1;
  line-height:1.9;
  margin:0 0 1.15rem;
}

.blog-article h2{
  font-size:clamp(1.8rem, 3vw, 2.8rem);
  margin:34px 0 14px;
}

.blog-article h3{
  font-size:clamp(1.25rem, 2vw, 1.7rem);
  margin:26px 0 12px;
  line-height:1.02;
}

.blog-article ul{
  margin:0 0 1.15rem 1.2rem;
  color:#c3d2e1;
}

.blog-article li{
  margin-bottom:.65rem;
  line-height:1.8;
}

.blog-article strong{
  color:#eef8ff;
}

.blog-lead{
  font-size:1.08rem;
  color:#d7e7f4;
}

.blog-callout{
  margin:22px 0;
  padding:18px;
  border:1px solid rgba(54,255,158,.18);
  background:linear-gradient(135deg, rgba(54,255,158,.07), rgba(139,124,255,.05));
}

.blog-callout p:last-child{
  margin-bottom:0;
}

.blog-figure{
  padding:20px;
  margin:26px 0;
}

.blog-figure h3{
  margin-top:0;
}

.blog-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.blog-tags span{
  display:inline-flex;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#d9e7f4;
  font-size:.84rem;
}

.blog-sidebar{
  display:grid;
  gap:18px;
  position:sticky;
  top:calc(var(--header-h) + 18px);
}

.blog-sidebar-card{
  padding:20px;
}

.blog-sidebar-card h3{
  font-size:1.1rem;
  margin-bottom:12px;
  line-height:1.1;
}

.blog-sidebar-card p{
  color:var(--muted);
  line-height:1.8;
  margin:0 0 1rem;
}

.blog-sidebar-card ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.blog-sidebar-card li{
  margin:0;
}

.blog-sidebar-card a{
  color:#dce9f5;
  text-decoration:none;
  line-height:1.6;
}

.blog-sidebar-card a:hover,
.blog-sidebar-card a:focus-visible{
  color:var(--accent);
}

.blog-related{
  margin-top:28px;
}

.blog-related h2{
  font-size:clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom:16px;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.blog-card{
  padding:20px;
}

.blog-card .eyebrow{
  margin-bottom:10px;
}

.blog-card h3{
  font-size:1.25rem;
  margin-bottom:10px;
}

.blog-card p{
  color:var(--muted);
  line-height:1.75;
  margin-bottom:14px;
}

.blog-card a{
  text-decoration:none;
}

.blog-index-hero{
  padding:80px 0 36px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.blog-index-hero h1{
  font-size:clamp(2.6rem, 6vw, 5rem);
  max-width:12ch;
  margin:16px 0;
}

.blog-index-hero p{
  color:#bfd0df;
  max-width:76ch;
  line-height:1.9;
}

.blog-index-section{
  padding:56px 0 84px;
}

.blog-index-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}

.blog-index-card{
  padding:24px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,26,34,.88), rgba(12,18,27,.98));
  box-shadow:var(--shadow);
}

.blog-index-card h2{
  font-size:1.45rem;
  margin:10px 0 12px;
  line-height:1.05;
}

.blog-index-card p{
  color:var(--muted);
  line-height:1.8;
  margin-bottom:14px;
}

.blog-cta{
  margin-top:30px;
  padding:22px;
}

.blog-cta h3{
  font-size:1.4rem;
  margin-bottom:10px;
}

.blog-cta p{
  color:var(--muted);
  line-height:1.8;
  margin-bottom:16px;
}

@media (max-width:1100px){
  .blog-layout{
    grid-template-columns:1fr;
  }

  .blog-sidebar{
    position:static;
  }

  .blog-grid,
  .blog-index-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .blog-hero{
    padding:42px 0 26px;
  }

  .blog-article,
  .blog-sidebar-card,
  .blog-card,
  .blog-index-card,
  .blog-cta{
    padding:20px;
  }

  .blog-shell,
  .blog-index-section{
    padding:42px 0 64px;
  }

  .blog-hero h1,
  .blog-index-hero h1{
    max-width:100%;
  }
}