/* Shared SITE-SHELL MENU; TOP heading reveal remains page-specific below. */
.site-shell-enabled .site-header__inner {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.site-shell-enabled .desktop-nav { grid-column: 2; }
.site-shell-enabled .desktop-actions { grid-column: 3; }

.site-shell-enabled .menu-button--top-motion {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  align-content: center;
  justify-items: center;
  gap: 6px;
  width: 76px;
  min-width: 44px;
  height: 60px;
  min-height: 44px;
  padding: 6px 8px;
  color: var(--at-ink);
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.site-shell-enabled .menu-button--top-motion:focus-visible {
  outline: 2px solid var(--at-coral-deep);
  outline-offset: 2px;
}

.menu-button__label {
  display: block;
  font: 500 9px/1 var(--at-reference-sans, var(--at-sans));
  letter-spacing: .14em;
}

.menu-button__lines {
  position: relative;
  display: block;
  width: 28px;
  height: 17px;
  animation: top-menu-nudge 18s ease-in-out infinite;
  transform-origin: center;
}

.menu-button__line {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  background: currentColor;
  transform-origin: center;
  transition: top .3s ease, bottom .3s ease, opacity .2s ease, transform .3s ease;
}

.menu-button__line--top { top: 1px; }
.menu-button__line--middle { top: 8px; }
.menu-button__line--bottom { bottom: 1px; }

.site-shell-enabled.is-menu-open .menu-button__lines { animation: none; transform: none; }
.site-shell-enabled.is-menu-open .menu-button__line--top { top: 8px; transform: rotate(45deg); }
.site-shell-enabled.is-menu-open .menu-button__line--middle { opacity: 0; }
.site-shell-enabled.is-menu-open .menu-button__line--bottom { top: 8px; bottom: auto; transform: rotate(-45deg); }

@keyframes top-menu-nudge {
  0%, 33%, 38%, 100% { transform: translateX(0); }
  34.5% { transform: translateX(1.5px); }
  36% { transform: translateX(-1px); }
}

.site-shell-enabled .mobile-drawer {
  position: fixed;
  z-index: 130;
  inset: 0 0 0 auto;
  display: block;
  width: min(100vw, 560px);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  padding: clamp(94px, 11vh, 124px) clamp(24px, 4vw, 44px) max(28px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--at-ink);
  border-left: 1px solid var(--at-line);
  border-bottom: 1px solid var(--at-line);
  border-radius: 0 0 0 54px;
  background: rgb(var(--at-air-rgb, 250 248 243));
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 100% round 0 0 0 54px);
  transform: none;
  will-change: clip-path;
  transition:
    clip-path .48s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .48s;
}

/* A real sibling layer is more reliable than body::before on mobile browsers. */
.site-shell-enabled .mobile-menu-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(43, 36, 32, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility 0s linear .24s;
}

.site-shell-enabled.is-menu-open .mobile-menu-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.site-shell-enabled .mobile-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0 round 0 0 0 54px);
  transform: none;
  transition:
    clip-path .64s cubic-bezier(.22, 1, .36, 1),
    visibility 0s;
}

.site-shell-enabled.is-menu-open .site-header,
.site-shell-enabled.is-menu-closing .site-header { z-index: 140; }
.home .mobile-drawer__head { padding-bottom: 22px; }
.home .mobile-drawer__head strong { font-weight: 400; letter-spacing: .15em; }
.site-shell-enabled .mobile-menu { display: grid; margin-top: 20px; }
.site-shell-enabled .mobile-menu__group { border-bottom: 1px solid var(--at-line); }
.site-shell-enabled .mobile-menu__row { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; }
.site-shell-enabled .mobile-menu__parent,
.site-shell-enabled .mobile-menu__store { min-height: 62px; text-decoration: none; }
.site-shell-enabled .mobile-menu__parent {
  display: flex;
  align-items: center;
  padding: 12px 4px;
  font-size: 17px;
  letter-spacing: .09em;
}
.site-shell-enabled .mobile-menu__toggle {
  display: grid;
  place-items: center;
  width: 52px;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.site-shell-enabled .mobile-menu__toggle > span[aria-hidden="true"] { font: 300 24px/1 var(--at-sans); transition: transform .25s ease; }
.site-shell-enabled .mobile-menu__group.is-open .mobile-menu__toggle > span[aria-hidden="true"] { transform: rotate(180deg); }
.site-shell-enabled .mobile-menu__children { display: grid; gap: 0; margin: 0; padding: 0 0 17px 18px; list-style: none; }
.site-shell-enabled .mobile-menu__children[hidden] { display: none; }
.site-shell-enabled .mobile-menu__children a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 4px;
  color: var(--at-muted);
  font-size: 14px;
  text-decoration: none;
}
.site-shell-enabled .mobile-menu__children a::before { content: ""; width: 18px; height: 1px; margin-right: 12px; background: var(--at-gold); opacity: .62; }
.site-shell-enabled .mobile-menu__group--site-map .mobile-menu__row { grid-template-columns: minmax(0, 1fr) 52px; }
.site-shell-enabled .mobile-menu__group--site-map .mobile-menu__parent { color: var(--at-brown); }
/* Align the submenu's dash with the second glyph (ぬ) in its linked parent label. */
.site-shell-enabled .mobile-menu__group--site-map .mobile-menu__children {
  padding-bottom: 12px;
  padding-left: calc(4px + 1.09em);
  font-size: 17px;
}
.site-shell-enabled .mobile-menu__group--site-map .mobile-menu__children a[aria-current="page"] { color: var(--at-brown); font-weight: 700; }
.site-shell-enabled .mobile-menu__group--site-map .mobile-menu__reservation a { color: #9a594d; }
.site-shell-enabled .mobile-menu__group--site-map .mobile-menu__reservation a::before { height: 2px; background: #d98289; opacity: 1; }
.site-shell-enabled .mobile-menu__store {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--at-line);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .09em;
}
.site-shell-enabled .mobile-menu__store .mobile-menu__store-icon { margin-right: 11px; }
/* Keep mobile browsers from painting their native touch flash over menu rows. */
.site-shell-enabled .mobile-drawer a,
.site-shell-enabled .mobile-drawer button { -webkit-tap-highlight-color: transparent; }

.site-shell-enabled .mobile-menu a:focus-visible,
.site-shell-enabled .mobile-menu button:focus-visible { outline: 2px solid var(--at-coral-deep); outline-offset: 3px; }

.site-shell-enabled .mobile-menu__row,
.site-shell-enabled .mobile-menu__store,
.site-shell-enabled .mobile-menu__children > li > a {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .24s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}

.site-shell-enabled .mobile-drawer.is-open.is-items-entered .mobile-menu__row,
.site-shell-enabled .mobile-drawer.is-open.is-items-entered .mobile-menu__store,
.site-shell-enabled .mobile-drawer.is-open.is-items-entered .mobile-menu__children > li > a {
  opacity: 1;
  transform: none;
  transition-delay: calc(70ms + var(--menu-stagger-index, 0) * 18ms);
}

.site-shell-enabled .mobile-menu a:focus-visible,
.site-shell-enabled .mobile-menu button:focus-visible { outline-offset: 3px; }

/* TOP heading reveal: the mask keeps layout fixed while the title is revealed left-to-right. */
.top-heading-reveal__mask {
  display: block;
  overflow: hidden;
}

.top-heading-reveal__text { display: block; }
.honoca-main-intro #honoca-main-intro-title > span { display: block; }

.has-top-heading-reveal [data-top-heading-reveal] .top-heading-reveal__label {
  opacity: 0;
  transform: translate3d(-7px, 0, 0);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

.has-top-heading-reveal [data-top-heading-reveal] .top-heading-reveal__text {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transform: translate3d(-14px, 0, 0);
  transition:
    clip-path 1.44s cubic-bezier(.22, 1, .36, 1) .1s,
    opacity .56s ease .1s,
    transform 1.44s cubic-bezier(.22, 1, .36, 1) .1s;
}

.has-top-heading-reveal [data-top-heading-reveal].is-visible .top-heading-reveal__label {
  opacity: 1;
  transform: none;
}

.has-top-heading-reveal [data-top-heading-reveal].is-visible .top-heading-reveal__text {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: none;
}

@media (max-width: 1060px) {
  .site-shell-enabled .site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto; }
  .site-shell-enabled .desktop-nav { display: none; }
  .site-shell-enabled .desktop-actions { grid-column: 2; justify-self: end; }
  .site-shell-enabled .menu-button--top-motion { grid-column: 3; }
}

@media (max-width: 720px) {
  .site-shell-enabled .site-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .site-shell-enabled .site-brand { grid-column: 1; justify-self: center; }
  .site-shell-enabled .menu-button--top-motion {
    position: absolute;
    top: 50%;
    right: -19px;
    grid-column: auto;
    grid-row: auto;
    width: 72px;
    height: 62px;
    transform: translateY(-50%);
  }

  .site-shell-enabled .mobile-drawer {
    inset: 0 0 max(34px, env(safe-area-inset-bottom)) 26px;
    width: auto;
    height: auto;
    max-height: none;
    padding-right: 24px;
    padding-left: 38px;
  }

  .site-shell-enabled .mobile-menu__parent,
  .site-shell-enabled .mobile-menu__store {
    min-height: 58px;
    font-size: calc(17px + 1pt);
  }

  .site-shell-enabled .mobile-menu__toggle { min-height: 48px; }

  .site-shell-enabled .mobile-menu__group--site-map .mobile-menu__children { font-size: calc(17px + 1pt); }

  .site-shell-enabled .mobile-menu__children a {
    position: relative;
    min-height: 42px;
    padding: 8px 4px 8px 0;
    font-size: calc(14px + 1pt);
  }

  .site-shell-enabled .mobile-menu__parent,
  .site-shell-enabled .mobile-menu__store { font-family: var(--at-honoka-mincho, "Honoka Shin Mincho", "Yu Mincho", serif); }
}

@media (prefers-reduced-motion: reduce) {
  .site-shell-enabled .menu-button__lines { animation: none; }
  .site-shell-enabled .mobile-drawer,
  .site-shell-enabled .mobile-drawer.is-open {
    clip-path: none;
    transform: none;
    transition: none;
  }

  .site-shell-enabled .mobile-drawer:not(.is-open) { visibility: hidden; }
  .site-shell-enabled .mobile-drawer.is-open { visibility: visible; opacity: 1; }
  .site-shell-enabled .mobile-menu__row,
  .site-shell-enabled .mobile-menu__store,
  .site-shell-enabled .mobile-menu__children > li > a,
  .has-top-heading-reveal [data-top-heading-reveal] .top-heading-reveal__label,
  .has-top-heading-reveal [data-top-heading-reveal] .top-heading-reveal__text {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* Keep the TOP label and line group clear of the shared hamburger reset. */
.site-shell-enabled .menu-button--top-motion > .menu-button__label {
  width: auto;
  height: auto;
  margin: 0;
  background: none;
}

.site-shell-enabled .menu-button--top-motion > .menu-button__lines {
  width: 28px;
  height: 17px;
  margin: 0;
  background: none;
}

/* Keep a BFCache-restored TOP from replaying the drawer's closing transition. */
.site-shell-enabled.is-menu-history-resetting .mobile-drawer,
.site-shell-enabled.is-menu-history-resetting .mobile-menu-backdrop,
.site-shell-enabled.is-menu-history-resetting .menu-button__line {
  transition: none;
}

.site-shell-enabled.is-menu-history-resetting .menu-button__lines {
  animation: none;
}
/* The TOP fixed tab lands just below the two-line site signpost. */
#top-storybook-heading { scroll-margin-top: 132px; }
@media (min-width: 721px) {
  #top-storybook-heading { scroll-margin-top: 147px; }
}