/* E11EVEN photo viewer (lightbox).
   Markup: any <a data-lb href="full.jpg"> or element with data-lb-src.
   Group with data-lb-group="x" for prev/next. Variant via data-lb-variant on the
   trigger or a parent: "classic" | "film" | "frameless". */
.lbx{position:fixed;inset:0;z-index:100050;display:none;align-items:center;justify-content:center;
  background:rgba(6,6,6,.92);backdrop-filter:blur(4px);opacity:0;transition:opacity .28s ease;cursor:zoom-out}
.lbx.open{display:flex;opacity:1}
.lbx.armed{cursor:pointer}            /* pointer is in the margin: clicking closes */
.lbx .lb-stage{position:relative;width:calc(100vw - 9vw);height:calc(100vh - 9vh);display:flex;align-items:center;justify-content:center}
.lbx figure{position:relative;max-width:100%;max-height:100%;margin:0;overflow:hidden;
  /* elegant black + white frame, a few px thick */
  border:2px solid #f4efe6;box-shadow:0 0 0 2px #0a0a0a, 0 40px 120px rgba(0,0,0,.7);
  transform:scale(.97);transition:transform .3s cubic-bezier(.2,.7,0,1);background:#0a0a0a}
.lbx.open figure{transform:scale(1)}
.lbx img{display:block;max-width:calc(100vw - 9vw);max-height:calc(100vh - 9vh);width:auto;height:auto;
  cursor:zoom-in;transition:transform .28s cubic-bezier(.2,.7,0,1);transform-origin:center center;user-select:none;-webkit-user-drag:none}
.lbx.zoomed img{cursor:zoom-out;transition:transform .06s linear}

/* close button, sits OUTSIDE the photo frame (top-right), arms when pointer leaves the photo */
.lbx .lb-x{position:absolute;top:-3.2rem;right:-.4rem;z-index:2;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(244,239,230,.5);background:rgba(10,10,10,.5);color:#f4efe6;font-size:1.1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.lbx .lb-x:hover,.lbx.armed .lb-x{background:#f4efe6;color:#0a0a0a;border-color:#f4efe6;transform:scale(1.08)}
.lbx .lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(244,239,230,.35);background:rgba(10,10,10,.45);color:#f4efe6;font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;opacity:.7}
.lbx .lb-nav:hover{opacity:1;background:rgba(202,161,92,.85);color:#0a0a0a;border-color:transparent}
.lbx .lb-prev{left:-3.4rem}.lbx .lb-next{right:-3.4rem}
.lbx .lb-cap{position:absolute;left:0;right:0;bottom:-2.4rem;text-align:center;color:rgba(244,239,230,.7);
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.lbx .lb-count{position:absolute;left:0;top:-3rem;color:rgba(244,239,230,.55);font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.72rem;letter-spacing:.18em}

/* variant: film (thicker high-contrast frame, deeper zoom) */
.lbx[data-variant="film"] figure{border:3px solid #0a0a0a;box-shadow:0 0 0 3px #f4efe6, 0 40px 120px rgba(0,0,0,.75)}
/* variant: frameless (just a hairline) */
.lbx[data-variant="frameless"] figure{border:1px solid rgba(244,239,230,.5);box-shadow:0 30px 90px rgba(0,0,0,.7)}

@media(max-width:760px){
  .lbx .lb-stage{width:calc(100vw - 6vw);height:calc(100vh - 14vh)}
  .lbx img{max-width:calc(100vw - 6vw);max-height:calc(100vh - 18vh)}
  .lbx .lb-prev{left:.3rem}.lbx .lb-next{right:.3rem}
  .lbx .lb-x{top:-3rem;right:0}
}
/* hint: any image opted into the viewer shows the zoom cursor on the page */
[data-lb],[data-lb-src]{cursor:zoom-in}