/* Shared website typography. Change font families here, not in page styles.
   Body/interface: DM Sans. Editorial headings: DM Serif Text.
   Large accents (such as the contact phone): DM Serif Display.
   Use .font-body, .font-heading, and .font-display to select a role. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,100..1000;1,100..1000&family=DM+Serif+Display:ital@0;1&family=DM+Serif+Text:ital@0;1&display=swap");

/* Define site font families here so page styles share the same typography. */
html:root {
  --font-body: "DM Sans", Arial, sans-serif;
  --font-heading: "DM Serif Text", Georgia, serif;
  --font-display: "DM Serif Display", Georgia, serif;
  --bs-body-font-family: var(--font-body);
  --bs-font-sans-serif: var(--font-body);
}

body, nav, .site-footer {
  font-family: var(--font-body);
}

button, input, select, textarea {
  font-family: var(--font-body);
}

/* Small interface headings retain the body's sans-serif face by default. */
h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-synthesis: none;
}

.font-body {
  font-family: var(--font-body) !important;
}

.font-heading {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  font-synthesis: none;
}

.font-display {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-synthesis: none;
}