/* ===========================
   Typography Base
   =========================== */

:root {
  --calluna: sans-serif;
  --reckoner_bold: "reckoner_bold", Impact, sans-serif;
  --reckoner: "reckoner", Impact, sans-serif;
  font-family: var(--calluna);

  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ===========================
   Headings
   =========================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: 1.2;
  margin: 1.2em 0 0.6em;
}


h1 {
  font-family: var(--reckoner);
  font-size: 2.5rem;
  font-weight: normal;
  /* ~36px */
}

h2 {
  font-family: var(--reckoner);
  font-size: 2rem;
  /* ~28px */
}

h3 {
  font-size: 1.5rem;
  font-weight: normal;
  /* ~24px */
}

h4 {
  font-size: 1.25rem;
  /* ~20px */
}

h5 {
  font-size: 1.125rem;
  /* ~18px */
}

h6 {
  font-size: 1rem;
  /* ~16px */
  font-weight: 600;
}

/* ===========================
   Paragraphs & Text
   =========================== */

p {
  margin: 0 0 1em;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

small {
  font-size: 0.875rem;
}

/* ===========================
   Links
   =========================== */

a {
  color: #007acc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===========================
   Lists
   =========================== */

ul, ol {
  margin: 1em 0 1em 1.5em;
  padding: 0;
}

li {
  margin-bottom: 0.5em;
}

/* ===========================
   Blockquotes
   =========================== */

blockquote {
  border-left: 4px solid #ddd;
  padding-left: 1em;
  margin: 1em 0;
  color: #555;
  font-style: italic;
}