.mobile-menu-toggle { display: none; }
body.mobile-menu-scroll-locked { overflow: hidden; }

dialog.mobile-nav-dialog {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 86vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
  border: 0;
  border-left: 1px solid #b1a18066;
  border-radius: 20px 0 0 20px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fcfaf5;
  color: #2e372e;
  box-shadow: -18px 0 70px #15251b33;
}
dialog.mobile-nav-dialog:not([open]) { display: none; }
dialog.mobile-nav-dialog[open] {
  animation: mobile-drawer-enter .22s cubic-bezier(.2, .7, .3, 1) both;
}
dialog.mobile-nav-dialog::backdrop {
  background: #14211dcc;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: mobile-backdrop-enter .18s ease-out both;
}
.mobile-nav-heading {
  padding: max(18px, env(safe-area-inset-top)) 20px 22px;
  background: #2e372e url('assets/identity-dark.svg') center / 560px auto;
  border-bottom: 2px solid #b1a180;
}
.mobile-nav-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mobile-nav-heading h2 {
  margin: 0;
  color: #f5ecda;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
.mobile-nav-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 10px;
  color: #f5ecda;
  background: #fcfaf50c;
  border: 1px solid #b1a18070;
  border-radius: 11px;
}
.mobile-nav-close svg, .mobile-nav-link-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}
.mobile-nav-logo {
  display: block;
  width: 176px;
  height: 66px;
  margin: 14px auto 0;
  object-fit: contain;
}
.mobile-nav-links {
  display: grid;
  gap: 9px;
  padding: 24px 18px 18px;
}
.mobile-nav-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid #b1a18038;
  border-radius: 12px;
  color: #2e372e;
  background: #ffffff90;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.mobile-nav-link-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #507051;
  background: #50705112;
}
.mobile-nav-link-arrow { display: flex; margin-right: auto; color: #9a8c6b; }
.mobile-nav-link-arrow svg { width: 16px; height: 16px; }
.mobile-nav-links a:hover { background: #5070510d; border-color: #b1a18099; }
.mobile-nav-caption {
  margin: 0 20px;
  padding-top: 18px;
  border-top: 1px solid #b1a18045;
  color: #777b6c;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
}
.mobile-nav-dialog a:focus-visible, .mobile-nav-close:focus-visible {
  outline: 2px solid #b1a180;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  header .nav.mobile-menu-ready {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 77px;
    padding: 8px 18px;
  }
  .nav.mobile-menu-ready .event-brand > img { width: 175px; height: 60px; }
  .nav.mobile-menu-ready > nav { display: none; }
  .nav.mobile-menu-ready > .mobile-menu-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 10px;
    border: 1px solid #b1a18080;
    border-radius: 10px;
    color: #f5ecda;
    background: #fcfaf50c;
  }
  .mobile-menu-toggle svg { display: block; width: 20px; height: 20px; }
  .mobile-menu-toggle:focus-visible { outline: 2px solid #d8cba8; outline-offset: 4px; }
}
@keyframes mobile-drawer-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes mobile-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.mobile-nav-dialog[open], dialog.mobile-nav-dialog::backdrop { animation: none; }
}