/* The sticky backdrops have a negative bottom margin. Contain their paint at
   the act boundary so the standalone introductions actually sit on paper. */
.stage {
  overflow: clip;
}

.return-invitation{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;min-height:380px;padding:2rem 1rem 3rem;color:var(--ink);text-decoration:none}
.return-invitation-art{display:flex;align-items:end;justify-content:center;height:290px;gap:2rem}
.return-invitation-art img{height:100%;width:auto;max-width:46%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.return-invitation-art img:last-child{height:82%;transform:scaleX(-1)}
.return-invitation-copy{display:flex;flex-direction:column;gap:1.5rem;font-size:1.35rem;line-height:1.3}
.return-invitation-title{font-family:var(--display);font-size:clamp(3rem,6vw,5.5rem);line-height:1}
.return-invitation-enter{font-family:var(--body);font-size:1rem;text-decoration:underline;text-underline-offset:.3em}
.return-invitation:hover .return-invitation-art img:first-child{transform:translateY(-12px) rotate(-3deg)}
.return-invitation:hover .return-invitation-art img:last-child{transform:scaleX(-1) translateY(-12px) rotate(-3deg)}
.return-invitation:focus-visible{outline:2px solid var(--ink);outline-offset:8px}
@media(max-width:600px){.return-invitation{grid-template-columns:1fr;gap:1.5rem;padding:1rem 0 2rem}.return-invitation-art{height:220px;gap:2rem}.return-invitation-copy{text-align:center;font-size:1.2rem;gap:1rem}}
@media(prefers-reduced-motion:reduce){.return-invitation-art img{transition:none}.return-invitation:hover .return-invitation-art img:first-child{transform:none}.return-invitation:hover .return-invitation-art img:last-child{transform:scaleX(-1)}}

/* Keep the replay's words above the hands, with the account carrying more weight
   than the repeated description. The original mobile composition already does this. */
@media (min-width: 821px) {
  .scene[data-w] .said {
    top: 9vh;
    max-width: 36vw;
    font-size: clamp(1.65rem, 2.7vw, 2.75rem);
    line-height: 1.12;
    padding: .4em .6em;
  }

  .scene[data-w] .meant {
    top: 9vh;
    max-width: 38vw;
    font-size: clamp(1.15rem, 2vw, 1.8rem);
    line-height: 1.4;
  }

  .scene .fig[data-side] {
    bottom: -13vh;
  }
}

/* The sweep and chalice are much wider than the upright hand cutouts. Give them
   their own scale so the answer doesn't cover the wafer or the sweeping palm. */
@media (max-width: 820px) {
  .scene[data-w="2"] .fig[data-side="l"] {
    height: 26vh !important;
  }

  .scene[data-w="3"] .fig[data-side="l"] {
    height: 28vh !important;
  }
}