/* navigation */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 78px;
  pointer-events: none;
}

.nav-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
  pointer-events: auto;
}

.mark {
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 52;
  color: #fff;
  mix-blend-mode: exclusion;
  pointer-events: auto;
  font-family: var(--sans);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 780;
  line-height: .88;
  letter-spacing: -.085em;
  text-transform: none;
  transition: opacity .167s linear, transform .333s cubic-bezier(.15,0,.15,1);
}

.mark::before { display: none; }

.mark:hover { opacity: .72; transform: translateY(-1px); }

.right-tools {
  position: absolute;
  top: 30px;
  right: var(--pad);
  z-index: 2;
  display: flex;
  gap: 18px;
  align-items: center;
  color: rgba(255,255,255,.72);
  pointer-events: auto;
  font-family: var(--mono);
  font-size: var(--type-utility-size);
  line-height: var(--type-utility-line);
  letter-spacing: .07em;
  text-transform: uppercase;
  transform-origin: left center;
  transition: opacity .24s linear, transform .42s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
}

.menu-trigger {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.menu-dot {
  display: grid;
  width: 14px;
  height: 14px;
  grid-template-columns: repeat(2, 3px);
  grid-auto-rows: 3px;
  gap: 3px;
  place-content: center;
}

.menu-dot span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transition: background-color .167s linear, transform .333s cubic-bezier(.15,0,.15,1);
}

.menu-trigger:hover .menu-dot span,
.site-header.nav-open .menu-dot span {
  background: var(--accent);
}

.site-header.nav-open .menu-dot span:nth-child(1) { transform: translate(2px, 2px); }
.site-header.nav-open .menu-dot span:nth-child(2) { transform: translate(-2px, 2px); }
.site-header.nav-open .menu-dot span:nth-child(3) { transform: translate(2px, -2px); }
.site-header.nav-open .menu-dot span:nth-child(4) { transform: translate(-2px, -2px); }

.nav {
  position: absolute;
  top: 38px;
  left: 130px;
  right: 210px;
  z-index: 1;
  display: flex;
  gap: clamp(22px, 3.2vw, 56px);
  align-items: center;
  color: var(--soft);
  font-family: var(--mono);
  font-size: var(--type-utility-size);
  font-weight: var(--weight-interface);
  line-height: var(--type-utility-line);
  letter-spacing: .08em;
  text-transform: uppercase;
  transform-origin: left center;
  transition: opacity .24s linear, transform .42s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
}

@media (min-width: 641px) {
  .site-header.nav-collapsed .nav-shell {
    pointer-events: none;
  }

  .site-header.nav-collapsed .nav,
  .site-header.nav-collapsed .right-tools {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-36px) scale(.96);
    transition: opacity .24s linear, transform .42s cubic-bezier(.22,1,.36,1), visibility 0s linear .42s;
  }

  .site-header.nav-collapsed .right-tools {
    transform: translateX(-20px) scale(.96);
  }
}

@media (min-width: 641px) and (prefers-reduced-motion: reduce) {
  .nav,
  .right-tools {
    transition: none;
  }
}

.nav a {
  position: relative;
  opacity: .78;
  transition: color .167s linear, opacity .167s linear, transform .167s linear;
}

.nav a:hover {
  color: var(--accent);
  opacity: 1;
  transform: translateY(-1px);
}

.nav-text span + span { display: none; }