/* A photographic viewing room: full frame, neighboring prints, contact sheet. */
.lightbox {
  padding: 22px clamp(18px,3.2vw,60px) 18px;
  color: #eeeae0;
  background: radial-gradient(ellipse at 50% 35%,#253437 0%,#111f25 52%,#08161d 100%);
  overflow: hidden;
}
.lightbox[open] { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 20px; }
.lightbox-top { min-height: 50px; align-items: center; }
.lightbox-heading { display: flex; flex-direction: column; gap: 5px; }
.lightbox-heading > span:first-child { font: 400 27px/1 var(--font-editorial); letter-spacing: -.02em; }
.lightbox-heading > span:last-child { font-size: 10px; color: #a3b3ae; }
.lightbox-tools { display: flex; align-items: center; gap: 26px; }
#lightbox-count { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .06em; color: #bcc8bf; }
.lightbox-view { display: grid; grid-template-columns: minmax(95px,1fr) minmax(0,3.6fr) minmax(95px,1fr); gap: 28px; min-width: 0; min-height: 0; align-items: center; }
.lightbox-stage { height: 100%; min-width: 0; min-height: 0; margin: 0; display: flex; align-items: center; justify-content: center; }
.lightbox-stage img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 70px #0005; opacity: 1; transition: opacity .24s ease; }
.lightbox.is-changing .lightbox-stage img { opacity: .25; }
.lightbox-neighbor { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 19px; padding: 0; width: min(100%,150px); }
.lightbox-neighbor > img { width: 100%; aspect-ratio: 2/3; object-fit: cover; opacity: .46; filter: saturate(.7); transition: opacity .3s,filter .3s; }
.lightbox-neighbor:hover > img, .lightbox-neighbor:focus-visible > img { opacity: .9; filter: saturate(1); }
.lightbox-neighbor .button { min-width: 104px; color: #c7d1c7; }
.lightbox-thumbnails { position: relative; display: flex; gap: 7px; width: max-content; max-width: 100%; justify-self: center; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 5px; }
.lightbox-thumbnails::-webkit-scrollbar { display: none; }
.lightbox-thumb { flex: 0 0 44px; width: 44px; height: 66px; padding: 0; opacity: .4; transition: opacity .2s; outline: 1px solid transparent; outline-offset: 3px; }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-thumb:hover, .lightbox-thumb:focus-visible { opacity: .85; }
.lightbox-thumb[aria-current="true"] { opacity: 1; outline-color: #d9c5a6; }
.lightbox-thumb:focus-visible { outline: 2px solid #d9c5a6; outline-offset: 3px; }
@media (max-width: 700px) {
  .lightbox { padding: 16px 16px max(14px,env(safe-area-inset-bottom)); }
  .lightbox[open] { gap: 16px; }
  .lightbox-top { gap: 10px; min-height: 42px; }
  .lightbox-heading > span:first-child { font-size: 23px; }
  .lightbox-heading > span:last-child { font-size: 9px; }
  .lightbox-tools { gap: 12px; }
  #lightbox-count { font-size: 9px; letter-spacing: 0; }
  .lightbox-close.button { padding-inline: 13px; }
  .lightbox-view { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0,1fr) auto; gap: 14px; height: 100%; }
  .lightbox-stage { grid-column: 1/-1; grid-row: 1; }
  .lightbox-neighbor { grid-row: 2; width: auto; }
  .lightbox-prev { justify-self: start; }
  .lightbox-next { justify-self: end; }
  .lightbox-neighbor > img { display: none; }
  .lightbox-neighbor .button { min-width: 99px; }
  .lightbox-thumb { flex-basis: 34px; width: 34px; height: 51px; }
  .lightbox-thumbnails { gap: 6px; }
}
@media (max-width: 360px) {
  .lightbox-heading > span:first-child { font-size: 21px; }
  .lightbox-heading > span:last-child { font-size: 8px; }
  .lightbox-tools { gap: 8px; }
}
@media (max-height: 550px) and (min-width: 701px) {
  .lightbox { padding-block: 12px; }
  .lightbox[open] { gap: 12px; }
  .lightbox-neighbor { width: 85px; gap: 8px; }
  .lightbox-neighbor > img { max-height: 105px; object-fit: cover; }
  .lightbox-thumb { flex-basis: 30px; width: 30px; height: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-stage img, .lightbox-neighbor > img, .lightbox-thumb { transition: none; }
}