/* Brand typeface for the site chrome — header navigation and footer.
 *
 * Copperplate is the house display face (it ships with macOS / iOS). Other
 * platforms don't have it, so Cinzel — a close classical-capitals match
 * loaded from Google Fonts — stands in there. Copperplate has no true
 * lowercase: lowercase letters render as small capitals, which is the look
 * the footer links are meant to have.
 *
 * Only navigation and footer use it. Body copy, menus, prices and legal text
 * keep the regular text face: an all-capitals face over whole paragraphs is
 * hard to read.
 *
 * Selectors are prefixed with `html body` so this file wins over each page's
 * own inline <style>, whichever order the two end up in.
 */
:root {
  --font-brand-chrome: "Copperplate", "Copperplate Gothic Bold", "Copperplate Gothic Light", "Cinzel",
    "Noto Serif SC", "Songti SC", serif;
}

/* ---- footer ---- */
html body .site-footer,
html body .site-footer a,
html body .site-footer button,
html body .site-footer .sf-privacy-btn,
html body .site-footer .sf-copyright,
html body .site-footer .sf-req,
html body .site-footer .sf-note {
  font-family: var(--font-brand-chrome);
}
/* Typing an email address in small capitals is error-prone; the field stays
   in the regular face. */
html body .site-footer input,
html body .site-footer input::placeholder {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ---- mobile full-screen menu ---- */
html body .site-nav a {
  font-family: var(--font-brand-chrome);
  letter-spacing: 0.04em;
}

/* ---- desktop nav bar ---- */
@media (min-width: 900px) {
  html body .site-nav-bar > a,
  html body .site-nav-bar .has-dropdown > a,
  html body .site-nav-bar .dropdown a {
    font-family: var(--font-brand-chrome);
    letter-spacing: 0.03em;
  }
  /* The face runs wider than the system sans the bar was sized for; nine
     items have to fit between the logo and the right edge at 900px. */
  html body .site-nav-bar > a,
  html body .site-nav-bar .has-dropdown > a {
    font-size: 12px;
  }
  html body .site-nav-bar {
    gap: 18px;
  }
}