/* ==========================================================================
   GIFS — EXQUISITE MUSEUM PORTAL & RESPONSIVE LAYOUT
   ========================================================================== */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

.hero, .paint-story, .services, .approach, .project, .formats, .invitation {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  max-width: 100vw !important;
}

.style-spectrum {
  position: relative;
  isolation: isolate;
  overflow: clip !important;
  max-width: 100vw !important;
}

.services > :not(.artifact-deco),
.approach > :not(.artifact-deco),
.project > :not(.artifact-deco),
.formats > :not(.artifact-deco),
.invitation > :not(.artifact-deco) {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   ARTIFACT PORTAL: 4 Pure Antique Plates with Elegant Titles Underneath
   ========================================================================== */

.artifact-portal {
  position: relative;
  isolation: isolate;
  padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 9vw, 120px);
  background:
    radial-gradient(circle at 50% 50%, rgba(145, 107, 69, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(236, 228, 213, 0), rgba(236, 228, 213, 0.5) 50%, rgba(236, 228, 213, 0));
  overflow: hidden !important;
  max-width: 100vw !important;
}

.portal-plates-wrapper {
  width: min(100% - var(--gutter) * 2, 1260px);
  margin: 0 auto;
}

.artifact-portal__title {
  margin: 0 0 clamp(32px, 5vw, 56px);
  font-family: "Cormorant", serif;
  font-style: italic;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 400;
  color: #3d2b25;
  text-align: center;
}

.portal-plates-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3.5vw, 48px);
  align-items: start;
  justify-items: center;
}

/* Entire Plate + Text is a single clickable button */
.portal-plate-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  width: 100%;
  max-width: 240px;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The Plate Artwork: 100% clean art, absolutely NO text or overlay on the plate */
.portal-plate-btn__art {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 14px 28px rgba(50, 24, 28, 0.16));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
  will-change: transform, filter;
}

.portal-plate-btn__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transform: scale(0.96);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Elegant high-contrast typography UNDERNEATH */
.portal-plate-btn__caption {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  transition: transform 0.3s ease;
}

.portal-plate-btn__num {
  font-family: "Prata", Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: #916b45;
  margin-bottom: 2px;
  font-weight: 400;
}

.portal-plate-btn__title {
  font-family: "Prata", Georgia, serif;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  color: #24191d;
  line-height: 1.15;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.portal-plate-btn__desc {
  font-family: "Cormorant", serif;
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 17px);
  color: #7d6955;
  line-height: 1.2;
}

.portal-plate-btn__arrow {
  display: inline-block;
  font-size: 17px;
  color: #916b45;
  margin-top: 3px;
  transition: transform 0.35s ease, color 0.35s ease;
}

/* Hover & Active states */
.portal-plate-btn:hover {
  transform: translateY(-6px);
}
.portal-plate-btn:hover .portal-plate-btn__art {
  transform: scale(1.05) rotate(1.5deg);
  filter: drop-shadow(0 24px 38px rgba(88, 28, 42, 0.25));
}
.portal-plate-btn:hover .portal-plate-btn__art img {
  transform: scale(1.02);
}
.portal-plate-btn:hover .portal-plate-btn__title {
  color: #703b42;
}
.portal-plate-btn:hover .portal-plate-btn__arrow {
  transform: translateY(4px);
  color: #703b42;
}
.portal-plate-btn:active {
  transform: scale(0.97);
}

@media (max-width: 860px) {
  .portal-plates-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
  .portal-plate-btn {
    max-width: 190px;
  }
  .portal-plate-btn__caption {
    margin-top: 12px;
  }
}

@media (max-width: 480px) {
  .portal-plates-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 14px;
  }
  .portal-plate-btn {
    max-width: 155px;
  }
  .portal-plate-btn__title {
    font-size: 18px;
  }
  .portal-plate-btn__desc {
    font-size: 13px;
  }
}

/* Background museum decorative pieces */
.artifact-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  transform-origin: center;
  mix-blend-mode: multiply;
  max-width: 100vw !important;
}
.art-battle {
  width: min(50vw, 700px);
  right: 0;
  top: 5%;
  opacity: 0.12;
  filter: blur(3.2px) saturate(0.7) sepia(0.08);
  animation: artifact-drift-a 13s ease-in-out infinite alternate;
}
.art-figure {
  width: min(19vw, 245px);
  right: 3vw;
  bottom: 4%;
  opacity: 0.34;
  filter: saturate(0.82) sepia(0.08) drop-shadow(0 20px 24px rgba(38, 22, 17, 0.15));
  animation: artifact-drift-b 10s ease-in-out infinite alternate;
}
.art-lady {
  width: min(34vw, 520px);
  left: 0;
  top: 12%;
  opacity: 0.12;
  filter: blur(4px) saturate(0.72);
  animation: artifact-drift-c 15s ease-in-out infinite alternate;
}
.art-eros {
  width: min(27vw, 390px);
  right: 0;
  bottom: -3%;
  opacity: 0.26;
  filter: saturate(0.78) sepia(0.06) drop-shadow(0 26px 30px rgba(40, 22, 18, 0.13));
  animation: artifact-drift-a 12s ease-in-out infinite alternate-reverse;
}
.art-cherub {
  width: min(14vw, 185px);
  left: 4vw;
  bottom: 4%;
  opacity: 0.30;
  filter: saturate(0.78) sepia(0.1);
  animation: artifact-drift-b 9s ease-in-out infinite alternate;
}

@keyframes artifact-drift-a {
  from { transform: translate3d(0, -6px, 0); }
  to { transform: translate3d(8px, 8px, 0); }
}
@keyframes artifact-drift-b {
  from { transform: translate3d(-4px, 6px, 0); }
  to { transform: translate3d(6px, -8px, 0); }
}
@keyframes artifact-drift-c {
  from { transform: translate3d(0, 4px, 0); }
  to { transform: translate3d(8px, -6px, 0); }
}

@media (max-width: 800px) {
  .art-battle { width: 60vw; right: -10vw; top: 10%; opacity: 0.07; filter: blur(4px) saturate(0.68); }
  .art-figure { width: 28vw; right: 0; opacity: 0.2; }
  .art-lady { width: 50vw; left: -10vw; opacity: 0.07; filter: blur(4px); }
  .art-eros { width: 36vw; right: -8vw; opacity: 0.15; }
  .art-cherub { width: 24vw; left: 0; opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  .artifact-deco {
    animation: none !important;
    transition: none !important;
  }
}