/* The Art Room teaser on the homepage: one wall of the gallery in CSS 3D, linking to /art/.
   A long wall recedes to the right with six framed works, each under its own picture light, above a stone
   floor. The near, empty stretch of wall on the left carries the copy. The wall stays still, and turns a
   little towards the pointer (set in app.js and about.js as --ry). */

.art-wall { --s: 1; position: relative; display: block; height: 440px; margin-top: 64px; border-radius: 27px; overflow: hidden; isolation: isolate; background: #dfeaec; color: var(--ink); }
.art-wall-room { position: absolute; inset: 0; overflow: hidden; perspective: 1000px; perspective-origin: 30% 46%; }
.art-wall-scene { position: absolute; left: 41%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--s)) rotateY(var(--ry, 36deg)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.art-wall-plane { position: absolute; left: -1400px; top: -205px; width: 3500px; height: 410px; padding-left: 1440px; display: flex; align-items: center; gap: 74px; background: linear-gradient(#f8f8f4, #f1f1eb 70%, #e9e9e2); }
.art-wall-floor { position: absolute; left: -1400px; top: 205px; width: 3500px; height: 760px; transform-origin: top; transform: rotateX(90deg); background:
  linear-gradient(#b9bab2 0, #d6d6ce 5%, #e3e3dc 34%),
  repeating-linear-gradient(90deg, #0000 0 239px, #c3c5be 239px 240px); background-blend-mode: multiply; }

/* A framed work: brass rail, dark trim, cream mount, as in the 3D room. */
.art-wall-frame { flex: none; position: relative; width: 274px; padding: 15px; border: 5px solid #2f2d29; background: #f9f5ea; box-shadow: 0 0 0 4px #b6a17c, 0 0 0 5px #8f7d5c, 16px 30px 34px -14px #2a323c40; transition: translate .5s cubic-bezier(.2,.8,.2,1); }
.art-wall-frame.is-tall { width: 228px; }
.art-wall-frame img { display: block; width: 100%; height: auto; }
/* Picture light, with a warm wash on the wall below it. */
.art-wall-frame::before { content: ''; position: absolute; left: 50%; top: -52px; width: 96px; height: 7px; translate: -50%; border-radius: 2px; background: linear-gradient(#cdb98f, #a08a62); box-shadow: 0 9px 22px 8px #fff1cc, 0 60px 90px 50px #fff4d955; }
/* Placard. */
.art-wall-frame::after { content: ''; position: absolute; left: 50%; bottom: -54px; width: 70px; height: 20px; translate: -50%; background: linear-gradient(#0000 6px, #8b8f8c 6px 8px, #0000 8px 12px, #c2c5c1 12px 13px, #0000 13px) 8px 0 / 44px 100% no-repeat, #fbfbf8; box-shadow: 0 1px 2px #0002; }
.art-wall:hover .art-wall-frame { translate: 0 -6px; }
.art-wall:hover .art-wall-frame:nth-child(2n) { transition-delay: .05s; }

/* Copy, on the near stretch of wall. */
.art-wall-copy { position: absolute; z-index: 2; left: 58px; top: 50%; translate: 0 -50%; width: min(400px, 34%); }
.art-wall-copy .section-label { margin-bottom: 14px; color: #6a6f73; }
.art-wall-copy h3 { font-family: var(--display); font-size: clamp(32px, 3.4vw, 46px); font-weight: 600; line-height: 1.03; letter-spacing: -.05em; }
.art-wall-copy p { margin-top: 16px; max-width: 320px; font-size: 15px; line-height: 1.65; color: #5c6066; }
.art-wall-copy .button { margin-top: 26px; padding: 18px 24px 14px; }
.art-wall-copy .button span { transition: translate .25s; }
.art-wall:hover .art-wall-copy .button { transform: translateY(-3px); background: #1d46cf; }
.art-wall:hover .art-wall-copy .button span { translate: 5px 0; }
.art-wall:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }

@media (max-width: 1100px) {
  .art-wall { --s: .86; }
  .art-wall-scene { left: 46%; }
  .art-wall-copy { left: 38px; width: min(340px, 38%); }
}
/* Phones: the wall on top, the copy underneath on the card. */
@media (max-width: 760px) {
  .art-wall { --s: .56; height: auto; margin-top: 44px; border-radius: 20px; background: #eef0ec; }
  .art-wall-room { position: relative; inset: auto; height: 260px; background: #dfeaec; perspective-origin: 24% 46%; }
  .art-wall-scene { left: 7%; top: 46%; }
  .art-wall-copy { position: static; translate: none; width: auto; padding: 26px 24px 30px; }
  .art-wall-copy h3 { font-size: 32px; }
  .art-wall-copy p { max-width: none; }
  .art-wall-copy .button { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .art-wall-scene { transition: none; }
  .art-wall-frame, .art-wall-copy .button span { transition: none; }
}