/*
 * Finden scroll scenes, built on the shared stage (stage.css / stage.js).
 * Each block is written as the finished composition first (no script, reduced motion, phone 'rest'),
 * then the live layout under .scene.is-live.
 */

.scene.is-live { padding-block: 0; }

/* ---------- The diamond opens: our work, seen through the brand's diamond ---------- */

.ww .scene-stage { width: var(--wrap); margin-inline: auto; }
.ww__head { margin-bottom: var(--space-12); max-width: 900px; }
.ww__head .h-1 { margin-bottom: var(--space-3); }
.ww__window { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.ww__item { margin: 0; }
.ww__item img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  border-radius: var(--radius); background: var(--surface-alt);
}
.ww__item figcaption { margin-top: var(--space-2); }
.ww__gold, .ww__caps { display: none; }

@media (max-width: 767px) {
  .ww__window { grid-template-columns: 1fr; }
}

.ww.is-live .scene-stage {
  width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: var(--space-6);
  padding-block: 108px 32px;
}
.ww.is-live .ww__head { margin: 0; }
.ww.is-live .ww__frame { position: relative; min-height: 0; container-type: size; }
.ww.is-live .ww__window {
  display: block; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(100cqw, 160cqh); aspect-ratio: 16 / 10;
  overflow: hidden; background: var(--surface-alt); transform-origin: 50% 50%;
}
.ww.is-live .ww__item { position: absolute; inset: 0; }
.ww.is-live .ww__item img { height: 100%; border-radius: 0; }
.ww.is-live .ww__item figcaption { display: none; }
.ww.is-live .ww__gold { display: block; position: absolute; inset: 0; background: var(--gold); }
.ww.is-live .ww__caps { display: grid; list-style: none; padding: 0; margin: 0; min-height: 1.6em; }
.ww.is-live .ww__caps li { grid-area: 1 / 1; display: flex; justify-content: space-between; gap: var(--space-6); color: var(--ink); }
.ww.is-live .ww__caps b { font-weight: 600; }

@media (max-width: 767px) {
  .ww.is-live .scene-stage { grid-template-rows: auto auto auto; align-content: center; padding-block: 96px 24px; }
  .ww.is-live .ww__frame { aspect-ratio: 16 / 10; }
  .ww.is-live .ww__caps li { flex-direction: column; gap: 2px; }
}
.ww.is-live .ww__caps span { color: var(--ink-muted); }