/* ============================================================
   ZOOM, the photo viewer (js/zoom.js)
   ============================================================ */

.zv {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #0b0907;                 /* solid, so nothing of the page shows round the photo */
  color: #f2e7d4;
  font-family: var(--bit, 'PP NeueBit', monospace);
  animation: zv-in 180ms ease;
}
.zv[hidden] { display: none; }
@keyframes zv-in { from { opacity: 0; } }

.zv-stage {
  position: absolute;
  inset: 0 0 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;                 /* pinch and drag belong to the viewer */
}
.zv-img {
  max-width: 92vw;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  transform-origin: center center;
  opacity: 0;
  transition: opacity 180ms ease;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}
.zv-img.is-in { opacity: 1; }
.zv.is-zoomed .zv-img { cursor: grab; transition: opacity 180ms ease; }
.zv.is-zoomed .zv-img:active { cursor: grabbing; }

.zv-loading {
  position: absolute;
  inset: 0 0 64px;
  display: grid;
  place-items: center;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: #8f8270;
  pointer-events: none;
}
.zv-loading[hidden] { display: none; }

.zv-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  background: #0b0907;
  border-top: 1px solid #2a221c;
}
.zv-cap {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zv-hint {
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #8f8270;
  white-space: nowrap;
}
.zv-x {
  all: unset;
  font-size: 16px;
  letter-spacing: 0.1em;
  padding: 9px 14px;
  border: 2px solid #f2e7d4;
  color: #f2e7d4;
}
.zv-x:hover, .zv-x:focus-visible { background: #db1c00; border-color: #fff; color: #fff; }

/* a standalone case study should not scroll behind the viewer */
html.zv-open, html.zv-open body { overflow: hidden; }

@media (max-width: 640px) {
  .zv-stage, .zv-loading { inset: 0 0 92px; }
  .zv-bar { height: 92px; flex-wrap: wrap; align-content: center; gap: 6px 14px; padding: 0 16px; }
  .zv-cap { flex-basis: 100%; font-size: 16px; }
  .zv-hint { flex: 1; font-size: 13px; }
  .zv-img { max-width: 96vw; max-height: calc(100vh - 140px); }
}

/* ---------- tap targets over photos baked into the artwork ----------
   Invisible, and exactly the size of the photo under them. The pointing
   hand is the only hint; a keyboard user still gets a focus ring. */
.sheet-wrap { position: relative; }
.zoom-spot {
  all: unset;
  position: absolute;
  box-sizing: border-box;
  display: block;
}
.zoom-spot:focus-visible { outline: 2px solid var(--accent, #db1c00); outline-offset: -2px; }