/* Fonts */

* {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
html {
    font-family: 'Helvetica Neue', Helvetica, 'Open Sans', Arial, sans-serif;
    color: var(--black);
    line-height: 1.3;
    font-weight: 400;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
@media (min-width: 1560px) {
    html {
        font-size: 17px;
    }
}


/* Typography */

:root {
    --h1:   2rem;
    --h2:   1.5rem;
    --h3:   1.25rem;
    --h4:   1.125rem;
    --h5:   .875rem;
    --h6:   .8125rem;
    --huge: 3rem;
}
@media (min-width: 992px) {
    :root {
        --h1:   2.5rem;
        --h2:   1.75rem;
        --h3:   1.375rem;
        --huge: 4rem;
    }
}

h1 { margin-top: .5em; margin-bottom: 1.5rem; }
h2 { margin-top: .875em; margin-bottom: 1rem; }
h3 { margin-top: 1em; margin-bottom: .5rem; }

h1, .h1 { font-weight: 500; font-size: var(--h1); line-height: 1.1; }
h2, .h2 { font-weight: 500; font-size: var(--h2); line-height: 1.2; }
h3, .h3 { font-weight: 500; font-size: var(--h3); line-height: 1.25; }
.huge   { font-weight: 500; font-size: var(--huge); line-height: 1; }

h4      { font-weight: 600; margin-bottom: .25em; margin-top: .75em; }
h4, .h4 { font-size: var(--h4); line-height: 1.25; }

h5, h6  { margin-bottom: .25em; margin-top: .5em; }
h5, .h5 { font-weight: inherit; font-size: var(--h5); }
h6, .h6 { font-weight: inherit; font-size: var(--h6); }

p {
    margin-top: 0;
    margin-bottom: 1.5em;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 1.5em;
}

.bold               { font-weight: 600 }
.regular            { font-weight: 400 }
.italic             { font-style: italic }
.caps               { text-transform: uppercase; }

.line-height-1      { line-height: 1 }.line-height-2 { line-height: 1.25 }.line-height-3 { line-height: 1.5 }.line-height-4 { line-height: 2 }
.letter-spacing-25  { letter-spacing: .025em }.letter-spacing-50  { letter-spacing: .05em }.letter-spacing-100 { letter-spacing: .1em }
.letter-spacing-n25 { letter-spacing: -.025em }.letter-spacing-n50 { letter-spacing: -.05em }.letter-spacing-n100{ letter-spacing: -.1em }

.underline {
  text-decoration: underline;
}


/* Globals */

a {
    color: var(--primary);
    text-decoration: underline;
    transition: color 200ms;
}
a:hover {
    color: var(--dark);
    text-decoration: underline;
}