/* Photo layouts, shared by the website and the admin preview. Sizes use cqw
   (percent of the .photos container's width) so the scaled-down preview
   matches the real page. */
.photos {
  --pg-ink: #2e2a27;
  --pg-muted: #7d7269;
  --pg-accent: #a0685a;
  --pg-gold: #c8a97e;
  --pg-cream: #fbf8f3;
  container-type: inline-size;
  color: var(--pg-ink);
}
.photos button { font: inherit; color: inherit; }
.photos img { display: block; }
.photos__title { margin: 0 0 clamp(26px, 4cqw, 40px); text-align: center; font: 400 clamp(2.4rem, 5cqw, 3.4rem)/1.1 var(--display); }

/* ---------- Gallery: grid in your order, first photo featured ---------- */
.pg-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; max-width: 1080px; margin: 0 auto; }
@container (max-width: 760px) { .pg-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 480px) { .pg-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.pg-gallery__item {
  position: relative; display: block;
  aspect-ratio: 1;
  margin: 0; padding: 0; border: 0;
  border-radius: 14px; overflow: hidden;
  background: #efe7dc;
  cursor: zoom-in;
}
.pg-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.pg-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.pg-gallery__item:hover img { transform: scale(1.04); }
.pg-gallery__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 30px 14px 12px;
  background: linear-gradient(transparent, rgba(20, 16, 14, 0.62));
  color: #fff; text-align: left;
  font: italic 500 1.15rem/1.25 var(--display);
  opacity: 0; transition: opacity 0.3s;
}
.pg-gallery__item:hover .pg-gallery__cap, .pg-gallery__item:focus-visible .pg-gallery__cap { opacity: 1; }
@media (hover: none) { .pg-gallery__cap { opacity: 1; } }

/* ---------- Scrolling: one swipeable row ---------- */
.pg-carousel { position: relative; }
.pg-carousel__track {
  display: flex; gap: 16px;
  padding: 4px 16px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}
.pg-carousel__track::-webkit-scrollbar { display: none; }
.pg-carousel__slide { flex: 0 0 auto; margin: 0; scroll-snap-align: center; }
.pg-carousel__slide img { height: clamp(240px, 42cqw, 500px); width: auto; max-width: 86cqw; object-fit: cover; border-radius: 14px; background: #efe7dc; }
.pg-carousel__slide figcaption { margin-top: 10px; text-align: center; font: italic 500 1.2rem var(--display); color: var(--pg-muted); }
.pg-carousel__nav {
  position: absolute; top: calc(50% - 38px);
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  font-size: 1.7rem; line-height: 1;
  cursor: pointer;
}
.pg-carousel__nav--prev { left: 10px; }
.pg-carousel__nav--next { right: 10px; }
@container (max-width: 560px) { .pg-carousel__nav { display: none; } }

/* ---------- Slideshow: fading, slowly zooming ---------- */
.pg-slideshow { max-width: 1080px; margin: 0 auto; }
.pg-slideshow__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #2b2420; }
.pg-slideshow__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.pg-slideshow__slide.is-active { opacity: 1; }
.pg-slideshow__slide img { width: 100%; height: 100%; object-fit: cover; }
.pg-slideshow__slide.is-active img { animation: pg-kenburns 7s ease-out both; }
@keyframes pg-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.pg-slideshow__slide figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 70px 24px 26px;
  background: linear-gradient(transparent, rgba(20, 16, 14, 0.55));
  color: #fff; text-align: center;
  font: italic 500 clamp(1.3rem, 3cqw, 2.1rem) var(--display);
}
.pg-slideshow__dots { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.pg-slideshow__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #d8ccbf; cursor: pointer; transition: transform 0.2s, background 0.2s; }
.pg-slideshow__dot.is-active { background: var(--pg-accent); transform: scale(1.35); }

/* ---------- Polaroids: taped instant prints ---------- */
.pg-polaroid { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 26px; max-width: 1100px; margin: 0 auto; padding: 18px 6px 6px; }
.pg-polaroid__card {
  position: relative;
  display: flex; flex-direction: column;
  width: clamp(150px, 21cqw, 230px);
  margin: 0; padding: 12px 12px 0;
  border: 0;
  background: #fff;
  box-shadow: 0 10px 24px rgba(46, 42, 39, 0.15), 0 1px 3px rgba(46, 42, 39, 0.1);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s ease, box-shadow 0.3s;
  text-align: center;
  cursor: zoom-in;
}
.pg-polaroid__card:hover, .pg-polaroid__card:focus-visible { z-index: 1; transform: rotate(0deg) scale(1.05); box-shadow: 0 18px 38px rgba(46, 42, 39, 0.22); }
.pg-polaroid__photo { display: block; aspect-ratio: 1; overflow: hidden; background: #efe7dc; }
.pg-polaroid__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.03); }
.pg-polaroid__cap { display: block; min-height: 54px; padding: 10px 4px 12px; font: 500 1.4rem/1.15 'Caveat', 'Bradley Hand', cursive; color: #3b3330; }
.pg-polaroid__tape {
  position: absolute; top: -11px; left: 50%;
  width: 86px; height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(233, 218, 190, 0.78);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ---------- Arches ---------- */
.pg-arches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 40cqw), 1fr)); gap: 40px 28px; max-width: 1080px; margin: 0 auto; padding: 14px 12px 0; }
.pg-arches__item { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
@container (min-width: 620px) { .pg-arches__item:nth-child(even) { transform: translateY(28px); } }
.pg-arches__frame { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4.2; border-radius: 999px 999px 10px 10px; }
.pg-arches__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #efe7dc; }
.pg-arches__frame::after { content: ''; position: absolute; inset: -9px; border: 1px solid var(--pg-gold); border-radius: 999px 999px 16px 16px; pointer-events: none; }
.pg-arches__item:hover img { filter: brightness(1.04); }
.pg-arches__cap { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pg-muted); }

/* ---------- Film strip: a slowly drifting reel ---------- */
.pg-film { position: relative; padding: 30px 0; overflow: hidden; background: #1d1916; border-radius: 6px; }
.pg-film::before, .pg-film::after {
  content: ''; position: absolute; left: 0; right: 0; height: 9px;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(243, 236, 226, 0.88) 9px 21px, transparent 21px 30px);
}
.pg-film::before { top: 10px; }
.pg-film::after { bottom: 10px; }
.pg-film__reel { display: flex; width: max-content; animation: pg-film calc(var(--frames, 6) * 5s) linear infinite; }
.pg-film:hover .pg-film__reel, .pg-film:focus-within .pg-film__reel { animation-play-state: paused; }
.pg-film__run { display: flex; gap: 14px; padding-right: 14px; }
.pg-film__frame { position: relative; flex: 0 0 auto; width: clamp(150px, 24cqw, 260px); aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 0; background: #000; cursor: zoom-in; }
.pg-film__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; filter: sepia(0.18) saturate(0.9) contrast(1.05); }
.pg-film__num { position: absolute; left: 6px; top: 4px; font: 600 0.62rem var(--body); letter-spacing: 0.1em; color: #e8a94f; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
@keyframes pg-film { to { transform: translateX(-50%); } }

/* ---------- Our story: timeline ---------- */
.pg-story { position: relative; max-width: 900px; margin: 0 auto; padding: 6px 0; list-style: none; }
.pg-story::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent, var(--pg-gold) 6%, var(--pg-gold) 94%, transparent); }
.pg-story__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 52px; }
.pg-story__item:last-child { margin-bottom: 0; }
.pg-story__item:nth-child(even) .pg-story__photo { order: 2; }
.pg-story__item:nth-child(even) .pg-story__text { order: 1; text-align: right; }
.pg-story__dot { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border: 2px solid var(--pg-accent); border-radius: 50%; background: var(--pg-cream); transform: translate(-50%, -50%); }
.pg-story__photo { display: block; margin: 0; padding: 0; border: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 12px 30px rgba(46, 42, 39, 0.14); cursor: zoom-in; }
.pg-story__photo img { width: 100%; height: 100%; object-fit: cover; background: #efe7dc; }
.pg-story__num { font: 500 0.78rem var(--body); letter-spacing: 0.24em; color: var(--pg-accent); }
.pg-story__text p { margin: 8px 0 0; font: italic 500 clamp(1.35rem, 2.8cqw, 1.9rem)/1.35 var(--display); }
@container (max-width: 620px) {
  .pg-story::before { left: 14px; }
  .pg-story__item { grid-template-columns: 1fr; gap: 14px; padding-left: 42px; }
  .pg-story__dot { left: 14px; top: 26px; }
  .pg-story__item:nth-child(even) .pg-story__photo, .pg-story__item:nth-child(even) .pg-story__text { order: 0; text-align: left; }
}

/* ---------- Full-screen viewer ---------- */
.pg-lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(18, 14, 12, 0.95);
  color: #fff;
}
.pg-lightbox::backdrop { background: transparent; }
.pg-lightbox__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; margin: 0; padding: 60px 76px 28px; box-sizing: border-box; }
.pg-lightbox__img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; border-radius: 6px; }
.pg-lightbox figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 16px; text-align: center; }
.pg-lightbox__cap { margin: 0; font: italic 500 1.35rem var(--display); }
.pg-lightbox__count { font: 400 0.8rem var(--body); letter-spacing: 0.12em; opacity: 0.65; }
.pg-lightbox__close, .pg-lightbox__nav {
  position: fixed;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff; line-height: 1;
  cursor: pointer;
}
.pg-lightbox__close { top: 16px; right: 18px; width: 42px; height: 42px; font-size: 1.6rem; }
.pg-lightbox__nav { top: 50%; width: 50px; height: 50px; font-size: 1.9rem; transform: translateY(-50%); }
.pg-lightbox__nav--prev { left: 16px; }
.pg-lightbox__nav--next { right: 16px; }
.pg-lightbox__close:hover, .pg-lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }
@media (max-width: 600px) {
  .pg-lightbox__figure { padding: 60px 12px 90px; }
  .pg-lightbox__nav { top: auto; bottom: 20px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-slideshow__slide { transition: none; }
  .pg-slideshow__slide.is-active img { animation: none; }
  .pg-film__reel { animation: none; }
  .pg-film { overflow-x: auto; }
  .pg-gallery__item img, .pg-polaroid__card { transition: none; }
}