.topbar{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: var(--glass);
  border-bottom: .5px solid var(--rule);
}

.topbar-inner{
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
}

/* Targets #hero rather than the bar itself: .topbar is sticky, always in frame,
   so an anchor on it would have nowhere to scroll. */
.brand{
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; min-width: 0;
  transition: opacity .2s ease;
}
.brand:hover{ opacity: .72; }
.brand:focus-visible{ outline: 2px solid var(--vermilion); outline-offset: 4px; }
.brand-kanji{
  font-family: var(--font-brush);
  font-size: var(--fs-500);
  line-height: 1;
  color: var(--lime);
}
.brand .name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  letter-spacing: 0;
}

/* Rendered only under html.js — without JS the button would do nothing, so it
   is not shown at all. The negative margin keeps the 44×44 touch target
   (WCAG 2.2 SC 2.5.8) from dictating the bar height, which --topbar-h fixes. */
.nav-toggle{ display: none; }
.js .nav-toggle{
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-block: -6px;
  margin-right: -10px;
  background: none; border: 0; color: var(--ink);
  cursor: pointer;
}
.nav-toggle:focus-visible{ outline: 2px solid var(--vermilion); outline-offset: 0; }

/* Middle bar is the span itself, the outer two are ::before/::after. */
.nav-toggle-icon{ position: relative; }
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content: ""; display: block;
  width: 24px; height: 2px;
  background: currentColor;
  transition: transform .25s ease, background-color .2s ease;
}
.nav-toggle-icon::before{ position: absolute; top: -7px; }
.nav-toggle-icon::after{ position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon{ background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{ transform: translateY(-7px) rotate(-45deg); }

/* Opaque, not the --glass of the bar: the panel covers ~660px of page and at
   .82 alpha the hero copy read straight through the menu labels. */
.nav{
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column;
  padding: 0 var(--gutter) 12px;
  border-bottom: .5px solid var(--rule);
  background: var(--paper);
}
.topbar.is-open .nav{ display: flex; }

.nav a{
  display: flex; align-items: center;
  min-height: 48px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-label); font-weight: 600; font-size: var(--fs-300); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
  position: relative;
  transition: color .2s;
}
.nav a:focus-visible{ outline: 2px solid var(--vermilion); outline-offset: -2px; }

@media (hover: hover){
  .nav a:hover{ color: var(--ink); }
  .nav a::after{
    content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
    background: var(--vermilion); transition: width .25s ease;
  }
  .nav a:hover::after{ width: 100%; }
}

@media (min-width: 760px){
  .js .nav-toggle{ display: none; }
  /* Both selectors get the same declarations, so a panel left open across the
     breakpoint cannot out-specify the desktop reset. */
  .nav,
  .topbar.is-open .nav{
    display: flex; flex-direction: row; gap: 22px;
    position: static; padding: 0; border-bottom: 0;
    background: none;
  }
  .nav a{
    min-height: 0; border-top: 0; padding: 6px 0;
    font-size: var(--fs-200);
  }
}