/* desktop: no classic topbar */
.topbar{
  display:none;
}

.footer{
  margin-top: 56px;
  border-top: 1px solid var(--hair);
  background: rgba(246,243,238,.55);
}

.footer__inner{
  min-height: 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  color: var(--muted);
  font-size: 12px;
}

.footer__link:hover{color: var(--ink)}
.footer__sep{opacity:.5}

/* mobile header */
.mobileHeader{
  display:none;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243,241,236,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair);
}

.mobileHeader__inner{
  min-height: 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.mobileHeader__brand{
  letter-spacing: .22em;
  font-size: 14px;
  text-transform: uppercase;
}

.navToggle{
  display:none;
  width: 54px;
  height: 54px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: rgba(255,255,255,.42);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 6px;
}

.navToggle span{
  width: 18px;
  height: 1px;
  background: rgba(18,18,18,.65);
  display:block;
}

.mobileNav{
  display:none;
  padding: 8px 18px 16px;
  flex-direction:column;
  gap: 4px;
}

.mobileNav a{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 0;
  border-bottom: 1px solid rgba(18,18,18,.06);
}

.mobileNav a:hover{
  color: var(--ink);
}

body.nav-open .mobileNav{
  display:flex;
}

@media (max-width: 860px){
  .mobileHeader{
    display:block;
  }

  .navToggle{
    display:flex;
  }
}