/* One full-width invitation, with the same garden and reading order on every screen. */
main {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  container: lilac-page / inline-size;
  box-shadow: none;
}
.invitation.adaptive-composition {
  height: max(100svh, 640px);
  min-height: 0;
  max-height: none;
  --film-left: 0px;
  --film-top: 0px;
  --film-height: 100svh;
  --opening-stage-height: 100svh;
}
.adaptive-composition h1 { font-size: clamp(44px, 14cqw, 82px); }
.adaptive-composition .prelude { font-size: clamp(7px, 1.4cqw, 9px); }
.adaptive-composition .invitation-line { font-size: clamp(15px, 3.6cqw, 20px); }
.adaptive-composition .date-line { font-size: clamp(14px, 3.4cqw, 18px); }
.adaptive-composition .city { font-size: clamp(10px, 2.4cqw, 14px); }
.adaptive-composition .opening-film-stage,
.adaptive-composition .cover-stage { height: var(--opening-stage-height); bottom: auto; }
.adaptive-composition #opening-film { object-fit: cover; }
/* Wide scenes open the same embroidered cloth as two responsive leaves. The
   film remains the portrait renderer; no movie is stretched or letterboxed. */
.opening-leaves { display: none; position: absolute; inset: 0 0 auto; height: var(--opening-stage-height); z-index: 2; perspective: 1600px; pointer-events: none; }
.cloth-opening-canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.cloth-webgl-active .cloth-opening-canvas { display: block; }
.cloth-webgl-active :is(.cloth-leaf, .cloth-fallback) { visibility: hidden; }
.cloth-fallback { position: absolute; inset: 0; }
.inner-curtain { position: absolute; top: 0; width: 50.6%; height: 47.2%; background: repeating-linear-gradient(90deg,#bcb095 0%,#eee7d2 3%,#fff9e9 5%,#d4c9af 8%,#bcb095 10%); transform-origin: top center; }
.inner-curtain-left { left: 0; border-right: 2px dotted #f6ebcf; border-bottom: 2px dotted #f6ebcf; }
.inner-curtain-right { right: 0; border-left: 2px dotted #f6ebcf; border-bottom: 2px dotted #f6ebcf; }
.cloth-canopy { position: absolute; inset: 0 0 auto; height: 14%; overflow: hidden; mask-image: linear-gradient(#000 60%,transparent); }
.cloth-canopy img { position: absolute; max-width: none; }
.cloth-leaf { position: absolute; z-index: 1; top: 0; bottom: 0; width: 50%; overflow: hidden; transform-style: flat; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cloth-leaf-left { left: 0; transform-origin: left center; }
.cloth-leaf-right { right: 0; transform-origin: right center; }
.cloth-leaf-art { position: absolute; top: 0; bottom: 0; width: 200%; background: #b2a6a9; }
/* The original linen continues between the flowers. Its mirrored, ornament-free
   sample shares the corner artwork's scale, so wide screens never expose a flat
   grey field or a different weave. Only the straight stitched rails extend. */
.cloth-weave { position: absolute; inset: 0; }
.cloth-leaf-art::after { content: ''; position: absolute; inset: 0; border: calc(var(--leaf-art-width) * .027142857) solid transparent; border-image: url('assets/embroidered-cover.webp') 19 / 1 / 0 stretch; pointer-events: none; }
.leaf-corner { position: absolute; width: calc(var(--leaf-art-width) * .5); height: calc(var(--leaf-art-width) * .75); background: url('assets/embroidered-cover.webp') no-repeat; background-size: var(--leaf-art-width) calc(var(--leaf-art-width) * 1.5); mask-composite: intersect; }
.leaf-corner.top-left { left: 0; top: 0; background-position: left top; mask-image: linear-gradient(to right,#000 80%,transparent),linear-gradient(to bottom,#000 87%,transparent); }
.leaf-corner.top-right { right: 0; top: 0; background-position: right top; mask-image: linear-gradient(to left,#000 80%,transparent),linear-gradient(to bottom,#000 87%,transparent); }
.leaf-corner.bottom-left { left: 0; bottom: 0; background-position: left bottom; mask-image: linear-gradient(to right,#000 80%,transparent),linear-gradient(to top,#000 87%,transparent); }
.leaf-corner.bottom-right { right: 0; bottom: 0; background-position: right bottom; mask-image: linear-gradient(to left,#000 80%,transparent),linear-gradient(to top,#000 87%,transparent); }
.cloth-leaf-left .cloth-leaf-art { left: 0; }
.cloth-leaf-right .cloth-leaf-art { right: 0; }
.cloth-leaf-left::after, .cloth-leaf-right::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: #64565a70; }
.cloth-leaf-left::after { right: 0; }
.cloth-leaf-right::after { left: 0; }
[data-opening-renderer="leaves"] .opening-leaves { display: block; }
[data-opening-renderer="leaves"] .opening-film-stage { display: none; }
.cloth-transfer[data-opening-renderer="leaves"] .opening-film-stage { display: block; z-index: 4; }
.cloth-transfer[data-opening-renderer="leaves"].is-opening .clasp-button { opacity: 0; }
.adaptive-composition[data-opening-renderer="leaves"] .cover-labels { top: 23%; display: block; }
.adaptive-composition[data-opening-renderer="leaves"] .opening-hint { top: 66%; }
.adaptive-composition[data-opening-renderer="leaves"] .clasp-button { left: 50%; top: 48%; width: min(155px, calc(var(--opening-stage-height) * .24)); }
.adaptive-composition[data-opening-renderer="leaves"] .clasp-button > span { font-size: clamp(16px, calc(var(--opening-stage-height) * .035), 30px); }
.adaptive-composition[data-opening-renderer="leaves"] .cover-names { font-size: clamp(24px, calc(var(--opening-stage-height) * .06), 48px); }
[data-opening-renderer="leaves"].is-opening .clasp-button { animation: none; transition: none; opacity: var(--clasp-opacity, 1); left: var(--clasp-x, 50%); top: var(--clasp-y, 48%); transform: translate(-50%,-50%) rotateY(var(--clasp-angle, 0deg)); }
.cover-finished .opening-leaves { display: none; }
.invitation[data-art-mode="wide"] .invitation-content { top: 13%; left: 50%; width: min(64%, 680px); height: 40%; transform: translateX(-50%); }
.invitation[data-art-mode="wide"] h1 { font-size: clamp(44px, 6cqw, 76px); }
.invitation[data-art-mode="wide"].hero-expanded .invitation-content { transform: none; left: auto; height: auto; }
main > .scene:not(.invitation) > :is(.welcome-copy, .event-book, .guest-guide, .story-frame, .rsvp-form) { max-width: 660px; margin-inline: auto; }
/* Keep illustrated keepsakes at their readable scale inside full-width paper. */
main .welcome-swans { width: min(85%, 540px); }
main .date-keepsake { width: min(100%, 480px); margin-inline: auto; }
main .venue-portrait { width: min(100%, 580px); }
main .story-frame { max-width: 660px; }
/* Positions are measured from the rendered film, not an unrelated viewport. */
.adaptive-composition .cover-labels {
  top: max(18px, calc(var(--film-top) + var(--film-height) * .23));
  left: 15%;
  right: 15%;
}
.adaptive-composition .cover-names { font-size: clamp(26px, 7.6cqw, 48px); line-height: 1.2; overflow-wrap: anywhere; }
.adaptive-composition .cover-labels .eyebrow { font-size: clamp(7px, 1.6cqw, 10px); }
.adaptive-composition .clasp-button {
  left: calc(var(--film-left) + var(--film-width) * .5);
  top: calc(var(--film-top) + var(--film-height) * .48);
  width: clamp(64px, calc(var(--film-width) * .25), 155px);
}
.adaptive-composition .clasp-button > span { font-size: clamp(18px, calc(var(--film-width) * .058), 33px); }
.adaptive-composition .opening-hint {
  top: min(calc(var(--film-top) + var(--film-height) * .66), calc(var(--opening-stage-height) - 90px));
  left: 10%;
  right: 10%;
  font-size: clamp(14px, 3.9cqw, 21px);
  line-height: 1.4;
  justify-content: center;
  gap: 8px;
}
.adaptive-composition .opening-hint svg { width: 24px; height: 29px; }
.adaptive-composition .opening-status { top: auto; bottom: 18px; left: 10%; right: 10%; font-size: 13px; }
/* Longer inscriptions may grow the paper, while the artwork keeps its ratio. */
.invitation.adaptive-composition.hero-fitted { height: var(--hero-height); }
.invitation.adaptive-composition.hero-expanded { height: auto; min-height: 100svh; }
.adaptive-composition.hero-expanded .garden-art { object-fit: contain; }
.adaptive-composition.hero-expanded .invitation-content { padding-top: clamp(110px, 28cqw, 190px); }
.adaptive-composition.hero-expanded .hero-scroll { position: relative; inset: auto; order: 2; padding: 12px 20px max(22px, env(safe-area-inset-bottom)); }
@media (max-height: 500px) {
  .adaptive-composition .opening-hint { flex-direction: row; font-size: 12px; }
  .adaptive-composition[data-opening-renderer="leaves"] .cover-labels { top: 12%; }
  .adaptive-composition[data-opening-renderer="leaves"] .opening-hint { top: 74%; }
  .adaptive-composition .opening-hint svg { width: 20px; height: 24px; flex: none; }
  .adaptive-composition .cover-names { margin-top: 6px; }
}
@media print {
  main { max-width: 660px; }
  .invitation.adaptive-composition { min-height: 0; }
}

/* Runtime-added RSVP fields share the form's sizing and native label targets. */
#rsvp-form > label:has(#guest-email) { display: block; width: 100%; min-width: 0; margin-block: 12px 18px; text-align: left; }
#rsvp-form #guest-email { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 7px 0 0; min-height: 46px; padding: 10px 12px; font: 17px var(--serif); background: #fdfaf288; border: 1px solid #ad9b9d80; border-radius: 0; color: var(--ink); }
#rsvp-form .keepsake-rsvp-events { min-width: 0; margin: 16px 0 22px; padding: 0; border: 0; }
#rsvp-form .keepsake-rsvp-events legend { width: 100%; margin-bottom: 8px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#rsvp-form .keepsake-rsvp-event { min-height: 44px; min-width: 0; gap: 10px; padding-block: 6px; margin: 0; align-items: center; font-size: 14px; line-height: 1.5; cursor: pointer; overflow-wrap: anywhere; }
#rsvp-form .keepsake-rsvp-event input[type=checkbox] { width: 20px !important; height: 20px; min-width: 20px; min-height: 20px; flex: 0 0 20px; margin: 0; padding: 0; accent-color: #80647c; }