// Typographic v2.9.2 - https://github.com/corysimmons/typographic


// Ratios

$minor-second   : 1.067;
$major-second   : 1.125;
$minor-third    : 1.2;
$major-third    : 1.25;
$perfect-fourth : 1.333;
$aug-fourth     : 1.414;
$perfect-fifth  : 1.5;
$minor-sixth    : 1.6;
$golden         : 1.618;
$major-sixth    : 1.667;
$minor-seventh  : 1.778;
$major-seventh  : 1.875;
$octave         : 2;
$major-tenth    : 2.5;
$major-eleventh : 2.667;
$major-twelfth  : 3;
$double-octave  : 4;


// Sans-serif

$calibri       : 'Calibri', 'Candara', 'Segoe', 'Segoe UI', 'Optima', 'Arial', 'sans-serif';
$candara       : 'Candara', 'Calibri', 'Segoe', 'Segoe UI', 'Optima', 'Arial', 'sans-serif';
$courier       : 'Courier New', 'Courier', 'Lucida Sans Typewriter', 'Lucida Typewriter', 'monospace';
$franklin      : 'Franklin Gothic Medium', 'Arial', 'sans-serif';
$futura        : 'Futura', 'Trebuchet MS', 'Arial', 'sans-serif';
$geneva        : 'Geneva', 'Tahoma', 'Verdana', 'sans-serif';
$gill-sans     : 'Gill Sans', 'Gill Sans MT', 'Calibri', 'sans-serif';
$helvetica     : 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
$lucida-grande : 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Geneva', 'Verdana', 'sans-serif';
$optima        : 'Optima', 'Segoe', 'Segoe UI', 'Candara', 'Calibri', 'Arial', 'sans-serif';
$segoe         : 'Segoe', 'Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif';
$tahoma        : 'Tahoma', 'Geneva', 'Verdana', 'sans-serif';
$trebuchet     : 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Tahoma', 'sans-serif';
$verdana       : 'Verdana', 'Geneva', 'sans-serif';


// Serif

$antiqua       : 'Book Antiqua', 'Palatino', 'Palatino Linotype', 'Palatino LT STD', 'Georgia', 'serif';
$baskerville   : 'Baskerville', 'Baskerville old face', 'Hoefler Text', 'Garamond', 'Times New Roman', 'serif';
$bodoni        : 'Bodoni MT', 'Didot', 'Didot LT STD', 'Hoefler Text', 'Garamond', 'Times New Roman', 'serif';
$cambria       : 'Cambria', 'Georgia', 'serif';
$caslon        : 'Big Caslon', 'Book Antiqua', 'Palatino Linotype', 'Georgia', 'serif';
$constantia    : 'Constantia', 'Palatino', 'Palatino Linotype', 'Palatino LT STD', 'Georgia', 'serif';
$didot         : 'Didot', 'Didot LT STD', 'Hoefler Text', 'Garamond', 'Times New Roman', 'serif';
$garamond      : 'Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', 'serif';
$goudy         : 'Goudy Old Style', 'Garamond', 'Big Caslon', 'Times New Roman', 'serif';
$hoefler       : 'Hoefler Text', 'Baskerville old face', 'Garamond', 'Times New Roman', 'serif';
$lucida-bright : 'Lucida Bright', 'Georgia', 'serif';
$palatino      : 'Palatino', 'Palatino Linotype', 'Palatino LT STD', "Book Antiqua", 'Georgia', 'serif';


// Settings

$line-height-ratio  : 1.75 !default;
$header-ratio       : $golden !default;
$body-font          : $helvetica !default;
$body-font-weight   : 300 !default;
$body-color         : #666 !default;
$header-font        : $helvetica !default;
$header-font-weight : 500 !default;
$header-color       : #111 !default;
$min-font           : 12px !default;
$max-font           : 20px !default;
$min-width          : 600px !default;
$max-width          : 1140px !default;
$vertical-rhythm    : true !default;


// Helpers

/// A function to remove the unit from a number.
///
/// @param {unit} $unit - A unit with a unit value.
///
/// @example
///   _strip-units(1px)
///
/// @access private

@function _strip-units($unit) {
  @return $unit / ($unit * 0 + 1);
}


/// Creates a baseline grid based off your $line-height-ratio to help visualize your vertical rhythm grid. You can offset the grid by negative or positive pixels to line it up perfectly with the bottom of your text.
///
/// @param {color} $color [black] - A color to be lightened and used as the color for the grid.
/// @param {number} $px-offset [false] - A positive or negative number of pixels to offset the grid by. Useful for lining the bottom of the gridlines up with your text.
///
/// @example
///   @include grid-overlay(blue, 2);

@mixin grid-overlay($color: black, $px-offset: false) {
  body {
    background: linear-gradient(to top, rgba($color, .1) 5%, white 5%);
    background-size: 100% ($line-height-ratio) + em;
    @if($px-offset) {
      background-position: 0 $px-offset + px;
    }
  }
}


/// Returns a "vertical unit". Useful for specifying the height and margins of non-text elements like images and such.
///
/// @param {number} $units [1] - Number of units. Accepts floated numbers as well.
/// @param {number} $px-offset [false] - A positive or negative number of pixels to offset the grid by. Useful for lining the bottom of the gridlines up with your text. Since this doesn't compute a literal pixel you may need to use a floated number (multiples of .25 work well) to keep your rhythm on track.
///
/// @example
///   img {
///     height: vr-block(5.25);
///     margin-bottom: vr-block(.25);
///   }

@function vr-block($units: 1, $px-offset: false) {
  @if($px-offset) {
    @return ( (($line-height-ratio * _strip-units($max-font)) / (_strip-units($max-font) / 2)) * ($units / 2) * (1 + ($px-offset / _strip-units($max-font))) ) + em;
  } @else {
    @return ( (($line-height-ratio * _strip-units($max-font)) / (_strip-units($max-font) / 2)) * ($units / 2) ) + em;
  }
}


/// Performs exponent math on floated numbers.
///
/// @example
///   math-pow(3, 3)
///
/// @access private

@function math-pow($number, $exp) {
    @if (round($exp) != $exp) {
      @return math-exp($exp * math-ln($number));
    }

    $value: 1;

    @if $exp > 0 {
        @for $i from 1 through $exp {
           $value: $value * $number;
        }
    }
    @else if $exp < 0 {
        @for $i from 1 through -$exp {
            $value: $value / $number;
        }
    }

    @return $value;
}


/// Helps with math-pow() function
///
/// @access private

@function math-factorial($value) {
  @if $value == 0 {
    @return 1;
  }

  $result: 1;

  @for $index from 1 through $value {
    $result: $result * $index;
  }

  @return $result;
}


/// Helps with math-pow() function
///
/// @access private

@function math-summation($iteratee, $input, $initial: 0, $limit: 100) {
  $sum: 0;

  @for $index from $initial to $limit {
    $sum: $sum + call($iteratee, $input, $index);
  }

  @return $sum;
}


/// Helps with math-pow() function
///
/// @access private

@function math-exp-maclaurin($x, $n) {
  $result: math-pow($x, $n) / math-factorial($n);
  @return $result;
}


/// Helps with math-pow() function
///
/// @access private

@function math-exp($value) {
  $result: math-summation(math-exp-maclaurin, $value, 0, 100);
  @return $result;
}


/// Helps with math-pow() function
///
/// @access private

@function math-ln-maclaurin($x, $n) {
  $result: (math-pow(-1, $n + 1) / $n) * (math-pow($x - 1, $n));
  @return $result;
}


/// Helps with math-pow() function
///
/// @access private

@function math-ln($value) {
  $ten-exp: 1;
  $ln-ten: 2.30258509;

  @while ($value > math-pow(10, $ten-exp)) {
    $ten-exp: $ten-exp + 1;
  }

  $value: $value / math-pow(10, $ten-exp);

  $result: math-summation(math-ln-maclaurin, $value, 1, 100);

  @return $result + $ten-exp * $ln-ten;
}


// Typography Mixins

@mixin t-html() {
  font-family: $body-font;
  font-weight: $body-font-weight;
  color: $body-color;

  font-size: $min-font;
  line-height: #{$line-height-ratio}em;

  @media (min-width: $min-width) {
    font-size: calc( #{$min-font} + (#{_strip-units($max-font)} - #{_strip-units($min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
  }

  @media (min-width: $max-width) {
    font-size: $max-font;
  }
}

@mixin t-p() {
  @include t-html;
}

@mixin t-reset() {
  margin: 0;
  padding: 0;
}

@mixin t-block() {
  margin-bottom: #{$line-height-ratio}em;
}

@mixin t-header() {
  font-family: $header-font;
  font-weight: $header-font-weight;
  color: $header-color;
  clear: both;
}

@mixin t-h1() {
  $local-min-font: $min-font * (math-pow($header-ratio, 1.75));
  $local-max-font: $max-font * (math-pow($header-ratio, 1.75));

  font-size: $local-min-font;
  @if ($vertical-rhythm) {
    margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
    line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
    margin-bottom: (($line-height-ratio * $min-font) / ($local-min-font / .25)) + em;
  } @else {
    margin-top: 0;
    line-height: 1.1em;
    margin-bottom: .25em;
  }

  @media (min-width: $min-width) {
    font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
  }

  @media (min-width: $max-width) {
    font-size: $local-max-font;
    @if ($vertical-rhythm) {
      margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
      line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
      margin-bottom: (($line-height-ratio * $max-font) / ($local-max-font / .25)) + em;
    }
  }
}

@mixin t-h2() {
  $local-min-font: $min-font * (math-pow($header-ratio, 1.4));
  $local-max-font: $max-font * (math-pow($header-ratio, 1.4));

  font-size: $local-min-font;
  @if ($vertical-rhythm) {
    margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
    line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
    margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (3 / _strip-units($local-min-font)))) + em;
  } @else {
    margin-top: 0;
    line-height: 1.2em;
    margin-bottom: .25em;
  }

  @media (min-width: $min-width) {
    font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
  }

  @media (min-width: $max-width) {
    font-size: $local-max-font;
    @if ($vertical-rhythm) {
      margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
      line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
      margin-bottom: (($line-height-ratio * _strip-units($max-font)) / (_strip-units($local-max-font) / .25) * (1 + (3 / _strip-units($local-max-font)))) + em;
    }
  }
}

@mixin t-h3() {
  $local-min-font: $min-font * (math-pow($header-ratio, 1.05));
  $local-max-font: $max-font * (math-pow($header-ratio, 1.05));

  font-size: $local-min-font;
  @if ($vertical-rhythm) {
    margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
    line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
    margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (3 / _strip-units($local-min-font)))) + em;
  } @else {
    margin-top: 0;
    line-height: 1.3em;
    margin-bottom: .25em;
  }

  @media (min-width: $min-width) {
    font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
  }

  @media (min-width: $max-width) {
    font-size: $local-max-font;
    @if ($vertical-rhythm) {
      margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
      line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
      margin-bottom: (($line-height-ratio * _strip-units($max-font)) / (_strip-units($local-max-font) / .25) * (1 + (3 / _strip-units($local-max-font)))) + em;
    }
  }
}

@mixin t-h4() {
  $local-min-font: $min-font * (math-pow($header-ratio, .7));
  $local-max-font: $max-font * (math-pow($header-ratio, .7));

  font-size: $local-min-font;
  @if ($vertical-rhythm) {
    margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
    line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
    margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (3 / _strip-units($local-min-font)))) + em;
  } @else {
    margin-top: 0;
    line-height: 1.4em;
    margin-bottom: .25em;
  }

  @media (min-width: $min-width) {
    font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
  }

  @media (min-width: $max-width) {
    font-size: $local-max-font;
    @if ($vertical-rhythm) {
      margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
      line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
      margin-bottom: (($line-height-ratio * _strip-units($max-font)) / (_strip-units($local-max-font) / .25) * (1 + (3 / _strip-units($local-max-font)))) + em;
    }
  }
}

@mixin t-h5() {
  $local-min-font: $min-font * (math-pow($header-ratio, .35));
  $local-max-font: $max-font * (math-pow($header-ratio, .35));

  font-size: $local-min-font;
  @if ($vertical-rhythm) {
    margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
    line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
    margin-bottom: (($line-height-ratio * $min-font) / ($local-min-font / .25)) + em;
  } @else {
    margin-top: 0;
    line-height: 1.5em;
    margin-bottom: .25em;
  }

  @media (min-width: $min-width) {
    font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
  }

  @media (min-width: $max-width) {
    font-size: $local-max-font;
    @if ($vertical-rhythm) {
      margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
      line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
      margin-bottom: (($line-height-ratio * $max-font) / ($local-max-font / .25)) + em;
    }
  }
}

@mixin t-h6() {
  $local-min-font: $min-font;
  $local-max-font: $max-font;

  font-size: $local-min-font;
  @if ($vertical-rhythm) {
    margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
    line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
    margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (2 / _strip-units($local-min-font)))) + em;
  } @else {
    margin-top: 0;
    line-height: 1.6em;
    margin-bottom: .25em;
  }

  @media (min-width: $min-width) {
    font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
  }

  @media (min-width: $max-width) {
    font-size: $local-max-font;
    @if ($vertical-rhythm) {
      margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
      line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
      margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (1 / _strip-units($local-min-font)))) + em;
    }
  }
}

@mixin t-blockquote() {
  font-style: italic;
  cite {
    font-style: normal;
  }
}

@mixin t-pre() {
  padding: ($line-height-ratio * .5) + em;
  margin-bottom: vr-block(1);
  code {
    padding: 0;
  }
}

@mixin t-code() {
  font-family: $courier;
  padding: ($line-height-ratio * .05) + em ($line-height-ratio * .15) + em;
  line-height: 0;
}

@mixin t-abbr() {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

@mixin t-dt() {
  color: $header-color;
  font-weight: bold;
}

@mixin t-fieldset() {
  padding: vr-block(.5) vr-block() vr-block();
  border-width: 1px;
  border-style: solid;
  max-width: 100%;
  margin-bottom: vr-block(1, 1);
  @media (min-width: $max-width) {
    margin-bottom: vr-block(1.25, -1);
  }
  button, input[type="submit"] {
    margin-bottom: 0;
  }
}

@mixin t-legend() {
  color: $header-color;
  font-weight: bold;
}

@mixin t-input() {
  $local-min-font: $min-font;
  $local-max-font: $max-font;

  display: block;
  max-width: 100%;
  padding: vr-block(.25);

  font-size: $local-min-font;
  margin-bottom: vr-block(.5, 7);

  @media (min-width: $min-width) {
    font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
  }

  @media (min-width: $max-width) {
    font-size: $local-max-font;
    margin-bottom: vr-block(.25, 3.5);
  }
}

@mixin t-button() {
  $local-min-font: $min-font;
  $local-max-font: $max-font;

  /* display: block; */
  cursor: pointer;

  font-size: $local-min-font;
  padding: vr-block(.25) vr-block();
  margin-bottom: 0;

  @media (min-width: $min-width) {
    font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
  }

  @media (min-width: $max-width) {
    font-size: $local-max-font;
    margin-bottom: 0;
  }
}

@mixin t-label() {
  display: block;
  padding-bottom: vr-block(.125);
  margin-bottom: vr-block(-.25, -10);
}

@mixin t-table() {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: vr-block(1, 5);
  @media (min-width: $max-width) {
    margin-bottom: vr-block(1, 3);
  }
}

@mixin t-th() {
  text-align: left;
  color: $header-color;

  padding: vr-block(.125) vr-block(.5);

  @media (min-width: $max-width) {
    padding: vr-block(.25) vr-block(.5);
  }
}

@mixin t-td() {
  padding: ($line-height-ratio * .5) + em;
  padding: vr-block(.125) vr-block(.5);

  @media (min-width: $max-width) {
    padding: vr-block(.25) vr-block(.5);
  }
}


/// The Typographic Reset. This is where Typographic goes through every markup element and styles it to adhere to a vertical rhythm. After you set your variables in a settings file fire this mixin.
///
/// @example
///   @include typographic;

@mixin typographic() {

  html, body {
    @include t-html;
  }

  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td {
    @include t-reset;
  }

  p, blockquote, pre,
  address,
  dl, ol, ul,
  table {
    @include t-block;
  }

  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    @include t-header;
  }

  h1, .h1 {
    @include t-h1;
  }

  h2, .h2 {
    @include t-h2;
  }

  h3, .h3 {
    @include t-h3;
  }

  h4, .h4 {
    @include t-h4;
  }

  h5, .h5 {
    @include t-h5;
  }

  h6, .h6 {
    @include t-h6;
  }

  blockquote {
    @include t-blockquote;
  }

  pre {
    @include t-pre;
  }

  code {
    @include t-code;
  }

  big, small, sub, sup {
    line-height: 0;
  }

  abbr, acronym {
    @include t-abbr;
  }

  address {
    font-style: normal;
  }

  dt {
    @include t-dt;
  }

  ul {
    padding-left: 1.1em;
  }

  ol {
    padding-left: 1.4em;
  }

  fieldset {
    @include t-fieldset;
  }

  legend {
    @include t-legend;
  }

  input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="color"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="url"], input[type="search"], textarea {
    @include t-input;
  }

  input[type="submit"], button {
    @include t-button;
  }

  label {
    @include t-label;
  }

  table {
    @include t-table;
  }

  th {
    @include t-th;
  }

  td {
    @include t-td;
  }

}