/* =Navigation Link
  ----------------------------------------------- */
  header {
    position: relative;
    z-index: 5;
  }
  @media (min-width: 1040em) { /* @wide-enough-for-positioned-navigation-header-figure */
    .home header {
      z-index: 6;
    }
  }
  main > h1:first-child,
  .header-figure {
    position: relative;
    z-index: 5;
  }
  .nav-link {
    position: fixed;
    top: 0;
    right: 0;
    margin: 0;
  }
  .nav-link a {
    display: block;
    padding: 1.125em;
  }
  .nav-link svg {
    width: 1.5em;
    height: 1.5em;
    display: block;
  }
  .nav-link svg path,
  .nav-link svg polygon {
    fill: currentColor;
  }


  @keyframes nav-fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }


  @supports (position: sticky) or (position: -webkit-sticky) {
    @media (min-width: 19em) { /* @small-screens */
      .transition-header-in header {
        animation: nav-fade-in 0.2s both;
      }
      .has-active-nav header,
      .header-not-visible header {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        left: 0;
        transform: translateY(calc(-100% + 0.375em));
      }

      .nav-link {
        position: absolute;
        top: auto;
        bottom: 2px;
        left: auto;
        right: 0;
        transform: translateY(100%);
      }
      .header-not-visible .nav-link {
        display: block !important;
      }
      .has-active-nav header {
        transform: none;
        z-index: 4;
      }
      .has-active-nav header .open {
        display: none;
      }
      .has-active-nav header .close {
        display: block !important;
      }
      .animate-header header {
        transition: transform 0.2s;
      }
      .nav-link.action a:hover,
      .nav-link.action a:active,
      .nav-link.action a:focus {
        background-color: var(--strawberry);
        color: var(--banana);
      }
      .strawberry .nav-link a:hover,
      .strawberry .nav-link a:active,
      .strawberry .nav-link a:focus {
        background-color: var(--strawberry);
        color: var(--banana);
      }
      .blueberry .nav-link a:hover,
      .blueberry .nav-link a:active,
      .blueberry .nav-link a:focus {
        background-color: var(--blueberry);
        color: var(--banana);
      }
      .lime .nav-link a:hover,
      .lime .nav-link a:active,
      .lime .nav-link a:focus {
        background-color: var(--lime);
        color: var(--strawberry);
      }
      .tangerine .nav-link a:hover,
      .tangerine .nav-link a:active,
      .tangerine .nav-link a:focus {
        background-color: var(--tangerine);
        color: var(--strawberry);
      }
      .banana .nav-link a:hover,
      .banana .nav-link a:active,
      .banana .nav-link a:focus {
        background-color: var(--banana);
        color: var(--strawberry);
      }
      .timeline.banana .nav-link a,
      .timeline.banana.has-active-nav header,
      .timeline.banana.header-not-visible header {
        background-color: var(--snow);
        color: var(--strawberry);
      }
      .timeline.banana .nav-link a {
        border-color: var(--snow);
      }
      .timeline.banana.has-active-nav header a,
      .timeline.banana.header-not-visible header a,
      .timeline.banana.has-active-nav header h2,
      .timeline.banana.header-not-visible header h2 {
        color: inherit;
      }
      .timeline.banana.has-active-nav header a:hover,
      .timeline.banana.has-active-nav header a:active,
      .timeline.banana.has-active-nav header a:focus,
      .timeline.banana.header-not-visible header a:hover,
      .timeline.banana.header-not-visible header a:active,
      .timeline.banana.header-not-visible header a:focus {
        background-color: var(--snow);
        color: var(--banana);
      }
      .timeline.banana.has-active-nav header strong a,
      .timeline.banana.header-not-visible header strong a {
        background-color: var(--secondary-color, black);
        border-color: var(--secondary-color, black);
        color: var(--snow);
      }
    }
    @media (min-width: 1040em) { /* @wide-enough-for-positioned-navigation-header-figure */
      .home.has-active-nav header,
      .home.header-not-visible header {
        background-color: var(--strawberry);
        position: fixed;
        z-index: 4;
      }
    }
  }