/* Colors  */

:root {
  --white:          #FEFDF9;
  --light:          #F7F4EC;
  --black:          #020630;
  --dark:           #000220;
  --primary:        #020630;
  --secondary:      #020630;
  --light-border:   #F7F4EC;
  --dark-border:    #000220;
}


/* Fonts */

@font-face {
  font-family: 'Bison';
  src: url('../fonts/Bison-Bold.woff2') format('woff2'),
  url('../fonts/Bison-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: 'Barlow', 'Helvetica Neue', Helvetica, 'Open Sans', Arial, sans-serif;
  line-height: 1.4;
  font-weight: 500;
  background-color: var(--white);
}


/* Typography */

:root {
  --h1:   3rem;
  --h2:   2rem;
  --h3:   1.5rem;
  --huge: 4rem;
  --bison: 'Bison', 'Helvetica Neue', Helvetica, 'Open Sans', Arial, sans-serif;
  --barlow: 'Barlow', 'Helvetica Neue', Helvetica, 'Open Sans', Arial, sans-serif;
}
@media (min-width: 992px) {
  :root {
    --h1:   3.5rem;
    --h2:   2.5rem;
    --h3:   1.75rem;
    --huge: 5rem;
  }
}


h1, .h1, h2, .h2, h3, .h3, .huge {
  font-weight: 700;
  font-family: 'Bison', 'Helvetica Neue', Helvetica, 'Open Sans', Arial, sans-serif;
}
h1, .h1 { line-height: 1; }
h2, .h2 { line-height: 1; }
h3, .h3 { line-height: 1; }


.btn-outline {
  box-shadow:0px 0px 0px 3px var(--dark) inset;
  color: var(--dark);
  background: transparent;
  box-sizing: border-box
}

.btn-outline:hover {
  color: var(--white);
  background: var(--dark);
}


/* Nav */

:root {
  --logo-width: 3rem;
}
@media (min-width: 768px) {
  :root {
    --logo-width: 4rem;
  }
}

.nav {
  background-color: var(--white);
}
.main-nav {
  padding-top: 0;
  border-left: 1px solid var(--light-border);
}

.main-nav details {
  border-bottom: 1px solid var(--light-border);
}
.main-nav details[open] {
  margin-bottom: 0;
}
.main-nav details summary {
  position: relative;
  z-index: 2;
  padding: 1.375em 1.5em;
  background-color: var(--black);
  color: var(--white);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--h5);
  transition-property: margin, background;
}
.main-nav details summary:hover {
  background-color: var(--dark);
  color: var(--white);
}
.main-nav details summary:active {
  transition: none;
  opacity: .85;
  color: var(--white);
}

.main-nav details ul li:not(:last-child) {
  border-bottom: 1px solid var(--light-border);
}
.main-nav details ul a {
  font-weight: 700;
  font-size: var(--h5);
  padding: 1.25em 1em 1.25em 3em;
}
.main-nav details ul a:hover {
  background-color: var(--light);
}
.main-nav details ul a:active {
  opacity: .75;
}
.main-nav details .current-menu-item a {
  color: var(--black);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .mobile-nav-btn {
    font-size: var(--h5);
    text-transform: uppercase;
    z-index: 99;
  }

  .main-nav {
    border-left: 0;
  }
}


/* Article nav */

.article-nav .title {
  font-family: var(--bison);
}
.article-next a:hover .title, .article-previous a:hover .title {
  text-decoration: none;
  color: var(--dark);
}

@media (hover: hover) {
  .article-nav a {
    padding: .375rem .75rem 1rem;
    margin: -.375rem -.75rem -1rem;
  }
  .article-nav a:hover {
    background-color: var(--light);
  }
}
.article-nav a:active {
  opacity: .75;
}


.headline {
  font-size: 3rem;
}

@media (min-width: 992px) {
  .headline {
    font-size: 2rem;
  }
}

@media (min-width: 992px) {
  .headline {
    font-size: 3.75rem;
  }
}

@media (min-width: 1200px) {
  .headline {
    font-size: 4.5rem;
  }
}

.barlow {
  font-family: 'Barlow', sans-serif;
}