/* Keep the mobile menu attached to the sticky site header. */
.brand-logo {
  width: 58px;
  height: 44px;
  flex: 0 0 auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.about-visual > img {
  object-position: center 58%;
}

.hero-image > img {
  object-position: center 58%;
}

@media (max-width: 960px) {
  .site-header {
    isolation: isolate;
  }

  .nav-wrap {
    position: relative;
  }

  .main-nav {
    position: absolute;
    inset: auto 0 auto 0;
    top: 100%;
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    padding: 22px 20px 28px;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 42px rgba(16, 47, 59, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }

  .main-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .brand {
    gap: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.11em;
  }

  .brand-logo {
    width: 48px;
    height: 38px;
  }

  .main-nav {
    max-height: calc(100dvh - 74px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav {
    transition: none;
  }
}