/* Enlarged image overlay. Shared by every page that shows a gallery — it used
   to live inline in one page only, which is why clicking a photo on the other
   page did nothing. */
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(6,6,8,.95);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:clamp(.5rem,4vw,3rem);
  touch-action:pan-y;
}
.lb.on{display:flex}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:.8rem}
.lb-stage{max-width:100%;max-height:86vh;overflow:auto;-webkit-overflow-scrolling:touch;
  display:grid;place-items:center;overscroll-behavior:contain}
.lb-fig img{
  max-width:100%;max-height:86vh;width:auto;height:auto;display:block;
  cursor:zoom-in;image-rendering:auto;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9);
  animation:lbIn .28s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes lbIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.lb-fig figcaption{color:#a5a5a5;font-size:.72rem;letter-spacing:.1em;
  text-align:center;max-width:60ch}
.lb button{
  position:absolute;background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.22);width:46px;height:46px;
  font-size:1.5rem;line-height:1;cursor:pointer;border-radius:50%;
  display:grid;place-items:center;transition:background .25s,transform .25s;
}
.lb button:hover{background:var(--primary,#ff791b);border-color:var(--primary,#ff791b);
  color:#101010;transform:scale(1.06)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-x{top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);font-size:1.7rem}
.lb-p{left:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
.lb-n{right:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
.lb-p:hover,.lb-n:hover{transform:translateY(-50%) scale(1.06)}
/* image counter */
.lb-count{
  position:absolute;top:clamp(.9rem,3vw,1.7rem);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:.7rem;letter-spacing:.18em;
  font-family:var(--mono,ui-monospace,monospace);pointer-events:none;
}
.lb button[hidden]{display:none}

/* ── phone ──
   The arrows shrink and move to the bottom corners where thumbs actually
   reach, and the picture takes nearly the whole screen. Swiping is the
   primary gesture; the arrows are the fallback. */
@media(max-width:620px){
  .lb{padding:.4rem}
  .lb-fig{gap:.5rem;width:100%}
  .lb-fig img{max-height:88vh;max-width:100%;border-width:0}
  .lb-fig figcaption{font-size:.66rem;padding:0 .8rem}
  .lb button{width:46px;height:46px;background:rgba(0,0,0,.55);
    border-color:rgba(255,255,255,.28)}
  .lb-x{top:.6rem;right:.6rem}
  .lb-p,.lb-n{top:auto;bottom:1.1rem;transform:none}
  .lb-p{left:1.1rem}
  .lb-n{right:1.1rem}
  .lb-p:hover,.lb-n:hover{transform:scale(1.06)}
  .lb-count{top:auto;bottom:1.9rem}
}
/* landscape phones: keep the arrows off the image */
@media(max-width:900px) and (orientation:landscape){
  .lb-fig img{max-height:92vh}
}

/* ── fill-height zoom ──
   Fitting a 16:10 screenshot inside a portrait phone leaves it about a quarter
   of the screen. Zoomed, the image is sized to the viewport's long edge and the
   stage pans, so UI text is actually legible. */
.lb.zoomed .lb-stage{width:100%;height:86vh;max-height:86vh;place-items:start}
.lb.zoomed .lb-fig img{
  max-width:none;max-height:none;width:auto;height:84vh;cursor:zoom-out;
}
.lb.zoomed .lb-fig figcaption,.lb.zoomed .lb-hint{opacity:0}
.lb-hint{
  position:absolute;bottom:clamp(.7rem,2.4vw,1.3rem);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.45);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;pointer-events:none;transition:opacity .3s;
}
@media (hover:hover){ .lb-hint{display:none} }
@media(max-width:620px){
  .lb-stage,.lb.zoomed .lb-stage{max-height:80vh;height:auto}
  .lb.zoomed .lb-stage{height:80vh}
  .lb.zoomed .lb-fig img{height:78vh}
  .lb-hint{bottom:4.6rem}
}