/* English-only typography. Loaded after component styles; other locales stay unchanged. */
html[lang="en"] {
  --font-display: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display: var(--font-display);
  --english-title-tracking: 0.01em;
  --english-title-leading: 1.2;
}

html[lang="en"] body :is(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--english-title-tracking);
  line-height: var(--english-title-leading);
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Match the existing locale/component specificity without changing CJK layouts. */
html[lang="en"] .showroom-page .campaign-hero h1,
html[lang="en"] .showroom-page .collection-header h2,
html[lang="en"] .sunken-showcase .product-hero h1,
html[lang="en"] .sunken-showcase .lore-header h2,
html[lang="en"] .record-header h2 {
  letter-spacing: var(--english-title-tracking);
  line-height: var(--english-title-leading);
}

html[lang="en"] .showroom-page .campaign-hero h1 {
  font-size: clamp(2.75rem, 4.8vw, 5rem);
}

html[lang="en"] .showroom-page .collection-header h2,
html[lang="en"] .material-heading h2,
html[lang="en"] .visit-copy h2 {
  min-width: 0;
  max-width: 100%;
  font-size: clamp(2.25rem, 4vw, 4.5rem);
}

html[lang="en"] .manifesto-section h2 {
  font-size: clamp(2.5rem, 5.5vw, 6rem);
}

html[lang="en"] .sunken-showcase .product-hero h1 {
  max-width: 100%;
  font-size: clamp(2.25rem, 3.3vw, 4rem);
}

html[lang="en"] .sunken-showcase .lore-header h2 {
  font-size: clamp(2.25rem, 3.5vw, 4rem);
}

html[lang="en"] .intro h1 {
  font-size: clamp(2.25rem, 4.5vw, 4.5rem);
}

@media (max-width: 680px) {
  html[lang="en"] .showroom-page .campaign-hero h1 {
    font-size: clamp(2rem, 8vw, 3.25rem);
  }

  html[lang="en"] .showroom-page .collection-header h2,
  html[lang="en"] .sunken-showcase .product-hero h1 {
    font-size: 2rem;
  }

  html[lang="en"] .material-heading h2,
  html[lang="en"] .manifesto-section h2,
  html[lang="en"] .visit-copy h2,
  html[lang="en"] .sunken-showcase .lore-header h2,
  html[lang="en"] .intro h1 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }
}