/* ---------- header: clear over the hero, solid after it ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  padding: 14px 0;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
  border-bottom: 1px solid transparent;
}
.bar.solid {
  background: rgba(20, 19, 27, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--line);
}
.bar .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bar-logo {
  display: block;
  height: 22px;
  width: auto;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.bar.solid .bar-logo,
.bar a:focus-visible .bar-logo {
  opacity: 1;
  transform: none;
}

.bar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}