/* ==========================================================================
   home.css — homepage-only pieces, loaded after gallery.css by index.php.
   Everything shared (nav, walls, rooms, surfaces, buttons, close) lives in
   gallery.css. Here: the hero and the studio row. Prefix hm-, scoped to body.hm.
   ========================================================================== */

/* hero: the painting edge to edge, the name as wall text */
body.hm .hm-hero { position: relative; height: calc(100svh - var(--g-nav-h)); overflow: hidden; background: var(--g-black); }
@supports (height: 100dvh) { body.hm .hm-hero { height: calc(100dvh - var(--g-nav-h)); } }
body.hm .hm-hero picture { width: 100%; height: 100%; }
body.hm .hm-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 49%; animation: hm-settle 1800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes hm-settle { from { transform: scale(1.045); } to { transform: scale(1); } }
body.hm .hm-hero__mark { position: absolute; left: var(--g-gutter); bottom: var(--g-s4); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5); animation: hm-rise 900ms 500ms ease-out both; }
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.hm .hm-hero__mark h1, body.hm .hm-hero__mark p { color: var(--g-paper); }
body.hm .hm-hero__mark h1 { font-size: var(--g-display); line-height: 0.95; }
body.hm .hm-hero__mark p { margin-top: 10px; font-size: clamp(0.95rem, 1.2vw, 1.15rem); letter-spacing: 0.04em; }

/* walk the show */
body.hm .hm-show { padding: var(--g-s6) 0 var(--g-s5); }
body.hm .hm-show .g-section__head { align-items: end; }

/* studio finds + the film */
body.hm .hm-studio { width: min(calc(100% - var(--g-gutter) * 2), var(--g-max)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.9fr); gap: var(--g-s6); padding: var(--g-s7) 0 var(--g-s5); align-items: start; }
body.hm .hm-finds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-s2); margin-top: var(--g-s4); }
body.hm .hm-find { display: grid; gap: 8px; text-decoration: none; font-size: 0.9rem; color: var(--g-ink-2); }
body.hm .hm-find picture, body.hm .hm-find img { width: 100%; }
body.hm .hm-find img { aspect-ratio: 3 / 4; object-fit: contain; background: var(--g-band); }
body.hm .hm-find span { display: grid; }
body.hm .hm-find strong { color: var(--g-ink); font-weight: 500; }
body.hm .hm-find--more { aspect-ratio: 3 / 4; place-items: center; border: 1px solid var(--g-ink); color: var(--g-ink); text-align: center; font-family: var(--g-serif); font-size: 1.2rem; }
body.hm .hm-find--more:hover { background: var(--g-ink); color: var(--g-paper); }
body.hm .hm-studio__video .g-spec { margin-top: 12px; }

@media (max-width: 1060px) {
  body.hm .hm-studio { grid-template-columns: 1fr; gap: var(--g-s5); padding: var(--g-s6) 0 var(--g-s5); }
}
@media (max-width: 600px) {
  body.hm .hm-finds { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.hm .hm-hero__img, body.hm .hm-hero__mark { animation: none; }
}