/* ============================================================
   Lightbox — full-size photo viewer for the gallery
   ============================================================ */

/* photo tiles become buttons, so strip the button chrome */
.tile.lightbox-open{
  padding:0;
  border:1px solid var(--rule);
  background:#e6d9bd;
  cursor:zoom-in;
  font:inherit;
  display:block;
  width:100%;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tile.lightbox-open:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -12px rgba(42,33,23,0.45);
}
.tile.lightbox-open:focus-visible{
  outline:2px solid var(--seal);
  outline-offset:2px;
}

.lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(26,21,15,0.94);
  align-items:center;
  justify-content:center;
  padding:48px 24px;
}
.lightbox.open{display:flex;}

.lightbox-figure{
  margin:0;
  max-width:100%;
  max-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.lightbox-figure img{
  max-width:100%;
  max-height:calc(100vh - 150px);
  object-fit:contain;
  border:1px solid rgba(207,191,157,0.35);
  background:var(--paper);
}
.lightbox-figure figcaption{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.04em;
  color:#e8dcc4;
  text-align:center;
  max-width:60ch;
  line-height:1.6;
}

.lightbox-close,
.lightbox-nav{
  position:absolute;
  background:transparent;
  border:1px solid rgba(232,220,196,0.35);
  color:#e8dcc4;
  cursor:pointer;
  font-family:'IBM Plex Mono', monospace;
  line-height:1;
  border-radius:999px;
  transition:background .12s ease, border-color .12s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover{
  background:rgba(232,220,196,0.14);
  border-color:rgba(232,220,196,0.7);
}
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.lightbox-close{
  top:20px; right:24px;
  width:42px; height:42px;
  font-size:26px;
}
.lightbox-nav{
  top:50%;
  transform:translateY(-50%);
  width:46px; height:64px;
  font-size:30px;
}
.lightbox-nav.prev{left:18px;}
.lightbox-nav.next{right:18px;}

@media (max-width:640px){
  .lightbox{padding:56px 10px;}
  .lightbox-figure img{max-height:calc(100vh - 170px);}
  .lightbox-nav{width:40px; height:54px; font-size:26px;}
  .lightbox-nav.prev{left:6px;}
  .lightbox-nav.next{right:6px;}
  .lightbox-close{top:12px; right:12px;}
}