/* Positions are relative to the original 608 × 1080 artwork. */
.velvet-only, .velvet-date { display: none; }
.invitation-page[data-design="velvet-gold"] {
  --wrap-ink: #270c15;
  --wrap-text: #fff4df;
  --opening-art: url("/velvet-envelope.webp");
}
.invitation-page[data-design="velvet-gold"] .velvet-only { display: block; }
.invitation-page[data-design="velvet-gold"] .velvet-date { display: grid; }
/* The hit target follows the wax seal printed in the full-bleed artwork. */
.invitation-page[data-design="velvet-gold"] .cover { overflow: clip; }
.invitation-page[data-design="velvet-gold"] .cover .opening-scene {
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  container-type: size;
}
.invitation-page[data-design="velvet-gold"] .cover .opening-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  filter: none;
}
.invitation-page[data-design="velvet-gold"] .paper-piece { background-size: cover; }
.invitation-page[data-design="velvet-gold"] .cover .opening-action {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: max(44px, 46cqw, 26cqh);
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.invitation-page[data-design="velvet-gold"] .opening-action span,
.invitation-page[data-design="velvet-gold"] .skip-opening:not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.invitation-page[data-design="velvet-gold"] .cover .skip-opening:focus-visible {
  position: absolute;
  inset: auto auto max(1rem, env(safe-area-inset-bottom)) 50%;
  translate: -50%;
  background: #fff8ef;
  color: #351422;
  padding-inline: 1rem;
}
.invitation-page[data-design="velvet-gold"] .cover .guest-address {
  position: absolute;
  inset: auto 1rem max(3.8rem, env(safe-area-inset-bottom));
  color: #351422;
  background: #fff8ef;
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin: auto;
  padding: .3rem .65rem;
  overflow-wrap: anywhere;
}

/* Keep the card in the same document layout throughout the opening. */
.invitation-page[data-design="velvet-gold"]:has(.cover:not([hidden])) .revealed-stationery {
  position: static;
}
html:has(body[data-design="velvet-gold"]) { scrollbar-gutter: stable; }
.invitation-page[data-design="velvet-gold"] .velvet-system-type {
  --serif: Georgia, serif;
  --sans: system-ui, sans-serif;
  font-family: var(--sans);
}

.invitation-page[data-design="velvet-gold"] :is(.heirloom-portrait-panel, .story-art, #wedding-gallery, .card-letter [data-preview="date"]) { display: none; }

.invitation-page[data-design="velvet-gold"] .revealed-stationery { min-height: 0; background: transparent; }
.invitation-page[data-design="velvet-gold"] :is(.revealed-stationery .stationery-card, .velvet-sheet, .story, .schedule, .rsvp) {
  display: block;
  width: min(100%, 550px);
  min-height: 0;
  aspect-ratio: 608 / 1080;
  margin: 0 auto;
  padding: 0;
  position: relative;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--sheet-art, none) center / 100% 100% no-repeat;
  color: #351422;
  text-align: center;
  container-type: inline-size;
}

.invitation-page[data-design="velvet-gold"] :is(.card-letter, .story-copy, .velvet-portrait-note, .schedule, .rsvp, .velvet-sheet) :is(h1, h2, h3, p) {
  margin: 0;
  max-width: none;
  color: inherit;
  overflow-wrap: anywhere;
}
.invitation-page[data-design="velvet-gold"] :is(.card-letter, .story-copy, .velvet-portrait-note, .velvet-travel-copy, .velvet-closing-copy) {
  position: absolute;
  display: grid;
  align-content: center;
  gap: 2cqw;
  background: transparent;
  margin: 0;
  padding: 0;
  width: auto;
}
.invitation-page[data-design="velvet-gold"] :is(.card-letter, .story-copy, .velvet-portrait-note, .velvet-travel-copy, .velvet-closing-copy) p {
  font-size: 4cqw;
  line-height: 1.2;
}
.invitation-page[data-design="velvet-gold"] :is(.story-copy, .velvet-sheet, .rsvp) h2 {
  font-size: 8cqw;
  line-height: .98;
}
.invitation-page[data-design="velvet-gold"] .revealed-stationery .stationery-card { --sheet-art: url("/velvet-01.webp"); }
.invitation-page[data-design="velvet-gold"] .card-letter { inset: 20% 21% 33%; }
.invitation-page[data-design="velvet-gold"] .revealed-stationery .stationery-card h1 { font-size: 10cqw; line-height: .95; }
.invitation-page[data-design="velvet-gold"] .card-letter h1 i { color: inherit; }
.invitation-page[data-design="velvet-gold"] .card-letter a { color: inherit; font-size: 3.6cqw; margin: 0; }
.invitation-page[data-design="velvet-gold"] .card-letter a span { display: inline; }
.velvet-date {
  position: absolute;
  inset: 79% 18% 11%;
  display: none;
  align-content: center;
  margin: 0;
  max-width: none;
  font-weight: 600;
  font-size: 4cqw;
  line-height: 1.1;
}

.invitation-page[data-design="velvet-gold"] .story { --sheet-art: url("/velvet-02.webp"); }
.invitation-page[data-design="velvet-gold"] .story-copy { inset: 19% 17% 17%; }
.invitation-page[data-design="velvet-gold"] .story-copy > p:not(.eyebrow) { max-width: none; }
.invitation-page[data-design="velvet-gold"] .story-copy .signature { font-size: 5cqw; }
.velvet-sheet[data-sheet="03"] { --sheet-art: url("/velvet-03.webp"); }
.velvet-portrait-note { inset: 19% 32% 32% 15%; }
.velvet-portrait-slot { inset: 60% 4.8% 11.8% 52.1%; border-radius: 50%; }

.velvet-sheet[data-sheet="04"] { --sheet-art: url("/velvet-04.webp"); }
.velvet-portrait-sequence .velvet-photo { width: 20.6%; height: 12.3%; border-radius: 50%; }
.velvet-portrait-sequence .velvet-photo:nth-child(odd) { left: 21.6%; }
.velvet-portrait-sequence .velvet-photo:nth-child(even) { left: 58.3%; }
.velvet-portrait-sequence .velvet-photo:nth-child(1) { top: 22%; }
.velvet-portrait-sequence .velvet-photo:nth-child(2) { top: 11.3%; }
.velvet-portrait-sequence .velvet-photo:nth-child(3) { top: 46.2%; }
.velvet-portrait-sequence .velvet-photo:nth-child(4) { top: 34.2%; }
.velvet-portrait-sequence .velvet-photo:nth-child(5) { top: 71.1%; }
.velvet-portrait-sequence .velvet-photo:nth-child(6) { top: 57.7%; }

.invitation-page[data-design="velvet-gold"] .schedule { --sheet-art: url("/velvet-05.webp"); }
.invitation-page[data-design="velvet-gold"] .schedule > :is(h2, .eyebrow) { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.invitation-page[data-design="velvet-gold"] .events { margin: 0; }
.invitation-page[data-design="velvet-gold"] .events article {
  position: absolute;
  inset: 19% 11% auto;
  height: 25%;
  display: grid;
  gap: .65cqw;
  align-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  font-size: 3.55cqw;
  line-height: 1.13;
}
.invitation-page[data-design="velvet-gold"] .events article:nth-child(2) { top: 56.3%; }
.invitation-page[data-design="velvet-gold"] .events h3 { font-size: 6cqw; line-height: .98; }
.invitation-page[data-design="velvet-gold"] .events :is(a, .event-date, .time) { font-size: inherit; margin: 0; color: inherit; }
.invitation-page[data-design="velvet-gold"] .events a { min-height: 0; line-height: 1.35; }

.velvet-sheet[data-sheet="06"] { --sheet-art: url("/velvet-06.webp"); }
/* These six masks follow the inner edges of the original artwork. */
.velvet-gallery .velvet-photo:nth-child(1) { inset: 8.5% 50.8% 66.1% 16.6%; border-radius: 50%; }
.velvet-gallery .velvet-photo:nth-child(2) {
  inset: 6.5% 8.2% 64.5% 59.4%;
  border-radius: 50% 50% 0 0 / 29% 29% 0 0;
}
.velvet-gallery .velvet-photo:nth-child(3) {
  inset: 39.6% 44.7% 40.1% 8.1%;
  clip-path: polygon(7% 0, 93% 0, 99% 7%, 100% 15%, 100% 85%, 99% 93%, 94% 100%, 7% 100%, 1% 93%, 0 85%, 0 14%, 2% 6%);
}
.velvet-gallery .velvet-photo:nth-child(4) { inset: 45.4% 6.5% 35.3% 60.7%; border-radius: 50%; }
.velvet-gallery .velvet-photo:nth-child(5) {
  inset: 65.7% 58.5% 6.5% 9.8%;
  clip-path: polygon(11% 0, 89% 0, 94% 6%, 100% 9%, 100% 91%, 94% 94%, 89% 100%, 11% 100%, 6% 94%, 0 91%, 0 9%, 6% 6%);
}
.velvet-gallery .velvet-photo:nth-child(6) { inset: 69.8% 6.2% 10.7% 47.6%; border-radius: 11% / 13%; }
:is(.velvet-photo, .velvet-portrait-slot, .velvet-countdown-photo, .velvet-travel-photo) { position: absolute; overflow: hidden; }
:is(.velvet-photo, .velvet-portrait-slot, .velvet-countdown-photo, .velvet-travel-photo) img { display: block; width: 100%; height: 100%; object-fit: cover; }
.velvet-gallery .velvet-photo img { object-position: center 21%; }

.velvet-sheet[data-sheet="07"] { --sheet-art: url("/velvet-07.webp"); }
.velvet-countdown-photo { inset: 18.3% 24% 56.7% 22.3%; border-radius: 50%; }
.invitation-page[data-design="velvet-gold"] #countdown-title { position: absolute; inset: 6% 18% auto; font-size: 5.5cqw; color: #fff1d0; text-shadow: 0 1px 4px #260e16; }
.velvet-clock { position: absolute; inset: 66.7% 9.1% 18.6%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2%; margin: 0; }
.velvet-clock div { display: grid; align-content: center; gap: .9cqw; }
.velvet-clock dd { margin: 0; color: #fff1d0; font: 7.3cqw / 1 var(--serif); font-variant-numeric: tabular-nums; }
.velvet-clock dt { color: #fff1d0; font-size: 3cqw; line-height: 1; }

.invitation-page[data-design="velvet-gold"] .rsvp { --sheet-art: url("/velvet-08.webp"); }
.invitation-page[data-design="velvet-gold"] .rsvp > div { position: absolute; inset: 13% 19% 58%; display: grid; align-content: center; gap: 1.2cqw; }
.invitation-page[data-design="velvet-gold"] .rsvp > div p { color: inherit; font-size: 3.35cqw; line-height: 1.2; }
.invitation-page[data-design="velvet-gold"] .rsvp form { position: absolute; inset: 47.4% 18% auto; text-align: left; font-size: 3.2cqw; line-height: 1.1; }
.invitation-page[data-design="velvet-gold"] .rsvp :is(input, select) {
  min-height: 0;
  padding: 0 .2em;
  height: 6.4cqw;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: max(16px, 3.2cqw);
}
.invitation-page[data-design="velvet-gold"] .rsvp label { font-size: inherit; margin: 0; }
.invitation-page[data-design="velvet-gold"] .rsvp :is(input, select) + label { margin-top: .5cqw; }
.invitation-page[data-design="velvet-gold"] .rsvp #party { margin-top: .5cqw; }
.invitation-page[data-design="velvet-gold"] .rsvp .button { margin-top: .25em; padding: .35em .6em; background: transparent; border: 1px solid currentColor; color: inherit; font-size: inherit; }
.invitation-page[data-design="velvet-gold"] #rsvp-status { margin-top: .25em; }

.velvet-sheet[data-sheet="09"] { --sheet-art: url("/velvet-09.webp"); }
.velvet-travel-copy { inset: 22% 19% 49%; }
.velvet-travel-link { position: absolute; inset: 58% 25% 34%; display: grid; place-items: center; color: #fff1d0; font-size: 4cqw; font-weight: 600; }
.velvet-travel-photo { inset: 70.9% 14.8% 6.3% 44%; }
.velvet-sheet[data-sheet="10"] { --sheet-art: url("/velvet-10.webp"); }
.velvet-closing-copy { inset: 20% 17%; }

.invitation-page[data-design="velvet-gold"] .velvet-closing-copy a { color: inherit; font-size: 3.6cqw; }
.invitation-page[data-design="velvet-gold"] #invitation { border: 0; }