.opening-stage-ready { background: var(--ink); width: 100%; }
.opening-gallery { background: var(--ink); position: relative; width: 100%; }
.opening-image-button { appearance: none; background: transparent; border: 0; cursor: zoom-in; display: block; line-height: 0; padding: 0; width: 100%; }
.opening-image { display: block; height: auto; opacity: 1; transition: opacity 180ms ease; width: 100%; }
.opening-image.is-transitioning { opacity: 0; }
.opening-arrow { -webkit-appearance: none; appearance: none; align-items: center; background: rgba(12, 12, 10, .22); border: 0; border-radius: 50%; box-sizing: border-box; color: #fff; cursor: pointer; display: flex; font: 300 clamp(34px, 4vw, 62px)/1 var(--display); height: clamp(48px, 5vw, 72px); justify-content: center; margin: 0; max-height: clamp(48px, 5vw, 72px); max-width: clamp(48px, 5vw, 72px); min-height: clamp(48px, 5vw, 72px); min-width: clamp(48px, 5vw, 72px); opacity: 0; overflow: hidden; padding: 0 0 .1em; position: absolute; top: 50%; transform: translateY(-50%); transition: background-color 160ms ease, opacity 160ms ease; width: clamp(48px, 5vw, 72px); z-index: 2; }
.opening-arrow.previous { left: clamp(8px, 1.8vw, 28px); }
.opening-arrow.next { right: clamp(8px, 1.8vw, 28px); }
.opening-gallery:hover .opening-arrow:not(:disabled), .opening-gallery:focus-within .opening-arrow:not(:disabled) { opacity: .72; }
.opening-arrow:hover, .opening-arrow:focus-visible { background: rgba(12, 12, 10, .58); opacity: 1 !important; outline: 1px solid rgba(255,255,255,.75); outline-offset: 3px; }
.opening-arrow:disabled { cursor: default; opacity: 0; pointer-events: none; visibility: hidden; }

.work-viewer { background: var(--ink); border: 0; color: var(--paper); height: 96vh; max-height: none; max-width: 98vw; padding: 14px; width: 98vw; }
.work-viewer::backdrop { background: rgba(0, 0, 0, .9); }
.viewer-toolbar { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.viewer-toolbar > span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.viewer-toolbar div { display: flex; gap: 6px; }
.viewer-toolbar button { background: transparent; border: 1px solid currentColor; color: inherit; cursor: pointer; font: 10px/1 var(--sans); letter-spacing: .09em; padding: 9px 10px; text-transform: uppercase; }
.viewer-toolbar button:hover, .viewer-toolbar button:focus-visible { background: var(--paper); color: var(--ink); }
.viewer-image-wrap { align-items: center; display: flex; height: calc(100% - 82px); justify-content: center; overflow: auto; padding: 12px 0; }
.viewer-image-wrap img { cursor: zoom-in; display: block; max-height: 100%; max-width: 100%; object-fit: contain; touch-action: pinch-zoom; }
.viewer-image-wrap img.is-zoomed { cursor: zoom-out; max-height: none; max-width: none; width: min(1900px, 180vw); }
.viewer-hint { color: #c7c2b7; font-size: 10px; letter-spacing: .035em; margin: 0; }

@media (max-width: 780px) {
  .opening-arrow { background: rgba(12, 12, 10, .42); font-size: 34px; height: 44px; max-height: 44px; max-width: 44px; min-height: 44px; min-width: 44px; opacity: .82; width: 44px; }
  .opening-arrow.previous { left: 7px; }
  .opening-arrow.next { right: 7px; }
  .work-viewer { height: 100vh; max-width: 100vw; padding: 12px; width: 100vw; }
  .viewer-toolbar { align-items: flex-start; }
  .viewer-toolbar div { flex-direction: column; }
  .viewer-image-wrap { height: calc(100% - 106px); }
  .viewer-image-wrap img.is-zoomed { width: 240vw; }
}

@media (prefers-reduced-motion: reduce) { .opening-image, .opening-arrow { transition: none; } }