/* ---------- Tokens: change colours/fonts here ---------- */
:root{
  --ivory:#F5EFE3;--paper:#FBF8F0;--linen:#E9E0CD;--moss:#56603F;--forest:#3A4430;
  --sage:#8B9871;--mist:#CBD1BC;--ink:#2D2A24;--ink-soft:#5F5A4D;--claret:#702B32;--err:#A4513F;
  --f-disp:"Cormorant Garamond",Georgia,serif;--f-body:"EB Garamond",Georgia,serif;--f-script:"Pinyon Script","Snell Roundhand",cursive;
  --ease:cubic-bezier(.22,.61,.36,1);--col:520px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ivory);color:var(--ink);font:17px/1.65 var(--f-body);
  background-image:radial-gradient(rgba(45,42,36,.035) 1px,transparent 1.2px);background-size:5px 5px}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--claret);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:var(--paper);padding:8px}

/* ---------- Type ---------- */
.eyebrow{font:600 12.5px/1.4 var(--f-disp);letter-spacing:.28em;text-transform:uppercase;color:var(--moss)}
.script{font:400 clamp(32px,9vw,42px)/1.2 var(--f-script);color:var(--moss)}
h1,h2,h3{font-family:var(--f-disp);font-weight:400;color:var(--forest)}
h1{font-weight:300;font-size:clamp(38px,11vw,64px);letter-spacing:.16em;text-transform:uppercase;line-height:1.15}
h2{font-size:clamp(28px,7vw,34px);margin:.3em 0 .6em}
h3{font-size:26px;font-weight:500}
.amp{display:block;font:400 clamp(44px,12vw,72px)/1 var(--f-script);color:var(--claret);margin:.1em 0}
.meta{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.cap{font-style:italic;font-size:15px;color:var(--ink-soft)}

/* ---------- Layout ---------- */
section.sec{padding:96px 24px;text-align:center;position:relative}
.wrap{max-width:var(--col);margin:0 auto}
.dark{background:var(--moss);color:var(--ivory)}
.dark h2,.dark h3{color:var(--paper)}.dark .eyebrow,.dark .script,.dark .meta,.dark .cap{color:var(--mist)}
.rule{border:0;height:1px;background:var(--sage);width:64px;margin:28px auto;position:relative;transform-origin:center}
.rule::after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);background:var(--ivory);color:var(--sage);font-size:10px;padding:0 8px}
.dark .rule::after{background:var(--moss)}
.quote{margin:56px auto 0;max-width:420px;font:italic 21px/1.5 var(--f-disp);color:var(--forest)}
.dark .quote{color:var(--paper)}.quote cite{display:block;margin-top:8px;font:normal 13px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.arch{border-radius:999px 999px 0 0;overflow:hidden}
.card{background:var(--paper);color:var(--ink);padding:32px 24px;position:relative;box-shadow:0 1px 0 var(--linen)}
.card::before{content:"";position:absolute;inset:10px;border:1px solid var(--sage);opacity:.55;pointer-events:none}
.card h3{color:var(--forest)}.card .meta{color:var(--ink-soft)}

/* ---------- Opening ---------- */
.opening{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;padding:24px;
  background:var(--ivory);transition:transform .9s var(--ease),opacity .9s var(--ease);height:100dvh}
.opening.gone{transform:translateY(-100%);opacity:0;pointer-events:none}
.env{max-width:340px;padding:56px 28px 40px;background:var(--paper);border:1px solid var(--linen);position:relative;
  clip-path:polygon(0 0,50% 12%,100% 0,100% 100%,0 100%)}
.env .eyebrow{margin-top:36px}
.open-invite{font-style:italic;color:var(--ink-soft);margin:6px 0 26px;font-size:16px}
.seal{width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;background:var(--moss);color:var(--ivory);
  font:500 17px var(--f-disp);letter-spacing:.06em;box-shadow:inset 0 0 0 4px rgba(245,239,227,.18),0 2px 0 var(--forest);
  animation:breathe 3s ease-in-out infinite;transition:background .25s}
.seal:hover{background:var(--forest)}
.hint{margin-top:18px;font:600 11.5px var(--f-disp);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
@keyframes breathe{50%{transform:scale(1.03)}}

/* ---------- Hero ---------- */
.hero{min-height:100dvh;display:grid;place-items:center;background:var(--paper);overflow:hidden}
.hero .bg{position:absolute;inset:-6% 0;opacity:.9;will-change:transform;
  background:linear-gradient(var(--mist),transparent) top/100% 38% no-repeat;opacity:.35}
.hero .wrap{position:relative}
.joglo{width:min(280px,70vw);margin:0 auto 28px;stroke:var(--sage);stroke-width:1.25;fill:none;stroke-linecap:round;stroke-linejoin:round}
.joglo path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2s var(--ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .date{margin-top:24px}

/* ---------- Countdown ---------- */
.count{display:flex;justify-content:center;gap:0;margin-top:20px}
.count div{padding:0 18px;border-left:1px solid var(--sage)}.count div:first-child{border:0}
.count b{display:block;font:300 clamp(36px,10vw,48px)/1 var(--f-disp);color:var(--paper)}
.count span{font:600 11px var(--f-disp);letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}

/* ---------- Story ---------- */
.tl{position:relative;text-align:left;margin-top:40px;padding-left:36px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--sage)}
.tl article{position:relative;padding-bottom:44px}
.tl article::before{content:"";position:absolute;left:-34px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--ivory);border:1px solid var(--moss)}
.tl .arch{margin:14px 0 0;max-width:220px;aspect-ratio:4/5}.tl img{width:100%;height:100%;object-fit:cover}

/* ---------- Events ---------- */
.ev{margin-top:32px}.ev+.ev{margin-top:20px}
.ev .meta{margin:4px 0}.ev p{margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;border-radius:999px;
  border:1px solid var(--moss);background:var(--moss);color:var(--ivory);font:600 13px var(--f-disp);letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--forest)}
.btn.ghost{background:transparent;color:var(--moss)}.btn.ghost:hover{background:var(--moss);color:var(--ivory)}
.card .btn{margin-top:20px}
.link{font:600 12.5px var(--f-disp);letter-spacing:.2em;text-transform:uppercase;color:var(--moss);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:5px;padding:12px 4px}

/* ---------- Gallery ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px;max-width:720px;margin-inline:auto}
.grid button{border:8px solid var(--paper);outline:1px solid var(--linen);background:var(--linen);padding:0;cursor:zoom-in;aspect-ratio:4/5;overflow:hidden}
.grid button:nth-child(3n+1){border-radius:999px 999px 0 0}
.grid img,.ph{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .6s}
.grid button:hover img{transform:scale(1.03)}
.ph{display:grid;place-items:center;font:italic 14px var(--f-body);color:var(--ink-soft);padding:8px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.lightbox{border:0;background:rgba(30,32,22,.94);max-width:100vw;max-height:100dvh;width:100%;height:100%;padding:0;color:#fff}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:transparent}
.lightbox img{max-width:92vw;max-height:84dvh;object-fit:contain;transition:opacity .3s}
.lb-x,.lb-n{position:absolute;background:none;border:0;color:var(--ivory);font:300 40px var(--f-disp);cursor:pointer;min-width:48px;min-height:48px}
.lb-x{top:8px;right:8px}.lb-prev{left:4px}.lb-next{right:4px}.lb-n{top:50%;transform:translateY(-50%)}

/* ---------- Forms ---------- */
form{text-align:left;max-width:420px;margin:32px auto 0}
label,legend{display:block;font:600 12px var(--f-disp);letter-spacing:.24em;text-transform:uppercase;color:var(--moss);margin-top:26px}
input[type=text],input[type=number],textarea,select{width:100%;font:17px var(--f-body);color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--sage);padding:10px 0;border-radius:0;min-height:48px}
textarea{resize:vertical;min-height:96px}
fieldset{border:0;padding:0}
.radio{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;text-transform:none;letter-spacing:0;font:17px var(--f-body);color:var(--ink);margin:0}
.radio input{appearance:none;width:18px;height:18px;border:1px solid var(--moss);border-radius:50%;display:grid;place-items:center;flex:none}
.radio input::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--moss);transform:scale(0);transition:transform .2s}
.radio input:checked::after{transform:scale(1)}
.hp{position:absolute;left:-9999px}
form .btn{margin-top:32px;width:100%}
.msg{margin-top:18px;text-align:center;min-height:1.5em}.msg.err{color:var(--err)}
.thanks{font:400 34px var(--f-script);color:var(--moss);text-align:center;padding:24px 0}

/* ---------- Gifts / registry / wishes ---------- */
.cards{display:grid;gap:20px;margin-top:32px}
.acct{font:500 24px var(--f-disp);letter-spacing:.06em;margin:8px 0 2px;color:var(--forest);word-break:break-all}
.qr{width:180px;height:180px;margin:12px auto;object-fit:contain;background:#fff;padding:8px}
.wish{background:var(--paper);border:1px solid var(--linen);padding:20px;text-align:left}
.wish b{font:600 12px var(--f-disp);letter-spacing:.2em;text-transform:uppercase;color:var(--moss)}
.wish p{font-style:italic;margin-top:6px}
.wishes{display:grid;gap:14px;margin-top:32px;max-height:420px;overflow:auto}

/* ---------- Chrome ---------- */
.topbar{position:fixed;top:0;right:0;z-index:20;padding:calc(10px + env(safe-area-inset-top)) 18px 0}
.topbar a{font:600 12px var(--f-disp);letter-spacing:.22em;color:var(--moss);text-decoration:none;background:var(--paper);padding:12px 16px;border:1px solid var(--linen);border-radius:999px;display:inline-block}
.music{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--moss);background:var(--paper);cursor:pointer}
.bars{display:flex;gap:3px;align-items:flex-end;justify-content:center;height:16px}
.bars i{width:2px;height:6px;background:var(--moss)}
.music.on .bars i{animation:eq 1s ease-in-out infinite}.music.on .bars i:nth-child(2){animation-delay:.2s}.music.on .bars i:nth-child(3){animation-delay:.4s}
@keyframes eq{50%{height:16px}}
.toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,20px);background:var(--forest);color:var(--ivory);padding:10px 20px;border-radius:999px;opacity:0;transition:.3s;z-index:60;pointer-events:none;font-size:15px}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Reveal motion ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}.joglo path{stroke-dashoffset:0}
}

/* ===== v2: envelope, illustrations ===== */
.opening{background:var(--moss);flex-direction:column;gap:28px;align-content:center}
.opening .hint{color:var(--mist);margin:0}
.envelope{position:relative;width:min(340px,86vw);aspect-ratio:3/2;perspective:900px;margin:0 auto}
.envelope::before{content:"";position:absolute;inset:0;background:var(--linen)}
.env-card{position:absolute;left:7%;right:7%;top:7%;bottom:7%;background:var(--paper);z-index:1;display:grid;place-content:center;gap:2px;
  border:1px solid var(--sage);transition:transform 1s var(--ease) .55s}
.env-card .script{font-size:30px}
.env-front{position:absolute;inset:0;z-index:2;background:var(--paper);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);
  display:grid;align-content:end;justify-items:center;padding-bottom:9%;box-shadow:inset 0 -1px 0 var(--linen)}
.env-front .script{font-size:30px}
.flap{position:absolute;left:0;right:0;top:0;height:58%;z-index:3;background:#EFE7D4;clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top;transition:transform .8s var(--ease),z-index 0s .4s}
.seal{position:absolute;left:50%;top:50%;z-index:4;margin:-38px 0 0 -38px;transition:opacity .4s}
.opened .flap{transform:rotateX(180deg);z-index:0}
.opened .env-card{transform:translateY(-62%)}
.opened .seal{opacity:0;animation:none}
.art{display:block;overflow:visible}
.art *{fill:none;stroke:var(--sage);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.art .f{fill:var(--paper)}.art .l{fill:var(--mist);fill-opacity:.55}
.dark .art *{stroke:var(--mist)}.dark .art .f{fill:var(--moss)}.dark .art .l{fill:var(--forest)}
.scene{width:min(440px,92vw);margin:0 auto 24px}
.draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s var(--ease) .3s forwards}
.sec{overflow:hidden}
.corner{position:absolute;bottom:0;width:84px;opacity:.55;pointer-events:none;transform-origin:bottom center}
.corner.l{left:6px}.corner.r{right:6px;transform:scaleX(-1)}
.hero .corner{width:110px}
.divider{width:120px;margin:28px auto}
.wrap{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.draw path{stroke-dashoffset:0}.env-card,.flap{transition:none}}

/* ===== v3: photos ===== */
.hero .scene{width:min(260px,70vw);margin-bottom:12px}
.hero-photo{width:min(260px,70vw);aspect-ratio:4/5;margin:28px auto 0;border:8px solid var(--paper);outline:1px solid var(--sage)}
.arch img,.grid img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) sepia(.1)}

/* ===== v4: venue map ===== */
.map{margin-top:24px;aspect-ratio:4/3;border:8px solid var(--paper);outline:1px solid var(--sage);background:var(--linen)}
.map iframe{width:100%;height:100%;border:0;display:block;filter:sepia(.25) saturate(.75)}

/* ===== v5: decorative redesign ===== */
[hidden]{display:none!important}
.sr{position:absolute;left:-9999px}
.dark{background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
/* envelope: seal no longer covers the greeting */
.envelope{aspect-ratio:5/4}
.flap{height:56%}
.env-front{clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);padding-bottom:7%}
.env-front .eyebrow{font-size:11px}.env-front .script{font-size:28px;line-height:1.1}
.seal{top:56%;width:64px;height:64px;margin:-32px 0 0 -32px;font-size:15px}
/* hero collage */
.hero{padding-top:72px;background:var(--paper)}
.janur{position:absolute;top:5%;width:clamp(110px,30vw,190px);mix-blend-mode:multiply;pointer-events:none}
.janur.l{left:-8px}.janur.r{right:-8px;transform:scaleX(-1)}
.lace-frame{position:relative;width:min(300px,76vw);aspect-ratio:300/380;margin:32px auto 0}
.lace-frame>svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(60,50,30,.2))}
.lace-frame .oval{position:absolute;left:16%;top:12.6%;width:68%;height:74.7%;border-radius:50%;overflow:hidden;background:var(--linen)}
.oval img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) sepia(.1)}
.pol,.pol-s{background:#fff;padding:5px 5px 20px;box-shadow:0 2px 7px rgba(60,50,30,.25);margin:0;position:absolute}
.pol{width:33%}.pol.p1{left:-14%;bottom:5%;transform:rotate(-8deg)}.pol.p2{right:-14%;top:7%;transform:rotate(7deg)}
.pol img,.pol-s img{width:100%;aspect-ratio:1;object-fit:cover;display:block;filter:saturate(.88) sepia(.1)}
.pol-s{position:relative;display:block;width:min(230px,70%);padding:8px 8px 28px;margin-top:16px;transform:rotate(-2deg)}
.pol-s img{aspect-ratio:4/5}
.pol-s::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgba(203,209,188,.75);transform:rotate(-3deg)}
.grid button:nth-child(n){border:8px solid #fff;border-bottom-width:28px;border-radius:0;outline:0;background:#fff;box-shadow:0 2px 8px rgba(60,50,30,.22);transform:rotate(-2deg);aspect-ratio:4/5.4}
.grid button:nth-child(even){transform:rotate(1.8deg)}
.rv:not(.in) .draw path{animation-play-state:paused}
/* reply card (RSVP) */
.reply-card{max-width:440px;margin:32px auto 0;padding:44px 28px 76px;overflow:hidden}
.reply{display:grid;gap:30px;margin:0;max-width:none;text-align:center}
.reply .script{font-size:34px;line-height:1.1}.reply .script.sm{font-size:26px}
.reply label.script{margin:0;text-transform:none;letter-spacing:0;color:var(--moss)}
.reply .row{display:grid;gap:6px;justify-items:center}
.reply .name{grid-template-columns:auto 1fr;align-items:end;column-gap:12px}
.reply .name .cap{grid-column:1/-1}
.reply .mk{font:400 36px/1 var(--f-script);color:var(--moss);margin:0;text-transform:none;letter-spacing:0}
.reply input#r-name{text-align:center;font-style:italic;font-size:19px}
.reply .tick{display:flex;align-items:center;gap:12px;margin:0;min-height:44px;cursor:pointer;font:italic 20px var(--f-disp);text-transform:none;letter-spacing:0;color:var(--ink)}
.tick input{position:absolute;opacity:0}
.tick i{width:18px;height:18px;border:1px solid var(--moss);border-radius:2px;position:relative;flex:none}
.tick input:checked+i::after{content:"";position:absolute;left:5px;top:-3px;width:6px;height:13px;border:solid var(--claret);border-width:0 2px 2px 0;transform:rotate(40deg)}
.tick input:focus-visible+i{outline:2px solid var(--claret);outline-offset:3px}
.reply .tick:has(input[type=checkbox]){font-size:16px}
.stepper{display:flex;align-items:center;gap:8px}
.stp{width:44px;height:44px;border-radius:50%;border:1px solid var(--sage);background:none;color:var(--moss);font:300 26px/1 var(--f-disp);cursor:pointer}
.num{width:56px;border:0;background:none;text-align:center;font:300 36px var(--f-disp);color:var(--forest);padding:0}
.note textarea{width:100%;min-height:128px;border:0;padding:0 4px;line-height:32px;text-align:left;font-style:italic;
  background:repeating-linear-gradient(transparent 0 31px,var(--sage) 31px 32px)}
.reply .btn{margin:0;width:100%}.reply .msg{margin:0}
/* player (from vinyl reference) */
.player{display:flex;align-items:center;gap:16px;max-width:340px;margin:24px auto 0;padding:14px;background:rgba(0,0,0,.2);border-radius:14px;text-align:left}
.cover{width:92px;aspect-ratio:1;flex:none;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover}
.ctl{flex:1;display:grid;gap:6px;justify-items:start}
.pp{width:52px;height:52px;border-radius:50%;border:0;background:var(--ivory);position:relative;cursor:pointer}
.pp::before{content:"";position:absolute;left:21px;top:16px;border-left:15px solid var(--moss);border-top:10px solid transparent;border-bottom:10px solid transparent}
.pp.on::before{left:18px;top:17px;width:6px;height:18px;border:0;border-left:5px solid var(--moss);border-right:5px solid var(--moss)}
.prog{position:relative;width:100%;height:24px;cursor:pointer;background:linear-gradient(rgba(245,239,227,.3),rgba(245,239,227,.3)) center/100% 3px no-repeat}
.prog i{position:absolute;left:0;top:10px;height:3px;width:0;background:var(--ivory)}
.player .tm{color:var(--mist)}
.vinyl{width:min(210px,58vw);margin:28px auto 16px}.vinyl svg{display:block}
.vinyl.spin svg{animation:spin 6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* ===== v7: scrapbook garden · bilingual · original SVG illustration (no image files needed) ===== */
[hidden]{display:none!important}
h2::after{content:"";display:block;width:56px;height:1px;background:var(--sage);margin:14px auto 0}

/* --- language switch + top bar --- */
.topbar{display:flex;align-items:center;gap:8px}
.langsw{display:inline-flex;border:1px solid var(--linen);border-radius:999px;background:var(--paper);overflow:hidden}
.langsw button{font:600 11.5px var(--f-disp);letter-spacing:.18em;padding:0 13px;min-height:44px;border:0;background:none;color:var(--ink-soft);cursor:pointer}
.langsw button[aria-pressed=true]{background:var(--moss);color:var(--ivory)}
#lang-open{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:5}
.opening .langsw{background:rgba(251,248,240,.08);border-color:rgba(203,209,188,.45)}
.opening .langsw button{color:var(--mist)}.opening .langsw button[aria-pressed=true]{background:var(--paper);color:var(--forest)}

/* --- shared illustration parts --- */
.pj{position:absolute;top:0;pointer-events:none}
.pj svg{width:100%;height:auto;transform-origin:0 0;animation:sway 7s ease-in-out infinite alternate}
.pj.r{transform:scaleX(-1)}.pj.l{left:0}.pj.r{right:0}
.fr{position:absolute;pointer-events:none}.fr.r{transform:scaleX(-1)}.fr.l{left:0}.fr.r{right:0}.fr svg{width:100%;height:auto}
.bt{position:absolute;left:50%;bottom:0;transform:translateX(-50%);pointer-events:none}
.bt .scene{width:100%;margin:0}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.85}}
.tw{position:absolute;color:var(--mist);font-style:normal;animation:tw 4s ease-in-out infinite;pointer-events:none}
.art .ff{fill:var(--sage);stroke:none;animation:tw 3.2s ease-in-out infinite}.dark .art .ff{fill:var(--mist)}
.draw .nd{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.art .rs{fill:var(--claret);fill-opacity:.1;stroke:var(--claret)}
.tape::after{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(203,209,188,.8);transform:rotate(-2deg);box-shadow:0 1px 2px rgba(60,50,30,.14);pointer-events:none}
.tape.ev:nth-of-type(even)::after{transform:rotate(2.5deg)}

/* --- 1. opening: decorated envelope screen --- */
.opening{padding:24px;overflow:hidden}
.opening .envelope,.opening .hint{position:relative;z-index:2}
.deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.deco::before,.deco::after{content:"";position:absolute;border:1px solid rgba(203,209,188,.34)}
.deco::before{inset:14px}.deco::after{inset:21px;border-color:rgba(203,209,188,.16)}
.deco .pj{width:clamp(110px,34vw,190px);left:14px;top:14px;opacity:.85}.deco .pj.r{left:auto;right:14px}
.deco .fr{top:34%;width:clamp(90px,26vw,170px);opacity:.42}.deco .fr.l{left:14px}.deco .fr.r{right:14px}
.deco .bt{width:min(440px,80vw);bottom:22px;opacity:.6}
@media(max-height:660px){.deco .bt,.deco .fr{display:none}}
.env-card .eyebrow{font-size:10.5px}
.env-front .script{max-width:86%;overflow-wrap:anywhere;font-size:clamp(20px,6vw,28px)}

/* --- 2. hero: ornamented, no image files --- */
.hero{position:relative;display:grid;place-items:center;min-height:100dvh;padding:96px 22px min(64vw,360px);overflow:hidden;
  background:radial-gradient(110% 60% at 50% 0,#F6F0E2,transparent 72%),radial-gradient(90% 50% at 50% 100%,rgba(203,209,188,.55),transparent 70%),#EDE4D2}
.hero-deco{position:absolute;inset:0;pointer-events:none}
.hero-deco .art *{stroke:var(--moss)}.hero-deco .art{opacity:.62}
.hero-deco .pj{width:clamp(130px,38vw,230px);top:0}
.hero-deco .fr{top:40%;width:clamp(80px,22vw,150px);opacity:.8}
.hero-deco .bt{width:min(620px,100%)}
body.locked .hero-deco .draw path{animation-play-state:paused}
.hero-art{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:420px}
.hero-art .eyebrow{font-size:11px;max-width:270px;color:var(--forest)}
.hero-art h1{font-size:clamp(34px,9.5vw,54px);line-height:1.08;margin:12px 0 4px}
.hero-art .amp{font-size:clamp(38px,10vw,48px);margin:0}
.hero-art .meta{color:var(--forest);margin-top:20px}

/* --- 4. the wedding of (parents) --- */
.couple .script{font-size:clamp(40px,11vw,54px)}
.people{display:grid;gap:4px;margin-top:34px}
.person{padding:46px 24px 38px}
.person .pname{font-size:clamp(25px,6.6vw,31px);line-height:1.2;font-weight:500}
.person .rel{margin-top:14px}
.person .parents{font:italic clamp(16px,4.6vw,19px)/1.5 var(--f-disp);margin-top:4px;color:var(--forest);text-wrap:balance}
.person .addr{font-size:14.5px;color:var(--ink-soft);margin:14px auto 0;max-width:300px}
.people .amp{font-size:54px;margin:18px 0 20px}

/* --- playlist --- */
.player{background:var(--moss) repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);transform-origin:center}
.ctl .btns{display:flex;align-items:center;gap:10px}
.sk{width:40px;height:40px;border-radius:50%;border:1px solid rgba(245,239,227,.45);background:none;cursor:pointer;display:grid;place-items:center;color:var(--ivory);transition:background .2s}
.sk svg{width:16px;height:16px;fill:currentColor;stroke:none}.sk:hover{background:rgba(245,239,227,.14)}
.cover{box-shadow:0 0 0 4px #fff,0 3px 8px rgba(0,0,0,.3);transform:rotate(-3deg)}
#playlist h3{font-size:clamp(24px,6.5vw,30px)}

/* --- countdown --- */
#countdown .lace-frame{width:min(240px,64vw);margin:28px auto}

/* --- 5. love story --- */
.story-art{width:min(300px,80vw);margin:0 auto 40px}.story-art svg{width:100%;height:auto}
.chaps{position:relative;margin-top:48px;text-align:left}
.chaps::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--sage)}
.chap{margin:0 0 68px;padding:54px 26px 80px}.chap:last-child{margin-bottom:0}
.chap .num{position:absolute;top:-26px;left:50%;width:52px;height:52px;margin-left:-26px;border-radius:50%;background:var(--moss);color:var(--ivory);
  font:500 17px/52px var(--f-disp);letter-spacing:.1em;text-align:center;box-shadow:0 0 0 6px var(--ivory)}
.chap h3{text-align:center;font-style:italic;font-weight:400;font-size:30px;line-height:1.2;margin-bottom:4px}
.chap .meta{text-align:center}
.chap .pol-s{width:min(230px,72%);margin:18px auto 26px}
.chap:nth-child(even) .pol-s{transform:rotate(2.2deg)}
.chap .corner{opacity:.5}
.dc::first-letter{font:400 4.2em/.8 var(--f-script);float:left;color:var(--claret);padding:8px 10px 0 0}
.dc::first-line{font-variant:small-caps;letter-spacing:.06em}

/* --- 6. the day --- */
.way-art{width:min(380px,92vw);margin:0 auto 20px}.way-art svg{width:100%;height:auto}
.ev.tape::after{background:rgba(203,209,188,.9)}

/* --- gallery canopy (replaces janur image) --- */
.canopy{position:relative;height:150px;width:min(420px,100%);margin:0 auto -34px}
.canopy .pj{width:26%}

/* --- RSVP card with rose vine --- */
.reply-card{padding-bottom:120px}
.vine-wrap{position:absolute;left:0;right:0;bottom:0;pointer-events:none}.vine-wrap svg{width:100%;height:auto}

/* --- desktop side panel (replaces image) --- */
.side{display:none}
@media(min-width:1024px){
  .side{display:block;position:fixed;left:0;top:0;bottom:0;width:38vw;z-index:5;border-right:8px solid var(--paper);overflow:hidden}
  .side-in{position:absolute;inset:-30px 0;display:grid;align-content:center;justify-items:center;text-align:center;padding:40px}
  .side-top{position:absolute;inset:0;pointer-events:none}.side-top .pj{width:clamp(110px,15vw,200px);top:30px}
  .side-txt{position:relative;z-index:2;margin-bottom:22vh}
  .side-txt .script{font-size:clamp(48px,5vw,76px);color:var(--paper);margin:8px 0}
  .side-bt{position:absolute;left:8%;right:8%;bottom:50px;pointer-events:none;opacity:.75}.side-bt svg{width:100%;height:auto}
  main{margin-left:38vw}
}

/* --- 7. closing: one even, centred layout --- */
.closing{padding:96px 24px 56px}
.closing .msg-c{font:italic 20px/1.65 var(--f-disp);max-width:440px;margin:0 auto;color:var(--paper)}
.closing .quote{margin-top:40px;font-size:19px;color:var(--mist)}
.closing .joy{font-size:clamp(34px,9.5vw,46px);color:var(--paper);margin:64px 0 34px}
.fam{max-width:420px;margin:0 auto}
.fam .eyebrow{font-size:11.5px;margin-bottom:14px}
.fam .pn{font:500 clamp(17px,4.9vw,22px)/1.45 var(--f-disp);color:var(--paper);text-wrap:balance}
.fam .addr{font:italic 15px/1.55 var(--f-body);color:var(--mist);margin-top:12px}
.fam-sep{font:400 44px/1 var(--f-script);color:var(--sage);margin:24px 0}
.scene-c{width:min(420px,92vw);margin:60px auto 22px;opacity:.85}.scene-c svg{width:100%;height:auto;margin:0}

@media(prefers-reduced-motion:reduce){.pj svg,.tw,.art .ff{animation:none!important}.tw{opacity:.4}.draw path{stroke-dashoffset:0}}

/* text on paper cards inside dark sections + envelope paper must stay dark */
.dark .card .cap,.dark .card .meta{color:var(--ink-soft)}
.dark .card .eyebrow,.dark .card .script{color:var(--moss)}
.opening .envelope .eyebrow{color:var(--ink-soft)}.opening .envelope .script{color:var(--moss)}

/* --- Quran verse --- */
.verse{padding:88px 24px 96px}
.verse .ar{font-family:"Amiri Quran","Amiri","Scheherazade New","Traditional Arabic",serif;font-size:clamp(25px,7.2vw,33px);line-height:2.35;color:var(--forest);margin:8px 0 22px;text-wrap:balance}
.verse .tr{font:italic clamp(17px,4.8vw,19px)/1.7 var(--f-disp);color:var(--ink-soft);max-width:420px;margin:0 auto}
.verse .ref{margin-top:22px}

/* ===== v8: transparent keepsake artwork + motion ===== */
.sx{display:block;max-width:none;height:auto;-webkit-user-drag:none;user-select:none}
.dk{position:absolute;pointer-events:none;z-index:0;transform-origin:50% 100%}
.wrap{position:relative;z-index:2}
.p-tr{top:-6px;right:-12px}.p-tl{top:-6px;left:-12px}.p-bl{bottom:-8px;left:-12px}.p-br{bottom:-8px;right:-12px}
.w1{width:64px}.w2{width:clamp(88px,25vw,140px)}.w3{width:clamp(108px,31vw,190px)}.w4{width:clamp(140px,40vw,240px)}
.flip{scale:-1 1}.rot1{rotate:-9deg}.rot2{rotate:8deg}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-9px)}}
@keyframes float2{from{transform:translateY(6px) rotate(-1.5deg)}to{transform:translateY(-6px) rotate(1.5deg)}}
@keyframes swayb{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
@keyframes swing{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes fly{0%{transform:translate(0,0) rotate(0)}30%{transform:translate(8px,-7px) rotate(2deg)}60%{transform:translate(-4px,-12px) rotate(-1deg)}100%{transform:translate(0,0) rotate(0)}}
.float{animation:float 5s ease-in-out infinite alternate}.float2{animation:float2 6.5s ease-in-out infinite alternate}
.sway{animation:swayb 6s ease-in-out infinite alternate}.swing{transform-origin:50% 0;animation:swing 4.2s ease-in-out infinite alternate}
.fly{transform-origin:50% 50%;animation:fly 7s ease-in-out infinite}
.pj{transform-origin:50% 0;animation:sway 7s ease-in-out infinite alternate}.pj.r{transform:none;scale:-1 1}
.pj,.corner{height:auto}.corner{opacity:.9;animation:swayb 7s ease-in-out infinite alternate}.corner.r{transform:none;scale:-1 1}
.card{background:#FBF8F0 url(../assets/art/paper.webp) center/cover}
.hero{background:#F3ECDD url(../assets/art/paper.webp) center/cover}
/* opening */
.opening.dark{background:#3A4430 url(../assets/art/roses-bg.webp) center/cover}
.opening::before{content:"";position:absolute;inset:0;background:rgba(48,58,38,.58);z-index:0}
.deco{z-index:1}.deco .dk{position:absolute}
.deco .d1{left:-5%;bottom:9%;width:clamp(120px,34vw,200px)}.deco .d2{right:-5%;bottom:7%;width:clamp(110px,31vw,190px)}
.deco .d3{left:7%;top:31%;width:72px}.deco .d4{right:5%;top:27%;width:clamp(90px,25vw,140px)}
.deco .pj{opacity:1}
.flap{background:none;clip-path:none;transform-style:preserve-3d}
.flap i{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap .ff{background:#EFE7D4}
.flap .fb{transform:rotateX(180deg);background:#DDD5BF url(../assets/art/env-liner.webp) 50% 82%/128% auto no-repeat}
.seal{width:78px;height:78px;margin:-39px 0 0 -39px;background:none;box-shadow:none;border-radius:0;padding:0}
.seal:hover{background:none;filter:brightness(1.08)}
.seal img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.seal span{position:absolute;left:-9999px}
.env-tag{position:absolute;right:-6px;bottom:-16px;width:76px;z-index:5;pointer-events:none;transform-origin:20% 0;animation:swing 4s ease-in-out infinite alternate}
.opened .env-tag{opacity:0;transition:opacity .4s}
/* hero */
.hero-deco .pj{width:clamp(150px,44vw,260px)}
.hero-deco .bt{width:min(520px,96%);bottom:-4px}.bt img,.scene-c img,.side-bt img{width:100%}
.hero-deco .dk{position:absolute}
.hero-deco .d1{left:-7%;bottom:8%;width:clamp(120px,34vw,210px)}.hero-deco .d2{right:-7%;bottom:10%;width:clamp(110px,31vw,200px)}
.hero-deco .d3{right:3%;top:15%;width:clamp(58px,17vw,96px)}
/* story banner + events lanterns + rsvp flowers */
.story-art{position:relative;width:min(300px,78vw);margin:0 auto 44px}.story-art .liner{width:100%}
.story-art .hm{position:absolute;right:-26px;top:16%;width:92px}.story-art .lv{position:absolute;left:-16px;bottom:-8px;width:74px;transform-origin:bottom}
.way-art{position:relative;width:min(380px,92vw);margin:0 auto 24px;min-height:120px}
.way-art .joglo-img{width:68%;margin:0 auto}.way-art .lt{position:absolute;top:-6px;width:24%}.way-art .lt.l{left:0}.way-art .lt.r{right:0;scale:-1 1}
.map-btn{margin:22px auto 0;display:inline-flex}
.reply-card{background:#FBF8F0 url(../assets/art/paper.webp) center/cover;padding-bottom:36px}
.vf{position:relative;height:130px;margin:14px -28px -36px;pointer-events:none}
.vf .sx{position:absolute;bottom:-4px;transform-origin:50% 100%}.vf .a{left:-1%;width:25%}.vf .b{left:41%;width:21%}.vf .c{right:-1%;width:29%}
.vf .b{bottom:-4px}.vf .c{animation-delay:-2s}
/* chapter stickers sit in the card corner */
.chap{overflow:visible}.chap .p-tr{top:-34px;right:-22px;width:84px}
/* music: heart vinyl + song list */
.vinyl-img{width:100%;display:block}.vinyl.spin .vinyl-img{animation:spin 9s linear infinite}
.songs-h{margin:28px 0 10px;color:var(--moss)}
.songs{list-style:none;padding:0;margin:0 auto;max-width:340px;display:grid;gap:8px;text-align:left}
.sg{width:100%;display:flex;align-items:center;gap:14px;padding:10px 16px;border:1px solid var(--linen);background:#FBF8F0;border-radius:12px;cursor:pointer;font:inherit;color:var(--ink);text-align:left;transition:border-color .25s,background .25s}
.sg:hover{border-color:var(--sage)}.sg .n{font:italic 24px/1 var(--f-disp);color:var(--sage);width:24px;flex:none}
.sg .tt{display:grid;min-width:0}.sg b{font:500 19px/1.2 var(--f-disp);color:var(--forest)}.sg i{font-size:14px;color:var(--ink-soft)}
.sg.cur{border-color:var(--moss);background:#fff}.sg.cur .n{color:var(--claret)}
.sg.on b::after{content:" ♪";color:var(--claret);animation:float 1.2s ease-in-out infinite alternate;display:inline-block}
/* closing cartouche */
.cart{width:min(380px,92vw);aspect-ratio:479/640;margin:0 auto 8px;display:grid;place-items:center;padding:19% 17%;
  background:url(../assets/art/cartouche.webp) center/100% 100% no-repeat}
.closing .cart .msg-c{color:var(--forest);font-size:clamp(13px,3.7vw,16px);line-height:1.5;margin:0}
.closing .quote{margin-top:44px}
@media(prefers-reduced-motion:reduce){.float,.float2,.sway,.swing,.fly,.pj,.corner,.env-tag,.vinyl.spin .vinyl-img,.seal{animation:none!important}}
/* v8 fixes */
.flap .fb{clip-path:polygon(0 100%,100% 100%,50% 0);background-position:50% 58%}
.hero-deco .pj{width:clamp(240px,68vw,400px)}.hero-deco .pj.l{left:-15%}.hero-deco .pj.r{right:-15%}
.deco .pj{width:clamp(200px,58vw,320px)}.deco .pj.l{left:-13%;top:6px}.deco .pj.r{right:-13%;left:auto;top:6px}
.deco .d3{left:3%;top:15%}.deco .d4{right:3%;top:17%}
.canopy .pj{width:46%}.canopy .pj.l{left:-6%}.canopy .pj.r{right:-6%}
@media(min-width:1024px){.side-top .pj{width:clamp(200px,24vw,360px)}}
.dark .map-btn{color:var(--ivory);border-color:rgba(245,239,227,.7)}.dark .map-btn:hover{background:var(--ivory);color:var(--forest)}

/* ===== v9: realistic envelope, frames, new Javanese elements ===== */
.opening .env2{position:relative;z-index:2}
.env2{position:relative;width:min(360px,88vw);aspect-ratio:735/880;margin:0 auto}
.env2 .e-back,.env2 .e-front{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.env2 .e-back{filter:drop-shadow(0 16px 20px rgba(0,0,0,.4))}.env2 .e-front{z-index:3}
.e-card{position:absolute;left:19%;right:19%;top:19%;height:62%;z-index:2;display:grid;align-content:start;justify-items:center;text-align:center;padding:13% 8% 0;gap:2px;
  background:#FBF8F0 url(../assets/art/paper.webp) center/cover;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 3px 9px rgba(0,0,0,.28);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.e-card .eyebrow{font-size:10px;color:var(--ink-soft)}.e-card .script{font-size:clamp(25px,7.6vw,32px);color:var(--moss);line-height:1.1}
.e-card .e-date{font-size:10px;letter-spacing:.12em;margin-top:6px}
.opened .e-card{transform:translateY(-30%)}
.e-to{position:absolute;left:8%;right:8%;bottom:13.5%;z-index:4;text-align:center}
.e-to .eyebrow{font-size:10.5px;color:#6c6852}.e-to .script{font-size:clamp(20px,6.2vw,28px);color:var(--moss);line-height:1.1;overflow-wrap:anywhere}
.env2 .seal{position:absolute;left:50%;top:64.4%;z-index:5;width:84px;height:84px;margin:-42px 0 0 -42px}
.env2 .env-tag{right:-10px;bottom:-18px;width:74px}
.opened .seal{opacity:0;animation:none;pointer-events:none}
/* photo frames */
.frm{position:relative;margin:0 auto}
.frm-img{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.frm-ph{position:absolute;z-index:1;border-radius:50%;overflow:hidden;background:var(--linen)}
.frm-ph img{width:100%;height:100%;object-fit:cover;object-position:60% 38%;transform:scale(1.2);transform-origin:58% 42%}
.cd-frm{width:min(250px,66vw);margin:22px auto}.story-frm{width:min(250px,68vw);margin:0 auto 34px}
/* verse divider + moments flowers */
.lace-rule{width:min(260px,70%);margin:6px auto 22px}.lace-rule img{width:100%}
.canopy{height:150px;margin:0 auto -6px}.canopy .cb{position:absolute;bottom:0;width:34%;transform-origin:50% 100%}.canopy .cb.l{left:-3%}.canopy .cb.r{right:-3%;scale:-1 1}
/* events top art: gunungan + batik fans */
.way-art{display:flex;justify-content:center;align-items:flex-end;gap:10px;min-height:0;height:150px;margin:0 auto 22px}
.way-art .gn{width:92px}.way-art .fn{width:88px}.way-art .fn.l{rotate:-10deg}.way-art .fn.r{scale:-1 1;rotate:-10deg}
.scene-c{width:min(300px,78vw);opacity:1}.scene-c img{width:100%}
/* player: title + singer under the bar */
.np-in{display:grid;line-height:1.25;margin-top:2px}.np-in b{font:500 17px var(--f-disp);color:var(--paper)}.np-in i{font-size:13.5px;color:var(--mist)}
.ctl .tm{display:none}
.songs{max-width:300px;gap:5px}.songs-h{margin:20px 0 8px;font-size:10.5px}
.sg{padding:6px 12px;gap:10px;border-radius:9px}.sg .n{font-size:18px;width:16px}.sg b{font-size:15.5px}.sg i{font-size:12.5px}
/* desktop side panel: no joglo here */
.side-top .sp{position:absolute;pointer-events:none}.side-top .sp1{left:5%;top:5%;width:28%;rotate:-14deg}.side-top .sp2{right:8%;top:7%;width:20%}.side-top .sp3{right:26%;top:24%;width:12%}
.side-bt .sb{position:absolute;bottom:0}.side-bt{height:42vh}.side-bt .a{left:-4%;width:36%}.side-bt .b{left:32%;width:36%;bottom:4%}.side-bt .c{right:-3%;width:34%}
.hero-deco .bt{width:min(520px,72%)}

/* ===== v10: city guide + music loading ring ===== */
.gtitle{position:relative;width:min(350px,94vw);margin:0 auto 18px}.gtitle img{width:100%}
.gtitle h2{position:absolute;left:13%;right:13%;top:50%;transform:translateY(-50%);margin:0;font-size:clamp(16px,5vw,22px);font-weight:500;line-height:1.15}.gtitle h2::after{display:none}
.gnote{font:italic 17px/1.6 var(--f-disp);max-width:440px;margin:0 auto;color:var(--ink-soft)}
.ggroup{margin-top:40px}.ggroup>.eyebrow{margin-bottom:16px;color:var(--moss)}
.gplace{margin-top:12px;padding:24px 20px 12px}.gplace h3{font-size:22px;margin-bottom:6px}.gplace p{font-size:16px;line-height:1.55}
.gextra{margin-top:10px;font-style:italic;color:var(--claret)}.gmap{font-size:11px}
.gsub{font:italic 500 20px/1.3 var(--f-disp);color:var(--forest);margin-bottom:8px}.gtxt{font-size:16px;line-height:1.6;max-width:440px;margin:0 auto 6px}
.ticket{margin-top:12px;padding:22px 18px 16px}.ticket h3{font-size:21px;margin:2px 0}
.tk{display:flex;justify-content:center;align-items:center;gap:22px;margin:12px 0 6px}
.tk small{display:block;font:600 10px var(--f-disp);letter-spacing:.2em;text-transform:uppercase;color:var(--moss)}.tk b{font:300 30px/1.1 var(--f-disp);color:var(--forest)}.tk .arr{font-size:22px;color:var(--sage)}
.gret{margin-top:16px;max-width:420px;margin-inline:auto}
.music.loading::after,.pp.loading::after{content:"";position:absolute;inset:-5px;border:2px solid transparent;border-top-color:var(--moss);border-radius:50%;animation:spin .9s linear infinite}
.pp.loading::after{border-top-color:var(--mist)}
.tk{gap:14px}.tk b{font-size:25px;white-space:nowrap}
.ggroup:first-of-type .gtxt{font-size:17px;line-height:1.65}

/* ===== v11: collapsible city guide, envelope card fit ===== */
.e-card{padding-top:9%}.e-card .script{font-size:clamp(22px,6.6vw,27px);white-space:nowrap}.e-card .e-date{margin-top:4px;font-size:11px;letter-spacing:.2em}
.guide{background:#EFE7D6 url(../assets/art/paper.webp) center/cover}
.gteaser{font:italic 18px/1.5 var(--f-disp);color:var(--ink-soft);max-width:420px;margin:0 auto 18px}
.gtoggle{min-height:48px}
.gbody{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .7s var(--ease),visibility 0s .7s}
.guide.open .gbody{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .7s var(--ease),visibility 0s}
.gin{min-height:0;overflow:hidden;text-align:center}.guide.open .gin{padding-top:26px}
.gend{margin-top:36px}.guide:not(.open) .gtoggle.bot{display:none}
@media(prefers-reduced-motion:reduce){.gbody{transition:none}}
.gtoggle{margin:4px auto 0;padding:0 26px;font:italic 500 17px var(--f-disp);letter-spacing:.03em;text-transform:none;color:var(--forest);border-color:var(--moss);background:rgba(251,248,240,.6)}
.gtoggle::after{content:"▾";margin-left:10px;display:inline-block;transition:transform .3s}.gtoggle[aria-expanded=true]::after{transform:rotate(180deg)}
.guide .gnote{color:var(--forest)}

/* ===== v12: stationery backgrounds (9-slice cards, section backdrops) ===== */
/* event + train cards become tickets */
.ev.card,.ticket.card{background:none;box-shadow:none;border-style:solid;border-color:transparent;border-width:30px;border-image:url(../assets/art/frame-ticket.webp) 92 fill / 30px stretch;padding:4px 6px 8px}
.ev.card::before,.ev.card::after,.ticket.card::before{display:none}
.ev.card .meta,.ticket.card .meta{color:var(--ink-soft)}
/* ===== v13: calmer backgrounds, stronger type ===== */
:root{--ink-soft:#463F33;--moss:#4D5838;--sage:#8B9871}
#verse{background:linear-gradient(rgba(244,241,229,.9),rgba(244,241,229,.9)),url(../assets/art/bg-leaves.webp) center/cover}
#couple{background:#EEE7D6}
#playlist,#guide{background:linear-gradient(rgba(245,240,228,.92),rgba(245,240,228,.92)),url(../assets/art/bg-lace-green.webp) 0 0/400px auto}
/* type: no thin faces, no hairline script on small text */
h1{font-weight:400}h2,h3{font-weight:500}.count b{font-weight:400}.eyebrow{color:var(--forest);font-weight:700;font-size:13px}
.quote,.gnote,.gteaser,.gextra,.cap{font-weight:500}.cap{color:var(--ink-soft)}.meta{color:var(--ink-soft);font-weight:500}
.script{font-family:var(--f-disp);font-style:italic;font-weight:600;font-size:clamp(26px,7vw,34px);color:var(--forest);letter-spacing:.01em}
.e-card .script,.e-to .script,.side-txt .script,.closing .joy,.thanks,.reply .mk{font-family:var(--f-script);font-style:normal;font-weight:400}
.dark .script{color:var(--paper)}
.verse .ar{color:var(--ink);font-size:clamp(25px,7vw,30px);line-height:2.1}.verse .tr{color:var(--ink);font-size:17.5px;line-height:1.65}.verse .ref{color:var(--forest)}
/* envelope date */
.e-card .e-date{color:var(--forest);font-weight:700;font-size:11.5px;letter-spacing:.2em;opacity:1}.e-card .eyebrow{color:var(--forest)}
/* RSVP: ivory reply card on a moss mat, wax seal on top (no stretched images) */
.reply-wrap{position:relative;max-width:440px;margin:34px auto 0;padding:14px;background:var(--moss) repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);box-shadow:0 6px 18px rgba(40,40,20,.22)}
.reply-wrap .reply-card{background:#FBF8F0 url(../assets/art/paper.webp) center/cover;border:0;border-image:none;box-shadow:none;margin:0;max-width:none;padding:54px 22px 0;overflow:hidden}
.reply-wrap .rseal{position:absolute;left:50%;top:-30px;width:74px;margin-left:-37px;z-index:3}
.reply-wrap .reply-card::before{display:none}.reply-card .vf{margin:14px -6px -34px}
.reply .tick{color:var(--ink);font-weight:500}.reply .cap{color:var(--ink-soft)}.reply label.script{color:var(--forest)}
/* Warmest wishes: painting mat + ivory card + wax seal */
.letter-r{position:relative;max-width:440px;margin:26px auto 30px;padding:50px 18px 24px;background:#33402B url(../assets/art/roses-bg.webp) center/cover}
.letter-r .lp{background:#FBF8F0 url(../assets/art/paper.webp) center/cover;padding:46px 24px 28px;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.letter-r .lp p{margin:0;color:var(--ink);font:italic 500 18px/1.65 var(--f-disp);text-align:center}
.letter-r .seal-s{position:absolute;left:50%;top:18px;width:70px;margin-left:-35px;z-index:2}
/* closing statement: quiet lace trim, no picture card */
.cl-msg{max-width:440px;margin:0 auto}.cl-msg .lt{width:min(240px,70%);margin:0 auto 18px;opacity:.9}.cl-msg .lt.b{margin:18px auto 0;scale:1 -1}
.closing .cl-msg .msg-c{color:var(--paper);font:italic 500 clamp(18px,5vw,21px)/1.7 var(--f-disp);margin:0}
/* v13b: envelope text colour fix, quieter paper behind text */
.opening.dark .env2 .script{color:var(--moss)}.opening.dark .env2 .eyebrow{color:var(--forest)}.opening.dark .env2 .e-date{color:var(--forest)}
.card,.e-card,.reply-wrap .reply-card,.letter-r .lp{background-image:linear-gradient(rgba(251,248,240,.84),rgba(251,248,240,.84)),url(../assets/art/paper.webp);background-color:#FBF8F0;background-size:auto,cover;background-position:0 0,center}

/* ===== v14: lighter, more elegant type (only font weights that are actually loaded) ===== */
body{font-synthesis:none}
.script{font-weight:500;font-size:clamp(28px,7.4vw,36px);letter-spacing:.02em;line-height:1.2;color:var(--forest)}
.script.sm,.reply label.script{font-size:clamp(23px,6.4vw,28px)}
.dark .script{color:var(--paper)}
.eyebrow{font-weight:600;letter-spacing:.3em}
.e-card .e-date{font-weight:500;letter-spacing:.24em;color:var(--forest)}
.cap,.gextra{font-weight:400}
.chap h3,.gsub{font-weight:400}

/* ===== v15: envelope name fit, couple portraits, textured "The Wedding of" ===== */
/* Envelope: the guest name lives in a fixed box between the seal and the bottom of the envelope.
   Long names wrap onto balanced lines and app.js shrinks the font until they fit. */
.e-to{top:calc(64.4% + 38px);bottom:11%;left:14%;right:14%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;overflow:hidden}
.e-to .eyebrow{flex:none;line-height:1.2;font-size:10px}
.e-to .script{max-width:100%;overflow-wrap:break-word;text-wrap:balance;line-height:1.08}

/* "The Wedding of": cream twill with lace running down both sides */
#couple{--lace:clamp(40px,10vw,84px);
  background:#E9DCC2 url(../assets/art/bg-twill.webp) 0 0/320px auto repeat;
  padding-inline:calc(var(--lace) + 4px);overflow:hidden}
#couple::before,#couple::after{content:"";position:absolute;top:0;bottom:0;width:var(--lace);z-index:0;pointer-events:none;
  background:url(../assets/art/lace-edge.webp) 0 0/100% auto repeat-y}
#couple::before{left:0}
#couple::after{right:0;transform:scaleX(-1)}
/* soft light in the middle so the title and "&" read clearly on the fabric */
#couple .wrap{position:relative;z-index:1}
#couple .wrap::before{content:"";position:absolute;inset:-40px -10px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(251,248,240,.55),rgba(251,248,240,0) 70%)}
#couple .script{color:var(--forest);text-shadow:0 1px 0 rgba(251,248,240,.7)}
#couple .people .amp{text-shadow:0 1px 0 rgba(251,248,240,.7)}
#couple .person{box-shadow:0 3px 12px rgba(70,55,30,.16)}
#couple .corner{z-index:1}

/* bride & groom portraits in the oval frame */
.pf-frm{width:min(196px,54vw);margin:0 auto 22px}
.pf-frm .frm-ph img{object-position:50% 28%;transform:none}

/* Moments: an even number of photos stays in a neat 2-column grid */
@media(min-width:700px){.grid.even{grid-template-columns:repeat(2,1fr);max-width:560px}}

/* ===== v16: mini game choice after tapping the seal ===== */
.gate{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;background:rgba(30,34,22,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s var(--ease)}
.gate.in{opacity:1}
.gate-card{position:relative;width:min(340px,100%);padding:34px 24px 26px;text-align:center;
  background-image:linear-gradient(rgba(251,248,240,.86),rgba(251,248,240,.86)),url(../assets/art/paper.webp);background-color:#FBF8F0;background-size:auto,cover;
  box-shadow:0 14px 34px rgba(0,0,0,.35);transform:translateY(14px) scale(.97);transition:transform .45s var(--ease)}
.gate.in .gate-card{transform:none}
.gate-card::before{content:"";position:absolute;inset:9px;border:1px solid var(--sage);opacity:.55;pointer-events:none}
.gate-duo{display:flex;justify-content:center;align-items:flex-end;gap:2px;height:76px;margin:-6px 0 12px}
.gate-duo img{height:100%;width:auto;image-rendering:pixelated}
.gate .eyebrow{font-size:11px;color:var(--moss)}
.gate-t{font:400 clamp(30px,8.4vw,38px)/1.1 var(--f-script);color:var(--forest);margin:6px 0 8px}
.gate-s{font:italic 500 16px/1.5 var(--f-disp);color:var(--ink-soft);max-width:28ch;margin:0 auto}
.gate-btns{display:grid;gap:10px;margin-top:22px;position:relative}
.gate-btns .btn{width:100%;min-height:48px;padding:0 18px;letter-spacing:.14em}
.gate-m{margin-top:14px;font:600 10.5px var(--f-disp);letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
@media(prefers-reduced-motion:reduce){.gate,.gate-card{transition:none}}

/* ---------- Revision: storybook frames, photo slides, gift drop-down, credit ---------- */
/* Storybook frame: the whole photo is shown (no crop), centred on a paper mat with a double rule and photo corners */
.sbook{position:relative;margin:22px auto;width:min(340px,86vw);padding:12px;background:#FBF8F0 url(../assets/art/paper.webp) center/cover;
  box-shadow:0 6px 18px rgba(40,36,24,.22);transform:rotate(-1deg)}
.sbook::before{content:"";position:absolute;inset:5px;border:1px solid rgba(86,96,63,.45);outline:1px solid rgba(86,96,63,.2);outline-offset:-4px;pointer-events:none}
.sbook::after{content:"";position:absolute;top:-11px;left:50%;width:78px;height:22px;margin-left:-39px;background:rgba(203,209,188,.78);transform:rotate(-3deg)}
.sb-in{position:relative;line-height:0}
.sb-in img{display:block;width:auto;height:auto;max-width:100%;max-height:min(440px,58vh);margin:0 auto;filter:saturate(.9) sepia(.08)}
.sb-c{position:absolute;width:18px;height:18px;background:var(--forest);opacity:.85}
.sb-c.k1{top:-3px;left:-3px;clip-path:polygon(0 0,100% 0,0 100%)}.sb-c.k2{top:-3px;right:-3px;clip-path:polygon(0 0,100% 0,100% 100%)}
.sb-c.k3{bottom:-3px;left:-3px;clip-path:polygon(0 0,0 100%,100% 100%)}.sb-c.k4{bottom:-3px;right:-3px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.sbook{width:fit-content}
.cd-book{max-width:min(360px,88vw);margin:26px auto 30px}
.story-book{max-width:min(280px,74vw);margin:0 auto 34px;transform:rotate(1.2deg)}
/* chapter photos keep their own shape, so nobody is cut off */
.chap .pol-s img{aspect-ratio:auto;height:auto}

/* Moments as slides */
.slider{position:relative;margin:30px auto 0;max-width:760px}
.sl-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:14px calc(50% - min(160px,39vw)) 22px;
  align-items:center;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sl-track::-webkit-scrollbar{display:none}
.sl-track:focus-visible{outline:2px solid var(--moss);outline-offset:4px}
.sl{flex:none;scroll-snap-align:center;border:0;padding:8px 8px 26px;background:#fff;box-shadow:0 3px 10px rgba(60,50,30,.22);cursor:zoom-in;line-height:0}
.sl img{display:block;width:auto;height:auto;max-height:min(420px,60vh);max-width:min(320px,78vw);filter:saturate(.9) sepia(.08)}
.sl .ph{display:grid;width:min(280px,70vw);height:min(360px,56vh)}
.sl-track{min-height:calc(min(420px,60vh) + 70px)}
.sl:nth-child(odd){transform:rotate(-1.2deg)}.sl:nth-child(even){transform:rotate(1.2deg)}
.sl-nav{position:absolute;top:50%;transform:translateY(-60%);width:44px;height:44px;border-radius:50%;border:1px solid var(--sage);
  background:rgba(251,248,240,.92);color:var(--moss);font:300 30px/1 var(--f-disp);cursor:pointer;display:grid;place-items:center;padding-bottom:4px;z-index:2}
.sl-nav.prev{left:4px}.sl-nav.next{right:4px}
.sl-foot{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
.sl-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.sl-dots i{width:6px;height:6px;border-radius:50%;background:var(--mist);transition:background .3s,transform .3s}
.sl-dots i.on{background:var(--moss);transform:scale(1.35)}
.sl-count{margin:0;font-size:12.5px}

/* Wedding gift drop-down (same motion as the city guide) */
.gift .gtoggle{background:rgba(251,248,240,.95)}
.gift.open .gbody{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .7s var(--ease),visibility 0s}
.gift.open .gin{padding-top:30px}
.gift .ggrp+.ggrp{margin-top:38px}
.gift .ggrp .eyebrow{color:var(--mist)}
.gift .gnote2{font:italic 500 16px/1.5 var(--f-disp);color:var(--paper);margin:6px auto 0;max-width:380px}
.gift .cards{margin-top:16px}
.gift .card h3{font-size:24px;margin-bottom:8px}
.gift .addr-t{margin:6px 0 10px}

/* Credit line at the very end */
.credit{background:var(--forest);color:var(--mist);text-align:center;padding:30px 24px 38px;position:relative;z-index:2}
.credit .script{font-size:30px;color:var(--paper);margin:0 0 6px}
.credit p:last-child{font:italic 500 14.5px/1.6 var(--f-disp);max-width:340px;margin:0 auto}

/* ==========================================================
   Storybook revision: fonts, textures, scrapbook countdown, book, moments, gift
   ========================================================== */
:root{--f-book:"IM Fell English",Georgia,serif;--f-booksc:"IM Fell English SC",Georgia,serif}
.sec h2{font:400 clamp(40px,11.5vw,50px)/1.15 var(--f-script);color:var(--forest);margin:.1em 0 .25em}
.sec.dark h2{color:var(--paper)}
.sec h2::after{display:none}
.gtitle h2{font:500 clamp(16px,5vw,22px)/1.15 var(--f-disp)}
.sec .eyebrow{font:400 14px/1.4 var(--f-booksc);letter-spacing:.2em;text-transform:none;color:var(--sage)}
.sec.dark .eyebrow{color:var(--mist)}
.quote{font-family:var(--f-book)}

/* textures (kept light/dark enough for contrast) */
#countdown,#gift{background:linear-gradient(rgba(70,80,50,.5),rgba(58,68,48,.62)),url(../assets/art/tx-moss.webp) center/cover,var(--moss)}
#couple{background:linear-gradient(rgba(245,239,227,.62),rgba(245,239,227,.7)),url(../assets/art/tx-sage-damask.webp) center/520px auto,var(--ivory)}
#gallery{background:linear-gradient(rgba(245,239,227,.55),rgba(245,239,227,.65)),url(../assets/art/tx-cream-floral.webp) center/520px auto,var(--ivory)}
#story{background:var(--ivory) url(../assets/art/paper-old.webp) center/cover}

/* profile frame: white lace oval */
.lace-pf{width:min(250px,66vw)}
.lace-pf .frm-ph img{object-position:50% 25%;transform:none}

/* ---------- Counting the days: scrapbook ---------- */
.cdx .quote{font:italic 400 19px/1.55 var(--f-book);color:var(--paper);max-width:340px;margin:34px auto 0}
.scrap{position:relative;width:min(340px,86vw);margin:20px auto 0;aspect-ratio:649/840}
.scrap img{position:absolute;display:block}
.s-doily{width:52%;left:-12%;top:2%;transform:rotate(-12deg);filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.s-stamp{width:23%;right:-4%;top:0;transform:rotate(9deg);z-index:5;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}
.s-eb,.s-ef{left:0;bottom:0;width:100%}
.s-eb{filter:drop-shadow(0 6px 12px rgba(0,0,0,.28))}
.s-ef{z-index:3;pointer-events:none}
.s-card{position:absolute;z-index:2;left:20%;width:60%;top:0;background:#fff;padding:7px 7px 30px;box-shadow:0 4px 12px rgba(0,0,0,.28);transform:rotate(-2.5deg);animation:sPeek 6s ease-in-out infinite}
.s-card::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;margin-left:-37px;background:rgba(203,209,188,.85);transform:rotate(4deg);z-index:2}
@keyframes sPeek{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-8px) rotate(-1.5deg)}}
.show{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--linen)}
.scrap .show img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;filter:saturate(.9) sepia(.08)}
.scrap .show img.on{opacity:1;animation:sKb 7s ease-out forwards}
@keyframes sKb{from{transform:scale(1.12)}to{transform:scale(1)}}
.s-seal{width:17%;left:41.5%;top:66%;z-index:4;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.s-lily{width:38%;right:-13%;bottom:-3%;z-index:5;transform:rotate(-8deg)}
.s-tag{position:absolute;z-index:5;left:-4%;bottom:8%;background:#F3EBDA url(../assets/art/paper-old.webp) center/cover;padding:8px 14px 9px;transform:rotate(-7deg);box-shadow:0 3px 8px rgba(0,0,0,.3);font:400 15px var(--f-booksc);letter-spacing:.14em;color:var(--forest)}
.s-tag::after{content:"";position:absolute;right:-9px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--moss);box-shadow:inset 0 0 0 3px var(--linen)}
.paper-count{position:relative;z-index:6;margin:-8px auto 0;width:min(330px,86vw);padding:30px 14px 22px;background:#F3EBDA url(../assets/art/paper-old.webp) center/cover;transform:rotate(1deg);box-shadow:0 6px 16px rgba(0,0,0,.28)}
.paper-count::before{content:"";position:absolute;left:-2px;right:-2px;top:-14px;height:26px;background:url(../assets/art/lace-trim.webp) center/auto 100% repeat-x;opacity:.95}
.sec.dark .paper-count .eyebrow{color:var(--moss);margin-bottom:6px}
.paper-count .count{margin:0}
.paper-count .count div{flex:1;padding:0;border-left:1px dashed rgba(86,96,63,.35)}.paper-count .count div:first-child{border:0}
.paper-count .count b{font:400 38px/1.1 var(--f-book);color:var(--forest)}
.paper-count .count span{font:600 10.5px var(--f-disp);letter-spacing:.2em;color:var(--ink-soft)}

/* ---------- Our love story: book ---------- */
.book{display:grid;width:min(350px,90vw);margin:26px auto 0;perspective:1800px}
.book>*{grid-area:1/1}
.bk-cover{justify-self:center;align-self:start;position:relative;width:min(280px,74vw);aspect-ratio:343/485;border:0;padding:0;background:none;cursor:pointer;transform-origin:left center;z-index:20}
.bk-cover .face{position:absolute;inset:0;filter:drop-shadow(6px 10px 14px rgba(40,36,24,.35))}
.bk-cover .face>img{width:100%;height:100%}
.bk-ct{position:absolute;left:19%;right:15%;top:16%;bottom:16%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.bk-ct small{font:400 10px var(--f-booksc);letter-spacing:.38em;color:var(--moss)}
.bk-ct strong{font:400 33px/1.12 var(--f-script);color:var(--forest);margin-top:10px}
.bk-ct strong i{display:block;font:italic 400 15px/1.4 var(--f-book);color:var(--sage)}
.bk-ct img{width:20%;margin-top:16px;opacity:.9}
.ribbon{position:absolute;bottom:-30px;left:66%;width:16px;height:52px;background:var(--claret);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);z-index:-1}
.book.open .bk-cover{animation:bkOpen 1.3s cubic-bezier(.6,0,.2,1) forwards;pointer-events:none}
.book.open.still .bk-cover{animation-duration:0s}
@keyframes bkOpen{0%{transform:rotateY(0);opacity:1}75%{opacity:1}100%{transform:rotateY(-170deg);opacity:0}}
.pages{display:none;perspective:2000px}
.book.open .pages{display:grid;animation:bkFade .6s .45s both}
.book.open.still .pages{animation:none}
@keyframes bkFade{from{opacity:0}to{opacity:1}}
.page{grid-area:1/1;position:relative;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.55,0,.25,1),opacity .3s .8s}
.page.turned{transform:rotateY(-180deg);opacity:0;pointer-events:none}
.page:not(.turned){transition:transform 1.1s cubic-bezier(.55,0,.25,1),opacity 0s}
.page .pf{position:relative;height:100%;backface-visibility:hidden;background:#F3EBDA url(../assets/art/paper-old.webp) center/cover;padding:30px 22px 34px;box-shadow:4px 8px 18px rgba(40,36,24,.25);display:flex;flex-direction:column;align-items:center}
.page .pf::before{content:"";position:absolute;inset:9px;border:1px solid rgba(86,96,63,.45);outline:1px solid rgba(86,96,63,.22);outline-offset:-5px;pointer-events:none}
.page .pf::after{content:"";position:absolute;left:0;right:0;top:-2px;height:20px;background:url(../assets/art/lace-trim.webp) center/auto 100% repeat-x;opacity:.9}
.page .pf>*{position:relative;z-index:1}
.page .pb{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;background:#F3EBDA url(../assets/art/paper-old.webp) center/cover}
.bk-num{font:400 13px var(--f-booksc);letter-spacing:.3em;color:var(--sage);margin-top:6px}
.bk-t{font:italic 400 27px/1.15 var(--f-book);color:var(--forest);margin:2px 0 12px}
.bk-p{font:400 15.5px/1.62 var(--f-body);color:var(--ink);text-align:justify;hyphens:auto;padding:0 2px}
.bk-p::first-letter{float:left;font:400 50px/.8 var(--f-book);color:var(--claret);margin:6px 7px 0 0}
.bk-fr{position:relative;width:86%;margin:4px auto 14px}
.page:nth-child(2) .bk-fr{width:80%}
.bk-ph{position:absolute;overflow:hidden;background:var(--linen)}
.bk-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) sepia(.08)}
.bk-fi{position:relative;z-index:2;display:block;width:100%;pointer-events:none}
.bk-pols{position:relative;width:100%;height:270px;margin:4px auto 14px}
.bk-pol{position:absolute;width:58%;background:#fff;padding:6px 6px 22px;box-shadow:0 3px 9px rgba(0,0,0,.25)}
.bk-pol img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.9) sepia(.08)}
.bk-pol.a{left:0;top:4%;transform:rotate(-7deg)}.bk-pol.b{right:0;top:0;transform:rotate(6deg)}
.bk-lov{position:absolute;width:24%;left:38%;bottom:-16px;z-index:3;transform:rotate(-12deg)}
.page.epi .pf{justify-content:center;padding:40px 34px}
.bk-epi{display:flex;flex-direction:column;align-items:center}
.bk-orn{display:flex;align-items:center;gap:10px;width:70%;margin:18px 0;color:var(--sage);font-size:15px}
.bk-orn i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--sage),transparent)}
.bk-epi .q1{font:italic 400 15px/1.7 var(--f-book);color:var(--ink-soft)}
.bk-epi .q2{font:400 25px/1.25 var(--f-script);color:var(--forest);margin:6px 0 2px}
.bk-epi .fin{font:italic 400 14px var(--f-book);color:var(--moss)}
.bk-lov2{width:14%;margin-top:10px}
.bk-tap{margin-top:34px;font:italic 400 16px var(--f-book);color:var(--moss);animation:bkPulse 2.2s ease-in-out infinite}
@keyframes bkPulse{50%{opacity:.45}}
.bk-open .bk-tap{display:none}
.bk-nav{display:none;width:min(350px,90vw);margin:22px auto 0;align-items:center;justify-content:space-between}
.bk-open .bk-nav{display:flex}
.bk-btn{font:italic 400 16px var(--f-book);color:var(--forest);background:rgba(251,248,240,.92);border:1px solid var(--sage);border-radius:99px;min-height:44px;padding:0 16px;cursor:pointer}
.bk-btn:disabled{opacity:.35;cursor:default}
.bk-pg{font:500 12px var(--f-disp);letter-spacing:.2em;color:var(--ink-soft)}
@media(prefers-reduced-motion:reduce){.book.open .bk-cover{animation-duration:.01s}.page{transition:opacity .3s}.page.turned{transform:none}.bk-tap{animation:none}}

/* ---------- Moments ---------- */
.sl{position:relative;padding:8px 8px 34px}
.sl::after{content:attr(data-n);position:absolute;left:0;right:0;bottom:10px;font:italic 400 14px/1 var(--f-book);color:var(--ink-soft)}
.sl-count{font:400 12px var(--f-booksc);letter-spacing:.3em}
.swipe{margin:2px 0 0;font:italic 400 14px var(--f-book);color:var(--sage)}
#gallery .quote{font:italic 400 18px/1.55 var(--f-book);color:var(--forest)}

/* ---------- Warmest wishes ---------- */
.gift .letter-r .lp p{font:italic 400 17px/1.7 var(--f-book)}
.gift .gtoggle{font:italic 400 17px var(--f-book);letter-spacing:0;border-color:var(--mist)}
.gift .gnote2{font:italic 400 15.5px/1.5 var(--f-book)}
.gift .card{background:#F3EBDA url(../assets/art/paper-old.webp) center/cover;max-width:340px;margin-inline:auto;padding:26px 20px 22px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.gift .card .meta{font:400 13px var(--f-booksc);letter-spacing:.3em;text-transform:none;color:var(--moss)}
.gift .card .acct{font:500 28px/1.3 var(--f-disp);font-variant-numeric:lining-nums;letter-spacing:.08em;color:var(--forest)}
.gift .card h3{font:italic 400 24px var(--f-book);color:var(--forest)}
#couple-t{font:400 clamp(42px,12vw,54px)/1.15 var(--f-script);letter-spacing:0}

/* ---------- Fix round: match the approved preview ---------- */
/* The Wedding of: textured damask only, no lace side strips, no card behind the portraits */
#couple{padding-inline:20px;background:linear-gradient(rgba(245,239,227,.62),rgba(245,239,227,.7)),url(../assets/art/tx-sage-damask.webp) center/520px auto,var(--ivory)}
#couple::before,#couple::after,#couple .wrap::before{display:none}
#couple .person{background:none!important;box-shadow:none!important;padding:0 6px;border:0}
#couple .person::before,#couple .person::after{display:none}
#couple .person .corner{display:none}
#couple .people{gap:0;margin-top:18px}
#couple .people .amp{margin:26px 0 24px}
#couple .lace-pf{margin:0 auto 10px}
#couple .pname{font:400 clamp(24px,6.6vw,28px)/1.25 var(--f-book);color:var(--forest)}

/* Event cards: plain textured paper with a thin double rule */
.ev.card{border:0;border-image:none;background:#F3EBDA url(../assets/art/paper-old.webp) center/cover;box-shadow:0 5px 14px rgba(0,0,0,.25);
  width:min(330px,100%);margin-inline:auto;padding:34px 22px 30px;color:var(--ink)}
.ev.card::before{display:block;content:"";position:absolute;inset:8px;border:1px solid rgba(86,96,63,.45);outline:1px solid rgba(86,96,63,.2);outline-offset:-5px;pointer-events:none}
.ev.card::after{display:block}
.ev.card:nth-of-type(odd){transform:rotate(-.8deg)}.ev.card:nth-of-type(even){transform:rotate(.8deg)}
.ev.card h3{font:italic 400 30px/1.15 var(--f-book);color:var(--forest);margin-bottom:8px}
.ev.card .meta{font:500 13.5px/1.6 var(--f-disp);letter-spacing:.14em;margin:2px 0}
.ev.card p:not(.meta):not(.cap){font:400 17px var(--f-body);margin-top:14px}
.ev.card .cap{margin-top:2px;font-size:15px}

/* Gift cards: same width and type sizes as the preview */
.gift .cards{display:grid;justify-items:center;gap:16px;margin-top:14px}
.gift .card{width:min(340px,100%);margin:0 auto;padding:26px 20px 22px;transform:none}
.gift .card::before{display:block;content:"";position:absolute;inset:7px;border:1px solid rgba(86,96,63,.4);pointer-events:none}
.gift .card::after{display:none}
.gift .card .meta{font:400 13px var(--f-booksc);letter-spacing:.3em;margin:0}
.gift .card .acct{font:500 28px/1.3 var(--f-disp);letter-spacing:.08em;margin:4px 0 2px;word-break:normal}
.gift .card .cap{font:italic 400 15px/1.5 var(--f-body);margin:2px 0 0}
.gift .card .addr-t{margin:6px 0 2px}
.gift .card h3{font:italic 400 24px/1.25 var(--f-book);margin:0}
.gift .card .link{margin-top:12px;font:600 11.5px var(--f-disp);letter-spacing:.22em;padding:4px 0;border-bottom:1px solid var(--sage)}
.gift .card .btn{margin-top:12px}
.gift .gnote2{font-size:15.5px;margin-bottom:0}

/* ---------- Closing: no divider; date sits below the flowers on the green ---------- */
.closing{padding-bottom:70px}
.closing>.dk.p-bl,.closing>.dk.p-br{bottom:52px}
.closing .scene-c{margin-bottom:40px}
.cl-date{position:absolute;left:0;right:0;bottom:24px;z-index:3;margin:0;text-align:center;font:400 12px/1.4 var(--f-booksc);letter-spacing:.24em;color:var(--mist)}

/* ---------- City guide: train tickets ---------- */
.tix{margin:16px auto 0;width:min(360px,100%)}
.tix+.tix{margin-top:22px}
.tix-t{position:relative;aspect-ratio:670/305;filter:drop-shadow(0 4px 8px rgba(60,45,20,.25))}
.tix:nth-of-type(odd) .tix-t{transform:rotate(-1deg)}.tix:nth-of-type(even) .tix-t{transform:rotate(1deg)}
.tix-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tix-main{position:absolute;left:9%;right:33.5%;top:15%;bottom:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#3B2F1E}
.tix-from{margin:0;font:400 clamp(9px,2.6vw,11px)/1.3 var(--f-booksc);letter-spacing:.14em;color:#5F4A2C}
.tix-name{margin:2px 0 6px;font:italic 400 clamp(14px,4.1vw,17px)/1.15 var(--f-book);color:#2F2616;text-wrap:balance}
.tix-tm{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,2.4vw,12px)}
.tix-tm small{display:block;font:600 clamp(7.5px,2vw,8.5px)/1.2 var(--f-disp);letter-spacing:.18em;text-transform:uppercase;color:#6E5A3A}
.tix-tm b{display:block;font:500 clamp(17px,5vw,21px)/1.1 var(--f-disp);font-variant-numeric:lining-nums;color:#2F2616}
.tix-arr{font-size:15px;color:#8A7550;padding-bottom:3px}
.tix-wib{margin:2px 0 0;font:600 8px var(--f-disp);letter-spacing:.24em;color:#8A7550}
.tix-stub{position:absolute;left:78%;right:5.2%;top:15%;bottom:14%;display:grid;place-items:center}
.tix-stub span{writing-mode:vertical-rl;transform:rotate(180deg);font:400 clamp(11px,3.2vw,13px) var(--f-booksc);letter-spacing:.32em;color:#5F4A2C}
.tix-note{margin:8px auto 0;max-width:320px;font:italic 400 14.5px/1.5 var(--f-book);color:var(--ink-soft);text-align:center}

/* ---------- City guide places: smaller, airier text inside the cards ---------- */
.gplace.card{width:min(330px,100%);margin-inline:auto;padding:30px 30px 20px}
.gplace h3{font:italic 400 19px/1.25 var(--f-book);color:var(--forest);margin-bottom:8px}
.gplace p{font:400 13.5px/1.65 var(--f-body);color:var(--ink-soft);max-width:240px;margin-inline:auto}
.gplace .gextra{font:italic 400 13px/1.5 var(--f-book);color:var(--claret);margin-top:10px}
.gplace .gmap{display:inline-block;margin-top:12px;font:600 10.5px var(--f-disp);letter-spacing:.22em}
.gift .card .addr-t{max-width:260px;margin-inline:auto;font-size:14.5px;line-height:1.55}

/* ---------- Wishlist (registry.js) in the invitation's storybook style ---------- */
.gift .wish-open{margin-top:14px;min-height:44px;padding:0 22px;font:italic 400 16px var(--f-book);letter-spacing:.02em;text-transform:none;color:var(--forest);border-color:var(--sage);background:rgba(251,248,240,.6)}
.rg-overlay{--rg-paper:#F3EBDA;--rg-forest:#56603F;--rg-maroon:#702B32;--rg-font-head:"IM Fell English",Georgia,serif}
.rg-overlay .rg-sheet{background:#F3EBDA url(../assets/art/paper-old.webp) center/cover}
.rg-overlay .rg-head{background:linear-gradient(rgba(70,80,50,.5),rgba(58,68,48,.62)),url(../assets/art/tx-moss.webp) center/cover,#56603F}
.rg-overlay .rg-kicker{font:400 13px var(--f-booksc);letter-spacing:.24em;font-variant:normal}
.rg-overlay .rg-title{font-size:40px}
.rg-overlay .rg-intro{font:italic 400 15.5px/1.6 var(--f-book);max-width:380px}
.rg-overlay .rg-how{font:italic 400 13.5px/1.5 var(--f-book);font-variant:normal;letter-spacing:.02em}
.rg-overlay .rg-tab{font:400 13px var(--f-booksc);letter-spacing:.14em;font-variant:normal}
.rg-overlay .rg-meta{font:italic 400 14px var(--f-book)}
.rg-overlay .rg-item{max-width:360px;margin:24px auto 0;background:#FBF8F0 url(../assets/art/paper-old.webp) center/cover;box-shadow:0 4px 12px rgba(60,50,30,.18)}
.rg-overlay .rg-frame{border-color:rgba(86,96,63,.4);padding:20px 16px 18px}
.rg-overlay .rg-num{font:400 12px var(--f-booksc);letter-spacing:.24em;font-variant:normal}
.rg-overlay .rg-name{font:italic 400 22px/1.2 var(--f-book);color:var(--forest)}
.rg-overlay .rg-note{font:italic 400 14.5px var(--f-book)}
.rg-overlay .rg-actions{gap:10px;margin-top:14px}
.rg-overlay .rg-btn{max-width:260px;min-height:44px;font:600 11.5px var(--f-disp);letter-spacing:.2em}
.rg-overlay .rg-link{font:600 11px var(--f-disp);letter-spacing:.22em;border-bottom-width:1px}

/* ==========================================================
   VERSION 2 PALETTE: navy · blue · white · gold
   Same layout and style as the first invitation; only colours and fabric textures change.
   (Warmest Wishes and the mini game are not part of this version.)
   ========================================================== */
:root{
  --ivory:#f7f5ef;--paper:#fdfcf9;--linen:#e7e4da;--moss:#1f3057;--forest:#14213d;
  --sage:#b79b63;--mist:#c9d3e6;--ink:#1e2433;--ink-soft:#434b5e;--claret:#8a6a2b;--err:#A4513F;
}
:focus-visible{outline-color:var(--claret)}

/* opening envelope screen */
.opening.dark{background:#14213d url(../assets/art/roses-bg.webp) center/cover}
.opening::before{background:rgba(14,24,48,.3)}
.opening .hint{background:rgba(14,24,48,.5);padding:8px 18px;border-radius:999px;color:#fff}
.e-to .eyebrow{color:var(--ink-soft)}

/* dark sections (counting the days, the day, closing, desktop side panel): soft blue fabric */
.dark,.player,.reply-wrap,#countdown{background:linear-gradient(rgba(22,38,74,.40),rgba(22,38,74,.40)),url(../assets/art/bg-blue.webp) center/cover #36517F}
.side.dark{background:linear-gradient(rgba(22,38,74,.30),rgba(22,38,74,.30)),url(../assets/art/bg-blue.webp) center/cover #4B6A9E}
.dark .meta,.dark .cap,.dark .np-in i,.player .np-in i,.player .tm,.sec.dark .eyebrow{color:#F4F7FC}
.dark .card .meta,.dark .card .cap{color:var(--ink-soft)}
.closing .addr,.closing .pn,.closing .quote,.closing .eyebrow,.cl-date{color:#fff}
.credit{background:var(--forest);color:var(--mist)}

/* light sections: pale damask, paisley and jacquard in blue */
#verse{background:linear-gradient(rgba(247,245,239,.86),rgba(247,245,239,.86)),url(../assets/art/bg-damask-pale.webp) center/cover}
#verse .lace-rule{opacity:.7;width:min(230px,64%)}
#couple{background:#A9BCDB url(../assets/art/bg-jacquard.webp) center/cover;background-blend-mode:multiply}
#playlist{background:linear-gradient(rgba(247,245,239,.9),rgba(247,245,239,.9)),url(../assets/art/bg-paisley.webp) center/cover}
#story,#guide{background:#D2DDEE url(../assets/art/bg-jacquard-tile.webp) 0 0/540px auto repeat;background-blend-mode:multiply}
#gallery{background:#DCE5F2 url(../assets/art/bg-jacquard-tile.webp) 0 0/540px auto repeat;background-blend-mode:multiply}
#rsvp,#wishes{background-color:var(--ivory)}
.sec:not(.dark) .eyebrow,.swipe,.bk-num{color:var(--claret)}
#couple .script,#couple .amp,#couple-t{color:var(--forest)}
.gteaser,.gnote{color:var(--forest)}

/* washi tape, photo rules and paper edges in blue instead of sage */
.tape::after,.pol-s::before,.ev.tape::after,.sbook::after,.s-card::before{background:rgba(201,211,230,.85)}
.sbook::before,.page .pf::before,.ev.card::before{border-color:rgba(31,48,87,.45);outline-color:rgba(31,48,87,.2)}
.paper-count .count div{border-left-color:rgba(31,48,87,.3)}
#couple .person{box-shadow:none}

/* buttons, slides, music */
.btn,.gtoggle{border-color:var(--moss)}.btn:hover{background:var(--forest)}
.sl-nav{color:var(--moss);border-color:var(--sage)}
.sl-dots i{background:#9fb0cf}.sl-dots i.on{background:var(--moss)}
.vinyl{width:min(250px,66vw)}.vinyl.spin .vinyl-img{animation:bob 3.2s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0) rotate(0)}to{transform:translateY(-7px) rotate(.8deg)}}
.lightbox{background:rgba(14,22,42,.94)}

/* RSVP name line without the "I," mark (Indonesian) */
.reply .name.no-mk{grid-template-columns:1fr}

@media(prefers-reduced-motion:reduce){.vinyl.spin .vinyl-img{animation:none!important}}

/* RSVP title: long Indonesian question stays clear of the flower and bird decorations */
#rsvp.sec{padding-top:clamp(150px,44vw,210px)}
#rsvp h2{font-size:clamp(32px,8.6vw,42px);line-height:1.2;max-width:330px;margin-inline:auto;position:relative;z-index:3;text-wrap:balance;
  text-shadow:0 0 12px var(--ivory),0 0 4px var(--ivory)}
#rsvp>.dk.p-tr{width:clamp(100px,28vw,160px)}#rsvp>.dk.p-tl{width:clamp(70px,20vw,110px)}