/* Interactive art cube and the gallery's shared studio easels. */
.hero--cube {
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + 1.5rem) 3.5rem;
}
.hero--cube .hero__text { grid-column: 1 / 6; }
.hero__entry {
  margin-top: 1.8rem;
  padding: 1rem 1.9rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  background: #a64229;
  border-color: #a64229;
  color: #fffaf2;
  box-shadow: 0 10px 28px #a642292b;
}
.hero__entry:hover { background: #78331f; border-color: #78331f; transform: translateY(-2px); }
.hero__entry .btn__arrow { margin-left: 1.2rem; font-size: 1.3rem; }
.cube-exhibit {
  --cube-size: clamp(210px, min(24vw, 39svh), 350px);
  --cell: calc(var(--cube-size) / 3);
  --half: calc(var(--cube-size) / 2);
  grid-column: 6 / 13;
  min-width: 0;
  position: relative;
  text-align: center;
  padding-top: 1rem;
}
.cube-exhibit__label {
  color: #76664f;
  font: 500 .65rem var(--font-en);
  letter-spacing: .28em;
}
.cube-scene {
  position: relative;
  height: calc(var(--cube-size) * 1.5);
  perspective: 1400px;
  perspective-origin: 50% 42%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline-offset: -5px;
}
.cube-scene.is-dragging { cursor: grabbing; }
.cube-scene::before {
  content: '';
  position: absolute;
  inset: 4% -2% 0;
  background: radial-gradient(ellipse at 35% 48%, #ebbd8250, transparent 64%),
              radial-gradient(ellipse at 75% 45%, #79b4c52b, transparent 60%);
  pointer-events: none;
}
.cube-scene::after {
  content: '';
  position: absolute;
  width: 65%;
  height: 8%;
  left: 17.5%;
  bottom: 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #4b372c40, transparent 70%);
  filter: blur(9px);
  pointer-events: none;
}
.art-cube {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  left: calc(50% - var(--half));
  top: calc(50% - var(--half) - 8px);
  transform-style: preserve-3d;
  transform: rotateX(-19deg) rotateY(-28deg);
}
.cube-layer {
  position: absolute;
  width: var(--cube-size);
  height: var(--cell);
  top: calc(var(--row) * var(--cell));
  transform-style: preserve-3d;
  transition: transform 850ms cubic-bezier(.22,.8,.25,1);
}
.cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 3px;
  background: #332b24;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cube-face--front { transform: translateZ(var(--half)); }
.cube-face--right { transform: rotateY(90deg) translateZ(var(--half)); }
.cube-face--back { transform: rotateY(180deg) translateZ(var(--half)); }
.cube-face--left { transform: rotateY(270deg) translateZ(var(--half)); }
.cube-cap {
  height: var(--cube-size);
  grid-template-rows: repeat(3, 1fr);
  background: #3b3027;
  border: 3px solid #332b24;
}
.cube-cap--top { transform-origin: 50% 0; transform: translateZ(calc(-1 * var(--half))) rotateX(90deg); }
.cube-cap--bottom { top: var(--cell); transform-origin: 50% 0; transform: translateZ(var(--half)) rotateX(-90deg); }
.cube-tile {
  display: block;
  position: relative;
  min-height: 0;
  min-width: 0;
  padding: 3px;
  border: 1px solid #e3c18e;
  border-radius: 3px;
  background: #d8b580;
  overflow: hidden;
  cursor: inherit;
}
.cube-tile img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cube-tile:hover { background: #ffdf9a; border-color: #fff0bc; }
.cube-tile:focus-visible { outline: 3px solid white; outline-offset: -4px; }
.cube-caption { color: var(--ink-2); font-size: .8125rem; letter-spacing: .08em; }
.cube-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.cube-controls button {
  min-height: 44px;
  padding: .5rem .9rem;
  border: 1px solid #cbbda9;
  border-radius: 999px;
  background: #fffaf1cc;
  font-size: .75rem;
  color: #59432e;
  transition: background-color 180ms, border-color 180ms;
}
.cube-controls button:hover { border-color: #94714c; background: #efe0c9; }
.cube-controls--secondary { margin-top: .4rem; }
.cube-controls--secondary button { border-color: transparent; background: transparent; color: var(--ink-2); }
.cube-controls--secondary button:hover { background: #ece2d4; }

/* Reuse the original studio-easel asset; the full painting stays inside its frame. */
.gallery-easel {
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 600 / 1100;
  margin-inline: auto;
  isolation: isolate;
}
.gallery-easel::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: -5%;
  bottom: -.5%;
  height: 4%;
  background: radial-gradient(ellipse, #543b2133, transparent 70%);
  filter: blur(5px);
}
.gallery-easel .artwork__frame {
  position: absolute;
  top: 14%;
  left: 3%;
  width: 94%;
  padding: 2%;
  overflow: hidden;
  background: linear-gradient(125deg, #e9c58f, #b9854a 46%, #e5be86 73%, #a56e38);
  box-shadow: inset 1px 1px 1px #f9dfb7, inset -2px -2px 2px #966332, 3px 5px 4px #52341c2e;
  transform: none;
}
.gallery-easel .artwork__frame img { display: block; transform: none; object-fit: contain; }
.artwork:hover .gallery-easel .artwork__frame { transform: none; box-shadow: inset 1px 1px 1px #f9dfb7, 3px 8px 16px #52341c38; }
.artwork:focus-visible .artwork__hint, .artwork:focus-visible .artwork__num { opacity: 1; transform: none; }
.wall__item { width: 100%; }

@media (min-width: 821px) and (max-width: 1240px) {
  .hero--cube .hero__text { grid-column: 1 / 6; }
  .cube-exhibit { grid-column: 6 / 13; --cube-size: clamp(210px, 25vw, 290px); }
}
@media (max-width: 820px) {
  .hero--cube { padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: 2rem; }
  .hero--cube .hero__text { grid-column: 1 / -1; max-width: none; margin-bottom: 1.4rem; }
  .hero--cube .hero__title br { display: none; }
  .hero--cube .hero__title { font-size: clamp(2.25rem, 7.5vw, 3.7rem); }
  .hero--cube .hero__note { max-width: 36rem; }
  .hero__entry { margin-top: 1.25rem; }
  .cube-exhibit { grid-column: 1 / -1; --cube-size: clamp(185px, 52vw, 290px); width: 100%; padding-top: .5rem; }
  .cube-exhibit__label { font-size: .6rem; }
  .cube-caption { font-size: .75rem; letter-spacing: .02em; }
  .cube-controls { margin-top: .6rem; }
  .cube-controls--secondary { margin-top: .2rem; }
  .gallery-easel { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .cube-layer { transition: none; }
}
@media (max-width: 560px) {
  .hero--cube .hero__title { margin-bottom: .65rem; }
  .hero--cube .hero__sub { font-size: 1rem; line-height: 1.6; }
  .hero--cube .hero__note { margin-top: .75rem; padding-top: .65rem; font-size: .75rem; line-height: 1.75; }
  .hero--cube .hero__text { margin-bottom: 1rem; }
  .hero__entry { margin-top: 1rem; padding: .85rem 1.5rem; }
}