/* ── Definitions ─────────────────────────────────── */

:root {

  --max-width: 864px;
  --gutter: 32px;

  --black:         hsl(0, 0%, 4%);
  --surface:       hsl(0, 0%, 9%);
  --border:        hsl(0, 0%, 10%);
  --border-dim:    hsl(0, 0%, 15%);
  --text-lite:     hsl(0, 0%, 100%);
  --text-hero:     hsl(40, 0%, 90%);
  --text-norm:     hsl(40, 11%, 90%);
  --text-back:     hsl(40, 11%, 86%);
  --text-muted:    hsl(40, 0%, 67%);
  --text-dim:      hsl(40, 0%, 60%);
  --red-lite:      hsl(6, 63%, 56%);
  --red-main:      hsl(6, 63%, 48%);
  --red-dim:       hsl(0, 40%, 31%);
  --nav-active:    hsl(0, 0%, 20%);

  --font-display:           BebasNeuePro-Regular,   sans-serif;
  --font-display-thin:      BebasNeuePro-Thin,      sans-serif;
  --font-display-light:     BebasNeuePro-Light,     sans-serif;
  --font-display-book:      BebasNeuePro-Book,      sans-serif;
  --font-display-regular:   BebasNeuePro-Regular,   sans-serif;
  --font-display-middle:    BebasNeuePro-Middle,    sans-serif;
  --font-display-bold:      BebasNeuePro-Bold,      sans-serif;
  --font-body:              BebasNeuePro-Regular,   sans-serif;
  --font-serif:             ModernSerif,            georgia, serif;

  --lite-serif: 350;

  --letter-sph: 0.03em;
  --letter-sp2: 0.02em;
  --letter-sp3: 0.03em;
  --letter-sp4: 0.04em;
  --letter-sp5: 0.05em;

}

html.safari
{
  --letter-sph: 0.00em;
  --letter-sp2: 0.01em;
  --letter-sp3: 0.03em;
  --letter-sp4: 0.04em;
  --letter-sp5: 0.04em;
}

/* ── Fonts ─────────────────────────────────────── */

@font-face {
  font-family: BebasNeuePro-Bold;
  src:  url('/assets/fonts/BebasNeuePro-Bold.woff2') format('woff2');
}

@font-face {
  font-family: BebasNeuePro-Book;
  src:  url('/assets/fonts/BebasNeuePro-Book.woff2') format('woff2');
}

@font-face {
  font-family: BebasNeuePro-Light;
  src:  url('/assets/fonts/BebasNeuePro-Light.woff2') format('woff2');
}

@font-face {
  font-family: BebasNeuePro-Middle;
  src:  url('/assets/fonts/BebasNeuePro-Middle.woff2') format('woff2');
}

@font-face {
  font-family: BebasNeuePro-Regular;
  src:  url('/assets/fonts/BebasNeuePro-Regular.woff2') format('woff2');
}

@font-face {
  font-family: BebasNeuePro-Thin;
  src:  url('/assets/fonts/BebasNeuePro-Thin.woff2') format('woff2');
}

@font-face {
  font-family: ModernSerif;
  src: url('/assets/fonts/Bitter-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: ModernSerif;
  src: url('/assets/fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}