:root
{
  --size-300: 0.75rem;
  --size-400: 1rem;
  --size-500: 1.33rem;
  --size-600: 1.77rem;
  --size-700: 2.36rem;
  --size-800: 3.15rem;
  --size-900: 4.2rem;
}

body
{
  font-family: georgia, serif;
  line-height: 1.4;
  font-kerning: normal;
}

header
{
  margin-bottom: 1em;
}

menu
{
  padding-left: 0;
  font-family: helvetica, sans-serif;
}

nav
{
  font-weight: bolder;
}

p
{
  max-width: 60ch;
  padding-bottom: 1em;
}

li
{
  max-width: 60ch;
}

h1
{
  font-family: helvetica, sans-serif;
  font-size: var(--size-700);
  line-height: 1.3;
  font-weight: 900;
  max-width: 15ch;
  margin-bottom: 1.0rem;
}

h2
{
  font-family: helvetica, sans-serif;
  font-size: var(--size-600);
  line-height: 1.3;
  font-weight: 900;
  max-width: 35ch;
  margin-bottom: 0.5rem;
}

h3
{
  font-family: helvetica, sans-serif;
  font-size: var(--size-500);
  line-height: 1.3;
  max-width: 35ch;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

h4
{
  font-family: helvetica, sans-serif;
  line-height: 1.3;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

figcaption
{
  font-size: var(--size-300);
  font-style: italic;
}

blockquote
{
  font-style: italic;
}

time
{
  font-style: italic;
  font-size: var(--size-400);
}

ul
{
  font-size: var(--size-500);
}

ol
{
  font-size: var(--size-500);
}



/*
  Link styling. Make all links the default colour.
*/
a:not([class])
{
  color: currentColor;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: coral;
  padding-bottom: 1em;
}

[href]:hover
{
  text-decoration: none;
}



/* Optimisations for larger screen sizes */
@media (min-width: 45em)
{
  h1
  {
    font-size: var(--size-900);
  }

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

  p
  {
    font-size: var(--size-500);
  }

  figcaption
  {
    font-size: var(--size-400);
  }

  blockquote p
  {
    font-size: var(--size-600);
    max-width: 40ch;
  }


  .footer_colophon p
  {
    font-size: var(--size-300);
    font-style: italic;
    text-align: left;
  }

}