/* The viewer under a hand.
   The browser must not claim the gesture: every direction is handled here, so
   a downward drag closes the picture instead of scrolling the page behind it. */
.photo-dialog figure{touch-action:none;overscroll-behavior:contain}
.photo-dialog figure img{transform-origin:center center;will-change:transform;backface-visibility:hidden}
.photo-dialog figure.zoomed{cursor:grab}
.photo-dialog figure.zoomed:active{cursor:grabbing}
/* Nothing animates for anyone who has asked for less movement; the script
   turns its own transitions off as well. */
@media(prefers-reduced-motion:reduce){.photo-dialog figure img{transition:none!important}}

/* The picture takes the screen.
   It used to sit in the middle column of a three column grid, with a seventy
   pixel rail on each side, and then contain itself inside what was left: on a
   phone that is a 250 pixel box, so a tall photograph filled about a third of
   the screen with empty black above and below it. The rails are gone; the
   controls float over the picture instead of taking room from it. */
/* A modal dialog is pinned to the screen by the browser. Saying position:
   relative here took that away: the viewer then rendered at the top of the
   document, so tapping a picture after scrolling down showed the black backdrop
   and nothing else. It stays pinned to the screen. */
.photo-dialog[open]{display:block;position:fixed;inset:0;width:100vw;height:100dvh}
.photo-dialog figure{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}
/* A picture is never drawn bigger than it is.
   object-fit:contain letterboxes a picture but still stretches it until one
   edge touches the window, so a photograph 1735 pixels across was being drawn
   over 2800 on a screen that doubles everything -- and the softness that comes
   of that is not something any amount of serving can fix. It rests at its own
   size instead, centred, with the room around it. Sharp and sometimes smaller
   than the window, which is what a gallery does. The caps are the picture's own
   pixels divided by the screen's, set by home.js; zooming still goes past them,
   because going past is what zooming is for. Asked for on 11 September 2026.

   Reversed on 19 September 2026, by the owner looking at a photograph adrift
   in a black field: "Picture opens the right size and jumps to smaller version
   not covering full screen". It fills the window now, whole -- contain, so
   nothing is cropped -- and the picture asked for is chosen for the window it
   is going into, which is what made resting at its own size worth doing in
   the first place. */
.photo-dialog figure img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain}
/* The opening band, full screen, fills the screen: those pictures are painted
   across the whole window on the page itself, so the viewer cannot show them
   smaller than the page does. 16 September 2026. */
#hero-dialog figure img{width:100%;height:100%;max-width:100%;max-height:100%}

.photo-dialog figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 18px max(18px,env(safe-area-inset-bottom));
  text-align:left;pointer-events:none;
  background:linear-gradient(180deg,#0000 0%,#00000090 42%,#000000d9 100%)}
.photo-dialog figcaption h3{font-size:20px;line-height:1.2}
.photo-dialog figcaption p{font-size:12px}
/* The controls sit over the picture, out of the way of the caption. */
.photo-dialog .photo-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;background:#0000008c;border:1px solid #ffffff2e;color:#fff}
.photo-dialog .photo-nav.previous{left:8px}
.photo-dialog .photo-nav.next{right:8px}
.photo-dialog .photo-close{position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;z-index:4;
  width:52px;height:52px;border-radius:50%;background:#0000008c;border:1px solid #ffffff2e;color:#fff}
.photo-dialog .photo-use{position:absolute;top:max(10px,env(safe-area-inset-top));left:10px;z-index:4}
@media(min-width:900px){
  .photo-dialog figcaption{padding:70px 40px 28px;text-align:center}
  .photo-dialog figcaption h3{font-size:26px}
  .photo-dialog .photo-nav.previous{left:20px}
  .photo-dialog .photo-nav.next{right:20px}
}

/* The picture arriving during a move. It sits exactly where the viewer's own
   picture sits, so when the two swap underneath at the end there is nothing to
   see. */
.photo-dialog .photo-incoming{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;z-index:2;pointer-events:none;transform-origin:center center;backface-visibility:hidden}
.photo-dialog .photo-incoming[hidden]{display:none}

/* Tapping the mark takes you home, and says so under the finger.
   It had no state of its own: nothing lit, nothing pressed, so there was no
   way to tell whether the tap had landed. */
.brand{border-radius:12px;-webkit-tap-highlight-color:transparent;transition:opacity .15s ease,transform .12s ease}
.brand:hover{opacity:.82}
.brand:active{opacity:.6;transform:scale(.97)}
.brand:focus-visible{outline:2px solid #c9a227;outline-offset:4px}