@font-face {
  font-family: "Antarctic";
  src: url("assets/fonts/antarctic-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --wine: #a90f0c;
  --wine-dark: #890906;
  --wine-soft: #c96f6b;
  --ivory: #f7f2e8;
  --ink: #171411;
  --muted: #625d57;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --script: "Antarctic", "Marck Script", cursive;
  --antarctic: "Antarctic", "Marck Script", cursive;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 300;
  line-height: 1.35;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: none;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }

.background-haze {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: none;
}

.invitation-shell {
  position: fixed;
  z-index: 2;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100svh;
  filter: none;
}

.lace-asset {
  display: none;
}

.paper-scroll {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--ivory);
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.paper-scroll::-webkit-scrollbar { display: none; }
.paper-scroll.opening-transition {
  scroll-behavior: auto;
  overflow-anchor: none;
}

body.invitation-locked .paper-scroll {
  overflow-y: hidden;
  overscroll-behavior: none;
}

body.invitation-locked .opening ~ * {
  visibility: hidden;
  pointer-events: none;
}

body.invitation-opening .opening-envelope {
  pointer-events: none;
  animation: opening-envelope-out .48s ease-in both;
}

body.invitation-switching .paper-scroll {
  overflow-y: hidden;
}

body.invitation-switching .opening {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  min-height: 100%;
  animation: opening-page-out .85s cubic-bezier(.55, .08, .4, 1) both;
}

body.invitation-switching .story-section {
  position: relative;
  z-index: 2;
  width: 100%;
  visibility: visible;
  pointer-events: none;
  animation: story-page-in .85s cubic-bezier(.18, .78, .24, 1) both;
}
body.invitation-switching .story-section .reveal { transition: none; }

body.opening-dismissed .opening {
  display: none;
}

@keyframes opening-envelope-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-34px) scale(.97); }
}

@keyframes opening-page-out {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

@keyframes story-page-in {
  from { transform: translateY(100svh); }
  to { opacity: 1; transform: translateY(0); }
}

.opening,
.paper-section,
.final-card {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.paper-section,
.final-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.opening {
  --envelope-width: min(92vw, 68svh, 600px);
  min-height: 100svh;
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(221, 222, 217, .02), rgba(21, 38, 26, .08)),
    url("assets/mountain-background.png") center / cover no-repeat;
}

.opening-envelope {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: var(--envelope-width);
  height: auto;
  aspect-ratio: 887 / 1236;
  translate: -50% -50%;
}

.envelope-layer {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}
.envelope-back {
  z-index: 1;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(20,17,12,.2));
}
.envelope-front {
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 -1px 0 rgba(105,91,70,.1));
}

.opening-photo {
  --photo-edge: clamp(5px, calc(var(--envelope-width) * .017), 10px);
  position: absolute;
  z-index: 2;
  top: 10%;
  right: auto;
  left: 50%;
  width: 66%;
  margin: 0;
  padding: var(--photo-edge) var(--photo-edge) calc(var(--photo-edge) * 1.65);
  background: #eee5d6;
  box-shadow: 0 10px 22px rgba(25, 23, 19, .24);
  transform: translateX(-50%) rotate(-5.5deg);
  transform-origin: 50% 85%;
}
.opening-photo-crop {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #171513;
}
.opening-photo-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.76) contrast(.96) brightness(.72);
  transform: none;
}

.opening-note {
  position: absolute;
  z-index: 2;
  top: 39%;
  right: 11%;
  width: max-content;
  max-width: 48%;
  min-height: 0;
  display: block;
  padding:
    clamp(10px, calc(var(--envelope-width) * .035), 21px)
    clamp(17px, calc(var(--envelope-width) * .048), 29px)
    clamp(9px, calc(var(--envelope-width) * .029), 17px)
    clamp(14px, calc(var(--envelope-width) * .042), 25px);
  color: #241f1a;
  background: #eee5d6;
  box-shadow: 0 7px 15px rgba(32, 27, 20, .16);
  font: 400 clamp(18px, calc(var(--envelope-width) * .075), 45px)/.9 var(--antarctic);
  text-align: center;
  transform: rotate(5deg);
}

.opening-note::after {
  content: "";
  position: absolute;
  top: clamp(4px, calc(var(--envelope-width) * .013), 8px);
  right: clamp(5px, calc(var(--envelope-width) * .015), 9px);
  width: clamp(11px, calc(var(--envelope-width) * .033), 20px);
  height: clamp(11px, calc(var(--envelope-width) * .033), 20px);
  background: url("assets/note-star.png") center / contain no-repeat;
}

.opening-letter {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50%;
  padding: 25% 8% 6%;
  background: transparent;
}
.opening-letter::before,
.opening-letter::after {
  display: none;
}
.opening-letter p {
  margin: 0 0 clamp(12px, calc(var(--envelope-width) * .048), 29px);
  font: 500 clamp(13px, calc(var(--envelope-width) * .052), 31px)/1.18 var(--serif);
  text-transform: none;
}
.opening-letter .button {
  min-width: min(58%, 260px);
  min-height: clamp(32px, calc(var(--envelope-width) * .092), 54px);
  padding:
    clamp(8px, calc(var(--envelope-width) * .025), 15px)
    clamp(12px, calc(var(--envelope-width) * .038), 23px);
  font-size: clamp(11px, calc(var(--envelope-width) * .023), 14px);
}

.opening {
  animation: opening-scene-in .9s ease-out both;
}

.opening-envelope.visible .envelope-back {
  animation: envelope-back-in .8s cubic-bezier(.22, .78, .25, 1) .1s both;
}

.opening-envelope.visible .opening-photo {
  animation: opening-photo-in 1.45s cubic-bezier(.16, .72, .22, 1) .32s both;
}

.opening-envelope.visible .envelope-front {
  animation: envelope-front-in .85s cubic-bezier(.22, .78, .25, 1) .55s both;
}

.opening-envelope.visible .opening-note {
  animation: opening-note-in .75s cubic-bezier(.18, .86, .32, 1) .85s both;
}

.opening-envelope.visible .opening-letter {
  animation: opening-copy-in .75s ease-out 1.05s both;
}

@keyframes opening-scene-in {
  from { opacity: 0; filter: blur(7px); }
  to { opacity: 1; filter: none; }
}

@keyframes envelope-back-in {
  from { opacity: 0; transform: translateY(65px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes opening-photo-in {
  from { opacity: 0; transform: translateX(-50%) translateY(72px) rotate(-1deg) scale(.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-5.5deg) scale(1); }
}

@keyframes envelope-front-in {
  from { opacity: 0; transform: translateY(90px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opening-note-in {
  from { opacity: 0; transform: translate(32px, 48px) rotate(1deg) scale(.94); }
  to { opacity: 1; transform: translate(0, 0) rotate(5deg) scale(1); }
}

@keyframes opening-copy-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.star {
  display: block;
  width: clamp(17px, 3vw, 22px);
  height: clamp(17px, 3vw, 22px);
  margin-right: auto;
  margin-bottom: 7px;
  margin-left: auto;
  overflow: hidden;
  color: transparent;
  background: var(--ink);
  font-size: 0;
  line-height: 0;
  -webkit-mask: url("assets/note-star.png") center / contain no-repeat;
  mask: url("assets/note-star.png") center / contain no-repeat;
}
.red-paper .star { background: #fff; }
.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border: 1px solid var(--wine);
  border-radius: 0;
  color: #fff;
  background: var(--wine);
  font: 500 clamp(11px, 1.4vw, 14px)/1 var(--serif);
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.button:disabled { cursor: default; opacity: .72; }
.button-light { color: var(--wine); background: #fff; border-color: #fff; }

.paper-section {
  --section-pad-y: clamp(56px, 8vw, 92px);
  padding: var(--section-pad-y) clamp(14px, 5vw, 52px);
  background: var(--ivory);
}
.paper-section h2,
.final-card h2 {
  margin: 9px 0 0;
  color: var(--wine);
  font: 500 clamp(28px, 5vw, 42px)/.95 var(--serif);
  letter-spacing: -.035em;
}
.paper-section h2 em { font-style: normal; filter: blur(2.6px); opacity: .18; }
.handwriting { margin: 0; font: clamp(19px, 2.5vw, 24px)/1 var(--script); }
.handwriting.light { color: rgba(255,255,255,.88); }
.copy { max-width: min(100%, 560px); margin: clamp(16px, 2.5vw, 24px) auto 0; font-size: clamp(14px, 1.65vw, 16px); line-height: 1.5; }

.ornament-top {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 44px;
  margin: 0;
  opacity: .8;
  transform: translateX(-50%);
}
.ornament-top::before,
.ornament-top::after {
  content: "";
  position: absolute;
  border: 2px solid var(--wine);
  border-radius: 50%;
}
.ornament-top::before {
  top: -50px;
  left: 10%;
  width: 150px;
  height: 60px;
}
.ornament-top::after {
  top: -135px;
  right: -140px;
  width: 460px;
  height: 190px;
}
.ornament-side {
  display: none;
}

.couple-name { margin: 8px 0 clamp(18px, 3vw, 30px); color: var(--wine); font: 500 clamp(27px, 4.9vw, 42px)/1 var(--serif); }
.couple-name i { font-style: normal; font-size: .7em; }
.story-section > .handwriting { font: 400 clamp(22px, 4vw, 34px)/1.05 var(--antarctic); }
.story-photo { position: relative; width: clamp(220px, 52vw, 420px); max-width: 100%; margin: 0 auto clamp(25px, 4vw, 38px); padding: clamp(5px, 1vw, 8px); border: 0; background: var(--ivory); box-shadow: 0 12px 28px rgba(45, 39, 31, .2); }
.story-photo > img:first-child { width: 100%; aspect-ratio: .75; object-fit: cover; object-position: 68% center; filter: saturate(.72) contrast(.94); }
.story-photo .story-swans {
  position: absolute;
  z-index: 2;
  right: -11%;
  bottom: -7%;
  width: 56%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  transform: rotate(-9deg);
  transform-origin: center;
  filter: drop-shadow(0 6px 10px rgba(45, 39, 31, .2));
  pointer-events: none;
}
.story-section h2 { margin-top: 0; }

.story-section .ornament-top::before,
.story-section .ornament-top::after {
  transform: scaleX(0);
}
.story-section .ornament-top::before { transform-origin: left center; }
.story-section .ornament-top::after { transform-origin: right center; }
.story-section.story-animate .ornament-top::before {
  animation: story-line-draw 1.25s .12s cubic-bezier(.22, .78, .28, 1) both;
}
.story-section.story-animate .ornament-top::after {
  animation: story-line-draw 1.45s .22s cubic-bezier(.22, .78, .28, 1) both;
}
.story-section.story-animate .story-star.visible {
  animation: story-star-pop .95s .34s cubic-bezier(.2, 1.5, .35, 1) both;
}
.story-section.story-animate > .handwriting.visible {
  animation: story-title-write 1.25s .55s cubic-bezier(.2, .72, .25, 1) both;
}
.story-section.story-animate .couple-name.visible {
  animation: story-name-reveal 1.35s .88s cubic-bezier(.18, .78, .24, 1) both;
}
.story-section.story-animate .story-photo.visible {
  animation: story-photo-settle 1.55s 1.18s cubic-bezier(.16, .9, .22, 1) both;
}
.story-section.story-animate .story-photo.visible .story-swans {
  animation: story-swans-arrive 1.55s 2s cubic-bezier(.16, .92, .24, 1) both;
}
.story-section.story-animate h2.visible {
  animation: story-copy-rise 1.05s 2.35s cubic-bezier(.2, .72, .25, 1) both;
}
.story-section.story-animate .copy.visible {
  animation: story-copy-rise 1.05s 2.68s cubic-bezier(.2, .72, .25, 1) both;
}

@keyframes story-line-draw {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes story-star-pop {
  0% { opacity: 0; transform: scale(.25) rotate(-35deg); }
  68% { opacity: 1; transform: scale(1.25) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes story-title-write {
  from { opacity: 0; filter: blur(3px); clip-path: inset(0 100% 0 0); transform: translateY(9px); }
  to { opacity: 1; filter: none; clip-path: inset(0); transform: translateY(0); }
}
@keyframes story-name-reveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); letter-spacing: .09em; transform: translateY(12px); }
  to { opacity: 1; clip-path: inset(0); letter-spacing: normal; transform: translateY(0); }
}
@keyframes story-photo-settle {
  from { opacity: 0; filter: blur(6px); transform: translateY(-52px) rotate(-2.5deg) scale(.95); }
  72% { opacity: 1; filter: blur(0); transform: translateY(5px) rotate(.5deg) scale(1.01); }
  to { opacity: 1; filter: none; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes story-swans-arrive {
  from { opacity: 0; transform: translate(95px, 24px) rotate(15deg) scale(.72); }
  72% { opacity: 1; transform: translate(-5px, -2px) rotate(-11deg) scale(1.03); }
  to { opacity: 1; transform: translate(0, 0) rotate(-9deg) scale(1); }
}
@keyframes story-copy-rise {
  from { opacity: 0; filter: blur(3px); transform: translateY(18px); }
  to { opacity: 1; filter: none; transform: translateY(0); }
}

.calendar-section::before {
  --calendar-curve-angle: -7deg;
  content: "";
  position: absolute;
  z-index: 0;
  top: clamp(-142px, -25vw, -105px);
  left: -18%;
  width: 132%;
  height: clamp(180px, 38vw, 270px);
  border: 2px solid var(--wine);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--calendar-curve-angle)) scaleX(0);
  transform-origin: right center;
}

@media (min-width: 700px) {
  .calendar-section::before {
    --calendar-curve-angle: -2deg;
    top: -230px;
    left: -12%;
    width: 124%;
    height: 270px;
    clip-path: inset(50% 0 0);
  }
}
.calendar-section > * { position: relative; z-index: 1; }
.calendar-section > .star { margin-bottom: clamp(14px, 3vw, 22px); }
.calendar-section > .handwriting { font-size: clamp(19px, 4.5vw, 28px); }
.wedding-date {
  margin-top: clamp(11px, 2vw, 17px) !important;
  font-family: "Oranienbaum", Georgia, serif !important;
  font-size: clamp(36px, 8vw, 54px) !important;
  font-weight: 400 !important;
  font-variant-numeric: lining-nums;
  letter-spacing: -.015em !important;
  white-space: nowrap;
}
.calendar { width: min(86vw, 440px); max-width: 100%; margin: clamp(30px, 6vw, 46px) auto 0; }
.weekdays,
.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.weekdays {
  margin-bottom: clamp(22px, 4vw, 30px);
  font-family: var(--sans);
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 400;
  letter-spacing: .02em;
}
.calendar-days {
  row-gap: clamp(22px, 5vw, 34px);
  font-family: var(--sans);
  font-size: clamp(14px, 3.5vw, 18px);
  font-weight: 400;
  letter-spacing: .01em;
}
.calendar-days span,
.calendar-days b { position: relative; z-index: 1; display: grid; min-height: clamp(24px, 6vw, 32px); place-items: center; font-weight: 400; }
.calendar-days b { color: #fff; }
.calendar-days b::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 104px;
  height: 100px;
  background: var(--wine);
  clip-path: path("M52 96 C43 85 9 65 5 39 C2 20 15 7 30 7 C40 7 48 13 52 22 C57 13 66 8 77 9 C93 10 102 24 98 42 C93 65 68 82 52 96 Z");
  transform: rotate(-16deg) scale(.5);
  transform-origin: 50% 52%;
}

.calendar-section.calendar-animate::before {
  animation: calendar-curve-draw 1.55s .08s cubic-bezier(.2, .76, .24, 1) both;
}
.calendar-section.calendar-animate > .star.visible {
  animation: calendar-star-pop .9s .28s cubic-bezier(.2, 1.5, .35, 1) both;
}
.calendar-section.calendar-animate > .handwriting.visible {
  animation: calendar-heading-in 1.15s .52s cubic-bezier(.2, .72, .25, 1) both;
}
.calendar-section.calendar-animate .wedding-date.visible {
  animation: calendar-date-in 1.3s .82s cubic-bezier(.18, .78, .24, 1) both;
}
.calendar-section.calendar-animate .calendar.visible {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}
.calendar-section .weekdays span,
.calendar-section .calendar-days span,
.calendar-section .calendar-days b {
  opacity: 0;
}
.calendar-section.calendar-animate .weekdays span {
  animation: calendar-cell-in .72s 1.35s cubic-bezier(.2, .72, .25, 1) both;
}
.calendar-section.calendar-animate .weekdays span:nth-child(2) { animation-delay: 1.42s; }
.calendar-section.calendar-animate .weekdays span:nth-child(3) { animation-delay: 1.49s; }
.calendar-section.calendar-animate .weekdays span:nth-child(4) { animation-delay: 1.56s; }
.calendar-section.calendar-animate .weekdays span:nth-child(5) { animation-delay: 1.63s; }
.calendar-section.calendar-animate .weekdays span:nth-child(6) { animation-delay: 1.7s; }
.calendar-section.calendar-animate .weekdays span:nth-child(7) { animation-delay: 1.77s; }

.calendar-section.calendar-animate .calendar-days > :nth-child(-n+7) {
  animation: calendar-row-in .78s 1.75s cubic-bezier(.2, .72, .25, 1) both;
}
.calendar-section.calendar-animate .calendar-days > :nth-child(n+8):nth-child(-n+14) {
  animation: calendar-row-in .78s 2s cubic-bezier(.2, .72, .25, 1) both;
}
.calendar-section.calendar-animate .calendar-days > :nth-child(n+15):nth-child(-n+21) {
  animation: calendar-row-in .78s 2.25s cubic-bezier(.2, .72, .25, 1) both;
}
.calendar-section.calendar-animate .calendar-days > :nth-child(n+22):nth-child(-n+28) {
  animation: calendar-row-in .78s 2.5s cubic-bezier(.2, .72, .25, 1) both;
}
.calendar-section.calendar-animate .calendar-days > :nth-child(n+29) {
  animation: calendar-row-in .78s 2.75s cubic-bezier(.2, .72, .25, 1) both;
}
.calendar-section.calendar-animate .calendar-days b {
  animation: calendar-row-in .78s 2.82s cubic-bezier(.2, .72, .25, 1) both;
}
.calendar-section.calendar-animate .calendar-days b::before {
  animation: calendar-heart-drop 1.65s 2.72s cubic-bezier(.17, .86, .23, 1) both;
}

@keyframes calendar-curve-draw {
  from { opacity: 0; transform: rotate(var(--calendar-curve-angle)) scaleX(0); }
  to { opacity: 1; transform: rotate(var(--calendar-curve-angle)) scaleX(1); }
}
@keyframes calendar-star-pop {
  0% { opacity: 0; transform: scale(.25) rotate(-30deg); }
  68% { opacity: 1; transform: scale(1.22) rotate(7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes calendar-heading-in {
  from { opacity: 0; filter: blur(3px); clip-path: inset(0 100% 0 0); transform: translateY(10px); }
  to { opacity: 1; filter: none; clip-path: inset(0); transform: translateY(0); }
}
@keyframes calendar-date-in {
  from { opacity: 0; filter: blur(4px); letter-spacing: .12em; transform: translateY(16px) scale(.96); }
  to { opacity: 1; filter: none; letter-spacing: -.015em; transform: translateY(0) scale(1); }
}
@keyframes calendar-cell-in {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes calendar-row-in {
  from { opacity: 0; filter: blur(2px); transform: translateY(15px); }
  to { opacity: 1; filter: none; transform: translateY(0); }
}
@keyframes calendar-heart-drop {
  0% { opacity: 0; transform: translateY(-115px) rotate(-28deg) scale(.24); }
  48% { opacity: 1; transform: translateY(7px) rotate(-13deg) scale(.54); }
  62% { transform: translateY(-4px) rotate(-18deg) scale(.48); }
  76% { transform: translateY(0) rotate(-16deg) scale(.52); }
  88% { transform: translateY(0) rotate(-16deg) scale(.47); }
  100% { opacity: 1; transform: translateY(0) rotate(-16deg) scale(.5); }
}

.place-section { padding-top: clamp(64px, 9vw, 96px); padding-bottom: clamp(64px, 9vw, 96px); }
.place-section h2 em { filter: none; opacity: 1; }
.place-collage { position: relative; width: clamp(280px, 55vw, 460px); max-width: 100%; margin: clamp(28px, 4vw, 42px) auto 0; padding-left: 18%; }
.place-collage > img { width: 100%; height: auto; aspect-ratio: 1.08; object-fit: cover; object-position: 56% center; filter: saturate(.7) brightness(.85); }
.place-collage article {
  position: absolute;
  top: 21px;
  left: -12%;
  width: 68%;
  padding: 17px 8px 18px;
  background: rgba(250, 247, 239, .97);
  box-shadow: 0 7px 20px rgba(38, 31, 22, .14);
  transform: rotate(-3deg);
}
.place-collage article .handwriting { font-size: clamp(15px, 1.8vw, 18px); }
.place-collage h3 { margin: 7px 0; color: var(--wine); font: 500 clamp(21px, 4vw, 32px)/.82 var(--serif); }
.place-collage address { margin: 10px 0 13px; font-size: clamp(12px, 1.3vw, 14px); line-height: 1.4; font-style: normal; }
.place-collage address small { font-size: .82em; opacity: .72; }
.place-actions { display: grid; gap: 7px; }
.place-actions .button { width: 100%; }
.place-note { max-width: min(100%, 520px); margin: clamp(78px, 12vw, 104px) auto 0; font-size: clamp(14px, 1.5vw, 16px); line-height: 1.5; }

.love-collage-section {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(28px, 4svh, 44px) clamp(12px, 4vw, 34px);
  color: #fff;
  background: var(--wine);
}
.love-collage-inner {
  position: relative;
  width: min(100%, 520px);
  height: clamp(660px, 84svh, 820px);
}
.love-polaroid {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: clamp(7px, 1.6vw, 11px) clamp(7px, 1.6vw, 11px) clamp(27px, 5vw, 42px);
  background: #fff;
  box-shadow: 0 7px 18px rgba(69, 0, 0, .2);
}
.love-polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.love-polaroid-one { top: 1%; left: 2%; width: 45%; transform: rotate(-13deg); }
.love-polaroid-one img { object-position: 67% 53%; }
.love-polaroid-two { top: 7%; right: 1%; width: 43%; transform: rotate(14deg); }
.love-polaroid-two img { object-position: 50% 47%; }
.love-polaroid-three { bottom: 5%; left: 9%; width: 44%; transform: rotate(13deg); }
.love-polaroid-three img { object-position: 52% 58%; }
.love-polaroid-four { right: 5%; bottom: 2%; width: 43%; transform: rotate(-11deg); }
.love-polaroid-four img { object-position: 50% 42%; }
.love-equation {
  position: absolute;
  z-index: 2;
  top: 44%;
  left: 50%;
  width: 100%;
  margin: 0;
  color: #fff;
  font: clamp(50px, 12vw, 76px)/1 var(--script);
  letter-spacing: .02em;
  text-align: center;
  transform: translate(-50%, -50%);
}

.paper-section.program-section { padding: 0; background: var(--wine); }
.micro-label { margin: -30px 0 48px; font-size: clamp(11px, 1.2vw, 13px); text-transform: uppercase; }
.red-paper {
  position: relative;
  width: min(100%, 680px);
  margin: 0 auto;
  padding: clamp(31px, 5vw, 48px) clamp(18px, 5vw, 42px) clamp(28px, 5vw, 44px);
  color: #fff;
  background:
    linear-gradient(176deg, rgba(255,255,255,.07), transparent 24% 64%, rgba(46,0,0,.08)),
    var(--wine);
  box-shadow: inset 0 0 26px rgba(98, 5, 4, .14);
  transform: rotate(-1.5deg);
}
.red-paper::before,
.red-paper::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 7px;
  background: inherit;
}
.red-paper::before { top: -4px; clip-path: polygon(0 50%,13% 18%,28% 62%,44% 20%,61% 56%,79% 16%,100% 54%,100% 100%,0 100%); }
.red-paper::after { bottom: -4px; clip-path: polygon(0 0,100% 0,100% 48%,81% 78%,63% 35%,47% 83%,29% 39%,12% 79%,0 48%); }
.red-paper h2 { margin: 0; color: #fff; font-size: clamp(29px, 5vw, 42px); }
.program-line { position: relative; margin-top: 24px; text-align: left; }
.program-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: 55px; width: 1px; background: rgba(255,255,255,.75); }
.program-line article { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 10px 0; }
.program-line article::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 49px;
  width: 13px;
  height: 13px;
  background: #fff;
  -webkit-mask: url("assets/note-star.png") center / contain no-repeat;
  mask: url("assets/note-star.png") center / contain no-repeat;
}
.program-line time { font: 500 clamp(18px, 3.3vw, 26px) var(--serif); }
.program-line h3 { margin: 0; font: 500 clamp(17px, 3.1vw, 25px)/1 var(--serif); }
.program-line p { margin: 5px 0 0; font-size: clamp(12px, 1.25vw, 14px); line-height: 1.35; }

.program-section .red-paper {
  width: min(100%, 680px);
  padding: clamp(42px, 8vw, 64px) clamp(18px, 6vw, 42px) clamp(46px, 9vw, 70px);
  background:
    linear-gradient(180deg,
      transparent 28%,
      rgba(76, 0, 0, .10) 29%,
      rgba(255, 255, 255, .035) 30%,
      transparent 31% 72%,
      rgba(76, 0, 0, .09) 73%,
      rgba(255, 255, 255, .03) 74%,
      transparent 75%),
    linear-gradient(170deg, rgba(255,255,255,.045), transparent 34% 70%, rgba(60,0,0,.09)),
    var(--wine);
  box-shadow: inset 0 0 34px rgba(82, 0, 0, .13);
  transform: none;
}
.program-section .red-paper::before,
.program-section .red-paper::after { display: none; }
.program-section .red-paper h2 {
  font-family: "Oranienbaum", Georgia, serif;
  font-size: clamp(38px, 9vw, 58px);
  font-weight: 400;
  letter-spacing: -.02em;
}
.program-section .red-paper > .handwriting {
  margin-top: 6px;
  font-size: clamp(27px, 7vw, 40px);
}
.program-section .program-line {
  margin-top: clamp(34px, 7vw, 52px);
}
.program-section .program-line::before {
  display: none;
}
.program-section .program-line article {
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 42px;
  min-height: 86px;
  padding: 14px 0;
}
.program-section .program-line article::before {
  z-index: 2;
  top: 19px;
  left: 82px;
  width: 16px;
  height: 16px;
}
.program-section .program-line article:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 34px;
  bottom: -19px;
  left: 81px;
  width: 18px;
  border: 2px solid transparent;
  border-left-color: rgba(255,255,255,.82);
  border-radius: 50%;
}
.program-section .program-line article:nth-child(even):not(:last-child)::after {
  border-right-color: rgba(255,255,255,.82);
  border-left-color: transparent;
}
.program-section .program-line time {
  padding-top: 1px;
  font: 400 clamp(25px, 6vw, 34px)/1 "Oranienbaum", Georgia, serif;
}
.program-section .program-line h3 {
  font: 400 clamp(25px, 6.4vw, 36px)/.96 "Oranienbaum", Georgia, serif;
}
.program-section .program-line p {
  margin-top: 8px;
  max-width: 310px;
  font-size: clamp(13px, 3.4vw, 16px);
  line-height: 1.35;
}

.countdown-section {
  padding-top: clamp(72px, 12vw, 108px);
  padding-bottom: clamp(72px, 12vw, 108px);
}
.countdown-section > .star { margin-bottom: 15px; }
.countdown-section > .handwriting {
  margin-bottom: 7px;
  font-size: clamp(18px, 3.8vw, 25px);
}
.countdown-section > h2 {
  margin: 0;
  font-size: clamp(35px, 7.8vw, 54px);
  font-weight: 500;
}
.countdown {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  width: min(100%, 480px);
  margin: clamp(22px, 4vw, 30px) auto 0;
  color: var(--wine);
}
.countdown div { display: grid; min-width: 0; }
.countdown b { font: 500 clamp(38px, 8vw, 58px)/.9 var(--serif); }
.countdown span {
  margin-top: 14px;
  color: var(--ink);
  font: clamp(26px, 5.5vw, 36px)/1 var(--script);
  white-space: nowrap;
}
.countdown i {
  align-self: start;
  margin-top: .08em;
  font: 500 clamp(25px, 5vw, 36px)/1 var(--serif);
  font-style: normal;
}

.rsvp-section { padding: clamp(56px, 8vw, 84px) 0; }
.form-paper { position: relative; width: min(100%, 660px); padding: clamp(34px, 5vw, 48px) clamp(14px, 5vw, 40px) clamp(31px, 5vw, 46px); text-align: left; transform: rotate(.8deg); }
.form-paper::before,
.form-paper::after { content: none; }
.form-paper > .star { position: absolute; top: 18px; right: 15px; }
.form-paper > h2,
.form-paper > p { text-align: center; }
.form-paper > p { margin: 10px auto 24px; max-width: 420px; font-size: clamp(12px, 1.5vw, 14px); line-height: 1.45; }
.rsvp-form label,
.rsvp-form legend { font: 500 clamp(15px, 2vw, 18px)/1.3 var(--serif); }
.rsvp-form > label { display: block; margin: 18px 0; }
.rsvp-form input[type="text"] {
  width: 100%;
  margin-top: 7px;
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.8);
  border-radius: 0;
  outline: 0;
  color: #fff;
  background: transparent;
}
.rsvp-form fieldset { margin: 18px 0; padding: 0; border: 0; }
.rsvp-form legend { margin-bottom: 8px; }
.choice { display: flex; align-items: center; gap: 10px; margin: 10px 0; font: 300 clamp(13px, 1.4vw, 15px)/1.3 var(--sans) !important; cursor: pointer; }
.choice input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #fff; }
.choice input[type="radio"] { appearance: none; border: 1px solid #fff; border-radius: 50%; }
.choice input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--wine); background: #fff; }
.choice.square input { appearance: none; border: 1px solid #fff; border-radius: 0; }
.choice.square input:checked { background: #fff; box-shadow: inset 0 0 0 3px var(--wine); }
.choice-row { display: flex; align-items: center; gap: 14px; }
.choice-row .choice { flex: 0 0 auto; }
.rsvp-form .inline-answer {
  width: min(150px, 42vw);
  margin: 0;
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.8);
  border-radius: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: clamp(13px, 1.4vw, 15px);
}
.rsvp-form .inline-answer::placeholder { color: rgba(255,255,255,.72); }
.rsvp-form .button { width: 55%; margin: 12px 22.5% 0; }
.form-status { min-height: 24px; margin: 10px 0 0; text-align: center; font-size: clamp(12px, 1.4vw, 14px); line-height: 1.4; }
.rsvp-form.is-complete,
.rsvp-intro.is-complete {
  visibility: hidden;
  pointer-events: none;
}
.rsvp-complete {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(88%, 480px);
  margin: 0;
  text-align: center;
  font: 400 clamp(24px, 5vw, 34px)/1.25 var(--serif);
  transform: translate(-50%, -50%);
}

.details-section {
  padding-top: clamp(64px, 9vw, 96px);
  padding-bottom: clamp(70px, 10vw, 108px);
}
.details-section > .star { margin-bottom: 13px; }
.details-section h2 {
  margin: 0 0 clamp(28px, 5vw, 42px);
  font-size: clamp(34px, 7vw, 50px);
}
.note-card {
  position: relative;
  width: min(75%, 520px);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 43px) clamp(22px, 5vw, 40px);
  box-shadow: 0 9px 20px rgba(54, 39, 32, .13);
}
.details-section .note-card.reveal { transform: rotate(3deg); }
.details-section .note-card.reveal:nth-of-type(2) { transform: rotate(-3deg); }
.details-section .note-card.reveal:nth-of-type(3) { transform: rotate(3deg); }
.note-card::before {
  content: "✦";
  position: absolute;
  top: 10px;
  left: 12px;
  font: 18px/1 Georgia, serif;
}
.note-card.ivory::after {
  content: "✦";
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--wine);
  font: 20px/1 Georgia, serif;
}
.note-card.ivory::before { content: none; }
.note-card.red { color: #fff; background: var(--wine); }
.note-card.ivory { color: var(--ink); background: #fbf8f1; }
.note-card.soft-red { color: #fff; background: var(--wine-soft); }
.note-card .handwriting { font-size: clamp(36px, 7vw, 48px); }
.note-card p:not(.handwriting) {
  max-width: 480px;
  margin: 13px auto 0;
  font-size: clamp(16px, 3.5vw, 21px);
  line-height: 1.35;
}
.organizer-contact {
  display: inline-flex;
  width: min(100%, 280px);
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 9px 23px;
  color: var(--wine);
  background: #fff;
  font: 400 clamp(14px, 2.8vw, 16px)/1.05 "Times New Roman", Times, serif;
  white-space: nowrap;
}
.organizer-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
}
.organizer-contacts .organizer-contact {
  margin-top: 0;
  text-decoration: none;
}

.contact-section { padding-top: clamp(64px, 8vw, 92px); padding-bottom: clamp(64px, 8vw, 92px); }
.contact-section h2 { margin-bottom: clamp(24px, 5vw, 38px); }
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 4vw, 28px);
  width: min(92%, 620px);
  margin: 0 auto;
}
.personal-contact-card {
  position: relative;
  min-width: 0;
  padding: clamp(28px, 5vw, 42px) clamp(14px, 3vw, 26px);
  box-shadow: 0 10px 24px rgba(54, 39, 32, .15);
}
.personal-contact-card:first-child { transform: rotate(-2deg); }
.personal-contact-card:last-child { transform: rotate(2deg); }
.personal-contact-card.wine { color: #fff; background: var(--wine); }
.personal-contact-card.ivory { color: var(--ink); background: #fbf8f1; }
.personal-contact-card .card-star {
  position: absolute;
  top: 11px;
  left: 13px;
  font: 18px/1 Georgia, serif;
}
.personal-contact-card.ivory .card-star { right: 13px; left: auto; color: var(--wine); }
.personal-contact-card .handwriting { margin: 0 0 7px; font-size: clamp(28px, 5vw, 38px); }
.personal-contact-card h3 {
  margin: 0 0 18px;
  color: inherit;
  font: 500 clamp(30px, 6vw, 44px)/1 var(--serif);
}
.personal-contact-card a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px 8px;
  color: var(--wine);
  background: #fff;
  font: 400 clamp(14px, 2.7vw, 18px)/1 "Times New Roman", Times, serif;
  text-decoration: none;
  white-space: nowrap;
}
.personal-contact-card.ivory a { color: #fff; background: var(--wine); }

@media (max-width: 520px) {
  .contact-cards { grid-template-columns: 1fr; width: min(78%, 330px); }
}

.paper-section {
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(36px, 5vw, 56px);
}

.story-section {
  padding-top: clamp(88px, 16vw, 118px);
}

.calendar-section {
  padding-top: clamp(118px, 24vw, 164px);
  padding-bottom: clamp(62px, 10vw, 90px);
}

.final-card { padding: 45px 18px 34px; color: #fff; background: var(--wine-dark); }
.final-copy { margin: 11px 0 0; font: 17px/1 var(--serif); }
.final-card h2 { color: #fff; font-size: 28px; }
.final-photo { width: clamp(220px, 45vw, 380px); max-width: 100%; margin: 22px auto 28px; padding: 6px 6px 18px; color: var(--ink); background: #f9f5ec; }
.final-photo-crop { overflow: hidden; aspect-ratio: .78; }
.final-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 52%; filter: saturate(.72) contrast(.96); transform: scale(1.28); }
.final-photo figcaption { margin-top: 8px; font: clamp(14px, 1.8vw, 17px)/1 var(--script); }
.back-top { color: rgba(255,255,255,.72); font-size: clamp(12px, 1.3vw, 14px); text-decoration: none; text-transform: uppercase; }

.love-collage-section,
.paper-section.program-section,
.program-section .red-paper,
.final-card {
  background:
    linear-gradient(180deg,
      transparent 28%,
      rgba(76, 0, 0, .10) 29%,
      rgba(255, 255, 255, .035) 30%,
      transparent 31% 72%,
      rgba(76, 0, 0, .09) 73%,
      rgba(255, 255, 255, .03) 74%,
      transparent 75%),
    linear-gradient(170deg, rgba(255,255,255,.045), transparent 34% 70%, rgba(60,0,0,.09)),
    var(--wine);
}

/* Program */
.program-section .red-paper h2,
.program-section .red-paper > .handwriting,
.program-section .program-line article {
  opacity: 0;
}
.program-section .program-line article::before {
  opacity: 0;
  transform: scale(.2) rotate(-28deg);
}
.program-section .program-line article:not(:last-child)::after {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
}
.program-section.section-animate .red-paper.visible {
  animation: program-paper-in 1.25s cubic-bezier(.18, .82, .24, 1) both;
}
.program-section.section-animate .red-paper h2 {
  animation: program-heading-in 1.05s .28s cubic-bezier(.2, .72, .25, 1) both;
}
.program-section.section-animate .red-paper > .handwriting {
  animation: program-heading-in 1.05s .52s cubic-bezier(.2, .72, .25, 1) both;
}
.program-section.section-animate .program-line article {
  animation: program-item-in 1s .82s cubic-bezier(.18, .78, .24, 1) both;
}
.program-section.section-animate .program-line article:nth-child(2) { animation-delay: 1.22s; }
.program-section.section-animate .program-line article:nth-child(3) { animation-delay: 1.62s; }
.program-section.section-animate .program-line article:nth-child(4) { animation-delay: 2.02s; }
.program-section.section-animate .program-line article:nth-child(5) { animation-delay: 2.42s; }
.program-section.section-animate .program-line article::before {
  animation: program-star-in .78s .92s cubic-bezier(.2, 1.5, .35, 1) both;
}
.program-section.section-animate .program-line article:nth-child(2)::before { animation-delay: 1.32s; }
.program-section.section-animate .program-line article:nth-child(3)::before { animation-delay: 1.72s; }
.program-section.section-animate .program-line article:nth-child(4)::before { animation-delay: 2.12s; }
.program-section.section-animate .program-line article:nth-child(5)::before { animation-delay: 2.52s; }
.program-section.section-animate .program-line article:not(:last-child)::after {
  animation: program-wave-in .9s 1.18s cubic-bezier(.2, .72, .25, 1) both;
}
.program-section.section-animate .program-line article:nth-child(2)::after { animation-delay: 1.58s; }
.program-section.section-animate .program-line article:nth-child(3)::after { animation-delay: 1.98s; }
.program-section.section-animate .program-line article:nth-child(4)::after { animation-delay: 2.38s; }

@keyframes program-paper-in {
  from { opacity: 0; filter: blur(7px); transform: translateY(42px) scale(.97); }
  to { opacity: 1; filter: none; transform: translateY(0) scale(1); }
}
@keyframes program-heading-in {
  from { opacity: 0; filter: blur(3px); clip-path: inset(0 100% 0 0); transform: translateY(12px); }
  to { opacity: 1; filter: none; clip-path: inset(0); transform: translateY(0); }
}
@keyframes program-item-in {
  from { opacity: 0; filter: blur(3px); transform: translateX(28px); }
  to { opacity: 1; filter: none; transform: translateX(0); }
}
@keyframes program-star-in {
  0% { opacity: 0; transform: scale(.2) rotate(-28deg); }
  70% { opacity: 1; transform: scale(1.25) rotate(7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes program-wave-in {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

/* Place */
.place-section.section-animate > .star.visible {
  animation: section-star-in .9s cubic-bezier(.2, 1.5, .35, 1) both;
}
.place-section.section-animate > .handwriting.visible {
  animation: soft-title-in 1.1s .2s cubic-bezier(.2, .72, .25, 1) both;
}
.place-section.section-animate > h2.visible {
  animation: soft-title-in 1.15s .42s cubic-bezier(.2, .72, .25, 1) both;
}
.place-section.section-animate .place-collage.visible {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}
.place-section .place-collage > img,
.place-section .place-collage > article {
  opacity: 0;
}
.place-section.section-animate .place-collage > img {
  animation: place-photo-in 1.45s .7s cubic-bezier(.16, .88, .24, 1) both;
}
.place-section.section-animate .place-collage > article {
  animation: place-card-in 1.45s 1.05s cubic-bezier(.16, .88, .24, 1) both;
}
.place-section.section-animate .place-note.visible {
  animation: soft-copy-in 1.05s 1.55s cubic-bezier(.2, .72, .25, 1) both;
}

@keyframes place-photo-in {
  from { opacity: 0; filter: blur(6px) saturate(.7) brightness(.85); transform: translateX(70px) scale(.96); }
  to { opacity: 1; filter: saturate(.7) brightness(.85); transform: translateX(0) scale(1); }
}
@keyframes place-card-in {
  from { opacity: 0; filter: blur(4px); transform: translateX(-75px) rotate(-9deg) scale(.95); }
  to { opacity: 1; filter: none; transform: translateX(0) rotate(-3deg) scale(1); }
}

/* Red photo collage */
.love-collage-section.section-animate .love-collage-inner.visible {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}
.love-collage-section .love-polaroid,
.love-collage-section .love-equation {
  opacity: 0;
}
.love-collage-section.section-animate .love-polaroid-one {
  animation: collage-card-one 1.45s .12s cubic-bezier(.16, .9, .23, 1) both;
}
.love-collage-section.section-animate .love-polaroid-two {
  animation: collage-card-two 1.45s .35s cubic-bezier(.16, .9, .23, 1) both;
}
.love-collage-section.section-animate .love-polaroid-three {
  animation: collage-card-three 1.45s .75s cubic-bezier(.16, .9, .23, 1) both;
}
.love-collage-section.section-animate .love-polaroid-four {
  animation: collage-card-four 1.45s .98s cubic-bezier(.16, .9, .23, 1) both;
}
.love-collage-section.section-animate .love-equation {
  animation: collage-equation-in 1.35s 1.35s cubic-bezier(.2, .72, .25, 1) both;
}

@keyframes collage-card-one {
  from { opacity: 0; transform: translate(-120px, -100px) rotate(-27deg) scale(.78); }
  72% { opacity: 1; transform: translate(7px, 5px) rotate(-11deg) scale(1.03); }
  to { opacity: 1; transform: translate(0, 0) rotate(-13deg) scale(1); }
}
@keyframes collage-card-two {
  from { opacity: 0; transform: translate(120px, -105px) rotate(29deg) scale(.78); }
  72% { opacity: 1; transform: translate(-7px, 5px) rotate(12deg) scale(1.03); }
  to { opacity: 1; transform: translate(0, 0) rotate(14deg) scale(1); }
}
@keyframes collage-card-three {
  from { opacity: 0; transform: translate(-120px, 110px) rotate(28deg) scale(.78); }
  72% { opacity: 1; transform: translate(7px, -5px) rotate(11deg) scale(1.03); }
  to { opacity: 1; transform: translate(0, 0) rotate(13deg) scale(1); }
}
@keyframes collage-card-four {
  from { opacity: 0; transform: translate(120px, 110px) rotate(-25deg) scale(.78); }
  72% { opacity: 1; transform: translate(-7px, -5px) rotate(-9deg) scale(1.03); }
  to { opacity: 1; transform: translate(0, 0) rotate(-11deg) scale(1); }
}
@keyframes collage-equation-in {
  from { opacity: 0; filter: blur(4px); clip-path: inset(0 100% 0 0); transform: translate(-50%, -42%); }
  to { opacity: 1; filter: none; clip-path: inset(0); transform: translate(-50%, -50%); }
}

/* Countdown */
.countdown-section.section-animate > .star.visible {
  animation: section-star-in .9s cubic-bezier(.2, 1.5, .35, 1) both;
}
.countdown-section.section-animate > .handwriting.visible {
  animation: soft-title-in 1.05s .2s cubic-bezier(.2, .72, .25, 1) both;
}
.countdown-section.section-animate > h2.visible {
  animation: soft-title-in 1.15s .42s cubic-bezier(.2, .72, .25, 1) both;
}
.countdown-section.section-animate .countdown.visible {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}
.countdown-section .countdown > div,
.countdown-section .countdown > i {
  opacity: 0;
}
.countdown-section.section-animate .countdown > div {
  animation: countdown-unit-in 1.05s .72s cubic-bezier(.18, .82, .24, 1) both;
}
.countdown-section.section-animate .countdown > div:nth-of-type(2) { animation-delay: .9s; }
.countdown-section.section-animate .countdown > div:nth-of-type(3) { animation-delay: 1.08s; }
.countdown-section.section-animate .countdown > div:nth-of-type(4) { animation-delay: 1.26s; }
.countdown-section.section-animate .countdown > i {
  animation: countdown-dot-in .65s 1.05s ease both;
}
.countdown-section .countdown b.count-tick {
  animation: countdown-tick .48s cubic-bezier(.2, .72, .25, 1);
}

@keyframes countdown-unit-in {
  from { opacity: 0; filter: blur(4px); transform: perspective(380px) rotateX(-78deg) translateY(-14px); }
  to { opacity: 1; filter: none; transform: perspective(380px) rotateX(0) translateY(0); }
}
@keyframes countdown-dot-in {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes countdown-tick {
  0% { opacity: .25; transform: translateY(-.45em) rotateX(-55deg); }
  100% { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Organizational cards */
.details-section.section-animate > .star.visible {
  animation: section-star-in .9s cubic-bezier(.2, 1.5, .35, 1) both;
}
.details-section.section-animate > h2.visible {
  animation: soft-title-in 1.2s .22s cubic-bezier(.2, .72, .25, 1) both;
}
.details-section.section-animate .note-card.reveal:nth-of-type(1).visible {
  animation: note-card-one-in 1.35s .55s cubic-bezier(.16, .9, .23, 1) both;
}
.details-section.section-animate .note-card.reveal:nth-of-type(2).visible {
  animation: note-card-two-in 1.35s .92s cubic-bezier(.16, .9, .23, 1) both;
}
.details-section.section-animate .note-card.reveal:nth-of-type(3).visible {
  animation: note-card-three-in 1.35s 1.29s cubic-bezier(.16, .9, .23, 1) both;
}

@keyframes note-card-one-in {
  from { opacity: 0; filter: blur(5px); transform: translate(65px, -35px) rotate(10deg) scale(.92); }
  75% { opacity: 1; filter: none; transform: translate(-4px, 3px) rotate(2deg) scale(1.01); }
  to { opacity: 1; filter: none; transform: translate(0, 0) rotate(3deg) scale(1); }
}
@keyframes note-card-two-in {
  from { opacity: 0; filter: blur(5px); transform: translate(-65px, -28px) rotate(-10deg) scale(.92); }
  75% { opacity: 1; filter: none; transform: translate(4px, 3px) rotate(-2deg) scale(1.01); }
  to { opacity: 1; filter: none; transform: translate(0, 0) rotate(-3deg) scale(1); }
}
@keyframes note-card-three-in {
  from { opacity: 0; filter: blur(5px); transform: translate(60px, -28px) rotate(10deg) scale(.92); }
  75% { opacity: 1; filter: none; transform: translate(-4px, 3px) rotate(2deg) scale(1.01); }
  to { opacity: 1; filter: none; transform: translate(0, 0) rotate(3deg) scale(1); }
}

/* RSVP */
.rsvp-section.section-animate .form-paper.visible {
  animation: rsvp-paper-in 1.35s cubic-bezier(.16, .88, .24, 1) both;
}
.rsvp-section .form-paper > .star,
.rsvp-section .form-paper > h2,
.rsvp-section .rsvp-intro,
.rsvp-section .rsvp-form > label,
.rsvp-section .rsvp-form > fieldset,
.rsvp-section .rsvp-form > .button {
  opacity: 0;
}
.rsvp-section.section-animate .form-paper > .star {
  animation: section-star-in .85s .25s cubic-bezier(.2, 1.5, .35, 1) both;
}
.rsvp-section.section-animate .form-paper > h2 {
  animation: soft-title-in 1.05s .42s cubic-bezier(.2, .72, .25, 1) both;
}
.rsvp-section.section-animate .rsvp-intro {
  animation: soft-copy-in 1s .65s cubic-bezier(.2, .72, .25, 1) both;
}
.rsvp-section.section-animate .rsvp-form > label {
  animation: rsvp-field-in .95s .9s cubic-bezier(.2, .72, .25, 1) both;
}
.rsvp-section.section-animate .rsvp-form > fieldset:first-of-type {
  animation: rsvp-field-in .95s 1.14s cubic-bezier(.2, .72, .25, 1) both;
}
.rsvp-section.section-animate .rsvp-form > fieldset:last-of-type {
  animation: rsvp-field-in .95s 1.38s cubic-bezier(.2, .72, .25, 1) both;
}
.rsvp-section.section-animate .rsvp-form > .button {
  animation: rsvp-field-in .95s 1.62s cubic-bezier(.2, .72, .25, 1) both;
}
.rsvp-form.is-folding {
  animation: rsvp-fold-away .72s cubic-bezier(.55, .08, .4, 1) both;
  transform-origin: center top;
}
.rsvp-intro.is-folding {
  animation: rsvp-intro-away .5s ease both;
}
.rsvp-complete {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.88);
}
.rsvp-complete.is-visible {
  animation: rsvp-thanks-in .9s cubic-bezier(.2, 1.25, .35, 1) both;
}

@keyframes rsvp-paper-in {
  from { opacity: 0; filter: blur(7px); transform: translateY(45px) rotate(-2.5deg) scale(.97); }
  to { opacity: 1; filter: none; transform: translateY(0) rotate(.8deg) scale(1); }
}
@keyframes rsvp-field-in {
  from { opacity: 0; filter: blur(3px); transform: translateY(18px); }
  to { opacity: 1; filter: none; transform: translateY(0); }
}
@keyframes rsvp-fold-away {
  from { opacity: 1; filter: none; transform: perspective(500px) rotateX(0) scaleY(1); }
  to { opacity: 0; filter: blur(4px); transform: perspective(500px) rotateX(72deg) scaleY(.18); }
}
@keyframes rsvp-intro-away {
  from { opacity: 1; transform: scaleY(1); }
  to { opacity: 0; transform: scaleY(.2); }
}
@keyframes rsvp-thanks-in {
  from { opacity: 0; filter: blur(4px); transform: translate(-50%, -44%) scale(.88); }
  to { opacity: 1; filter: none; transform: translate(-50%, -50%) scale(1); }
}

/* Contacts */
.contact-section.section-animate > .star.visible {
  animation: section-star-in .9s cubic-bezier(.2, 1.5, .35, 1) both;
}
.contact-section.section-animate > .handwriting.visible {
  animation: soft-title-in 1.05s .2s cubic-bezier(.2, .72, .25, 1) both;
}
.contact-section.section-animate > h2.visible {
  animation: soft-title-in 1.15s .42s cubic-bezier(.2, .72, .25, 1) both;
}
.contact-section.section-animate .personal-contact-card:first-child.visible {
  animation: contact-left-in 1.35s .7s cubic-bezier(.16, .9, .23, 1) both;
}
.contact-section.section-animate .personal-contact-card:last-child.visible {
  animation: contact-right-in 1.35s .9s cubic-bezier(.16, .9, .23, 1) both;
}

@keyframes contact-left-in {
  from { opacity: 0; filter: blur(5px); transform: translateX(-90px) rotate(-8deg) scale(.94); }
  75% { opacity: 1; filter: none; transform: translateX(5px) rotate(-1deg) scale(1.01); }
  to { opacity: 1; filter: none; transform: translateX(0) rotate(-2deg) scale(1); }
}
@keyframes contact-right-in {
  from { opacity: 0; filter: blur(5px); transform: translateX(90px) rotate(8deg) scale(.94); }
  75% { opacity: 1; filter: none; transform: translateX(-5px) rotate(1deg) scale(1.01); }
  to { opacity: 1; filter: none; transform: translateX(0) rotate(2deg) scale(1); }
}

/* Final card */
.final-card.section-animate > .handwriting.visible {
  animation: final-copy-in 1.05s .1s cubic-bezier(.2, .72, .25, 1) both;
}
.final-card.section-animate > .final-copy.visible {
  animation: final-copy-in 1.05s .35s cubic-bezier(.2, .72, .25, 1) both;
}
.final-card.section-animate > h2.visible {
  animation: final-copy-in 1.15s .58s cubic-bezier(.2, .72, .25, 1) both;
}
.final-card.section-animate .final-photo.visible {
  animation: final-photo-in 1.55s .82s cubic-bezier(.16, .88, .24, 1) both;
}
.final-card.section-animate .final-photo.visible img {
  animation: final-photo-zoom 5.2s .82s cubic-bezier(.2, .72, .25, 1) both;
}
.final-card .back-top {
  opacity: 0;
  transition: color .3s ease, transform .3s ease;
}
.final-card.section-animate .back-top {
  animation: final-copy-in 1s 1.35s cubic-bezier(.2, .72, .25, 1) both;
}

@keyframes final-copy-in {
  from { opacity: 0; filter: blur(3px); transform: translateY(15px); }
  to { opacity: 1; filter: none; transform: translateY(0); }
}
@keyframes final-photo-in {
  from { opacity: 0; filter: blur(7px); transform: translateY(38px) rotate(-2deg) scale(.96); }
  to { opacity: 1; filter: none; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes final-photo-zoom {
  from { transform: scale(1.4); }
  to { transform: scale(1.28); }
}

/* Shared motion */
@keyframes section-star-in {
  0% { opacity: 0; transform: scale(.25) rotate(-30deg); }
  68% { opacity: 1; transform: scale(1.22) rotate(7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes soft-title-in {
  from { opacity: 0; filter: blur(3px); clip-path: inset(0 100% 0 0); transform: translateY(12px); }
  to { opacity: 1; filter: none; clip-path: inset(0); transform: translateY(0); }
}
@keyframes soft-copy-in {
  from { opacity: 0; filter: blur(3px); transform: translateY(18px); }
  to { opacity: 1; filter: none; transform: translateY(0); }
}

.button,
.organizer-contact,
.personal-contact-card a,
.back-top {
  transition: transform .28s ease, box-shadow .28s ease, color .28s ease, background-color .28s ease;
}
@media (hover: hover) {
  .button:hover,
  .organizer-contact:hover,
  .personal-contact-card a:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 16px rgba(53, 0, 0, .18);
  }
  .back-top:hover { color: #fff; transform: translateY(-3px); }
}
.button:active,
.organizer-contact:active,
.personal-contact-card a:active {
  transform: translateY(0) scale(.98);
}

.outside-credit {
  display: none;
}

.reveal {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(18px);
  transition: opacity .7s ease, filter .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; filter: none; transform: none; }

@media (max-width: 360px) {
  .opening { --envelope-width: min(94vw, 68svh); }
  .opening-note { right: 8%; }
  .paper-section { padding-right: 12px; padding-left: 12px; }
  .program-line article { gap: 14px; }
  .dress-card { padding-left: 40px; }
  .countdown i { font-size: 17px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .opening { --envelope-width: min(76vw, 68svh, 330px); }
}

@media (prefers-reduced-motion: reduce) {
  .paper-scroll { scroll-behavior: auto; }
  .reveal { opacity: 1; filter: none; transform: none; transition: none; }
  .story-section .ornament-top::before,
  .story-section .ornament-top::after {
    opacity: 1;
    transform: scaleX(1);
    animation: none;
  }
  .story-section.story-animate .story-star.visible,
  .story-section.story-animate > .handwriting.visible,
  .story-section.story-animate .couple-name.visible,
  .story-section.story-animate .story-photo.visible,
  .story-section.story-animate h2.visible,
  .story-section.story-animate .copy.visible {
    opacity: 1;
    filter: none;
    clip-path: none;
    transform: none;
    animation: none;
  }
  .story-section.story-animate .story-photo.visible .story-swans {
    opacity: 1;
    transform: rotate(-9deg);
    animation: none;
  }
  .calendar-section::before {
    opacity: 1;
    transform: rotate(var(--calendar-curve-angle)) scaleX(1);
    animation: none;
  }
  .calendar-section.calendar-animate > .star.visible,
  .calendar-section.calendar-animate > .handwriting.visible,
  .calendar-section.calendar-animate .wedding-date.visible,
  .calendar-section.calendar-animate .calendar.visible,
  .calendar-section .weekdays span,
  .calendar-section .calendar-days span,
  .calendar-section .calendar-days b {
    opacity: 1;
    filter: none;
    clip-path: none;
    transform: none;
    animation: none;
  }
  .calendar-section.calendar-animate .calendar-days b::before {
    opacity: 1;
    transform: rotate(-16deg) scale(.5);
    animation: none;
  }
  .program-section .red-paper,
  .program-section .red-paper h2,
  .program-section .red-paper > .handwriting,
  .program-section .program-line article,
  .program-section .program-line article::before,
  .program-section .program-line article::after,
  .place-section > .star,
  .place-section > .handwriting,
  .place-section > h2,
  .place-section .place-note,
  .love-collage-section .love-collage-inner,
  .love-collage-section .love-polaroid,
  .love-collage-section .love-equation,
  .countdown-section > .star,
  .countdown-section > .handwriting,
  .countdown-section > h2,
  .countdown-section .countdown,
  .countdown-section .countdown > div,
  .countdown-section .countdown > i,
  .details-section > .star,
  .details-section > h2,
  .details-section .note-card,
  .rsvp-section .form-paper,
  .rsvp-section .form-paper > .star,
  .rsvp-section .form-paper > h2,
  .rsvp-section .rsvp-intro,
  .rsvp-section .rsvp-form > label,
  .rsvp-section .rsvp-form > fieldset,
  .rsvp-section .rsvp-form > .button,
  .contact-section > .star,
  .contact-section > .handwriting,
  .contact-section > h2,
  .contact-section .personal-contact-card,
  .final-card > .handwriting,
  .final-card > .final-copy,
  .final-card > h2,
  .final-card .final-photo,
  .final-card .back-top {
    opacity: 1;
    filter: none;
    clip-path: none;
    animation: none !important;
    transition: none !important;
  }
  .place-section .place-collage > img {
    opacity: 1;
    filter: saturate(.7) brightness(.85);
    transform: none;
    animation: none !important;
  }
  .place-section .place-collage > article {
    opacity: 1;
    filter: none;
    transform: rotate(-3deg);
    animation: none !important;
  }
  .program-section .program-line article::before {
    transform: scale(1) rotate(0);
  }
  .program-section .program-line article::after {
    transform: scaleY(1);
  }
  .love-collage-section .love-polaroid-one { transform: rotate(-13deg); }
  .love-collage-section .love-polaroid-two { transform: rotate(14deg); }
  .love-collage-section .love-polaroid-three { transform: rotate(13deg); }
  .love-collage-section .love-polaroid-four { transform: rotate(-11deg); }
  .love-collage-section .love-equation { transform: translate(-50%, -50%); }
  .countdown-section .countdown b { animation: none !important; }
  .final-card .final-photo img {
    transform: scale(1.28);
    animation: none !important;
  }
  .opening,
  .opening-envelope.visible .envelope-back,
  .opening-envelope.visible .opening-photo,
  .opening-envelope.visible .envelope-front,
  .opening-envelope.visible .opening-note,
  .opening-envelope.visible .opening-letter,
  body.invitation-opening .opening-envelope,
  body.invitation-switching .opening,
  body.invitation-switching .story-section { animation: none; }
}