:root {
  --c64-blue: #40318d;
  --c64-light: #7869c4;
  --c64-cyan: #70a4b2;
  --lime: #b8ff00;
  --foam: #f2f7ff;
}
.blog-body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, #2b1f6e 0%, #40318d 12%, #0a0618 12%, #05030c 100%);
  color: var(--foam);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.blog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 4px solid var(--c64-light);
  background: rgba(0, 0, 0, 0.35);
}
.blog-top .brand {
  color: var(--lime);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.blog-top .brand span { color: #fff; }
.blog-top nav { display: flex; gap: 1rem; }
.blog-top a { color: var(--c64-cyan); text-decoration: none; font-size: 0.8rem; letter-spacing: 0.12em; }
.blog-main, .blog-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
.c64-ready {
  color: var(--c64-light);
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  margin: 0 0 1rem;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0.35; } }
.blog-main h1, .blog-article h1 {
  font-family: Syne, sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 0.75rem;
  letter-spacing: -0.03em;
}
.blog-lede { color: rgba(242,247,255,0.7); line-height: 1.5; }
.post-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.post-list li { margin: 0 0 1rem; border: 2px solid var(--c64-light); background: rgba(64,49,141,0.25); }
.post-list a {
  display: block;
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
}
.post-list a:hover { background: rgba(184,255,0,0.08); }
.post-list__tag {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--lime);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}
.post-list strong { display: block; font-size: 1.15rem; margin-bottom: 0.35rem; }
.post-list em { color: rgba(242,247,255,0.65); font-style: normal; font-size: 0.9rem; }
.blog-meta { color: var(--c64-cyan); font-size: 0.8rem; }
.blog-body-text p { line-height: 1.65; font-size: 1.05rem; }
.blog-body-text strong { color: var(--lime); }
.mega {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.2rem;
  background: var(--lime);
  color: #05030c;
  text-decoration: none;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.admin-form { display: grid; gap: 0.85rem; margin: 1.5rem 0 2.5rem; }
.admin-form label { display: grid; gap: 0.35rem; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--c64-cyan); }
.admin-form input, .admin-form textarea {
  font: inherit;
  padding: 0.65rem 0.75rem;
  border: 2px solid var(--c64-light);
  background: #0a0618;
  color: var(--foam);
}
.admin-form .check { display: flex; align-items: center; gap: 0.5rem; letter-spacing: 0.08em; }
.flash { color: var(--lime); }
.err { color: #ff6b5a; }
.admin-list li {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--c64-light);
  margin-bottom: 0.65rem;
}
.admin-actions { display: flex; gap: 0.75rem; align-items: center; font-size: 0.8rem; }
.admin-actions a { color: var(--lime); }
.admin-actions button {
  background: transparent;
  border: 1px solid #ff6b5a;
  color: #ff6b5a;
  cursor: pointer;
  font: inherit;
  padding: 0.2rem 0.5rem;
}
.chip {
  display: inline-block;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--c64-cyan);
  color: var(--c64-cyan);
  text-decoration: none;
}