/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
html, body {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--grey-5);
  font-family: var(--body-font);
  font-feature-settings: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

input, select, textarea {
  color: var(--grey-5);
  font-family: var(--body-font);
}

button {
  color: var(--grey-5);
  font-family: var(--heading-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  clear: both;
  margin: 1em 0 .5em;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.05em;
}

h1 {
  font-size: var(--text-h1);
  line-height: 3.75rem;
}

h2 {
  font-size: var(--text-h2);
  line-height: 3rem;
}

h3 {
  font-size: var(--text-h3);
  line-height: 2.5rem;
}

h4 {
  font-size: var(--text-h4);
  line-height: 2.25rem;
}

h5 {
  font-size: var(--text-h5);
  line-height: 2rem;
}

h6 {
  font-size: var(--text-h6);
  line-height: 1.75rem;
}

@media (max-width: 600px) {
  h1 {
    font-size: var(--text-h1-sml);
  }

  h2 {
    font-size: var(--text-h2-sml);
  }
}

p {
  margin: 0;
  font-size: var(--text-p);
  line-height: 1.75rem;
  color: var(--grey-30);
}

p+*, ul+*, ol+* {
  margin-top: 1em;
}

dfn, cite, em, i {
  font-style: italic;
}

cite {
  color: var(--grey-30);
}

blockquote, q {
  quotes: "\201C" "\201D" "\2018" "\2019";
  margin-left: 0;

}

blockquote p:first-of-type, q p:first-of-type {
  text-indent: -0.45em;
}

blockquote p:first-of-type:before, q p:first-of-type:before {
  content: open-quote;
}

blockquote p:last-of-type:after, q p:last-of-type:after {
  content: close-quote;
}

blockquote {
  border-left: 2px solid var(--gold-45);
  margin-left: 0;
  margin-right: 0;
  padding: 0 0 0 2rem;
}

cite::before {
  content: "\002014"
}

html[lang="fr"] blockquote, html[lang="fr"] q {
  quotes: "\00ab" "\00bb";
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: var(--grey-99);
  font-family: var(--code-font);
  font-size: var(--text-body);
  line-height: 1.5;
  margin-bottom: 1.5em;
  max-width: 100%;
  overflow: auto;
  padding: 1.5em;
}

code, kbd, tt, var {
  font-family: var(--code-font);
  font-size: var(--text-body);
}

abbr, acronym {
  border-bottom: 1px dotted var(--grey-70);
  cursor: help;
}

mark, ins {
  background: var(--yellow-85);
  text-decoration: none;
}

big {
  font-size: var(--text-h5);
  line-height: 2rem;
}

small {
  font-size: var(--text-small);
  line-height: 1rem;
}

.capitalize {
  text-transform: capitalize;
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/

a {
  text-decoration: none;
  color: var(--grey-5);
  /* transition: color .25s ease-in-out;
  -webkit-transition: color .25s ease-in-out; */
}

a:hover, a:focus, a:active {
  color: inherit;
}

a:focus {
  outline: none;
}

p a {
  color: var(--blue-45);
  border-bottom: 1px solid var(--blue-85);
}

p a:hover {
  color: var(--grey-30);
  border-color: var(--grey-70);
}