.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);

  padding:
    .85rem
    max(24px,calc((100vw - var(--container)) / 2));

  border-bottom:1px solid rgba(255,255,255,.08);

  background:rgba(7,8,12,.42);

  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);

  box-shadow:
    0 12px 40px rgba(0,0,0,.24);

  isolation:isolate;
}

.brand,.nav-links,.nav-actions{display:flex;align-items:center}
.brand{gap:.65rem;font-weight:800}
.brand-mark{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;color:#050507;
  font-family:var(--font-display);
  font-size:1.35rem;
}
.nav-links{gap:1.35rem;color:var(--color-muted);font-size:var(--text-sm)}
.nav-actions{gap:.7rem}
.ghost-link{color:var(--color-muted);font-weight:700;font-size:var(--text-sm)}

@media(max-width:820px){
  .nav-links,.ghost-link{display:none}
}