/* Shared typography rhythm — loaded last on every page. */
:root {
  --type-title-copy-gap: clamp(18px, 1.45vw, 26px);
  --type-card-copy-gap: clamp(12px, 0.9vw, 17px);
  --type-display-line-height: 0.98;
  --type-display-letter-spacing: -0.04em;
  --type-card-title-line-height: 1.08;
  --type-card-title-letter-spacing: -0.025em;
  --type-heading-weight: 500;
  --type-keyword-weight: 800;
}

html,
body,
button,
input,
textarea,
select,
option {
  font-family: "Inter", Arial, sans-serif !important;
  font-synthesis: none !important;
}

body :where(h1, h2, h3, h4, h5, h6, p, li, a, button, span, strong, b, em, small, label, summary) {
  font-family: "Inter", Arial, sans-serif !important;
}

/* Old <b> tags are layout/UI hooks, not editorial emphasis. */
body b {
  font-weight: inherit !important;
}

/* One consistent horizontal and vertical rhythm for every editorial title. */
main :where(h1, h2, .display-title, .hero-title, .section-title) {
  line-height: var(--type-display-line-height) !important;
  letter-spacing: var(--type-display-letter-spacing) !important;
  font-weight: var(--type-heading-weight) !important;
  font-synthesis: none !important;
}

main :where(h3, h4, .card-title, .service-title, .home-project-card-title, .faq-title) {
  line-height: var(--type-card-title-line-height) !important;
  letter-spacing: var(--type-card-title-letter-spacing) !important;
  font-weight: var(--type-heading-weight) !important;
  font-synthesis: none !important;
}

/* Prevent legacy first-letter rules from changing a single glyph's weight. */
main :where(h1, h2, h3, h4, .display-title, .hero-title, .section-title, .card-title, .service-title, .home-project-card-title, .faq-title)::first-letter {
  font: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

/* Bold keywords must not alter the spacing of the line that contains them. */
main :where(h1, h2, h3, h4, .display-title, .hero-title, .section-title, .card-title, .service-title, .home-project-card-title, .faq-title)
  :where(strong, b, em, span, a) {
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* A heading containing an editorial keyword keeps a clearly lighter base. */
main :where(h1, h2, h3):has(strong) {
  font-weight: var(--type-heading-weight) !important;
}

main :where(h1, h2, h3, p, .subtitle, .hero-subtitle, .lede, .intro, .body-copy) strong {
  font-weight: var(--type-keyword-weight) !important;
}

/* One natural rhythm for title → subtitle/copy, without altering side margins. */
main :where(h1, h2) + :where(p, .subtitle, .hero-subtitle, .lede, .intro, .body-copy) {
  margin-top: var(--type-title-copy-gap) !important;
}

main h3 + :where(p, .subtitle, .body-copy) {
  margin-top: var(--type-card-copy-gap) !important;
}

main :where(.section-title, .card-title, .service-title) + :where(.subtitle, .section-subtitle, .card-subtitle, p) {
  margin-top: var(--type-card-copy-gap) !important;
}

@media (max-width: 900px) {
  :root {
    --type-title-copy-gap: 18px;
    --type-card-copy-gap: 12px;
  }
}