/* ================================================
   Typography — 6 sizes, rigid
   ================================================ */

/* Eyebrow — Kanso style: "/section-name" left, "(NN)" right */
.eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.eyebrow--mute   { color: var(--ink-mute); }
.section--dark .eyebrow,
.section--dark .eyebrow--mute { color: var(--dark-on); }

/* The Kanso H1 — large, medium weight, line-height tight, ends with light grey trailing */
.h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 86px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.h1 .trail {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--ink-mute);
  margin-top: clamp(6px, 0.7vw, 12px);
  max-width: 50ch;
  text-wrap: pretty;
}
.section--dark .h1 { color: var(--dark-on); }
.section--dark .h1 .trail { color: var(--dark-mute); }

/* Display — only for the JE wordmark / hero logo treatments */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0;
}

/* H2 sub-description — 8 words or under */
.h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink-mute);
  margin: 0;
  max-width: 44ch;
}
.section--dark .h2 { color: var(--dark-mute); }

/* H3 — block titles inside bento */
.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.section--dark .h3 { color: var(--dark-on); }

.body {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
}
.section--dark .body { color: var(--dark-mute); }

.small {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-mute);
}

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}