// Typography
// ––––––––––––––––––––––––––––––––––––––––––––––––––

%h {
  color: $header-font-color;
  font-family: $header-font-family;

  small {
    font-size: 65%;
    line-height: 1;
  }
}

h1,
.h1 {
  @extend %h;

  margin: $h1-margin;
  font-weight: $h1-font-weight;
  font-size: $h1-font-size;
  line-height: $h1-line-height;
}

h2,
.h2 {
  @extend %h;

  margin: $h2-margin;
  font-weight: $h2-font-weight;
  font-size: $h2-font-size;
  line-height: $h2-line-height;
}

h3,
.h3 {
  @extend %h;

  margin: $h3-margin;
  font-weight: $h3-font-weight;
  font-size: $h3-font-size;
  line-height: $h3-line-height;
}

h4,
.h4 {
  @extend %h;

  margin: $h4-margin;
  font-weight: $h4-font-weight;
  font-size: $h4-font-size;
  line-height: $h4-line-height;
}

h5,
.h5 {
  @extend %h;

  margin: $h5-margin;
  font-weight: $h5-font-weight;
  font-size: $h5-font-size;
  line-height: $h5-line-height;
}

h6,
.h6 {
  @extend %h;

  margin: $h6-margin;
  font-weight: $h6-font-weight;
  font-size: $h6-font-size;
  line-height: $h6-line-height;
}

abbr[title] { // stylelint-disable-line selector-no-qualifying-type
  text-decoration: underline dotted;
}

p {
  margin-bottom: $paragraph-margin-bottom;
}

blockquote {
  margin-bottom: $blockquote-margin-bottom;
  padding: $blockquote-padding-y $blockquote-padding-x;
  border-left: $blockquote-border-left-width solid $blockquote-border-left-color;
}

b,
strong {
  font-weight: $strong-font-weight;
}

small {
  font-size: $small-font-size;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}