/* V22 shared image viewer styles (Bob). The lightbox rules are copied verbatim from collection-v19.css + collection-v21-2.css
   (the Personal Collection viewer), so Spyhop and Mystic Medicine open images in the identical viewer. Triggers are absolutely
   positioned or wrap existing images: the overview layouts do not move. */
.collection-lightbox{background:#0A0A0E;color:#ede8df;border:0;padding:24px 58px 14px;width:max-content;max-width:96vw;max-height:96vh;overflow:auto}
.collection-lightbox::backdrop{background:#050509ed;backdrop-filter:blur(5px)}
.lightbox-stage{position:relative;width:max-content;max-width:100%;margin:auto}
.lightbox-stage figure{margin:0;width:max-content;max-width:100%}
.lightbox-stage img{display:block;width:auto;height:auto;max-width:calc(96vw - 116px);max-height:70vh;object-fit:contain}
.lightbox-stage figcaption{font-size:12px;line-height:1.6;text-align:right;color:#c4c0b8;margin-top:10px;max-width:100%}
.lightbox-image{position:relative}
.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);height:48px;width:44px;border:0;background:transparent;color:#ede8df;font:28px Georgia;cursor:pointer;display:grid;place-items:center}
.lightbox-arrow[data-prev]{left:-51px}
.lightbox-arrow[data-next]{right:-51px}
.lightbox-arrow:hover{color:#2B6FD4}
.collection-lightbox button:focus-visible{outline:2px solid #2B6FD4;outline-offset:2px}
.lightbox-footer{display:flex;justify-content:center;margin-top:20px}
.lightbox-footer button{font:inherit;font-size:14px;min-height:44px;padding:8px 24px;border:0;border-bottom:1px solid #777;background:none;color:#ede8df;cursor:pointer}
.lightbox-footer button:hover{color:#2B6FD4;border-color:#2B6FD4}
@media(max-width:560px){.collection-lightbox{padding:20px 46px 12px}.lightbox-stage img{max-width:calc(96vw - 92px);max-height:65vh}.lightbox-arrow[data-prev]{left:-44px}.lightbox-arrow[data-next]{right:-44px}.lightbox-stage figcaption{font-size:11px}}
.lightbox-stage figcaption{text-wrap:balance}
.lightbox-arrow[hidden]{display:none}

/* Triggers (V22) */
.lb-link{display:block;cursor:zoom-in;border-radius:inherit}
.lb-link:focus-visible{outline:2px solid #2B6FD4;outline-offset:4px}
.lb-zoom{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:flex-end;padding:12px;cursor:zoom-in;text-decoration:none}
.lb-zoom span{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:#0A0A0Ecc;border:1px solid #ffffff33;color:#ede8df;font:500 12px/1 system-ui,-apple-system,sans-serif;letter-spacing:.04em}
.lb-zoom:hover span,.lb-zoom:focus-visible span{background:#2B6FD4;border-color:#2B6FD4;color:#fff}
.lb-zoom:focus-visible{outline:2px solid #2B6FD4;outline-offset:-2px;border-radius:10px}


/* V23.1F polish (Bob): viewer arrows and footer button use the same curve, hover, keyboard-focus and press states as the collection page. */
@media (prefers-reduced-motion: no-preference) {
  .lightbox-arrow, .lightbox-footer button { transition: color 150ms cubic-bezier(0.2, 0.65, 0.3, 1), border-color 150ms cubic-bezier(0.2, 0.65, 0.3, 1), transform 150ms cubic-bezier(0.2, 0.65, 0.3, 1); }
}
.lightbox-arrow:is(:hover, :focus-visible) { color: #2B6FD4; }
.lightbox-footer button:is(:hover, :focus-visible) { color: #2B6FD4; border-color: #2B6FD4; }
.lightbox-footer button:active { transform: translateY(1px); }