/* Rigid layered artwork. The viewpoint changes; the planes do not spin apart. */
#work.work-without-tvs {
  padding-bottom: clamp(42px, 6svh, 72px);
  background: var(--wall);
}
#work .slot-list { margin-top: 32px; }
#contact {
  overflow: visible;
  isolation: isolate;
  padding-top: clamp(70px, 10svh, 120px);
  padding-bottom: clamp(110px, 15svh, 170px);
}
#contact .wall-label { z-index: 2; }
.contact-art-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  justify-self: center;
  perspective: 1200px;
  overflow: visible;
  pointer-events: none;
}
#contact .planes {
  width: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 43%;
  transform: rotateX(-3deg) rotateY(-24deg);
}
#contact .plane { animation: none; filter: none; backface-visibility: visible; }
#contact .p1 { transform: translateZ(-28px); box-shadow: 22px 27px 14px rgba(36,35,33,.10); }
#contact .p2 { transform: translateZ(28px); box-shadow: 20px 32px 12px rgba(36,35,33,.09); }
#contact .p3 { transform: translateZ(76px); box-shadow: 14px 27px 10px rgba(36,35,33,.08); }
#contact .r1 { transform: translateZ(56px) rotate(14deg); }
#contact .r2 { transform: translateZ(44px) rotate(-10deg); }
#contact .r3 { transform: translateZ(36px) rotate(-6deg); }
@media (max-width: 860px) {
  .contact-art-stage {
    order: -1;
    width: min(86%,420px);
    max-width: none;
  }
  #contact .planes { width: 100%; }
}
@media (max-width: 560px) {
  /* Exactly 1.2 times the previous 86%-wide phone artwork. Viewport crop is
     intentional; there is no intermediate card or clipping container. */
  .contact-art-stage { width: 103.2%; }
  #contact { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #contact .planes { transform: rotateX(-2deg) rotateY(-8deg) !important; }
}
@media (forced-colors: active) {
  #contact .planes { transform: none !important; }
}