.mobile-navigation[open]{display:none}

@media(max-width:760px){
  .site-header .menu-button{
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:0 13px;
    border:1px solid #53674f4d;
    border-radius:999px;
    background:#f7f4e9;
    color:#253b33;
    font-size:13px;
    font-weight:600;
  }
  .cinematic-header .menu-button{background:#17251de6;color:#fff2df;border-color:#fae9cf66}
  .menu-icon{position:relative;display:block;width:15px;height:12px;flex:none}
  .menu-icon::before,.menu-icon::after{
    content:'';
    position:absolute;
    inset-inline:0;
    top:3px;
    height:1px;
    background:currentColor;
  }
  .menu-icon::after{top:8px}
  .mobile-menu-close .menu-icon::before,.mobile-menu-close .menu-icon::after{top:5px;transform:rotate(45deg)}
  .mobile-menu-close .menu-icon::after{transform:rotate(-45deg)}

  .mobile-navigation[open]{
    display:block;
    inset:auto max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    width:auto;
    max-width:440px;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));
    margin:0 auto;
    padding:0;
    overflow:auto;
    overscroll-behavior:contain;
    border:1px solid #c7ac77;
    border-radius:24px;
    background:#f7f2e6;
    color:#24392b;
    box-shadow:0 18px 70px #101a1166;
  }
  .mobile-navigation::backdrop{background:#101d17a8;backdrop-filter:blur(3px)}
  .mobile-menu-panel{padding:0 clamp(16px,5vw,24px) 16px}
  .mobile-menu-top{
    position:sticky;
    top:0;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 0 8px;
    border-bottom:3px double #c8b38b;
    background:#f7f2e6;
  }
  .mobile-menu-top h2{font-size:36px;line-height:1.05}
  .mobile-menu-close{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:0 10px;
    border:1px solid #b6bda8;
    border-radius:999px;
    background:transparent;
    font-size:13px;
    font-weight:600;
  }
  .mobile-menu-links>a{
    display:flex;
    align-items:center;
    min-height:50px;
    padding:7px 11px;
    border-bottom:1px solid #cfc5ad;
    font:clamp(22px,6vw,30px)/1.15 Georgia,serif;
    letter-spacing:-.035em;
    scroll-margin-top:68px;
  }
  .mobile-menu-links>a[aria-current=page]{background:#e6e9d9;border-inline-start:2px solid #647653;padding-inline-start:9px}
  .mobile-menu-links>a:active,.mobile-menu-close:active{background:#dce3d0}
  .mobile-menu-panel [aria-current=page]{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;text-decoration-skip-ink:none}
  .mobile-menu-footer{padding-top:12px}
  .mobile-menu-rsvp{
    display:grid;
    place-items:center;
    min-height:48px;
    border:1px solid #263c2e;
    border-radius:7px;
    background:#263c2e;
    color:#fff4dd;
    font-weight:600;
  }
  .mobile-menu-rsvp:active{background:#3d5542}
}

@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .mobile-navigation[open]{animation:mobile-menu-enter .2s ease-out}
  @keyframes mobile-menu-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
}