*{box-sizing:border-box}
:root{--ds-ink:#2b1d16;--ds-ink-2:#6b5a4c;--ds-font-display:Georgia,"Times New Roman",serif}
html,body{margin:0}
body{background:#faf3e6;color:var(--ds-ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.page{max-width:640px;margin:0 auto;padding:0 24px 56px}
h1,h2{font-family:var(--ds-font-display);font-weight:400;margin:0}
h1{font-size:44px;line-height:1.1;text-align:center;color:#7a1a2b}
h2{font-size:26px;color:#7a1a2b;margin:8px 0 12px}
.wd-title{text-align:center;margin-top:8px}
.wd-fact{margin:8px 0 0;font-weight:600;color:#9a1f33}
.wd-intro{margin:12px 0 0;color:var(--ds-ink-2)}
.facts{margin:0}.facts div{padding:10px 0;border-bottom:1px solid #e3cf9f}.facts dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-ink-2)}.facts dd{margin:2px 0 0}
.maplink{display:inline-flex;align-items:center;min-height:44px;color:#7a1a2b;font-weight:600}
.closing{text-align:center;font-family:var(--ds-font-display);font-size:20px;color:#7a1a2b;margin:16px 0 0}
section p{margin:0 0 10px}
.wd-hero{margin:0 -24px}
.wd-hero img{max-width:100%}
html, body, #root { margin: 0; min-height: 100%; }
body { background: var(--ds-page); }


.wd-blessing { margin: 20px 0 0; text-align: center; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a1f33; }
.wd-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 12px; }
.wd-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #c9a24a; border-radius: 4px; color: #7a1a2b; text-decoration: none; font-weight: 600; }
.wd-nav a:hover { background: #fbf3df; }
html { scroll-behavior: smooth; }


:root { --ds-page: #faf3e6; --ds-hairline: #e3cf9f; }
body { background: #faf3e6; }
.wd-divider { display: block; width: 100%; max-width: 520px; height: auto; margin: 8px auto; }

/* Motion: all of it is switched off under prefers-reduced-motion */
.wd-hero { position: relative; overflow: hidden; }
.wd-hero-img { animation: wd-open 1.6s ease-out both; transform-origin: 50% 60%; }
@keyframes wd-open { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
.wd-title { animation: wd-rise 1.2s ease-out 0.5s both; }
.wd-blessing { animation: wd-rise 1.2s ease-out 0.3s both; }
@keyframes wd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wd-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wd-petal { position: absolute; top: -8%; border-radius: 80% 0 80% 0; opacity: 0; animation-name: wd-fall; animation-timing-function: linear; animation-iteration-count: infinite; }
.wd-petal.tone-0 { background: #f3a61c; }
.wd-petal.tone-1 { background: #9a1f33; }
.wd-petal.tone-2 { background: #f6e3b5; }
@keyframes wd-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.85; }
  50% { transform: translate3d(18px, 150px, 0) rotate(160deg); }
  90% { opacity: 0.7; }
  100% { transform: translate3d(-10px, 330px, 0) rotate(320deg); opacity: 0; }
}
.wd-reveal { transition: opacity 0.9s ease, transform 0.9s ease; }
.wd-reveal.is-hidden { opacity: 0; transform: translateY(18px); }

.wd-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.wd-count-box { display: flex; flex-direction: column; align-items: center; padding: 14px 4px; border: 1px solid #c9a24a; border-radius: 4px; background: #fffaf0; }
.wd-count-num { font-family: var(--ds-font-display, inherit); font-size: 28px; line-height: 1.1; color: #7a1a2b; font-variant-numeric: tabular-nums; }
.wd-count-label { margin-top: 4px; font-size: 12px; color: var(--ds-ink-2); }
.wd-count-note, .wd-count-done { margin: 8px 0 0; font-size: 12px; color: var(--ds-ink-2); }
.wd-count-done { font-size: 16px; color: #7a1a2b; }
@media (max-width: 340px) { .wd-count-num { font-size: 22px; } }

.wd-timeline { list-style: none; margin: 8px 0 0; padding: 0 0 0 28px; position: relative; }
.wd-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#c9a24a, #9a1f33); }
.wd-timeline li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 24px; }
.wd-timeline li:last-child { padding-bottom: 0; }
.wd-dot { position: absolute; left: -28px; top: 4px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #faf3e6; border: 3px solid #9a1f33; }
.wd-time { font-weight: 600; color: #7a1a2b; }
.wd-ev-name { font-weight: 600; }
.wd-ev-detail { color: var(--ds-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .wd-hero-img, .wd-title, .wd-blessing { animation: none; }
  .wd-petals { display: none; }
  .wd-reveal, .wd-reveal.is-hidden { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Opening options */

.wd-hero { padding: 20px 0 8px; text-align: center; }
.wd-a-flowers { display: block; width: 78%; margin: 0 auto 6px; height: auto; animation: wd-rise 1.2s ease-out both; }
.wd-a-arch { position: relative; z-index: 1; width: 72%; max-width: 360px; margin: 0 auto; aspect-ratio: 3 / 4; border-radius: 999px 999px 8px 8px; border: 3px solid #c9a24a; padding: 6px; box-sizing: border-box; background: #faf3e6; box-shadow: 0 0 0 6px #faf3e6, 0 0 0 7px #e3cf9f; overflow: hidden; animation: wd-arch 2.2s ease-out both; }
.wd-a-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 999px 999px 4px 4px; display: block; }
@keyframes wd-arch { from { clip-path: inset(100% 0 0 0); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

.wd-hero-b { margin: -24px -24px 0; height: 430px; background: #faf3e6; }
.wd-b-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.wd-b-photo { width: 70%; max-width: 330px; aspect-ratio: 3 / 4; border: 3px solid #c9a24a; padding: 6px; box-sizing: border-box; background: #fffaf0; transform: scale(0.92); animation: wd-settle 2.4s ease-out 0.4s both; }
.wd-b-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@keyframes wd-settle { from { transform: scale(0.92); } to { transform: scale(1); } }
.wd-door { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; align-items: center; background: linear-gradient(135deg, #5e1020, #8a1c30); border: 0 solid #c9a24a; z-index: 2; animation-duration: 2s; animation-timing-function: cubic-bezier(.6,.05,.2,1); animation-delay: 0.9s; animation-fill-mode: forwards; background-image: radial-gradient(circle at 50% 50%, rgba(201,162,74,.35) 0 2px, transparent 3px), linear-gradient(135deg, #5e1020, #8a1c30); background-size: 22px 22px, 100% 100%; }
.wd-door span { font-family: var(--ds-font-display, serif); font-size: 64px; color: #e3c46f; width: 100%; text-align: center; }
.wd-door-l { left: 0; border-right-width: 3px; animation-name: wd-open-l; }
.wd-door-r { right: 0; border-left-width: 3px; animation-name: wd-open-r; }
@keyframes wd-open-l { to { transform: translateX(-102%); } }
@keyframes wd-open-r { to { transform: translateX(102%); } }

.wd-hero-c { margin: -24px -24px 0; padding: 36px 24px 28px; background: radial-gradient(circle at 50% 30%, #8a1c30 0%, #5e1020 55%, #3d0a15 100%); text-align: center; }
.wd-c-glow { position: absolute; left: 50%; top: 22%; width: 260px; height: 260px; margin-left: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(243,166,28,.45), transparent 65%); animation: wd-glow 4s ease-in-out infinite; }
@keyframes wd-glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.wd-c-medallion { position: relative; width: 62%; max-width: 280px; aspect-ratio: 3 / 4; margin: 0 auto; border-radius: 999px; border: 3px solid #e3c46f; padding: 6px; box-sizing: border-box; background: #faf3e6; overflow: hidden; animation: wd-rise 1.6s ease-out both; box-shadow: 0 0 0 6px rgba(227,196,111,.25); }
.wd-c-medallion img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; border-radius: 999px; display: block; }
.wd-c-names { position: relative; margin-top: 18px; font-family: var(--ds-font-display, serif); font-size: 40px; color: #f0d58a; letter-spacing: .02em; animation: wd-rise 1.4s ease-out .7s both; }
.wd-c-names i { font-style: normal; color: #f3a61c; padding: 0 4px; }
.wd-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wd-sparks span { position: absolute; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: #f0d58a; opacity: 0; animation-name: wd-rise-up; animation-iteration-count: infinite; animation-timing-function: ease-in; }
@keyframes wd-rise-up { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-420px); opacity: 0; } }
@media (min-width: 768px) { .wd-hero-b, .wd-hero-c { margin: -36px -36px 0; } }
@media (prefers-reduced-motion: reduce) {
  .wd-a-flowers, .wd-a-arch, .wd-b-photo, .wd-c-medallion, .wd-c-names { animation: none; clip-path: none; transform: none; }
  .wd-door, .wd-c-glow, .wd-sparks { display: none; }
}


.wd-hero-art { margin: -24px -24px 0; background: #7a1a2b; }
.wd-d-photo { padding: 28px 0 8px; }
@media (min-width: 768px) { .wd-hero-art { margin: -36px -36px 0; } }
.wd-a-arch { background: radial-gradient(ellipse at 50% 38%, #fffaf0 0%, #f6e6c4 62%, #ecd29a 100%); }
.wd-a-arch img { object-fit: contain; object-position: 50% 100%; transform: scale(1.22); transform-origin: 50% 100%; border-radius: 0; }