html, .root {
  font-size: 14px;
  line-height: 21px;
}
body, .article {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 21px;
  /* max-width: 560px;
  margin: auto; */
}
h1, .h1 {
  font-family: 'Coco Sharp';
  font-size: 31px;
  font-weight: 800;
  line-height: 42px;
  margin-top: 21px;
  margin-bottom: 21px;
}
h2, .h2 {
  font-family: 'Coco Sharp';
  font-size: 24px;
  font-weight: 800;
  line-height: 42px;
  margin-top: 21px;
  margin-bottom: 21px;
}
h3, .h3 {
  font-family: 'Coco Sharp';
  font-size: 18px;
  font-weight: 800;
  line-height: 21px;
  margin-top: 21px;
  margin-bottom: 0px;
}
h4, .h4 {
  font-family: 'Coco Sharp';
  font-size: 14px;
  font-weight: 800;
  line-height: 21px;
  margin-top: 21px;
  margin-bottom: 0px;
}
h5, .h5 {
  font-family: 'Coco Sharp';
  font-size: 14px;
  font-weight: 800;
  font-weight: bold;
  line-height: 21px;
  margin-top: 21px;
  margin-bottom: 0px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { letter-spacing: -.05rem; }
p, ul, ol, pre, table, blockquote {
  font-family: 'Body Text';
  line-height: 1.5rem;
  margin-top: 0px;
  margin-bottom: 21px;
}
ul ul, ol ol, ul ol, ol ul {
  font-family: 'Body Text';
  margin-top: 0px;
  margin-bottom: 0px;
}

/* Let's make sure all's aligned */
hr, .hr { border: 1px solid; margin: -1px 0; }
b, i, strong, em, small, code { line-height: 0; }
sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

figure {margin-bottom: 1.5rem; }

.link,
a { 
  color:hsl(1, 90%, 45%);
  font-weight: 600;
  margin: -5px;
  padding: 5px;
  text-decoration: none;
}
.link,
a:visited { color:hsl(1, 90%, 45%); }
.link,
a:hover { color: hsl(1, 73%, 56%); text-decoration: underline; } 
/* a:focus { } 
a:active { } */
.link--dark { color: hsl(0, 0%, 20%); }

@media screen and (min-width: 768px) {
  html, .root {
    font-size: 16px;
    line-height: 24px;
  }
  body, .article {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 24px;
  }
  h1, .h1 {
    font-size: 35px;
    line-height: 48px;
    margin-top: 24px;
    margin-bottom: 24px;
  }
  h2, .h2 {
    font-size: 27px;
    line-height: 48px;
    margin-top: 24px;
    margin-bottom: 24px;
  }
  h3, .h3 {
    font-size: 21px;
    line-height: 24px;
    margin-top: 24px;
    margin-bottom: 0px;
  }
  h4, .h4 {
    font-size: 16px;
    line-height: 24px;
    margin-top: 24px;
    margin-bottom: 0px;
  }
  h5, .h5 {
    font-size: 16px;
    line-height: 24px;
    margin-top: 24px;
    margin-bottom: 0px;
  }
  p, ul, ol, pre, table, blockquote {
    margin-top: 0px;
    margin-bottom: 24px;
  }
  ul ul, ol ol, ul ol, ol ul {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  /* Let's make sure all's aligned */
  hr, .hr {
    border: 1px solid;
    margin: -1px 0;
  }
  b, i, strong, em, small, code { line-height: 0; }
  sub, sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sup { top: -0.5em; }
  sub { bottom: -0.25em; }
}


/* UTILITY */
.fw--regular { font-weight: 400 !important;}

.link-hover--unset:hover { 
  color: var(--white);
  text-decoration: none; 
}