/* Define custom fonts */
@font-face {
  font-family: 'Epilogue';
  src: url('../fonts/Epilogue-Light.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* Fonts */

:root {
  --sans:   'Epilogue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif:  'Playfair Display', Georgia, serif;
  --skew:   -12deg;
}

* {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
html {
  font-family: var(--sans);
  color: var(--black);
  background-color: var(--white);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  html {
    font-size: 19px;
  }
}
@media (min-width: 1560px) {
  html {
    font-size: 20px;
  }
}


/* Typography */

:root {
  --h1:   1.875rem;
  --h2:   1.5rem;
  --h3:   1.25rem;
  --h4:   1.125rem;
  --h5:   .875rem;
  --h6:   .8125rem;
  --large:2.125rem;
  --huge: 3rem;
  --huger: 3rem;
}
@media (min-width: 768px) {
  :root {
    --h1:   2.5rem;
    --h2:   2.125rem;
    --h3:   1.5rem;
    --large:3rem;
    --huge: 3.5rem;
    --huger: 4.5rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --h1:   3rem;
    --h2:   2.5rem;
    --h3:   2rem;
    --large:3.5rem;
    --huge: 4rem;
    --huger: 5.5rem;
  }
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
}
h1 { margin-top: .5em; margin-bottom: 2rem; }
h2 { margin-top: .875em; margin-bottom: 1.5rem; }
h3 { margin-top: 1em; margin-bottom: 1rem; }
h4 { margin-top: .75em; margin-bottom: .25em; }
h5, h6 { margin-bottom: .25em; margin-top: .5em; }

h1, .h1 { font-weight: 400; font-size: var(--h1); line-height: 1.05; }
h2, .h2 { font-weight: 400; font-size: var(--h2); line-height: 1.05; }
h3, .h3 { font-weight: 400; font-size: var(--h3); line-height: 1.1; }
h4, .h4 { font-weight: 300; font-size: var(--h4); font-family: var(--sans); line-height: 1.25; }
h5, .h5 { font-weight: 300; font-size: var(--h5); font-family: var(--sans); }
h6, .h6 { font-weight: 300; font-size: var(--h6); font-family: var(--sans); }
.large  { font-size: var(--large); line-height: 1; }
.huge   { font-size: var(--huge); line-height: 1; }
.huger  { font-size: var(--huger); line-height: 1; }

@media (max-width: 768px) {
  .ignore-breaks br {
    display: none;
  }
}

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

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

cite {
  font-style: normal;
}

.bold               { font-weight: 700 }
.regular            { font-weight: 400 }
.light              { font-weight: 300 }
.skew, em, .italic  { font-style: normal; display: inline-block; transform: skewX(var(--skew)); }
.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 }

.sans  { font-family: var(--sans); font-weight: 300; }
.serif { font-family: var(--serif) }


/* Globals */

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
}
a:active {
  opacity: .75;
  transform: translateY(1px);
}