:root {
  --paper: #fbf7fa; --blush: #efe2ea; --lace: #e6d2de; --ink: #5a4652; --accent: #6b1d3b;
  --band: #6b1d3b; --band-ink: #fff; --card: #fff; --outside: #e9dde4; --glow: #fff;
  --script: 'Pinyon Script', cursive; --serif: 'Cormorant Garamond', Georgia, serif;
  --script-style: normal; --title-size: 52px; --names-scale: 1;
  --ease: cubic-bezier(.22, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--outside);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; height: 100svh; }

.app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  background: var(--paper);
  min-height: 100svh;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(90, 40, 70, .12);
}

/* ───────── Envelope ───────── */
.envelope {
  position: fixed;
  top: 0; left: 50%;
  width: min(100vw, 480px);
  height: 100svh;
  transform: translateX(-50%);
  z-index: 50;
  perspective: 1400px;
  transition: opacity .6s ease 1.9s, visibility 0s linear 2.5s;
}
.env-inside {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, var(--glow) 0%, var(--blush) 55%, var(--lace) 100%);
}
.flap { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; }
.flap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flap-top    { transform-origin: 50% 0;    filter: drop-shadow(0 6px 10px rgba(110, 50, 85, .22)); }
.flap-bottom { transform-origin: 50% 100%; filter: drop-shadow(0 -4px 10px rgba(110, 50, 85, .18)); }
.flap-left   { transform-origin: 0 50%;    filter: drop-shadow(4px 0 8px rgba(110, 50, 85, .15)); }
.flap-right  { transform-origin: 100% 50%; filter: drop-shadow(-4px 0 8px rgba(110, 50, 85, .15)); }
.flap { transition: transform 1.8s cubic-bezier(.5, 0, .2, 1), opacity .8s ease; }
.env-inside { transition: opacity 1s ease .5s; }
.envelope.open .env-inside { opacity: 0; }

.seal {
  position: absolute;
  left: 50%; top: 46%;
  width: 104px; height: 104px;
  transform: translate(-50%, -50%);
  border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(90, 40, 70, .3));
  transition: transform .6s var(--ease), opacity .45s ease;
  -webkit-tap-highlight-color: transparent;
  animation: sealIn 1.2s var(--ease) both .2s;
}
.seal::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .9);
  animation: pulse 2.2s ease-out infinite 1.4s;
}
.seal svg { width: 100%; height: 100%; display: block; }
.env-hint {
  position: absolute; left: 0; right: 0; top: calc(46% + 78px);
  text-align: center; font-style: italic; letter-spacing: .12em;
  color: var(--accent); opacity: .75; text-shadow: 0 0 10px var(--blush), 0 0 3px var(--blush);
  font-size: 16px; animation: fadeIn 1s ease both 1.2s;
  transition: opacity .3s;
}
@keyframes sealIn { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
@keyframes pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }

.envelope.open .seal { transform: translate(-50%, -50%) scale(1.25) rotate(-12deg); opacity: 0; }
.envelope.open .env-hint { opacity: 0; }
.envelope.open .flap-top    { transform: rotateX(-150deg); opacity: 0; transition-delay: .3s, 1.1s; }
.envelope.open .flap-bottom { transform: rotateX(150deg);  opacity: 0; transition-delay: .45s, 1.25s; }
.envelope.open .flap-left   { transform: rotateY(150deg);  opacity: 0; transition-delay: .65s, 1.4s; }
.envelope.open .flap-right  { transform: rotateY(-150deg); opacity: 0; transition-delay: .65s, 1.4s; }
.envelope.open { opacity: 0; visibility: hidden; }

/* ───────── Shared ───────── */
.script { font-family: var(--script); font-style: var(--script-style); font-weight: 400; line-height: 1.1; color: var(--accent); }
h2.script { font-size: var(--title-size); margin-bottom: 10px; }
.art { margin: 0 auto; }
.sketch.art-md { width: 150px; }
.venue-name { font-size: 24px; color: var(--accent); }
.caps { text-transform: uppercase; letter-spacing: .28em; font-size: 12px; font-weight: 500; }
.muted { opacity: .8; }
.section { position: relative; padding: 88px 32px; text-align: center; }
.section p { max-width: 340px; margin: 0 auto; }
.btn {
  display: inline-block; margin-top: 26px;
  padding: 12px 30px; border-radius: 999px;
  border: 1px solid currentColor; color: var(--accent);
  font: 500 12px/1 var(--serif); letter-spacing: .26em; text-transform: uppercase;
  text-decoration: none; background: transparent; cursor: pointer;
  transition: background .3s, color .3s;
}
.btn:hover { background: var(--accent); color: var(--paper); }
.dark .btn { color: var(--band-ink); }
.dark .btn:hover { background: var(--band-ink); color: var(--band); }

.sketch { display: block; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); opacity: .85; }
.sketch .fillc { fill: currentColor; stroke: none; }
.sketch [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }

[data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(4px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }

/* ───────── Hero ───────── */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--blush); }
.hero > svg.frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 22%;
}
.hero .eyebrow { font-style: italic; font-size: 15px; margin-bottom: 14px; }
.hero .names { font-family: var(--script); font-style: var(--script-style); color: var(--accent); font-size: calc(clamp(46px, 14vw, 62px) * var(--names-scale)); line-height: 1.02; }
.hero .amp { font-family: var(--script); font-style: var(--script-style); font-size: 34px; color: var(--accent); opacity: .7; display: block; margin: -2px 0; }
.hero .date { margin: 16px 0 14px; letter-spacing: .3em; font-size: 14px; }
.hero .sketch { width: 150px; }
.hero .venue { margin-top: 8px; font-size: 20px; }
.hero .city { font-size: 11px; }
.hero .scroll-cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 34px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 12px;
}
.hero .scroll-cue::after {
  content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: var(--accent); opacity: .6; animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .7; } 100% { transform: translateY(12px); opacity: 0; } }

.hero-inner > * { opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.revealed .hero-inner > * { opacity: 1; transform: none; }
.revealed .hero-inner > :nth-child(1) { transition-delay: 1.5s; }
.revealed .hero-inner > :nth-child(2) { transition-delay: 1.75s; }
.revealed .hero-inner > :nth-child(3) { transition-delay: 2s; }
.revealed .hero-inner > :nth-child(4) { transition-delay: 2.2s; }
.revealed .hero-inner > :nth-child(5) { transition-delay: 2.4s; }
.revealed .hero-inner > :nth-child(6) { transition-delay: 2.55s; }

/* ───────── Lace bands (burgundy blocks) ───────── */
.dark { background: var(--band); color: var(--band-ink); }
.dark .script { color: var(--band-ink); }
.dark .sketch { color: var(--band-ink); }
.dark.section { padding-top: 120px; padding-bottom: 120px; }
.band-edge {
  position: absolute; left: 0; right: 0; height: var(--band-h); z-index: 1;
  background-image: var(--band-tile); background-repeat: repeat-x; background-size: var(--band-w) var(--band-h); background-position: center top;
}
.band-edge.top { top: -1px; }
.band-edge.bottom { bottom: -1px; transform: scaleY(-1); }
.fx { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: min(100vw, 480px); height: 100svh; pointer-events: none; z-index: 30; }

/* ───────── Countdown ───────── */
.garland { width: 100%; max-width: 360px; margin: 0 auto 6px; }
.countdown { display: flex; justify-content: center; gap: 6px; margin: 18px auto 0; }
.countdown div { width: 70px; }
.countdown b { display: block; font-weight: 300; font-size: 42px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.countdown span { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; opacity: .8; }
.countdown i { font-style: normal; font-size: 30px; line-height: 1.2; opacity: .5; width: auto; }
.cd-date { margin-top: 18px; letter-spacing: .3em; font-size: 13px; }

/* ───────── Timeline ───────── */
.timeline { position: relative; margin: 36px auto 0; max-width: 380px; text-align: left; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1px; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.tl-row { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: start; margin-bottom: 30px; }
.tl-left { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tl-left .sketch { width: 38px; margin: 0; }
.tl-time { font-size: 17px; white-space: nowrap; }
.tl-dot { width: 9px; height: 9px; margin: 9px auto 0; border-radius: 50%; background: var(--paper); border: 1px solid var(--accent); position: relative; z-index: 1; }
.tl-title { margin-top: 5px; color: var(--accent); }
.tl-text { font-size: 15px; line-height: 1.4; margin-top: 4px; }
.table-sketch { width: 100%; max-width: 340px; margin-top: 16px; }

/* ───────── Dress code oval ───────── */
.oval { position: relative; margin: 0 auto; width: 100%; max-width: 380px; aspect-ratio: 3 / 4.1; }
.oval > svg.frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.oval-inner { position: absolute; inset: 15% 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.oval-inner h2.script { font-size: 44px; }
.oval-inner p { font-size: 15px; line-height: 1.45; }
.palette { display: flex; gap: 7px; margin-top: 18px; }
.palette span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(90, 70, 82, .2); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .08); }

/* ───────── Hotels ───────── */
.card {
  position: relative; margin: 26px auto 0; max-width: 360px; padding: 30px 24px 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 160px 160px 18px 18px;
  background: linear-gradient(var(--card), var(--paper));
}
.card::before { content: ''; position: absolute; inset: 6px; border: 1px dashed color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 154px 154px 13px 13px; pointer-events: none; }
.card h3 { font-weight: 400; font-size: 24px; color: var(--accent); margin-bottom: 6px; padding-top: 10px; }
.card p { font-size: 15px; }

.gift-details { margin-top: 18px; font-size: 14px; letter-spacing: .08em; }

footer.section { padding-top: 40px; padding-bottom: 70px; }
footer .mono { font-family: var(--script); font-style: var(--script-style); font-size: 60px; color: var(--accent); }

/* ───────── Music ───────── */
.music-btn {
  position: fixed; right: max(16px, calc(50vw - 240px + 16px)); bottom: 18px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  background: var(--paper); backdrop-filter: blur(6px); color: var(--accent); cursor: pointer;
}
.music-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.music-btn.playing svg { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ───────── Photos ───────── */
.portrait-sec { padding-top: 10px; padding-bottom: 60px; }
.portrait { width: min(86%, 340px); aspect-ratio: 3 / 4.2; margin: 0 auto; }
.portrait svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .15)); }
.photo-caption { margin-top: 18px !important; font-style: italic; font-size: 16px; }
.photo-band { position: relative; height: 340px; overflow: hidden; }
.pb-img { position: absolute; inset: -60px 0; background-size: cover; background-position: center; transform: scale(1.25); filter: var(--photo-filter, none); }
.gallery { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 32px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { flex: 0 0 64%; aspect-ratio: 3 / 4; scroll-snap-align: center; overflow: hidden; border: 6px solid var(--card); box-shadow: 0 8px 20px rgba(0, 0, 0, .14); outline: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: -12px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-filter, none); transition: transform 1.2s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery.frame-oval figure { border-radius: 50% / 42%; }
.gallery.frame-arch figure { border-radius: 999px 999px 10px 10px; }
.gallery.frame-rect figure { border-radius: 4px; }
.gallery-hint { margin-top: 4px; font-size: 10px; }

/* photo hero */
.hero.photo { background: #111; }
.hero.photo .hero-inner { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.hero.photo .names, .hero.photo .amp { color: #fff; }
.hero.photo .sketch { color: #fff; }
.hero.photo .scroll-cue { border-color: rgba(255, 255, 255, .7); }
.hero.photo .scroll-cue::after { background: #fff; }
.hero .hero-photo { transform-box: fill-box; transform-origin: 50% 50%; animation: heroZoom 18s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.sketch .crest-text { font-family: var(--script); font-style: var(--script-style); font-size: 30px; fill: currentColor; stroke: none; }

/* keyboard focus */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.seal:focus-visible { outline-offset: 6px; border-radius: 50%; }