/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

*

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Table of contents ––––––––––––––––––––––––––––––––––––––––––––––––––

*/

/* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ $modular-scale-ratio: $augmented-fourth; $modular-scale-base: 18px; $base-line-height: 1.6;

body {

@include font-feature-settings("kern", "liga", "pnum");
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;

color: $text-color;
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;

}

h1, h2, h3, h4, h5, h6 {

font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
font-weight: 400;
margin: 0 0 20px;
color: $heading-color;

}

h1 {

font-size: modular-scale(3);
line-height: 1.25;
letter-spacing: -1px;

}

h2 {

font-size: modular-scale(2);
line-height: 1.25;
letter-spacing: -1px;

}

h3 {

font-size: modular-scale(1);
line-height: 1.3;
letter-spacing: -0.7px;

}

h4 {

font-size: modular-scale(0);
line-height: 1.35;
letter-spacing: -0.6px;

}

h5 {

font-size: modular-scale(-1);
line-height: 1.5;
letter-spacing: -0.5px;

}

h6 {

font-size: modular-scale(-2);
line-height: 1.6;
letter-spacing: 0;

}

@include media($tablet) {

h1 { font-size: 40px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 15px; }
h6 { font-size: 12px; }

}

@include media($mobile) {

h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }

}

p {

margin-top: 0;
font-size: 18px;

}

p {

@include media($tablet) {
  @include hyphens(auto);
  -webkit-hyphenate-limit-before: 2;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-lines: 2;
}

}

/* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */

a {

color: $primary-color;
font-size: 18px;
text-decoration: none;
transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
border-bottom: 1px solid rgba($primary-color, 0);

&:hover {
  color: $primary-color-dark;
  border-bottom: 1px solid rgba($primary-color, 1);
}

}

/* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ #{$all-text-inputs}, select {

box-sizing: border-box;

}

/* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ ul {

list-style: circle inside; }

ol {

list-style: decimal inside; }

ol, ul {

padding-left: 0;
margin-top: 0;
font-size: 18px;

} ul ul, ul ol, ol ol, ol ul {

margin: 15px 0 15px 30px;
font-size: 90%; }

li {

margin-bottom: 10px;

}

/* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code {

padding: 2px 5px;
margin: 0 2px;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px; }

pre > code {

display: block;
padding: 10px 15px;
white-space: pre; }

/* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */ th, td {

padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1; }

th:first-child, td:first-child {

padding-left: 0; }

th:last-child, td:last-child {

padding-right: 0; }

/* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ input, textarea, select, fieldset {

margin-bottom: 15px; }

pre, blockquote, dl, figure, table, p, ul, ol, form {

margin-bottom: 25px; }

/* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ hr {

border-width: 0;
border-top: 1px solid $base-border-color;
margin: 0;

}

img, picture {

margin: 0;
max-width: 100%;

}