/* Navigation sits directly on the hero photograph. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--canvas);
}
.site-header .brand-caption { color: #d2d9dc; }
.site-header .brand-divider { color: var(--yellow); }
.site-header .instagram,
.site-header .menu-toggle { color: var(--canvas); }
.site-header .menu-lines { border-color: var(--canvas); }
.hero { padding-top: 100px; }
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,21,28,.82), rgba(13,21,28,.3) 130px, transparent 260px);
  pointer-events: none;
}
@media (max-width: 950px) {
  .hero { padding-top: 86px; }
  .site-header nav {
    background: var(--navy);
    color: var(--canvas);
    border-bottom-color: #44505a;
  }
}
@media (max-width: 620px) {
  .hero { padding-top: 83px; }
}