.blog-index-page {
  background: #000000;
  animation: none;
  background-position: 0% 0%;
  --glass-overlay-opacity: 0.86;
  --glass-sheen-opacity: 0.23;
}

.blog-index-page .site-header {
  z-index: 2;
}

.blog-index-page .blog-container {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.blog-index-page .blog-container::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(78% 96% at 50% 30%, var(--glass-tint-strong) 0%, var(--glass-tint-mid) 36%, rgba(6, 8, 13, 0.1) 60%, transparent 84%),
    radial-gradient(52% 44% at 50% 13%, var(--glass-sheen) 0%, transparent 72%),
    radial-gradient(74% 88% at 82% 88%, var(--glass-cool-accent) 0%, transparent 64%);
  backdrop-filter: blur(var(--glass-soft-blur));
  -webkit-backdrop-filter: blur(var(--glass-soft-blur));
  -webkit-mask-image: radial-gradient(88% 96% at 50% 44%, black 0%, rgba(0, 0, 0, 0.78) 38%, rgba(0, 0, 0, 0.28) 68%, transparent 92%);
  mask-image: radial-gradient(88% 96% at 50% 44%, black 0%, rgba(0, 0, 0, 0.78) 38%, rgba(0, 0, 0, 0.28) 68%, transparent 92%);
  opacity: var(--glass-overlay-opacity);
  pointer-events: none;
}

.blog-index-page .blog-container::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 18%, transparent 100%);
  -webkit-mask-image: radial-gradient(66% 42% at 50% 14%, black 0%, transparent 86%);
  mask-image: radial-gradient(66% 42% at 50% 14%, black 0%, transparent 86%);
  opacity: var(--glass-sheen-opacity);
  pointer-events: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .blog-index-page .blog-container::before {
    background:
      radial-gradient(78% 96% at 50% 30%, rgba(9, 12, 19, 0.56) 0%, rgba(8, 11, 17, 0.34) 42%, rgba(6, 8, 13, 0.14) 64%, transparent 86%),
      radial-gradient(52% 44% at 50% 13%, rgba(255, 255, 255, 0.03) 0%, transparent 72%);
  }
}

.page-title {
  font-size: 34px;
  margin: 20px 0 8px;
}

.post-list {
  display: grid;
  gap: 18px;
}

.post-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.post-item:last-child {
  border-bottom: 0;
}

.post-title {
  margin: 0 0 4px;
  font-size: 22px;
}

.post-summary {
  color: #dddddd;
  margin: 6px 0 0;
}

.post-meta {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .blog-index-page .blog-container::before {
    -webkit-mask-image: radial-gradient(95% 100% at 50% 44%, black 0%, rgba(0, 0, 0, 0.74) 42%, rgba(0, 0, 0, 0.25) 72%, transparent 94%);
    mask-image: radial-gradient(95% 100% at 50% 44%, black 0%, rgba(0, 0, 0, 0.74) 42%, rgba(0, 0, 0, 0.25) 72%, transparent 94%);
  }

  .blog-index-page .blog-container::after {
    opacity: 0.24;
  }
}