/*
 * SoL brand typography. The site display face is Ethnocentric (Ray Larabie /
 * Typodermic) — a wide techno face that suits the cosmic theme. Shipped as
 * /assets/fonts/sol_rg.otf (regular) + sol_rg_it.otf (italic).
 *
 * Scope: CHROME ONLY. Ethnocentric is a display face, so it is applied to
 * brand, nav, headings, buttons, card + modal titles — the framing of the UI —
 * while dense body / table / form text keeps a readable mono/sans stack. Load
 * this on every surface so the brand face is available everywhere.
 */
@font-face {
  font-family: 'Ethnocentric';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/sol_rg.otf') format('opentype');
}
@font-face {
  font-family: 'Ethnocentric';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/sol_rg_it.otf') format('opentype');
}

/* Reusable token + helper so pages can opt any element into the brand face. */
:root {
  --font-brand: 'Ethnocentric', 'Arial Narrow', system-ui, sans-serif;
}
.font-brand,
.brand-type {
  font-family: var(--font-brand);
}

/* ---- Chrome application (shared class/tag vocabulary across surfaces) ---- */
/* Public site nav + generic headings. Ethnocentric is wide, so nav labels get
   tighter tracking than the Open Sans default to avoid crowding. */
nav li,
.nav-item,
.mobile-menu-item,
.settings-menu-item {
  font-family: var(--font-brand);
  letter-spacing: 1.5px;
}

h1, h2, h3,
.tool-title,
.apg-card-title,
.apg-modal-title,
.site-switch-title,
.brand-title,
.contact-card .tool-title {
  font-family: var(--font-brand);
}

/* Buttons / calls to action read as chrome. */
.playBtn,
button.playBtn {
  font-family: var(--font-brand);
  letter-spacing: 1px;
}