@import url("site-brand.css");
body { margin: 0; min-width: 280px; height: 100svh; min-height: 280px; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 28px 40px 20px; gap: 24px; }
h1 { margin: 0; font-family: inherit; font-weight: 550; font-size: 64px; line-height: 1.1; }
main { position: relative; min-width: 0; min-height: 0; }
.home-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.8fr); gap: 48px; }
.intro { align-self: center; min-width: 0; }
.intro p { max-width: 25em; margin: 24px 0 0; font-size: 18px; line-height: 1.7; color: #59646c; }
.collection { position: relative; min-width: 0; min-height: 0; }
.scene-grid { width: 100%; height: 100%; display: grid; align-content: center; justify-content: center; gap: 10px; }
.scene { position: relative; margin: 0; min-width: 0; min-height: 0; background: #f0f2f3; isolation: isolate; transform-origin: top left; z-index: 0; transition: transform 240ms ease, width 240ms ease, height 240ms ease, z-index 0s 240ms; }
.scene.expanded-scene { z-index: 2; transition: transform 240ms ease, width 240ms ease, height 240ms ease, z-index 0s; }
.scene video { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.scene .hd-video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.scene.hd-ready .hd-video { opacity: 1; }
.scene.hd-ready .scene-video { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .scene { transition: none; } }
#status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 12px Consolas, monospace; color: #6c757c; }
#status[hidden] { display: none; }
@media (min-width: 901px) and (max-width: 1199px) {
  h1 { font-size: 48px; }
  .home-layout { gap: 32px; }
  .intro p { font-size: 17px; }
}
@media (max-width: 900px) {
  .home-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 24px; }
  .intro { align-self: start; }
  h1 { font-size: 44px; }
  .intro p { max-width: 36em; margin-top: 16px; font-size: 17px; line-height: 1.6; }
}
@media (max-width: 600px) {
  body { padding: 22px 14px 16px; gap: 20px; }
  h1 { font-size: 40px; }
  .intro p { font-size: 16px; }
  .scene-grid { gap: 6px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  body { padding: 14px 24px 12px; gap: 12px; }
  .home-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.8fr); grid-template-rows: minmax(0, 1fr); gap: 24px; }
  .intro { align-self: center; }
  h1 { font-size: 36px; }
  .intro p { margin-top: 12px; font-size: 14px; line-height: 1.5; }
  .scene-grid { gap: 6px; }
}