/* typography.css — Fraunces (display) + Geist (text)
   Servidos vía Google Fonts <link> en cada página por ahora.
   Antes del launch: self-hostear en /public/fonts/ (ver CLAUDE.md). */

/* Display (Fraunces) */
h1,
h2,
h3,
.display,
.piece-name,
.eyebrow-display {
  font-family: var(--font-display);
  font-weight: 350;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
  text-wrap: balance;
}

h1,
.h1 {
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

h2,
.h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-variation-settings: 'opsz' 72;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

h3,
.h3 {
  font-size: 1.375rem;
  font-variation-settings: 'opsz' 24;
  letter-spacing: 0;
  line-height: 1.25;
}

/* Text (Geist) */
p,
li,
input,
textarea,
button,
label,
small {
  font-family: var(--font-text);
}

p {
  max-width: 60ch;
  text-wrap: pretty;
}

p + p {
  margin-top: var(--s-3);
}

.lede {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 300;
  font-variation-settings: 'opsz' 36;
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 38ch;
}

/* Eyebrow (label pequeño en caps) — rara y discreta */
.eyebrow {
  font-family: var(--font-text);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  font-weight: 500;
}

/* Pull quote / posicionamiento */
.statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.statement em {
  font-style: italic;
}

/* Énfasis */
em {
  font-style: italic;
}

strong {
  font-weight: 500;
}