/*
 * 03-typography.css — Global type styles
 * ────────────────────────────────────────
 * Heading sizes, page titles, subtitles.
 * Prose (body of a blog post) is in 12-post.css under .prose.
 */

/* ── Page-level headings ── */
.page-title {
  font-family:    var(--font-display);
  font-size:      var(--text-3xl);
  font-weight:    400;
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          var(--color-text);
  margin-bottom:  var(--sp-3);
}

.page-subtitle {
  font-size:   var(--text-md);
  color:       var(--color-text-muted);
  max-width:   60ch;
  line-height: 1.6;
}

.page-header {
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-8);
  /* border-bottom: 1px solid var(--color-border); */
}

/* ── Post-card typography (shared by home + blog index) ── */
.post-card-title {
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  font-weight:    400;
  line-height:    1.25;
  letter-spacing: -0.01em;
  color:          var(--color-text);
  transition:     color var(--transition);
  margin-block:   var(--sp-2) var(--sp-3);
}

.post-card-desc {
  font-size:   var(--text-base);
  color:       var(--color-text-muted);
  line-height: 1.5;
}

.post-date {
  font-size:      var(--text-sm);
  color:          var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ── Back link ── */
.back-link {
  font-size:       var(--text-sm);
  font-weight:     500;
  color:           var(--color-text-muted);
  text-decoration: none;
  letter-spacing:  0.01em;
}
.back-link:hover { color: var(--color-accent); }

/* ── Empty state ── */
.empty-state {
  color:     var(--color-text-muted);
  font-size: var(--text-md);
  padding:   var(--sp-12) 0;
}