/* The picture viewer (docs/NAVIGATION-ROADMAP.md §27.12, 7 Oct 2026): one
   of the Ohio page's scenes whole, with arrows through the rest. A
   photograph viewer is dark in both themes, so it paints its own colours
   rather than reading the page's tokens, and it is in b.css's photo-surface
   list for anything inside that does. */

/* One picture to the next fades rather than blinks, where the browser can. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

html:has(body.pic-page){background:#0E0E0D}
body.pic-page{margin:0;background:#0E0E0D;color:#F2EEE6}
.pic-viewer{position:relative;box-sizing:border-box;height:100vh;height:100dvh;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

.pic-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem}
.pic-back{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1rem 0 .8rem;
  border-radius:999px;background:rgba(255,255,255,.08);color:#F2EEE6;font-weight:600;text-decoration:none}
.pic-back:hover,.pic-back:focus-visible{background:rgba(255,255,255,.16)}
.pic-count{margin:0;color:rgba(242,238,230,.72);font-variant-numeric:tabular-nums}

.pic-frame{margin:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:0 1rem 1rem}
/* The <picture> is the box that fills the space, not display:contents: as
   contents, its <source> took a row of its own and pushed the photograph
   to the foot of a phone's screen. */
.pic-frame picture{display:block;grid-row:1;min-height:0;height:100%}
.pic-frame img{display:block;width:100%;height:100%;object-fit:contain}
.pic-caption{grid-row:2}
.pic-caption{text-align:center;padding:.9rem 4.5rem 0;font-size:1.05rem;line-height:1.4;color:#F2EEE6}
/* The picture's credit, when it is not the user's own (25 Oct 2026). */
.pic-credit{display:block;margin-top:.15rem;font-size:.78rem;color:rgba(242,238,230,.72)}

/* The arrows: either side of the picture, a hand's width in from the edge,
   big enough for a thumb, on their own dark disc so any picture shows them. */
.pic-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:3.25rem;height:3.25rem;border-radius:50%;color:#fff;background:rgba(14,14,13,.6);
  border:1px solid rgba(255,255,255,.28)}
.pic-arrow:hover,.pic-arrow:focus-visible{background:rgba(14,14,13,.85);border-color:rgba(255,255,255,.6)}
.pic-prev{left:max(1rem,env(safe-area-inset-left))}
.pic-next{right:max(1rem,env(safe-area-inset-right))}
.pic-back:focus-visible,.pic-arrow:focus-visible{outline:2px solid #F2EEE6;outline-offset:3px}

/* On a phone the arrows sit at the foot, under the thumb, either side of
   the caption; a swipe does the same (js/pictures.js). */
@media (max-width:700px){
  .pic-arrow{top:auto;transform:none;bottom:calc(.5rem + env(safe-area-inset-bottom))}
  .pic-frame{padding:0 0 .5rem}
  .pic-caption{padding:.9rem 4.5rem .6rem;font-size:1rem;min-height:3.25rem;box-sizing:border-box}
}