:root { --ink:#526e62; --soft-ink:#71877b; --cream:#fbf7f4; --sage:#eaf0e7; --serif:Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:var(--serif); background:#fff; text-align:center; }
main { width:100%; overflow:hidden; }
p,h1,h2 { margin:0; }
.hero,.details { background:var(--cream); }
.hero { position:relative; min-height:790px; padding:0 22px 60px; display:flex; align-items:center; flex-direction:column; }
.hero-florals { display:block; width:min(540px,84vw); height:auto; margin:0 auto 68px; }
.eyebrow { font-size:14px; font-weight:bold; letter-spacing:.14em; text-transform:uppercase; color:var(--soft-ink); }
.couple-mark { width:267px; max-width:72vw; height:auto; margin:33px auto 30px; }
.date { margin-bottom:42px; }
.flower { object-fit:contain; }
.flower-small { width:50px; height:51px; margin-bottom:31px; }
.intro { font-size:16px; line-height:1.45; }
.second { margin-top:12px; }
.sprig { position:absolute; top:100%; left:50%; transform:translate(-50%,-50%); width:230px; height:auto; margin:0; z-index:2; }
.section-pad { padding-left:20px; padding-right:20px; }
.ceremony { padding-top:127px; padding-bottom:120px; }
.church { display:block; width:min(445px,82vw); height:auto; margin:42px auto 15px; }
h1,.dresscode h2 { font-size:27px; font-weight:normal; }
.address { font-size:15px; line-height:1.35; margin-top:6px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:34px; border:0; border-radius:5px; padding:0 18px; background:var(--ink); color:#fff; font:bold 12px var(--serif); text-decoration:none; cursor:pointer; }
.ceremony .button { margin-top:22px; }
.note { margin-top:38px; font-size:14px; font-style:italic; color:var(--soft-ink); }
.schedule { position:relative; background:var(--sage); padding-top:95px; padding-bottom:102px; }
.section-flower { position:absolute; top:-31px; left:50%; transform:translateX(-50%); width:60px; height:50px; }
.timeline { list-style:none; padding:0; margin:48px auto 0; max-width:540px; }
.timeline li { position:relative; padding-bottom:43px; }
.timeline li:not(:last-child)::after { content:''; position:absolute; width:1px; height:22px; background:#c9d4c9; left:50%; bottom:10px; }
time { display:block; margin-bottom:3px; font-size:12px; color:#9aab9f; }
.timeline h2 { font-size:24px; font-weight:normal; }
.timeline p,.note { font-style:italic; }
.timeline p { margin-top:5px; font-size:14px; color:var(--soft-ink); }
.schedule-divider { position:absolute; z-index:2; left:50%; bottom:-130px; width:230px; height:281px; transform:translateX(-50%); pointer-events:none; }
.divider-particles { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; }
.schedule > .eyebrow, .schedule .timeline { position:relative; z-index:3; }
.schedule-end { position:absolute; z-index:4; top:68px; left:50%; display:block; width:175px; height:auto; transform:translateX(-50%); }
.dresscode { padding-top:165px; padding-bottom:100px; position:relative; }
.dresscode-art { width:min(416px,88vw); height:auto; display:block; margin:43px auto 40px; }
.dresscode p:not(.eyebrow) { font-size:15px; line-height:1.45; margin-top:7px; }
.dress-flower { position:absolute; width:63px; height:63px; bottom:-31px; left:50%; transform:translateX(-50%); z-index:1; }
.details { padding-top:114px; padding-bottom:55px; display:flex; align-items:center; flex-direction:column; }
.details article { width:min(400px,100%); margin-bottom:38px; }
.details h2 { font-size:24px; font-weight:normal; margin-bottom:8px; }
.details p { font-size:15px; line-height:1.4; }
.details article p+p { margin-top:18px; }
.rsvp { margin-top:2px; }
.rsvp .button { position:relative; isolation:isolate; overflow:hidden; margin-top:20px; }
.rsvp .button > span { position:relative; z-index:1; }
.rsvp .button::after { content:""; position:absolute; z-index:0; top:-30%; bottom:-30%; left:-42%; width:38%; pointer-events:none; background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.04) 28%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.04) 72%, transparent 100%); transform:translateX(0); animation:rsvp-sheen 5s ease-in-out infinite; }
.footer-florals { display:block; width:min(420px,90vw); height:auto; margin:32px auto 0; }
@media(max-width:600px) {
 .hero { min-height:auto; padding:0 20px 100px; }
 .hero-florals { width:min(420px,94vw); margin-bottom:40px; }
 .eyebrow { font-size:12px; }
 .couple-mark { margin:24px auto 22px; }
 .date { margin-bottom:34px; }
 .intro { font-size:15px; max-width:360px; }
 .desktop { display:none; }
 .sprig { top:auto; bottom:0; width:200px; transform:translate(-50%,50%); }
 .ceremony { padding-top:100px; padding-bottom:100px; }
 .church { margin-top:30px; }
 h1,.dresscode h2 { font-size:24px; }
 .schedule { padding-top:82px; padding-bottom:86px; }
 .timeline { margin-top:40px; }
 .timeline h2 { font-size:21px; }
 .timeline p { font-size:13px; }
 .dresscode { padding-top:130px; padding-bottom:82px; }
 .dresscode-art { margin-top:32px; margin-bottom:28px; }
 .details { padding-top:90px; }
}

/* Quiet motion keeps the page feeling alive without distracting from the details. */
.button { transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.button:hover { background-color:#34483f; box-shadow:0 5px 14px rgb(48 71 60 / 16%); }
.button:active { transform:translateY(0) scale(.98); }
.button:focus-visible { outline:2px solid #8a9e91; outline-offset:4px; }

html.motion-ready [data-reveal] {
  opacity:0;
  transform:translateY(16px);
  transition:opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1);
}
html.motion-ready [data-reveal].is-visible { opacity:1; transform:translateY(0); }
html.motion-ready .timeline li:nth-child(2) { transition-delay:80ms; }
html.motion-ready .timeline li:nth-child(3) { transition-delay:160ms; }
html.motion-ready .timeline li:nth-child(4) { transition-delay:240ms; }
html.motion-ready .timeline li:nth-child(5) { transition-delay:320ms; }

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

/* The particle canvas stays inside the first section and sits behind its copy. */
.hero { isolation:isolate; }
.hero-particles { position:absolute; inset:0; z-index:3; display:block; width:100%; height:100%; pointer-events:none; }
.hero > img:not(.sprig):not(.hero-florals), .hero > p { position:relative; z-index:4; }
.hero-florals { position:relative; z-index:2; }

@keyframes rsvp-sheen {
  0%,65% { opacity:0; transform:translateX(0); }
  68% { opacity:.75; }
  90% { opacity:.7; transform:translateX(380%); }
  94%,100% { opacity:0; transform:translateX(380%); }
}