/* SARAH lightbox — click a screenshot for a big pop-up view.
   Flat, matches the site. No glow, no gradient. */

/* the clickable wrapper around each thumbnail */
.shot__link{
  display:block;
  position:relative;
  cursor:zoom-in;
  text-decoration:none;
  background:#04060f;
}
.shot__link img{display:block;width:100%;height:auto}
.shot__link::after{
  content:"Click to enlarge";
  position:absolute;
  right:.6rem;
  bottom:.6rem;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--paper);
  background:rgba(4,6,15,.82);
  border:1px solid var(--line);
  border-radius:4px;
  padding:.2rem .5rem;
  opacity:0;
  transition:opacity .15s ease;
  pointer-events:none;
}
.shot__link:hover::after,
.shot__link:focus-visible::after{opacity:1}
.shot__link:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* the dialog itself */
dialog.lightbox{
  border:0;
  padding:0;
  margin:auto;
  background:transparent;
  color:var(--paper);
  max-width:100vw;
  max-height:100vh;
  width:100%;
  height:100%;
  overflow:hidden;
}
dialog.lightbox::backdrop{background:rgba(4,6,15,.94)}

.lightbox__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  height:100%;
  padding:1rem;
  box-sizing:border-box;
}
.lightbox__stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  min-height:0;
  width:100%;
}
.lightbox__img{
  max-width:min(1400px,94vw);
  max-height:78vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border:1px solid var(--line);
  background:#0e152b;
  display:block;
}
.lightbox__cap{
  text-align:center;
  max-width:min(1400px,94vw);
}
.lightbox__cap strong{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.15rem;
  color:var(--paper);
}
.lightbox__cap span{
  display:block;
  font-size:.92rem;
  color:var(--dim);
  margin-top:.15rem;
}
.lightbox__count{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--faint);
}

/* controls */
.lightbox__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(14,21,43,.9);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--paper);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  padding:0;
}
.lightbox__btn:hover{background:var(--blue);border-color:var(--blue);color:#04101f}
.lightbox__btn--prev{left:.4rem}
.lightbox__btn--next{right:.4rem}
.lightbox__close{
  position:absolute;
  top:.6rem;
  right:.6rem;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(14,21,43,.9);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--paper);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  padding:0;
  z-index:2;
}
.lightbox__close:hover{background:var(--blue);border-color:var(--blue);color:#04101f}

body.lb-open{overflow:hidden}

@media(max-width:700px){
  .lightbox__btn{width:36px;height:52px;font-size:1.2rem}
  .lightbox__img{max-height:70vh}
  .lightbox__close{top:.4rem;right:.4rem;width:36px;height:36px}
  .shot__link::after{opacity:1;font-size:.65rem}
  .lightbox__cap strong{font-size:1rem}
}