/* ============================================================ *
 *  Lightbox for exhibit image sets (currently /hitchhikers).    *
 *  Generic: activates only when a.lb triggers exist on the page *
 *  and lightbox.js has injected .lb-overlay. Expedition Ledger  *
 *  tokens from apj.css (:root).                                 *
 * ============================================================ */

/* the trigger links sit over the inline scans; show the cursor + a faint cue */
a.lb,a.lb-open{display:block;cursor:zoom-in;position:relative}
a.lb img,a.lb-open img{display:block}

.lb-overlay{position:fixed;inset:0;z-index:200;display:none;
    align-items:center;justify-content:center;
    background:rgba(27,29,22,.94);padding:clamp(16px,4vw,60px)}
.lb-overlay.is-open{display:flex}
@media(prefers-reduced-motion:no-preference){
    .lb-overlay.is-open .lb-img{animation:lb-in .28s ease}
    @keyframes lb-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
}

.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;
    max-width:min(1100px,92vw);max-height:90vh}
.lb-img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;
    background:var(--white);padding:14px;box-sizing:border-box;
    border:1px solid var(--hair-2);box-shadow:10px 10px 0 rgba(0,0,0,.4)}
.lb-cap{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--paper);text-align:center;max-width:62ch;line-height:1.7}
.lb-cap b{color:var(--phos);font-weight:400;margin-right:.7em}

/* controls */
.lb-btn{position:fixed;z-index:201;display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border:1px solid rgba(247,242,228,.35);background:rgba(27,29,22,.55);
    color:var(--paper);font-family:var(--disp);font-size:26px;line-height:1;cursor:pointer;
    transition:.18s;padding:0}
.lb-btn:hover,.lb-btn:focus-visible{border-color:var(--phos);color:var(--phos);
    background:rgba(27,29,22,.85);outline:none}
.lb-close{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);font-size:30px}
.lb-prev{left:clamp(8px,2.5vw,30px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(8px,2.5vw,30px);top:50%;transform:translateY(-50%)}
@media(max-width:680px){
    .lb-prev{left:8px}.lb-next{right:8px}
    .lb-btn{width:42px;height:42px;font-size:22px}
}