/* The menu is a veil over the current garden, never a replacement scene. */
.route-brand,.route-footer{display:none}
@media(max-width:600px){
  body:has(#garden-menu[open]) .walk-scene,body:has(#garden-menu[open])>.header,body:has(#garden-menu[open]) .journey-marker,body:has(#garden-menu[open]) .motion-toggle,body:has(#garden-menu[open])>footer,body:has(#garden-menu[open])>.studio-signature{visibility:hidden}
  .menu-toggle{border-radius:50%;width:46px;height:46px;background:#103b2c70;backdrop-filter:blur(10px)}
  .pocket-route{position:fixed;inset:0;width:100%;height:100svh;max-width:none;max-height:100svh;margin:0;border:0;border-radius:0;padding:max(22px,env(safe-area-inset-top)) 7vw max(24px,env(safe-area-inset-bottom));background:linear-gradient(110deg,#08271cf5 0%,#0c3026ed 45%,#133d2a99 100%);box-shadow:none;isolation:isolate;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
  .pocket-route::-webkit-scrollbar{display:none}
  .pocket-route::backdrop{background:#051d1526;backdrop-filter:none}
  .pocket-route:before{content:'';position:fixed;pointer-events:none;inset:0;background:url('assets/botanical/magnolia-foreground.webp') right -170px bottom 3%/360px auto no-repeat;opacity:.23;z-index:-1;transform:rotate(-5deg);transform-origin:right bottom}
  .pocket-route:after{content:'';position:fixed;pointer-events:none;inset:0;background:radial-gradient(ellipse at 88% 20%,#d4dfa316,transparent 50%);z-index:-1}
  .pocket-route .pocket-close{top:max(24px,env(safe-area-inset-top));right:7vw;width:46px;height:46px;background:#123f2d85;border-color:#d6e3b74f;font-size:27px}
  .route-brand{display:flex;align-items:center;gap:9px;min-height:50px;margin-bottom:25px;padding-right:52px}
  .route-brand img{width:66px;height:44px;object-fit:contain}
  .route-brand>span{font:600 7px/1.7 var(--body);letter-spacing:1.1px;color:#e1e9cc}
  .route-brand small{display:block;font-size:7px;letter-spacing:.25px;font-weight:400;color:#bfceae}
  .pocket-route>.pocket-eyebrow{font-size:7px;letter-spacing:2px;display:block}
  .pocket-route h2{font:450 clamp(34px,10vw,44px)/1.07 var(--heading);letter-spacing:-1.8px;margin:10px 0 25px;color:#faf8e9}
  .pocket-route h2 em{display:block;font-style:normal;color:#cfe1b6}
  .pocket-route>.route-list{position:relative;display:grid;gap:4px;padding:0;margin:0}
  .route-list:before{content:'';position:absolute;top:25px;bottom:25px;left:21px;width:1px;background:linear-gradient(transparent,#c6d9a955 15%,#c6d9a955 85%,transparent);pointer-events:none}
  .pocket-route .route-list [data-pocket-stop]{position:relative;min-height:60px;padding:9px 11px 9px 7px;gap:15px;border:0;border-radius:28px 4px;color:#f0f1de;background:linear-gradient(90deg,transparent,#d9e7bd04);transition:background .35s,color .35s,transform .35s}
  .pocket-route .route-list [data-pocket-stop]>span{position:relative;display:grid;place-items:center;flex:0 0 29px;height:29px;opacity:1;border:1px solid #ccdeb35c;border-radius:50%;background:#0e3226;font:8px var(--body);color:#c9d9b3}
  .pocket-route .route-list b{font:450 23px/1.1 var(--heading);letter-spacing:-.6px}
  .pocket-route .route-list small{font:10px/1.5 var(--body);letter-spacing:0;margin-top:4px;color:#bdcfb0;opacity:1}
  .pocket-route .route-list i{font-size:20px;opacity:.55}
  .pocket-route .route-list [aria-current]{background:linear-gradient(100deg,#d6e6b619,#d6e6b60a);box-shadow:inset 0 0 0 1px #d1e1b32c;color:#e3edcb}
  .pocket-route .route-list [aria-current]>span{background:#d5e6b5;color:#153a2a;border-color:#d5e6b5;box-shadow:0 0 18px #bed78925}
  .pocket-route .route-list [aria-current] i{opacity:1;color:#d9e7b5}
  .pocket-route .route-list button:active{transform:translateX(4px)}
  .pocket-route>.route-footer{display:flex!important;align-items:center;justify-content:space-between;gap:15px;margin:25px 0 0;padding:19px 0 0;border-top:1px solid #cedcb431!important;color:#d5e3c0}
  .route-footer>span{font:400 11px/1.6 var(--body)}
  .route-footer>span em{font-style:normal;color:#f2f0dd}
  .pocket-route .route-footer button{display:flex;align-items:center;gap:25px;min-height:46px;padding:12px 17px;border:1px solid #d6e2b76b;border-radius:26px 4px;background:#d5e5b5;color:#173d2a;font:600 11px var(--body)}
  .route-footer i{font:20px var(--heading);font-style:normal}
  .pocket-route[open]{animation:menu-arrive .65s cubic-bezier(.16,1,.3,1) both}
  .pocket-route[open] .route-list button{animation:menu-stop .65s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(90ms + var(--stop-order)*55ms)}
}
@media(max-width:600px) and (max-height:740px){
  .route-brand{margin-bottom:13px;min-height:43px}
  .route-brand img{height:38px;width:57px}
  .pocket-route h2{font-size:34px;margin:8px 0 17px}
  .pocket-route .route-list [data-pocket-stop]{min-height:53px;padding-top:7px;padding-bottom:7px}
  .pocket-route .route-list b{font-size:21px}
  .pocket-route .route-list small{font-size:9px;margin-top:3px}
  .pocket-route>.route-footer{margin-top:16px;padding-top:13px}
}
@keyframes menu-arrive{from{opacity:0;clip-path:inset(0 0 100% 0 round 0 0 50% 0)}to{opacity:1;clip-path:inset(0 round 0)}}
@keyframes menu-stop{from{opacity:0;transform:translate3d(-14px,10px,0)}to{opacity:1;transform:none}}
.paused .pocket-route,.paused .pocket-route .route-list button{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.pocket-route,.pocket-route .route-list button{animation:none!important;transition:none!important}}