/* <site-nav> styles */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: 64px;
  display: flex; align-items: center;
  transition: background .4s var(--ease), box-shadow .4s, color .4s;
}
.nav.scrolled {
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 1px 0 var(--line);
}
.nav .wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 36px; height: 36px; flex-shrink: 0; display: block; }
.brand-mark img { width: auto; height: 100%; display: block; }
.brand-word { height: 22px; width: auto; display: block; }
.brand-mark { width: auto; height: 26px; }
.brand-name { font-family: var(--font-head); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }