/* Rose Heirloom. Keep artwork in its own panel and lettering on solid paper. */
.invitation-page .story-art {display:none}
.invitation-page[data-design=heirloom] #invitation {background:#efe2d8}
.invitation-page[data-design=heirloom] .story {
  grid-template-columns:1fr;
  gap:0;
  width:min(100% - 2rem,920px);
  max-width:none;
  margin:clamp(2rem,7vw,6rem) auto;
  padding:0;
  min-height:0;
  background:#fff9ef;
  border-radius:1rem;
  overflow:hidden;
  color:#421c2b;
  box-shadow:0 18px 55px #35162616;
}
.invitation-page[data-design=heirloom] .story::before {content:none}
.invitation-page[data-design=heirloom] .story-art {
  display:block;
  min-height:clamp(115px,28vw,235px);
  background:#4a171c url("/heirloom-relief.webp") center/cover no-repeat;
}
.invitation-page[data-design=heirloom] .story-copy {padding:clamp(1.5rem,6vw,4.75rem);overflow-wrap:anywhere}
.invitation-page[data-design=heirloom] .story-copy h2 {margin:0 0 .55em}
.invitation-page[data-design=heirloom] .story-copy .signature {margin-bottom:0}
.invitation-page[data-design=heirloom] .schedule {
  position:relative;
  max-width:none;
  padding-inline:max(1rem,calc((100vw - 950px)/2));
  background:#fbf1e7;
  border-top:1px solid #d6b6a8;
}
.invitation-page[data-design=heirloom] .schedule::before {
  content:"";
  display:block;
  width:70px;
  height:5px;
  margin-bottom:1.75rem;
  background:#a77958;
}
.invitation-page[data-design=heirloom] .events {gap:1rem}
.invitation-page[data-design=heirloom] .events article {
  padding:clamp(1rem,4vw,1.75rem);
  border:1px solid #dfc6b6;
  border-radius:12px;
  background:#fffaf2;
}
.invitation-page[data-design=heirloom] .events a {min-height:44px;align-content:center}
.invitation-page[data-design=heirloom] .photo-carousel {
  max-width:none;
  padding-inline:clamp(1rem,5vw,4rem);
  color:#fff8ed;
  background:#351725 url("/heirloom-relief.webp") center/cover;
}
.invitation-page[data-design=heirloom] .photo-carousel :is(h2,.photo-position) {
  width:fit-content;
  margin-inline:auto;
  background:#351725;
  padding:.4rem .8rem;
  border-radius:.35rem;
}
.invitation-page[data-design=heirloom] .rsvp {background:#482132}
@media(min-width:720px) {
  .invitation-page[data-design=heirloom] .story {grid-template-columns:.78fr 1.22fr}
  .invitation-page[data-design=heirloom] .story-art {align-self:stretch}
}
@media(prefers-reduced-motion:no-preference) {
  .invitation-page .invite-arrival {
    animation:invite-arrival .72s cubic-bezier(.2,.65,.25,1) both;
    animation-delay:var(--arrival-delay,0ms);
  }
  @keyframes invite-arrival {from{opacity:.15;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* The revealed card is the first screen. Host tools sit after the guest content. */
.invitation-page .revealed-stationery {
  --front-width: min(100%, 475px);
  min-height: 100svh;
  padding: 0;
  scroll-margin-top: 0;
}
.invitation-page:has(.cover:not([hidden])) #invitation {border-top:0}
.invitation-page[data-design] .revealed-stationery .stationery-card {
  min-height: 100svh;
  align-content: stretch;
  grid-template-rows: minmax(min(36svh,260px),1fr) auto;
  box-shadow: none;
  border-radius: 0;
}
.invitation-page .cover-portrait img {height:100%}
.invitation-page .card-letter {padding-bottom:max(1rem,env(safe-area-inset-bottom))}
.invitation-page[data-design=heirloom] .heirloom-portrait-panel {
  height:100%;
  border-radius:0;
  background-position:center 20%;
}
.invitation-page[data-design=heirloom] .cover-portrait {width:min(72%, 285px, 42svh)}
.invitation-page[data-design=heirloom] .card-letter {
  padding:clamp(.9rem,3.3svh,2.15rem) 1.25rem max(1.1rem,env(safe-area-inset-bottom));
  border-radius:0;
}
.invitation-page[data-design=heirloom] .stationery-card a {gap:.35rem;grid-auto-flow:column}
.invitation-page .invitation-credit {gap:1rem}
@media(max-width:650px) {
  .invitation-page[data-design] .revealed-stationery .stationery-card {width:100%}
  .invitation-page[data-design=blue-note] .revealed-stationery .stationery-card {
    width:100%;
    padding:1.25rem 1rem;
  }
  .invitation-page[data-design=blue-note] .envelope-case {
    width:100%;
    height:100%;
    aspect-ratio:auto;
  }
}
@media(min-width:651px) {
  .invitation-page[data-design] .revealed-stationery .stationery-card {
    width:min(100%,490px);
    min-height:100svh;
  }
  .invitation-page[data-design=blue-note] .revealed-stationery .stationery-card {width:var(--folio-width)}
}
.invitation-page[data-design=heirloom] .revealed-stationery .stationery-card {
  gap:0;
  padding:0;
}
.invitation-page[data-design] #invitation {border-top:0}