/* Photograph viewer, shared by the portrait and event pages (viewer.js).
   It follows the page theme: a cream room in light, a dark room in dark. The
   photograph is the only colour in it, as everywhere else on this site. */
:root,
:root[data-resolved-theme="light"] {
  --pv-bg: #fafaf6;
  --pv-ink: #0a0907;
  --pv-ink-2: #5d5a52;
  --pv-btn: rgb(244 243 238 / 0.92);
  --pv-btn-hover: #e8e4dc;
  --pv-line: rgb(10 9 7 / 0.14);
}
:root[data-resolved-theme="dark"] {
  --pv-bg: #0a0907;
  --pv-ink: #fafaf6;
  --pv-ink-2: #b6b0a4;
  --pv-btn: rgb(26 24 22 / 0.92);
  --pv-btn-hover: #2a2723;
  --pv-line: rgb(250 250 246 / 0.16);
}

html.pv-lock { overflow: hidden; scrollbar-gutter: stable; }

.pv {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--pv-bg); color: var(--pv-ink);
  overscroll-behavior: contain;
  font-family: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
}
.pv::backdrop { background: var(--pv-bg); }
.pv:focus { outline: none; }
.pv[open] { display: block; animation: pv-in 170ms cubic-bezier(.22, 1, .36, 1); }
@keyframes pv-in { from { opacity: 0; } }

.pv-stage { position: absolute; inset: 0; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
.pv-track { position: absolute; inset: 0; will-change: transform; }
.pv.is-dragging .pv-stage { cursor: grabbing; }

/* Three slides: previous, current, next. Room is left for the controls and
   for the phone's own notch and home bar. */
.pv-slide {
  position: absolute; inset: 0; margin: 0;
  padding:
    calc(env(safe-area-inset-top, 0px) + 60px)
    calc(env(safe-area-inset-right, 0px) + 10px)
    calc(env(safe-area-inset-bottom, 0px) + 72px)
    calc(env(safe-area-inset-left, 0px) + 10px);
}
.pv-slide:nth-child(1) { transform: translateX(calc(-100% - 24px)); }
.pv-slide:nth-child(3) { transform: translateX(calc(100% + 24px)); }
.pv-slide[hidden] { display: none; }
.pv-box { position: relative; width: 100%; height: 100%; }
.pv-box img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain; -webkit-user-drag: none; pointer-events: none;
}
.pv-hi { opacity: 0; transition: opacity 220ms ease-out; }
.pv-slide.is-loaded .pv-hi { opacity: 1; }
.pv.is-opening .pv-slide:nth-child(2) .pv-box { animation: pv-settle 260ms cubic-bezier(.22, 1, .36, 1); }
@keyframes pv-settle { from { transform: scale(0.985); } }

.pv-top {
  position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 10px) 0 calc(env(safe-area-inset-left, 0px) + 18px);
  pointer-events: none; touch-action: none;
}
.pv-count {
  margin: 0; font-family: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
  font-size: 0.8125rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--pv-ink-2);
}
.pv-top .pv-btn { pointer-events: auto; }

.pv-btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; margin: 0;
  border-radius: 999px; border: 1px solid var(--pv-line); background: var(--pv-btn); color: var(--pv-ink);
  cursor: pointer; touch-action: manipulation;
  transition: background-color 120ms ease-out, opacity 120ms ease-out;
}
.pv-btn:hover { background: var(--pv-btn-hover); }
.pv-btn:focus-visible { outline: 2px solid var(--pv-ink); outline-offset: 3px; }
.pv-btn:disabled { opacity: 0.28; cursor: default; }
.pv-btn svg { display: block; }

/* Phone: the arrows sit in the bottom bar, either side of the caption, within
   reach of a thumb. */
.pv-nav { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
.pv-prev { left: calc(env(safe-area-inset-left, 0px) + 12px); }
.pv-next { right: calc(env(safe-area-inset-right, 0px) + 12px); }
.pv-caption {
  position: absolute; left: 72px; right: 72px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  min-height: 48px; margin: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 0.875rem; line-height: 1.35; color: var(--pv-ink-2);
  pointer-events: none; text-wrap: balance;
}
.pv-caption[hidden] { display: none; }
.pv-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* Wider screens: large arrows at the sides, the photograph between them. */
@media (min-width: 48rem) {
  .pv-slide {
    padding:
      calc(env(safe-area-inset-top, 0px) + 68px)
      calc(env(safe-area-inset-right, 0px) + 96px)
      calc(env(safe-area-inset-bottom, 0px) + 64px)
      calc(env(safe-area-inset-left, 0px) + 96px);
  }
  .pv-nav { top: 50%; bottom: auto; width: 56px; height: 56px; margin-top: -28px; }
  .pv-prev { left: calc(env(safe-area-inset-left, 0px) + 24px); }
  .pv-next { right: calc(env(safe-area-inset-right, 0px) + 24px); }
  .pv-caption { left: 96px; right: 96px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); min-height: 44px; }
  .pv-top { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-right: calc(env(safe-area-inset-right, 0px) + 20px); padding-left: calc(env(safe-area-inset-left, 0px) + 28px); }
}

/* A phone on its side: the photograph takes the height, controls go to the edges. */
@media (max-height: 30rem) and (orientation: landscape) {
  .pv-slide {
    padding:
      calc(env(safe-area-inset-top, 0px) + 8px)
      calc(env(safe-area-inset-right, 0px) + 76px)
      calc(env(safe-area-inset-bottom, 0px) + 8px)
      calc(env(safe-area-inset-left, 0px) + 76px);
  }
  .pv-nav { top: 50%; bottom: auto; margin-top: -24px; width: 48px; height: 48px; }
  .pv-prev { left: calc(env(safe-area-inset-left, 0px) + 14px); }
  .pv-next { right: calc(env(safe-area-inset-right, 0px) + 14px); }
  .pv-caption { display: none; }
  .pv-top { padding-left: calc(env(safe-area-inset-left, 0px) + 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .pv[open], .pv.is-opening .pv-slide:nth-child(2) .pv-box { animation: none; }
  .pv-hi { transition: none; }
}
@media (forced-colors: active) {
  .pv-btn { border: 1px solid ButtonText; }
}