:root { --font-display: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; }
/* Specificity intentionally keeps typography independent of theme overrides. */
html[data-font] body { font-family: var(--font-body); }
html[data-font] h1, html[data-font] h2, html[data-font] h3,
html[data-font] .brand-name, html[data-font] .bc-title {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-style: normal;
  font-variation-settings: normal;
  letter-spacing: var(--heading-tracking);
}
html[data-font] h1 em, html[data-font] h2 em { font-style: normal; font-weight: inherit; }
html[data-font] .hero-copy h1 { font-size: clamp(3rem,4.6vw,4.25rem); line-height: 1.12; }
html[data-font] .hero-copy .lede { font-size: clamp(1.05rem,1.5vw,1.16rem); line-height: 1.8; }
html[data-font] .brand-name { font-size: 1.4rem; letter-spacing: -.035em; }
html[data-font] .btn, html[data-font] .text-link, html[data-font] .nav-links a { font-family: var(--font-body); }
html[data-font] .booklet-cover .bc-title { line-height: 1.25; }
html[data-font="merriweather"] .hero-copy h1,
html[data-font="baskerville"] .hero-copy h1 { font-size: clamp(2.8rem,4.2vw,3.9rem); line-height: 1.2; }
@media(max-width:820px) {
  html[data-font] .hero-copy h1 { font-size: clamp(2.65rem,7.6vw,4rem); line-height: 1.14; }
  html[data-font="merriweather"] .hero-copy h1,
  html[data-font="baskerville"] .hero-copy h1 { font-size: clamp(2.35rem,7vw,3.6rem); line-height: 1.22; }
}
@media(max-width:380px) {
  html[data-font] .hero-copy h1 { font-size: 2.5rem; }
  html[data-font="merriweather"] .hero-copy h1,
  html[data-font="baskerville"] .hero-copy h1 { font-size: 2.2rem; }
}