:root {
  --font-site-title: "novela-display";
  --font-site-title-size: 22px;

  --font-size-heading: clamp(1.4rem, 3vw, 1.75rem);
  --font-size-base: clamp(1.125rem, 1.06rem + 0.651vw, 1.438rem);

  --font-body-primary: "bariol-serif";

  --font-page-title: "bariol-serif";
  --font-page-title-weight: 300;
  --font-page-title-size: clamp(3.625rem, 3.404rem + 2.214vw, 4.688rem);

  --font-article-section-head: "bariol-serif";
  --font-article-section-head-size: clamp(2rem, 1.792rem + 2.083vw, 3rem);

  --font-article-subsection-head: "bariol-serif";
  --font-article-subsection-head-size: clamp(
    1.625rem,
    1.417rem + 2.083vw,
    2.625rem
  );

  --font-pull-quote: "bariol-serif";
  --font-pull-quote-size: clamp(2rem, 1.792rem + 2.083vw, 3rem);

  --font-block-quote: "bariol-serif";
  --font-block-quote-size: 3rem;
  --font-block-quote-cite-size: 1rem;

  --font-code: "courier-prime";
  --font-code-lang: "bariol-serif";
  --font-code-lang-size: 0.9rem;

  --font-tag: "bariol-serif";

  --font-menu-close-button-size: 16px;
  --font-menu-close-text-size: 0.8em;
  --font-footer-size: 0.9rem;

  --font-stub-title: "bariol-serif";
  --font-stub-title-size: clamp(24px, 4vw, 34px);

  --font-stub-description: "bariol-serif";
  --font-stub-description-size: clamp(16px, 2.8vw, 20px);
}

/* Novela */

@font-face {
  font-family: "novela-display";
  src: url("novela-displayregular-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* Bariol Serif */

@font-face {
  font-family: "bariol-serif";
  src: url("bariol_serif_regular-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "bariol-serif";
  src: url("bariol_serif_regular_italic-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "bariol-serif";
  src: url("bariol_serif_bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "bariol-serif";
  src: url("bariol_serif_bold_italic-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "bariol-serif";
  src: url("bariol_serif_light-webfont.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "bariol-serif";
  src: url("bariol_serif_light_italic-webfont.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
}

/* Courier Prime */

@font-face {
  font-family: "courier-prime";
  src: url("CourierPrime-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "courier-prime";
  src: url("CourierPrime-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}