/* Hero only. Portfolio and the first white section retain their original styles. */
.hero {
  height: 98vh;
  height: 98svh;
  min-height: 0;
  max-height: none;
  background: #171a17;
}
#hero-media { inset: 0; }
.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero::after { background: rgb(0 0 0 / 18%); }
.navigation {
  align-items: flex-start;
  padding-top: max(28px, env(safe-area-inset-top));
}
.navigation .wordmark {
  font-size: clamp(16px, 5vw, 21px);
  transform: scale(1.18);
  transform-origin: left center;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.5;
  white-space: nowrap;
}
.navigation nav { font-size: 12px; line-height: 1.5; }
.navigation nav a { padding: 3px 0 12px; }
.hero .hero-descriptor {
  position: absolute;
  left: var(--gutter);
  right: calc(var(--gutter) + 96px);
  bottom: max(22px, env(safe-area-inset-bottom));
  padding-block: 12px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero .hero-descriptor { border: 0; }
.hero .hero-descriptor::before,
.hero .hero-descriptor::after { content: none; display: none; }
.hero-scroll {
  bottom: max(22px, env(safe-area-inset-bottom));
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
}
.hero-scroll { display: flex; gap: 14px; align-items: center; padding-block: 12px; }
@media (max-width: 700px) {
  .navigation { gap: 16px; padding-top: max(22px, env(safe-area-inset-top)); }
  .navigation nav { display: grid; grid-template-columns: auto auto; gap: 0 18px; }
  .navigation nav a:nth-child(2), .navigation nav a:nth-child(3) { display: block; }
  .navigation nav a { padding: 0 0 14px; }
  .hero .hero-descriptor { font-size: 12px; letter-spacing: .09em; }
}