/* ============================================
   Blog Post — terminal-flavoured long-form
   ============================================ */

.blog-post {
  padding-top: calc(4rem + var(--space-2xl));
  padding-bottom: var(--space-2xl);
}

.blog-back {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--space-lg);
  letter-spacing: 0.05em;
}

.blog-back:hover {
  color: var(--color-accent);
}

.blog-header {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.blog-header h1 {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.3;
  margin-top: var(--space-sm);
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--space-md);
  align-items: center;
}

.blog-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.blog-tag {
  font-size: var(--text-xs);
  color: var(--color-green);
  opacity: 0.8;
}

.blog-tag::before {
  content: '#';
}


/* ---- Body content ---- */

.blog-body {
  max-width: 680px;
}

.blog-lede {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}

.blog-body h2 {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-accent);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.blog-body p {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.blog-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-body a:hover {
  color: var(--color-accent-hover);
}

.blog-body strong {
  color: var(--color-heading);
  font-weight: 600;
}

.blog-body em {
  font-style: italic;
}

.blog-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-accent);
  background: var(--color-surface);
  padding: 0.15em 0.4em;
  border: 1px solid var(--color-border);
}

.blog-body pre {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.blog-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.7;
}

.code-muted { color: var(--color-text-muted); }
.code-cyan  { color: var(--color-accent); }
.code-green { color: var(--color-green); }
.code-amber { color: var(--color-amber); }
.code-pink  { color: var(--color-pink); }

.blog-body ol {
  list-style: none;
  counter-reset: steps;
  padding-left: 0;
  margin-bottom: var(--space-lg);
}

.blog-body ol li {
  counter-increment: steps;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.8;
  padding: var(--space-xs) 0;
  padding-left: 2rem;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.blog-body ol li:last-child {
  border-bottom: none;
}

.blog-body ol li::before {
  content: counter(steps, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-weight: 600;
}

.blog-signoff {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}


/* ---- Responsive ---- */

@media (max-width: 768px) {
  .blog-post {
    padding-top: calc(3rem + var(--space-lg));
  }

  .blog-header h1 {
    font-size: var(--text-xl);
  }
}