/* Eagles - full screen photo viewer. Loaded after the page design, so it wins on order. */

/* the viewer fills the real screen, including on phones where the browser bar moves */
.lb{height:100vh}
@supports (height:100dvh){.lb{height:100dvh}}

/* the photo gets the whole stage, edge to edge */
.lb .stage{padding:0;overflow:hidden;touch-action:none}
.lb .stage img{
  max-width:100%;max-height:100%;
  transform-origin:center center;
  transition:transform .14s ease-out;
  cursor:zoom-in;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
}
.lb.zoomed .stage img{transition:none;cursor:grab}
.lb .stage img.dragging{cursor:grabbing}

/* a quiet hint so people know they can zoom */
.lb .top .hint{
  display:block;font-size:11.5px;font-weight:400;letter-spacing:.02em;
  color:rgba(244,239,230,.5);margin-top:2px;
}
@media (hover:hover) and (pointer:fine){.lb .top .hint.touch{display:none}}
@media (hover:none){.lb .top .hint.mouse{display:none}}

@media(max-width:760px){
  .lb .top{padding:10px 14px}
  .lb .strip{padding:8px 10px 12px}
  .lb .nav{width:40px;height:40px}
}

/* the photo on the listing itself keeps its own shape, so a portrait photo
   is not squeezed into a landscape box and a landscape photo is not cropped.
   A tall photo is narrower than the page, so it is centred instead of pushed
   to one side with an empty black half beside it. */
.site .gal .main{transition:aspect-ratio .18s ease;margin-inline:auto}
.site .gal .main img{object-fit:contain;background:#0d0d12}

@media (prefers-reduced-motion:reduce){
  .lb .stage img,.site .gal .main{transition:none}
}