/* ═══════════════════════════════════════════
   REMUSOL — TYPOGRAPHY.CSS
   Heading font + hero sizes (Vexrim-style).
   Load LAST, after all other stylesheets:
   <link rel="stylesheet" href="typography.css?v=1">
═══════════════════════════════════════════ */

/* Everything (body text, nav, buttons, forms, labels) → Public Sans */
html, body, body *, body *::before, body *::after,
input, textarea, select, button {
  font-family: 'Public Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
body { line-height: 1.65; }

/* All headings → Public Sans (bold grotesk) */
h1, h2, h3, h4, h5, h6,
[class*="title"],
[class*="-h2"] {
  font-family: 'Public Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  letter-spacing: -0.02em;
}
h1, h2, [class*="hero-title"], .section-title, [class*="-h2"] { font-weight: 800; }

/* Hero titles: same size on every page (~64px on desktop) */
[class*="hero-title"] {
  font-size: clamp(2.3rem, 4.7vw, 4rem) !important;
  line-height: 1.14 !important;
  font-weight: 800 !important;
}

/* Hero paragraph text */
[class*="hero-sub"] {
  font-size: clamp(1rem, 1.35vw, 1.15rem) !important;
  line-height: 1.7 !important;
  max-width: 60ch;
}

@media (max-width: 600px) {
  [class*="hero-title"] { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
}

/* Give longer headlines room to breathe */
[class*="hero-content"] { max-width: 860px !important; }