@font-face {
    font-family: Inter;
    src: url('/fonts/Inter-VariableFont_slnt,wght.ttf');
  }
  
  @font-face {
    font-family: 'PT Serif Bold';
    src: url('/fonts/PTSerif-Bold.ttf');
  }
  @font-face {
    font-family: 'PT Serif Bold Italic';
    src: url('/fonts/PTSerif-BoldItalic.ttf');
  }
  @font-face {
    font-family: 'PT Serif Italic';
    src: url('/fonts/PTSerif-Italic.ttf');
  }
  @font-face {
    font-family: 'PT Serif';
    src: url('/fonts/PTSerif-Regular.ttf');
  }
  
  :root {
    --sm--root--font-size: 14px;
    --lg--root--font-size: 16px;
    --root--font-size: 14px;
    --sm--font-size: 14px;
    --lg--font-size: 21px;

    --text--font-size: 1rem;
    --small-text--font-size: 0.8rem;
    --h1--font-size: 2rem;
    --h2--font-size: 1.7rem;
    --h3--font-size: 1.3rem;
    --h4--font-size: 1.2rem;
    --h5--font-size: 1.05rem;
    --cta--font-size: 1.3rem;
    --nav--link--font-size: 1.3rem;
    --nav--sublink--font-size: 1rem;

    --guide--nav--link--font-size: var(--text--font-size);
    --guide--nav--sublink--font-size: var(--small-text--font-size);
  
    --heading--font-family: Inter; 
    --nav--font-family: Inter;
    --cta--font-family: Inter;
    --text--font-family: 'PT Serif';
  
    --text-color: black;
    --background: white;
    --border-color: black;
  
    --bio--border: 1px solid var(--border-color);
  
    --sm--content-section--padding-left: 2rem;
    --lg--content-section--padding-left: 9rem;
    --content-section--padding-left: var(--lg--content-section--padding-left);
    --content-section--max-width: 1600px;
  }
  
  html, body {
    padding: 0;
    margin: 0;
  }
  
  * {
    box-sizing: border-box;
  }
  
  html {
    font-size: var(--lg--root--font-size);
  }
  
  body > * {
    max-width: var(--content-section--max-width);
    margin: 0 auto;
  }
  
  p, a {
    font-size: var(--text--font-size);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading--font-family);
    padding: 0;
    margin: 0;
  }
  
  h1 {
    font-size: var(--h1--font-size);
    font-weight: 700;
  }
  
  h2 {
    font-size: var(--h2--font-size);
  }
  
  h2 + h3 {
    margin-top: 1rem;
  }
  
  h3 {
    font-size: var(--h3--font-size);
    padding: .5rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }
  
  h4 {
    font-size: var(--h4--font-size);
    padding: 1rem 0;
  }
  
  p {
    font-family: var(--text--font-family);
    font-weight: 400;
  }
  
  a {
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--text--font-family);
    font-weight: 400;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  section, .page-title {
    color: var(--text-color);
    background: var(--background);
    padding-top: 2rem;
    padding-right: 14rem;
    padding-bottom: 2rem;
    padding-left: var(--content-section--padding-left);
  }
  
  section:first-of-type {
    padding-top: 0;
  }
  
  section.inverted,
  section.alternating:nth-of-type(2n) {
    --text-color: white;
    --background: black;
    --border-color: white;
  }
  
  section:not(.inverted):not(.alternating) ~ section:not(.inverted):not(.alternating) {
    margin-top: -2rem;
  }
  
  hr {
    height: 1px;
    border: 0;
    color: var(--text-color);
    background-color: var(--text-color);
  }
  
  .cta {
    font-size: var(--cta--font-size);
  }
  
  @media (max-width: 980px) {
    :root {
  
      --content-section--padding-left: var(--sm--content-section--padding-left);
    }
    html {
      font-size: var(--sm--root--font-size);
    }
  
    section {
        padding: 2.5rem 2rem 2.5rem var(--content-section--padding-left);
    }
  
    h1 {
      font-size: 2.1rem;
    }
  }