/* Hallmark · scope: Wedding story · editorial album · existing wedding palette
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */
@import url("tokens.css?v=52");
:root {
  --paper:#f0ede6; --ink:#38412c; --olive:#57613d; --rose:#9a5e60; --line:rgba(73,80,48,.23);
  --serif:"Lora",Georgia,serif; --script:"Pinyon Script","Segoe Script",cursive; --sans:var(--serif);
}
* { box-sizing:border-box; }
#swipe-debug { position:fixed; z-index:9999; bottom:8px; left:8px; right:8px; max-width:550px; margin:0; padding:10px; background:#132019ed; color:#fff; border:1px solid #93b59d; border-radius:6px; font:11px/1.5 var(--sans); white-space:pre-wrap; pointer-events:none; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
body { height:100dvh; background:var(--paper) url("assets/webp/paper.webp") center/cover; color:var(--ink); font:20px/1.5 var(--serif); }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
button:disabled { cursor:default; opacity:.3; }
button:focus-visible,a:focus-visible { outline:2px solid var(--rose); outline-offset:5px; }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--olive); outline-offset:2px; }
img { display:block; max-width:100%; }
.script { font-family:var(--script); font-weight:400; }
.slide .script,.slide .hero-details { opacity:0; clip-path:inset(0 100% 0 0); }
.slide :where(.formal-invitation > *, .venue-content > *, .album-lyrics > *, .rsvp-copy > *, .rsvp-form > *, .thanks-letter > *, .thanks-gift > *) { opacity:0; }
.slide.is-active .script { animation:handwriting-reveal 2.65s cubic-bezier(.16,1,.3,1) both; text-shadow:0 1px 0 #fff2d522; }
.slide.is-active .hero-copy > * { animation:handwriting-reveal 2.15s cubic-bezier(.16,1,.3,1) both; }
.slide.is-active .hero-names { animation-delay:.5s; }
.slide.is-active .hero-details { animation-delay:1.75s; }
.slide.is-active :where(.formal-invitation > *, .venue-content > *, .album-lyrics > *, .rsvp-copy > *, .rsvp-form > *, .thanks-letter > *, .thanks-gift > *) { animation:text-block-reveal 2.15s cubic-bezier(.16,1,.3,1) both; }
.slide.is-active .inv-couple > div:first-child .script { animation-delay:.7s; }
.slide.is-active .inv-couple .inv-amp { animation-delay:1.3s; }
.slide.is-active .inv-couple > div:last-child .script { animation-delay:1.85s; }
.slide.is-active .formal-invitation > :nth-child(1) { animation-delay:.25s; }
.slide.is-active .formal-invitation > :nth-child(2) { animation-delay:.95s; }
.slide.is-active .formal-invitation > :nth-child(3) { animation-delay:2.1s; }
.slide.is-active .album-lyrics > :nth-child(1) { animation-delay:.25s; }
.slide.is-active .album-lyrics > :nth-child(2) { animation-delay:.95s; }
.slide.is-active .album-lyrics > :nth-child(3) { animation-delay:1.8s; }
.slide.is-active .rsvp-copy > :nth-child(1),.slide.is-active .rsvp-form > :nth-child(1) { animation-delay:.25s; }
.slide.is-active .rsvp-copy > :nth-child(2),.slide.is-active .rsvp-form > :nth-child(2) { animation-delay:.95s; }
.slide.is-active .rsvp-copy > :nth-child(3),.slide.is-active .rsvp-form > :nth-child(3) { animation-delay:1.7s; }
@keyframes handwriting-reveal {
  0% { opacity:0; clip-path:inset(-.35em 100% -.5em -.3em); filter:blur(3px); transform:translate3d(-14px,2px,0) skewX(-2deg); }
  42% { opacity:.78; filter:blur(1px); }
  99% { clip-path:inset(-.35em -.3em -.5em -.3em); }
  100% { opacity:1; clip-path:none; filter:blur(0); transform:translate3d(0,0,0) skewX(0); }
}
@keyframes text-block-reveal {
  from { opacity:0; filter:blur(2px); transform:translateY(10px); }
  to { opacity:1; filter:blur(0); transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  .slide.is-active .script,.slide.is-active :where(.formal-invitation > *, .venue-content > *, .album-lyrics > *, .rsvp-copy > *, .rsvp-form > *, .thanks-letter > *, .thanks-gift > *) { animation:none; }
}
body:not(.is-ready) .slide.is-active .script,
body:not(.is-ready) .slide.is-active .hero-copy > *,
body:not(.is-ready) .slide.is-active :where(.formal-invitation > *, .venue-content > *, .album-lyrics > *, .rsvp-copy > *, .rsvp-form > *, .thanks-letter > *, .thanks-gift > *) { animation:none; }
@media (max-width:720px) {
  .slide.is-active .script { animation-duration:1.75s; }
  .slide.is-active .hero-copy > * { animation-duration:1.5s; }
  .slide.is-active .hero-names { animation-delay:.2s; }
  .slide.is-active .hero-details { animation-delay:.8s; }
  .slide.is-active :where(.formal-invitation > *, .venue-content > *, .album-lyrics > *, .rsvp-copy > *, .rsvp-form > *, .thanks-letter > *, .thanks-gift > *) { animation-duration:1.25s; }
  .slide.is-active .inv-couple > div:first-child .script { animation-delay:.35s; }
  .slide.is-active .inv-couple .inv-amp { animation-delay:.7s; }
  .slide.is-active .inv-couple > div:last-child .script { animation-delay:1.05s; }
  .slide.is-active .formal-invitation > :nth-child(1),.slide.is-active .album-lyrics > :nth-child(1),.slide.is-active .rsvp-copy > :nth-child(1),.slide.is-active .rsvp-form > :nth-child(1) { animation-delay:.1s; }
  .slide.is-active .formal-invitation > :nth-child(2),.slide.is-active .album-lyrics > :nth-child(2),.slide.is-active .rsvp-copy > :nth-child(2),.slide.is-active .rsvp-form > :nth-child(2) { animation-delay:.45s; }
  .slide.is-active .formal-invitation > :nth-child(3),.slide.is-active .album-lyrics > :nth-child(3),.slide.is-active .rsvp-copy > :nth-child(3),.slide.is-active .rsvp-form > :nth-child(3) { animation-delay:.8s; }
}
.eyebrow { margin:0; font:600 10px/1.6 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--olive); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.text-link { display:inline-flex; align-items:center; gap:16px; padding:9px 0; background:none; border:0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--olive); font:600 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.button { padding:14px 24px; min-height:46px; border:1px solid var(--olive); background:var(--olive); color:#f7f4eb; display:flex; justify-content:space-between; align-items:center; }
.small-note { font-size:16px; }
.fine-rule { width:50px; height:1px; background:var(--rose); margin:26px 0; }
.section-script { font-size:clamp(44px,6vw,88px); line-height:1; color:var(--rose); margin:10px 0 18px; }

/* The intro retains the supplied artwork and the two responsive videos. */
.opening { position:fixed; z-index:900; inset:0; display:grid; place-items:center; overflow:hidden; background:var(--paper) url("assets/webp/paper.webp") center/cover; transition:transform .9s cubic-bezier(.65,0,.25,1); }
.opening[hidden] { display:none; }
.opening-loader { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:var(--paper); color:var(--ink); text-align:center; padding:24px; }
.opening-loader[hidden] { display:none; }
.opening-loader .loading-title { font:500 clamp(22px,5vw,32px)/1.4 system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.opening-loader small, .opening-loader button { font:400 13px/1.6 system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.opening:not(.opening-assets-ready) .envelope-button { visibility:hidden; }
.opening img:not(.opening-image-ready) { visibility:hidden; }
.opening.opening-assets-ready .envelope-button { animation:opening-assets-fade .5s linear both; }
.opening.opening-assets-ready .open-label { background:transparent; }
@keyframes opening-assets-fade { from { opacity:0; } to { opacity:1; } }
.opening.is-open { transform:translate3d(0,-100%,0); pointer-events:none; }
.opening-film { position:absolute; inset:0; pointer-events:none; overflow:hidden; background:url("assets/webp/intro-poster.webp") center/cover; }
.opening-film video { width:100%; height:100%; object-fit:cover; transform:scale(1.16); }
.opening-film::after { content:""; position:absolute; inset:0; background:linear-gradient(rgba(244,241,234,.7),rgba(244,241,234,.18) 42%,rgba(244,241,234,.25) 72%,rgba(244,241,234,.65)); transition:opacity .9s ease; }
.opening__copy { position:absolute; top:max(35px,9svh); z-index:2; text-align:center; transition:opacity .4s; }
.opening__copy h1 { margin:18px 0 0; color:var(--rose); font-size:clamp(62px,9vw,120px); line-height:.9; }
.opening__copy h1 span { font-size:.55em; }
.envelope-button { position:relative; z-index:3; width:min(460px,78vw); margin-top:100px; padding:0 0 50px; border:0; background:none; }
.envelope-button:disabled { opacity:1; }
.envelope { position:relative; display:block; aspect-ratio:799/593; transform:rotate(-1deg); transition:transform .7s cubic-bezier(.22,1,.36,1); }
.envelope-photo { position:absolute; width:100%; left:0; bottom:0; }
.envelope-photo--closed { z-index:5; transition:opacity .55s ease .15s; }
.envelope-photo--open { z-index:2; width:92%; left:4%; opacity:0; transition:opacity .55s ease .15s; }
.envelope-flower { position:absolute; z-index:6; width:21%; right:12%; top:-10%; transform:rotate(22deg); }
.envelope-butterfly { position:absolute; z-index:7; width:25%; left:-8%; top:28%; transform:rotate(-24deg); }
.wax-seal { position:absolute; z-index:8; top:54%; left:50%; width:19%; aspect-ratio:681/799; display:flex; align-items:center; justify-content:center; background:url("assets/webp/wax-seal.webp") center/contain no-repeat; font:clamp(17px,2.5vw,28px) var(--script); color:#784349; transform:translate(-50%,-50%) rotate(7deg); transition:opacity .35s,transform .65s; }
.wax-seal span { font-size:.55em; }
.open-label { position:absolute; bottom:0; left:0; width:100%; padding:8px 12px; font:600 10px var(--sans); letter-spacing:.22em; text-transform:uppercase; color:#303924; text-shadow:0 1px 3px #f5f2eb; transition:opacity .25s ease; }
.opening.is-opening .open-label { opacity:0; }
.opening.is-opening .envelope-photo--closed { opacity:0; }
.opening.is-opening .envelope-photo--open { opacity:1; }
.opening.is-opening .envelope { transform:translate3d(0,24px,0); }
.opening.is-opening .wax-seal { opacity:0; transform:translate(-50%,-40%) rotate(24deg) scale(.7); }
.opening.is-opening .opening__copy { opacity:0; }
.opening .envelope-button { transition:opacity .8s ease; }
.opening .opening-film::after { transition:opacity .8s ease; }
.opening.is-film-only .envelope-button,.opening.is-film-only .opening-film::after { opacity:0; pointer-events:none; }

/* One fixed stage: only the current and preview slides are painted. */
#presentation { height:100%; }
.deck { position:absolute; top:env(safe-area-inset-top); bottom:env(safe-area-inset-bottom); left:0; right:0; overflow:hidden; touch-action:none; touch-action:pinch-zoom; }
.slide { position:absolute; inset:0; visibility:hidden; opacity:0; pointer-events:none; background:var(--paper) url("assets/webp/paper.webp") center/cover; outline:none; overflow:hidden; transform-origin:center; }
.slide.is-active,.slide.is-preview { visibility:visible; }
.slide.is-active { opacity:1; z-index:2; pointer-events:auto; }
.slide.is-preview { z-index:1; }
.deck.is-moving .slide { will-change:opacity,transform; }
.deck.is-moving .slide.is-preview > .slide-scroll { will-change:transform,opacity; }
.deck.is-moving { user-select:none; }
/* This is the nearest scroll container to the finger. Reserve vertical gestures
   here as well as on the deck; Chrome otherwise starts native pan and cancels
   our pointer stream. Overflow scrolling is handled by consumeScroll in JS. */
.slide-scroll { width:min(1160px,90vw); height:100%; margin:0 auto; padding:28px 8px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:none; touch-action:pinch-zoom; scrollbar-width:thin; scrollbar-color:#abb097 transparent; }

/* 01 */
.welcome-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:9%; position:relative; padding-right:50px; }
.welcome-copy { padding-left:8%; }
.names { color:var(--rose); font-size:clamp(68px,9vw,132px); line-height:.82; margin:24px 0 0; }
.names span { font-size:.42em; color:var(--olive); }
.names br { display:none; }
.welcome-line { font-size:clamp(24px,2.6vw,38px); line-height:1.1; margin:0 0 18px; }
.welcome-note { font-size:18px; line-height:1.5; margin:0 0 20px; }
.welcome-photo { position:relative; height:min(560px,calc(100dvh - 240px)); max-width:92%; margin:0; padding:12px 12px 44px; background:#faf7f0; box-shadow:8px 12px 24px #3d36231a; transform:rotate(2deg); justify-self:center; aspect-ratio:.75; }
.welcome-photo > img:first-child { width:100%; height:100%; object-fit:cover; }
.welcome-photo figcaption { position:absolute; bottom:7px; left:0; width:100%; text-align:center; font-size:28px; color:var(--brown,#785840); }
.welcome-photo .photo-flower { position:absolute; right:-12%; bottom:-2%; width:28%; transform:rotate(15deg); pointer-events:none; }
.vertical-note { position:absolute; right:0; top:50%; writing-mode:vertical-rl; transform:translateY(-50%); font:9px var(--sans); letter-spacing:.2em; text-transform:uppercase; }

/* Full-bleed photographic cover, with live text rather than text baked into the photo. */
#welcome { background:#597a89; }
.slide-scroll.welcome-cover { position:relative; width:100%; height:100%; padding:0; overflow:hidden; color:#fffaf0; isolation:isolate; }
/* The couple's midpoint is 43.5% across the current source photograph.
   Anchor that point to the viewport center; retain enough width to cover both edges. */
.hero-background { position:absolute; top:0; left:50%; width:max(118%,150dvh); height:100%; max-width:none; transform:translateX(-43.5%); object-fit:cover; object-position:50% 70%; z-index:-2; pointer-events:none; opacity:0; transition:opacity .8s ease; }
.hero-background.is-loaded { opacity:1; }
.hero-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(20,41,49,.10),rgba(20,41,49,.18) 40%,transparent 62%,rgba(14,25,25,.28)); pointer-events:none; }
.hero-monogram { position:absolute; top:7%; left:50%; transform:translateX(-50%); width:76px; height:96px; border:1px solid #f5efdb; border-radius:50%; background:#f4f0dfed; display:flex; align-items:center; justify-content:center; color:#667048; box-shadow:0 0 0 3px #f4f0df55; font:35px var(--script); }
.hero-monogram::before { content:""; position:absolute; inset:-7px; border:3px dotted #f6f0dc; border-radius:50%; }
.hero-monogram::after { content:""; position:absolute; inset:5px; border:1px solid #a8ac8c88; border-radius:50%; }
.hero-monogram i { font-size:16px; margin:12px -3px 0; }
.hero-copy { position:absolute; top:7%; left:5%; width:90%; text-align:center; text-shadow:0 2px 18px #263f4b35; }
.hero-eyebrow:empty { display:none; }
.hero-eyebrow { font:500 10px/1.6 var(--sans); text-transform:uppercase; letter-spacing:.28em; margin:0 0 16px; }
.hero-names { font-size:clamp(78px,10.5vw,176px); line-height:1.16; font-weight:400; white-space:nowrap; margin:0; }
.hero-names > span { font-size:.72em; }
.hero-names > .hero-person { font-size:1em; }
.hero-details { display:flex; align-items:center; justify-content:center; gap:24px; margin:23px 0 0; font:500 clamp(10px,1.05vw,17px)/1.6 var(--sans); letter-spacing:.23em; text-transform:uppercase; }
.hero-details i { width:1px; height:16px; background:currentColor; opacity:.8; }
.hero-enter { position:absolute; bottom:max(20px,4%); left:50%; transform:translateX(-50%); border:0; background:none; color:inherit; padding:12px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; font:500 9px/1.5 var(--sans); text-transform:uppercase; letter-spacing:.2em; text-shadow:0 1px 5px #172e35; }
.hero-arrow { display:grid; place-items:center; width:38px; height:38px; border:1px solid #fff9e899; border-radius:50%; font:23px var(--sans); }
@media (min-aspect-ratio:16/9) {
  .hero-monogram { top:5%; width:62px; height:78px; font-size:29px; }
  .hero-copy { top:6%; }
  .hero-names { font-size:clamp(72px,9vw,160px); }
}
@media (max-width:720px) {
  .hero-background { object-position:50% 100%; }
  .hero-monogram { top:6%; width:59px; height:76px; font-size:29px; }
  .hero-copy { top:9%; left:5%; width:90%; }
  .hero-eyebrow { font-size:8px; letter-spacing:.14em; margin-bottom:13px; }
  .hero-names { font-size:clamp(30px,9vw,64px); }
  .hero-details { flex-direction:column; gap:5px; margin-top:19px; font-size:9px; letter-spacing:.16em; }
  .hero-details i { display:none; }
  .hero-enter { bottom:14px; gap:7px; font-size:8px; }
  .hero-arrow { width:30px; height:30px; font-size:20px; }
}
@media (max-height:560px) {
  .hero-monogram { top:20px; width:42px; height:54px; font-size:23px; }
  .hero-copy { top:5%; }
  .hero-eyebrow { display:none; }
  .hero-names { font-size:clamp(44px,8vw,100px); }
  .hero-details { margin-top:8px; }
  .hero-enter { bottom:8px; }
}

/* 02 */
.invitation-layout { display:grid; grid-template-columns:1.6fr 1fr; gap:7%; align-items:center; }
.invitation-sheet { position:relative; padding:30px 20px; text-align:center; border:1px solid var(--line); outline:1px solid var(--line); outline-offset:-7px; background:#ffffff36; }
.invitation-flower { position:absolute; width:66px; left:-28px; top:-12px; transform:rotate(-23deg); pointer-events:none; }
.invitation-sheet .section-script { font-size:clamp(42px,5vw,66px); margin:12px 0 0; }
.invitation-line { margin:0 0 8px; font-size:17px; }
.couple-line { margin:0; font-size:35px; letter-spacing:.02em; }
.couple-line span { color:var(--rose); }
.families { display:grid; grid-template-columns:1fr 26px 1fr; gap:10px; align-items:center; padding:20px 0; }
.families strong { display:block; font-size:18px; font-weight:500; margin-top:6px; }
.families p:not(.eyebrow) { font-size:15px; margin:4px 0 0; }
.family-divider { color:var(--rose); }
.date-strip { display:flex; align-items:center; justify-content:center; gap:28px; }
.date-strip > span { font-size:16px; line-height:1.3; min-width:72px; }
.date-strip > strong { display:flex; flex-direction:column; font-size:68px; line-height:.9; color:var(--rose); font-weight:400; border-left:1px solid var(--line); border-right:1px solid var(--line); padding:0 24px; }
.date-strip > strong span { font:9px var(--sans); text-transform:uppercase; letter-spacing:.12em; margin-top:9px; }
.invitation-sheet .small-note { margin:20px 0 0; font-size:14px; }
.venue-card h3 { font-size:clamp(32px,4vw,57px); font-weight:400; line-height:1; margin:12px 0; }
.venue-card h3 em { font-family:var(--script); color:var(--rose); font-size:1.15em; }
.venue-card > p:not(.eyebrow) { margin:8px 0 16px; font-size:18px; }
.map-preview { position:relative; width:100%; padding:0; border:1px solid var(--line); background:#e2e4d7; overflow:hidden; }
.map-preview svg { width:100%; height:105px; display:block; stroke:#faf7ef; fill:none; stroke-width:7; }
.map-preview .map-water { fill:#b4c5ba; stroke:none; }
.map-preview svg path:nth-last-child(2) { fill:var(--rose); stroke:none; }
.map-preview svg circle { fill:#faf7ef; stroke:none; }
.map-preview > span { display:flex; justify-content:space-between; padding:10px 14px; background:#f8f5ed; font:10px var(--sans); }
.venue-times { display:grid; gap:5px; margin:14px 0; }
.venue-times p { margin:0; font-size:17px; }
.venue-times b { font-weight:500; color:var(--rose); padding-right:15px; }

/* A naturally soft photograph, shaded without a costly animated blur layer. */
#invitation { background:linear-gradient(180deg,rgba(13,25,34,.2),rgba(13,25,34,.15) 48%,rgba(13,25,34,.3)),url("assets/webp/invitation-wide.webp") center/cover no-repeat; background-color:#4a6070; color:#f5edda; }
@media (orientation:portrait) {
  #invitation { background-image:linear-gradient(180deg,rgba(13,25,34,.2),rgba(13,25,34,.15) 48%,rgba(13,25,34,.3)),url("assets/webp/invitation-portrait.webp"); background-position:center,center center; }
}
.slide-scroll.invitation-full { width:100%; height:100%; padding:18px; }
.formal-invitation { position:relative; min-height:100%; padding:42px clamp(28px,6vw,100px); display:flex; flex-direction:column; justify-content:space-evenly; gap:20px; text-align:center; background:transparent; text-shadow:0 1px 5px #07141b66; }
.formal-invitation { border:0; }
.inv-families { display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; width:min(900px,100%); margin:0 auto; gap:20px; }
.inv-kicker { font:500 10px/1.6 var(--sans); text-transform:uppercase; letter-spacing:.2em; margin:0 0 9px; }
.inv-families p:not(.inv-kicker) { margin:0; font-size:18px; line-height:1.6; }
.inv-families strong { font-weight:500; }
.inv-family-flower { color:#c7b66e; font-size:38px; }
.inv-announcement h2 { margin:0; font:400 15px/1.7 var(--sans); text-transform:uppercase; letter-spacing:.15em; }
.inv-announcement > .inv-kicker,
.inv-announcement > h2 { position:relative; top:clamp(-22px,-2vh,-10px); }
.inv-announcement > .inv-kicker { position:relative; top:clamp(-22px,-2vh,-10px); font-size:12px; text-align:center; }
.inv-couple { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:22px; text-align:center; }
.inv-couple p { margin:0; font-size:clamp(57px,6.6vw,99px); line-height:1.2; color:#fff3d6; }
.inv-couple div > span { display:block; margin-top:6px; font:400 9px var(--sans); text-transform:uppercase; letter-spacing:.2em; }
.inv-amp { font-size:28px; line-height:1; color:#c7b66e; }
.inv-events { display:grid; grid-template-columns:1fr 1fr; width:min(900px,100%); margin:0 auto; align-items:center; }
.inv-ceremony { padding:5px 30px; }
.inv-reception { border-left:1px solid #c7b66e55; padding:5px 30px; }
.inv-time { font-size:clamp(24px,2.4vw,35px); font-weight:500; line-height:1.3; margin:0; font-variant-numeric:lining-nums; }
.inv-time span { color:#c7b66e88; font-size:.7em; padding:0 12px; }
.inv-divider { display:flex; align-items:center; justify-content:center; gap:14px; margin:18px auto; color:#c7b66e; }
.inv-divider::before,.inv-divider::after { content:""; height:1px; width:50px; background:#c7b66e66; }
.inv-welcome { margin:0; font-size:18px; line-height:1.45; }
.inv-lunar { font-size:15px; margin:7px 0 13px; font-style:normal; }
.inv-reception h3 { font-size:46px; font-weight:400; margin:0 0 5px; line-height:1.1; color:#fff3d6; }
.inv-reception address { font-style:normal; font-size:14px; line-height:1.5; }
.inv-map { display:inline-flex; align-items:center; justify-content:center; text-align:center; min-height:36px; margin-top:10px; padding:6px 14px; border:1px solid #c7b66e88; background:transparent; color:inherit; border-radius:20px; font:500 9px/1.4 var(--sans); text-transform:uppercase; letter-spacing:.12em; }
.inv-map:hover { background:#c7b66e18; }
.inv-map:focus-visible { outline-color:#efdfa6; }
.inv-closing { font-size:clamp(22px,2.3vw,32px); line-height:1.3; margin:0; color:#e9dbb6; }
@media (max-width:720px) {
  .slide-scroll.invitation-full { padding:10px; }
  .formal-invitation { padding:32px 20px; gap:16px; }
  .inv-families { grid-template-columns:1fr 1fr; gap:12px; }
  .inv-family-flower { display:none; }
  .inv-families .inv-kicker { font-size:8px; margin-bottom:4px; }
  .inv-families p:not(.inv-kicker) { font-size:13px; line-height:1.55; }
  .inv-kicker { font-size:8px; letter-spacing:.15em; margin-bottom:5px; }
  .inv-announcement h2 { font-size:9px; letter-spacing:.09em; }
  .inv-couple { flex-direction:column; gap:5px; margin-top:12px; }
  .inv-couple p { font-size:clamp(31px,8.36vw,54px); line-height:1.25; }
  .inv-couple div > span { font-size:7px; margin-top:4px; }
  .inv-amp { font-size:23px; line-height:1; }
  .inv-events { grid-template-columns:1fr; gap:15px; }
  .inv-ceremony { padding:0; }
  .inv-reception { border-left:0; border-top:1px solid #c7b66e44; padding:13px 0 0; }
  .inv-time { font-size:25px; }
  .inv-time span { padding:0 9px; }
  .inv-divider { margin:8px auto; font-size:12px; }
  .inv-welcome { font-size:14px; }
  .inv-lunar { font-size:12px; margin:4px 0 8px; }
  .inv-reception h3 { font-size:36px; margin-bottom:4px; }
  .inv-reception address { font-size:12px; }
  .inv-map { font-size:8px; min-height:34px; margin-top:8px; padding:6px 12px; }
  .inv-closing { font-size:20px; }
}
@media (min-width:480px) and (max-width:720px) {
  .inv-couple { gap:6px; }
  .inv-couple p { font-size:clamp(42px,8.36vw,54px); }
}
@media (max-height:720px) {
  .formal-invitation { gap:12px; padding-top:28px; padding-bottom:28px; }
  .inv-couple { margin-top:10px; }
  .inv-closing { font-size:20px; }
}

/* Venue video stays behind the gesture/scroll surface and never captures input. */
#venue { background:#18272d; color:#fff3de; }
.venue-film { position:absolute; inset:0; pointer-events:none; overflow:hidden; background-size:cover; background-position:center; }
.venue-film video { width:100%; height:100%; object-fit:cover; opacity:0; }
.venue-film video.has-video-frame { opacity:1; }
.venue-film::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#101e281a,#101e2859 55%,#101e2873); }
.slide-scroll.venue-layout { position:relative; width:100%; padding:32px 24px; display:flex; }
.venue-content { width:min(1060px,100%); position:relative; margin:auto; text-align:center; padding:40px 24px; border:1px solid #deca9270; text-shadow:0 2px 6px #000c,0 1px 2px #0009; }
.venue-eyebrow { font:500 10px/1.6 var(--sans); text-transform:uppercase; letter-spacing:.3em; margin:0; }
.venue-flourish { margin:22px 0 12px; color:#dfca94; font-size:24px; }
.venue-content h2 { font-size:clamp(64px,9vw,124px); line-height:1.15; margin:0 0 20px; }
.venue-date { font:400 13px/1.8 var(--sans); letter-spacing:.14em; margin:0 0 22px; }
.venue-date span { margin:0 12px; color:#dfca94; }
.venue-content address { font:400 16px/1.7 var(--serif); font-style:normal; }
.venue-content .inv-map { margin-top:22px; }
.venue-note { font-size:30px; margin:32px 0 0; }
@media (max-width:720px) {
  .slide-scroll.venue-layout { padding:20px 16px; }
  .venue-content { padding:42px 18px; }
  .venue-content address { font-size:17px; }
  .venue-date { font-size:11px; }
  .venue-note { font-size:25px; }
}

/* Album becomes a long editorial contact sheet instead of a fitted card grid. */
#album { background:linear-gradient(90deg,#25312488,#29332222 65%),url("assets/webp/album-background.webp") center/cover; color:#fff6e5; }
.slide-scroll.album-split { width:100%; height:100%; padding:0 clamp(8px,2vw,32px) clamp(28px,5vw,72px); display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2vw,28px); }
.album-lyrics { flex:0 0 auto; min-height:min(72dvh,720px); width:min(760px,100%); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:clamp(56px,9dvh,110px) 12px 32px; text-shadow:0 2px 8px #18261966; }
.album-lyrics h2 { font-size:clamp(40px,4.8vw,78px); line-height:1.2; margin:0 0 30px; }
.album-verse { font-size:clamp(16px,1.4vw,23px); line-height:2; margin:0; }
.album-view-hint { font:500 10px/1.6 var(--sans); letter-spacing:.08em; margin:32px 0 0; min-height:44px; padding:12px 24px; border:1px solid #fff2d5a6; border-radius:0; color:inherit; background:#22312633; transition:background .2s ease; }
.album-view-hint:hover { background:#fff2d51f; }
.album-view-hint:focus-visible { outline:2px solid #fff2d5; outline-offset:4px; }
.album-mosaic { flex:0 0 auto; width:min(1040px,94%); min-width:0; aspect-ratio:12/23; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(23,minmax(0,1fr)); gap:clamp(7.8px,.91vw,13px); margin-block:16px 32px; }
.memory-stamp { display:block; min-width:0; width:100%; height:auto; padding:0; border:0; background:transparent; overflow:hidden; border-radius:0; }
/* Straight outer edges; staggered interior seams create varied photo shapes. */
.album-mosaic .memory-stamp { height:100%; min-height:0; }
.album-mosaic .memory-stamp:nth-child(1) { grid-area:1/1/8/8; }
.album-mosaic .memory-stamp:nth-child(2) { grid-area:1/8/11/13; }
.album-mosaic .memory-stamp:nth-child(3) { grid-area:8/1/18/8; }
.album-mosaic .memory-stamp:nth-child(4) { grid-area:11/8/18/13; }
.album-mosaic .memory-stamp:nth-child(5) { grid-area:18/1/24/13; }
.memory-stamp img { width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; opacity:0; transform:scale(1.001); transition:opacity .7s ease,transform .45s cubic-bezier(.16,1,.3,1); }
.memory-stamp img.is-loaded { opacity:1; }
.memory-stamp:hover img.is-loaded { transform:scale(1.018); }
.memory-stamp.image-failed { position:relative; background:#52624a; }
.memory-stamp.image-failed::after { content:"Ảnh chưa tải được · Nhấn để xem"; position:absolute; inset:12px; display:grid; place-items:center; color:#fff6df; font:14px/1.5 var(--serif); text-align:center; }
.welcome-cover.image-failed { background:linear-gradient(160deg,#8197a1,#344e55); }
.memory-stamp[hidden] { display:none; }
.memory-stamp:focus-visible { outline:2px solid #fff6df; outline-offset:3px; }
@media (max-width:720px) {
  #album { background-image:linear-gradient(#25312477,#29332222),url("assets/webp/album-background.webp"); }
  .slide-scroll.album-split { gap:12px; padding:0 6px 28px; }
  .album-lyrics { min-height:72dvh; padding:48px 14px 24px; }
  .album-lyrics h2 { font-size:clamp(34px,8.7vw,48px); margin-bottom:12px; }
  .album-verse { font-size:clamp(15px,3.9vw,19px); line-height:1.8; }
  .album-view-hint { font-size:9px; margin-top:14px; }
  .album-mosaic { gap:6.5px; }
}
@media (max-height:480px) and (orientation:landscape) {
  .slide-scroll.album-split { padding-inline:8px; gap:8px; }
  .album-lyrics { min-height:100dvh; padding:24px 12px; }
  .album-lyrics h2 { font-size:34px; margin-bottom:10px; }
  .album-verse { font-size:15px; line-height:1.7; }
  .album-view-hint { margin-top:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .memory-stamp img { transition:opacity .12s linear; transform:none; }
  .memory-stamp:hover img.is-loaded { transform:none; }
}

/* Legacy album styles, unused by the story layout. */
.album-layout { display:flex; flex-direction:column; align-items:center; text-align:center; }
.album-heading .section-script { margin:8px 0; }
.album-heading > p:last-child { margin:0; font-size:17px; }
.album-stage { position:relative; width:min(850px,100%); flex:1; min-height:200px; max-height:440px; display:flex; align-items:center; justify-content:center; gap:5%; padding:22px; }
.album-photo { border:0; background:#faf7f0; padding:10px 10px 36px; position:relative; box-shadow:8px 12px 20px #463f2d1c; height:90%; max-width:55%; }
.album-photo img { width:100%; height:100%; object-fit:cover; }
.album-photo span { position:absolute; bottom:5px; left:0; width:100%; font-size:25px; }
.album-photo--one { aspect-ratio:1.2; transform:rotate(-5deg); height:76%; }
.album-photo--two { aspect-ratio:.75; transform:rotate(5deg); }
.album-butterfly { position:absolute; bottom:8%; left:45%; width:95px; pointer-events:none; }
.album-hint { margin:12px 0 0; font:10px var(--sans); color:var(--olive); }

/* 04 */
#rsvp { background:linear-gradient(90deg,#0f1b2559,#0f1b2526),url("assets/webp/rsvp.webp") right bottom/max(135vw,202.5dvh) auto no-repeat; color:#fff3de; --ink:#fff3de; --line:#fff3de66; --olive:#fff3de; --rose:#fff3de; }
#rsvp .rsvp-copy { text-shadow:0 2px 8px #0c182a99; }
#rsvp .rsvp-copy .section-script { font-size:clamp(76px,7.6vw,118px); line-height:1.05; }
#rsvp .rsvp-copy .small-note { font-size:clamp(20px,1.65vw,25px); line-height:1.55; }
#rsvp .rsvp-form { background:rgba(10,17,21,.65); border-color:#fff3de66; color:#fff3de; --ink:#fff3de; --line:#fff3de66; --olive:#fff3de; --rose:#fff3de; }
#rsvp input::placeholder,#rsvp textarea::placeholder { color:#f3e8d4b3; opacity:1; }
#rsvp .button { background:#f3e8d4; border-color:#f3e8d4; color:#273630; }
#rsvp .button:hover { background:#fff5e4; border-color:#fff5e4; }
#rsvp .button:focus-visible { outline:2px solid #fff3de; outline-offset:3px; }
@media (max-width:720px) {
  #rsvp { background-position:center,38% bottom; }
  #rsvp .rsvp-copy .section-script { font-size:clamp(52px,12vw,72px); }
}
.rsvp-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:8%; align-items:center; }
.rsvp-copy { position:relative; }
.rsvp-copy p { margin:15px 0; }
.rsvp-copy > img { height:140px; margin:20px 0 0 30px; transform:rotate(20deg); }
.rsvp-form { display:grid; grid-template-columns:1fr 1fr; gap:18px; border:1px solid var(--line); padding:32px; background:#ffffff40; }
.full { grid-column:1/-1; }
.field { min-width:0; display:flex; flex-direction:column; gap:7px; }
.field label,.choice-field legend { font:600 9px/1.5 var(--sans); text-transform:uppercase; letter-spacing:.1em; }
.field input,.field select,.field textarea { width:100%; min-height:42px; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:7px 0; font-size:18px; }
.field textarea { resize:vertical; max-height:130px; }
.choice-field { margin:0; padding:0; border:0; display:flex; flex-wrap:wrap; gap:12px; }
.choice-field legend { margin-bottom:10px; }
.choice-field label { display:flex; align-items:center; gap:6px; font-size:17px; cursor:pointer; }
.choice-field input { accent-color:var(--olive); width:17px; height:17px; }
.form-status { margin:0; min-height:17px; font-size:14px; line-height:1.3; }

/* 05 */
.thanks-layout { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.thanks-layout .section-script { margin:8px 0 10px; }
.thanks-message { margin:0 0 22px; font-size:18px; }
.gift-cards { display:flex; justify-content:center; gap:30px; }
.gift-card { width:210px; padding:18px 25px; border:1px solid var(--line); background:#ffffff40; }
.gift-card h3 { color:var(--rose); font-size:40px; line-height:1; margin:7px 0 14px; }
.qr-placeholder { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #9b9f88; color:var(--olive); background:linear-gradient(45deg,#e7e8dd77,#faf8f377); }
.qr-placeholder > span { font-size:32px; line-height:1; color:var(--rose); }
.qr-placeholder p { font:10px/1.8 var(--sans); margin:8px 0 0; }
.qr-placeholder small { font-size:9px; opacity:.75; }
.closing-script { font-size:35px; margin:20px 0 0; color:var(--rose); }

/* A single gift frame and a personal closing letter. */
#thanks { background:linear-gradient(90deg,#17231988,#17231933),url("assets/webp/thanks.webp") center/cover no-repeat; color:#fff1d4; }
.slide-scroll.thanks-finale { width:min(1280px,94%); display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr auto; align-items:center; gap:20px 8%; padding:40px 24px 24px; }
.thanks-letter { text-shadow:0 2px 6px #14211877; }
.thanks-letter .eyebrow { color:#ead9ad; }
.thanks-letter h2 { font-size:clamp(48px,5.6vw,84px); line-height:1.1; margin:18px 0 26px; }
.thanks-letter > p:not(.eyebrow):not(.thanks-signature) { font-size:clamp(16px,1.35vw,20px); line-height:1.7; margin:0 0 16px; }
.thanks-letter .thanks-signature { font-size:clamp(34px,3.3vw,50px); line-height:1.2; margin:22px 0 0; }
.thanks-gift { text-align:center; text-shadow:0 2px 5px #14211888; }
.thanks-gift > p { font-size:19px; line-height:1.6; margin:0 0 24px; }
.thanks-qr { width:min(240px,80%); aspect-ratio:1; margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #e8d8b5; background:#f8f2e4ed; color:#52603e; text-shadow:none; padding:14px; }
.thanks-qr > span { font-size:42px; }
.thanks-qr p { margin:8px 0 0; font:12px/1.7 var(--sans); }
.thanks-qr small { display:block; font-size:9px; opacity:.8; margin-top:5px; }
.thanks-home { grid-column:1/-1; justify-self:center; color:#fff1d4; border-color:#fff1d466; }
@media (max-width:720px) {
  .slide-scroll.thanks-finale { width:100%; grid-template-columns:1fr; grid-template-rows:auto auto auto; align-content:start; gap:24px; padding:30px 24px; text-align:center; }
  .thanks-letter h2 { font-size:49px; margin:14px 0 20px; }
  .thanks-letter > p:not(.eyebrow):not(.thanks-signature) { font-size:17px; line-height:1.55; margin-bottom:12px; }
  .thanks-letter .thanks-signature { font-size:34px; margin-top:18px; }
  .thanks-gift > p { font-size:16px; margin-bottom:16px; }
  .thanks-qr { width:170px; }
  #thanks { background-position:64% center; }
}

/* Dialogs deliberately own their input; deck navigation pauses while open. */
dialog { border:1px solid var(--line); background:var(--paper); color:var(--ink); max-width:90vw; max-height:90dvh; padding:30px; }
dialog::backdrop { background:#22291cce; }
.dialog-close { position:absolute; z-index:3; top:10px; right:12px; width:36px; height:36px; border:0; background:var(--paper); font:30px var(--sans); }
.lightbox { width:min(900px,92vw); }
.lightbox figure { margin:10px 0; text-align:center; }
.lightbox figure img { max-height:65dvh; width:100%; object-fit:contain; }
.lightbox figcaption { margin-top:12px; }
.lightbox-controls { display:flex; align-items:center; justify-content:center; gap:24px; font:12px var(--sans); }
.lightbox-controls button { width:44px; height:40px; background:none; border:1px solid var(--line); }
/* On-demand WebGL viewer; the HTML photo remains the accessible fallback. */
dialog.lightbox { --depth-color:#53645a; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; color:#fff4dd; background:#172121; touch-action:none; overscroll-behavior:none; }
.lightbox::before { content:""; position:absolute; inset:0; pointer-events:none; background-color:var(--depth-color); background-image:radial-gradient(ellipse at 50% 42%,transparent,#101716df); opacity:.95; transition:background-color 600ms; }
.depth-canvas { position:absolute; inset:0; width:100%; height:100%; }
.lightbox figure { position:absolute; inset:12% 12% 18%; margin:0; display:grid; place-items:center; pointer-events:none; }
.lightbox figure img { max-height:65dvh; max-width:100%; object-fit:contain; }
.lightbox.depth-fallback figure { perspective:900px; }
.lightbox.depth-fallback figure img { animation:depth-fallback-in .7s cubic-bezier(.2,.8,.2,1) both; transform-origin:center; }
@keyframes depth-fallback-in { from { opacity:0; transform:perspective(900px) rotateY(18deg) rotateX(5deg) translateZ(-80px) scale(.86); } to { opacity:1; transform:perspective(900px) rotateY(0) rotateX(0) translateZ(0) scale(1); } }
.lightbox.depth-ready figure img { opacity:0; }
.lightbox figcaption { position:fixed; left:15%; right:15%; bottom:max(94px,calc(env(safe-area-inset-bottom) + 78px)); margin:0; font:400 16px/1.5 var(--serif); text-align:center; letter-spacing:.05em; }
.lightbox .dialog-close { top:max(18px,env(safe-area-inset-top)); right:20px; width:44px; height:44px; color:#fff4dd; background:#ffffff0f; border:1px solid #ffffff30; border-radius:50%; }
.lightbox-controls { position:absolute; z-index:2; bottom:max(28px,env(safe-area-inset-bottom)); left:0; right:0; gap:28px; }
.lightbox-controls button { border:1px solid #fff4dd55; border-radius:50%; width:44px; height:44px; color:inherit; }
.lightbox-controls button:hover { background:#fff4dd19; }
.lightbox-controls button:focus-visible,.lightbox .dialog-close:focus-visible { outline:2px solid #fff4dd; }
.depth-hint { position:absolute; top:max(32px,env(safe-area-inset-top)); left:24px; margin:0; font:10px/1.5 var(--sans); letter-spacing:.1em; opacity:.7; pointer-events:none; }
@media (max-width:720px) { .depth-hint { max-width:65%; font-size:9px; } .lightbox figure { inset:14% 6% 20%; } }
@media (prefers-reduced-motion:reduce) { .lightbox::before { transition:none; } }
.map-dialog { width:680px; }
.map-dialog h2 { font-size:40px; margin:10px 0; }
.map-dialog p { font-size:17px; }
.map-dialog iframe { width:100%; height:40dvh; border:0; margin-bottom:14px; }
.noscript { position:fixed; z-index:9999; inset:0; display:grid; place-content:center; padding:25px; background:var(--paper); }

@media (min-width:1000px) and (max-height:780px) {
  .slide-scroll { padding-top:20px; padding-bottom:20px; }
  .invitation-sheet { padding:20px 15px; }
  .families { padding:14px 0; }
  .rsvp-form { padding:24px; gap:14px; }
  .rsvp-copy > img { height:85px; margin-top:10px; }
  .section-script { font-size:64px; }
  .thanks-message { margin-bottom:14px; }
  .gift-card { width:180px; padding:12px 20px; }
  .closing-script { margin-top:10px; }
}
@media (max-width:720px) {
  body { font-size:17px; }
  .slide-scroll { width:100%; padding:18px 24px; }
  .section-script { font-size:46px; }
  .opening__copy h1 { font-size:clamp(56px,17vw,100px); }
  .welcome-layout { display:flex; flex-direction:column; gap:14px; justify-content:center; }
  .welcome-copy { padding:0; text-align:center; flex:0 0 auto; }
  .welcome-copy .eyebrow { font-size:9px; }
  .names { font-size:63px; line-height:1; margin:6px 0 0; }
  .names br { display:none; }
  .fine-rule { margin:10px auto; width:30px; }
  .welcome-line { font-size:22px; margin:0 0 6px; }
  .welcome-line br { display:none; }
  .welcome-note { font-size:15px; margin:0 0 3px; }
  .welcome-note br { display:none; }
  .welcome-copy .text-link { font-size:9px; padding:7px 0; }
  .welcome-photo { height:auto; min-height:0; flex:0 1 330px; width:min(250px,65vw); aspect-ratio:auto; padding:8px 8px 33px; margin:0; }
  .welcome-photo figcaption { font-size:23px; bottom:4px; }
  .vertical-note { display:none; }
  .invitation-layout { display:flex; flex-direction:column; justify-content:center; gap:14px; padding:18px 24px; }
  .invitation-sheet { width:100%; padding:18px 10px 14px; }
  .invitation-sheet .section-script { font-size:43px; margin:8px 0 0; }
  .invitation-flower { width:45px; left:-20px; }
  .invitation-line { font-size:14px; margin:0 0 3px; }
  .couple-line { font-size:26px; }
  .families { padding:11px 0; gap:2px; grid-template-columns:1fr 18px 1fr; }
  .families .eyebrow { font-size:8px; }
  .families strong { font-size:14px; margin-top:3px; }
  .families p:not(.eyebrow) { font-size:12px; }
  .date-strip { gap:12px; }
  .date-strip > span { min-width:50px; font-size:13px; }
  .date-strip > strong { font-size:45px; padding:0 18px; }
  .date-strip > strong span { font-size:8px; margin-top:6px; }
  .invitation-sheet .small-note { font-size:12px; margin:10px 0 0; }
  .venue-card { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:5px 14px; align-items:center; }
  .venue-card > .eyebrow { grid-column:1/-1; font-size:8px; }
  .venue-card h3 { font-size:27px; margin:0; grid-column:1; }
  .venue-card h3 br { display:none; }
  .venue-card > p:not(.eyebrow) { font-size:13px; margin:0; grid-column:1; }
  .map-preview { grid-column:2; grid-row:2/5; }
  .map-preview svg { height:61px; }
  .map-preview > span { padding:7px; font-size:9px; }
  .venue-times { grid-column:1; gap:1px; margin:3px 0; }
  .venue-times p { font-size:12px; }
  .venue-times b { padding-right:5px; }
  .venue-card .text-link { grid-column:1/-1; justify-self:start; padding:5px 0; font-size:8px; }
  .album-layout { padding-top:35px; }
  .album-heading > p:last-child { font-size:15px; }
  .album-stage { max-height:none; min-height:260px; flex:1; display:block; padding:15px 0; }
  .album-photo { position:absolute; max-width:none; }
  .album-photo--one { width:72%; height:48%; top:6%; left:0; }
  .album-photo--two { width:52%; height:62%; bottom:2%; right:0; }
  .album-photo span { font-size:22px; }
  .album-butterfly { width:70px; left:15%; bottom:10%; }
  .album-hint { font-size:9px; margin:6px 0; }
  .rsvp-layout { display:flex; flex-direction:column; gap:16px; justify-content:center; }
  .rsvp-copy { width:100%; text-align:center; }
  .rsvp-copy .section-script { font-size:45px; margin:8px 0 6px; }
  .rsvp-copy .section-script br { display:none; }
  .rsvp-copy p { font-size:15px; margin:5px 0; }
  .rsvp-copy p br { display:none; }
  .rsvp-copy .small-note,.rsvp-copy > img { display:none; }
  .rsvp-form { width:100%; gap:13px 12px; padding:20px; }
  .field input,.field select,.field textarea { font-size:16px; min-height:38px; padding:6px 0; }
  .choice-field { gap:6px; flex-direction:column; }
  .choice-field label { font-size:15px; }
  .choice-field legend { margin-bottom:6px; }
  .form-status { font-size:12px; }
  .button { font-size:17px; padding:10px 16px; }
  .thanks-layout .section-script { font-size:48px; }
  .thanks-message { font-size:16px; margin:8px 0 20px; }
  .gift-cards { gap:14px; width:100%; }
  .gift-card { flex:1; width:auto; padding:16px 12px; min-width:0; }
  .gift-card .eyebrow { font-size:8px; }
  .gift-card h3 { font-size:34px; }
  .closing-script { font-size:28px; margin:22px 0 10px; }
  dialog { padding:22px 16px; }
}
/* Short screens and keyboard/zoom can scroll inside the current card, never the document. */
@media (max-height:680px) {
  .slide-scroll { justify-content:flex-start; }
  .welcome-layout { align-items:center; }
  .welcome-photo { flex:0 0 210px; height:210px; width:170px; }
  .album-stage { min-height:260px; flex-shrink:0; }
  .invitation-layout,.rsvp-layout { gap:12px; }
}
/* Mobile composition: readable text, intentional line breaks and photo focal points. */
@media (max-width:720px) and (orientation:portrait) {
  .hero-copy { top:clamp(64px,13dvh,130px); left:6%; width:88%; }
  .hero-names { font-size:clamp(62px,17vw,98px); line-height:1.06; white-space:normal; }
  .hero-names > .hero-person { display:block; white-space:nowrap; }
  .hero-names > .hero-amp { display:block; font-size:.4em; line-height:1; margin:4px 0; }
  .hero-details { font-size:13px; letter-spacing:.18em; margin-top:22px; }
  .hero-background { object-position:50% 100%; }
  .hero-enter { bottom:max(20px,4dvh); }
  .hero-arrow { width:40px; height:40px; font-size:25px; }
  #rsvp { background-size:auto,cover; background-position:center,58% bottom; }
  #rsvp .rsvp-layout { width:100%; max-width:500px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-content:safe center; justify-content:normal; gap:24px; padding:36px 24px; }
  #rsvp .rsvp-copy .section-script { font-size:clamp(48px,13vw,66px); line-height:1.08; margin:10px 0 0; }
  #rsvp .rsvp-copy .section-script br { display:block; }
  #rsvp .rsvp-copy .eyebrow { font-size:10px; letter-spacing:.16em; }
  #rsvp .rsvp-form { min-width:0; padding:22px; gap:16px; }
  #rsvp .field label,#rsvp .choice-field legend { font-size:10px; }
  #rsvp .field input,#rsvp .field textarea { font-size:20px; line-height:1.4; }
  #rsvp .choice-field label { font-size:19px; }
  #rsvp .button { font-size:20px; min-height:46px; }
  #rsvp .form-status:empty { display:none; }
  .formal-invitation { padding:30px 16px; gap:24px; }
  .inv-families p:not(.inv-kicker) { font-size:16px; line-height:1.45; }
  .inv-families .inv-kicker,.inv-kicker { font-size:10px; }
  .inv-announcement h2 { font-size:11px; line-height:1.7; }
  .inv-couple p { font-size:clamp(31px,8vw,49px); }
  .inv-closing { font-size:25px; }
  .venue-content { padding:30px 16px; }
  .inv-welcome { font-size:17px; }
  .inv-lunar { font-size:15px; }
  .inv-time { font-size:clamp(22px,6vw,28px); }
  .inv-map { font-size:10px; min-height:40px; }
  .album-verse { font-size:clamp(18px,4.6vw,22px); }
  .album-view-hint { font-size:11px; }
  .thanks-letter > p:not(.eyebrow):not(.thanks-signature) { font-size:19px; line-height:1.55; }
  .thanks-gift > p { font-size:18px; }
}
@media (max-width:720px) and (max-height:650px) and (orientation:portrait) {
  .hero-copy { top:8%; }
  .hero-names { font-size:clamp(56px,15.5vw,77px); }
  .hero-details { margin-top:14px; }
  #rsvp .rsvp-layout { padding:22px 20px; gap:16px; }
  #rsvp .rsvp-copy .section-script { font-size:48px; }
}
/* Compact mobile cards leave the photograph visible and the closing QR in view. */
@media (max-width:720px) and (orientation:portrait) {
  #rsvp .rsvp-layout { max-width:420px; align-content:start; padding:clamp(20px,4dvh,36px) 24px 24px; gap:14px; }
  #rsvp .rsvp-copy .section-script { font-size:clamp(38px,10.5vw,50px); line-height:1.04; margin:6px 0 0; }
  #rsvp .rsvp-copy .eyebrow { font-size:9px; }
  #rsvp .rsvp-form { padding:16px 18px; gap:11px; }
  #rsvp .field label,#rsvp .choice-field legend { font-size:9px; }
  #rsvp .field { gap:4px; }
  #rsvp .field input,#rsvp .field textarea { font-size:17px; line-height:1.3; min-height:34px; padding:5px 0; }
  #rsvp .field textarea { height:48px; min-height:48px; }
  #rsvp .choice-field { gap:4px; }
  #rsvp .choice-field label { font-size:17px; min-height:28px; }
  #rsvp .choice-field legend { margin-bottom:4px; }
  #rsvp .button { font-size:17px; min-height:42px; padding:8px 12px; }
  .slide-scroll.thanks-finale { padding:20px 24px 16px; gap:12px; align-content:safe center; }
  .thanks-letter .eyebrow { font-size:8px; }
  .thanks-letter h2 { font-size:clamp(36px,10vw,46px); margin:8px 0 12px; }
  .thanks-letter > p:not(.eyebrow):not(.thanks-signature) { font-size:15px; line-height:1.4; margin-bottom:8px; }
  .thanks-letter .thanks-signature { font-size:29px; margin:10px 0 0; }
  .thanks-gift > p { font-size:12px; line-height:1.35; margin:0 auto 9px; max-width:310px; }
  .thanks-qr { width:110px; padding:8px; }
  .thanks-qr > span { font-size:26px; line-height:1; }
  .thanks-qr p { font-size:9px; margin-top:4px; }
  .thanks-qr small { font-size:8px; line-height:1.3; margin-top:3px; }
  .thanks-home { font-size:8px; padding:5px 0; }
}
@media (max-width:720px) and (max-height:650px) and (orientation:portrait) {
  .slide-scroll.thanks-finale { padding:14px 20px; gap:9px; }
  .thanks-letter > p:not(.eyebrow):not(.thanks-signature) { font-size:14px; line-height:1.35; }
  .thanks-letter h2 { font-size:36px; margin-bottom:8px; }
  .thanks-qr { width:96px; }
}
.inv-family-lines { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,7vw,90px); width:min(980px,100%); margin:0 auto; text-align:center; }
.inv-family-lines p { margin:4px 0; font:400 15px/1.7 var(--serif); text-transform:uppercase; }
.inv-family-lines p:last-child { text-align:center; }
#invitation .inv-couple p { font-size:clamp(52px,6vw,90px); }
@media (max-width:720px) {
  .inv-family-lines { gap:12px; }
  .inv-family-lines p { font-size:clamp(8.5px,2.4vw,14px); line-height:1.8; margin:3px 0; }
  .inv-family-lines p:last-child { text-align:center; }
  .inv-announcement > .inv-kicker { font-size:9px; }
  .inv-announcement h2 { font-size:10px; }
  #invitation .inv-couple p { font-size:clamp(30px,9.4vw,60px); line-height:1.22; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

/* Both text fields have a visible frame before focus, on every screen size. */
#rsvp .field input,#rsvp .field textarea { border:1px solid #fff3de99; padding:8px 10px; border-radius:0; }
#rsvp .field input:focus-visible,#rsvp .field textarea:focus-visible { outline:2px solid #fff3de; outline-offset:1px; }

/* Text directly over the original shaded photograph. */
#invitation .invitation-full { padding:clamp(24px,5dvh,60px) clamp(18px,6vw,110px); }
#invitation .formal-invitation { width:100%; margin:0 auto; height:100%; min-height:620px; padding:32px clamp(20px,4vw,64px); border:0; border-radius:0; background:transparent; color:#f5edda; text-shadow:0 1px 5px #07141b66; display:grid; grid-template-rows:minmax(0,1fr) auto minmax(0,1fr); }
#invitation .inv-top-copy { align-self:center; display:grid; gap:14px; }
#invitation .inv-couple { margin:0; align-self:center; }
#invitation .inv-couple p { color:#fff3d6; }
#invitation .inv-amp { color:#c7b66e; }
#invitation .inv-closing { align-self:center; color:#e9dbb6; }
@media (max-width:720px) and (orientation:portrait) {
  #invitation .invitation-full { padding:24px 16px; }
  #invitation .formal-invitation { min-height:600px; padding:24px 14px; gap:12px; }
  #invitation .inv-top-copy { align-self:end; padding-bottom:20px; gap:14px; }
  #invitation .inv-closing { align-self:start; padding-top:24px; font-size:24px; }
}

#invitation .invitation-full { padding:clamp(20px,3dvh,36px) 24px 24px; }
#invitation .formal-invitation { width:min(980px,100%); height:auto; min-height:0; padding:0; display:flex; flex-direction:column; justify-content:flex-start; gap:var(--space-inv-md); color:var(--color-inv-text); }
#invitation .inv-top-copy { width:100%; display:flex; flex-direction:column; gap:6px; padding:0; align-self:auto; text-align:center; }
/* Nhà trai + Nhà gái nằm ngang 1 hàng */
#invitation .inv-family-lines { display:flex; flex-direction:row; justify-content:center; gap:32px; width:100%; }
#invitation .inv-family-lines p { margin:0; font:400 13px/1.5 var(--font-inv-body); text-transform:none; text-align:center; }
#invitation .inv-family-lines span { display:block; }
#invitation .inv-family-label { font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:2px; opacity:.8; }
/* Announcement cùng kích thước nhỏ */
#invitation .inv-announcement { display:grid; gap:3px; }
#invitation .inv-announcement > .inv-kicker,#invitation .inv-announcement > h2 { position:static; margin:0; font:400 11px/1.4 var(--font-inv-body); letter-spacing:.1em; text-transform:uppercase; }
#invitation .inv-announcement > .inv-kicker { font-size:8px; line-height:1.6; letter-spacing:.12em; }
#invitation .inv-couple { gap:0; margin:clamp(24px,4dvh,48px) 0 0; min-width:0; text-align:center; }
#invitation .inv-couple > div { min-width:0; max-width:100%; }
#invitation .inv-couple p { font:400 var(--text-inv-name)/1.12 var(--font-inv-display); color:var(--color-inv-text); white-space:nowrap; }
#invitation .inv-couple > div:last-child p { font-size:var(--text-inv-name); }
#invitation .inv-couple .inv-amp { font:400 18px/1 var(--font-inv-body); margin:var(--space-inv-xs) 0; color:var(--color-inv-text); }
#invitation .inv-closing { margin:var(--space-inv-xs) 0 0; padding:0; align-self:center; max-width:none; font:400 16px/1.45 var(--font-inv-body); color:var(--color-inv-text); white-space:nowrap; }
/* Cho phép animation chạy — bỏ override animation:none cũ */
/* inv-top-copy (nhà trai/gái + announcement) → text-block-reveal lần lượt */
#invitation.is-active .inv-top-copy { animation:text-block-reveal 1.6s cubic-bezier(.16,1,.3,1) .1s both; }
/* Tên cô dâu chú rể → handwriting-reveal (như welcome) với delay stagger */
#invitation.is-active .inv-couple > div:first-child .script { animation:handwriting-reveal 2.65s cubic-bezier(.16,1,.3,1) .7s both !important; }
#invitation.is-active .inv-couple .inv-amp { animation:text-block-reveal 1.4s cubic-bezier(.16,1,.3,1) 1.5s both !important; opacity:0; }
#invitation.is-active .inv-couple > div:last-child .script { animation:handwriting-reveal 2.65s cubic-bezier(.16,1,.3,1) 1.9s both !important; }
/* Dòng kết → fade in sau cùng */
#invitation.is-active .inv-closing { animation:text-block-reveal 1.4s cubic-bezier(.16,1,.3,1) 3s both; opacity:0; }
@media (orientation:portrait) {
  #invitation .invitation-full { padding:clamp(24px,5dvh,56px) 16px 24px; }
  #invitation .formal-invitation { gap:var(--space-inv-lg); }
  #invitation .inv-family-lines { flex-direction:row; gap:20px; flex-wrap:wrap; }
  #invitation .inv-family-lines p { font-size:12px; }
  #invitation .inv-couple { width:100%; }
  #invitation .inv-couple > div { width:100%; }
  #invitation .inv-couple p {
    font-size:clamp(28px,7.8vw,42px);
    letter-spacing:-.01em;
    white-space:nowrap;
  }
  #invitation .inv-couple > div:last-child p { font-size:inherit; }
  #invitation .inv-closing { font-size:13px; white-space:nowrap; max-width:none; }
}
@media (max-height:650px) {
  #invitation .invitation-full { padding-top:16px; }
  #invitation .formal-invitation { gap:var(--space-inv-sm); }
  #invitation .inv-top-copy { gap:var(--space-inv-sm); }
}
@media (prefers-reduced-motion:reduce) {
  #invitation.is-active .inv-top-copy,
  #invitation.is-active .inv-couple > div:first-child .script,
  #invitation.is-active .inv-couple .inv-amp,
  #invitation.is-active .inv-couple > div:last-child .script,
  #invitation.is-active .inv-closing { animation:none; opacity:1; clip-path:none; transform:none; filter:none; }
}
/* Mobile portrait: dùng invitation-new-portrait.jpg, đủ thấy cô dâu chú rể */
#invitation { background-size:100% 100%,cover; background-position:center,center center; }
@media (orientation:portrait) {
  #invitation { background-size:100% 100%,cover; background-position:center,center 60%; }
}

/* =========================================================
   INVITATION - CÔ DÂU & CHÚ RỂ CÙNG KÍCH THƯỚC CHỮ
   DÁN TOÀN BỘ ĐOẠN NÀY XUỐNG CUỐI FILE CSS
   ========================================================= */

#invitation .inv-couple {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

#invitation .inv-couple > div {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Hai tên sử dụng CHÍNH XÁC cùng font-size */
#invitation .inv-couple > div:first-child p,
#invitation .inv-couple > div:last-child p {
  margin: 0;

  font-family: var(--font-inv-display);
  font-weight: 400;

  /* DESKTOP — tên ngắn, cho to */
  font-size: clamp(72px, 8.5vw, 120px) !important;

  line-height: 1.08;
  letter-spacing: -0.01em;

  color: var(--color-inv-text);
  white-space: nowrap;
}

/* Dấu & */
#invitation .inv-couple .inv-amp {
  margin: 3px 0;

  font-family: var(--font-inv-body);
  font-size: 18px !important;
  font-weight: 400;
  line-height: 1;

  color: var(--color-inv-text);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  #invitation .inv-couple {
    width: 100%;
    margin: clamp(20px, 3dvh, 40px) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
  }

  #invitation .inv-couple > div {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
  }

  #invitation .inv-couple > div:first-child p,
  #invitation .inv-couple > div:last-child p {
    margin: 0 auto;
    font-size: clamp(56px, 15vw, 80px) !important;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
  }

  #invitation .inv-couple .inv-amp {
    display: block;
    width: 100%;
    margin: 6px auto;
    font-size: 24px !important;
    text-align: center;
  }
}

/* Mobile rất nhỏ */
@media (max-width: 390px) {
  #invitation .inv-couple > div:first-child p,
  #invitation .inv-couple > div:last-child p {
    font-size: clamp(48px, 13vw, 64px) !important;
  }
}

/* Opposing name alignments with equal optical inset and a centered ampersand. */
#invitation .inv-couple {
  max-width:900px;
  margin-inline:auto;
  padding-inline:clamp(8px,4vw,48px);
}
#invitation .inv-couple > div:first-child {
  display:flex;
  justify-content:flex-start;
}
#invitation .inv-couple > div:last-child {
  display:flex;
  justify-content:flex-end;
}
#invitation .inv-couple > div:first-child p,
#invitation .inv-couple > div:last-child p {
  margin:0;
}
#invitation .inv-couple .inv-amp {
  display:block;
  width:100%;
  text-align:center;
  clip-path:none;
  margin:8px 0;
  font-size:clamp(24px,3vw,32px) !important;
}

/* Larger names occupy the sky; the opening sentiment leads the invitation. */
#invitation .inv-closing {
  white-space:normal;
  text-align:center;
  margin:0 0 8px;
}
#invitation.is-active .inv-closing { animation-delay:.1s; }
#invitation .inv-couple { max-width:1080px; padding-inline:8px; }
#invitation .inv-couple > div:first-child p,
#invitation .inv-couple > div:last-child p {
  font-size:clamp(88px,10.5vw,148px) !important;
}
#invitation .inv-couple .inv-amp {
  font-family:var(--font-inv-display);
  font-size:clamp(32px,4.2vw,58px) !important;
  line-height:1;
  margin:12px 0;
}
@media (max-width:720px) {
  #invitation .formal-invitation { gap:12px; }
  #invitation .inv-couple { margin-top:clamp(24px,4dvh,40px); gap:8px; }
  #invitation .inv-couple > div:first-child p,
  #invitation .inv-couple > div:last-child p {
    font-size:clamp(58px,18vw,110px) !important;
    line-height:1.15;
  }
  #invitation .inv-couple .inv-amp {
    font-size:clamp(28px,7.2vw,44px) !important;
    margin:12px 0;
  }
}

/* Fetch slide backgrounds only when the deferred-media controller activates them. */
.slide:not(.media-ready), #invitation:not(.media-ready), #album:not(.media-ready),
#rsvp:not(.media-ready), #thanks:not(.media-ready) { background-image:none !important; }