:root {
  --ink: #07152e;
  --night: #08142b;
  --blue: #102d5a;
  --silver: #dfe4eb;
  --champagne: #c4a66a;
  --paper: #f8f7f3;
  --white: #fff;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
body.locked { overflow: hidden; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.opening {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  overflow: hidden; color: var(--white);
  background:
    radial-gradient(circle at 50% 42%, #17365e 0%, #0a1d3a 43%, #030a17 100%);
  transition: opacity .9s ease, visibility .9s ease;
}
.opening.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.opening__ambient { position: absolute; inset: -8%; opacity: .34; pointer-events: none; background: repeating-linear-gradient(112deg, #fff0 0 9px, #dce8fb0a 10px 11px, #fff0 12px 25px); transform: rotate(-4deg); }
.opening__ambient::before, .opening__ambient::after { position: absolute; content: ''; border-radius: 50%; filter: blur(3px); }
.opening__ambient::before { width: 52vw; height: 52vw; top: -30vw; right: -18vw; background: #6a8fbe20; }
.opening__ambient::after { width: 44vw; height: 44vw; bottom: -27vw; left: -13vw; background: #c7aa7130; }
.opening__content { position: relative; z-index: 1; width: 100%; display: grid; justify-items: center; }
.opening__heading { display: grid; justify-items: center; gap: 4px; margin-bottom: 18px; text-align: center; text-shadow: 0 3px 20px #0008; transition: opacity .45s ease, transform .65s ease; }
.opening__heading span { font-size: .74rem; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; opacity: .82; }
.opening__heading strong { color: #f4e8d2; font: italic clamp(2.7rem, 9vw, 4.35rem)/1 var(--serif); letter-spacing: -.02em; }
.envelope {
  position: relative; width: min(86vw, 450px, 57svh); aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid #fff7e87a; border-radius: 3px;
  background: #e9e1d2;
  box-shadow: 0 34px 75px #0009, 0 4px 14px #0008, 0 0 0 7px #e6dcca0a;
  transform: rotate(-1.2deg); transform-origin: 50% 54%;
  transition: transform .9s cubic-bezier(.2,.75,.2,1), opacity .7s .16s ease, filter .8s ease;
}
.envelope__photo { width: 100%; height: 100%; display: block; object-fit: cover; }
.envelope__edge { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px #fff8, inset 0 0 40px #493c2740; background: linear-gradient(125deg, #fff5 0%, transparent 21%, transparent 74%, #3428181f 100%); }
.seal {
  position: absolute; z-index: 3; left: 39.5%; top: 56.8%; translate: -50% -50%; width: 25%; aspect-ratio: 1;
  display: block; padding: 0; border: 0; border-radius: 52% 48% 45% 55% / 48% 55% 45% 52%; cursor: pointer;
  color: transparent; background: transparent;
  transition: transform .28s ease, opacity .35s ease, filter .28s ease, box-shadow .28s ease;
}
.seal::before {
  position: absolute; inset: -2px; content: ''; border-radius: inherit;
  border: 1px solid #fff9; box-shadow: 0 0 0 0 #fff9;
  animation: wax-pulse 2.3s ease-out infinite;
}
.seal::after {
  position: absolute; top: 14%; left: 18%; width: 43%; height: 18%; content: '';
  border-radius: 50%; background: linear-gradient(165deg, #fff9, transparent 76%);
  filter: blur(.7px); transform: rotate(-19deg); opacity: .65;
}
.seal:hover, .seal:focus-visible { transform: scale(1.08); filter: brightness(1.08); box-shadow: 0 0 25px #fff7dc63; outline: 2px solid #fff; outline-offset: 5px; }
.opening__hint { margin: 20px 0 0; font-size: .76rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .8; transition: opacity .35s ease, transform .55s ease; }
.opening.is-opening .opening__heading { opacity: 0; transform: translateY(-10px); }
.opening.is-opening .opening__hint { opacity: 0; transform: translateY(8px); }
.envelope.opened { opacity: 0; filter: blur(3px) brightness(1.06); transform: translateY(24px) rotate(1deg) scale(.94); }
.envelope.opened .seal { opacity: 0; pointer-events: none; transform: scale(1.28); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes wax-pulse { 0%, 45% { box-shadow: 0 0 0 0 #fff8; } 76%, 100% { box-shadow: 0 0 0 13px #fff0; } }

main { overflow: hidden; }
.hero { min-height: 100svh; position: relative; display: grid; place-items: center; color: white; isolation: isolate; }
.hero__image-wrap, .hero__image, .hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__image { object-fit: cover; object-position: center; }
.hero__veil { background: linear-gradient(180deg, #03102d66 0%, #05112718 35%, #06122ebd 78%, #07142dfa 100%); }
.hero__content { position: relative; z-index: 1; width: min(92%, 760px); padding: 88px 20px 38px; text-align: center; text-shadow: 0 2px 18px #0008; }
.eyebrow { margin: 0 0 16px; font-size: .78rem; font-weight: 600; letter-spacing: .23em; text-transform: uppercase; }
.monogram { width: 80px; height: 80px; margin: 22px auto; display: grid; place-items: center; border: 1px solid #ffffffaa; border-radius: 50%; font: italic 3.3rem var(--serif); }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font: italic clamp(4.2rem, 17vw, 8.5rem)/.85 var(--serif); letter-spacing: -.04em; }
h1 span { display: block; margin-bottom: 18px; font: 500 .16em/1 var(--sans); letter-spacing: .36em; text-transform: uppercase; }
.hero__date { margin: 32px 0 0; font: 600 .9rem var(--sans); letter-spacing: .28em; }
.scroll-cue { display: inline-flex; flex-direction: column; gap: 8px; margin-top: 58px; text-decoration: none; font-size: .78rem; letter-spacing: .12em; }
.scroll-cue span { animation: bob 1.8s ease-in-out infinite; }

.section { padding: 90px max(24px, calc((100% - 980px)/2)); text-align: center; }
.section h2 { max-width: 760px; margin: 0 auto 24px; font: 400 clamp(2.3rem, 8vw, 4.8rem)/1.05 var(--serif); letter-spacing: -.03em; }
.lead { max-width: 660px; margin: 0 auto; font: 1.18rem/1.9 var(--serif); color: #354154; }
.ornament { margin-bottom: 26px; color: var(--champagne); font-size: 1.4rem; }
.intro { background: var(--paper); }
.parents { display: grid; gap: 7px; margin-top: 42px; }
.parents span { color: #5d6675; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.parents strong { font: italic 1.55rem var(--serif); }

.gallery { padding-top: 18px; background: var(--paper); }
.gallery h2 { margin-bottom: 42px; }
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 26px); max-width: 1040px; margin: 0 auto; }
.gallery__item { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: #ded8cd; box-shadow: 0 20px 50px #07152e17; }
.gallery__item::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(180deg, transparent 58%, #061329c7 100%); }
.gallery__item img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.gallery__item:hover img { transform: scale(1.025); }
.gallery__item figcaption { position: absolute; z-index: 1; right: 20px; bottom: 18px; left: 20px; color: white; font: italic clamp(1.15rem, 2.3vw, 1.65rem) var(--serif); text-shadow: 0 2px 12px #0008; }

.countdown { color: white; background: linear-gradient(135deg, #06132b, #13386a); }
.countdown__grid { max-width: 760px; margin: 38px auto 0; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid #ffffff3d; border-bottom: 1px solid #ffffff3d; }
.countdown__grid div { padding: 28px 8px; border-right: 1px solid #ffffff3d; }
.countdown__grid div:last-child { border-right: 0; }
.countdown__grid strong { display: block; font: 400 clamp(2rem, 8vw, 4.4rem) var(--serif); font-variant-numeric: tabular-nums; }
.countdown__grid span { display: block; margin-top: 7px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }

.details { background: #e9edf2; }
.details__year { margin: -11px 0 46px; color: #6d7787; letter-spacing: .42em; }
.events { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin: 0 auto 30px; }
.event-card { position: relative; padding: 44px 28px 34px; border: 1px solid #8b96a755; background: #f9fafb; box-shadow: 0 16px 40px #07152e0d; }
.event-card__number { position: absolute; top: 18px; left: 20px; color: #a7afba; font: .7rem var(--sans); letter-spacing: .2em; }
.event-card h3 { margin: 8px 0 15px; color: var(--blue); font: 400 2.45rem var(--serif); }
.event-card p:not(.eyebrow) { margin: 7px 0; line-height: 1.55; }
.muted { color: #667181; font-size: .88rem; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 50px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 999px; cursor: pointer; color: white; background: var(--ink); font: 600 .78rem var(--sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: transform .2s, background .2s, color .2s; }
.button:hover, .button:focus-visible { transform: translateY(-2px); outline: 2px solid var(--champagne); outline-offset: 3px; }
.button--ghost { min-height: 42px; margin-top: 20px; color: var(--ink); background: transparent; }
.button--light { color: var(--ink); border-color: white; background: white; }
.calendar-status { min-height: 1.2em; margin: 12px 0 0; color: #556170; font-size: .85rem; }

.timeline { color: white; background: var(--night); }
.timeline__list { max-width: 670px; margin: 48px auto 0; text-align: left; }
.timeline__item { display: grid; grid-template-columns: 70px 24px 1fr; align-items: center; min-height: 76px; }
.timeline__item time { color: var(--champagne); font: 1.2rem var(--serif); }
.timeline__item span { position: relative; width: 9px; height: 9px; border: 1px solid #d7c18d; border-radius: 50%; }
.timeline__item:not(:last-child) span::after { position: absolute; top: 10px; left: 3px; width: 1px; height: 67px; content: ''; background: #ffffff33; }
.timeline__item p { margin: 0; font: 1.5rem var(--serif); }

.dress { position: relative; background: #f7f7f5; }
.dress__mark { color: #102d5a0a; font: 700 clamp(10rem, 32vw, 24rem)/.7 var(--serif); position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; pointer-events: none; }
.dress > *:not(.dress__mark) { position: relative; }
.dress > p:not(.eyebrow,.note) { margin: 0 auto 24px; color: #4c5868; }
.swatches { display: flex; justify-content: center; gap: 14px; margin: 30px 0; }
.swatches span { width: 42px; height: 42px; border: 5px solid white; border-radius: 50%; background: var(--swatch); box-shadow: 0 2px 12px #0002; }
.note { font: italic 1.05rem var(--serif); color: #5e4b22; }

.gifts { background: #dfe5ec; }
.gifts p:last-child { max-width: 570px; margin: 0 auto; color: #465364; line-height: 1.8; }
.rsvp { color: white; background: linear-gradient(160deg, #173863, #07142b 68%); }
.rsvp > p:not(.eyebrow,.rsvp__small) { max-width: 600px; margin: 0 auto 30px; line-height: 1.75; }
.rsvp-form { max-width: 720px; margin: 32px auto 0; padding: clamp(22px, 4vw, 38px); text-align: left; border: 1px solid #ffffff38; background: #ffffff0d; box-shadow: 0 24px 60px #02081466; backdrop-filter: blur(10px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 9px; transition: opacity .25s ease; }
.field--wide { grid-column: 1 / -1; }
.field span { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.field input, .field select { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid #ffffff4d; border-radius: 2px; color: white; background: #061329b8; font: 1rem var(--sans); transition: border-color .2s, box-shadow .2s, background .2s; }
.field input::placeholder { color: #ffffff78; }
.field select { cursor: pointer; }
.field select option { color: var(--ink); background: white; }
.field input:focus, .field select:focus { border-color: #e6d3aa; outline: none; background: #0a1d3be6; box-shadow: 0 0 0 3px #d8bd8130; }
.field.is-disabled { opacity: .42; }
.form-helper { margin: 13px 0 0; color: #ffffffa8; font-size: .8rem; line-height: 1.5; }
.rsvp-form .button { width: 100%; margin-top: 24px; }
.form-status { min-height: 1.25em; margin: 12px 0 0; text-align: center; color: #f2dfb9; font-size: .85rem; }
.rsvp__small { max-width: 520px; margin: 22px auto 0; font-size: .78rem; line-height: 1.5; opacity: .66; }

footer { padding: 56px 24px; text-align: center; color: #687384; background: #f8f7f3; }
.footer__monogram { margin: 0 auto 18px; color: var(--champagne); font: italic 3rem var(--serif); }
footer p { margin: 5px 0; letter-spacing: .16em; }
.footer__note { font-size: .72rem; text-transform: uppercase; opacity: .72; }

@keyframes bob { 50% { transform: translateY(6px); } }
@media (max-width: 680px) {
  .section { padding-top: 72px; padding-bottom: 72px; }
  .events { grid-template-columns: 1fr; }
  .countdown__grid { grid-template-columns: repeat(2,1fr); }
  .countdown__grid div:nth-child(2) { border-right: 0; }
  .countdown__grid div:nth-child(-n+2) { border-bottom: 1px solid #ffffff3d; }
  .hero__content { padding-top: 70px; }
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 5 / 4; }
  .gallery__item:first-child img { object-position: center 46%; }
  .gallery__item figcaption { right: 13px; bottom: 13px; left: 13px; }
  .form-grid { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
}
@media (max-height: 600px) {
  .opening { padding-top: 10px; padding-bottom: 10px; }
  .opening__heading { margin-bottom: 8px; }
  .opening__heading strong { font-size: 2.1rem; }
  .envelope { width: min(76vw, 390px, 48svh); }
  .opening__hint { margin-top: 10px; font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}