/* VROWN 2: video-wordmark and photo archive play section. */
body[data-site-page="vrown"] .va-yb-play-archive {
  --vrown-play-padding-top: clamp(36px, 4.5vw, 70px);
  --vrown-play-padding-bottom: var(--vrown-play-padding-top);
  display: grid !important;
  width: 100% !important;
  min-height: auto !important;
  padding: var(--vrown-play-padding-top) 0 var(--vrown-play-padding-bottom) !important;
  gap: clamp(12px, 1.8vw, 22px) !important;
  overflow: visible !important;
  background: var(--vrown3-home-yellow, #fef019) !important;
  color: #050505 !important;
}

body[data-site-page="vrown"] .va-yb-play-archive h2 {
  display: grid !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  color: #050505 !important;
  font-family: "Londrina Solid", Georgia, serif !important;
  font-size: clamp(52px, 9.2vw, 146px) !important;
  font-weight: 900 !important;
  line-height: 0.82 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
}

body[data-site-page="vrown"] .va-yb-play-archive h2 > span:last-child {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.13em;
  white-space: nowrap;
}

body[data-site-page="vrown"] .va-play-vrown-logo {
  --vrown-play-mask: url("assets/analogue-clone/vrown-logo.png?v=20260724-play-mask-1");
  display: inline-block;
  width: 2.42em;
  height: 0.87em;
  margin-bottom: -0.1em;
  overflow: hidden;
  vertical-align: -0.07em;
  background: #050505;
  -webkit-mask-image: var(--vrown-play-mask);
  mask-image: var(--vrown-play-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  mask-mode: alpha;
}

body[data-site-page="vrown"] .va-play-vrown-logo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
  transform: scale(1.08);
}

body[data-site-page="vrown"] .va-play-archive-intro {
  margin: 0 auto !important;
  color: #050505 !important;
  font-family: "Press Start 2P", "Courier New", monospace !important;
  font-size: clamp(7px, 0.7vw, 10px) !important;
  line-height: 1.5 !important;
  text-align: center;
}

body[data-site-page="vrown"] .va-play-cutout-scroll {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

body[data-site-page="vrown"] .va-play-cutout-scene {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: clamp(16px, 3vw, 40px);
  place-items: center;
  scroll-margin-top: 70px;
}

body[data-site-page="vrown"] .va-play-cutout-scene button {
  position: relative;
  display: grid;
  max-width: min(66vw, 650px);
  max-height: min(76svh, 690px);
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(8px 11px 0 rgba(5, 5, 5, 0.17));
  transition: filter 180ms ease, transform 180ms ease;
}

body[data-site-page="vrown"] .va-play-cutout-scene button:hover,
body[data-site-page="vrown"] .va-play-cutout-scene button:focus-visible {
  outline: 0;
  filter: drop-shadow(13px 16px 0 rgba(5, 5, 5, 0.3));
  transform: translateY(-6px) rotate(-1.5deg);
}

body[data-site-page="vrown"] .va-play-cutout-scene img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(76svh, 690px);
  object-fit: contain;
}

body[data-site-page="vrown"] .va-play-cutout-scene.is-walk button { transform: rotate(-2deg) translateX(-8%); }
body[data-site-page="vrown"] .va-play-cutout-scene.is-green button { transform: rotate(3deg) translateX(8%); }
body[data-site-page="vrown"] .va-play-cutout-scene.is-truck button { transform: rotate(-1deg) translateX(-5%); }
body[data-site-page="vrown"] .va-play-cutout-scene.is-run button { transform: rotate(2deg) translateX(9%); }
body[data-site-page="vrown"] .va-play-cutout-scene.is-table button { transform: rotate(-3deg) translateX(-8%); }
body[data-site-page="vrown"] .va-play-cutout-scene.is-mask button { transform: rotate(2deg) translateX(6%); }
body[data-site-page="vrown"] .va-play-cutout-scene.is-standing button { transform: rotate(-2deg) translateX(-6%); }
body[data-site-page="vrown"] .va-play-cutout-scene.is-chair button { transform: rotate(3deg) translateX(7%); }
body[data-site-page="vrown"] .va-play-cutout-scene.is-rug button { transform: rotate(-2deg) translateX(-6%); }
body[data-site-page="vrown"] .va-play-cutout-scene.is-objects button { transform: rotate(-1deg) translateX(-5%); }
body[data-site-page="vrown"] .va-play-cutout-scene.is-tiny button { transform: rotate(3deg) translateX(7%); }

/* The VROWN photo archive is a scroll-pinned deck: vertical input moves each
   cutout across one fixed viewport, then the page continues below the deck. */
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck {
  position: relative;
  width: 100vw;
  max-width: none;
  height: calc(100svh + var(--vrown-deck-travel, 3400px));
  margin: 0 0 0 calc(50% - 50vw);
  overflow: visible;
}

body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-surface {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--vrown3-home-yellow, #fef019);
}

body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-vrown-video {
  --vrown-video-opacity: 1;
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  min-height: 0;
  opacity: var(--vrown-video-opacity);
  pointer-events: none;
}

body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-vrown-video-mask,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-vrown-video video {
  height: 100%;
  min-height: 0;
}

body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene {
  --vrown-deck-x: 0px;
  --vrown-deck-y: 0px;
  --vrown-deck-scale: 1;
  --vrown-deck-opacity: 0;
  --vrown-deck-rotation: 0deg;
  --vrown-deck-z: 1;
  position: absolute;
  z-index: var(--vrown-deck-z);
  top: 50%;
  left: 50%;
  display: grid;
  width: max-content;
  min-height: 0;
  padding: 0;
  place-items: center;
  opacity: var(--vrown-deck-opacity);
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(calc(-50% + var(--vrown-deck-x)), calc(-50% + var(--vrown-deck-y)), 0)
    rotate(var(--vrown-deck-rotation)) scale(var(--vrown-deck-scale));
  transition: none;
  will-change: transform, opacity;
}

body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-slide-visible {
  visibility: visible;
}

body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-current {
  pointer-events: auto;
}

body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-walk button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-green button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-truck button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-run button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-table button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-mask button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-standing button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-chair button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-rug button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-objects button,
body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene.is-tiny button {
  max-width: min(54vw, 760px);
  max-height: 70svh;
  transform: none;
}

body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene img {
  max-width: min(54vw, 760px);
  max-height: 70svh;
}

@media (max-width: 720px) {
  body[data-site-page="vrown"] .va-yb-play-archive {
    --vrown-play-padding-top: 38px;
    --vrown-play-padding-bottom: var(--vrown-play-padding-top);
    padding: var(--vrown-play-padding-top) 0 var(--vrown-play-padding-bottom) !important;
    gap: 12px !important;
  }

  body[data-site-page="vrown"] .va-yb-play-archive h2 {
    font-size: clamp(45px, 13.5vw, 72px) !important;
    line-height: 0.86 !important;
  }

  body[data-site-page="vrown"] .va-yb-play-archive h2 > span:last-child {
    gap: 0.09em;
  }

  body[data-site-page="vrown"] .va-play-vrown-logo {
    width: 2.25em;
    height: 0.82em;
  }

  body[data-site-page="vrown"] .va-play-cutout-scene {
    min-height: 100svh;
    padding: 8px;
  }

  body[data-site-page="vrown"] .va-play-cutout-scene button {
    max-width: 84vw;
    max-height: min(66svh, 570px);
  }

  body[data-site-page="vrown"] .va-play-cutout-scene img {
    max-height: min(66svh, 570px);
  }

  body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene button,
  body[data-site-page="vrown"] .va-play-cutout-scroll.is-scroll-deck .va-play-cutout-scene img {
    max-width: 78vw;
    max-height: 62svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-site-page="vrown"] .va-play-cutout-scene button {
    transition: none;
  }
}

/* The finale lives directly inside VROWN 2.  There is no iframe, nested
   scrollbar or carousel: the page's own scroll drives this single experience. */
body[data-site-page="vrown"] .va-vrown-experience {
  display: block;
  width: 100%;
}

body[data-site-page="vrown"] .va-vrown-video {
  position: relative;
  display: grid;
  width: 100%;
  min-height: clamp(400px, 64svh, 620px);
  overflow: hidden;
  background: var(--vrown3-home-yellow, #fef019);
  place-items: stretch;
}

body[data-site-page="vrown"] .va-vrown-video-mask {
  --vrown-video-mask: url("assets/analogue-clone/vrown-logo.png?v=20260724-direct-vrown-1");
  width: 100%;
  min-height: inherit;
  background: #050505;
  -webkit-mask-image: var(--vrown-video-mask);
  mask-image: var(--vrown-video-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: min(56vw, 650px) auto;
  mask-size: min(56vw, 650px) auto;
  mask-mode: alpha;
}

body[data-site-page="vrown"] .va-vrown-video video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: 54% center;
  transform: scale(1.035);
}

body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scroll {
  display: block;
}

@media (max-width: 720px) {
  body[data-site-page="vrown"] .va-vrown-video {
    min-height: clamp(380px, 58svh, 520px);
  }

  body[data-site-page="vrown"] .va-vrown-video-mask {
    -webkit-mask-size: min(88vw, 410px) auto;
    mask-size: min(88vw, 410px) auto;
  }
}

/* VROWN 2 finale: a single, static wall of the original VROWN cutouts.
   It intentionally has no sticky stage or scroll-driven scene changes. */
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scroll {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  width: min(1500px, 100%);
  max-width: none;
  min-height: min(66svh, 700px);
  margin: 0 auto;
  padding: clamp(12px, 1.8vw, 26px) clamp(18px, 4vw, 72px);
  gap: clamp(8px, 1.1vw, 18px) clamp(10px, 1.5vw, 24px);
}

body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene {
  display: grid;
  width: 100%;
  min-height: 0;
  padding: 0;
  place-items: center;
}

body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-walk button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-green button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-truck button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-run button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-table button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-mask button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-standing button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-chair button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-rug button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-objects button,
body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene.is-tiny button {
  width: 100%;
  max-width: 100%;
  max-height: none;
  transform: rotate(var(--vrown-board-tilt, 0deg)) !important;
}

body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene img {
  width: auto;
  max-width: 100%;
  max-height: min(18svh, 175px);
  margin: 0 auto;
  object-fit: contain;
}

body[data-site-page="vrown"] .va-play-cutout-scene:nth-child(4n + 1) { --vrown-board-tilt: -2deg; }
body[data-site-page="vrown"] .va-play-cutout-scene:nth-child(4n + 2) { --vrown-board-tilt: 1.5deg; }
body[data-site-page="vrown"] .va-play-cutout-scene:nth-child(4n + 3) { --vrown-board-tilt: -1deg; }
body[data-site-page="vrown"] .va-play-cutout-scene:nth-child(4n) { --vrown-board-tilt: 2deg; }

@media (max-width: 720px) {
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: min(62svh, 560px);
    padding: 10px 13px 14px;
    gap: 7px 8px;
  }

  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene img {
    max-height: min(14.5svh, 112px);
  }
}

/* Final fixed-poster overrides: keep older board experiments from changing
   the requested static layout. */
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-items: initial !important;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene {
  position: absolute !important;
  height: auto !important;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene img {
  max-height: none !important;
}

/* Reference-poster composition (2048 × 1204).  Cropped source files keep
   the declared width tied to the visible figure rather than blank PNG space. */
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll {
  position: relative !important;
  display: block !important;
  width: min(100%, 2048px) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2048 / 1204 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene {
  position: absolute !important;
  top: var(--vrown-poster-y) !important;
  left: var(--vrown-poster-x) !important;
  z-index: 10;
  display: block !important;
  width: var(--vrown-poster-width) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: translate(-50%, -50%) rotate(var(--vrown-poster-rotation, 0deg)) !important;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene button,
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene button {
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}

/* top row */
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(1) { --vrown-poster-x: 24.1% !important; --vrown-poster-y: 43.4% !important; --vrown-poster-width: 9.2% !important; --vrown-poster-rotation: -3deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(2) { --vrown-poster-x: 81.5% !important; --vrown-poster-y: 35.1% !important; --vrown-poster-width: 22% !important; --vrown-poster-rotation: 4deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(3) { --vrown-poster-x: 16.5% !important; --vrown-poster-y: 65.6% !important; --vrown-poster-width: 10% !important; --vrown-poster-rotation: -4deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(4) { --vrown-poster-x: 39.5% !important; --vrown-poster-y: 29.4% !important; --vrown-poster-width: 9% !important; --vrown-poster-rotation: 2deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(5) { --vrown-poster-x: 58.7% !important; --vrown-poster-y: 15.9% !important; --vrown-poster-width: 19% !important; --vrown-poster-rotation: 2deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(6) { --vrown-poster-x: 13.2% !important; --vrown-poster-y: 16.3% !important; --vrown-poster-width: 12% !important; --vrown-poster-rotation: -3deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(7) { --vrown-poster-x: 7.9% !important; --vrown-poster-y: 36.9% !important; --vrown-poster-width: 4% !important; --vrown-poster-rotation: 1deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(8) { --vrown-poster-x: 33.3% !important; --vrown-poster-y: 74.7% !important; --vrown-poster-width: 6.5% !important; --vrown-poster-rotation: -3deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(9) { --vrown-poster-x: 51.3% !important; --vrown-poster-y: 75.6% !important; --vrown-poster-width: 13% !important; --vrown-poster-rotation: 2deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(10) { --vrown-poster-x: 66.9% !important; --vrown-poster-y: 72.5% !important; --vrown-poster-width: 9% !important; --vrown-poster-rotation: -2deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(11) { --vrown-poster-x: 88.8% !important; --vrown-poster-y: 75.6% !important; --vrown-poster-width: 11% !important; --vrown-poster-rotation: 3deg !important; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(12) { --vrown-poster-x: 55.1% !important; --vrown-poster-y: 36.5% !important; --vrown-poster-width: 3% !important; --vrown-poster-rotation: -3deg !important; }

@media (max-width: 720px) {
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll {
    min-height: 0 !important;
    aspect-ratio: 1 / 1.42 !important;
  }
}

/* The heading is part of the collage: the two side photographs meet it at the
   top and the remaining cutouts rise directly underneath it. */
body[data-site-page="vrown"] .va-vrown-poster {
  position: relative;
  width: 100%;
}

body[data-site-page="vrown"] .va-play-poster-heading {
  position: absolute;
  z-index: 40;
  top: clamp(14px, 2.1vw, 34px);
  left: 50%;
  display: grid;
  width: min(43vw, 580px);
  gap: clamp(7px, 0.8vw, 12px);
  transform: translateX(-50%);
  pointer-events: none;
}

body[data-site-page="vrown"] .va-play-poster-heading h2 {
  width: 100%;
  margin: 0 !important;
  font-size: clamp(42px, 6.2vw, 102px) !important;
}

body[data-site-page="vrown"] .va-play-poster-heading .va-play-archive-intro {
  font-size: clamp(6px, 0.58vw, 9px) !important;
}

@media (min-width: 721px) {
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll {
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    min-height: min(75svh, 820px);
    padding: clamp(10px, 1.6vw, 24px) clamp(20px, 4vw, 76px);
    gap: clamp(3px, 0.52vw, 9px);
  }

  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 4; --vrown-board-tilt: -6deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(2) { grid-column: 12 / 17; grid-row: 1 / 4; --vrown-board-tilt: 5deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(3) { grid-column: 5 / 8; grid-row: 3 / 5; --vrown-board-tilt: -3deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(4) { grid-column: 8 / 12; grid-row: 3 / 5; --vrown-board-tilt: 3deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(5) { grid-column: 1 / 4; grid-row: 4 / 6; --vrown-board-tilt: 4deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(6) { grid-column: 4 / 7; grid-row: 5 / 7; --vrown-board-tilt: -5deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(7) { grid-column: 7 / 10; grid-row: 5 / 7; --vrown-board-tilt: 2deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(8) { grid-column: 10 / 13; grid-row: 5 / 7; --vrown-board-tilt: -4deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(9) { grid-column: 13 / 17; grid-row: 4 / 6; --vrown-board-tilt: 4deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(10) { grid-column: 1 / 4; grid-row: 6 / 9; --vrown-board-tilt: -3deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(11) { grid-column: 4 / 9; grid-row: 7 / 9; --vrown-board-tilt: 3deg; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(12) { grid-column: 9 / 17; grid-row: 7 / 9; --vrown-board-tilt: -2deg; }
}

@media (max-width: 720px) {
  body[data-site-page="vrown"] .va-play-poster-heading {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    padding: 0 16px;
    transform: none;
  }

  body[data-site-page="vrown"] .va-play-poster-heading h2 {
    font-size: clamp(42px, 13vw, 72px) !important;
  }

  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll {
    margin-top: 4px;
  }
}

/* Fixed VROWN poster layout.  The cutouts are no longer draggable; every
   image remains a photo button that opens its matching spot-the-difference. */
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll {
  position: relative;
  display: block;
  width: min(1660px, 100%);
  height: min(78svh, 900px);
  min-height: 620px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene {
  position: absolute;
  z-index: 10;
  top: var(--vrown-poster-y);
  left: var(--vrown-poster-x);
  display: grid;
  width: var(--vrown-poster-width);
  min-height: 0;
  height: auto;
  padding: 0;
  grid-column: auto !important;
  grid-row: auto !important;
  place-items: center;
  transform: translate(-50%, -50%) rotate(var(--vrown-poster-rotation, 0deg)) !important;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene button {
  width: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  cursor: pointer;
  transform: none !important;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
  filter: drop-shadow(0 0 1.6px #fff) drop-shadow(5px 7px 0 rgba(5, 5, 5, 0.2));
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(1) { --vrown-poster-x: 27%; --vrown-poster-y: 46%; --vrown-poster-width: 15%; --vrown-poster-rotation: -3deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(2) { --vrown-poster-x: 84%; --vrown-poster-y: 37%; --vrown-poster-width: 31%; --vrown-poster-rotation: 5deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(3) { --vrown-poster-x: 17%; --vrown-poster-y: 79%; --vrown-poster-width: 17%; --vrown-poster-rotation: -4deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(4) { --vrown-poster-x: 40%; --vrown-poster-y: 27%; --vrown-poster-width: 15%; --vrown-poster-rotation: 2deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(5) { --vrown-poster-x: 14%; --vrown-poster-y: 16%; --vrown-poster-width: 19%; --vrown-poster-rotation: -3deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(6) { --vrown-poster-x: 59%; --vrown-poster-y: 16%; --vrown-poster-width: 24%; --vrown-poster-rotation: 2deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(7) { --vrown-poster-x: 7%; --vrown-poster-y: 41%; --vrown-poster-width: 8%; --vrown-poster-rotation: 1deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(8) { --vrown-poster-x: 35%; --vrown-poster-y: 83%; --vrown-poster-width: 11%; --vrown-poster-rotation: -3deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(9) { --vrown-poster-x: 51%; --vrown-poster-y: 82%; --vrown-poster-width: 19%; --vrown-poster-rotation: 2deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(10) { --vrown-poster-x: 67%; --vrown-poster-y: 71%; --vrown-poster-width: 11%; --vrown-poster-rotation: -2deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(11) { --vrown-poster-x: 87%; --vrown-poster-y: 84%; --vrown-poster-width: 18%; --vrown-poster-rotation: 3deg; }
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(12) { --vrown-poster-x: 53%; --vrown-poster-y: 39%; --vrown-poster-width: 8%; --vrown-poster-rotation: -3deg; }

@media (max-width: 720px) {
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll {
    width: 100%;
    height: min(82svh, 720px);
    min-height: 540px;
  }

  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(1) { --vrown-poster-width: 22%; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(2) { --vrown-poster-width: 38%; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(5) { --vrown-poster-width: 28%; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(6) { --vrown-poster-width: 31%; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(9) { --vrown-poster-width: 25%; }
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(11) { --vrown-poster-width: 25%; }
}

/* Editable sticker canvas: each original cutout is an independent card that
   can be placed freely with a mouse or fingertip. */
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll.is-sticker-board {
  position: relative;
  display: block;
  width: min(1500px, 100%);
  height: min(76svh, 820px);
  min-height: 570px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll.is-sticker-board .va-play-cutout-scene {
  position: absolute;
  top: var(--vrown-sticker-y);
  left: var(--vrown-sticker-x);
  display: grid;
  width: var(--vrown-sticker-width);
  min-height: 0;
  height: auto;
  padding: 0;
  grid-column: auto !important;
  grid-row: auto !important;
  place-items: center;
  cursor: grab;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) rotate(var(--vrown-sticker-rotation)) !important;
  transform-origin: center;
  will-change: left, top, transform;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll.is-sticker-board .va-play-cutout-scene.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(12px 16px 0 rgba(5, 5, 5, 0.24));
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll.is-sticker-board .va-play-cutout-scene button {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  cursor: inherit;
  transform: none !important;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll.is-sticker-board .va-play-cutout-scene img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
  filter: drop-shadow(0 0 1.6px #fff) drop-shadow(4px 6px 0 rgba(5, 5, 5, 0.17));
}

@media (max-width: 720px) {
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll.is-sticker-board {
    width: 100%;
    height: min(78svh, 680px);
    min-height: 500px;
  }
}

/* Keep the invitation as the centre of the editable sticker field. */
body[data-site-page="vrown"] .va-play-poster-heading {
  top: 50%;
  right: 0;
  left: 0;
  justify-items: center;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}

@media (max-width: 720px) {
  body[data-site-page="vrown"] .va-play-poster-heading {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 100%;
    padding: 0;
    transform: translateY(-50%);
  }
}

/* Replace the uniform grid with an art-directed VROWN contact sheet.  The
   grid only protects the cutouts from colliding; its differing spans create
   the loose, pasted-on composition. */
@media (min-width: 721px) {
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scroll {
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-template-rows: repeat(7, minmax(0, 1fr));
    align-items: stretch;
    min-height: min(72svh, 780px);
    padding: clamp(14px, 2vw, 30px) clamp(24px, 4.5vw, 86px);
    gap: clamp(5px, 0.7vw, 12px);
  }

  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene {
    height: 100%;
  }

  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene button {
    height: 100%;
  }

  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene img {
    max-height: 100%;
  }

  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 4; --vrown-board-tilt: -4deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 3; --vrown-board-tilt: 3deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(3) { grid-column: 7 / 10; grid-row: 1 / 3; --vrown-board-tilt: -2deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(4) { grid-column: 10 / 17; grid-row: 1 / 4; --vrown-board-tilt: 4deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(5) { grid-column: 1 / 4; grid-row: 4 / 8; --vrown-board-tilt: 2deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(6) { grid-column: 4 / 8; grid-row: 3 / 5; --vrown-board-tilt: -5deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(7) { grid-column: 8 / 12; grid-row: 4 / 6; --vrown-board-tilt: 1.5deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(8) { grid-column: 12 / 14; grid-row: 4 / 8; --vrown-board-tilt: -3deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(9) { grid-column: 14 / 17; grid-row: 4 / 8; --vrown-board-tilt: 3.5deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(10) { grid-column: 4 / 7; grid-row: 5 / 8; --vrown-board-tilt: 4deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(11) { grid-column: 7 / 10; grid-row: 6 / 8; --vrown-board-tilt: -3deg; }
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene:nth-child(12) { grid-column: 10 / 12; grid-row: 6 / 8; --vrown-board-tilt: 2deg; }
}

@media (max-width: 720px) {
  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    min-height: min(68svh, 600px);
  }

  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body[data-site-page="vrown"] .va-vrown-experience .va-play-cutout-scene img {
    max-height: min(16svh, 134px);
  }
}

/* Final fixed-poster overrides: keep older board experiments from changing
   the requested static layout. */
body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scroll {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-items: initial !important;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene {
  position: absolute !important;
  height: auto !important;
}

body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene img {
  max-height: none !important;
}

/* On narrow screens, leave a clean reading lane through the invitation.
   Only the two cutouts nearest the centre move, so the collage stays intact. */
@media (max-width: 720px) {
  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(4) {
    --vrown-poster-x: 32.5% !important;
    --vrown-poster-y: 27% !important;
  }

  body[data-site-page="vrown"] .va-vrown-poster .va-play-cutout-scene:nth-child(12) {
    --vrown-poster-x: 65% !important;
    --vrown-poster-y: 39.5% !important;
  }
}
