/* ===========================================================================
   HRV — blog styles
   ---------------------------------------------------------------------------
   Layers on top of landing.css (which provides the tokens, nav, buttons,
   .wrap, .eyebrow and footer). Adds the post-index list and the article/prose
   typography — same dark palette, system font, hairline cards, cool accent and
   tabular numerals as the rest of the product. See docs/design-analysis.md.
   =========================================================================== */

/* ---- Index header ---- */
.blog-head {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 8px;
  text-align: center;
}
.blog-head .eyebrow { text-align: center; }
.blog-head h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.blog-head .lede {
  margin: 0 auto;
  max-width: 520px;
  color: var(--fg-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* ---- Post list ---- */
.blog-list {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 32px;
  padding-bottom: 24px;
}
.post-card {
  display: block;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.post-card:hover {
  border-color: #383b45;
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}
.post-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.post-card-meta .dot { opacity: 0.6; }
.post-card h2 {
  margin: 10px 0 6px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.post-card p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.55;
}
.post-card-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}

.blog-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--fg-muted);
}
.blog-empty p { margin: 0 0 6px; }
.blog-empty .small { font-size: 13px; }
.blog-empty a { color: var(--accent); }

/* ===========================================================================
   ARTICLE
   =========================================================================== */
.post {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 8px;
}
.post-back {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--fg-muted);
  font-size: 13px;
  transition: color 120ms ease;
}
.post-back:hover { color: var(--fg); }

.post-header { margin-bottom: 28px; }
.post-header h1 {
  margin: 10px 0 0;
  font-size: clamp(28px, 4.6vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.post-summary {
  margin: 14px 0 0;
  color: var(--fg-muted);
  font-size: 18px;
  line-height: 1.55;
}

/* ---- Prose: rendered Markdown body ---- */
.prose { font-size: 16.5px; line-height: 1.7; color: var(--fg); }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin: 40px 0 12px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.prose h3 {
  margin: 32px 0 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.prose p { margin: 0 0 18px; }
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(111, 168, 255, 0.4);
}
.prose a:hover { text-decoration-color: var(--accent); }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose li::marker { color: var(--fg-muted); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose em { color: var(--fg); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

.prose blockquote {
  margin: 24px 0;
  padding: 4px 18px;
  border-left: 3px solid var(--accent);
  color: var(--fg-muted);
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose code {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.prose pre {
  margin: 0 0 18px;
  padding: 16px;
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.prose pre code { padding: 0; background: none; border: none; font-size: 13.5px; }

.prose table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.prose th, .prose td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: left;
}
.prose th { background: var(--bg-card); font-weight: 600; }

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* ---- End-of-post CTA (mirrors landing's promo cards) ---- */
.post-cta {
  margin: 48px 0 16px;
  padding: 32px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-card), rgba(111, 168, 255, 0.04));
  border: 1px solid rgba(111, 168, 255, 0.3);
  border-radius: 12px;
}
.post-cta h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--accent); }
.post-cta p { margin: 0 0 18px; color: var(--fg-muted); }

@media (max-width: 600px) {
  .blog-head { padding: 32px 16px 8px; }
  .post { padding: 24px 16px 8px; }
  .prose { font-size: 16px; }
}