/* Non-destructive compatibility layer for the site's existing gallery.html. */
@media (max-width:720px){
  html,body{max-width:100%;overflow-x:hidden}
  header .wrap.topbar{padding:10px 12px!important;gap:8px!important;min-height:54px}
  header .brand{gap:8px;min-width:0;flex:0 0 auto}
  header .brand img{height:37px!important;width:auto;max-width:60px;object-fit:contain}
  header .brand h1{display:none!important}
  header .cta-row,header .topbar>div:last-child{display:flex;gap:6px!important;flex-wrap:nowrap!important;min-width:0}
  header .btn{padding:8px 10px!important;font-size:12px!important;line-height:1.2;white-space:nowrap}
  main.wrap{padding:10px 12px!important;max-width:100%}
  .chips{display:flex;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;gap:8px;padding:6px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .chips .chip{flex:0 0 auto;scroll-snap-align:start;min-height:40px;white-space:nowrap;font-size:13px}
  .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:12px 0 20px!important}
  .card{min-width:0;border-radius:11px}
  .card img{height:auto!important;width:100%!important;aspect-ratio:4/3;object-fit:cover}
  .card .cap{font-size:12px;line-height:1.4;padding:9px!important;min-height:0;overflow-wrap:anywhere}
  .modal{box-sizing:border-box;padding:16px!important}
  .modal img{object-fit:contain;max-width:calc(100vw - 28px)!important;max-height:calc(100dvh - 145px)!important}
  .modal .mcap{font-size:13px;line-height:1.45;max-height:18dvh;overflow:auto;padding:0 10px}
  .mnav button{font-size:27px!important;background:rgba(0,0,0,.55)!important;border-radius:8px;margin:0 3px;padding:8px 10px!important}
  .mclose{z-index:10;font-size:30px!important;right:14px;top:8px;color:#fff}
}
@media(max-width:560px){
  header .brand>div,header .brand-meta{display:none!important}
  header .wrap.topbar{flex-wrap:nowrap;justify-content:space-between}
}
@media(max-width:360px){header .brand img{height:30px!important}header .btn{padding:7px 8px!important;font-size:11px!important}.grid{gap:7px!important}}
/* Make the current viewer usable with a keyboard and without scrolling behind it. */
body.vmp-gallery-lock{overflow:hidden}
#mclose:focus-visible,.mnav button:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:7px}
@media(max-width:720px){.modal{max-width:100vw;max-height:100dvh}.mnav{pointer-events:none}.mnav button{pointer-events:auto}}

#grid .card img:focus-visible{outline:3px solid #e63946;outline-offset:-3px}