:root {
  color-scheme: light;
  --paper: #f5f0f7;
  --paper-deep: #ebe3f0;
  --ink: #3b3243;
  --muted: #786f80;
  --plum: #73568b;
  --plum-dark: #493750;
  --lavender: #e9e0f0;
  --lavender-ink: #43364e;
  --lavender-muted: #776786;
  --lavender-line: #c9bdd2;
  --line: #d5cadc;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.topbar { position: absolute; z-index: 2; top: 0; left: 0; display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 23px 5.5vw; color: #fff; }
.wordmark { font: 600 20px var(--serif); text-decoration: none; letter-spacing: .04em; }
.wordmark span { color: #d9c7e3; font-style: italic; }
.topbar-link { font-size: 10px; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.topbar-link span { margin-left: 8px; color: #e1d3eb; }
.cover { position: relative; display: grid; min-height: min(760px, 94svh); place-items: center; overflow: hidden; background: #493b50; color: white; }
.cover-photo, .cover-shade { position: absolute; inset: 0; }
.cover-photo { background: url("https://images.unsplash.com/photo-1537633552985-df8429e8048b?auto=format&fit=crop&w=2200&q=90") center 42% / cover; animation: arrive 1.2s ease-out both; }
.cover-shade { background: linear-gradient(90deg, rgba(31, 23, 38, .54), rgba(31, 23, 38, .08) 80%), linear-gradient(0deg, rgba(31, 23, 38, .5), transparent 52%); }
.cover-copy { position: relative; z-index: 1; width: min(900px, 86vw); padding-top: 65px; animation: rise .8s .12s both; }
.eyebrow { margin: 0 0 20px; color: var(--plum); font-size: 9px; font-weight: 700; letter-spacing: .2em; line-height: 1.7; }
.eyebrow.light { color: #e8d9ef; }
.cover h1 { display: flex; flex-direction: column; margin: 0; font: 400 clamp(66px, 10vw, 138px)/.76 var(--serif); letter-spacing: -.035em; }
.cover h1 i { padding: 15px 0 16px 8px; color: #dfcce9; font-size: .53em; }
.cover-caption { margin-top: 34px; font: italic 22px var(--serif); }
.round-link { display: grid; width: 38px; height: 38px; margin-top: 45px; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: white; text-decoration: none; }
.cover-index { position: absolute; right: 5.5vw; bottom: 28px; display: flex; gap: 25px; font-size: 8px; letter-spacing: .17em; }
.cover-index span { color: #e6d6ee; }
.section-wrap { width: min(1100px, 86vw); margin-inline: auto; }
.invitation { display: grid; grid-template-columns: 1fr .88fr; gap: clamp(55px, 10vw, 145px); align-items: center; padding-block: 130px 145px; }
.photo-frame { position: relative; margin: 0; background: var(--paper-deep); }
.invitation-photo { height: 590px; }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.invitation-photo img { object-position: 54% center; }
.photo-note { position: absolute; right: -20px; bottom: 28px; padding: 12px 18px; background: var(--paper); color: var(--plum); font: italic 20px var(--serif); }
.invitation-copy { max-width: 365px; padding-block: 18px; text-align: center; }
.script-line { margin: 0 0 12px; color: var(--plum); font: italic 28px var(--serif); }
.family-names { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 24px; }
.family-names p { margin: 0 0 7px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.family-names span { display: block; color: var(--ink); font: 13px/1.55 var(--serif); }
.invitation-copy h2 { margin: 0; color: var(--plum); font: 500 54px/.83 var(--serif); }
.invitation-copy h2 .ampersand { display: inline-block; padding: 8px 0; color: #a68db7; font-size: 36px; font-style: italic; }
.invite-text { max-width: 300px; margin: 25px auto 32px; color: var(--muted); font: 14px/1.9 var(--serif); }
.date-lockup { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; color: var(--plum); }
.date-weekday, .date-month { font-size: 8px; letter-spacing: .12em; }
.date-day { padding-inline: 13px; border-inline: 1px solid var(--line); font: 500 47px/.9 var(--sans); }
.venue-name { margin: 0 0 8px; font: 600 12px var(--serif); letter-spacing: .15em; }
.venue-address { margin: 0; color: var(--muted); font: 12px/1.8 var(--serif); }
.text-link { display: inline-block; margin-top: 14px; color: var(--plum); font-size: 9px; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.text-link span { margin-left: 5px; }
.details-band { background: #ece6f0; }
.details-inner { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(55px, 10vw, 140px); align-items: center; padding-block: 105px; }
.schedule h2, .rsvp-heading h2 { margin: 0; color: var(--plum); font: 500 58px/.95 var(--serif); }
.timeline { margin-top: 43px; border-top: 1px solid var(--line); }
.timeline-item { display: grid; grid-template-columns: 70px 1fr; gap: 15px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.timeline-item time { padding-top: 2px; color: var(--plum); font: 500 22px var(--serif); }
.timeline-item h3 { margin: 0 0 5px; font: 600 12px var(--sans); }
.timeline-item p { margin: 0; color: var(--muted); font: 13px var(--serif); }
.details-photo { height: 500px; }
.details-photo img { object-position: center; }
.details-photo figcaption { position: absolute; right: -14px; bottom: -18px; padding: 12px 17px; background: var(--plum); color: white; font: italic 19px var(--serif); }
.rsvp { display: grid; grid-template-columns: .9fr 1fr; gap: 12vw; padding-block: 120px 130px; }
.rsvp-heading { padding-top: 10px; }
.rsvp-heading h2 { max-width: 420px; font-size: 56px; }
.rsvp-heading > p:last-child { margin-top: 18px; color: var(--muted); font-size: 11px; }
.rsvp-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 18px; }
.field { display: grid; gap: 8px; }
.field > span, .attendance-field legend { color: var(--plum-dark); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.field input, .field select { height: 35px; }
.field textarea { padding-top: 10px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--plum); }
.attendance-field { display: flex; grid-column: 1 / -1; gap: 10px; margin: 4px 0; padding: 0; border: 0; }
.attendance-field legend { margin-bottom: 12px; }
.attendance-field label { display: flex; flex: 1; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.attendance-field input { accent-color: var(--plum); }
.guest-field { grid-column: 1 / -1; }
.message-field { grid-column: 1 / -1; }
.submit-button { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 5px; padding: 0 18px; border: 0; background: var(--plum); color: white; cursor: pointer; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease; }
.submit-button:hover { background: var(--plum-dark); }
.submit-button:disabled { cursor: wait; opacity: .65; }
.form-status { grid-column: 1 / -1; min-height: 18px; margin: -7px 0 0; color: var(--plum); font-size: 11px; }
.gallery { padding-block: 15px 125px; }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.gallery-heading .eyebrow { margin-bottom: 12px; }
.gallery-heading h2 { margin: 0; color: var(--plum); font: 500 58px/.95 var(--serif); }
.gallery-caption { max-width: 265px; margin: 0 0 3px; color: var(--muted); font: italic 17px/1.5 var(--serif); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding-bottom: 34px; }
.gallery-grid figure { overflow: hidden; aspect-ratio: 4 / 5; margin: 0; background: var(--paper-deep); }
.gallery-grid figure:nth-child(3n + 2) { transform: translateY(34px); }
.gallery-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-grid figure:hover img { transform: scale(1.04); }
.gift-section { padding: 88px 7vw 92px; background: var(--plum); color: #fff; text-align: center; }
.gift-inner { width: min(660px, 100%); margin-inline: auto; }
.gift-eyebrow, .gift-label { margin: 0; color: #e6d8ee; font-size: 9px; font-weight: 700; letter-spacing: .19em; }
.gift-section h2 { max-width: 670px; margin: 14px auto 40px; color: #fff; font: 400 52px/1.02 var(--serif); }
.gift-toggle { min-height: 52px; padding: 0 30px; border: 1px solid rgba(255,255,255,.7); border-radius: 30px; background: transparent; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .2s ease, color .2s ease; }
.gift-toggle:hover { border-color: #fff; background: #fff; color: var(--plum); }
.gift-details { display: grid; grid-template-columns: 1fr 190px; gap: 25px; align-items: center; margin-top: 25px; padding: 25px; border: 1px solid rgba(255,255,255,.45); text-align: center; animation: rise .35s ease both; }
.gift-details[hidden] { display: none; }
.gift-label { margin-bottom: 13px; }
.gift-account h3 { margin: 0; font: 500 30px/1.1 var(--serif); }
.gift-number { margin: 12px 0 7px; font-size: 20px; font-weight: 600; letter-spacing: .08em; }
.gift-holder { margin: 0; color: #e6d8ee; font-size: 11px; font-weight: 600; }
.gift-qr-wrap { display: grid; width: 190px; aspect-ratio: 1; place-items: center; padding: 10px; background: #fff; }
.gift-qr { display: block; width: 100%; height: 100%; object-fit: contain; }
.gift-qr-placeholder { display: grid; width: 100%; height: 100%; align-content: center; justify-items: center; border: 1px dashed var(--lavender-line); color: var(--plum); }
.gift-qr-placeholder[hidden] { display: none; }
.gift-qr-placeholder span { font: 500 28px var(--serif); }
.gift-qr-placeholder p { max-width: 130px; margin: 5px 0 0; font-size: 10px; line-height: 1.5; }
.closing { padding: 75px 20px 82px; background: var(--plum-dark); color: white; text-align: center; }
.closing-script { margin: 0 0 17px; color: #dfcbe9; font: italic 25px var(--serif); }
.closing h2 { margin: 0; font: 400 clamp(35px, 6vw, 65px)/1 var(--serif); }
.closing h2 i { color: #b99fca; font-size: .72em; }
.closing-date { margin: 20px 0 0; font-size: 9px; letter-spacing: .2em; }
.footer { display: flex; justify-content: space-between; padding: 17px 5.5vw; color: var(--muted); font-size: 8px; letter-spacing: .15em; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes arrive { from { transform: scale(1.035); opacity: .75; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 700px) {
  .topbar { padding: 18px 6vw; }
  .cover { min-height: 88svh; }
  .cover-photo { background-position: 57% center; }
  .cover-copy { width: 86vw; padding-top: 50px; }
  .cover h1 { font-size: clamp(67px, 19vw, 100px); }
  .cover-caption { margin-top: 27px; font-size: 19px; }
  .cover-index { right: 6vw; bottom: 22px; }
  .section-wrap { width: 86vw; }
  .invitation { grid-template-columns: 1fr; gap: 47px; padding-block: 75px 85px; }
  .invitation-photo { height: min(115vw, 510px); }
  .invitation-copy { justify-self: center; }
  .details-inner { grid-template-columns: 1fr; gap: 43px; padding-block: 76px 88px; }
  .schedule h2 { font-size: 51px; }
  .details-photo { height: 105vw; max-height: 470px; }
  .rsvp { grid-template-columns: 1fr; gap: 34px; padding-block: 80px 86px; }
  .rsvp-heading h2 { max-width: 330px; font-size: 50px; }
  .rsvp-form { column-gap: 14px; }
  .attendance-field { flex-wrap: wrap; }
  .attendance-field label { min-width: 42%; }
  .gallery { padding-block: 0 85px; }
  .gallery-heading { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .gallery-heading h2 { font-size: 50px; }
  .gallery-caption { max-width: 290px; font-size: 15px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 22px; }
  .gallery-grid figure:nth-child(3n + 2) { transform: none; }
  .gallery-grid figure:nth-child(even) { transform: translateY(22px); }
  .gift-section { padding: 72px 7vw; }
  .gift-section h2 { max-width: 420px; margin-bottom: 30px; font-size: 43px; }
  .gift-toggle { min-height: 48px; padding-inline: 22px; font-size: 12px; }
  .gift-details { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .gift-qr-wrap { width: min(190px, 100%); justify-self: center; }
  .gift-account h3 { font-size: 27px; }
  .footer { gap: 10px; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}