/* ============================================================
   Solving for Pattern — typography
   Source Serif 4 for literary headlines; Source Sans 3 for
   plainspoken body; IBM Plex Mono for labels and field notes.
   Display sizes are fluid: they reach the canonical token value
   at desktop and step down gracefully on small screens.
   ============================================================ */

/* ---------- Display + headings (Source Serif 4) ---------- */
.sfp-display,
.sfp-h1,
.sfp-h2,
.sfp-h3 {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  color: var(--sfp-color-text-primary);
  text-wrap: balance;
}

.sfp-display {
  font-size: clamp(2.75rem, 2rem + 3.3vw, 4.5rem); /* 44 → 72px */
  line-height: 1.11;
  letter-spacing: var(--sfp-tracking-display);
}

.sfp-h1 {
  font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem); /* 36 → 56px */
  line-height: 1.14;
  letter-spacing: var(--sfp-tracking-display);
}

.sfp-h2 {
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); /* 28 → 40px */
  line-height: 1.2;
}

.sfp-h3 {
  font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); /* 22 → 28px */
  line-height: 1.29;
}

.sfp-h4 {
  font-family: var(--sfp-font-body);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-h4);
  line-height: var(--sfp-leading-h4);
  color: var(--sfp-color-text-primary);
}

/* ---------- Body (Source Sans 3) ---------- */
.sfp-body-lg {
  font-size: var(--sfp-text-body-lg);
  line-height: var(--sfp-leading-body-lg);
}

.sfp-body {
  font-size: var(--sfp-text-body);
  line-height: var(--sfp-leading-body);
}

.sfp-small {
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
}

.sfp-text-secondary {
  color: var(--sfp-color-text-secondary);
}

/* ---------- Mono labels (IBM Plex Mono) ---------- */
.sfp-label {
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  line-height: var(--sfp-leading-label);
  letter-spacing: var(--sfp-tracking-label);
  text-transform: uppercase;
  color: var(--sfp-color-text-label);
}

.sfp-mono {
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
}

/* ---------- Long-form prose ----------
   Wrap article bodies in .sfp-prose: enforces the 60–75
   character measure and comfortable vertical rhythm. */
.sfp-prose {
  max-width: var(--sfp-measure-body);
}

.sfp-prose > * + * {
  margin-top: var(--sfp-space-4);
}

.sfp-prose h2,
.sfp-prose h3 {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  text-wrap: balance;
}

.sfp-prose h2 {
  font-size: var(--sfp-text-h3);
  line-height: var(--sfp-leading-h3);
  margin-top: var(--sfp-space-12);
}

.sfp-prose h3 {
  font-size: var(--sfp-text-h4);
  line-height: var(--sfp-leading-h4);
  margin-top: var(--sfp-space-8);
}

.sfp-prose ul,
.sfp-prose ol {
  padding-left: var(--sfp-space-6);
}

.sfp-prose li + li {
  margin-top: var(--sfp-space-2);
}

.sfp-prose blockquote {
  font-family: var(--sfp-font-display);
  font-size: var(--sfp-text-body-lg);
  line-height: var(--sfp-leading-body-lg);
  padding-left: var(--sfp-space-6);
  border-left: 3px solid var(--sfp-gold-500);
  color: var(--sfp-color-text-primary);
}

.sfp-prose code {
  font-family: var(--sfp-font-mono);
  font-size: 0.85em;
  background-color: var(--sfp-color-bg-subtle);
  padding: 2px 6px;
  border-radius: var(--sfp-radius-sm);
}

.sfp-prose hr {
  border: 0;
  border-top: var(--sfp-border-hairline) solid var(--sfp-color-border);
  margin-block: var(--sfp-space-8);
}

.sfp-prose figure {
  margin-block: var(--sfp-space-8);
}