/* Sabeti Lab · Holiday Cards — lightbox (split from app.css; see ARCHITECTURE.md) */
/* ───────── lightbox: any card page, big ───────── */
.walk .item:not(.video) .item-frame{cursor:zoom-in}
body.simple .flat .item:not(.video) .item-frame{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:clamp(12px,3vw,40px) clamp(12px,6vw,90px);color:var(--paper);touch-action:none}
.lightbox[hidden]{display:none}
.lb-back{position:absolute;inset:0;background:rgba(8,11,10,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:lb-in .25s ease-out}
.lb-fig{position:relative;margin:0;max-width:100%;max-height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:14px;animation:lb-pop .32s cubic-bezier(.2,.8,.2,1)}
.lb-fig img{max-width:min(100%,1600px);max-height:calc(var(--vh) - 130px);width:auto;height:auto;object-fit:contain;background:#fff;border-radius:3px;box-shadow:0 40px 120px -20px rgba(0,0,0,.85);cursor:zoom-out;transition:filter .3s}
.lb-fig img.lb-loading{filter:blur(1px)}
.lb-cap{display:flex;gap:6px 16px;align-items:baseline;justify-content:center;flex-wrap:wrap;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.85;text-align:center}
.lb-cap b{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:.02em;text-transform:none}
.lb-cap a{text-decoration:none;opacity:.65;border-bottom:1px solid var(--gold);padding-bottom:1px;letter-spacing:.06em;text-transform:none;font-size:12px}
.lb-cap a:hover{opacity:1}
.lb-x,.lb-nav{position:absolute;border-radius:50%;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:background .2s}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-x{top:14px;right:16px;width:44px;height:44px;font-size:28px;line-height:1;font-weight:300}
.lb-nav{top:50%;width:48px;height:48px;margin-top:-24px}
.lb-nav::before{content:"";width:12px;height:12px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:translateX(-2px) rotate(45deg)}
.lb-nav.prev{left:18px}.lb-nav.prev::before{transform:translateX(2px) rotate(-135deg)}
.lb-nav.next{right:18px}
.lb-nav[hidden]{display:none}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
html.lb-open,html.lb-open body{overflow:hidden;scrollbar-gutter:stable}
/* while a page is enlarged the page's own chrome steps back (and out of the tab order) */
html.lb-open .bar,html.lb-open .rail,html.lb-open .corner,html.lb-open .editor{visibility:hidden;opacity:0;pointer-events:none}
@keyframes lb-in{from{opacity:0}}
@keyframes lb-pop{from{opacity:0;transform:scale(.94)}}
body.narrow .lightbox{padding:12px 12px 70px}
body.narrow .lb-back{backdrop-filter:none;-webkit-backdrop-filter:none}
body.narrow .lb-fig img{max-height:calc(var(--vh) - 170px)}
body.narrow .lb-nav{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));margin-top:0;width:44px;height:44px}
body.narrow .lb-nav.prev{left:calc(50% - 60px)}body.narrow .lb-nav.next{right:calc(50% - 60px)}
body.narrow .lb-x{top:10px;right:10px;width:40px;height:40px}
/* phones held sideways: arrows back at the sides, more room for the picture */
@media (orientation:landscape) and (max-height:520px){body.narrow .lightbox{padding:10px 64px}body.narrow .lb-fig{gap:6px}body.narrow .lb-fig img{max-height:calc(var(--vh) - 70px)}body.narrow .lb-nav{top:50%;bottom:auto;margin-top:-22px}body.narrow .lb-nav.prev{left:10px}body.narrow .lb-nav.next{right:10px}body.narrow .lb-cap b{font-size:16px}}
@media (prefers-reduced-motion:reduce){.lb-back,.lb-fig{animation:none}}