@layer components {
  .nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-nav);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline: calc(var(--gutter) + var(--brand-size) + 28px) var(--gutter);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: var(--glass-border);
    box-shadow: var(--shadow-soft);
    transition:
      background var(--dur-base) ease,
      height var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) ease;
  }
  .nav.is-scrolled {
    height: var(--nav-h-scrolled);
    background: var(--glass-bg-solid);
  }
  .brand {
    position: absolute;
    left: var(--gutter);
    top: 8px;
    display: grid;
    place-items: center;
    width: var(--brand-size);
    height: var(--brand-size);
    border-radius: 50%;
    color: var(--c-cream-soft);
    background: radial-gradient(circle at 50% 35%, #2d3866c7, #181f38b3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(240, 234, 220, 0.22);
    box-shadow:
      var(--shadow-lift),
      inset 0 1px #ffffff14;
    transition:
      transform var(--dur-base) var(--ease-out),
      width var(--dur-base) var(--ease-out),
      height var(--dur-base) var(--ease-out),
      top var(--dur-base) var(--ease-out);
  }
  .brand:hover {
    transform: translateY(-2px);
  }
  .brand__mark {
    height: 64%;
    width: auto;
  }
  .nav.is-scrolled .brand {
    width: var(--brand-size-scrolled);
    height: var(--brand-size-scrolled);
    top: 5px;
  }
  .menu {
    display: flex;
    align-items: center;
    gap: clamp(34px, 3.4vw, 68px);
    list-style: none;
  }
  .menu a,
  .drawer__list a {
    position: relative;
    display: inline-block;
    font-family: var(--ff-sans);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  .menu a {
    font-size: clamp(12px, 0.8vw, 13.5px);
    color: #ffffffe6;
    padding: 8px 0;
    margin-right: -0.14em;
    transition: color var(--dur-fast) ease;
  }
  .menu a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0.14em;
    bottom: 0;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease-soft);
  }
  .menu a:hover,
  .menu a[aria-current] {
    color: var(--c-white);
  }
  .menu a:hover:after,
  .menu a[aria-current]:after {
    transform: scaleX(1);
  }
  .menu-btn {
    display: none;
  }
  @media (max-width: 760px), (max-aspect-ratio: 4/5) {
    .menu {
      display: none;
    }
    .nav {
      padding-inline: calc(18px + var(--brand-size) + 16px) 20px;
    }
    .brand {
      left: 18px;
      top: 6px;
    }
    .nav.is-scrolled .brand {
      top: 6px;
    }
    .menu-btn {
      display: inline-block;
      color: var(--c-white);
      font-family: var(--ff-sans);
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      padding: 10px 4px 10px 12px;
      margin-right: -0.24em;
      min-height: 44px;
    }
  }
}