/* typography.css — headings, body, prose, links, lists (12 §3). */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 { color: var(--text-strong); }

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
}

h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.text-muted-nsm { color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

strong, b { font-weight: var(--fw-bold); color: var(--text-strong); }

/* ---- Long-form text: posts and legal pages ---- */
.prose {
  max-width: var(--w-prose);
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
}

.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-3); }

.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose ul, .prose ol { padding-left: var(--sp-5); }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--primary); }

.prose blockquote {
  padding-left: var(--sp-4);
  border-left: var(--accent-w) solid var(--border-strong);
  color: var(--text-muted);
}

.prose img, .prose figure img { border-radius: var(--r-md); border: var(--border-w) solid var(--border); }
.prose figcaption { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); }

.prose hr { border: 0; border-top: var(--border-w) solid var(--border); margin-block: var(--sp-7); }

/* ---- Screen-reader only ---- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}