/* Lightbox (js/lightbox.js): dark backdrop, pixel frame, pixel buttons */
html.lb-on{overflow:hidden}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(14,4,2,.96);padding:16px}
.lb[hidden]{display:none}
.lb-panel{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;height:100%}
.lb-bar{display:flex;align-items:center;gap:16px;font-family:"Px12","Dot16",monospace;color:var(--cream)}
.lb-count{font-size:24px;line-height:32px;margin-right:auto;color:var(--yellow);white-space:nowrap}
.lb-dl{min-height:48px}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;flex:1 1 auto}
/* arrows sit over the left / right edge so the picture gets the whole width */
.lb-prev,.lb-next{position:absolute;top:50%;margin-top:-28px;z-index:1}
.lb-prev{left:0}.lb-next{right:0}
.lb-frame{display:flex;align-items:center;justify-content:center}
/* width / height are set by js/lightbox.js fit(): the picture is scaled up to fill the screen */
.lb-img{display:block;image-rendering:auto;background:#1a0904}
.lb-img.px{image-rendering:pixelated}
.lb-img[hidden]{display:none}
.lb-cap{margin:0;text-align:center;color:var(--sand);font-size:18px;line-height:24px}

/* pixel buttons: square, hard shadow, no rounded corners */
.lb-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;
  background:var(--orange);color:var(--ink);border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 var(--ink);
  cursor:pointer;border-radius:0}
.lb-btn svg{fill:currentColor;width:32px;height:32px}
.lb-btn:hover{background:var(--amber)}
.lb-btn:active{transform:translate(var(--px),var(--px));box-shadow:none}
.lb-btn[hidden]{display:none}
.lb-close{background:var(--red);color:#fff}
.lb-close:hover{background:#d4401f}
.lb-btn:focus-visible,.lb-dl:focus-visible{outline:var(--px) solid var(--yellow);outline-offset:2px}

/* thumbnails that open it */
.lb-zoom{cursor:zoom-in}
.lb-zoom:focus-visible{outline:var(--px) solid var(--yellow);outline-offset:2px}
.shots a{cursor:zoom-in}

/* short zoom-in in pixel steps; nothing when reduced motion is asked for */
.lb-anim{animation:lb-fade .12s steps(3,end)}
.lb-anim .lb-frame{animation:lb-zoom .16s steps(4,end)}
@keyframes lb-fade{from{background:rgba(14,4,2,0)}}
@keyframes lb-zoom{from{transform:scale(.85)}}
@media (prefers-reduced-motion:reduce){.lb-anim,.lb-anim .lb-frame{animation:none}}

/* phones: arrows below the picture so the picture gets the full width */
@media (max-width:640px){
  .lb{padding:8px}
  .lb-prev,.lb-next{top:auto;bottom:0;margin-top:0;width:64px;height:56px}
  .lb-dl{font-size:16px;padding:8px 10px;gap:6px;white-space:nowrap}
  .lb-bar{gap:8px}
  .lb-count{font-size:20px}
}