/*
 * Let the visitor enter the painting without a top bar.
 * Reveal the site's navigation only when the first content section enters.
 * The header remains fixed and independent of the scroll-locked artwork.
 */
body > .site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  overflow: visible;
  background: linear-gradient(180deg, rgba(15,30,33,.97), rgba(15,30,33,.91));
  box-shadow: 0 9px 38px rgba(9, 22, 24, .12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -105%, 0);
  pointer-events: none;
  /* Visibility must be reliable even in browsers that throttle or freeze
     CSS transition clocks in background tabs: never depend on animation to
     get the header from hidden to visible. */
  transition: none;
}
html.content-nav-visible body > .site-header {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
body > .site-header .topline,
body > .site-header .nav {
  background: transparent;
}
body > .site-header .nav {
  border-bottom-color: rgba(238, 233, 221, .20);
}
body > .site-header .topline {
  border-bottom-color: rgba(238, 233, 221, .11);
}
/* Hash/anchor navigation leaves room for the newly fixed header. */
#work, #journal, #lab, #about, #contact {
  scroll-margin-top: 134px;
}
@media (max-width: 720px) {
  #work, #journal, #lab, #about, #contact {
    scroll-margin-top: 113px;
  }
  body > .site-header .navlinks {
    box-shadow: 0 15px 25px rgba(4,15,18,.30);
  }
}