/* Mobile header: account link in the bar + book-stack menu button.
   Shared by every static page (linked in <head>). The Next app has the same
   rules in app/globals.css. */

/* Menu button: three uneven "book spines" with a bookmark ribbon that fold
   into an X when the menu is open. 44px tap target. */
.mnavBtn.lmb{width:44px;height:44px;min-width:44px;padding:0;margin-left:-8px;font-size:0;line-height:0;justify-content:center;align-items:center;border-radius:10px;color:var(--brown);-webkit-tap-highlight-color:transparent;}
.mnavBtn.lmb:focus{outline:none;}
.mnavBtn.lmb:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}
.mnavBtn.lmb:active{background:rgba(113,125,65,.12);}
.lmb-ico{display:block;overflow:visible;}
.lmb-ico line{stroke:currentColor;stroke-width:2.6;stroke-linecap:round;fill:none;transform-box:fill-box;transform-origin:center;transition:transform .38s cubic-bezier(.65,0,.35,1),opacity .2s ease,stroke .3s ease;}
.lmb-ico .lmb-2{stroke:var(--olive);}
.lmb-ico .lmb-1{transform:translateX(-1.5px) scaleX(.8);}
.lmb-ico .lmb-2{transform:translateX(2.5px) scaleX(.66);}
.lmb-ico .lmb-3{transform:scaleX(.94);}
.lmb-ico .lmb-r{fill:var(--olive);transform-box:fill-box;transform-origin:top center;transition:transform .3s cubic-bezier(.65,0,.35,1),opacity .2s ease;}
.mnavBtn.lmb:hover .lmb-1{transform:translateX(0) scaleX(.9);}
.mnavBtn.lmb:hover .lmb-2{transform:translateX(1px) scaleX(.78);}
.mnavBtn.lmb[aria-expanded="true"] .lmb-1{transform:translateY(6px) rotate(45deg) scaleX(.96);}
.mnavBtn.lmb[aria-expanded="true"] .lmb-2{transform:translateX(6px) scaleX(0);opacity:0;}
.mnavBtn.lmb[aria-expanded="true"] .lmb-3{transform:translateY(-6px) rotate(-45deg) scaleX(.96);}
.mnavBtn.lmb[aria-expanded="true"] .lmb-r{transform:scaleY(0);opacity:0;}
@media (prefers-reduced-motion: reduce){.lmb-ico line,.lmb-ico .lmb-r{transition:none;}}

/* Account link: desktop keeps the star + label; mobile shows a person icon with
   a small label under it (Sign in / My Landmark). */
.acctbtn .acctsvg{display:none;}
@media (max-width:860px){
  .actions .iconbtn.acctbtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:44px;min-height:44px;padding:0 2px;color:var(--brown);}
  .actions .acctbtn .acctstar{display:none;}
  .actions .acctbtn .acctsvg{display:block;}
  .actions .acctbtn .acctlbl{display:block !important;font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:.02em;line-height:1;white-space:nowrap;color:var(--ink);}
  .actions .iconbtn.acctbtn:focus-visible{outline:2px solid var(--olive);outline-offset:1px;border-radius:8px;}
  .actions .listpill{white-space:nowrap;}
}
@media (max-width:420px){
  header .bar{padding-left:12px;padding-right:12px;gap:8px;}
  header .actions{gap:8px;}
  header .brand{min-width:0;}
  header .brand img{height:40px !important;width:auto;max-width:100%;}
  header .actions .listpill{padding:7px 11px;font-size:13px;gap:6px;}
}
@media (max-width:374px){
  header .brand img{height:36px !important;}
}

/* Open menu: the panel opens under the header so the X stays in the bar. */
#mnav.lm-below .mclose{display:none;}
#mnav.lm-below nav{height:auto;bottom:0;}
#mnav.open{animation:lmFade .2s ease-out;}
#mnav.open nav{animation:lmSlide .3s cubic-bezier(.2,.8,.2,1);}
@keyframes lmFade{from{opacity:0;}to{opacity:1;}}
@keyframes lmSlide{from{transform:translateX(100%);}to{transform:none;}}
@media (prefers-reduced-motion: reduce){#mnav.open,#mnav.open nav{animation:none;}}