/* ========================================================================= */
/* typography.css                                                            */
/* ========================================================================= */
:root {
  --font-size--base: 16px;
  --font-size--small: calc(var(--font-size--base) * 0.875);
  --font-size--large: calc(var(--font-size--base) * 1.25);
  --font-size--larger: calc(var(--font-size--base) * 1.5);
  --font-size--largest: calc(var(--font-size--base) * 2);
}

html {
  font: var(--font-size--base) / 1.375 sans-serif;
}

h1 {
  font-size: var(--font-size--largest);
}

h2 {
  font-size: var(--font-size--larger);
}

h3 {
  font-size: var(--font-size--large);
}

/* ========================================================================= */
/* Site Header                                                               */
/* ========================================================================= */
body > header {
  & a {
    text-decoration: none;
  }

  /* --- Phone Number --- */
  & address {
    font-style: normal;
  }

  /* --- Brand --- */
  & hgroup p {
    font-style: italic;
  }

  /* --- Navigation --- */
  & nav button {
    font-size: var(--font-size--base);
  }
}

/* ========================================================================= */
/* Site Main                                                                */
/* ========================================================================= */
body > main {
  & > header a {
    text-decoration: none;
  }
}

/* ------------------------------------------------------------------------- */
/* Site Main - Pagination                                                    */
/* ------------------------------------------------------------------------- */
body > main > nav {
  & a {
    text-decoration: none;
  }
}

/* ========================================================================= */
/* Site Aside                                                                */
/* ========================================================================= */
body > aside {
  & h2 {
    font-size: var(--font-size--larger);
  }

  & ul a {
    text-decoration: none;
  }
}

/* ========================================================================= */
/* Site Footer                                                               */
/* ========================================================================= */
body > footer {
  & h2 {
    font-size: var(--font-size--large);
    font-weight: normal;
  }

  & address, & cite {
    font-style: normal;
  }

  & blockquote {
    font-style: italic;
  }

  /* --- Copyright --- */
  & > p {
    font-size: var(--font-size--small);
    text-align: center;
  }
}