/* The work itself is the interaction: fit the complete image, or inspect its real pixels. */
.inner-page .lightbox { width: min(1080px, 94vw); padding-top: 76px; }
.inner-page .lightbox-zoom { position: absolute; left: 20px; top: 14px; padding: 10px 16px; font: 500 13px/1.5 var(--body); }
.inner-page .lightbox-close { top: 14px; right: 20px; }
.lightbox-viewport { height: min(64svh, 780px); overflow: auto; overscroll-behavior: contain; display: grid; place-items: center; background: #070605; }
.inner-page .lightbox-viewport img { max-width: 100%; max-height: min(64svh, 780px); margin: 0; }
.lightbox-viewport--detail { display: block; place-items: start; touch-action: pan-x pan-y; }
.inner-page .lightbox-viewport--detail img { width: auto; height: auto; max-width: none; max-height: none; }
.inner-page .lightbox-help { margin: 10px auto 0; max-width: 640px; text-align: center; color: var(--text-secondary); font: 400 13px/1.5 var(--body); }
.inner-page .lightbox-caption { font-size: 13px; }
.inner-page .lightbox-controls { margin-top: 12px; }
@media (max-width: 700px) {
  .inner-page .lightbox { padding: 76px 14px 18px; }
  .inner-page .lightbox-zoom { left: 14px; }
  .inner-page .lightbox-close { right: 14px; }
  .lightbox-viewport { height: 55svh; }
  .inner-page .lightbox-viewport img { max-height: 55svh; }
  .inner-page .lightbox-viewport--detail img { max-height: none; }
  .inner-page .lightbox-controls { gap: 10px; }
  .inner-page .lightbox-controls .text-link { font-size: 13px; letter-spacing: 0; }
}