/* An unobstructed canvas keeps the artwork and its caption together. */
.detail-image { display:block; }
.detail-image>span { font-size:12px; }
.detail-image-action { display:inline-flex; align-items:center; gap:14px; color:var(--ink); }
.detail-thumbnails a { display:block; width:72px; height:88px; padding:6px; background:var(--paper-deep); border:1px solid var(--line); flex-shrink:0; }
.detail-thumbnails a[aria-pressed="true"] { border-color:var(--gold); box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--gold); }
.detail-thumbnails a:hover { border-color:var(--gold); }
.detail-thumbnails small { display:block; font-family:var(--sans); font-size:12px; margin-top:2px; }
.gallery-image-status { font-size:12px; line-height:1.8; color:var(--muted); }
.gallery-image-status:not(:empty) { margin-top:12px; }

.artwork-viewer { color:#f1eee6; background:#202322; border:1px solid #55594f; width:calc(100% - 40px); max-width:1320px; height:calc(100vh - 40px); height:calc(100dvh - 40px); max-height:none; margin:auto; padding:0; overflow:hidden; box-shadow:0 20px 90px #0007; }
.artwork-viewer[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.artwork-viewer::backdrop { background:#111412ed; }
.artwork-viewer :focus-visible { outline:2px solid #d4bc86; outline-offset:3px; }
.artwork-viewer-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:17px 28px; border-bottom:1px solid #3e423c; }
.artwork-viewer-header h2 { font-size:30px; line-height:1.45; overflow-wrap:anywhere; }
.artwork-viewer-byline { color:#b8bdb3; font-size:12px; margin-bottom:3px; }
.artwork-viewer-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; min-width:44px; padding:9px 16px; border:1px solid #62675d; background:transparent; color:#f1eee6; cursor:pointer; font-size:12px; line-height:1.5; }
.artwork-viewer-button:hover { background:#373d35; border-color:#a7af9d; }
.artwork-viewer-button:disabled { cursor:default; opacity:.5; }
.artwork-viewer-button[hidden] { display:none; }
.artwork-viewer-close { flex-shrink:0; }
.artwork-viewer-close span:last-child { font-size:26px; line-height:1; font-weight:300; }
.artwork-viewer-stage { position:relative; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; direction:ltr; background:#191c1b; scrollbar-color:#777d70 #252925; }
.artwork-viewer-stage:focus-visible { outline-offset:-4px; }
.artwork-viewer-canvas { width:max-content; height:max-content; min-width:100%; min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px; }
.artwork-viewer-canvas img { display:block; flex-shrink:0; max-width:none; max-height:none; width:auto; height:auto; object-fit:contain; box-shadow:0 8px 28px #0003; }
.artwork-viewer-footer { padding:14px 28px 12px; border-top:1px solid #3e423c; }
.artwork-viewer-caption { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12px; color:#d5d8cf; }
.artwork-viewer-caption>span { font-variant-numeric:tabular-nums; white-space:nowrap; color:#b8bdb3; font-size:12px; }
.artwork-viewer-controls { display:flex; justify-content:center; gap:12px; margin-top:10px; }
.artwork-viewer-zoom { border-color:#aa9362; color:#e7d3a7; min-width:150px; }
.artwork-viewer-zoom[aria-pressed="true"] { background:#3d3a2e; }
.artwork-viewer-help { text-align:center; color:#aeb4a8; font-size:12px; line-height:1.8; margin-top:9px; }
.artwork-viewer-status { min-height:20px; text-align:center; color:#e2c78d; font-size:12px; line-height:1.6; }
.artwork-viewer[aria-busy="true"] .artwork-viewer-caption { opacity:.6; }

@media(max-width:760px) {
  .artwork-viewer { width:100%; height:100vh; height:100dvh; max-width:none; border:0; }
  .artwork-viewer-header { padding:14px 18px; gap:16px; }
  .artwork-viewer-header h2 { font-size:25px; }
  .artwork-viewer-footer { padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
  .artwork-viewer-button { padding:9px 8px; gap:6px; font-size:12px; min-width:0; }
  .artwork-viewer-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .artwork-viewer-controls.is-single { display:flex; }
  .artwork-viewer-zoom { min-width:0; }
  .detail-image>span { gap:10px; }
}
@media(max-width:360px) {
  .artwork-viewer-controls { gap:5px; }
  .artwork-viewer-button { padding-inline:8px; }
  .artwork-viewer-zoom { min-width:0; }
}
@media(prefers-reduced-motion:reduce) {
  .artwork-viewer *, .detail-thumbnails a { transition:none; scroll-behavior:auto; }
}