/* Portrait proportions come from the stationery reference for each design. */
.invitation-page .revealed-stationery {
  --front-width: min(88vw, 440px);
  --front-height: clamp(310px, 70svh, 630px);
  min-height: 100svh;
  padding: 1rem;
  background: var(--surface, #3e1724);
}
.invitation-page .revealed-stationery .stationery-card {
  width: var(--front-width);
  min-height: var(--front-height);
  max-width: 100%;
  display: grid;
  grid-template-rows: minmax(130px, 1fr) auto;
  place-items: center;
  align-content: center;
  aspect-ratio: auto;
  gap: clamp(.4rem, 2svh, 1.15rem);
  padding: clamp(.85rem, 2.7svh, 2rem);
  outline: none;
  border: 0;
  border-radius: .45rem;
  text-align: center;
  box-shadow: 0 20px 70px #1509105c;
}
.invitation-page .card-letter {width: 100%; display: grid; justify-items: center; gap: .25rem}
.invitation-page .revealed-stationery .stationery-card h1 {
  max-width: 100%;
  font-size: clamp(2rem, min(8vw, 7svh), 4.4rem);
  margin: .18em 0;
  text-wrap: balance;
}
.invitation-page .stationery-card p {max-width: 100%; margin: 0; line-height: 1.4}
.invitation-page .stationery-card a {min-height: 44px; display: inline-grid; place-items: center; margin: 0}
/* Artwork and copy occupy separate rows, including when custom names wrap. */
.invitation-page[data-design=heirloom] .revealed-stationery .stationery-card {
  min-height: 0;
  grid-template-rows: auto auto;
  gap: 0;
  padding: 0;
  background: #fff8ed;
  color: #431b29;
}
.heirloom-portrait-panel {display: contents}
.invitation-page[data-design=heirloom] .heirloom-portrait-panel {
  display: grid;
  place-items: center;
  width: 100%;
  padding: clamp(1.25rem, 4svh, 2rem);
  background: #efe2ce url("/floral-paper.webp") center 28% / cover no-repeat;
  border-radius: .45rem .45rem 0 0;
}
.invitation-page[data-design=heirloom] .card-letter {
  background: #fff8ed;
  padding: clamp(1.2rem, 4.5vw, 2rem);
  gap: .45rem;
  border-radius: 0 0 .45rem .45rem;
  overflow-wrap: anywhere;
}
.invitation-page[data-design=heirloom] .stationery-card p {
  font-size: clamp(.9rem, 2.6vw, 1.05rem);
  line-height: 1.5;
}
.invitation-page[data-design=heirloom] .revealed-stationery .stationery-card h1 {
  font-size: clamp(2.4rem, 7vw, 4.35rem);
  line-height: 1;
}
.invitation-page[data-design=heirloom] .stationery-card h1 i {color: inherit}
.invitation-page[data-design=heirloom] .stationery-card a {
  font-size: .95rem;
  padding-inline: .95rem;
  margin-top: .3rem;
  border-radius: 99px;
  background: #431b29;
  color: #fff8ed;
  text-decoration: none;
}
.invitation-page[data-design=heirloom] .stationery-card a:hover {background: #612d3d}
.cover-portrait {
  display: grid;
  place-items: center;
  place-self: center;
  margin: 0;
  width: min(71%, 220px, 29svh);
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 50% 50% 15% 15% / 32% 32% 10% 10%;
  background: color-mix(in srgb, var(--cover-paper), #888 15%);
  border: 1px solid color-mix(in srgb, var(--cover-accent), white 22%);
  box-shadow: 0 8px 22px #21151226;
}
.cover-portrait img {width: 100%; height: 100%; object-fit: cover; object-position: center 40%}
.cover-portrait figcaption,.cover-portrait.is-empty img {display: none}
.cover-portrait.is-empty figcaption {display: block; padding: .4rem; text-align: center; font-size: .75rem}
[data-design=heirloom] .cover-portrait {aspect-ratio: 1; border-radius: 50%; width: min(80%, 215px, 27svh)}
.invitation-page[data-design=blue-note] .revealed-stationery .stationery-card {width: var(--folio-width)}
[data-design=blue-note] .cover-portrait {border-radius: 50% 50% .25rem .25rem / 38% 38% .25rem .25rem; width: min(65%, 193px, 24svh)}
[data-design=registry] .cover-portrait {aspect-ratio: 1.4; width: min(95%, 330px, 47svh); border-radius: 0}
[data-design=garden] .cover-portrait {width: min(75%, 210px, 29svh); border-radius: 48% 48% .3rem .3rem / 28% 28% .3rem .3rem}
.invitation-page[data-design=heirloom]:has(.cover:not([hidden])) .revealed-stationery {
  position: fixed;
  inset: 0;
  z-index: 9;
}
.invitation-page[data-design=heirloom] .cover {background: transparent}
.invitation-page[data-design=heirloom] .cover:not(.is-open) .opening-scene {
  box-shadow: 0 0 0 150vmax #361725;
  background: #361725;
}
.invitation-page[data-design=heirloom] .opening-scene {
  width: min(100%, 470px);
  min-height: min(100svh, 690px);
  align-content: center;
}
.invitation-page[data-design=heirloom] .cover.is-open {animation: none}
.invitation-page[data-design=heirloom] :is(.opening-action,.skip-opening,.guest-address) {transition: opacity .18s}
.invitation-page[data-design=heirloom] .is-open :is(.opening-action,.skip-opening,.guest-address) {opacity: 0; pointer-events: none}
.invitation-page[data-design=heirloom] .is-open .petal {transition-duration: .82s}
.guest-address{font-family:var(--serif);font-size:1.45rem;text-align:center;margin:0;overflow-wrap:anywhere}
.invitation-page[data-design=blue-note] .guest-address {position:absolute;top:max(.7rem,5svh - 10px);inset-inline:1rem}
.venue-map {display:block;width:100%;min-height:225px;border:1px solid #ddd2c2;border-radius:.4rem;margin:.8rem 0;background:#ede8dd}
.photo-controls button {min-height:44px;padding:.4rem .75rem;border:1px solid currentColor;border-radius:.35rem;background:transparent;color:inherit}
.photo-controls {display:grid;gap:.65rem;justify-items:start}
.photo-editor p {margin:.25rem 0 1rem}
.photo-editor input[type=file] {max-width:100%;padding:.35rem}
@media (prefers-reduced-motion:reduce) {
  .invitation-page[data-design=heirloom] .is-open .petal {transition:none}
}
.invitation-page[data-design=blue-note] .revealed-stationery .stationery-card {
  padding-inline: clamp(.75rem, 4vw, 2rem);
}
.invitation-page[data-design=registry] .revealed-stationery .stationery-card {
  text-align: left;
  align-items: end;
  border-radius: 0;
}
.invitation-page[data-design=registry] .card-letter {justify-items: start}
.invitation-page[data-design=garden] .revealed-stationery .stationery-card {
  justify-items: end;
  text-align: right;
  padding-inline: clamp(1.7rem, 7vw, 3.8rem);
}
.invitation-page[data-design=garden] .card-letter {justify-items: end}