/* Purple glass theme for blog page */
:root{
  --purple-700: #5b21b6;
  --purple-500: #7B2FF2;
  --purple-400: #9b6bff;
  --glass-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --muted-light: rgba(255,255,255,0.8);
}

body.blog.purple-glass {
  background: linear-gradient(180deg, rgba(15,5,40,0.98), rgba(24,8,60,0.98));
  color: var(--muted-light);
  -webkit-font-smoothing:antialiased;
}

/* Hero */
.blog-hero {
  padding:64px 0;
  text-align:center;
  color: #fff;
  position:relative;
  overflow:hidden;
}
.blog-hero::before{
  content: "";
  position:absolute;
  inset: -10% -20% auto -20%;
  height: 220px;
  background: radial-gradient(closest-side, rgba(123,47,242,0.16), rgba(123,47,242,0.06));
  transform: rotate(-8deg);
  filter: blur(24px);
  z-index:0;
}
.blog-hero .container{position:relative; z-index:2}
.blog-hero h1{font-size:2rem; margin:0 0 8px; color:#fff; letter-spacing:-0.02em}
.blog-hero p{color:rgba(255,255,255,0.88); margin:0; max-width:900px; margin-left:auto; margin-right:auto}

/* Glass posts */
.blog-list .post{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  border-radius:14px;
  padding:18px;
  display:flex;
  gap:18px;
  align-items:flex-start;
  box-shadow: 0 8px 30px rgba(8,4,20,0.45);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color: var(--muted-light);
}
.blog-list .post:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 46px rgba(11,4,40,0.6);
}
.blog-list .post img{ width:220px; height:140px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,0.04) }
.blog-list .post h2{ margin:0 0 8px 0; font-size:1.18rem; color:#fff }
.blog-list .post p{ margin:0; color:rgba(255,255,255,0.9) }
.blog-list .post .meta{ font-size:0.9rem; color:rgba(255,255,255,0.7); margin-bottom:8px }

@media (max-width:900px){
  .blog-list .post{flex-direction:column}
  .blog-list .post img{width:100%; height:200px}
}

/* Footer tweak */
.site-footer{ background:transparent; border-top:1px solid rgba(255,255,255,0.03); }

/* Buttons and link accents used in blog */
a{ color: var(--purple-400) }
.navbar, .nav-links a{ color: rgba(255,255,255,0.92) }

/* small utility */
.container{ max-width:1080px; margin:0 auto; padding:0 18px }