/* 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: absolute;
  top: 30px;
  left: 30px;
  z-index: 2;
  color: #fff;
  mix-blend-mode: exclusion;
  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; }

.hero-brand-active .site-header .mark { visibility: hidden; }
.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: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

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

.menu-trigger:disabled {
  pointer-events: none;
}

.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: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.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; }