/* Continuous wedding stationery, inspired by the supplied references. */
.page-wrapper {
  background:var(--paper);
  padding-top:0
}
.site-header {
  max-width:none;
  margin:0 auto;
  background:var(--paper);
  border-bottom-color:#32191212
}
.site-header nav {
  gap:18px
}
.paper-invitation {
  width:100%;
  max-width:none;
  margin:0 auto;
  background:var(--paper);
  box-shadow:none
}
.paper-invitation>section {
  padding:70px clamp(28px,6vw,80px);
  background:transparent;
  color:var(--ink);
  overflow:visible
}
.paper-invitation .section-heading {
  margin-bottom:35px;
  text-align:center
}
.paper-invitation h2 {
  font-size:clamp(32px,3.6vw,48px);
  letter-spacing:-.035em
}
.paper-invitation .section-heading h2 {
  margin:10px 0 16px
}
.paper-invitation .section-heading>p:not(.kicker) {
  font-size:12px
}
.paper-invitation .mw-btn {
  font-size:9px;
  min-height:44px;
  padding:11px 20px;
  letter-spacing:.04em
}
.paper-invitation .hero {
  padding-top:65px!important;
  padding-bottom:35px!important
}
.paper-invitation .hero::before {
  display:none
}
.invitation-stack {
  position:relative;
  max-width:760px;
  height:570px;
  margin:auto;
  isolation:isolate
}
.paper-bouquet {
  position:absolute;
  right:-1%;
  top:0;
  width:25%;
  height:70%;
  object-fit:contain;
  z-index:0;
  pointer-events:none;
  filter:drop-shadow(2px 5px 4px #32191218)
}
.welcome-polaroid {
  position:absolute;
  left:4%;
  top:85px;
  width:48%;
  height:390px;
  margin:0;
  padding:12px 12px 40px;
  background:#fffef6;
  box-shadow:0 12px 22px #32191222;
  transform:rotate(-9deg);
  z-index:1
}
.welcome-polaroid img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:48% 30%;
  filter:grayscale(1)
}
.welcome-polaroid figcaption {
  font:italic 16px var(--serif);
  text-align:center;
  margin-top:11px
}
.invitation-note {
  position:absolute;
  right:7%;
  top:60px;
  width:48%;
  min-height:450px;
  padding:55px 32px 32px;
  z-index:2;
  text-align:center;
  transform:rotate(3deg);
  isolation:isolate;
  filter:drop-shadow(0 7px 8px #32191218)
}
.invitation-note::before {
  content:"";
  position:absolute;
  inset:-12px;
  z-index:-1;
  background:url('../images/papel-orla.svg') center/100% 100% no-repeat;
  pointer-events:none
}
.invitation-note h1 {
  font:400 clamp(41px,4.6vw,59px)/1.03 var(--serif);
  color:var(--wine);
  letter-spacing:-.04em;
  margin:24px 0
}
.invitation-note h1 em {
  font-size:.65em
}
.note-message {
  font:italic 17px/1.5 var(--serif);
  max-width:240px;
  margin:auto
}
.note-date {
  font-size:10px;
  letter-spacing:.05em;
  margin:24px 0 6px
}
.note-place {
  font:italic 15px var(--serif)
}
.invitation-note .mw-btn {
  margin-top:28px;
  padding:10px 15px;
  font-size:8px;
  gap:15px
}
.paper-player {
  display:flex;
  align-items:center;
  gap:15px;
  margin:15px auto 0;
  padding:10px 15px;
  border:0;
  background:transparent;
  min-height:70px;
  text-align:left
}
.record-disc {
  display:grid;
  place-items:center;
  width:53px;
  height:53px;
  background:repeating-radial-gradient(circle,#321912 0 2px,#49342b 3px,#321912 4px);
  border-radius:50%;
  color:var(--paper);
  flex:none
}
.record-disc>span {
  display:grid;
  place-items:center;
  font:14px var(--serif);
  border:1px solid #fff6;
  border-radius:50%;
  width:27px;
  height:27px
}
.paper-player strong {
  display:block;
  font:italic 18px var(--serif);
  font-weight:400
}
.paper-player [data-inline-music-label] {
  display:block;
  font-size:9px;
  margin-top:5px;
  color:var(--blue-dark)
}
.paper-player>svg {
  width:20px;
  height:20px;
  stroke:var(--wine);
  fill:none;
  stroke-width:1.5;
  margin-left:12px
}
.record-play {
  fill:var(--wine);
  stroke:none
}
.record-pause {
  display:none
}
.paper-player[aria-pressed=true] .record-play {
  display:none
}
.paper-player[aria-pressed=true] .record-pause {
  display:block
}
.paper-invitation .couple-section {
  position:relative;
  display:grid;
  grid-template-columns:35% 1fr;
  gap:35px;
  align-items:center;
  padding-top:50px
}
.paper-invitation .letter-intro {
  position:relative;
  text-align:center
}
.paper-invitation .letter-intro h2 {
  font-size:32px;
  margin:12px 0 15px
}
.paper-invitation .letter-intro>p:last-of-type {
  font-size:10px;
  max-width:200px;
  margin:auto
}
.paper-invitation .story-portrait {
  width:100%;
  max-width:230px;
  margin:25px auto 0;
  padding:8px 8px 27px;
  transform:rotate(-7deg);
  background:#fffef6
}
.paper-invitation .story-portrait img {
  height:240px
}
.paper-invitation .love-letter {
  background:#fffef6;
  transform:rotate(2deg);
  box-shadow:0 10px 22px #3219121a
}
.paper-invitation .love-letter::after {
  inset:10px;
  border:1px solid #d5c7ac50
}
.paper-invitation .love-letter>summary {
  min-height:280px;
  padding:35px;
  background:linear-gradient(155deg,transparent 49.7%,#d4c8b348 50%,transparent 50.3%) center/100% 100%
}
.paper-invitation .letter-to {
  font-size:23px
}
.paper-invitation .love-letter[open]>summary {
  min-height:110px;
  padding:20px
}
.paper-invitation .story-copy {
  padding:35px 30px;
  background:#fffef6;
  font-size:12px
}
.paper-invitation .story-copy h2 {
  font-size:31px
}
.paper-invitation .story-copy p {
  line-height:1.9
}
.paper-invitation .itinerary {
  position:relative
}
.paper-invitation .night-experience {
  display:grid;
  grid-template-columns:36% 1fr;
  gap:0;
  box-shadow:none;
  transform:none;
  background:transparent;
  align-items:center;
  max-width:800px
}
.paper-invitation .night-photo {
  padding:10px 10px 45px;
  background:#fffef6;
  box-shadow:0 8px 20px #32191220;
  transform:rotate(-7deg);
  z-index:1
}
.paper-invitation .night-photo img {
  height:320px;
  filter:grayscale(.5)
}
.paper-invitation .night-photo-note {
  font-size:14px;
  bottom:17px
}
.paper-invitation .night-program {
  position:relative;
  padding:35px 30px;
  background:#fffef6;
  box-shadow:0 9px 24px #32191220;
  transform:rotate(2deg);
  z-index:2
}
.paper-invitation .moment-tabs {
  display:flex;
  flex-direction:column;
  gap:0;
  border:0;
  padding:0
}
.paper-invitation .moment-tabs button {
  width:100%;
  display:grid;
  grid-template-columns:35px 1fr auto;
  align-items:center;
  gap:12px;
  text-align:left;
  font-size:12px;
  background:none;
  color:var(--ink);
  padding:14px 0;
  min-height:64px;
  border-bottom:1px solid #32191210;
  transform:none;
  box-shadow:none;
  flex:none
}
.paper-invitation .moment-tabs .timeline-icon {
  width:30px;
  height:34px
}
.paper-invitation .moment-tabs .moment-name {
  font:23px var(--serif)
}
.paper-invitation .moment-tabs .moment-hour {
  font-size:11px
}
.paper-invitation .moment-tabs button[aria-selected=true] {
  color:var(--wine)
}
.paper-invitation .moment-tabs button[aria-selected=true] .moment-name {
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px
}
.paper-invitation .night-program .itinerary-list {
  min-height:90px;
  margin:22px 0 0
}
.paper-invitation .night-program .itinerary-list article {
  padding:0;
  gap:8px;
  display:flex;
  flex-direction:column;
  background:none;
  border:0
}
.paper-invitation .night-program .itinerary-list article>.timeline-icon,.paper-invitation .night-program .itinerary-list h3 {
  display:none
}
.paper-invitation .night-program .itinerary-list p {
  min-height:0;
  font-size:11px;
  line-height:1.7
}
.paper-invitation .night-program .itinerary-list .time {
  font-size:10px
}
.paper-invitation .moment-controls {
  padding-top:10px;
  margin-top:15px;
  border-top-color:#32191215
}
.paper-invitation .moment-controls button {
  font-size:10px;
  min-height:44px
}
.paper-invitation .events-section .section-heading .kicker {
  font-size:9px
}
.paper-invitation .venue-pair {
  gap:35px;
  max-width:800px
}
.paper-invitation .venue-card,.paper-invitation .venue-card:nth-child(2) {
  background:#fffef6;
  padding:12px;
  box-shadow:0 8px 20px #3219121c
}
.paper-invitation .venue-card:nth-child(2) {
  margin-top:45px
}
.paper-invitation .venue-card summary>img {
  height:220px
}
.paper-invitation .postcard-caption strong {
  font-size:27px
}
.paper-invitation .postcard-caption>span {
  font-size:10px
}
.paper-invitation .venue-card .paper-action {
  font-size:9px
}
.paper-invitation .venue-back h6 {
  font-size:22px
}
.paper-invitation .venue-back ul {
  font-size:11px
}
.paper-invitation .venue-card[open] .venue-back {
  min-height:275px
}
.paper-invitation .getting-there-section {
  display:grid;
  grid-template-columns:43% 1fr;
  gap:35px 45px
}
.paper-invitation .hotel-heading {
  grid-column:1/-1
}
.paper-invitation .hotel-heading h2 {
  font-size:38px
}
.paper-invitation .hotel-feature {
  padding:10px 10px 30px;
  background:#fffef6;
  transform:rotate(-5deg);
  box-shadow:0 8px 20px #32191220
}
.paper-invitation .hotel-feature img {
  height:270px
}
.paper-invitation .hotel-feature figcaption {
  font-size:20px
}
.paper-invitation .hotel-row {
  padding:10px 0;
  border-bottom:1px solid #32191220
}
.paper-invitation .hotel-select {
  font-size:23px;
  min-height:54px
}
.paper-invitation .hotel-select[aria-pressed=false]+.hotel-information {
  display:none
}
.paper-invitation .hotel-information {
  font-size:11px
}
.paper-invitation .hotel-information p {
  margin-top:8px
}
.paper-invitation .gallery-section {
  padding-top:60px;
  padding-bottom:65px;
  overflow:hidden
}
.paper-invitation .gallery-section h2 {
  font-size:42px
}
.paper-invitation .gallery-grid {
  width:300px;
  height:400px;
  margin-top:35px
}
.paper-invitation .gallery-photo {
  padding:10px 10px 32px;
  background:#fffef6
}
.paper-invitation .gallery-photo img {
  height:320px
}
.paper-invitation .gallery-photo>span {
  font-size:16px
}
.paper-invitation .album-contact-sheet {
  margin-top:30px
}
.paper-invitation .album-contact-sheet button {
  background:#fffef6
}
.paper-invitation .album-controls {
  gap:25px
}
.paper-invitation .album-controls button {
  width:44px;
  height:44px;
  font-size:20px
}
.paper-invitation .dress-section {
  position:relative;
  display:grid;
  grid-template-columns:40% 1fr;
  gap:35px;
  align-items:center;
  padding-top:90px;
  padding-bottom:100px
}
.paper-invitation .dress-section::before {
  content:"";
  position:absolute;
  top:5%;
  left:1%;
  width:170px;
  height:270px;
  background:url('../images/hibiscos-borgona-marfil.webp') center/contain no-repeat;
  pointer-events:none;
  opacity:.9
}
.paper-invitation .dress-section .section-heading {
  position:relative;
  z-index:1;
  text-align:center;
  background:#fffef6;
  box-shadow:0 6px 18px #3219121a;
  padding:28px 22px;
  transform:rotate(-3deg);
  margin:0
}
.paper-invitation .dress-section .kicker {
  font-size:9px
}
.paper-invitation .dress-section h2 {
  font-size:38px
}
.paper-invitation .dress-section .section-heading>p:last-child {
  font:italic 15px/1.6 var(--serif)
}
.paper-invitation .dress-duet {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:20px
}
.paper-invitation .dress-look {
  background:#fffef6;
  box-shadow:0 8px 20px #32191220;
  padding:20px 12px 16px;
  gap:18px;
  transform:rotate(5deg);
  width:150px
}
.paper-invitation .dress-look:nth-child(2) {
  transform:rotate(-5deg);
  margin-top:45px
}
.paper-invitation .dress-look svg {
  width:75px;
  height:110px
}
.paper-invitation .dress-look .mw-btn {
  font-size:8px;
  padding:10px 12px;
  gap:8px;
  min-height:44px
}
.paper-invitation .registry-section {
  position:relative;
  max-width:700px;
  margin:auto;
  padding-top:65px;
  padding-bottom:75px;
  isolation:isolate
}
.paper-invitation .registry-section::before {
  content:"";
  position:absolute;
  top:10px;
  right:30px;
  width:155px;
  height:240px;
  background:url('../images/hibiscos-borgona-marfil.webp') center/contain no-repeat;
  z-index:-1;
  transform:rotate(12deg);
  pointer-events:none
}
.paper-invitation .registry-section .section-heading {
  background:#fffef6;
  box-shadow:0 7px 20px #3219121c;
  padding:35px 30px 25px;
  margin:0;
  transform:rotate(-2deg)
}
.paper-invitation .registry-section h2 {
  font-size:36px
}
.gift-letter {
  position:relative;
  max-width:470px;
  margin:0 auto;
  background:#fffef6;
  box-shadow:0 8px 18px #32191218
}
.gift-letter>summary {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  min-height:65px;
  font-size:10px;
  padding:15px 25px;
  color:var(--wine)
}
.gift-letter>summary>span:first-child {
  text-decoration:underline;
  text-underline-offset:5px
}
.gift-letter>summary>span:last-child {
  font-size:22px;
  transition:transform .2s
}
.gift-letter[open]>summary>span:last-child {
  transform:rotate(45deg)
}
.paper-invitation .registry-list {
  padding:20px;
  gap:16px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center
}
.paper-invitation .registry-item {
  background:transparent;
  box-shadow:none;
  transform:none;
  width:calc(50% - 8px);
  padding:16px 5px;
  border-bottom:1px solid #32191215;
  gap:12px
}
.paper-invitation .registry-item img {
  width:115px;
  height:55px
}
.paper-invitation .copy-code {
  font-size:11px
}
.paper-invitation .save-date {
  padding-top:80px;
  padding-bottom:80px;
  color:var(--ink);
  text-align:center
}
.paper-invitation .save-date h2 {
  font-size:40px
}
.paper-invitation .date-scene {
  display:flex;
  flex-direction:column;
  gap:35px
}
.paper-invitation .date-composition {
  background:#fffef6;
  box-shadow:0 6px 16px #32191215;
  transform:rotate(-3deg);
  width:155px;
  padding:12px
}
.paper-invitation .date-composition strong {
  font-size:75px
}
.paper-invitation .date-composition span {
  font-size:10px
}
.paper-invitation #clock {
  justify-content:center;
  gap:30px;
  margin-bottom:20px
}
.paper-invitation #clock strong {
  font-size:30px
}
.paper-invitation #clock span {
  font-size:9px
}
.paper-invitation .countdown-area>p {
  font:italic 18px var(--serif)
}
.paper-invitation .calendar-buttons {
  justify-content:center;
  margin-top:25px
}
.paper-invitation .save-date a:focus-visible {
  outline-color:var(--wine)
}
.paper-invitation .rsvp-section {
  position:relative;
  display:block;
  padding-top:70px;
  padding-bottom:75px;
  isolation:isolate
}
.paper-invitation .rsvp-section::before {
  content:"";
  position:absolute;
  top:110px;
  right:8%;
  height:300px;
  width:180px;
  background:url('../images/hibiscos-borgona-marfil.webp') center/contain no-repeat;
  z-index:-1;
  pointer-events:none;
  transform:rotate(15deg)
}
.paper-invitation .rsvp-copy {
  text-align:center;
  margin-bottom:35px
}
.paper-invitation .rsvp-copy h2 {
  font-size:40px;
  margin:10px 0 20px
}
.paper-invitation .rsvp-copy p {
  font-size:11px
}
.paper-invitation .rsvp-photo {
  display:none
}
.paper-invitation .reply-envelope {
  width:100%;
  max-width:430px;
  margin:0 auto;
  background:var(--wine);
  box-shadow:0 10px 25px #32191225;
  border-bottom:0;
  transform:rotate(1deg)
}
.paper-invitation .reply-envelope>summary {
  padding:30px;
  min-height:260px;
  gap:24px
}
.paper-invitation .reply-label {
  font-size:30px
}
.paper-invitation .reply-label em {
  font-size:22px
}
.paper-invitation .reply-envelope[open] {
  transform:none
}
.paper-invitation .reply-envelope[open]>summary {
  min-height:135px;
  padding:20px;
  gap:10px
}
.paper-invitation .reply-envelope[open] .reply-label {
  font-size:22px
}
.paper-invitation .reply-envelope[open] .reply-label em {
  font-size:16px
}
.paper-invitation .rsvp-paper {
  padding:18px;
  background:#fffef6
}
.paper-invitation .app-section {
  display:block;
  max-width:650px;
  margin:auto;
  padding-top:35px;
  padding-bottom:60px;
  text-align:center
}
.paper-invitation .app-section h3 {
  font-size:27px;
  margin-bottom:20px
}
.paper-invitation .app-section p {
  font-size:11px;
  line-height:1.8
}
.paper-invitation .app-section br {
  display:none
}
.paper-invitation .app-links {
  justify-content:center;
  flex-direction:row;
  gap:12px;
  margin-top:25px
}
.site-footer {
  max-width:none;
  margin:0 auto;
  padding:55px 35px 90px;
  background:var(--wine)
}
.footer-celebrate {
  font-size:42px
}
.footer-bottom {
  gap:20px
}
@media(max-width:760px) {
  .page-wrapper {
    background:var(--paper)
  }
  .site-header {
    padding:10px 22px
  }
  .paper-invitation {
    width:100%;
    box-shadow:none
  }
  .paper-invitation>section {
    padding:55px 26px
  }
  .paper-invitation .hero {
    padding:40px 22px 25px!important
  }
  .invitation-stack {
    height:515px;
    max-width:380px
  }
  .paper-bouquet {
    right:0;
    top:0;
    width:37%;
    height:240px
  }
  .welcome-polaroid {
    left:0;
    top:70px;
    width:64%;
    height:310px;
    padding:8px 8px 30px;
    transform:rotate(-8deg)
  }
  .welcome-polaroid figcaption {
    font-size:11px;
    margin-top:9px;
    white-space:nowrap
  }
  .invitation-note {
    right:2%;
    top:135px;
    width:68%;
    min-height:340px;
    padding:35px 18px 25px;
    transform:rotate(4deg)
  }
  .invitation-note h1 {
    font-size:42px;
    margin:20px 0
  }
  .note-message {
    font-size:14px
  }
  .note-date {
    font-size:9px;
    margin-top:18px
  }
  .note-place {
    font-size:13px
  }
  .invitation-note .kicker {
    font-size:8px
  }
  .invitation-note .mw-btn {
    font-size:7px;
    min-height:44px;
    gap:10px;
    padding:10px 12px;
    margin-top:20px
  }
  .paper-player {
    margin-top:10px;
    gap:12px
  }
  .paper-player strong {
    font-size:17px
  }
  .record-disc {
    width:47px;
    height:47px
  }
  .paper-invitation .couple-section {
    display:block;
    padding-top:40px;
    padding-bottom:55px
  }
  .paper-invitation .letter-intro h2 {
    font-size:32px
  }
  .paper-invitation .letter-intro>p:last-of-type {
    max-width:none
  }
  .paper-invitation .story-portrait {
    width:170px;
    margin:30px auto 25px;
    transform:rotate(-7deg)
  }
  .paper-invitation .story-portrait img {
    height:180px
  }
  .paper-invitation .love-letter {
    max-width:350px;
    margin:auto;
    transform:rotate(1deg)
  }
  .paper-invitation .love-letter>summary {
    min-height:265px;
    padding:25px
  }
  .paper-invitation .letter-to {
    font-size:22px
  }
  .paper-invitation .story-copy {
    padding:28px 23px;
    font-size:12px
  }
  .paper-invitation .story-copy h2 {
    font-size:29px
  }
  .paper-invitation .itinerary .section-heading h2 {
    font-size:35px
  }
  .paper-invitation .night-experience {
    display:block
  }
  .paper-invitation .night-photo {
    width:75%;
    margin:0 auto -30px;
    transform:rotate(-6deg);
    padding:8px 8px 32px
  }
  .paper-invitation .night-photo img {
    height:170px
  }
  .paper-invitation .night-photo-note {
    font-size:11px;
    bottom:12px
  }
  .paper-invitation .night-program {
    padding:30px 22px 20px;
    transform:rotate(1deg);
    margin:0 auto;
    max-width:350px
  }
  .paper-invitation .moment-tabs button {
    grid-template-columns:31px 1fr auto;
    gap:10px;
    padding:13px 0;
    min-height:64px
  }
  .paper-invitation .moment-tabs .moment-name {
    font-size:24px
  }
  .paper-invitation .moment-tabs .moment-hour {
    font-size:10px
  }
  .paper-invitation .night-program .itinerary-list {
    min-height:88px
  }
  .paper-invitation .moment-controls button {
    font-size:9px
  }
  .paper-invitation .venue-pair {
    display:block
  }
  .paper-invitation .venue-card {
    max-width:350px;
    margin:0 auto
  }
  .paper-invitation .venue-card:nth-child(2) {
    margin:35px auto 0
  }
  .paper-invitation .venue-card summary>img {
    height:210px
  }
  .paper-invitation .venue-back h6 {
    font-size:22px
  }
  .paper-invitation .venue-back {
    padding-left:8px;
    padding-right:8px
  }
  .paper-invitation .getting-there-section {
    grid-template-columns:1fr;
    gap:25px
  }
  .paper-invitation .hotel-heading {
    grid-column:auto
  }
  .paper-invitation .hotel-heading h2 {
    font-size:34px
  }
  .paper-invitation .hotel-feature {
    width:90%;
    margin:auto;
    padding-bottom:30px
  }
  .paper-invitation .hotel-feature img {
    height:220px
  }
  .paper-invitation .hotel-select {
    font-size:23px
  }
  .paper-invitation .gallery-section h2 {
    font-size:36px
  }
  .paper-invitation .gallery-grid {
    width:min(270px,70vw);
    height:365px
  }
  .paper-invitation .gallery-photo img {
    height:285px
  }
  .paper-invitation .gallery-photo>span {
    font-size:15px
  }
  .paper-invitation .dress-section {
    display:block;
    padding-top:80px;
    padding-bottom:75px
  }
  .paper-invitation .dress-section::before {
    top:5px;
    left:auto;
    right:0;
    width:140px;
    height:240px
  }
  .paper-invitation .dress-section .section-heading {
    width:82%;
    max-width:290px;
    margin:0 auto 30px;
    padding:25px 20px
  }
  .paper-invitation .dress-section h2 {
    font-size:35px
  }
  .paper-invitation .dress-duet {
    gap:20px;
    max-width:310px;
    margin:auto
  }
  .paper-invitation .dress-look {
    width:132px;
    padding:20px 8px 12px
  }
  .paper-invitation .dress-look:nth-child(2) {
    margin-top:30px
  }
  .paper-invitation .dress-look svg {
    width:70px;
    height:105px
  }
  .paper-invitation .dress-look .mw-btn {
    font-size:7px;
    gap:6px;
    padding:10px 12px
  }
  .paper-invitation .registry-section {
    padding:55px 30px 65px
  }
  .paper-invitation .registry-section::before {
    right:0;
    top:0;
    width:130px;
    height:210px
  }
  .paper-invitation .registry-section .section-heading {
    padding:30px 20px 20px
  }
  .paper-invitation .registry-section h2 {
    font-size:32px
  }
  .paper-invitation .registry-list {
    padding:15px;
    gap:12px
  }
  .paper-invitation .registry-item {
    width:calc(50% - 6px);
    padding:12px 2px
  }
  .paper-invitation .registry-item img {
    width:95px;
    height:45px
  }
  .paper-invitation .copy-code {
    font-size:10px;
    gap:8px;
    padding:10px 4px
  }
  .paper-invitation .save-date {
    padding:65px 22px
  }
  .paper-invitation .save-date h2 {
    font-size:36px
  }
  .paper-invitation .date-scene {
    gap:30px
  }
  .paper-invitation #clock {
    gap:25px
  }
  .paper-invitation #clock strong {
    font-size:29px
  }
  .paper-invitation .calendar-buttons {
    gap:10px
  }
  .paper-invitation .calendar-buttons .mw-btn {
    font-size:8px;
    padding:11px 15px
  }
  .paper-invitation .rsvp-section {
    padding:55px 24px 65px
  }
  .paper-invitation .rsvp-copy h2 {
    font-size:36px
  }
  .paper-invitation .rsvp-section::before {
    right:-5px;
    top:100px;
    width:145px;
    height:250px
  }
  .paper-invitation .reply-envelope>summary {
    min-height:250px;
    padding:25px
  }
  .paper-invitation .reply-label {
    font-size:29px
  }
  .paper-invitation .rsvp-paper {
    padding:8px
  }
  .paper-invitation .app-section {
    padding:30px 28px 55px
  }
  .paper-invitation .app-links {
    flex-wrap:wrap
  }
  .site-footer {
    padding:45px 24px 90px
  }
  .footer-celebrate {
    font-size:38px
  }
}
@media(max-width:370px) {
  .invitation-stack {
    height:510px
  }
  .welcome-polaroid {
    height:285px
  }
  .invitation-note {
    width:70%;
    right:1%;
    padding-left:14px;
    padding-right:14px
  }
  .invitation-note h1 {
    font-size:38px
  }
  .note-message {
    font-size:13px
  }
  .paper-invitation .moment-tabs .moment-name {
    font-size:22px
  }
  .paper-invitation .night-program {
    padding-left:18px;
    padding-right:18px
  }
  .paper-invitation .moment-tabs button {
    gap:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  .paper-invitation *, .paper-invitation *::before,.paper-invitation *::after {
    transition:none!important;
    animation:none!important
  }
}
/* Keep floral shadows within the continuous paper sheet. */
.paper-invitation {
  overflow:hidden;
  overflow:clip
}
.welcome-polaroid {
  padding:10px
}
.paper-invitation .night-program .itinerary-list .time {
  display:block;
  color:var(--wine)
}
@media(max-width:760px) {
  .welcome-polaroid {
    padding:8px
  }
}
.site-header,.site-footer {
  width:100%
}
@media(max-width:760px) {
  .site-header,.site-footer {
    width:100%
  }
}
/* Original registry logos are light artwork; keep them legible on ivory paper. */
.paper-invitation .registry-item img {
  filter:brightness(0);
  opacity:.8
}

/* Keep the stationery pieces comfortable while the paper fills the viewport. */
.paper-invitation>.couple-section,
.paper-invitation>.getting-there-section,
.paper-invitation>.dress-section {
  max-width:1040px;
  margin-inline:auto;
}

/* Give the shared hashtag its own generous closing section. */
.site-footer {padding:64px 24px 32px;text-align:center}
.footer-social {margin:0 auto;max-width:640px}
.footer-social p {font:400 clamp(11px,3.2vw,16px)/1.6 var(--sans);margin:0;white-space:nowrap}
.site-footer .hashtag {display:block;width:fit-content;margin:10px auto 0;padding:0 12px;border:0;background:transparent;color:var(--blue);font:400 clamp(36px,4vw,48px)/1.3 var(--serif);text-decoration:none;cursor:pointer}
.site-footer .hashtag:hover {color:var(--paper)}
.hashtag-feedback {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.footer-actions {display:flex;justify-content:center;margin:25px auto 0;font:400 11px/1.7 var(--sans)}
.footer-actions a {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
.footer-brand {display:block;width:38px;margin:24px auto 0}
.footer-brand img {display:block;width:38px;height:auto}
.site-footer :is(a,button):focus-visible {outline:2px solid var(--blue);outline-offset:5px}
@media(max-width:760px){.site-footer{padding:48px 24px 28px}.footer-actions{margin-top:20px}.footer-brand{margin-top:20px}}
/* Nantucket blue accents on useful interactive pieces. */
.paper-invitation .moment-tabs button[aria-selected=true] {background:transparent;color:var(--deep)}
.paper-invitation .moment-tabs button[aria-selected=true] .moment-name {color:var(--deep)}
.paper-invitation .album-contact-sheet button[aria-pressed=true] {border-color:var(--blue-dark);background:var(--blue)}
.paper-invitation .album-controls button {background:var(--blue);color:var(--deep);border-color:var(--blue-dark)}
.paper-invitation .album-controls button:hover {background:var(--wine);color:var(--paper)}
.paper-invitation .date-composition {background:var(--blue);color:var(--deep)}
.paper-invitation .calendar-buttons .mw-btn {border-color:var(--blue-dark)}
.lightbox button,.paper-invitation .album-controls button {display:inline-grid;place-items:center;padding:0;box-sizing:border-box;line-height:1}
.lightbox button svg,.paper-invitation .album-controls button svg {display:block;width:22px;height:22px;flex:none}
.lightbox button {background:var(--blue);color:var(--deep);border-color:var(--blue)}
.lightbox button:hover {background:var(--paper);color:var(--wine)}

/* The same burgundy and ivory hibiscus pair replaces the calla illustrations. */
.paper-invitation .paper-bouquet{right:-1%;top:10px;width:32%;height:auto;aspect-ratio:1355/1160;object-fit:contain;transform:rotate(8deg)}
.paper-invitation .dress-section::before{width:180px;height:170px;top:15px;background-position:center top}
.paper-invitation .registry-section::before{width:170px;height:155px;top:15px;background-position:center top}
.paper-invitation .rsvp-section::before{height:185px;width:190px;top:140px;background-position:center top}
@media(max-width:760px){.paper-invitation .paper-bouquet{right:0;top:10px;width:46%;height:auto}.paper-invitation .dress-section::before{width:150px;height:145px;top:15px;right:0;left:auto}.paper-invitation .registry-section::before{right:0;top:10px;width:145px;height:140px}.paper-invitation .rsvp-section::before{right:0;top:150px;width:150px;height:155px}}

/* Visible folds belong to the envelope lid, also while the reply is open. */
.paper-invitation :is(.reply-envelope,.love-letter):not([open])::after {content:none}
.paper-invitation :is(.reply-envelope,.love-letter)>summary,
.paper-invitation :is(.reply-envelope,.love-letter)[open]>summary {
  position:relative;
  isolation:isolate;
  min-height:250px;
  padding:24px 20px;
  overflow:hidden;
  display:block;
  color:var(--paper);
  background:#4c0b17 url('../images/mw-env-middle-layer.webp') center/420px auto;
  background-blend-mode:multiply;
}
.paper-invitation :is(.reply-envelope,.love-letter)>summary::before,
.paper-invitation :is(.reply-envelope,.love-letter)>summary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.paper-invitation :is(.reply-envelope,.love-letter)>summary::before {
  bottom:50%;
  background:#64101c url('../images/mw-env-top-layer.webp') center/100% 100%;
  background-blend-mode:multiply;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.paper-invitation :is(.reply-envelope,.love-letter)>summary::after {
  top:50%;
  background:#701b29 url('../images/mw-env-bottom-layer.webp') center/100% 100%;
  background-blend-mode:multiply;
  clip-path:polygon(0 100%,50% 0,100% 100%);
}
.paper-invitation :is(.reply-envelope,.love-letter) .reply-label {
  display:block;
  position:relative;
  z-index:1;
  text-shadow:0 1px 2px #32191250;
}
.paper-invitation :is(.reply-envelope,.love-letter) .letter-seal,
.paper-invitation :is(.reply-envelope,.love-letter)[open] .letter-seal {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:58px;
  height:58px;
  z-index:2;
}
.paper-invitation :is(.reply-envelope,.love-letter) .disclosure-label {
  position:absolute;
  bottom:20px;
  left:12px;
  right:12px;
  text-align:center;
  z-index:2;
}

/* Palette refinement and a complete December keepsake calendar. */
.site-footer .hashtag {color:var(--cream)}
.paper-invitation :is(.mw-btn,.see-location-btn,.location-hotel-btn),
.entry-caption .btn-pre-page {background:var(--blue);color:var(--deep);border-color:var(--blue-dark)}
.paper-invitation :is(.mw-btn,.see-location-btn,.location-hotel-btn):hover,
.entry-caption .btn-pre-page:hover {background:var(--wine);color:var(--paper);border-color:var(--wine)}
.paper-invitation .rsvp-copy {position:relative;z-index:1;margin-bottom:64px}
.paper-invitation .rsvp-section::before {top:230px;right:max(0px,calc(50% - 290px));width:165px;height:160px}
.paper-invitation .date-composition.wedding-calendar {display:block;width:min(300px,100%);padding:24px 22px 18px;border-radius:3px;transform:rotate(-2deg);box-sizing:border-box;background:#fff; color:var(--deep)}
.wedding-calendar .calendar-month {font:400 28px/1.3 var(--serif);margin:0 0 18px;text-align:center}
.paper-invitation .wedding-calendar .calendar-month span {font:400 12px/1.5 var(--sans);display:block;margin-top:3px}
.calendar-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px 2px;text-align:center;align-items:center}
.paper-invitation .wedding-calendar .calendar-grid>span {font:400 12px/1 var(--sans);display:grid;place-items:center;min-height:29px;position:relative}
.paper-invitation .wedding-calendar .calendar-grid>.calendar-weekday {font-size:10px;opacity:.65;min-height:22px}
.wedding-day svg {position:absolute;width:32px;height:30px;fill:var(--wine)}
.paper-invitation .wedding-calendar .wedding-day>span {position:relative;z-index:1;color:var(--paper);font:600 11px/1 var(--sans)}
.wedding-calendar .calendar-caption {font:italic 15px/1.5 var(--serif);text-align:center;margin:16px 0 0}
@media(max-width:760px) {
  .site-header nav {text-align:center;align-items:center}
  .site-header nav a {width:100%;text-align:center}
  .site-header .menu-toggle {position:absolute;left:50%;transform:translateX(-50%);justify-content:center}
  .paper-invitation .rsvp-section::before {top:230px;right:0;width:135px;height:140px}
  .paper-invitation .rsvp-copy {margin-bottom:64px}
}

/* Match the grain treatment of the entrance envelope exactly. */
.reply-paper-grain {position:absolute;inset:0;z-index:0;background:url('../images/mw-env-middle-layer.webp') center/420px auto;filter:grayscale(1) brightness(.58) contrast(4);mix-blend-mode:soft-light;opacity:.65;pointer-events:none}
.entry-caption .btn-pre-page {border-color:var(--wine)}
/* Preserve the hover palette throughout activation and the opening animation. */
.entry-caption .btn-pre-page:active,
.stationery-opening.is-opening .entry-caption .btn-pre-page {
  background:var(--wine);
  color:var(--paper);
  border-color:var(--wine);
}

/* Reveal more of the same flowers above and beside the invitation card. */
.paper-invitation .paper-bouquet {right:-5%;top:-18px;width:38%;transform:rotate(8deg)}
/* The story photograph and textured envelope form one overlapping keepsake. */
.paper-invitation .couple-section {grid-template-columns:40% 1fr;gap:0;align-items:end}
.paper-invitation .story-portrait {max-width:300px;width:92%;margin:30px auto 0}
.paper-invitation .story-portrait img {display:block;height:330px;object-fit:cover}
.paper-invitation .love-letter {position:relative;z-index:3;margin:0 0 22px -30px;color:var(--paper);background:var(--wine)}
.paper-invitation .love-letter::after {content:none}
.paper-invitation .love-letter .letter-to {position:relative;z-index:1;color:var(--paper);max-width:310px;font-size:23px;text-align:center}
.paper-invitation .love-letter .story-copy {color:var(--ink)}
.paper-invitation .dress-section {grid-template-columns:42% 1fr;gap:30px}
.paper-invitation .dress-section .section-heading {width:100%;max-width:none}
.paper-invitation .dress-section .section-heading>p {font:italic 15px/1.6 var(--serif)}
.paper-invitation .dress-section .section-heading>.kicker {font:400 9px/1.6 var(--sans)}
.dress-actions {display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.dress-illustration {margin:0;position:relative;z-index:1;mix-blend-mode:multiply}
.dress-illustration img {display:block;width:100%;max-width:440px;height:auto;margin:auto}
@media(max-width:760px) {
  .paper-invitation .paper-bouquet {right:-3%;top:-8px;width:54%;transform:rotate(8deg)}
  .paper-invitation .story-portrait {width:80%;max-width:290px;margin:30px auto 0;padding-bottom:30px}
  .paper-invitation .story-portrait img {height:315px}
  .paper-invitation .love-letter {max-width:350px;margin:-42px auto 0;transform:rotate(1deg)}
  .paper-invitation .love-letter .letter-to {font-size:21px}
  .paper-invitation .dress-section {display:flex;flex-direction:column;gap:25px}
  .paper-invitation .dress-section .section-heading {width:100%;max-width:340px;margin:0;box-sizing:border-box;padding:25px 18px}
  .dress-actions {gap:8px;margin-top:20px}
  .dress-actions .mw-btn {font-size:8px;padding:10px 14px}
  .dress-illustration {width:100%;max-width:340px}
}
.paper-invitation .love-letter {width:100%;max-width:430px}
.paper-invitation .love-letter:not([open]) .letter-to {display:block;margin:0 auto;max-width:310px}

/* Map actions remain clean text links, with no colored text-sized patch. */
.paper-invitation :is(.see-location-btn,.location-hotel-btn),
.paper-invitation :is(.see-location-btn,.location-hotel-btn):hover {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:6px 0;
  background:transparent;
  color:var(--wine);
  border:0;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}
.paper-invitation :is(.see-location-btn,.location-hotel-btn):hover {text-decoration-thickness:2px}

/* White textured envelope for the couple's letter. */
.paper-invitation .love-letter {background:#fffdf7;color:var(--wine)}
.paper-invitation .love-letter>summary,
.paper-invitation .love-letter[open]>summary {
  color:var(--wine);
  background:#e5e0d6 url('../images/mw-env-middle-layer.webp') center/420px auto;
  background-blend-mode:multiply;
}
.paper-invitation .love-letter>summary::before {
  bottom:50%;
  background:#fffdf8 url('../images/mw-env-top-layer.webp') center/100% 100%;
  background-blend-mode:multiply;
}
.paper-invitation .love-letter>summary::after {
  top:50%;
  background:#f5f0e6 url('../images/mw-env-bottom-layer.webp') center/100% 100%;
  background-blend-mode:multiply;
}
.paper-invitation .love-letter .letter-seal {top:50%}
.paper-invitation .love-letter .letter-to,
.paper-invitation .love-letter .disclosure-label {color:var(--wine);text-shadow:none}
.paper-invitation .love-letter .reply-paper-grain {opacity:.3}

.site-footer .back-to-top-btn,
.site-footer .back-to-top-btn:hover,
.site-footer .back-to-top-btn:focus-visible {text-decoration:none}

/* Center the visible keepsakes, without reserving an empty strip beside them. */
@media(min-width:761px) {
  .paper-invitation .couple-section {
    grid-template-columns:minmax(0,320px) minmax(0,430px);
    justify-content:center;
    column-gap:0;
  }
  .paper-invitation .love-letter {
    width:calc(100% + 20px);
    max-width:none;
    margin-left:-20px;
  }
  .paper-invitation .dress-section {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:40px;
    justify-content:center;
  }
  .paper-invitation .dress-section .section-heading,
  .paper-invitation .dress-illustration {justify-self:center;width:100%;margin-inline:auto}
}

/* Keep the reply envelope heading equally discreet when open or closed. */
.paper-invitation .reply-envelope .reply-label,
.paper-invitation .reply-envelope[open] .reply-label {font-size:22px;line-height:1.3}
.paper-invitation .reply-envelope .reply-label em,
.paper-invitation .reply-envelope[open] .reply-label em {font-size:16px}

/* The supplied illustrations replace the itinerary photograph and small icons. */
.paper-invitation .moment-tabs button {grid-template-columns:minmax(0,1fr) auto}
.paper-invitation .night-photo img {height:auto;aspect-ratio:1;object-fit:contain;filter:none}
.paper-invitation .night-photo-note {font-size:12px}
@media(max-width:760px) {
  .paper-invitation .night-photo {width:82%;padding-bottom:42px}
  .paper-invitation .night-photo-note {font-size:11px;bottom:15px}
}
@media(max-width:760px) {.paper-invitation .night-photo {margin-bottom:-8px}}

/* Give the itinerary times a clear, consistent emphasis. */
.paper-invitation .moment-tabs .moment-hour {
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
@media(max-width:760px) {
  .paper-invitation .moment-tabs .moment-hour {font-size:13px}
}

/* Equal dimensions keep the gallery controls circular on mobile as well. */
.lightbox button,
.paper-invitation .album-controls button {
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  aspect-ratio:1;
  border-radius:50%;
  padding:0;
  place-items:center;
}
@media(max-width:760px) {.lightbox-content {grid-template-columns:44px minmax(0,1fr) 44px}}

/* Registry logos can be pressed without navigating away from the demo. */
.registry-logo {display:grid;place-items:center;min-height:64px;padding:8px 12px;border:0;border-radius:6px;background:transparent;cursor:pointer;transition:background .15s,transform .15s}
.registry-logo:hover {background:#4c051008}
.registry-logo:active {transform:scale(.96);background:#4c051014}
.registry-logo:focus-visible {outline:2px solid var(--wine);outline-offset:4px}
@media(prefers-reduced-motion:reduce) {.registry-logo {transition:none}}

/* Use the supplied calendar artwork, preserving its paper edges and proportions. */
.calendar-artwork {width:min(320px,100%);margin:0 auto;padding:0}
.calendar-artwork img {display:block;width:100%;height:auto;object-fit:contain}

/* Anchor the flowers to the actual envelope corner, independent of form height. */
.paper-invitation .rsvp-section::before {content:none;display:none}
.rsvp-envelope-scene {position:relative;isolation:isolate;width:100%;max-width:430px;margin:0 auto}
.reply-flowers {position:absolute;z-index:-1;right:-55px;top:-68px;width:170px;height:auto;transform:rotate(8deg);pointer-events:none}
.paper-invitation .reply-envelope .reply-label em,
.paper-invitation .reply-envelope[open] .reply-label em {font-size:10px}
/* No caption strip beneath the itinerary illustrations. */
.paper-invitation .night-photo {padding:10px}
@media(max-width:760px) {
  .reply-flowers {right:-18px;top:-55px;width:140px}
  .paper-invitation .night-photo {padding:8px}
}

.paper-invitation .mw-btn {justify-content:center;text-align:center;gap:0}

/* Event numbers behave like the logos: pressable placeholders, without copying. */
.registry-number {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px;border:0;border-radius:6px;background:transparent;color:var(--ink);font:400 11px/1.8 var(--sans);cursor:pointer}
.registry-number:hover {background:#4c051008}
.registry-number:active {background:#4c051014}
.registry-number:focus-visible {outline:2px solid var(--wine);outline-offset:4px}

/* Supplied gift illustration replaces the flowers above the registry card. */
.paper-invitation .registry-section::before {content:none;display:none}
.registry-illustration {display:block;position:relative;width:220px;max-width:70%;height:auto;margin:0 auto -24px;pointer-events:none}
.paper-invitation .registry-section .section-heading {position:relative;z-index:1}
.calendar-artwork img {filter:drop-shadow(0 8px 12px #32191225) drop-shadow(0 2px 3px #32191212)}
@media(max-width:760px) {.registry-illustration {width:180px;margin-bottom:-20px}}

/* Mobile navigation starts on the left, with the monogram on the right. */
@media(max-width:760px) {
  .site-header {flex-direction:row-reverse}
  .site-header .menu-toggle {position:static;left:auto;transform:none;justify-content:flex-start}
}

/* A consistent mobile rhythm between the invitation's main sections. */
@media(max-width:760px) {
  .paper-invitation>section:not(.hero) {
    padding-top:36px;
    padding-bottom:36px;
  }
}
@media(max-width:760px) {
  .paper-invitation .dress-section::before {top:-25px}
}

/* Match the desktop section rhythm while keeping room for overlapping stationery. */
@media(min-width:761px) {
  .paper-invitation>section:not(.hero) {
    padding-top:56px;
    padding-bottom:56px;
  }
  .paper-invitation .dress-section::before {top:-10px}
}

/* Mobile menu on the right, monogram on the left. */
@media(max-width:760px) {
  .site-header {flex-direction:row}
  .site-header .menu-toggle {position:static;left:auto;transform:none;justify-content:flex-end}
}
@media(max-width:760px) {
  .paper-invitation .album-contact-sheet {gap:8px}
  .paper-invitation .album-contact-sheet img {width:40px;height:46px}
}

/* Extra room above dress code keeps its flowers clear of the reception card. */
@media(max-width:760px) {
  .paper-invitation>section.dress-section {padding-top:64px}
  .paper-invitation .dress-section::before {top:0}
}
@media(min-width:761px) {
  .paper-invitation>section.dress-section {padding-top:80px}
  .paper-invitation .dress-section::before {top:10px}
}

/* Native SVG arrows keep the same appearance on iPhone and other platforms. */
.direction-icon {display:inline-block;width:16px;height:16px;min-width:16px;flex:none;vertical-align:-.15em}
.paper-action {display:inline-flex;align-items:center;justify-content:center;gap:6px}

/* An open arc and a clear arrowhead make the flip action readable on mobile. */
.paper-action {gap:10px}
.paper-action .direction-icon {width:18px;height:18px;min-width:18px;stroke-width:1.8}
@media(max-width:760px) {
  .paper-invitation>section.dress-section {padding-bottom:20px}
  .paper-invitation>section.gallery-section {padding-top:20px}
}