/* ============================================================================
   TYPOGRAPHY — self-hosted variable fonts, no layout shift, and the tone of
   an expensive magazine. Type is the only constant light in this room.
   ============================================================================ */

/* Fraunces — the voice. High-contrast, optical, a little wonky on purpose. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/fraunces-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/fraunces-wght-italic.woff2") format("woff2");
}

/* Inter — the interface. Neutral, Swiss, invisible when it should be. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/inter-wght.woff2") format("woff2");
}

/* JetBrains Mono — the technical language of film. Timecode, ISO, focal length. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../../assets/fonts/jetbrains-mono-wght.woff2") format("woff2");
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: var(--w-book);
  font-optical-sizing: auto;
  letter-spacing: -0.005em;
  color: var(--fg);
}

/* ── Display — Fraunces, tuned per size via optical sizing ─────────────────── */
.hero__title,
.works__heading,
.exhibition__heading,
.about__title,
.contact__title,
.viewer__title {
  font-family: var(--f-display);
  font-weight: var(--w-thin);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  line-height: 0.96;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.hero__title em,
.contact__title em,
.about__quote em {
  font-style: italic;
  font-weight: var(--w-book);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}

/* ── The technical layer — mono, spaced, uppercase where it labels ───────────── */
.overline,
.section-label,
.film__meta,
.plate__cap-meta,
.chrome__mark-name,
.menu-btn__label,
.sound__label,
.viewer__format,
.viewer__field h3,
.index__no,
.index__sub,
.hero__scroll-word,
.lightbox__cap-meta,
.contact__social,
.about__facts dt {
  font-family: var(--f-mono);
  font-weight: var(--w-book);
  font-size: var(--fs-nano);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-feature-settings: "tnum" 1;
}

/* ── Reading ──────────────────────────────────────────────────────────────── */
.lede {
  font-size: var(--fs-lede);
  font-weight: var(--w-thin);
  line-height: 1.28;
  letter-spacing: -0.012em;
  max-width: 34ch;
}

.about__body p,
.about__lead p,
.viewer__synopsis p,
.viewer__notes-text {
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--fg);
  max-width: var(--measure);
}

.about__lead p {
  font-family: var(--f-display);
  font-weight: var(--w-thin);
  font-size: var(--fs-h3);
  line-height: 1.24;
  letter-spacing: -0.015em;
}