:root { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: #0b0b0d;
  color: #f2f2f4;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

header { padding: 1.5rem 0 1rem; }
h1 { margin: 0 0 .35rem; font-size: 1.4rem; font-weight: 600; letter-spacing: .01em; }
.warning { margin: 0; color: #ffb37a; font-size: .875rem; }

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
}

#grid img {
  width: 100%;
  display: block;
  border-radius: 6px;
  background: #17171b;
  aspect-ratio: 2 / 3;      /* a fixed box avoids reflow as thumbnails load */
  object-fit: contain;      /* show the whole photo -- never crop a guest out */
}

#empty { color: #8a8a92; text-align: center; padding: 3rem 0; }
#empty[hidden] { display: none; }

#viewer {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  z-index: 10;
}
#viewer[hidden] { display: none; }
#viewer-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#viewer-img { max-width: 100%; max-height: 74vh; object-fit: contain; }

/* Big tap targets pinned to the edges, clear of the photo's centre so a
   press-and-hold to save still lands on the image. */
#viewer-prev, #viewer-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #f2f2f4;
  -webkit-tap-highlight-color: transparent;
}
#viewer-prev { left: .25rem; }
#viewer-next { right: .25rem; }
#viewer-prev:disabled, #viewer-next:disabled { opacity: .18; }
.hint { margin: 0; color: #b9b9c0; font-size: .9rem; }
#viewer-close {
  font: inherit;
  padding: .6rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: #f2f2f4;
  color: #0b0b0d;
}