/* ============================================================
   Blog — index list + long-form post typography
   ------------------------------------------------------------
   Builds on the tokens in colors_and_type.css. Loaded per-page
   via Layout's extraStylesheets, so it ships only on /blog routes.
   ============================================================ */

/* ----- Index list ---------------------------------------- */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

.blog-card {
  display: grid;
  gap: 0.625rem;
  padding-block-end: clamp(2rem, 4vw, 3rem);
  border-block-end: 1px solid var(--border-light);
}
.blog-list .blog-card:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.blog-card-meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.blog-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-s);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.blog-card-title a { color: inherit; }
.blog-card:hover .blog-card-title { color: var(--accent-deep); }

.blog-card-excerpt {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-soft);
  max-inline-size: 62ch;
}

.blog-card-more { align-self: start; margin-block-start: 0.25rem; }

/* ----- Post header --------------------------------------- */
.blog-back { margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }

.blog-post-header { margin-block-end: clamp(2rem, 4vw, 3rem); }
.blog-post-header .eyebrow { margin-block-end: 0.75rem; }

.blog-post-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-l);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-inline-size: 24ch;
}
.blog-post-title em { font-style: italic; color: var(--accent-deep); }

.blog-post-meta {
  margin-block-start: 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-body-s);
  color: var(--muted);
}

/* ----- Long-form prose ----------------------------------- */
.prose {
  color: var(--ink-soft);
  font-size: var(--t-body-l);
  line-height: 1.7;
  max-inline-size: 68ch;
}
.prose > * + * { margin-block-start: 1.4em; }

.prose h2 {
  font-size: var(--t-display-m);
  line-height: 1.15;
  color: var(--ink);
  margin-block-start: 2em;
}
.prose h3 {
  font-size: var(--t-display-s);
  line-height: 1.2;
  color: var(--ink);
  margin-block-start: 1.6em;
}
.prose h2 + *, .prose h3 + * { margin-block-start: 0.75em; }

.prose a {
  color: var(--accent-deep);
  border-block-end: 1px solid var(--border);
  transition: border-color var(--t-fast) var(--ease);
}
.prose a:hover { border-color: var(--accent); }

.prose strong { color: var(--ink); font-weight: 600; }

.prose ul, .prose ol {
  padding-inline-start: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.prose li { padding-inline-start: 0.25rem; }

.prose blockquote {
  margin-inline: 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-display-s);
  line-height: 1.4;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-soft);
  padding: 0.15em 0.4em;
  border-radius: var(--r-sm);
}
.prose pre {
  background: var(--surface-deep);
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: var(--t-body-s);
}
.prose pre code { background: none; padding: 0; font-size: inherit; }

.prose img { max-inline-size: 100%; height: auto; border-radius: var(--r-md); }
.prose hr { border: 0; border-block-start: 1px solid var(--border-light); margin-block: 2.5em; }