/* menu.css: top menu (desktop) and side rail (mobile). */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--line-thin) solid var(--black);
  transition: transform .35s var(--ease-soft);
}
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.brand img { width: 36px; height: 36px; }
.brand span { font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.site-nav { display: flex; gap: var(--space-5); }
.site-nav a { font-weight: 700; font-size: 16px; text-decoration: none; padding: var(--space-1) 0; border-bottom: var(--line-bold) solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--black); }

@media (max-width: 760px) {
  .site-header {
    inset: 0 auto 0 0; width: 56px; height: 100svh;
    flex-direction: column; justify-content: flex-start; gap: var(--space-5);
    padding: var(--space-3) 0; border-bottom: 0; border-right: var(--line-thin) solid var(--black);
  }
  .site-header.is-hidden { transform: translateX(-100%); }
  .brand span { display: none; }
  .site-nav { flex-direction: column; gap: var(--space-3); align-items: center; }
  .site-nav a { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 15px; padding: var(--space-2) var(--space-1); min-width: 44px; text-align: center; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: transparent; border-left: var(--line-bold) solid var(--black); }
}