:root {
  --page-pad: clamp(16px, 4vw, 32px);
  --grid-gap: clamp(0.35rem, 1vw, 0.5rem);
  --desktop-size: 100px;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  gap: 24px;
  padding: var(--page-pad);
  min-height: 100svh;
  min-height: 100vh;
  background: #000814;
  overflow-x: hidden;
}

.site_intro {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  color: #fff;
  font-family: system-ui, sans-serif;
}

.site_intro h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1;
}

.site_kicker {
  margin: 0 0 2px;
  color: #9bd1ff;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site_email {
  color: #dbeafe;
  text-decoration: none;
  font-size: 15px;
  margin-top: 2px;
}

.site_email:hover {
  text-decoration: underline;
}

.gallery_wrapper {
  --img-size: min(var(--desktop-size), calc((100vw - (var(--page-pad) * 2) - (var(--grid-gap) * 5)) / 6));
  display: grid;
  gap: var(--grid-gap);
  width: min(100%, calc(var(--img-size) * 6 + var(--grid-gap) * 5));
  grid-template-columns: repeat(6, minmax(0, var(--img-size)));
  grid-auto-rows: var(--img-size);
  justify-content: center;
}

.gallery_link {
  position: relative;
  display: block;
  grid-column: span 2;
  aspect-ratio: 1;
  text-decoration: none;
  color: #fff;
}

img {
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  clip-path: path(
    "M 80 20 C 100 0 100 0 120 20 C 140 40 160 60 180 80 C 200 100 200 100 180 120 C 160 140 140 160 120 180 C 100 200 100 200 80 180 C 60 160 40 140 20 120 C 0 100 0 100 20 80 Z"
  );
  transition: filter 500ms, clip-path 500ms;
}

.gallery_link:nth-of-type(4),
.gallery_link:nth-of-type(9) {
  grid-column: 2 / span 2;
}

.gallery_link:hover {
  z-index: 100;
}

img:hover {
  z-index: 100;
  clip-path: path(
    "M 0 0 C 100 0 100 0 200 0 C 200 50 200 50 200 80 C 200 100 200 100 200 120 C 200 150 200 150 200 200 C 100 200 100 200 0 200 C 0 150 0 150 0 120 C 0 100 0 100 0 80 Z"
  );
}

img:not(:hover) {
  animation: zIndexFix 500ms;
}

.gallery_wrapper:hover > .gallery_link img {
  filter: brightness(0.5) saturate(0.5);
}

.gallery_wrapper > .gallery_link:hover img {
  filter: brightness(1) saturate(1.5);
}

.empty_state {
  width: min(520px, calc(100vw - 32px));
  padding: 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  text-align: center;
  font-family: system-ui, sans-serif;
}

.empty_state h1 {
  margin: 0 0 10px;
}

.empty_state p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.empty_state code {
  color: #9bd1ff;
}

@keyframes zIndexFix {
  0%,
  100% {
    z-index: 10;
  }
}

@media (max-width: 1100px) {
  body {
    place-items: start center;
    align-content: start;
    gap: 20px;
  }

  .gallery_wrapper {
    --img-size: min(148px, calc((100vw - (var(--page-pad) * 2) - (var(--grid-gap) * 3)) / 4));
    width: min(100%, calc(var(--img-size) * 4 + var(--grid-gap) * 3));
    grid-template-columns: repeat(4, minmax(0, var(--img-size)));
    grid-auto-rows: var(--img-size);
  }

  .gallery_link {
    width: 100%;
    grid-column: span 1;
  }

  .gallery_link:nth-of-type(4),
  .gallery_link:nth-of-type(9) {
    grid-column: span 1;
  }

  img {
    clip-path: none;
    border-radius: 18px;
    width: 100%;
    height: 100%;
    max-width: none;
    position: static;
    inset: auto;
    transform: none;
  }

  img:hover {
    clip-path: none;
  }

  .gallery_wrapper:hover > .gallery_link img {
    filter: none;
  }

  .gallery_wrapper > .gallery_link:hover img {
    filter: brightness(1.02) saturate(1.12);
  }
}

@media (max-width: 560px) {
  body {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 18px;
  }

  .gallery_wrapper {
    --mobile-gap: 14px;
    --img-size: min(112px, calc((100vw - (var(--page-pad) * 2) - var(--mobile-gap)) / 2));
    gap: var(--mobile-gap);
    width: min(100%, calc(var(--img-size) * 2 + var(--mobile-gap)));
    grid-template-columns: repeat(2, minmax(0, var(--img-size)));
    grid-auto-rows: var(--img-size);
    margin: 0 auto;
    padding: 0;
  }

  .gallery_link {
    width: 100%;
    grid-column: span 1;
  }

  .gallery_link:nth-of-type(4),
  .gallery_link:nth-of-type(9) {
    grid-column: span 1;
  }

  img {
    clip-path: none;
    border-radius: 18px;
    width: 100%;
    height: 100%;
    max-width: none;
    position: static;
    inset: auto;
    transform: none;
  }

  img:hover {
    clip-path: none;
  }

  .gallery_wrapper:hover > .gallery_link img {
    filter: none;
  }

  .gallery_wrapper > .gallery_link:hover img {
    filter: brightness(1.02) saturate(1.12);
  }
}

@media (hover: none) {
  .gallery_wrapper:hover > .gallery_link img {
    filter: none;
  }

  .gallery_wrapper > .gallery_link:hover img {
    filter: none;
  }
}