:root{
  --wine:#651220;
  --wine-2:#741829;
  --wine-deep:#420914;
  --cream:#fbf1e3;
  --cream-2:#f5e8d6;
  --paper:#fff8ee;
  --page-background:#f8f0e2;
  --page-surface:var(--page-background);
  --gold:#c9a069;
  --gold-soft:#e8d1a6;
  --ink:#3f2828;
  --muted:#8b716d;
  --serif:"Cormorant Garamond",Georgia,serif;
  --script:"Great Vibes",cursive;
  --sans:"Be Vietnam Pro",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--page-surface);width:100%;max-width:100%;overflow-x:clip}
body{margin:0;width:100%;max-width:100%;overflow-x:clip;background:var(--page-surface);color:var(--ink);font-family:var(--sans);font-weight:300}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.wedding-page{position:relative;width:min(100%,430px);margin:0 auto;overflow:hidden;background:transparent}
section,footer{position:relative}
.eyebrow{margin:0 0 18px;text-align:center;color:var(--wine);font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.eyebrow--light{color:var(--gold-soft)}
.script{margin:0;font-family:var(--script);font-size:42px;font-weight:400;line-height:1;color:var(--wine)}
.script--small{font-size:34px}.script--gold{color:var(--gold-soft)}.script--dark{color:var(--wine)}
.hero-paper{padding:34px 26px 42px;text-align:center;min-height:640px}
.envelope{position:relative;display:block;width:292px;height:330px;margin:22px auto 26px;border:0;background:transparent;cursor:pointer;perspective:800px}
.envelope__back{position:absolute;left:18px;right:18px;bottom:18px;height:186px;background:linear-gradient(145deg,#5a0d1a,#7a1b2b);border-radius:3px;box-shadow:0 18px 35px rgba(69,20,20,.18)}
.envelope__card{position:absolute!important;left:62px!important;top:12px!important;width:168px!important;height:220px!important;z-index:2;transform:rotate(5deg);transition:transform .8s cubic-bezier(.2,.75,.2,1),top .8s cubic-bezier(.2,.75,.2,1)}
.envelope__front{position:absolute;left:18px;right:18px;bottom:18px;height:186px;z-index:3;background:linear-gradient(145deg,#6f1424,#570d1a);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);border-radius:0 0 3px 3px}
.envelope__front:before{content:"";position:absolute;inset:0;background:linear-gradient(35deg,rgba(255,255,255,.06),transparent 40%,rgba(0,0,0,.08));clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)}
.wax-seal{position:absolute;z-index:5;left:50%;bottom:87px;width:54px;height:54px;margin-left:-27px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#e4c083,#a87837 72%);color:#6d1524;font-family:var(--serif);font-size:18px;font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,.25);transition:transform .6s ease,opacity .4s ease}
.wax-seal span{font-size:12px;margin:0 1px}
.envelope.is-open .envelope__card{top:-42px!important;transform:rotate(-3deg) scale(1.03)}
.envelope.is-open .wax-seal{transform:scale(.7) rotate(-14deg);opacity:.15}
.tap-note{margin:-12px 0 26px;color:var(--muted);font-family:var(--serif);font-size:13px;font-style:italic}
.hero-names{display:flex;align-items:center;justify-content:center;gap:10px}.hero-names .script{font-size:42px}.hero-names>span{color:var(--gold);font-family:var(--serif);font-size:26px;font-style:italic}
.hero-date{margin:9px 0 0;color:var(--wine);font-family:var(--serif);font-size:15px;letter-spacing:.22em}.ornament{margin-top:18px;color:var(--gold)}
.photo-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(145deg,#e8d8c5,#cdb8a7);color:#6f5a53;border:1px solid rgba(90,54,44,.12);font-size:9px;font-weight:600;letter-spacing:.14em;text-align:center}.photo-slot small{margin-top:6px;font-weight:400;letter-spacing:.04em;text-transform:none}.photo-slot:after{content:"";position:absolute;inset:8px;border:1px dashed rgba(101,18,32,.22);pointer-events:none}
.hero-flower{position:absolute;z-index:6;color:#f0d6c0;text-shadow:0 2px 0 rgba(0,0,0,.1);font-size:74px;pointer-events:none}.flower--left{left:-4px;bottom:55px;transform:rotate(-22deg)}.flower--right{right:-2px;bottom:117px;transform:rotate(18deg);font-size:56px}
.burgundy-card{margin:0 18px;padding:42px 24px;background:linear-gradient(180deg,var(--wine),#58101d);color:var(--paper);border-radius:4px;box-shadow:0 16px 30px rgba(67,18,23,.12);overflow:hidden}
.botanical{position:absolute;width:120px;height:170px;opacity:.25;pointer-events:none;background:
 radial-gradient(circle at 50% 10%,var(--gold-soft) 0 6px,transparent 7px),
 radial-gradient(ellipse at 38% 24%,var(--gold-soft) 0 7px,transparent 8px),
 radial-gradient(ellipse at 63% 36%,var(--gold-soft) 0 7px,transparent 8px),
 radial-gradient(ellipse at 38% 52%,var(--gold-soft) 0 7px,transparent 8px),
 linear-gradient(72deg,transparent 49%,var(--gold-soft) 50% 51%,transparent 52%);transform:rotate(-24deg)}
.botanical--a{right:-45px;top:250px}.botanical--b{left:-46px;bottom:260px;transform:rotate(155deg)}.botanical--c{right:-35px;top:170px}.botanical--d{left:-34px;top:90px;transform:rotate(145deg)}
.parents-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;text-align:center;color:var(--paper);font-family:var(--serif);font-size:13px;line-height:1.25}.parents-grid>div+div{border-left:1px solid rgba(232,209,166,.18);padding-left:15px}.parents-grid small{display:block;margin-bottom:7px;color:var(--gold-soft);font-family:var(--sans);font-size:7px;letter-spacing:.18em}.parents-grid p{margin:2px 0}.parents-grid em{display:block;margin-top:7px;color:rgba(255,248,238,.58);font-size:10px}
.invite-center{padding:34px 0 28px;text-align:center}.mini-script{margin:0 0 7px;color:var(--gold-soft);font-family:var(--script);font-size:29px}.invite-center h1{margin:0;color:var(--paper);font-family:var(--serif);font-size:29px;font-weight:500;line-height:1.05}.invite-center h1 b{color:var(--gold);font-style:italic;font-weight:400}.religious-names{margin:8px 0;color:rgba(255,248,238,.62);font-family:var(--serif);font-size:12px;letter-spacing:.1em}.thin-rule{display:flex;align-items:center;gap:10px;width:70%;margin:16px auto;color:var(--gold)}.thin-rule:before,.thin-rule:after{content:"";height:1px;flex:1;background:rgba(232,209,166,.35)}.invite-line{margin:0;color:var(--gold-soft);font-family:var(--serif);font-size:15px;font-style:italic}.personal-guest{margin:6px 0!important;color:#fff!important;font-family:var(--serif)!important;font-size:25px!important;font-weight:600!important}.invite-copy{max-width:290px;margin:0 auto;color:rgba(255,248,238,.73);font-family:var(--serif);font-size:14px;line-height:1.45}
.mini-gallery{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px -9px 30px}.mini-gallery .photo-slot{height:135px;background:linear-gradient(145deg,#d7c2ae,#a98276);color:#5f3033}.mini-gallery .photo-slot:nth-child(2),.mini-gallery .photo-slot:nth-child(3){background:linear-gradient(145deg,#b9847e,#775252)}
.ceremony-copy{text-align:center}.ceremony-copy>p:not(.eyebrow):not(.quote){margin:0 0 4px;color:rgba(255,248,238,.72);font-family:var(--serif);font-size:13px}.ceremony-copy h3{margin:0;color:var(--gold-soft);font-family:var(--serif);font-size:25px;font-weight:500}.event-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:19px 0 14px}.event-row span{display:grid;gap:3px}.event-row small{font-size:7px;letter-spacing:.16em;color:rgba(255,248,238,.55)}.event-row b{font-family:var(--serif);font-size:18px;font-weight:500}.event-row i{color:var(--gold);font-style:normal}.quote{margin:20px auto 0;max-width:280px;color:var(--gold-soft);font-family:var(--serif);font-size:12px;font-style:italic;line-height:1.4}
.calendar-wrap{padding:24px 26px 44px}.section-flower{position:absolute;color:var(--wine);opacity:.82;font-size:55px;z-index:2}.section-flower--left{left:3px;top:48px;transform:rotate(-25deg)}.calendar-card{position:relative;z-index:1;padding:26px 20px 22px;background:var(--paper);border:1px solid rgba(101,18,32,.08);border-radius:5px;text-align:center;box-shadow:0 10px 24px rgba(91,48,33,.08)}.calendar-card h2{margin:7px 0 16px;color:var(--wine);font-family:var(--serif);font-size:17px;letter-spacing:.12em}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-weekdays{margin-bottom:4px;color:var(--muted);font-size:8px;font-weight:600}.calendar-grid button,.calendar-grid span{display:grid;place-items:center;aspect-ratio:1;border:0;background:transparent;color:var(--ink);font-family:var(--serif);font-size:12px;border-radius:50%}.calendar-grid .muted{opacity:.18}.calendar-grid .wedding-day{background:var(--wine);color:#fff;box-shadow:0 4px 10px rgba(101,18,32,.22);position:relative;font-size: 20px;}.calendar-grid .wedding-day:after{content:"♥";position:absolute;right:-5px;top:-7px;color:var(--wine);font-size:10px}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:22px 0 17px}.countdown div{padding:9px 2px;border-top:1px solid rgba(101,18,32,.12);border-bottom:1px solid rgba(101,18,32,.12)}.countdown strong{display:block;color:var(--wine);font-family:var(--serif);font-size:20px;font-weight:600}.countdown span{font-size:7px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.outline-btn,.solid-btn,.light-btn{min-height:42px;border-radius:22px;padding:0 18px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.outline-btn{border:1px solid var(--wine);background:transparent;color:var(--wine)}
.reception-card{margin-top:0;text-align:center}.reception-card h2{margin:2px 0;color:#fff;font-family:var(--serif);font-size:36px;font-weight:500;line-height:.95}.hall{margin:12px 0 4px;color:var(--gold-soft);font-size:8px;font-weight:600;letter-spacing:.16em}.address{margin:0 auto 20px;max-width:300px;color:rgba(255,248,238,.68);font-family:var(--serif);font-size:13px}.party-time{display:grid;grid-template-columns:1fr auto 1fr;gap:15px;align-items:center;margin:22px 0}.party-time div{display:grid;gap:5px}.party-time small{font-size:7px;letter-spacing:.16em;color:var(--gold-soft)}.party-time b{font-family:var(--serif);font-size:23px;font-weight:500}.party-time>span{color:var(--gold)}.map-placeholder{height:150px;margin:22px -6px 17px;border-radius:3px;background:linear-gradient(135deg,#d8eee2,#c5dfd4);color:#477263;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(49,92,77,.1);position:relative;overflow:hidden}.map-placeholder:before,.map-placeholder:after{content:"";position:absolute;width:160%;height:1px;background:rgba(63,121,100,.22);transform:rotate(-18deg)}.map-placeholder:after{transform:rotate(21deg)}.map-pin{font-size:30px}.map-placeholder p{margin:3px 0;font-size:9px;font-weight:600;letter-spacing:.12em}.map-placeholder small{font-size:8px}.light-btn{border:1px solid var(--gold-soft);color:var(--gold-soft);background:transparent}
.portrait-break{padding:48px 48px 56px;text-align:center}.portrait-card{width:230px;height:310px;margin:20px auto 18px;border-radius:6px 6px 54px 54px;background:linear-gradient(150deg,#7f1c2e,#b78b7d);color:#f4d9cc;box-shadow:0 18px 26px rgba(77,31,28,.16)}.portrait-card:after{border-color:rgba(255,255,255,.35)}
.story-card{padding-bottom:52px;text-align:center}.story-timeline{position:relative;margin-top:26px}.story-timeline:before{content:"";position:absolute;left:50%;top:20px;bottom:20px;width:1px;background:rgba(232,209,166,.32)}.story-timeline article{position:relative;display:grid;grid-template-columns:1fr 32px 1fr;align-items:center;gap:10px;min-height:145px;text-align:left}.story-timeline article>div:not(.story-photo){padding:0 4px}.story-timeline small{color:var(--gold-soft);font-size:7px;letter-spacing:.12em}.story-timeline h3{margin:3px 0;color:#fff;font-family:var(--serif);font-size:18px;font-weight:500}.story-timeline p{margin:0;color:rgba(255,248,238,.6);font-family:var(--serif);font-size:11px;line-height:1.35}.story-photo{width:100%;height:108px;border-radius:3px;background:linear-gradient(145deg,#a06362,#d5b7a4);color:#5c2b31}.story-dot{position:relative;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--wine-deep);border:1px solid var(--gold);color:var(--gold-soft);font-family:var(--serif);font-size:11px}.story-timeline article.is-current .story-dot{background:var(--gold);color:var(--wine-deep);transform:scale(1.08)}
.rsvp-paper{padding:48px 24px}.rsvp-card{padding:25px 20px;background:var(--wine);color:#fff;border-radius:4px;box-shadow:0 14px 26px rgba(61,19,25,.13);display:grid;gap:15px}.rsvp-card>label,.rsvp-card legend{display:grid;gap:7px;color:var(--gold-soft);font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.rsvp-card input,.rsvp-card select,.rsvp-card textarea{width:100%;border:1px solid rgba(232,209,166,.3);border-radius:3px;background:#fffaf2;color:var(--ink);padding:11px 12px;outline:none;font-size:16px;text-transform:none;letter-spacing:0}.rsvp-card textarea{resize:vertical;min-height:80px}.rsvp-card fieldset{margin:0;padding:0;border:0}.radio-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.radio-row label{position:relative}.radio-row input{position:absolute;opacity:0;pointer-events:none}.radio-row span{min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;padding:7px;border:1px solid rgba(232,209,166,.34);border-radius:3px;color:#fff;font-size:9px;letter-spacing:0;text-transform:none}.radio-row input:checked+span{background:var(--gold-soft);color:var(--wine-deep);font-weight:600}.solid-btn{border:0;background:var(--paper);color:var(--wine)}.form-note{min-height:17px;margin:0;text-align:center;color:rgba(255,248,238,.6);font-family:var(--serif);font-size:11px;font-style:italic}
.gift-section{padding:45px 32px 58px;text-align:center}.gift-envelope{position:relative;width:80px;height:56px;margin:20px auto;background:var(--wine);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);display:grid;place-items:end center;color:var(--gold-soft)}.gift-envelope span{width:30px;height:30px;margin-bottom:11px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--wine);font-size:12px}.gift-section>p:not(.eyebrow):not(.script){max-width:300px;margin:0 auto 22px;color:var(--muted);font-family:var(--serif);font-size:13px;line-height:1.4}.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.qr-placeholder{height:145px;padding:12px;background:#fff;border:1px solid rgba(101,18,32,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.qr-placeholder span{width:90px;height:90px;border:7px dotted var(--wine);display:grid;place-items:center;color:var(--wine);font-family:var(--serif);font-size:20px}.qr-placeholder small{color:var(--wine);font-size:8px;letter-spacing:.12em}
.footer-paper{padding:44px 20px 76px;text-align:center}.footer-paper>p:not(.script){margin:13px 0 20px;color:var(--muted);font-size:8px;letter-spacing:.18em}.footer-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.footer-actions button,.footer-actions a{min-height:38px;padding:0 14px;border-radius:20px;border:1px solid var(--wine);background:transparent;color:var(--wine);display:inline-flex;align-items:center;text-decoration:none;font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.floating-tools{position:fixed;z-index:99;left:max(10px,calc(50% - 238px));bottom:16px}.float-btn{width:38px;height:38px;border:0;border-radius:50%;background:var(--wine);color:#fff;box-shadow:0 5px 15px rgba(70,17,24,.25);cursor:pointer}.float-btn.is-playing{animation:spin 5s linear infinite}.float-btn:focus-visible,.outline-btn:focus-visible,.solid-btn:focus-visible,.light-btn:focus-visible,.footer-actions button:focus-visible,.envelope:focus-visible{outline:3px solid #d8ae68;outline-offset:3px}
.reveal-section [data-reveal],.reveal-section .eyebrow,.reveal-section .script,.reveal-section .parents-grid,.reveal-section .invite-center,.reveal-section .mini-gallery,.reveal-section .ceremony-copy,.reveal-section .calendar-card,.reveal-section .party-time,.reveal-section .map-placeholder,.reveal-section .portrait-card,.reveal-section .story-timeline article,.reveal-section .rsvp-card,.reveal-section .gift-envelope,.reveal-section .qr-grid,.reveal-section .footer-actions{opacity:0;transform:translateY(20px)}
.reveal-section.is-visible .eyebrow,.reveal-section.is-visible .script,.reveal-section.is-visible .parents-grid,.reveal-section.is-visible .invite-center,.reveal-section.is-visible .mini-gallery,.reveal-section.is-visible .ceremony-copy,.reveal-section.is-visible .calendar-card,.reveal-section.is-visible .party-time,.reveal-section.is-visible .map-placeholder,.reveal-section.is-visible .portrait-card,.reveal-section.is-visible .rsvp-card,.reveal-section.is-visible .gift-envelope,.reveal-section.is-visible .qr-grid,.reveal-section.is-visible .footer-actions{animation:rise .72s cubic-bezier(.2,.75,.2,1) forwards}
.reveal-section.is-visible .parents-grid{animation-delay:.08s}.reveal-section.is-visible .invite-center{animation-delay:.16s}.reveal-section.is-visible .mini-gallery{animation-delay:.24s}.reveal-section.is-visible .ceremony-copy{animation-delay:.32s}.reveal-section.is-visible .calendar-card{animation-delay:.08s}.reveal-section.is-visible .party-time{animation-delay:.16s}.reveal-section.is-visible .map-placeholder{animation-delay:.24s}.story-timeline article.is-revealed{animation:rise .65s cubic-bezier(.2,.75,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:350px){.hero-paper{padding-left:18px;padding-right:18px}.envelope{transform:scale(.92);margin-left:auto;margin-right:auto}.burgundy-card{margin-left:12px;margin-right:12px;padding-left:18px;padding-right:18px}.parents-grid{font-size:12px}.invite-center h1{font-size:27px}.rsvp-paper{padding-left:18px;padding-right:18px}}
@media(min-width:431px){body{padding:18px 0}.wedding-page{border-radius:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.envelope__card,.wax-seal,.float-btn{transition:none!important;animation:none!important}.reveal-section .eyebrow,.reveal-section .script,.reveal-section .parents-grid,.reveal-section .invite-center,.reveal-section .mini-gallery,.reveal-section .ceremony-copy,.reveal-section .calendar-card,.reveal-section .party-time,.reveal-section .map-placeholder,.reveal-section .portrait-card,.reveal-section .story-timeline article,.reveal-section .rsvp-card,.reveal-section .gift-envelope,.reveal-section .qr-grid,.reveal-section .footer-actions{opacity:1!important;transform:none!important;animation:none!important}}

/* ===== V4 additions: wedding-day schedule, guestbook and roaming chubby cat ===== */
.schedule-section{padding:52px 30px 56px;text-align:center;background:transparent}
.schedule-date{margin:10px 0 28px;color:var(--muted);font-family:var(--serif);font-size:12px;letter-spacing:.16em}
.section-flower--right{position:absolute;right:0px;top:38px;color:rgba(101,18,32,.10);font-size:80px;transform:rotate(20deg);pointer-events:none}
.day-timeline{position:relative;display:grid;gap:0;max-width:340px;margin:0 auto;text-align:left}
.day-timeline:before{content:"";position:absolute;left:79px;top:27px;bottom:28px;width:1px;background:linear-gradient(var(--gold),rgba(201,160,105,.18))}
.day-stop{display:grid;grid-template-columns:58px 42px 1fr;gap:0;align-items:center;min-height:112px;position:relative}
.day-stop time{color:var(--wine);font-family:var(--serif);font-size:21px;font-weight:600;text-align:right;padding-right:8px}
.day-node{position:relative;z-index:2;justify-self:center;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--wine);border:3px solid var(--cream);box-shadow:0 0 0 1px var(--gold);color:var(--gold-soft);font-size:12px}
.day-stop>div{padding:14px 0 14px 11px;border-bottom:1px solid rgba(101,18,32,.09)}
.day-stop:last-child>div{border-bottom:0}
.day-stop small{color:var(--gold);font-size:7px;font-weight:600;letter-spacing:.17em}
.day-stop h3{margin:3px 0 2px;color:var(--wine);font-family:var(--serif);font-size:22px;font-weight:600}
.day-stop p{margin:0;color:var(--muted);font-family:var(--serif);font-size:12px;line-height:1.4}

.guestbook-section{position:relative;margin:0 18px;padding:46px 24px 50px;overflow:hidden;background:linear-gradient(180deg,#651220,#510d19);color:var(--paper);border-radius:4px;box-shadow:0 16px 30px rgba(67,18,23,.12);text-align:center}
.botanical--guestbook{right:-38px;bottom:30px;transform:rotate(28deg);opacity:.18}
.guestbook-intro{max-width:305px;margin:8px auto 24px;color:rgba(255,248,238,.68);font-family:var(--serif);font-size:13px;line-height:1.45}
.guestbook-list{display:grid;gap:12px;margin:0 auto 24px}
.guest-note{position:relative;padding:18px 17px 16px;background:#fff8ee;color:var(--ink);border-radius:3px;text-align:left;box-shadow:0 10px 18px rgba(37,8,12,.18);transform:rotate(-.8deg)}
.guest-note--tilt{transform:rotate(.7deg)}
.guest-note:before{content:"♥";position:absolute;right:13px;top:10px;color:rgba(101,18,32,.18);font-size:19px}
.guest-note p{margin:0 16px 8px 0;font-family:var(--serif);font-size:14px;line-height:1.45}
.guest-note small{color:var(--wine);font-size:8px;font-weight:600;letter-spacing:.04em}
.guestbook-form{display:grid;gap:13px;padding-top:6px;text-align:left}
.guestbook-form label{display:grid;gap:7px;color:var(--gold-soft);font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.guestbook-form input,.guestbook-form textarea{width:100%;border:1px solid rgba(232,209,166,.3);border-radius:3px;background:#fffaf2;color:var(--ink);padding:11px 12px;outline:none;font-size:16px;text-transform:none;letter-spacing:0}
.guestbook-form textarea{resize:vertical;min-height:100px}
.guestbook-status{min-height:18px;margin:0;text-align:center;color:rgba(255,248,238,.55);font-family:var(--serif);font-size:10px;font-style:italic;line-height:1.4}

.roaming-cat{position:fixed;z-index:90;left:0;top:0;width:68px;height:58px;padding:0;border:0;background:transparent;color:#651220;cursor:pointer;transform:translate3d(8px,70vh,0);transition:transform 2.6s cubic-bezier(.25,.72,.22,1);filter:drop-shadow(0 6px 7px rgba(70,17,24,.18));-webkit-tap-highlight-color:transparent}
.roaming-cat svg{display:block;width:68px;height:auto;overflow:visible}
.roaming-cat.is-flipped svg{transform:scaleX(-1)}
.roaming-cat.is-paused{transition:none}
.roaming-cat.is-paused .cat-tail,.roaming-cat.is-paused .cat-feet{animation-play-state:paused}
.cat-tail{transform-origin:69px 51px;animation:cat-tail-wag 1.05s ease-in-out infinite alternate}
.cat-feet{transform-origin:center;animation:cat-bounce .72s ease-in-out infinite alternate}
.cat-head{transform-origin:46px 42px;animation:cat-head-bob 1.25s ease-in-out infinite alternate}
.cat-bubble{position:absolute;left:43px;top:-13px;min-width:29px;height:24px;padding:0 7px;border-radius:13px;display:grid;place-items:center;background:#fff8ee;border:1px solid rgba(101,18,32,.14);color:var(--wine);font-family:var(--serif);font-size:11px;box-shadow:0 4px 10px rgba(70,17,24,.12);opacity:0;transform:translateY(5px) scale(.9);transition:opacity .2s ease,transform .2s ease;pointer-events:none;white-space:nowrap}
.roaming-cat.show-bubble .cat-bubble{opacity:1;transform:none}
@keyframes cat-tail-wag{from{transform:rotate(-9deg)}to{transform:rotate(13deg)}}
@keyframes cat-bounce{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes cat-head-bob{from{transform:rotate(-1.5deg)}to{transform:rotate(2deg)}}

.reveal-section .day-timeline,.reveal-section .guestbook-intro,.reveal-section .guestbook-list,.reveal-section .guestbook-form{opacity:0;transform:translateY(20px)}
.reveal-section.is-visible .day-timeline,.reveal-section.is-visible .guestbook-intro,.reveal-section.is-visible .guestbook-list,.reveal-section.is-visible .guestbook-form{animation:rise .72s cubic-bezier(.2,.75,.2,1) forwards}
.reveal-section.is-visible .guestbook-intro{animation-delay:.08s}.reveal-section.is-visible .guestbook-list{animation-delay:.16s}.reveal-section.is-visible .guestbook-form{animation-delay:.24s}.reveal-section.is-visible .day-timeline{animation-delay:.12s}

@media(max-width:350px){.schedule-section{padding-left:20px;padding-right:20px}.day-stop{grid-template-columns:52px 38px 1fr}.day-timeline:before{left:71px}.day-stop time{font-size:18px}.guestbook-section{margin-left:12px;margin-right:12px;padding-left:18px;padding-right:18px}.roaming-cat{width:60px;height:52px}.roaming-cat svg{width:60px}}
@media(prefers-reduced-motion:reduce){.roaming-cat{position:fixed!important;left:auto!important;right:6px!important;top:auto!important;bottom:6px!important;transform:none!important;transition:none!important}.cat-tail,.cat-feet,.cat-head{animation:none!important}.reveal-section .day-timeline,.reveal-section .guestbook-intro,.reveal-section .guestbook-list,.reveal-section .guestbook-form{opacity:1!important;transform:none!important;animation:none!important}}

/* ===== V5: personalized entrance gate + music-on-open + true roaming cat ===== */
body.intro-locked{overflow:hidden}
.invite-gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;background:var(--page-surface);transition:opacity .55s ease,visibility .55s ease}
.invite-gate__paper{position:relative;width:min(100%,394px);min-height:min(760px,calc(100vh - 36px));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px 30px 34px;overflow:hidden;border:1px solid rgba(101,18,32,.14);background:var(--page-surface);box-shadow:0 22px 50px rgba(67,18,23,.14);text-align:center}
.invite-gate__paper:before,.invite-gate__paper:after{content:"";position:absolute;border:1px solid rgba(101,18,32,.09);border-radius:50%;pointer-events:none}

.invite-gate__ornament{position:absolute;top:22px;color:var(--gold);font-size:16px}
.invite-gate__eyebrow{margin:0 0 20px;color:var(--wine);font-size:9px;font-weight:600;letter-spacing:.34em}
.invite-gate__script{margin:0;color:var(--wine);font-family:var(--script);font-size:54px;line-height:1}
.invite-gate__rule{display:flex;align-items:center;gap:11px;width:74%;margin:25px auto 22px;color:var(--gold)}
.invite-gate__rule:before,.invite-gate__rule:after{content:"";height:1px;flex:1;background:rgba(101,18,32,.18)}
.invite-gate__label{margin:0 0 8px;color:var(--muted);font-family:var(--serif);font-size:16px;font-style:italic}
.invite-gate__guest{max-width:320px;margin:0;color:var(--wine);font-family:var(--serif);font-size:34px;font-weight:600;line-height:1.05;text-wrap:balance}
.invite-gate__date{margin:27px 0;color:var(--wine);font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.3;letter-spacing:0}
.invite-gate__hearts{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;user-select:none}
.invite-gate__hearts span{position:absolute;top:-40px;left:var(--heart-left);color:#7c2634;font-family:Georgia,serif;font-size:var(--heart-size,22px);line-height:1;opacity:0;animation:gate-heart-fall var(--heart-speed,12s) var(--heart-delay,0s) linear infinite}
.invite-gate__hearts span:nth-child(3n+2){color:#b99455}
.invite-gate__hearts span:nth-child(3n){color:#cf9c98}
.invite-gate__hearts span:nth-child(1){--heart-left:5%;--heart-delay:-3s;--heart-speed:13s}
.invite-gate__hearts span:nth-child(2){--heart-left:15%;--heart-delay:-8s;--heart-speed:16s;--heart-size:18px}
.invite-gate__hearts span:nth-child(3){--heart-left:25%;--heart-delay:-1s;--heart-speed:11s;--heart-size:25px}
.invite-gate__hearts span:nth-child(4){--heart-left:35%;--heart-delay:-10s;--heart-speed:15s;--heart-size:16px}
.invite-gate__hearts span:nth-child(5){--heart-left:45%;--heart-delay:-5s;--heart-speed:14s}
.invite-gate__hearts span:nth-child(6){--heart-left:55%;--heart-delay:-9s;--heart-speed:12s;--heart-size:17px}
.invite-gate__hearts span:nth-child(7){--heart-left:65%;--heart-delay:-2s;--heart-speed:16s;--heart-size:24px}
.invite-gate__hearts span:nth-child(8){--heart-left:75%;--heart-delay:-7s;--heart-speed:13s;--heart-size:20px}
.invite-gate__hearts span:nth-child(9){--heart-left:85%;--heart-delay:-4s;--heart-speed:15s;--heart-size:26px}
.invite-gate__hearts span:nth-child(10){--heart-left:93%;--heart-delay:-11s;--heart-speed:14s;--heart-size:18px}
.invite-gate__hearts span:nth-child(11){--heart-left:10%;--heart-delay:-12s;--heart-speed:18s;--heart-size:15px}
.invite-gate__hearts span:nth-child(12){--heart-left:81%;--heart-delay:-14s;--heart-speed:19s;--heart-size:17px}
@keyframes gate-heart-fall{0%{transform:translate3d(0,0,0) rotate(-18deg);opacity:0}10%{opacity:.24}50%{transform:translate3d(18px,calc(50vh + 40px),0) rotate(12deg)}85%{opacity:.24}100%{transform:translate3d(-12px,calc(100vh + 80px),0) rotate(-12deg);opacity:0}}
.invite-gate.is-hidden .invite-gate__hearts span{animation:none}
@media(prefers-reduced-motion:reduce){.invite-gate__hearts{display:none}}
.invite-gate__button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:140px;max-width:100%;height:48px;padding:0 20px;overflow:hidden;border:0;border-radius:999px;background:#56131b;color:#fff5ec;box-shadow:0 5px 14px rgba(67,18,23,.28);cursor:pointer;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1;letter-spacing:0;transition:transform .2s ease,box-shadow .2s ease}
.invite-gate__button::before{content:"";position:absolute;inset:0 auto 0 -55%;width:48%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.12) 75%,transparent);pointer-events:none;animation:gate-button-shine 3.8s ease-in-out infinite}
.invite-gate__button span{position:relative;z-index:1}
.invite-gate__button:hover{box-shadow:0 7px 18px rgba(67,18,23,.34);transform:translateY(-1px)}
.invite-gate__button:focus-visible{outline:2px solid var(--wine);outline-offset:4px}
.invite-gate__button:active{transform:scale(.98)}
@keyframes gate-button-shine{0%{left:-55%}55%,100%{left:110%}}
@media(prefers-reduced-motion:reduce){.invite-gate__button{transition:none}.invite-gate__button::before{animation:none;left:62%;opacity:.45}}
.invite-gate__hint{margin:13px 0 0;color:#9a8079;font-family:var(--serif);font-size:11px;font-style:italic}
.invite-gate.is-opening .invite-gate__paper{animation:gate-paper-open .78s cubic-bezier(.18,.8,.22,1) forwards}
.invite-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
@keyframes gate-paper-open{0%{transform:scale(1);opacity:1}55%{transform:scale(1.025);opacity:1}100%{transform:scale(.96) translateY(-24px);opacity:0}}
body.intro-locked .floating-tools,body.intro-locked .roaming-cat{opacity:0;pointer-events:none}
.floating-tools,.roaming-cat{transition:opacity .35s ease}
.envelope:disabled{cursor:default}

/* Cat entertainer: movement + playful tricks. */
.roaming-cat{left:14px;top:72%;transform:none!important;transition:left var(--cat-move-duration,1.55s) cubic-bezier(.28,.68,.22,1),top var(--cat-move-duration,1.55s) cubic-bezier(.28,.68,.22,1),opacity .3s ease;will-change:left,top;opacity:.97}
.roaming-cat svg{transform-origin:50% 72%;transition:filter .22s ease}
.roaming-cat.is-running .cat-tail{animation-duration:.29s}
.roaming-cat.is-running .cat-feet{animation:cat-paws-run .17s ease-in-out infinite alternate}
.roaming-cat.is-running .cat-head{animation:cat-head-run .29s ease-in-out infinite alternate}
.roaming-cat.is-running svg{filter:drop-shadow(0 8px 5px rgba(70,17,24,.13))}
.roaming-cat.is-dashing .cat-feet{animation-duration:.105s}
.roaming-cat.is-dashing .cat-tail{animation-duration:.17s}
.roaming-cat.is-dashing svg{animation:cat-dash-body .18s ease-in-out infinite alternate}
.roaming-cat.is-jumping svg{animation:cat-jump .62s cubic-bezier(.2,.8,.24,1) 1}
.roaming-cat.is-spinning svg{animation:cat-spin .82s cubic-bezier(.2,.75,.22,1) 1}
.roaming-cat.is-wiggling svg{animation:cat-wiggle .7s ease-in-out 1}
.roaming-cat.is-pouncing svg{animation:cat-pounce .68s cubic-bezier(.22,.8,.24,1) 1}
.roaming-cat.is-looking .cat-head{animation:cat-look .82s ease-in-out 1}
.roaming-cat.is-sitting svg{animation:cat-sit .95s ease-in-out 1}
.roaming-cat.is-paused{transition:none!important}
.cat-heart{position:fixed;z-index:89;pointer-events:none;color:#8b1e31;font-size:13px;line-height:1;text-shadow:0 2px 4px rgba(70,17,24,.12);animation:cat-heart-pop 1.05s ease-out var(--heart-delay,0ms) forwards}
@keyframes cat-paws-run{from{transform:translateY(-2px) rotate(-4deg)}to{transform:translateY(4px) rotate(4deg)}}
@keyframes cat-head-run{from{transform:rotate(-5deg) translateY(1px)}to{transform:rotate(5deg) translateY(-3px)}}
@keyframes cat-dash-body{from{transform:scaleX(1.03) scaleY(.97) translateY(0)}to{transform:scaleX(.97) scaleY(1.03) translateY(-2px)}}
@keyframes cat-jump{0%,100%{transform:translateY(0) rotate(0)}42%{transform:translateY(-30px) rotate(-7deg)}68%{transform:translateY(-12px) rotate(6deg)}}
@keyframes cat-spin{0%{transform:rotate(0) scale(1)}45%{transform:rotate(190deg) scale(.88)}100%{transform:rotate(360deg) scale(1)}}
@keyframes cat-wiggle{0%,100%{transform:rotate(0) translateX(0)}18%{transform:rotate(-7deg) translateX(-4px)}36%{transform:rotate(7deg) translateX(4px)}54%{transform:rotate(-5deg) translateX(-3px)}72%{transform:rotate(5deg) translateX(3px)}}
@keyframes cat-pounce{0%{transform:translateY(0) scale(1)}28%{transform:translateY(7px) scaleX(1.08) scaleY(.92)}62%{transform:translateY(-24px) translateX(11px) rotate(7deg) scale(.96)}100%{transform:translateY(0) translateX(0) rotate(0) scale(1)}}
@keyframes cat-look{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}55%{transform:rotate(13deg)}75%{transform:rotate(-6deg)}}
@keyframes cat-sit{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(6px) scaleX(1.05) scaleY(.93)}70%{transform:translateY(4px) scaleX(1.03) scaleY(.95)}}
@keyframes cat-heart-pop{0%{opacity:0;transform:translate3d(0,5px,0) scale(.55) rotate(-8deg)}18%{opacity:1}100%{opacity:0;transform:translate3d(var(--heart-x,0),-56px,0) scale(1.18) rotate(12deg)}}

.float-btn.is-playing{animation:music-pulse 1.15s ease-in-out infinite alternate}
@keyframes music-pulse{from{transform:scale(1)}to{transform:scale(1.08)}}

@media(max-height:660px){.invite-gate__paper{min-height:calc(100vh - 24px);padding-top:28px;padding-bottom:24px}.invite-gate__script{font-size:45px}.invite-gate__guest{font-size:29px}.invite-gate__copy{font-size:13px}.invite-gate__rule{margin:18px auto}.invite-gate__date{margin:17px 0}.invite-gate__hint{margin-top:8px}}
@media(max-width:350px){.invite-gate{padding:10px}.invite-gate__paper{min-height:calc(100vh - 20px);padding-left:20px;padding-right:20px}.invite-gate__guest{font-size:29px}.invite-gate__script{font-size:47px}}
@media(prefers-reduced-motion:reduce){.invite-gate.is-opening .invite-gate__paper,.invite-gate.is-opening .invite-gate__seal{animation:none!important}.invite-gate.is-opening{opacity:0}.roaming-cat{transition:none!important}.roaming-cat.is-running .cat-tail,.roaming-cat.is-running .cat-feet,.roaming-cat.is-running .cat-head,.roaming-cat.is-jumping svg{animation:none!important}}


/* ===== V7 Shimeji mascot engine ===== */
.floating-tools{display:flex;flex-direction:column;gap:8px;align-items:center}
.float-btn--cat{font-size:16px}
.float-btn--scroll{font-size:16px;display:grid;place-items:center}
.float-btn--scroll.is-paused{background:var(--cream);color:var(--wine);box-shadow:0 0 0 1px var(--wine),0 5px 15px rgba(70,17,24,.25)}
.float-btn--cat.is-paused{opacity:.58;filter:saturate(.45)}

.roaming-cat{
  position:fixed!important;
  z-index:120!important;
  left:0!important; right:auto!important; top:0!important; bottom:auto!important;
  width:74px!important; height:66px!important;
  padding:0!important; margin:0!important; border:0!important;
  background:transparent!important;
  color:#651220;
  cursor:grab;
  opacity:.98;
  transform:translate3d(var(--cat-x,16px),var(--cat-y,560px),0)!important;
  transition:opacity .25s ease!important;
  will-change:transform;
  touch-action:none;
  user-select:none;
  filter:drop-shadow(0 7px 7px rgba(70,17,24,.18));
}
.roaming-cat:active{cursor:grabbing}
.roaming-cat .cat-sprite{display:block;width:74px;height:66px;transform-origin:50% 70%;transition:transform .16s ease}
.roaming-cat svg{display:block;width:74px;height:auto;overflow:visible;transform:none!important;filter:none!important}
.roaming-cat.is-left .cat-sprite{transform:scaleX(-1)}
.roaming-cat.is-climb-left .cat-sprite{transform:rotate(-90deg)}
.roaming-cat.is-climb-right .cat-sprite{transform:rotate(90deg) scaleY(-1)}
.roaming-cat.is-falling .cat-sprite{transform:rotate(7deg)}
.roaming-cat.is-dragging .cat-sprite{transform:scale(1.08) rotate(-3deg)}
.roaming-cat.is-sleeping .cat-sprite{transform:scaleY(.92) translateY(3px)}
.roaming-cat.is-hidden{opacity:0!important;pointer-events:none!important}

.cat-face-sleep{display:none}.roaming-cat.is-sleeping .cat-face-awake{display:none}.roaming-cat.is-sleeping .cat-face-sleep{display:block}
.cat-tail{transform-origin:73px 56px;animation:shimeji-tail .58s ease-in-out infinite alternate}
.cat-head{transform-origin:48px 45px;animation:shimeji-head .74s ease-in-out infinite alternate}
.cat-feet{transform-origin:49px 72px}
.roaming-cat.is-walking .paw-a{animation:shimeji-paw-a .24s ease-in-out infinite alternate}
.roaming-cat.is-walking .paw-b{animation:shimeji-paw-b .24s ease-in-out infinite alternate}
.roaming-cat.is-running .paw-a{animation:shimeji-paw-a .12s ease-in-out infinite alternate}
.roaming-cat.is-running .paw-b{animation:shimeji-paw-b .12s ease-in-out infinite alternate}
.roaming-cat.is-running .cat-body{animation:shimeji-body-run .18s ease-in-out infinite alternate;transform-origin:49px 55px}
.roaming-cat.is-climb-left .paw-a,.roaming-cat.is-climb-right .paw-a{animation:shimeji-climb-a .28s ease-in-out infinite alternate}
.roaming-cat.is-climb-left .paw-b,.roaming-cat.is-climb-right .paw-b{animation:shimeji-climb-b .28s ease-in-out infinite alternate}
.roaming-cat.is-jumping .cat-sprite{animation:shimeji-jump-squash .5s ease-out}
.roaming-cat.is-excited .cat-sprite{animation:shimeji-excited .5s ease-in-out}
.roaming-cat.is-sleeping .cat-tail{animation-duration:1.8s}.roaming-cat.is-sleeping .cat-head{animation:none}

.cat-bubble{position:absolute;left:48px;top:-18px;z-index:2;min-width:34px;height:25px;padding:0 8px;border-radius:14px;display:grid;place-items:center;background:#fff8ee;border:1px solid rgba(101,18,32,.16);color:var(--wine);font-family:var(--serif);font-size:11px;box-shadow:0 4px 10px rgba(70,17,24,.12);opacity:0;transform:translateY(5px) scale(.9);transition:opacity .18s ease,transform .18s ease;pointer-events:none;white-space:nowrap}
.roaming-cat.show-bubble .cat-bubble{opacity:1;transform:none}
.cat-heart{position:fixed;z-index:119;pointer-events:none;color:#8b1e31;font-size:13px;animation:cat-heart-pop 1s ease-out forwards}

@keyframes shimeji-tail{from{transform:rotate(-12deg)}to{transform:rotate(16deg)}}
@keyframes shimeji-head{from{transform:rotate(-2deg) translateY(0)}to{transform:rotate(2deg) translateY(-1px)}}
@keyframes shimeji-paw-a{from{transform:translateY(-3px) translateX(-1px)}to{transform:translateY(3px) translateX(2px)}}
@keyframes shimeji-paw-b{from{transform:translateY(3px) translateX(2px)}to{transform:translateY(-3px) translateX(-1px)}}
@keyframes shimeji-body-run{from{transform:scaleX(1.03) scaleY(.97)}to{transform:scaleX(.97) scaleY(1.03)}}
@keyframes shimeji-climb-a{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
@keyframes shimeji-climb-b{from{transform:translateX(4px)}to{transform:translateX(-4px)}}
@keyframes shimeji-jump-squash{0%{transform:scaleX(1.06) scaleY(.94)}35%{transform:scaleX(.94) scaleY(1.08)}100%{transform:scale(1)}}
@keyframes shimeji-excited{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-12deg) scale(1.08)}50%{transform:rotate(11deg) scale(.96)}75%{transform:rotate(-7deg) scale(1.06)}}

/* The old V4 reduced-motion rule pinned the cat to the bottom-right. V7 keeps a usable mascot position;
   movement is controlled by the JS toggle rather than CSS pinning. */
@media(prefers-reduced-motion:reduce){
  .roaming-cat{left:0!important;right:auto!important;top:0!important;bottom:auto!important;transform:translate3d(var(--cat-x,16px),var(--cat-y,560px),0)!important;transition:opacity .25s ease!important}
  .cat-tail,.cat-head,.cat-feet,.roaming-cat .paw,.roaming-cat .cat-body{animation:none!important}
}
@media(max-width:350px){.roaming-cat{width:66px!important;height:60px!important}.roaming-cat .cat-sprite,.roaming-cat svg{width:66px!important}}


/* ===== V8: anime sticker Shimeji cat ===== */
.roaming-cat{
  width:96px;
  height:96px;
  padding:0;
  border:0;
  background:transparent;
  filter:drop-shadow(0 8px 10px rgba(70,17,24,.18));
}
.roaming-cat__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform-origin:50% 78%;
  will-change:transform,filter;
  user-select:none;
  -webkit-user-drag:none;
}
.roaming-cat.is-flipped .roaming-cat__img{transform:scaleX(-1)}
.roaming-cat.is-running .roaming-cat__img{animation:anime-cat-walk .34s ease-in-out infinite alternate}
.roaming-cat.is-dashing .roaming-cat__img{animation:anime-cat-dash .16s ease-in-out infinite alternate}
.roaming-cat.is-jumping .roaming-cat__img{animation:anime-cat-jump .62s cubic-bezier(.2,.8,.24,1) 1}
.roaming-cat.is-spinning .roaming-cat__img{animation:anime-cat-spin .82s cubic-bezier(.2,.75,.22,1) 1}
.roaming-cat.is-wiggling .roaming-cat__img{animation:anime-cat-wiggle .7s ease-in-out 1}
.roaming-cat.is-pouncing .roaming-cat__img{animation:anime-cat-pounce .68s cubic-bezier(.22,.8,.24,1) 1}
.roaming-cat.is-looking .roaming-cat__img{animation:anime-cat-look .82s ease-in-out 1}
.roaming-cat.is-sitting .roaming-cat__img{animation:anime-cat-sit .95s ease-in-out 1}
.roaming-cat.is-sleeping .roaming-cat__img{animation:anime-cat-sleep 1.7s ease-in-out infinite}
.cat-bubble{top:-15px;left:56px;z-index:2}
@keyframes anime-cat-walk{from{transform:translateY(0) rotate(-2deg) scale(1)}to{transform:translateY(-5px) rotate(2deg) scale(1.02)}}
@keyframes anime-cat-dash{from{transform:translateY(1px) scaleX(1.01) scaleY(.98) rotate(-1deg)}to{transform:translateY(-6px) scaleX(.98) scaleY(1.03) rotate(2deg)}}
@keyframes anime-cat-jump{0%,100%{transform:translateY(0) rotate(0) scale(1)}42%{transform:translateY(-34px) rotate(-6deg) scale(1.03)}68%{transform:translateY(-10px) rotate(5deg) scale(.98)}}
@keyframes anime-cat-spin{0%{transform:rotate(0) scale(1)}45%{transform:rotate(190deg) scale(.9)}100%{transform:rotate(360deg) scale(1)}}
@keyframes anime-cat-wiggle{0%,100%{transform:rotate(0) translateX(0)}20%{transform:rotate(-7deg) translateX(-4px)}40%{transform:rotate(7deg) translateX(4px)}60%{transform:rotate(-5deg) translateX(-3px)}80%{transform:rotate(5deg) translateX(3px)}}
@keyframes anime-cat-pounce{0%{transform:translateY(0) translateX(0) scale(1)}28%{transform:translateY(8px) scaleX(1.06) scaleY(.92)}62%{transform:translateY(-24px) translateX(12px) rotate(7deg) scale(.97)}100%{transform:translateY(0) translateX(0) rotate(0) scale(1)}}
@keyframes anime-cat-look{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}55%{transform:rotate(13deg)}75%{transform:rotate(-6deg)}}
@keyframes anime-cat-sit{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(7px) scaleX(1.05) scaleY(.93)}70%{transform:translateY(4px) scaleX(1.03) scaleY(.96)}}
@keyframes anime-cat-sleep{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(2px) scale(.985)}}
@media(max-width:350px){.roaming-cat{width:84px;height:84px}.cat-bubble{left:50px}}
@media(prefers-reduced-motion:reduce){.roaming-cat__img{animation:none!important;transform:none!important}}


/* ===== V9: true sprite animation for anime cat ===== */
.roaming-cat{
  width:96px;
  height:96px;
  padding:0;
  border:0;
  background:transparent;
  filter:drop-shadow(0 8px 10px rgba(70,17,24,.18));
}
.roaming-cat__flip,
.roaming-cat__actor,
.roaming-cat__sprite{
  display:block;
  width:100%;
  height:100%;
}
.roaming-cat__flip{transform-origin:50% 50%}
.roaming-cat__actor{transform-origin:50% 78%; will-change:transform}
.roaming-cat__sprite{
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:auto 100%;
  image-rendering:auto;
  will-change:background-position;
}
.roaming-cat.is-left .roaming-cat__flip{transform:scaleX(-1)}
.roaming-cat.is-climb-left .roaming-cat__flip{transform:scaleX(-1)}
.roaming-cat.is-climb-left .roaming-cat__actor{transform:rotate(-90deg)}
.roaming-cat.is-climb-right .roaming-cat__actor{transform:rotate(90deg)}
.roaming-cat:not(.is-walking):not(.is-running):not(.is-climb-left):not(.is-climb-right):not(.is-jumping):not(.is-falling):not(.is-sitting):not(.is-sleeping):not(.is-excited) .roaming-cat__sprite,
.roaming-cat .roaming-cat__sprite{
  background-image:url("assets/cat-sprite-walk.png");
  animation:cat-sprite-8 .82s steps(8) infinite;
}
.roaming-cat.is-walking .roaming-cat__sprite{background-image:url("assets/cat-sprite-walk.png");animation:cat-sprite-8 .82s steps(8) infinite}
.roaming-cat.is-running .roaming-cat__sprite{background-image:url("assets/cat-sprite-run.png");animation:cat-sprite-8 .42s steps(8) infinite}
.roaming-cat.is-climb-left .roaming-cat__sprite,.roaming-cat.is-climb-right .roaming-cat__sprite{background-image:url("assets/cat-sprite-climb.png");animation:cat-sprite-6 .56s steps(6) infinite}
.roaming-cat.is-jumping .roaming-cat__sprite,.roaming-cat.is-falling .roaming-cat__sprite{background-image:url("assets/cat-sprite-jump.png");animation:cat-sprite-4 .58s steps(4) infinite}
.roaming-cat.is-sitting .roaming-cat__sprite{background-image:url("assets/cat-sprite-sit.png");animation:cat-sprite-4 1.1s steps(4) infinite}
.roaming-cat.is-sleeping .roaming-cat__sprite{background-image:url("assets/cat-sprite-sleep.png");animation:cat-sprite-4 1.3s steps(4) infinite}
.roaming-cat.is-excited .roaming-cat__sprite{background-image:url("assets/cat-sprite-excited.png");animation:cat-sprite-4 .4s steps(4) infinite}
.roaming-cat.is-jumping .roaming-cat__actor{animation:anime-cat-jump .62s cubic-bezier(.2,.8,.24,1) 1}
.roaming-cat.is-excited .roaming-cat__actor{animation:anime-cat-wiggle .55s ease-in-out infinite alternate}
.roaming-cat.is-sitting .roaming-cat__actor{animation:anime-cat-sit 1.2s ease-in-out infinite}
.roaming-cat.is-sleeping .roaming-cat__actor{animation:anime-cat-sleep 1.7s ease-in-out infinite}
.cat-bubble{top:-15px;left:56px;z-index:2}
@keyframes cat-sprite-8{from{background-position:0 0}to{background-position:-768px 0}}
@keyframes cat-sprite-6{from{background-position:0 0}to{background-position:-576px 0}}
@keyframes cat-sprite-4{from{background-position:0 0}to{background-position:-384px 0}}
@media(max-width:350px){.roaming-cat{width:84px;height:84px}.cat-bubble{left:50px}}
@media(prefers-reduced-motion:reduce){.roaming-cat__sprite,.roaming-cat__actor,.roaming-cat__flip{animation:none!important;transform:none!important}}


/* ===== V10: shimeji-pro sprite system ===== */
.roaming-cat{width:96px;height:96px;padding:0;border:0;background:transparent;filter:drop-shadow(0 8px 10px rgba(70,17,24,.18));touch-action:none;user-select:none}
.roaming-cat__flip,.roaming-cat__actor,.roaming-cat__sprite{display:block;width:100%;height:100%}
.roaming-cat__flip{transform-origin:50% 50%}
.roaming-cat__actor{transform-origin:50% 78%;will-change:transform}
.roaming-cat__sprite{background-repeat:no-repeat;background-position:0 0;background-size:auto 100%;image-rendering:auto;will-change:background-position}
.roaming-cat.is-left .roaming-cat__flip,.roaming-cat.is-climb-left .roaming-cat__flip,.roaming-cat.is-hang-left .roaming-cat__flip{transform:scaleX(-1)}
.roaming-cat.is-climb-left .roaming-cat__actor,.roaming-cat.is-hang-left .roaming-cat__actor{transform:rotate(-90deg)}
.roaming-cat.is-climb-right .roaming-cat__actor,.roaming-cat.is-hang-right .roaming-cat__actor{transform:rotate(90deg)}
.roaming-cat .roaming-cat__sprite{background-image:url("assets/cat-sprite-walk.png");animation:cat-sprite-12 .92s steps(12) infinite}
.roaming-cat.is-walking .roaming-cat__sprite{background-image:url("assets/cat-sprite-walk.png");animation:cat-sprite-12 .88s steps(12) infinite}
.roaming-cat.is-running .roaming-cat__sprite{background-image:url("assets/cat-sprite-run.png");animation:cat-sprite-12 .42s steps(12) infinite}
.roaming-cat.is-climb-left .roaming-cat__sprite,.roaming-cat.is-climb-right .roaming-cat__sprite{background-image:url("assets/cat-sprite-climb.png");animation:cat-sprite-8 .66s steps(8) infinite}
.roaming-cat.is-hang-left .roaming-cat__sprite,.roaming-cat.is-hang-right .roaming-cat__sprite{background-image:url("assets/cat-sprite-hang.png");animation:cat-sprite-6 .9s steps(6) infinite}
.roaming-cat.is-jumping .roaming-cat__sprite{background-image:url("assets/cat-sprite-jump.png");animation:cat-sprite-6 .56s steps(6) 1 forwards}
.roaming-cat.is-falling .roaming-cat__sprite{background-image:url("assets/cat-sprite-fall.png");animation:cat-sprite-6 .62s steps(6) infinite}
.roaming-cat.is-sitting .roaming-cat__sprite{background-image:url("assets/cat-sprite-sit.png");animation:cat-sprite-6 1.16s steps(6) infinite}
.roaming-cat.is-sleeping .roaming-cat__sprite{background-image:url("assets/cat-sprite-sleep.png");animation:cat-sprite-6 1.46s steps(6) infinite}
.roaming-cat.is-waving .roaming-cat__sprite{background-image:url("assets/cat-sprite-wave.png");animation:cat-sprite-8 .72s steps(8) infinite}
.roaming-cat.is-excited .roaming-cat__sprite{background-image:url("assets/cat-sprite-excited.png");animation:cat-sprite-8 .46s steps(8) infinite}
.roaming-cat.is-jumping .roaming-cat__actor{animation:anime-cat-jump .62s cubic-bezier(.2,.8,.24,1) 1}
.roaming-cat.is-falling .roaming-cat__actor{animation:anime-cat-fall-wobble .82s ease-in-out infinite}
.roaming-cat.is-waving .roaming-cat__actor{animation:anime-cat-wave-bob .92s ease-in-out infinite}
.roaming-cat.is-excited .roaming-cat__actor{animation:anime-cat-wiggle .55s ease-in-out infinite alternate}
.roaming-cat.is-sitting .roaming-cat__actor{animation:anime-cat-sit 1.2s ease-in-out infinite}
.roaming-cat.is-sleeping .roaming-cat__actor{animation:anime-cat-sleep 1.7s ease-in-out infinite}
.roaming-cat.is-hang-left .roaming-cat__actor,.roaming-cat.is-hang-right .roaming-cat__actor{animation:anime-cat-hang 1.1s ease-in-out infinite}
.cat-bubble{top:-15px;left:56px;z-index:2}
@keyframes cat-sprite-12{from{background-position:0 0}to{background-position:-1152px 0}}
@keyframes cat-sprite-8{from{background-position:0 0}to{background-position:-768px 0}}
@keyframes cat-sprite-6{from{background-position:0 0}to{background-position:-576px 0}}
@keyframes anime-cat-fall-wobble{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-8deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-4deg)}}
@keyframes anime-cat-wave-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes anime-cat-hang{0%,100%{transform:translateY(0) rotate(var(--hang-rot,90deg))}50%{transform:translateY(2px) rotate(var(--hang-rot,90deg))}}
.roaming-cat.is-hang-left .roaming-cat__actor{--hang-rot:-90deg}
.roaming-cat.is-hang-right .roaming-cat__actor{--hang-rot:90deg}
.float-btn--cat.is-paused{opacity:.65}
@media(max-width:350px){.roaming-cat{width:84px;height:84px}.cat-bubble{left:50px}}
@media(prefers-reduced-motion:reduce){.roaming-cat__sprite,.roaming-cat__actor,.roaming-cat__flip{animation:none!important;transform:none!important}}


/* ===== V12: show the FULL wedding photo, no cropping ===== */
.photo-slot > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center center;
}
.photo-slot.has-photo::after{display:none}
.photo-slot.has-photo{
  background:#f6eadb;
}

/* Keep full photo visible inside every layout slot. */
.photo-slot--hero > img,
.mini-gallery .photo-slot > img,
.photo-slot--portrait > img,
.story-photo > img{
  object-fit:contain;
}


/* ===== V16: photo styling - full image nhưng đẹp hơn ===== */
.photo-slot.has-photo{
  position:relative;
  isolation:isolate;
  background:#efe1d1;
  border-color:rgba(101,18,32,.12);
}
.photo-slot.has-photo::after{display:none!important}
.photo-slot.has-photo-backdrop::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-12px;
  background-image:var(--photo-bg);
  background-size:cover;
  background-position:center;
  filter:blur(12px) saturate(.8) brightness(.96);
  transform:scale(1.10);
  opacity:.34;
  pointer-events:none;
}
.photo-slot.has-photo > img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:rgba(255,247,237,.18);
}

/* Ảnh cover trong phong bì: tạo cảm giác ảnh in/Polaroid */
.photo-slot--hero.has-photo{
  padding:7px 7px 18px;
  background:#fff8ed;
  border:1px solid rgba(81,52,42,.12);
  box-shadow:0 10px 22px rgba(64,25,25,.16);
}
.photo-slot--hero.has-photo::before{display:none}
.photo-slot--hero.has-photo > img{
  background:#eee4d9;
  box-shadow:inset 0 0 0 1px rgba(70,35,30,.06);
}

/* Gallery: giữ nguyên ảnh nhưng dùng backdrop mờ để lấp khoảng trống. */
.mini-gallery{
  gap:8px;
  margin:10px -7px 32px;
}
.mini-gallery .photo-slot{
  height:148px;
  border-radius:3px;
  border:1px solid rgba(238,214,190,.22);
  box-shadow:0 7px 15px rgba(31,5,10,.10);
}
.mini-gallery .photo-slot > img{
  padding:3px;
  background:rgba(255,246,234,.12);
}

/* Portrait: khung giấy mềm, không còn cảm giác ảnh bị đặt thô vào box. */
.portrait-card.has-photo{
  padding:8px;
  background:#f8ecdd;
  border:1px solid rgba(101,18,32,.10);
  box-shadow:0 18px 32px rgba(77,31,28,.16);
}
.portrait-card.has-photo > img{
  border-radius:4px 4px 46px 46px;
  background:rgba(255,250,242,.22);
}

/* Love Story: ảnh như tấm ảnh mini đặt trên timeline. */
.story-photo.has-photo{
  height:116px;
  padding:5px;
  border-radius:5px;
  background:#f4e5d3;
  border:1px solid rgba(232,209,166,.32);
  box-shadow:0 8px 16px rgba(26,4,9,.14);
}
.story-photo.has-photo > img{
  border-radius:2px;
  background:rgba(255,248,238,.12);
}

@media(max-width:350px){
  .mini-gallery .photo-slot{height:132px}
  .story-photo.has-photo{height:104px}
}


/* ===== V17: luxury envelope hero inspired by classic wedding invitations ===== */
.hero-envelope-scene{
  min-height:650px;
  padding:20px 18px 24px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 18%,rgba(106,23,36,.035),transparent 28%),
    radial-gradient(circle at 84% 76%,rgba(170,127,75,.05),transparent 31%),
    repeating-linear-gradient(0deg,rgba(94,60,45,.018) 0,rgba(94,60,45,.018) 1px,transparent 1px,transparent 4px),
    #fbf2e5;
}
.hero-envelope-scene:after{
  content:"";
  position:absolute;
  left:10px;right:10px;bottom:0;
  height:118px;
  opacity:.12;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(101,18,32,.22) 8% 8.4%,transparent 8.4% 20%,rgba(101,18,32,.18) 20% 20.4%,transparent 20.4% 79%,rgba(101,18,32,.18) 79% 79.4%,transparent 79.4% 92%,rgba(101,18,32,.22) 92% 92.4%,transparent 92.4%),
    linear-gradient(12deg,transparent 47%,rgba(101,18,32,.16) 48% 49%,transparent 50%) 0 72px/92px 46px repeat-x;
  mask-image:linear-gradient(to bottom,transparent,#000 30%,#000);
}
.hero-save-date{
  position:relative;
  z-index:4;
  margin:0 0 2px;
  color:#7a1a2a;
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  letter-spacing:.33em;
}
.envelope--luxury{
  position:relative;
  display:block;
  width:min(100%,390px);
  height:535px;
  margin:0 auto;
  border:0;
  padding:0;
  background:transparent;
  cursor:default;
  perspective:none;
  overflow:visible;
}
.envelope--luxury .envelope__back{
  position:absolute;
  z-index:1;
  left:34px;
  right:34px;
  bottom:38px;
  height:246px;
  border-radius:4px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.05),transparent 36%),
    linear-gradient(180deg,#7b1729,#61101f 82%);
  box-shadow:0 20px 36px rgba(86,24,31,.16),inset 0 0 0 1px rgba(255,255,255,.04);
}
.envelope__photo-frame{
  position:absolute;
  z-index:4;
  left:50%;
  top:49px;
  width:216px;
  height:318px;
  padding:10px 10px 14px;
  transform:translateX(-29%) rotate(7deg);
  background:#fffdf9;
  box-shadow:0 13px 24px rgba(74,37,32,.17);
  transition:transform .85s cubic-bezier(.2,.8,.2,1),top .85s cubic-bezier(.2,.8,.2,1);
}
.envelope--luxury .envelope__card{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  transition:none!important;
  border:0;
  background:#eee3d8;
}
.envelope--luxury .envelope__card.has-photo-backdrop:before{
  opacity:.52;
  filter:blur(13px) saturate(.85) brightness(.82);
}
.envelope--luxury .envelope__card img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
}
.envelope--luxury.is-open .envelope__photo-frame{
  top:36px;
  transform:translateX(-29%) rotate(5deg) scale(1.015);
}
.envelope__front-base{
  position:absolute;
  z-index:5;
  left:34px;
  right:34px;
  bottom:38px;
  height:246px;
  background:linear-gradient(180deg,#741527,#62101f);
  clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);
  border-radius:0 0 4px 4px;
}
.envelope__flap{
  position:absolute;
  z-index:6;
  bottom:38px;
  height:246px;
  pointer-events:none;
}
.envelope__flap--left{
  left:34px;
  width:51%;
  clip-path:polygon(0 0,100% 56%,0 100%);
  background:linear-gradient(138deg,#82192c,#65111f 78%);
}
.envelope__flap--right{
  right:34px;
  width:51%;
  clip-path:polygon(100% 0,0 56%,100% 100%);
  background:linear-gradient(222deg,#7d172a,#5d0e1c 78%);
}
.envelope__flap--bottom{
  z-index:6;
  left:34px;
  right:34px;
  bottom:38px;
  height:142px;
  clip-path:polygon(0 100%,50% 7%,100% 100%);
  background:linear-gradient(180deg,#711322,#5b0d19);
}
.wax-seal--heart{
  position:absolute;
  z-index:9;
  left:50%;
  bottom:111px;
  width:64px;
  height:64px;
  margin-left:-32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#71391f;
  font-family:Georgia,serif;
  font-size:35px;
  font-weight:400;
  background:
    radial-gradient(circle at 36% 29%,#f2d58f 0 10%,transparent 11%),
    radial-gradient(circle at 50% 45%,#d7a650 0 48%,#a96f2e 72%,#87521e 100%);
  box-shadow:
    0 5px 10px rgba(55,23,16,.28),
    inset 0 0 0 4px rgba(126,77,29,.28),
    inset 0 0 0 7px rgba(255,231,167,.24);
  text-shadow:0 1px rgba(255,255,255,.45);
}
.envelope--luxury.is-open .wax-seal--heart{
  transform:none;
  opacity:1;
}

/* CSS bouquet: burgundy + cream flowers behind the photo */
.envelope__bouquet{
  position:absolute;
  z-index:3;
  left:18px;
  top:106px;
  width:190px;
  height:285px;
  transform:rotate(-6deg);
  pointer-events:none;
}
.bouquet-stem{
  position:absolute;
  left:78px;
  bottom:56px;
  width:2px;
  height:190px;
  border-radius:3px;
  background:#6e5e3b;
  transform-origin:bottom center;
  opacity:.75;
}
.stem-a{transform:rotate(-18deg)}
.stem-b{height:222px;transform:rotate(5deg)}
.stem-c{height:165px;transform:rotate(23deg)}
.bouquet-leaf{
  position:absolute;
  width:35px;
  height:15px;
  border-radius:100% 0 100% 0;
  background:linear-gradient(135deg,#94875a,#5f6440);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.leaf-a{left:37px;top:80px;transform:rotate(-35deg)}
.leaf-b{left:83px;top:113px;transform:rotate(25deg) scale(.9)}
.leaf-c{left:27px;top:143px;transform:rotate(-20deg) scale(1.1)}
.leaf-d{left:100px;top:61px;transform:rotate(45deg) scale(.82)}
.bouquet-flower{
  position:absolute;
  width:28px;
  height:28px;
  border-radius:50%;
  background:currentColor;
  box-shadow:
    0 -17px 0 7px currentColor,
    16px -5px 0 7px currentColor,
    10px 14px 0 7px currentColor,
    -10px 14px 0 7px currentColor,
    -16px -5px 0 7px currentColor,
    0 0 0 7px rgba(255,255,255,.05);
}
.bouquet-flower:after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:#8a591e;
  box-shadow:inset 0 0 0 3px rgba(255,218,151,.22);
}
.flower-wine{color:#701324}
.flower-cream{color:#efe0c2}
.flower-a{left:32px;top:136px;transform:scale(1.05)}
.flower-b{left:88px;top:180px;transform:scale(1.17)}
.flower-c{left:56px;top:212px;transform:scale(.9)}
.flower-d{left:108px;top:128px;transform:scale(.72)}
.flower-e{left:18px;top:200px;transform:scale(.67)}
.bouquet-berry{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6a2431;
  box-shadow:
    10px -15px 0 #772735,
    19px -31px 0 #5e202b,
    26px -48px 0 #7d2938,
    31px -67px 0 #5b1c28,
    33px -87px 0 #762634;
}
.berry-a{left:68px;top:95px;transform:rotate(-10deg)}
.berry-b{left:121px;top:108px;transform:rotate(20deg) scale(.78)}

.hero-sketch{
  position:absolute;
  z-index:0;
  bottom:33px;
  width:130px;
  height:92px;
  opacity:.08;
  border-bottom:1px solid var(--wine);
  pointer-events:none;
}
.hero-sketch:before,.hero-sketch:after{
  content:"";
  position:absolute;
  bottom:0;
  border:1px solid var(--wine);
  border-bottom:0;
}
.hero-sketch:before{left:12px;width:42px;height:49px;clip-path:polygon(50% 0,100% 28%,100% 100%,0 100%,0 28%)}
.hero-sketch:after{right:6px;width:58px;height:71px;clip-path:polygon(50% 0,100% 30%,100% 100%,0 100%,0 30%)}
.hero-sketch--left{left:-6px}
.hero-sketch--right{right:-6px;transform:scaleX(-1)}
.hero-date--minimal{
  position:relative;
  z-index:8;
  margin:-8px 0 0;
  color:#7a1a2a;
  font-size:12px;
  letter-spacing:.26em;
}
.hero-scroll-hint{
  position:relative;
  z-index:8;
  margin:8px 0 0;
  color:#96766f;
  font-family:var(--serif);
  font-size:11px;
  font-style:italic;
}

@media(max-width:380px){
  .hero-envelope-scene{min-height:610px;padding-left:10px;padding-right:10px}
  .envelope--luxury{height:500px;transform:scale(.94);transform-origin:top center;margin-bottom:-28px}
  .envelope__photo-frame{left:49%;width:202px;height:298px}
}


/* ===== V18: use the supplied invitation artwork as the hero ===== */
.hero-static-scene{
  min-height:auto;
  padding:0 0 22px;
  text-align:center;
  overflow:hidden;
  background:transparent;
}
.hero-static-card{
  width:100%;
  margin:0 auto;
  background:transparent;
  line-height:0;
}
.hero-static-card img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  object-fit:contain;
}
.hero-static-scene .hero-scroll-hint{
  margin:12px 18px 0;
  color:#8d6f72;
  font-family:var(--serif);
  font-size:13px;
  font-style:italic;
  line-height:1.4;
}
@media(min-width:431px){
  .hero-static-card{max-width:430px}
}

/* ===== Portrait photo layout: tối ưu ảnh cưới chụp đứng =====
   Giữ nguyên toàn bộ giao diện hiện tại, chỉ đổi tỷ lệ các khung ảnh để ảnh dọc
   hiển thị lớn hơn và gần như kín khung mà không cần crop mạnh. */

/* Gallery 2 cột: đổi từ khung ngang/thấp sang khung dọc 2:3. */
.mini-gallery{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:10px -7px 34px;
  align-items:start;
}

.mini-gallery .photo-slot{
  width:100%;
  height:auto;
  aspect-ratio:2 / 3;
  border-radius:5px;
  overflow:hidden;
  background:#efe1d1;
}

.mini-gallery .photo-slot.has-photo{
  height:auto;
  aspect-ratio:2 / 3;
  padding:0;
}

.mini-gallery .photo-slot.has-photo > img{
  width:100%;
  height:100%;
  padding:0;
  object-fit:contain;
  object-position:center center;
  background:transparent;
}

/* Nền blur chỉ lộ rất ít khi ảnh thực tế không đúng 2:3. */
.mini-gallery .photo-slot.has-photo-backdrop::before{
  inset:-10px;
  filter:blur(14px) saturate(.78) brightness(.93);
  opacity:.28;
}

/* Ảnh portrait lớn: dùng đúng khung dọc, không ép vào 230x310 cũ. */
.portrait-break{padding:48px 24px 40px}
.portrait-card,
.portrait-card.has-photo{
  width:min(100%,300px);
  height:auto;
  aspect-ratio:auto;
  margin:20px auto 18px;
  padding:5px;
  border:0;
  border-radius:8px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 14px 28px rgba(63,40,40,.18);
}

.portrait-card > img,
.portrait-card.has-photo > img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center center;
  border-radius:4px;
  background:transparent;
}

/* Love Story: khung cũ cao 108/116px làm ảnh đứng bị thu nhỏ quá nhiều. */
.story-photo,
.story-photo.has-photo{
  width:100%;
  height:auto;
  aspect-ratio:2 / 3;
  padding:4px;
  border-radius:5px;
  overflow:hidden;
  background:#f4e5d3;
}

.story-photo.has-photo > img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  border-radius:2px;
  background:transparent;
}

/* Cho từng dòng Love Story đủ cao theo ảnh dọc mới. */
.story-timeline article{
  min-height:180px;
}

/* Nếu ảnh của bạn gần tỷ lệ 4:5 hơn 2:3, chỉ cần đổi 2 / 3 thành 4 / 5
   ở ba nhóm phía trên. */

@media(max-width:350px){
  .mini-gallery{
    gap:8px;
    margin-left:-5px;
    margin-right:-5px;
  }

  .mini-gallery .photo-slot,
  .mini-gallery .photo-slot.has-photo,
  .story-photo,
  .story-photo.has-photo{
    height:auto;
    aspect-ratio:2 / 3;
  }

  .portrait-card,
  .portrait-card.has-photo{
    width:min(100%,300px);
    height:auto;
    aspect-ratio:auto;
  }
}


/* ===== V3 FIX: ẢNH GOOGLE MAPS =====
   Chỉ cần lưu ảnh chụp Google Maps tại: assets/photos/google-map.jpg */
.map-photo-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.map-placeholder--photo{
  height:190px;
  padding:0;
  margin:22px -6px 17px;
  position:relative;
  overflow:hidden;
  border-radius:4px;
  background:#eadfce;
  box-shadow:inset 0 0 0 1px rgba(232,209,166,.22),0 8px 18px rgba(43,8,14,.12);
}

/* Bỏ hai đường trang trí của placeholder cũ khi đã dùng ảnh thật. */
.map-placeholder--photo::before,
.map-placeholder--photo::after{
  display:none;
}

.map-placeholder--photo > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform .35s ease,filter .35s ease;
}

.map-photo-link:hover .map-placeholder--photo > img{
  transform:scale(1.018);
  filter:saturate(.94) contrast(.98);
}

.map-photo-fallback{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:linear-gradient(135deg,#d8eee2,#c5dfd4);
  color:#477263;
  text-align:center;
}

.map-placeholder--photo.is-map-missing .map-photo-fallback{
  display:flex;
}

.map-photo-fallback .map-pin{
  font-size:30px;
}

.map-photo-fallback p{
  margin:5px 0 3px;
  font-size:9px;
  font-weight:600;
  letter-spacing:.12em;
}

.map-photo-fallback small{
  font-size:8px;
}

/* ===== V3 FIX: SHIMEJI SPRITE =====
   CSS cũ V7 dùng width/height !important 74x66, trong khi sprite V10 được tạo
   theo frame 96x96. Kích thước sai làm background-position nhảy lệch frame,
   nên đôi lúc chỉ còn bong bóng ZZZ mà không thấy thân mèo. */
.roaming-cat{
  width:96px!important;
  height:96px!important;
  overflow:visible!important;
}

.roaming-cat__flip,
.roaming-cat__actor,
.roaming-cat__sprite{
  width:100%!important;
  height:100%!important;
}

.roaming-cat__sprite{
  background-size:auto 96px!important;
  background-repeat:no-repeat!important;
}

/* Giữ frame 96x96 cả màn hình nhỏ để steps() khớp chính xác sprite sheet. */
@media(max-width:350px){
  .roaming-cat{
    width:96px!important;
    height:96px!important;
  }

  .roaming-cat__sprite{
    background-size:auto 96px!important;
  }

  .cat-bubble{
    left:56px!important;
  }
}
/* =========================
   GOOGLE CALENDAR BUTTON
========================= */

.calendar-action{
  display:flex;
  justify-content:center;
  padding:20px 18px 8px;
}

.google-calendar-btn{
  width:100%;
  max-width:330px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;

  padding:13px 22px;

  border:1px solid rgba(201,160,105,.42);
  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      var(--wine) 0%,
      var(--wine-2) 100%
    );

  color:var(--cream);

  box-shadow:
    0 10px 26px rgba(101,18,32,.18),
    inset 0 1px 0 rgba(255,255,255,.12);

  cursor:pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.google-calendar-btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 14px 32px rgba(101,18,32,.24),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.google-calendar-btn:active{
  transform:scale(.98);
}

.calendar-icon{
  width:35px;
  height:35px;

  flex:0 0 35px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(255,248,238,.12);
}

.calendar-icon svg{
  width:20px;
  height:20px;

  fill:none;
  stroke:var(--gold-soft);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.calendar-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;

  line-height:1.25;
}

.calendar-text strong{
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;

  letter-spacing:.16em;
}

.calendar-text small{
  margin-top:3px;

  font-family:var(--serif);
  font-size:13px;
  font-style:italic;

  letter-spacing:.02em;

  color:rgba(255,248,238,.72);
}

@media(max-width:430px){

  .calendar-action{
    padding:18px 15px 7px;
  }

  .google-calendar-btn{
    max-width:310px;
    padding:12px 19px;
  }

  .calendar-icon{
    width:33px;
    height:33px;
    flex-basis:33px;
  }

  .calendar-text strong{
    font-size:12px;
  }

  .calendar-text small{
    font-size:12.5px;
  }
}







/* =========================================
   BOHO COUPLE - FLUID MOBILE ARTBOARD
   Baseline composition: 375px wide.
   All coordinates are percentages, so 320 / 375 / 390 / 430px
   keep the same visual composition instead of jumping at 390px.
========================================= */

.boho-couple-section{
  position:relative;
  width:100%;
  max-width:430px;
  aspect-ratio:1 / 2;
  margin:0 auto;
  overflow:hidden;
  background:transparent;
  color:#604033;
  isolation:isolate;
  container-type:inline-size;
}

.boho-couple-stage{
  position:absolute;
  inset:0;
}

/* Hoa lớn phía trên */
.boho-flower-top-wrap{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:34%;
  overflow:hidden;
  z-index:4;
  pointer-events:none;
}

.boho-flower-top{
  position:absolute;
  top:-34%;
  left:8%;
  width:92%;
  max-width:none;
  height:auto;
  display:block;
  pointer-events:none;
  user-select:none;
  transform:rotate(180deg);
}

.party-time--invitation{grid-template-columns:1fr 2fr;gap:14px;margin:24px 0 10px}
.party-time--invitation>div:first-child{padding-right:14px;border-right:1px solid var(--gold-soft)}
.party-time--invitation small{font-size:9px;font-weight:600;line-height:1.5;letter-spacing:0}
.party-time--invitation b{font-size:30px;font-weight:600;line-height:1.2;white-space:nowrap}
.party-lunar-date{margin:0 0 24px;color:var(--gold-soft);font-family:var(--serif);font-size:14px;line-height:1.4;text-wrap:balance}

.album-section{container-type:inline-size;position:relative;padding:0 0 24px;text-align:center;overflow:hidden}
.album-heading{margin:0 0 22px;color:var(--wine);font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:0}
.album-stage{position:relative;aspect-ratio:1.1;perspective:900px;touch-action:pan-y;outline-offset:-3px}
.album-slide{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:2 / 3;margin:0;padding:0;overflow:hidden;border:0;border-radius:7px;background:var(--paper);box-shadow:0 10px 24px rgba(63,40,40,.17);cursor:pointer;transform:translate(-50%,-50%);transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .7s ease,box-shadow .85s ease;backface-visibility:hidden}
.album-slide img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;filter:brightness(.94);transition:filter .85s ease}
.album-slide[data-position="0"]{z-index:4;opacity:1;transform:translate(-50%,-50%) translateZ(18px);box-shadow:0 18px 32px rgba(63,40,40,.22),0 4px 10px rgba(63,40,40,.08)}
.album-slide[data-position="0"] img{filter:brightness(1)}
.album-slide.is-wrapping{transition:none}
.album-slide[data-position="1"]{z-index:3;opacity:.8;transform:translate(-50%,-50%) translateX(22cqw) rotateY(-42deg) scale(.86)}
.album-slide[data-position="-1"]{z-index:3;opacity:.8;transform:translate(-50%,-50%) translateX(-22cqw) rotateY(42deg) scale(.86)}
.album-slide[data-position="2"]{z-index:2;opacity:.5;transform:translate(-50%,-50%) translateX(38cqw) rotateY(-58deg) scale(.7)}
.album-slide[data-position="-2"]{z-index:2;opacity:.5;transform:translate(-50%,-50%) translateX(-38cqw) rotateY(58deg) scale(.7)}
.album-slide[data-position="3"]{z-index:1;opacity:.25;transform:translate(-50%,-50%) translateX(49cqw) rotateY(-66deg) scale(.56)}
.album-slide[data-position="-3"]{z-index:1;opacity:.25;transform:translate(-50%,-50%) translateX(-49cqw) rotateY(66deg) scale(.56)}
.album-arrow{position:absolute;top:50%;z-index:5;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,248,238,.85);color:var(--wine);font-family:Georgia,serif;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(63,40,40,.1)}
.album-arrow--prev{left:12px}.album-arrow--next{right:12px}
.album-dots{display:flex;justify-content:center;align-items:center;margin:13px 0 0}
.album-dot{position:relative;width:24px;height:28px;padding:0;border:0;background:transparent;cursor:pointer}
.album-dot::after{content:"";position:absolute;top:10px;left:8px;width:8px;height:8px;border-radius:8px;background:#ccb7ac;transition:background .35s ease,width .45s cubic-bezier(.22,1,.36,1),left .45s cubic-bezier(.22,1,.36,1)}
.album-dot[aria-current="true"]::after{left:3px;width:18px;background:var(--wine)}
.album-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.album-slide:focus-visible,.album-arrow:focus-visible,.album-dot:focus-visible,.album-stage:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.album-lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;padding:54px 46px 40px;border:0;background:#24181beF;color:var(--paper);overflow:hidden}
.album-lightbox[open]{display:flex;align-items:center;justify-content:center}
.album-lightbox::backdrop{background:rgba(28,15,18,.9)}
.album-lightbox img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.album-lightbox button{position:absolute;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,248,238,.12);color:var(--paper);font-family:Georgia,serif;font-size:30px;cursor:pointer}
.album-lightbox button:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.album-lightbox__close{top:10px;right:12px}.album-lightbox__prev{left:3px;top:50%}.album-lightbox__next{right:3px;top:50%}
.album-lightbox p{position:absolute;bottom:12px;left:0;right:0;margin:0;text-align:center;font-size:12px}
body:has(.album-lightbox[open]){overflow:hidden}
@media(prefers-reduced-motion:reduce){.album-slide,.album-slide img,.album-dot::after{transition:none}}

/* Khung ảnh dùng tỉ lệ theo artboard thay vì pixel cố định */
.boho-photo{
  position:absolute;
  margin:0;
  overflow:hidden;
  z-index:5;
  background:#ddd;
  border:0;
  box-shadow:0 14px 28px rgba(63,40,40,.22),0 3px 8px rgba(63,40,40,.12);
}

.boho-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.01);
}

/* Chú rể — lấy bố cục iPhone SE làm mốc */
.boho-photo-groom{
  top:20.53%;
  left:1.33%;
  width:48%;
  height:37.33%;
  transform:rotate(-15deg);
}

/* Cô dâu */
.boho-photo-bride{
  right:3.73%;
  bottom:12.4%;
  width:45.87%;
  height:37.33%;
  transform:rotate(13deg);
}

/* Text */
.boho-person{
  position:absolute;
  z-index:6;
  font-family:"Cormorant Garamond",Georgia,serif;
  color:#725c5c;
}

.boho-person span{
  display:block;
  margin-bottom:5px;
  font-size:14px;
  font-size:clamp(12px,3.73cqw,15px);
  font-weight:400;
  line-height:1.2;
}

.boho-person strong{
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:26px;
  font-size:clamp(24px,6.93cqw,29px);
  font-weight:500;
  line-height:1;
  letter-spacing:-.02em;
}

.boho-person-groom{
  top:38.67%;
  right:4.27%;
  width:41.87%;
  text-align:left;
}

.boho-person-bride{
  left:1.87%;
  bottom:27.2%;
  width:44%;
  text-align:right;
}

.boho-person-bride strong{
  font-size:25px;
  font-size:clamp(23px,6.67cqw,28px);
}

.boho-couple-section + .calendar-wrap{
  margin-top:-16%;
  z-index:7;
}

/* Nhánh hoa dưới */
.boho-flower-fixed{
  position:absolute;
  left:-3%;
  bottom:-2%;
  width:36%;
  max-width:none;
  height:auto;
  z-index:3;
  pointer-events:none;
  user-select:none;
  transform:rotate(-7deg);
  transform-origin:bottom left;
}

/* Chỉ tinh chỉnh rất nhẹ cho máy cực hẹp; không đổi layout. */
@media(max-width:340px){
  .boho-person span{margin-bottom:3px}
  .boho-person-groom{right:3.2%}
  .boho-person-bride{left:1.2%}
}