@media (max-width: 760px){
  body{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  main.container{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .topnav{
    position: fixed; left:0; right:0; bottom:0; top:auto; z-index:50;
    display:flex; gap:.25rem; padding:.55rem .6rem;
    background: rgba(255,255,255,.94);
    backdrop-filter:saturate(120%) blur(8px);
    box-shadow: 0 -6px 20px rgba(0,0,0,.08);
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    white-space:nowrap; scroll-snap-type:x proximity;
  }
  .topnav a{ flex:0 0 auto; text-align:center; padding:.65rem .9rem; line-height:1; border-radius:999px; font-size:.95rem; scroll-snap-align:center; }
  .topnav::-webkit-scrollbar{ height:0 } .topnav{ scrollbar-width:none }
  .site-header{ min-height:44vh; }
}