@import url("https://fonts.googleapis.com/css2?family=Fanwood+Text&family=Montserrat:wght@300;400&display=swap");

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
html { background: #080808; }

body {
  color: #fff;
  background: #080808;
  font-family: "Montserrat", Arial, sans-serif;
  overflow: hidden;
}

.js body {
  opacity: 1;
}

.js body:not(.is-page-ready) .gallery-heading h1,
.js body:not(.is-page-ready) .gallery-heading p,
.js body:not(.is-page-ready) .gallery-photo { opacity: 0; }

.js body.is-page-leaving { pointer-events: none; }

.gallery-shell {
  display: flex;
  width: 100vw;
  height: 100svh;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.gallery-header {
  display: flex;
  flex: 0 0 31vw;
  height: 100svh;
  min-height: 620px;
  flex-direction: column;
  padding: 5vw 3vw 7vw 7vw;
}

.gallery-back {
  align-self: flex-start;
  color: #77736e;
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.gallery-back:hover, .gallery-back:focus-visible { color: #fff; outline: none; }

.gallery-heading { margin: auto 0; }

h1 {
  margin: 0;
  font-family: "Fanwood Text", Georgia, serif;
  font-size: clamp(3.4rem, 5vw, 6rem);
  font-weight: 400;
  line-height: 0.95;
}

.gallery-heading p {
  margin: 1.4rem 0 0;
  color: #8c8984;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 8), 29vw);
  grid-template-rows: repeat(2, 42svh);
  flex: 0 0 auto;
  align-items: center;
  align-content: center;
  gap: 0 clamp(0.4rem, 1vw, 1rem);
  width: max-content;
  height: 100svh;
  padding: 5svh 12vw 5svh 1vw;
}

.gallery-photo {
  --x: 0px;
  --y: 0px;
  --angle: 0deg;
  --scale: 1;
  position: relative;
  display: block;
  justify-self: center;
  align-self: center;
  flex: 0 0 auto;
  width: max-content;
  max-height: 42svh;
  margin: 0;
  padding: clamp(5px, 0.55vw, 9px);
  border: 0;
  background: #f1eee7;
  cursor: zoom-in;
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--angle)) scale(var(--scale));
  transform-origin: 50% 50%;
  box-shadow: 0 18px 35px rgb(0 0 0 / 0.28);
  transition: opacity 160ms ease, transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: pan-x;
}

.gallery-photo:nth-child(1) { grid-column: 1; grid-row: 1; margin: 8svh 0 0 1vw; z-index: 9; }
.gallery-photo:nth-child(2) { grid-column: 2; grid-row: 1; margin: -4svh 0 0 -2vw; z-index: 3; }
.gallery-photo:nth-child(3) { grid-column: 3; grid-row: 1; margin: 7svh 0 0 -4vw; z-index: 4; }
.gallery-photo:nth-child(4) { grid-column: 1; grid-row: 2; margin: -2svh 0 0 8vw; z-index: 2; }
.gallery-photo:nth-child(5) { grid-column: 2; grid-row: 2; margin: 4svh 0 0 4vw; z-index: 4; }
.gallery-photo:nth-child(6) { grid-column: 3; grid-row: 2; margin: 0 0 0 1vw; z-index: 3; }
.gallery-photo:nth-child(7) { grid-column: 4; grid-row: 1; margin: -2svh 0 0 -2vw; z-index: 2; }
.gallery-photo:nth-child(8) { grid-column: 5; grid-row: 1; margin: 7svh 0 0 -4vw; z-index: 4; }
.gallery-photo:nth-child(9) { grid-column: 4; grid-row: 2; margin: 2svh 0 0 3vw; z-index: 3; }
.gallery-photo:nth-child(10) { grid-column: 5; grid-row: 2; margin: -1svh 0 0 1vw; z-index: 2; }
.gallery-photo:nth-child(11) { grid-column: 6; grid-row: 1; margin: 5svh 0 0 -2vw; z-index: 4; }
.gallery-photo:nth-child(12) { grid-column: 6; grid-row: 2; margin: -3svh 0 0 3vw; z-index: 3; }
.gallery-photo:nth-child(13) { grid-column: 7; grid-row: 1; margin: -2svh 0 0 -3vw; z-index: 2; }
.gallery-photo:nth-child(14) { grid-column: 7; grid-row: 2; margin: 4svh 0 0 2vw; z-index: 4; }
.gallery-photo:nth-child(15) { grid-column: 8; grid-row: 1; margin: 6svh 0 0 -2vw; z-index: 3; }
.gallery-photo:nth-child(16) { grid-column: 8; grid-row: 2; margin: -2svh 0 0 2vw; z-index: 4; }
.gallery-photo:nth-child(17) { grid-column: 9; grid-row: 1; margin: 3svh 0 0 -3vw; z-index: 2; }
.gallery-photo:nth-child(18) { grid-column: 9; grid-row: 2; margin: 5svh 0 0 1vw; z-index: 3; }
.gallery-photo:nth-child(6n + 1) { --angle: -2.2deg; }
.gallery-photo:nth-child(6n + 2) { --angle: 1.4deg; }
.gallery-photo:nth-child(6n + 3) { --angle: 2.6deg; }
.gallery-photo:nth-child(6n + 4) { --angle: -1.1deg; }
.gallery-photo:nth-child(6n + 5) { --angle: 1.9deg; }
.gallery-photo:nth-child(6n) { --angle: -2.7deg; }
.gallery-grid:not(.has-zoomed-photo) .gallery-photo:hover { --scale: 1.006; z-index: 30; }
.gallery-photo.is-zoom-source { --scale: 1 !important; pointer-events: none; }
.gallery-photo:focus-visible { z-index: 30; outline: 1px solid rgb(255 255 255 / 0.45); outline-offset: 3px; }
.gallery-photo.is-dragging { --scale: 1.018; z-index: 40; cursor: grabbing; transition: opacity 100ms ease; }

.gallery-photo img {
  display: block;
  width: auto;
  max-width: 32vw;
  height: auto;
  max-height: calc(42svh - 18px);
  pointer-events: none;
  user-select: none;
}

.gallery-photo.is-portrait {
  max-height: 52svh;
}

.gallery-photo.is-portrait img {
  max-height: calc(52svh - 18px);
}

.gallery-photo-placeholder {
  display: block;
  cursor: default;
}

.gallery-photo.is-focused {
  --scale: 1;
  z-index: 110;
  cursor: zoom-out;
  transition: none;
  pointer-events: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  visibility: hidden;
  padding: 4vw;
  background: rgb(3 3 3 / 0.94);
  opacity: 0;
  transition: opacity 340ms ease, visibility 0s linear 340ms;
}

.lightbox.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }

.lightbox__image {
  display: none;
  max-width: 88vw;
  max-height: 86svh;
  width: auto;
  height: auto;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 240ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox.is-open .lightbox__image { opacity: 1; transform: scale(1); }

.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: #fff;
  border: 0;
  background: none;
  font: 300 2rem/1 "Fanwood Text", Georgia, serif;
  cursor: pointer;
  opacity: 0.7;
}

.lightbox__close:hover, .lightbox__close:focus-visible { opacity: 1; outline: none; }

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .gallery-shell {
    display: block;
    width: 100vw;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .gallery-header {
    height: 30svh;
    min-height: 235px;
    padding: 1.5rem 1.5rem 0.75rem;
  }

  h1 { font-size: clamp(3rem, 15vw, 4.6rem); }

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
    width: 100%;
    height: auto;
    padding: 0.75rem 6vw 16vh;
  }

  .gallery-grid .gallery-photo,
  .gallery-grid .gallery-photo:nth-child(n) {
    grid-column: 1 / span 7;
    grid-row: auto;
    width: 100%;
    max-height: none;
    margin: 0;
    z-index: auto;
    touch-action: none;
  }

  .gallery-grid .gallery-photo:nth-child(even) { grid-column: 6 / span 7; }
  .gallery-grid .gallery-photo.is-portrait {
    width: 88%;
    max-height: none;
    justify-self: center;
  }
  .gallery-grid .gallery-photo.is-portrait:nth-child(odd) { grid-column: 1 / span 6; }
  .gallery-grid .gallery-photo.is-portrait:nth-child(even) { grid-column: 7 / span 6; }
  .gallery-grid .gallery-photo:nth-child(n + 2) { margin-top: clamp(-1.8rem, -6vw, -1.15rem); }
  .gallery-grid .gallery-photo:nth-child(1) { z-index: 9; }
  .gallery-grid .gallery-photo:nth-child(2) { z-index: 2; }
  .gallery-grid .gallery-photo:nth-child(3) { z-index: 3; }
  .gallery-grid .gallery-photo:nth-child(4) { z-index: 4; }
  .gallery-grid .gallery-photo:nth-child(5) { z-index: 3; }
  .gallery-grid .gallery-photo:nth-child(6) { z-index: 2; }
  .gallery-grid .gallery-photo:nth-child(7) { z-index: 3; }
  .gallery-grid .gallery-photo:nth-child(8) { z-index: 4; }
  .gallery-grid .gallery-photo:nth-child(9) { z-index: 3; }

  .gallery-grid .gallery-photo img { width: 100%; max-width: none; max-height: none; }
  .gallery-grid .gallery-photo.is-portrait img { max-height: none; }
  .gallery-photo.is-focused img {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
  }
  .lightbox { padding: 1rem; }
  .lightbox__image { max-width: 92vw; max-height: 82svh; }
}

@media (prefers-reduced-motion: reduce) {
  body, .gallery-heading h1, .gallery-heading p, .gallery-photo, .lightbox, .lightbox__image {
    transition: none;
    animation: none !important;
  }
}