.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: background-color .4s var(--ease); }
.header.is-scrolled { background: rgb(251 250 248 / .9); backdrop-filter: blur(6px); }
.header__inner { width: 90%; max-width: 1280px; margin: 0 auto; padding: 2rem 0; display: flex; align-items: center; justify-content: space-between; transition: padding .4s var(--ease); }
.header.is-scrolled .header__inner { padding: 1rem 0; }
.header__logo { font-size: 1.75rem; }
.header__nav ul { display: flex; align-items: center; }
.header__nav a { display: block; padding: 1rem; font-family: var(--en-min); font-size: 16px; font-weight: 500; letter-spacing: .04em; line-height: 1.7; }
.header__nav a span { position: relative; display: block; }
.header__nav li:not(.is-reserve) a span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.header__nav li:not(.is-reserve) a:hover span::after { transform: scaleX(1); transform-origin: left; }
.header__nav .is-reserve { margin-left: 1rem; }
.header__nav .is-reserve a { padding: 0 1.5rem; border: 1px solid var(--accent); border-radius: 2em; line-height: 24px; transition: background-color .4s var(--ease), color .4s var(--ease); }
.header__nav .is-reserve a:hover { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.header__reserve, .header__hbg { display: none; }

@media (max-width: 1000px) {
  .header__inner { padding: 1.75rem 0; }
  .header__logo { font-size: 1.6rem; }
  .header__nav { display: none; }
  .header__reserve { display: block; margin-left: auto; margin-right: 1.5rem; padding: 0 1.1rem; border: 1px solid var(--accent); border-radius: 2em; font-family: var(--en-min); font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 20px; }
  .header__hbg { display: block; position: relative; width: 39px; height: 28px; z-index: 120; }
  .header__hbg span { position: absolute; left: 0; width: 100%; height: 1px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s, background-color .3s; }
  .header__hbg span:nth-child(1) { top: 8px; }
  .header__hbg span:nth-child(2) { top: 14px; }
  .header__hbg span:nth-child(3) { top: 20px; }
  .is-menu .header__hbg span { background: var(--on-dark); }
  .is-menu .header__hbg span:nth-child(1) { transform: translateY(6px) rotate(20deg); }
  .is-menu .header__hbg span:nth-child(2) { opacity: 0; }
  .is-menu .header__hbg span:nth-child(3) { transform: translateY(-6px) rotate(-20deg); }
  .is-menu .header { background: none; backdrop-filter: none; }
  .is-menu .header__logo, .is-menu .header__reserve { color: var(--on-dark); border-color: rgb(251 250 248 / .5); }
}

.drawer { position: fixed; inset: 0; z-index: 90; background: var(--dark); color: var(--on-dark); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; display: flex; align-items: center; overflow-y: auto; }
.is-menu .drawer { opacity: 1; visibility: visible; }
.drawer__inner { width: 90%; margin: 0 auto; padding: 7rem 0 3rem; }
.drawer__nav li { opacity: 0; transform: translateY(1rem); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.is-menu .drawer__nav li { opacity: 1; transform: none; }
.is-menu .drawer__nav li:nth-child(2) { transition-delay: 60ms; }
.is-menu .drawer__nav li:nth-child(3) { transition-delay: 120ms; }
.is-menu .drawer__nav li:nth-child(4) { transition-delay: 180ms; }
.is-menu .drawer__nav li:nth-child(5) { transition-delay: 240ms; }
.is-menu .drawer__nav li:nth-child(6) { transition-delay: 300ms; }
.drawer__nav a { display: inline-block; font-family: var(--en-min); font-size: 18px; letter-spacing: .04em; line-height: 36px; }
.drawer__nav .is-reserve { margin-top: 1rem; }
.drawer__nav .is-reserve a { padding: 0 1.5rem; border: 1px solid rgb(251 250 248 / .6); border-radius: 2em; font-size: 19px; line-height: 30px; }
.drawer__insta { display: inline-flex; margin-top: 2rem; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid rgb(251 250 248 / .4); border-radius: 50%; }
.drawer__insta svg { width: 20px; height: 20px; }
.drawer__address { margin-top: 1.5rem; font-size: 12px; line-height: 2; }
@media (min-width: 1001px) { .drawer { display: none; } }