* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Gantari", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background: #000;
  color: #fff;
}

.page {
  padding: 0 0 80px; 
}

.logo {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  pointer-events: none;
  mix-blend-mode: difference;
}
.logo span {
  font-family: "Gantari", sans-serif;
  font-size: clamp(3rem, 3.4vw, 4rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: -0.09em;
  color: #fff;
  display: block;
  white-space: nowrap;
}

.gallery {
  --column-count: 5;
  display: grid;
  grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
  gap: 0;
}

.gallery-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (max-width: 1600px) {
  .gallery {
    --column-count: 4;
  }
  .logo span {
    font-size: clamp(6rem, 5vw, 5rem); 
  }
}

@media (max-width: 1200px) {
  .gallery {
    --column-count: 3;
  }
}

@media (max-width: 800px) {
  .gallery {
    --column-count: 2;
  }
  .logo span {
    font-size: clamp(4.15rem, 8.5vw, 8.5rem); 
  }
}


.item {
  break-inside: avoid;
  margin-bottom: 0; 
  position: relative;
  overflow: hidden; 
}

.item img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateZ(0);
  transition: transform 200ms ease;
}

.item:hover img {
  transform: scale(1.05);
}

.contact {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: clamp(0.8rem, 2vw, 1.2rem) 0;
  background: transparent;
  color: #ffffff;
  font-weight: 500;
}

.contact-inner {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding-left: clamp(10px, 2vw, 24px);
  flex-wrap: wrap;
}

.contact a {
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.02em;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .contact-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .contact a {
    font-size: clamp(1rem, 4vw, 1.3rem);
    white-space: normal;
  }
}

.gallery-sentinel {
  width: 100%;
  height: 1px;
}