/* ============================================================
   TYPOGRAPHY — font stacks + the type scale.
   Display/headings = Instrument Serif (italic = accent emphasis).
   Body/UI = Space Grotesk. Labels/mono = JetBrains Mono.
   ============================================================ */
:root {
  --f-serif: 'Instrument Serif', 'Times New Roman', serif; /* @kind font */
  --f-sans:  'Space Grotesk', system-ui, sans-serif;       /* @kind font */
  --f-mono:  'JetBrains Mono', ui-monospace, monospace;    /* @kind font */

  /* semantic aliases */
  --font-display: var(--f-serif);
  --font-body:    var(--f-sans);
  --font-label:   var(--f-mono);
}

/* ---- Display & headings (fluid) ---- */
.display {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(56px, 9.5vw, 148px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}
.display em, .display .italic { font-style: italic; color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.02;
}
h1 { font-size: clamp(52px, 7.5vw, 106px); }
h2 { font-size: clamp(44px, 6.2vw, 90px); }
h3 { font-size: clamp(28px, 3.2vw, 44px); }
h4 { font-size: clamp(22px, 2.2vw, 30px); }
/* italic emphasis inside a heading is the brand's signature accent move */
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }

p { margin: 0; }

/* ---- Lede / intro paragraph ---- */
.lede {
  font-family: var(--f-sans);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ---- Eyebrows / labels / mono ---- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
}
.label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; }
