.mobile-menu{display:none}
@media(max-width:760px){
 body>header>nav{display:none}
 .mobile-menu{display:block;position:relative;line-height:1.4;color:#ead4a3}
 .mobile-menu summary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:9px 15px;border:1px solid #d6b16e45;border-radius:24px;background:#ffffff08;font:400 14px/1.4 Oswald,Arial,sans-serif;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
 .mobile-menu summary::-webkit-details-marker{display:none}
 .mobile-menu summary::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
 .mobile-menu[open] summary::after{transform:translateY(2px) rotate(225deg)}
 header .mobile-menu nav{position:absolute;top:calc(100% + 16px);right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;width:min(280px,82vw);max-height:70svh;overflow-y:auto;padding:10px;background:#17150ffb;border:1px solid #d6b16e55;border-radius:18px;box-shadow:0 16px 45px #0008;z-index:20;overscroll-behavior:contain}
 header .mobile-menu nav a,header .mobile-menu nav a:first-child,header .mobile-menu nav a:not(:last-child){display:block;min-height:44px;padding:11px 15px;border:0;border-radius:10px;color:#eee5d4;font-size:15px;line-height:1.5;background:none;text-decoration:none}
 header .mobile-menu nav a:hover,header .mobile-menu nav a:focus-visible{background:#d6b16e18;color:#efd299}
 header .mobile-menu nav a:last-child{margin-top:6px;background:linear-gradient(120deg,#ecd5a3,#bd914b);color:#17120c}
 .mobile-menu summary:focus-visible{outline:2px solid #e5c78c;outline-offset:4px}
}
@media(prefers-reduced-motion:reduce){.mobile-menu summary::after{transition:none}}

/* Asymmetric three-line menu icon in gold. */
@media(max-width:760px){.mobile-menu summary{width:52px;min-height:44px;padding:6px 9px;border:0;border-radius:12px;background:none;color:#dfbd78}.mobile-menu summary::after{display:none}.mobile-menu-icon{display:block;flex:none}.mobile-menu summary:hover{background:#d6b16e10}}

/* Align the dropdown card exactly with the enclosing menu header. */
@media(max-width:760px){.mobile-menu{position:static;border-radius:inherit}header .mobile-menu nav{top:calc(100% + 8px);left:-1px;right:-1px;width:calc(100% + 2px);max-width:none;box-sizing:border-box;border-radius:var(--mobile-menu-radius,40px);padding:16px}header .mobile-menu nav a:last-child{border-radius:28px}}

/* Let the dropdown drift down softly when it opens. */
@media(max-width:760px){.mobile-menu[open] nav{animation:mobile-menu-float-in .95s cubic-bezier(.16,1,.3,1) both;transform-origin:top center}}
@keyframes mobile-menu-float-in{from{opacity:0;transform:translateY(-35px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.mobile-menu[open] nav{animation:none}}