:root {
  --bg: #fff;
  --ink: #1d1a17;
  --tile: #f2efeb;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --gap: 8px;
  --radius: 8px;
  --page: min(1440px, 100% - 32px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

.hero {
  padding: clamp(40px, 8vw, 96px) 16px clamp(28px, 5vw, 56px);
  text-align: center;
}

.hero h1 {
  margin: 0;
  font: 500 clamp(44px, 8vw, 96px)/1 var(--serif);
  letter-spacing: -.01em;
}

#gallery {
  width: var(--page);
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.row { display: flex; gap: var(--gap); }

.tile {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c, var(--tile));
  cursor: zoom-in;
  isolation: isolate;
}

.tile img, .tile video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .5s;
}
.tile img.loaded, .tile video.ready { opacity: 1; }

.tile:hover img, .tile:hover video { transform: scale(1.03); }
.tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Lightbox */

.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(10 9 8 / .97);
  color: #f3efe9;
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; animation: fade .2s ease; }

@keyframes fade { from { opacity: 0; } }

.lb-stage {
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100dvh;
  padding: 56px 16px 16px;
  min-width: 0;
}

.lb-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
}
.lb-media img, .lb-media video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  touch-action: pan-y;
}

.lb-caption {
  padding: 12px 0 0;
  text-align: center;
  font: 500 20px/1.3 var(--serif);
}
.lb-caption:empty { display: none; }

.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  color: #f3efe9;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
.lb-btn:hover { background: rgb(255 255 255 / .18); }
.lb-close { top: 12px; right: 12px; font-size: 18px; }
.lb-prev, .lb-next { top: 50%; translate: 0 -50%; font-size: 34px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

@media (max-width: 640px) {
  :root { --gap: 4px; --radius: 4px; --page: calc(100% - 8px); }
  .lb-prev, .lb-next { display: none; }
  .lb-stage { padding: 56px 0 12px; }
  .lb-media img, .lb-media video { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}