@media (max-width: 820px) {
  body.menu-open { overflow: hidden; }

  .menu-button { position: relative; z-index: 102; cursor: pointer; }
  .menu-button i { transition: transform .24s ease, opacity .18s ease; }
  .menu-button.is-open i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-button.is-open i:nth-child(2) { opacity: 0; }
  .menu-button.is-open i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    z-index: 99;
    inset: 68px 0 0;
    display: grid;
    align-items: start;
    padding: 56px 24px;
    background: #01172f;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .22s ease, transform .22s ease;
  }

  .mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-menu nav { display: grid; gap: 0; }
  .mobile-menu nav a { padding: 20px 0; border-bottom: 1px solid rgba(242, 235, 224, .2); font: 500 29px/1 "Playfair Display", Georgia, serif; text-transform: none; }
  .mobile-menu nav .mobile-home { margin: 0 0 24px; padding: 18px 20px; border: 1px solid rgba(239, 247, 255, .42); background: #1a3047; color: #eff7ff; font: 500 12px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
  .mobile-menu nav .mobile-reserve { margin-top: 30px; border: 1px solid rgba(242, 235, 224, .5); padding: 18px; font: 12px/1 "DM Mono", monospace; text-align: center; text-transform: uppercase; }
  .mobile-reserve span { color: #c57a31; }
}