/* Maison Seal invitation engine · shared styles
   A page sets <body class="theme-NAME">; everything below reads the theme's variables. */
:root{
  color-scheme:light;
  --script:'Great Vibes','Pinyon Script','Snell Roundhand',cursive;
  --names:'Pinyon Script','Great Vibes','Snell Roundhand',cursive;
  --serif:'Cormorant Garamond','EB Garamond',Garamond,'Times New Roman',serif;
  --cx:49.7%; --cy:48.3%;               /* where the four envelope flaps meet */
}
html[lang=ar],html[lang=fa]{
  --script:'Aref Ruqaa','Amiri','Noto Naskh Arabic','Geeza Pro',serif;
  --names:'Aref Ruqaa','Amiri','Noto Naskh Arabic','Geeza Pro',serif;
  --serif:'Amiri','Noto Naskh Arabic','Geeza Pro','Times New Roman',serif;
}
html[lang=el]{
  --script:'EB Garamond','GFS Didot',Garamond,serif;
  --names:'EB Garamond','GFS Didot',Garamond,serif;
  --serif:'EB Garamond','GFS Didot',Garamond,'Times New Roman',serif;
}
html[lang=hi]{
  --script:'Tiro Devanagari Hindi','Noto Serif Devanagari',serif;
  --names:'Tiro Devanagari Hindi','Noto Serif Devanagari',serif;
  --serif:'Tiro Devanagari Hindi','Noto Serif Devanagari',serif;
}
html[lang=zh]{
  --script:'Noto Serif SC','Songti SC',serif;
  --names:'Noto Serif SC','Songti SC',serif;
  --serif:'Noto Serif SC','Songti SC',serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--page-bg);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
html[lang=ar] body,html[lang=fa] body{font-size:20px;line-height:1.75}
html[lang=hi] body{font-size:18px;line-height:1.7}
html[lang=zh] body{font-size:18px;line-height:1.75}
body.locked{overflow:hidden}
.page{max-width:480px;margin:0 auto;background:var(--bg-a);position:relative;overflow:hidden}
p{margin:0}
button{font:inherit}

/* ============ ENVELOPE ============ */
#intro{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:16px;
  background:var(--intro-bg);transition:opacity 1.3s ease, visibility 1.3s}
#intro.gone{opacity:0;visibility:hidden}
.intro-kicker{font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:.08em;color:var(--kicker);opacity:.9;text-align:center;transition:opacity .6s;line-height:1.35}
.intro-kicker b{display:block;font-weight:500;font-style:normal;font-size:21px;letter-spacing:.02em;margin-bottom:2px;opacity:1}
html[lang=ar] .intro-kicker,html[lang=fa] .intro-kicker,html[lang=zh] .intro-kicker,html[lang=hi] .intro-kicker{font-style:normal;letter-spacing:0;font-size:19px}
.env{position:relative;width:min(94vw,440px,calc((100vh - 170px) * .809));aspect-ratio:620/766;max-width:100%;perspective:1700px;cursor:pointer;border:0;padding:0;background:transparent;
  filter:var(--env-shadow)}
.env:focus-visible{outline:2px solid var(--kicker);outline-offset:10px;border-radius:4px}
.glow{position:absolute;inset:0;opacity:0;border-radius:2px;overflow:hidden;transition:opacity 1.1s ease .2s;background:var(--glow)}
.glow::before{content:"";position:absolute;left:var(--cx);top:var(--cy);width:260%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);
  background:repeating-conic-gradient(from 0deg, rgba(255,238,200,0) 0deg, rgba(255,238,200,.35) 1.4deg, rgba(255,238,200,0) 3.2deg, rgba(255,238,200,0) 5deg, rgba(255,238,200,.18) 6.2deg, rgba(255,238,200,0) 8deg);filter:blur(1.5px);
  -webkit-mask:radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 18%, transparent 55%);mask:radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 18%, transparent 55%);
  mix-blend-mode:screen;animation:spinrays 24s linear infinite}
@keyframes spinrays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.flap{position:absolute;inset:0;background:var(--env-img) center/100% 100% no-repeat;backface-visibility:visible;will-change:transform;
  transition:transform 1.9s cubic-bezier(.55,.05,.25,1), filter 1.9s ease}
.flap.top{clip-path:polygon(0 0,100% 0,var(--cx) var(--cy));transform-origin:50% 0;z-index:4}
.flap.bottom{clip-path:polygon(0 100%,100% 100%,var(--cx) var(--cy));transform-origin:50% 100%;z-index:3}
.flap.left{clip-path:polygon(0 0,0 100%,var(--cx) var(--cy));transform-origin:0 50%;z-index:2}
.flap.right{clip-path:polygon(100% 0,100% 100%,var(--cx) var(--cy));transform-origin:100% 50%;z-index:2}
.seal{position:absolute;left:var(--cx);top:var(--cy);width:36%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:6;
  transition:transform .75s cubic-bezier(.3,.7,.3,1), opacity .6s ease .15s}
.seal svg{width:100%;height:100%;display:block;filter:drop-shadow(0 5px 6px rgba(0,0,0,.45)) drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.env:hover .seal{transform:translate(-50%,-50%) scale(1.03)}
.tap{font-family:var(--serif);font-size:15px;letter-spacing:.34em;text-transform:uppercase;color:var(--kicker);animation:breathe 2.6s ease-in-out infinite;transition:opacity .5s;text-align:center}
html[lang=ar] .tap,html[lang=fa] .tap,html[lang=zh] .tap,html[lang=hi] .tap{letter-spacing:0;font-size:18px}
@keyframes breathe{0%,100%{opacity:.4}50%{opacity:1}}
.env.open .seal{transform:translate(-50%,-80%) scale(1.25);opacity:0}
.env.open .top{transform:rotateX(-172deg);filter:brightness(var(--flap-dim,.55))}
.env.open .bottom{transform:rotateX(172deg);filter:brightness(var(--flap-dim,.55))}
.env.open .left{transform:rotateY(172deg);filter:brightness(var(--flap-dim,.5))}
.env.open .right{transform:rotateY(-172deg);filter:brightness(var(--flap-dim,.5))}
.env.open .glow{opacity:1}
#intro.opening .intro-kicker,#intro.opening .tap{opacity:0;animation:none}
.flood{position:fixed;left:50%;top:50%;width:40vmax;height:40vmax;border-radius:50%;transform:translate(-50%,-50%) scale(0);pointer-events:none;z-index:1;
  background:var(--flood);transition:transform 1.8s cubic-bezier(.5,0,.2,1)}
#intro.flooding .flood{transform:translate(-50%,-50%) scale(5.5)}
.reveal-names{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 1s ease;text-align:center;padding:0 16px}
#intro.flooding .reveal-names{opacity:1}
.reveal-names span{white-space:nowrap;font-family:var(--names);color:var(--reveal);line-height:1.05;font-size:clamp(56px,16vw,84px);text-shadow:0 0 18px rgba(255,248,230,.9)}
.reveal-names em{font-family:var(--names);font-style:normal;color:var(--reveal);opacity:.8;font-size:clamp(30px,8vw,40px)}
html[lang=ar] .reveal-names span,html[lang=fa] .reveal-names span{font-size:clamp(50px,14vw,74px);line-height:1.35}
html[lang=el] .reveal-names span,html[lang=zh] .reveal-names span,html[lang=hi] .reveal-names span{font-size:clamp(44px,12vw,62px);line-height:1.25}
html[lang=el] .reveal-names span{font-style:italic}
.env,.intro-kicker,.tap{position:relative;z-index:3}

/* language switch */
#langs{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;direction:ltr;z-index:80;display:flex;gap:0;border-radius:999px;overflow:hidden;
  background:var(--chip-bg);border:1px solid var(--chip-line);box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .35s ease, opacity .35s ease}
#langs.tuck{transform:translateY(-70px);opacity:0;pointer-events:none}
#langs button{border:0;background:transparent;color:var(--chip-ink);padding:8px 13px;font-family:'Cormorant Garamond','Amiri','Noto Serif SC','EB Garamond',serif;font-size:15px;line-height:1.2;cursor:pointer;min-width:44px;min-height:36px}
#langs button[aria-pressed=true]{background:var(--chip-on);color:var(--chip-on-ink)}
#langs button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}

/* ============ PARTICLES ============ */
#petals{position:fixed;inset:0;pointer-events:none;z-index:30}

/* ============ SECTIONS ============ */
section{position:relative;padding:56px 26px;text-align:center}
.tint-a{background:var(--bg-a);color:var(--ink-a);--ink:var(--ink-a);--ink-soft:var(--soft-a)}
.tint-b{background:var(--bg-b);color:var(--ink-b);--ink:var(--ink-b);--ink-soft:var(--soft-b)}
.tint-c{background:var(--bg-c);color:var(--ink-c);--ink:var(--ink-c);--ink-soft:var(--soft-c)}
/* shaped top edge: the section's own colour rises over the one above it */
section.edge::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:34px;background:inherit;
  -webkit-mask:var(--edge) center/100% 100% no-repeat;mask:var(--edge) center/100% 100% no-repeat;pointer-events:none}
section.edge:nth-of-type(even)::before{transform:scaleX(-1)}
.script-h{font-family:var(--script);font-weight:400;font-size:46px;line-height:1.1;color:var(--ink);margin:0}
html[lang=ar] .script-h,html[lang=fa] .script-h{font-size:38px;line-height:1.45}
html[lang=el] .script-h{font-size:34px;font-style:italic;line-height:1.2}
html[lang=hi] .script-h{font-size:32px;line-height:1.4}
html[lang=zh] .script-h{font-size:32px;line-height:1.4;letter-spacing:.08em}
.flourish{display:block;width:120px;height:14px;margin:6px auto 18px;color:var(--gold)}
.lead{max-width:30ch;margin:0 auto;font-size:19px}
html[lang=ar] .lead,html[lang=fa] .lead{font-size:20px;max-width:28ch}

/* hero */
.hero{padding:0;background:var(--hero-bg);position:relative;aspect-ratio:9/16;overflow:hidden}
.hero video,.hero .still,.hero .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .veil{position:absolute;inset:0;pointer-events:none;background:var(--veil)}
.hero .veil::after{content:"";position:absolute;left:0;right:0;bottom:0;height:15%;background:linear-gradient(0deg, rgba(24,14,8,.5), rgba(24,14,8,0))}
.hero .copy{position:absolute;left:0;right:0;top:var(--copy-top,15.5%);text-align:center;display:flex;flex-direction:column;align-items:center;padding:0 12px}
.hero .wd{font-family:var(--script);font-size:clamp(28px,8.6vw,40px);color:var(--hero-ink-2);line-height:1;text-shadow:var(--hero-shadow)}
.hero .date{font-family:var(--serif);letter-spacing:.14em;font-size:clamp(16px,4.6vw,21px);margin-top:6px;color:var(--hero-ink-2);text-shadow:var(--hero-shadow);direction:ltr}
.hero .names{font-family:var(--names);font-weight:400;color:var(--hero-ink);font-size:clamp(44px,12.6vw,62px);line-height:.98;margin:clamp(10px,3.4vw,18px) 0 0;text-shadow:var(--hero-shadow)}
.hero .names .nm{display:block;width:max-content;max-width:none;margin:0 auto;white-space:nowrap}
.hero .names .amp{display:block;font-size:.5em;line-height:1.2;color:var(--hero-ink-2)}
html[lang=ar] .hero .wd,html[lang=fa] .hero .wd{font-size:clamp(24px,7vw,32px);line-height:1.4}
html[lang=ar] .hero .names,html[lang=fa] .hero .names{font-size:clamp(42px,12vw,58px);line-height:1.3;margin-top:4px}
html[lang=ar] .hero .names .amp,html[lang=fa] .hero .names .amp{line-height:1.1}
html[lang=el] .hero .wd,html[lang=el] .hero .names{font-style:italic}
html[lang=el] .hero .names,html[lang=zh] .hero .names,html[lang=hi] .hero .names{font-size:clamp(36px,10.4vw,50px);line-height:1.15}
html[lang=el] .hero .wd,html[lang=zh] .hero .wd,html[lang=hi] .hero .wd{font-size:clamp(22px,6.4vw,30px);line-height:1.3}
html[lang=hi] .hero .wd{line-height:1.6}html[lang=hi] .hero .names{line-height:1.4}
.hero .scroll{position:absolute;left:0;right:0;bottom:2.6%;font-family:var(--script);font-size:24px;color:var(--hero-scroll);display:flex;flex-direction:column;align-items:center;text-shadow:var(--hero-shadow)}
html[lang=ar] .hero .scroll,html[lang=fa] .hero .scroll,html[lang=el] .hero .scroll,html[lang=zh] .hero .scroll,html[lang=hi] .hero .scroll{font-size:18px}
html[lang=el] .hero .scroll{font-style:italic}
.hero .scroll svg{width:22px;height:14px;animation:nudge 2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero .copy > *{opacity:0;transform:translateY(10px);transition:opacity 1.2s ease, transform 1.2s ease}
.hero.show .copy > *{opacity:1;transform:none}
.hero.show .copy .date{transition-delay:.25s}.hero.show .copy .names{transition-delay:.5s}

/* welcome */
.welcome{padding-top:70px}
.corner{position:absolute;top:0;width:150px;height:120px;pointer-events:none}
.corner.l{left:-6px}
.corner.r{right:-6px;transform:scaleX(-1)}
.welcome .couple{font-family:var(--script);font-size:40px;color:var(--ink);line-height:1.1}
.welcome .warm{font-family:var(--script);font-size:30px;color:var(--ink-soft);margin-top:2px}
html[lang=ar] .welcome .couple,html[lang=fa] .welcome .couple{font-size:36px;line-height:1.5}
html[lang=ar] .welcome .warm,html[lang=fa] .welcome .warm{font-size:26px;line-height:1.5}
html[lang=el] .welcome .couple,html[lang=zh] .welcome .couple,html[lang=hi] .welcome .couple{font-size:32px;line-height:1.3}
html[lang=el] .welcome .warm,html[lang=zh] .welcome .warm,html[lang=hi] .welcome .warm{font-size:23px;line-height:1.4}
html[lang=el] .welcome .couple,html[lang=el] .welcome .warm{font-style:italic}
.welcome .body{margin:16px auto 0;max-width:30ch;font-size:19px}
html[lang=ar] .welcome .body,html[lang=fa] .welcome .body{font-size:20px}

/* countdown */
.count{display:flex;justify-content:center;align-items:flex-start;gap:4px;margin-top:10px;font-variant-numeric:tabular-nums lining-nums;direction:ltr}
.count .u{display:flex;flex-direction:column;align-items:center;min-width:62px}
.count b{font-weight:400;font-size:clamp(38px,11vw,48px);line-height:1.1;color:var(--ink);font-family:'Cormorant Garamond','EB Garamond',Garamond,serif}
.count small{font-size:15px;color:var(--ink-soft);letter-spacing:.04em}
.count .c{font-size:clamp(34px,10vw,44px);line-height:1.15;color:var(--ink-soft);font-family:'Cormorant Garamond',Garamond,serif}

/* story + photos */
.story-item{max-width:330px;margin:0 auto 30px}
.story-item:last-child{margin-bottom:0}
.story-item .yr{font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.story-item h3{font-family:var(--serif);font-weight:500;font-size:24px;margin:2px 0 6px;color:var(--ink)}
.story-item p{font-size:18px;color:var(--ink-soft)}
.frame{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--gold-soft);padding:6px;background:var(--bg-c);margin:0 auto 14px;max-width:290px}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:400px;margin:10px auto 0}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:2px}
.gallery img:first-child{grid-column:1/-1;aspect-ratio:4/3}

/* schedule */
.day-h{font-family:var(--serif);font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:22px 0 2px}
html[lang=ar] .day-h,html[lang=fa] .day-h,html[lang=zh] .day-h,html[lang=hi] .day-h{letter-spacing:0;font-size:19px}
.day-d{font-size:17px;color:var(--ink-soft);margin-bottom:4px}
.sched{position:relative;margin:8px auto 0;max-width:330px;padding:6px 0}
.sched .line{position:absolute;left:50%;top:14px;bottom:14px;width:1px;background:var(--ink-soft);opacity:.55}
.sched .row{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;min-height:74px}
.sched time{text-align:end;font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;font-family:'Cormorant Garamond','EB Garamond',Garamond,serif;direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .sched time{text-align:left}
.sched .dot{justify-self:center;width:6px;height:6px;transform:rotate(45deg);background:var(--ink-soft)}
.sched .ev{text-align:start;font-size:19px;line-height:1.2;color:var(--ink)}
.sched .marker{position:absolute;left:50%;top:0;width:46px;height:46px;transform:translate(-50%,-6px);transition:top .25s linear;z-index:2}

/* location */
.venue-name{font-size:24px;font-weight:500;margin-top:4px}
.venue-when{font-size:18px;color:var(--ink-soft);margin-top:4px}
.venue-addr{font-size:18px;margin-top:6px}
.sketch{display:block;width:100%;height:auto;margin:22px 0 4px;color:var(--sketch)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--ink);
  font-family:var(--serif);font-size:17px;text-decoration:none;cursor:pointer;line-height:1.2}
.pill.solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pill svg{width:16px;height:16px;flex:none}
.pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* dress code */
.swatches{display:flex;justify-content:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.swatches figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;width:66px}
.swatches i{display:block;width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 1px var(--gold-soft),0 0 0 4px var(--swatch-ring),0 0 0 5px var(--gold-soft)}
.swatches figcaption{font-size:14px;color:var(--ink-soft);letter-spacing:.02em;line-height:1.2}

/* gift */
.bank{margin:18px auto 0;max-width:320px;border:1px solid var(--gold-soft);padding:14px 16px;text-align:start;font-size:17px;background:var(--card)}
.bank dt{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.bank dd{margin:0 0 8px;direction:ltr;text-align:start;unicode-bidi:plaintext}
html[dir=rtl] .bank dd{text-align:right}
.bank dd:last-child{margin-bottom:0}

/* faq */
.faq{max-width:360px;margin:6px auto 0;text-align:start}
.faq details{border-bottom:1px solid var(--gold-soft);padding:12px 2px}
.faq summary{cursor:pointer;list-style:none;font-size:20px;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:6px;color:var(--ink-soft);font-size:18px}

/* rsvp */
.seal-btn{margin:22px auto 0;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;cursor:pointer;color:var(--ink-soft);font-family:var(--script);font-size:26px}
html[lang=ar] .seal-btn,html[lang=fa] .seal-btn,html[lang=el] .seal-btn,html[lang=zh] .seal-btn,html[lang=hi] .seal-btn{font-size:21px}
html[lang=el] .seal-btn{font-style:italic}
.seal-btn svg{width:86px;height:86px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));transition:transform .3s}
.seal-btn:hover svg{transform:scale(1.05) rotate(-4deg)}
.seal-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.reply-done{margin-top:18px;font-style:italic;color:var(--ink)}

/* modal */
#modal{position:fixed;inset:0;z-index:90;background:rgba(20,12,12,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px}
#modal[hidden]{display:none!important}
.sheet{width:100%;max-width:440px;max-height:calc(100% - 24px);overflow:auto;background:var(--sheet);color:var(--sheet-ink);border-radius:14px 14px 6px 6px;padding:26px 22px 24px;position:relative;
  box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:up .5s cubic-bezier(.2,.8,.2,1);--ink:var(--sheet-ink);--ink-soft:var(--sheet-soft)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet .x{position:absolute;inset-inline-end:12px;top:10px;background:none;border:0;font-size:28px;line-height:1;color:var(--sheet-soft);cursor:pointer;padding:4px 8px}
.sheet h3{font-family:var(--script);font-weight:400;font-size:38px;margin:0;text-align:center;color:var(--sheet-ink)}
html[lang=ar] .sheet h3,html[lang=fa] .sheet h3,html[lang=el] .sheet h3,html[lang=zh] .sheet h3,html[lang=hi] .sheet h3{font-size:30px}
html[lang=el] .sheet h3{font-style:italic}
.sheet .sub{text-align:center;color:var(--sheet-soft);margin:4px 0 18px;font-size:17px}
form{display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:4px;text-align:start;font-size:15px;letter-spacing:.06em;color:var(--sheet-soft)}
html[lang=ar] .fld,html[lang=fa] .fld{letter-spacing:0;font-size:17px}
.fld input,.fld select,.fld textarea{font-family:var(--serif);font-size:19px;color:var(--sheet-ink);background:transparent;border:0;border-bottom:1px solid var(--gold-soft);padding:6px 2px;border-radius:0;width:100%}
.fld textarea{border:1px solid var(--gold-soft);min-height:64px;padding:8px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick label{position:relative;border:1px solid var(--gold-soft);padding:12px 6px;text-align:center;cursor:pointer;font-size:17px;line-height:1.25}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pick label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.err{color:#a3222f;font-size:16px;text-align:center}
.send{margin-top:4px;background:var(--accent);color:var(--on-accent);border:0;padding:14px;font-family:var(--serif);font-size:18px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
html[lang=ar] .send,html[lang=fa] .send,html[lang=zh] .send,html[lang=hi] .send{letter-spacing:0;font-size:20px}
.send:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* closing */
.closing .hope{font-family:var(--script);font-size:42px;color:var(--ink);line-height:1.15}
.closing .with{font-size:18px;color:var(--ink-soft);margin-top:6px}
.closing .sig{font-family:var(--names);font-size:44px;color:var(--sig);margin-top:4px;line-height:1.2}
html[lang=ar] .closing .hope,html[lang=fa] .closing .hope{font-size:34px;line-height:1.5}
html[lang=ar] .closing .sig,html[lang=fa] .closing .sig{font-size:38px;line-height:1.5}
html[lang=el] .closing .hope,html[lang=zh] .closing .hope,html[lang=hi] .closing .hope{font-size:30px;line-height:1.3}
html[lang=el] .closing .sig,html[lang=zh] .closing .sig,html[lang=hi] .closing .sig{font-size:32px;line-height:1.3}
html[lang=el] .closing .hope,html[lang=el] .closing .sig{font-style:italic}
.demo-note{padding:20px 26px 40px;text-align:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft-c);background:var(--bg-c)}
html[lang=ar] .demo-note,html[lang=fa] .demo-note,html[lang=zh] .demo-note,html[lang=hi] .demo-note{letter-spacing:0;font-size:15px}

/* music */
#music{position:fixed;right:18px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;height:52px;min-width:52px;padding:0 16px;border-radius:26px;border:0;
  background:var(--accent);color:var(--on-accent);display:grid;grid-auto-flow:column;gap:8px;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);font-family:var(--serif);font-size:15px;letter-spacing:.06em}
#music[hidden]{display:none}
#music svg{width:18px;height:18px}
#music:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* demo-only: "create yours" call to action (always left-to-right, English) */
#cta{position:fixed;left:14px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:8px;height:52px;padding:0 20px;border-radius:26px;
  background:#fffaf3;color:#5e1a24;border:1.5px solid #b0895a;text-decoration:none;font-family:'Cormorant Garamond',Garamond,serif;font-size:17px;font-weight:600;letter-spacing:.02em;direction:ltr;
  box-shadow:0 6px 18px rgba(0,0,0,.28);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .6s ease, transform .6s ease}
#cta.on{opacity:1;transform:none;pointer-events:auto}
#cta.on.away{opacity:0;transform:translateY(14px);pointer-events:none}
#cta small{font-weight:500;color:#8a6a62;font-size:15px}
#cta:focus-visible{outline:2px solid #5e1a24;outline-offset:3px}
#leadOpen{position:fixed;left:200px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;width:52px;height:52px;border-radius:50%;background:#fffaf3;border:1.5px solid #b0895a;color:#5e1a24;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.28);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .6s ease, transform .6s ease}
#leadOpen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
#leadOpen.on{opacity:1;transform:none;pointer-events:auto}
#leadOpen.on.away{opacity:0;transform:translateY(14px);pointer-events:none}
.demo-cta .promise{list-style:none;margin:22px auto 0;padding:0;max-width:340px;font-size:16px;color:#f8ecdf}
.demo-cta .promise li{margin:4px 0}
.demo-cta .promise li:before{content:'✓ ';color:#d9bf96}
.demo-cta .mail{margin:22px auto 0;display:inline-block;background:none;border:1px solid rgba(217,191,150,.7);color:#fff7ee;border-radius:999px;padding:11px 20px;font:inherit;font-size:16px;cursor:pointer}
.demo-cta .kind{margin:30px auto 0;max-width:340px;padding:20px 18px;border:1px solid rgba(217,191,150,.35);border-radius:14px}
.demo-cta .kind .stars{color:#d9bf96;letter-spacing:.2em;font-size:15px}
.demo-cta .kind blockquote{margin:8px 0;font-style:italic;font-size:17px;line-height:1.45;color:#fff7ee}
.demo-cta .kind figcaption{font-size:14px;color:#d9bf96;letter-spacing:.04em}
.sheet.lead .sub{margin-bottom:14px}
.sheet.lead .two{display:flex;gap:8px}
.sheet.lead .two input{flex:1;min-width:0}
.sheet.lead .fine{font-size:13px;opacity:.75;margin:12px 0 0;text-align:center}
.demo-cta{background:#5e1a24;color:#f8ecdf;text-align:center;padding:44px 24px 110px;direction:ltr;font-family:'Cormorant Garamond',Garamond,serif;font-size:19px;line-height:1.5}
.demo-cta .k{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:#d9bf96}
.demo-cta h2{font-family:'Cormorant Garamond',Garamond,serif;font-weight:500;font-size:32px;line-height:1.15;margin:10px 0 8px;color:#fff7ee}
.demo-cta p{margin:0 auto 20px;max-width:340px;color:rgba(248,236,223,.88);font-size:18px}
.demo-cta a.go{display:inline-block;padding:15px 30px;border-radius:999px;background:#fffaf3;color:#5e1a24;text-decoration:none;font-weight:600;font-size:18px}
.demo-cta .price{margin:0 auto 18px;font-size:17px;color:#d9bf96}
.demo-cta .price b{font-size:34px;font-weight:600;color:#fff7ee;font-variant-numeric:lining-nums}
.demo-cta .price s{font-size:20px;opacity:.7;margin:0 6px;font-variant-numeric:lining-nums}
.demo-cta .sub a{color:#fff7ee}
.demo-cta .sub{margin-top:14px;font-size:15px;color:#d9bf96}
.demo-cta .more{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px auto 0;max-width:360px}
.demo-cta .more a{display:block;border:1px solid rgba(217,191,150,.6);border-radius:999px;padding:8px 14px;color:#f8ecdf;text-decoration:none;font-size:15px}
.demo-cta .more-h{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:#d9bf96;margin:30px 0 0}

.fade-in{animation:fadein 1.4s ease both}
@keyframes fadein{from{opacity:.001}to{opacity:1}}

/* =====================================================================
   THEME · ROSEWOOD (burgundy velvet, blush paper, swans at dawn)
   ===================================================================== */
.theme-rosewood{
  --env-img:url("/assets/themes/rosewood/envelope.jpg");
  --page-bg:#f3e6e0;
  --bg-a:#f3e6e0; --ink-a:#5b3b35; --soft-a:#8a6a62;
  --bg-b:#ecd9d1; --ink-b:#5b3b35; --soft-b:#8a6a62;
  --bg-c:#faf3ea; --ink-c:#5b3b35; --soft-c:#8a6a62;
  --ink:#5b3b35; --ink-soft:#8a6a62;
  --accent:#5e1a24; --on-accent:#faf3ea; --sig:#5e1a24;
  --gold:#b0895a; --gold-soft:#d9bf96; --sketch:#8b6a55; --swatch-ring:#f3e6e0; --card:#faf3ea;
  --sheet:#faf3ea; --sheet-ink:#5b3b35; --sheet-soft:#8a6a62;
  --intro-bg:radial-gradient(120% 80% at 50% 45%, #2b201e 0%, #171110 60%, #0d0909 100%);
  --kicker:#cbb08a; --env-shadow:drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 6px 10px rgba(0,0,0,.45));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #fffaf0 0%, #ffe6ad 10%, #f0b765 24%, #b8683a 46%, #5a2519 72%, #2a100c 100%);
  --flood:radial-gradient(circle, #fffdf6 0%, #ffeec6 30%, rgba(247,214,150,.85) 55%, rgba(214,160,90,0) 72%);
  --reveal:#8a5a33;
  --hero-bg:#efe4d6; --hero-ink:#5a2d22; --hero-ink-2:#5a2d22; --hero-scroll:#fff6e6;
  --hero-shadow:0 0 14px rgba(255,247,236,.95), 0 0 2px rgba(255,247,236,.9);
  --veil:radial-gradient(74% 24% at 50% 31%, rgba(255,244,230,.74) 0%, rgba(255,244,230,.4) 50%, rgba(255,244,230,0) 100%); --copy-top:18.5%;
  --chip-bg:rgba(250,243,234,.92); --chip-line:#d9bf96; --chip-ink:#5b3b35; --chip-on:#5e1a24; --chip-on-ink:#faf3ea;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V14c30 8 50-6 80 2s50 10 90 0 60-12 100-2 50 8 80 0 40-6 50 2v18z'/%3E%3C/svg%3E");
}

/* =====================================================================
   THEME · LAYALI (emerald velvet, gold, lanterns under a full moon)
   ===================================================================== */
.theme-layali{
  --env-img:url("/assets/themes/layali/envelope.jpg");
  --page-bg:#0b2622;
  --bg-a:#0f332d; --ink-a:#f3e9d2; --soft-a:#cdbd96;
  --bg-b:#0b2823; --ink-b:#f3e9d2; --soft-b:#cdbd96;
  --bg-c:#f6efe0; --ink-c:#17403a; --soft-c:#5d7469;
  --ink:#f3e9d2; --ink-soft:#cdbd96;
  --accent:#c9a45c; --on-accent:#0d2b26; --sig:#e3c47e;
  --gold:#c9a45c; --gold-soft:rgba(201,164,92,.55); --sketch:#c9a45c; --swatch-ring:#0f332d; --card:rgba(255,255,255,.04);
  --sheet:#f6efe0; --sheet-ink:#17403a; --sheet-soft:#5d7469;
  --intro-bg:radial-gradient(120% 80% at 50% 45%, #10332e 0%, #071a17 60%, #030c0b 100%);
  --kicker:#dcc48a; --env-shadow:drop-shadow(0 30px 40px rgba(0,0,0,.65)) drop-shadow(0 6px 10px rgba(0,0,0,.5));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #fffaf0 0%, #ffe9b0 10%, #e9bd62 24%, #9c7a34 46%, #173f37 74%, #06201c 100%);
  --flood:radial-gradient(circle, #fffdf3 0%, #fff0c4 30%, rgba(238,208,134,.88) 55%, rgba(201,164,92,0) 72%);
  --reveal:#17403a;
  --hero-bg:#0b2a2a; --hero-ink:#fbf0d2; --hero-ink-2:#ecd9a8; --hero-scroll:#fbf0d2;
  --hero-shadow:0 2px 14px rgba(3,10,20,.95), 0 0 4px rgba(3,10,20,.85);
  --veil:radial-gradient(70% 20% at 55% 37%, rgba(4,12,24,.62) 0%, rgba(4,12,24,.3) 55%, rgba(4,12,24,0) 100%), linear-gradient(180deg, rgba(6,64,52,.3) 0%, rgba(6,64,52,.12) 45%, rgba(6,64,52,0) 70%); --copy-top:26.5%;
  --chip-bg:rgba(8,32,28,.82); --chip-line:rgba(201,164,92,.7); --chip-ink:#f3e9d2; --chip-on:#c9a45c; --chip-on-ink:#0d2b26;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20Q25 20 25 6Q25 20 50 20T75 6Q75 20 100 20T125 6Q125 20 150 20T175 6Q175 20 200 20T225 6Q225 20 250 20T275 6Q275 20 300 20T325 6Q325 20 350 20T375 6Q375 20 400 20V34z'/%3E%3C/svg%3E");
}
.theme-layali section.edge:nth-of-type(even)::before{transform:none}
.theme-layali .hero .scroll{text-shadow:0 1px 6px rgba(0,0,0,.6)}
.theme-layali .hero .copy{left:10%}
.theme-layali .tint-c .pill.solid,.theme-layali .sheet .send,.theme-layali .sheet .pick label:has(input:checked){background:#17403a;border-color:#17403a;color:#f6efe0}
.theme-layali .tint-c{--gold:#a8853f;--gold-soft:rgba(168,133,63,.5);--sig:#17403a;--swatch-ring:#f6efe0;--card:#fffaf0}
.theme-layali .sheet{--gold-soft:rgba(168,133,63,.5);--accent:#17403a;--on-accent:#f6efe0}
.theme-layali .reply-done{color:var(--ink)}

/* =====================================================================
   THEME · AZURE (ivory satin, sea and sky, bougainvillea)
   ===================================================================== */
.theme-azure{
  --env-img:url("/assets/themes/azure/envelope.jpg");
  --page-bg:#f7f3ea;
  --bg-a:#fbf8f1; --ink-a:#27415c; --soft-a:#6c7f92;
  --bg-b:#e9f0f4; --ink-b:#27415c; --soft-b:#6c7f92;
  --bg-c:#fffdf8; --ink-c:#27415c; --soft-c:#6c7f92;
  --ink:#27415c; --ink-soft:#6c7f92;
  --accent:#27415c; --on-accent:#fffdf8; --sig:#27415c;
  --gold:#b9975b; --gold-soft:#dccaa2; --sketch:#6f89a3; --swatch-ring:#fbf8f1; --card:#fffdf8;
  --sheet:#fffdf8; --sheet-ink:#27415c; --sheet-soft:#6c7f92;
  --intro-bg:radial-gradient(120% 80% at 50% 40%, #fdfbf5 0%, #efe8da 55%, #ddd3c0 100%);
  --kicker:#7b6a4a; --env-shadow:drop-shadow(0 26px 34px rgba(86,70,40,.38)) drop-shadow(0 5px 8px rgba(86,70,40,.28));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #ffffff 0%, #fff4d2 12%, #f4d89a 28%, #e6c283 48%, #cfe0ea 76%, #a9c3d4 100%);
  --flood:radial-gradient(circle, #ffffff 0%, #fff6dc 34%, rgba(255,236,190,.9) 56%, rgba(240,214,160,0) 72%);
  --reveal:#27415c;
  --hero-bg:#dfeaf0; --hero-ink:#22405c; --hero-ink-2:#3b5873; --hero-scroll:#22405c;
  --hero-shadow:0 0 14px rgba(255,255,255,.95), 0 0 2px rgba(255,255,255,.9);
  --veil:none; --copy-top:15%; --flap-dim:.86;
  --chip-bg:rgba(255,253,248,.92); --chip-line:#dccaa2; --chip-ink:#27415c; --chip-on:#27415c; --chip-on-ink:#fffdf8;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20c50-16 100 12 150 0s100-16 150-2 70 6 100-4v20z'/%3E%3C/svg%3E");
}

/* =====================================================================
   THEME · NOIR (black velvet, champagne gold, art-deco lines)
   ===================================================================== */
.theme-noir{
  --env-img:url("/assets/themes/noir/envelope.jpg");
  --page-bg:#0c0b0b;
  --bg-a:#121111; --ink-a:#efe6d3; --soft-a:#b8ab8f;
  --bg-b:#0b0a0a; --ink-b:#efe6d3; --soft-b:#b8ab8f;
  --bg-c:#1a1817; --ink-c:#efe6d3; --soft-c:#b8ab8f;
  --ink:#efe6d3; --ink-soft:#b8ab8f;
  --accent:#d2b574; --on-accent:#121111; --sig:#e2c98d;
  --gold:#d2b574; --gold-soft:rgba(210,181,116,.5); --sketch:#d2b574; --swatch-ring:#121111; --card:rgba(255,255,255,.04);
  --sheet:#f5efe3; --sheet-ink:#1b1917; --sheet-soft:#6d6558;
  --intro-bg:radial-gradient(120% 80% at 50% 45%, #2a2623 0%, #121010 60%, #060505 100%);
  --kicker:#d8c391; --env-shadow:drop-shadow(0 30px 40px rgba(0,0,0,.7)) drop-shadow(0 6px 10px rgba(0,0,0,.5));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #fffaf0 0%, #ffecb8 10%, #e2c078 24%, #8f7338 46%, #2a241a 74%, #0b0a09 100%);
  --flood:radial-gradient(circle, #fffdf6 0%, #fff0c8 30%, rgba(232,206,140,.9) 55%, rgba(210,181,116,0) 72%);
  --reveal:#3b2f17;
  --hero-bg:#0d0c0c; --hero-ink:#fff6de; --hero-ink-2:#f3dfae; --hero-scroll:#fff6de;
  --hero-shadow:0 2px 14px rgba(20,10,24,.95), 0 0 4px rgba(20,10,24,.85);
  --veil:radial-gradient(64% 20% at 55% 40%, rgba(24,12,30,.6) 0%, rgba(24,12,30,.3) 55%, rgba(24,12,30,0) 100%); --copy-top:31%;
  --names:'Cormorant Garamond','EB Garamond',Garamond,serif;
  --chip-bg:rgba(18,17,17,.85); --chip-line:rgba(210,181,116,.7); --chip-ink:#efe6d3; --chip-on:#d2b574; --chip-on-ink:#121111;
  --edge:none;
}
.theme-noir .sheet{--gold-soft:rgba(140,115,56,.5);--accent:#1b1917;--on-accent:#f5efe3}
.theme-noir .sheet .send,.theme-noir .sheet .pick label:has(input:checked){background:#1b1917;border-color:#1b1917;color:#f5efe3}
html:not([lang=ar]):not([lang=fa]):not([lang=zh]):not([lang=hi]):not([lang=el]) .theme-noir .hero .names{font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(34px,10vw,48px);line-height:1.15}
html:not([lang=ar]):not([lang=fa]):not([lang=zh]):not([lang=hi]):not([lang=el]) .theme-noir .hero .names .amp{font-size:.62em;font-style:italic;text-transform:none;letter-spacing:0;line-height:1.5}
html:not([lang=ar]):not([lang=fa]):not([lang=zh]):not([lang=hi]):not([lang=el]) .theme-noir .hero .wd{font-family:var(--serif);font-size:12.5px;letter-spacing:.3em;text-transform:uppercase}
.theme-noir section.edge{border-top:1px solid rgba(210,181,116,.28)}
.theme-noir .hero .copy{left:10%}
html:not([lang=ar]):not([lang=fa]):not([lang=zh]):not([lang=hi]) .theme-noir{--script:'Cormorant Garamond','EB Garamond',Garamond,serif}
.theme-noir .welcome .couple,.theme-noir .welcome .warm,.theme-noir .closing .hope,.theme-noir .seal-btn,.theme-noir .hero .scroll,.theme-noir .sheet h3{font-style:italic}
.theme-noir .welcome .couple{font-size:34px}.theme-noir .welcome .warm{font-size:24px}.theme-noir .closing .hope{font-size:34px}.theme-noir .closing .sig{font-size:34px;letter-spacing:.06em}.theme-noir .seal-btn{font-size:22px}.theme-noir .hero .scroll{font-size:19px}
.theme-noir .script-h{font-family:var(--serif);font-size:30px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;line-height:1.3}
html[lang=ar] .theme-noir .script-h,html[lang=fa] .theme-noir .script-h,html[lang=zh] .theme-noir .script-h,html[lang=hi] .theme-noir .script-h{letter-spacing:0;text-transform:none}


/* =====================================================================
   THEME · LUMIÈRE (ivory satin, candlelit arch over the sea at sunset)
   ===================================================================== */
.theme-lumiere{
  --env-img:url("/assets/themes/lumiere/envelope.jpg");
  --page-bg:#f7efe3;
  --bg-a:#fbf5ec; --ink-a:#5a4030; --soft-a:#8f7560;
  --bg-b:#f3e7d6; --ink-b:#5a4030; --soft-b:#8f7560;
  --bg-c:#fffaf3; --ink-c:#5a4030; --soft-c:#8f7560;
  --ink:#5a4030; --ink-soft:#8f7560;
  --accent:#6f4e2c; --on-accent:#fffaf3; --sig:#6f4e2c;
  --gold:#b8935a; --gold-soft:#dcc7a0; --sketch:#a98b62; --swatch-ring:#fbf5ec; --card:#fffaf3;
  --sheet:#fffaf3; --sheet-ink:#5a4030; --sheet-soft:#8f7560;
  --intro-bg:radial-gradient(120% 80% at 50% 40%, #fffaf2 0%, #f1e6d6 55%, #dfd0b8 100%);
  --kicker:#7b6344; --env-shadow:drop-shadow(0 26px 34px rgba(96,70,34,.4)) drop-shadow(0 5px 8px rgba(96,70,34,.28));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #ffffff 0%, #fff1cc 12%, #f7cf8c 28%, #e9a965 48%, #c98a5e 74%, #9a6a4c 100%);
  --flood:radial-gradient(circle, #ffffff 0%, #fff3d6 34%, rgba(255,226,170,.9) 56%, rgba(240,200,140,0) 72%);
  --reveal:#6f4e2c; --flap-dim:.86;
  --hero-bg:#f2dcc0; --hero-ink:#55351f; --hero-ink-2:#55351f; --hero-scroll:#fff6e6;
  --hero-shadow:0 0 14px rgba(255,246,228,.95), 0 0 3px rgba(255,246,228,.9);
  --veil:radial-gradient(62% 24% at 54.5% 35%, rgba(255,245,226,.72) 0%, rgba(255,245,226,.4) 45%, rgba(255,245,226,0) 100%); --copy-top:24%;
  --chip-bg:rgba(255,250,243,.92); --chip-line:#dcc7a0; --chip-ink:#5a4030; --chip-on:#6f4e2c; --chip-on-ink:#fffaf3;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20c50-16 100 12 150 0s100-16 150-2 70 6 100-4v20z'/%3E%3C/svg%3E");
}
.theme-lumiere .hero .copy{left:9%}
.theme-lumiere .hero .scroll{text-shadow:0 1px 8px rgba(60,36,14,.75)}
.theme-rosewood .hero .scroll{text-shadow:0 1px 8px rgba(60,36,14,.75)}

/* =====================================================================
   THEME · LUNA (midnight velvet, a moonlit terrace over the lake)
   ===================================================================== */
.theme-luna{
  --env-img:url("/assets/themes/luna/envelope.jpg");
  --page-bg:#0b1226;
  --bg-a:#111b36; --ink-a:#f2e9d6; --soft-a:#c5b998;
  --bg-b:#0c1429; --ink-b:#f2e9d6; --soft-b:#c5b998;
  --bg-c:#f7f0e3; --ink-c:#1c2a4d; --soft-c:#5f6a82;
  --ink:#f2e9d6; --ink-soft:#c5b998;
  --accent:#d4b06a; --on-accent:#0f1830; --sig:#e6c988;
  --gold:#d4b06a; --gold-soft:rgba(212,176,106,.55); --sketch:#d4b06a; --swatch-ring:#111b36; --card:rgba(255,255,255,.05);
  --sheet:#f7f0e3; --sheet-ink:#1c2a4d; --sheet-soft:#5f6a82;
  --intro-bg:radial-gradient(120% 80% at 50% 45%, #1a274a 0%, #0a1022 60%, #04070f 100%);
  --kicker:#dcc48a; --env-shadow:drop-shadow(0 30px 40px rgba(0,0,0,.65)) drop-shadow(0 6px 10px rgba(0,0,0,.5));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #fffaf0 0%, #ffecb8 10%, #e9c26c 24%, #a07e3c 46%, #1d2b52 74%, #070c1c 100%);
  --flood:radial-gradient(circle, #fffdf3 0%, #fff0c4 30%, rgba(238,208,134,.88) 55%, rgba(212,176,106,0) 72%);
  --reveal:#1c2a4d;
  --hero-bg:#0d1630; --hero-ink:#fbf0d2; --hero-ink-2:#ecd9a8; --hero-scroll:#fbf0d2;
  --hero-shadow:0 2px 14px rgba(4,8,22,.9), 0 0 4px rgba(4,8,22,.8);
  --veil:radial-gradient(64% 24% at 55.5% 31%, rgba(6,10,28,.6) 0%, rgba(6,10,28,0) 100%); --copy-top:20.5%;
  --chip-bg:rgba(10,16,36,.82); --chip-line:rgba(212,176,106,.7); --chip-ink:#f2e9d6; --chip-on:#d4b06a; --chip-on-ink:#0f1830;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20c50-16 100 12 150 0s100-16 150-2 70 6 100-4v20z'/%3E%3C/svg%3E");
}
.theme-luna .hero .copy{left:11%}
.theme-luna .tint-c .pill.solid,.theme-luna .sheet .send,.theme-luna .sheet .pick label:has(input:checked){background:#1c2a4d;border-color:#1c2a4d;color:#f7f0e3}
.theme-luna .tint-c{--gold:#a8853f;--gold-soft:rgba(168,133,63,.5);--sig:#1c2a4d;--swatch-ring:#f7f0e3;--card:#fffaf0}
.theme-luna .sheet{--gold-soft:rgba(168,133,63,.5);--accent:#1c2a4d;--on-accent:#f7f0e3}

/* slow drift on still scenes so they feel alive */
.hero .still.kb{animation:kb 28s ease-in-out infinite alternate;transform-origin:54% 34%;will-change:transform}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}


/* =====================================================================
   LETTERING ON THE SCENE: no box. Each picture is reframed so the arch opening is dead centre and the
   sky behind the names is cleaned and toned (see grade3.py). The lettering is centred on that spot.
   ===================================================================== */
.hero .copy{left:0;right:0;top:var(--copy-cy,32%);transform:translateY(-50%)}
.theme-rosewood .hero .copy,.theme-layali .hero .copy,.theme-noir .hero .copy,.theme-lumiere .hero .copy,.theme-luna .hero .copy{left:0}
.hero .wd,.hero .date,.hero .names{text-shadow:var(--hero-shadow)}
.hero .names{-webkit-text-stroke:.35px currentColor;letter-spacing:.01em}
.hero .wd,.hero .date{-webkit-text-stroke:.2px currentColor}
.hero .date{font-weight:600}
.theme-rosewood{--copy-cy:31.5%;--veil:none;--hero-ink:#3a1f14;--hero-ink-2:#3a1f14;
  --hero-shadow:0 0 1px rgba(255,249,238,.95), 0 0 9px rgba(255,247,234,.95), 0 0 22px rgba(255,245,228,.9)}
.theme-lumiere{--copy-cy:40.5%;--veil:none;--hero-ink:#3a2113;--hero-ink-2:#3a2113;
  --hero-shadow:0 0 1px rgba(255,249,238,.95), 0 0 9px rgba(255,247,232,.95), 0 0 22px rgba(255,245,226,.9)}
.theme-layali{--copy-cy:45.5%;--veil:none;--hero-ink:#fff8e6;--hero-ink-2:#f3e2b6;
  --hero-shadow:0 1px 2px rgba(0,14,12,.75), 0 0 12px rgba(1,18,16,.95), 0 0 26px rgba(1,18,16,.8)}
.theme-luna{--copy-cy:46%;--veil:none;--hero-ink:#fff8e6;--hero-ink-2:#f3e2b6;
  --hero-shadow:0 1px 2px rgba(2,6,20,.75), 0 0 12px rgba(3,8,26,.95), 0 0 26px rgba(3,8,26,.8)}
.theme-noir{--copy-cy:47.5%;--veil:none;--hero-ink:#fff8e6;--hero-ink-2:#f1dcae;
  --hero-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 12px rgba(8,6,10,.95), 0 0 26px rgba(8,6,10,.85)}
.theme-rosewood .hero .names{font-size:clamp(40px,11.4vw,56px)}
.theme-lumiere .hero .wd,.theme-luna .hero .wd,.theme-layali .hero .wd{font-size:clamp(22px,6.6vw,31px)}
html:not([lang=ar]):not([lang=fa]) .theme-luna .hero .wd{font-size:clamp(20px,5.8vw,27px)}
.theme-lumiere .hero .date,.theme-luna .hero .date,.theme-layali .hero .date,.theme-noir .hero .date{font-size:clamp(14px,4vw,18px)}
html:not([lang=ar]):not([lang=fa]):not([lang=zh]):not([lang=hi]):not([lang=el]) .theme-noir .hero .wd{font-size:11px;letter-spacing:.22em}
html:not([lang=ar]):not([lang=fa]):not([lang=zh]):not([lang=hi]):not([lang=el]) .theme-noir .hero .names{letter-spacing:.1em}

/* =====================================================================
   OPENING STYLES (chosen per invitation with "opening", or ?open= in the link)
   classic = flaps + rays (original) · bloom · curtain · letter
   --fx is the colour of the light, set per design.
   ===================================================================== */
.theme-rosewood{--fx:244,196,170;--fx-hi:255,236,220}
.theme-lumiere{--fx:246,214,160;--fx-hi:255,244,222}
.theme-layali{--fx:226,198,128;--fx-hi:255,240,200}
.theme-luna{--fx:214,204,232;--fx-hi:255,246,226}
.theme-noir{--fx:222,196,138;--fx-hi:255,242,210}
.theme-azure{--fx:240,214,160;--fx-hi:255,246,226}
.letter{display:none}
/* shared: the seal presses, glows, and melts into dust */
.env.melt .seal{animation:sealmelt .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes sealmelt{0%{transform:translate(-50%,-50%) scale(1);filter:none;opacity:1}16%{transform:translate(-50%,-50%) scale(.93)}
  45%{transform:translate(-50%,-50%) scale(1.04);filter:brightness(1.25) drop-shadow(0 0 18px rgba(var(--fx-hi),.9));opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.22);filter:brightness(1.5) blur(5px) drop-shadow(0 0 30px rgba(var(--fx-hi),.9));opacity:0}}
.dusts{position:absolute;left:var(--cx);top:var(--cy);width:0;height:0;z-index:7;pointer-events:none}
.dust{position:absolute;left:0;top:0;border-radius:50%;background:rgb(var(--fx-hi));box-shadow:0 0 8px 2px rgba(var(--fx),.9);opacity:0;animation:dust 1.5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes dust{0%{transform:translate(0,0) scale(.4);opacity:0}18%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}
/* A · bloom */
.open-bloom #intro{transition:none}
.open-bloom .env{transition:transform 2.6s cubic-bezier(.3,.2,.2,1)}
.open-bloom .env.drift{transform:scale(1.07)}
#bloomRing{position:fixed;z-index:61;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  border:1.5px solid rgba(var(--fx-hi),.95);box-shadow:0 0 22px 7px rgba(var(--fx),.7), 0 0 70px 26px rgba(var(--fx),.35), inset 0 0 46px 14px rgba(var(--fx-hi),.4)}
/* B · curtain */
.open-curtain #intro{transition:none}
.open-curtain .env{transition:transform 2.6s cubic-bezier(.3,.2,.2,1)}
.open-curtain .env.drift{transform:scale(1.05)}
.seamEdge{position:fixed;z-index:61;top:0;bottom:0;width:2px;opacity:0;left:50%;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--fx-hi),0) 0%, rgba(var(--fx-hi),1) 18%, rgba(var(--fx-hi),1) 82%, rgba(var(--fx-hi),0) 100%);
  box-shadow:0 0 20px 7px rgba(var(--fx),.75), 0 0 70px 26px rgba(var(--fx),.38)}
/* C · letter */
.open-letter .glow{display:none}
.open-letter .letter{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:9% 10%;z-index:1;border-radius:6px;text-align:center;
  background:linear-gradient(160deg,#fffdf8 0%,#faf1e4 60%,#f3e6d2 100%);color:#5a3a2a;box-shadow:inset 0 0 0 1px rgba(176,137,90,.7), inset 0 0 0 6px #fffaf2, inset 0 0 0 7px rgba(176,137,90,.45), 0 0 0 rgba(0,0,0,0);
  transition:transform 1.3s cubic-bezier(.3,.1,.2,1), box-shadow 1.3s ease;font-family:var(--names)}
.open-letter .letter::before,.open-letter .letter::after{content:"";width:38%;height:1px;background:linear-gradient(90deg,rgba(176,137,90,0),rgba(176,137,90,.9),rgba(176,137,90,0));order:0}
.open-letter .letter::before{margin-bottom:12px}.open-letter .letter::after{margin-top:12px;order:9}
.open-letter .letter i{font-style:normal;font-size:clamp(15px,4.4vw,20px);letter-spacing:.2em;color:#b0895a;margin-bottom:8px;font-family:'Cormorant Garamond',Garamond,serif}
.open-letter .letter b{font-weight:400;font-size:clamp(34px,10vw,48px);line-height:1.05}
.open-letter .letter em{font-style:normal;font-size:clamp(18px,5vw,24px);color:#b0895a;line-height:1.2}
.open-letter .letter u{text-decoration:none;font-family:'Cormorant Garamond',Garamond,serif;font-size:clamp(13px,3.8vw,17px);letter-spacing:.2em;margin-top:10px;color:#8a6a52}
.open-letter .flap{transition:transform 1.7s cubic-bezier(.5,.05,.25,1), filter 1.7s ease}
.open-letter .env.open .top,.open-letter .env.open .bottom{filter:brightness(.62)}
.open-letter .env.open .left,.open-letter .env.open .right{filter:brightness(.56)}
.open-letter .env.rise .letter{transform:translateY(-5%) scale(1.08);z-index:8;box-shadow:inset 0 0 0 1px rgba(176,137,90,.7), inset 0 0 0 6px #fffaf2, inset 0 0 0 7px rgba(176,137,90,.45), 0 26px 60px rgba(0,0,0,.45), 0 0 80px 10px rgba(var(--fx),.55)}
.open-letter #intro{transition:opacity 1.1s ease, visibility 1.1s}
.open-letter #intro.lift{opacity:0}
.open-letter #intro.lift .letter{transform:translateY(-8%) scale(1.5);transition:transform 1.1s cubic-bezier(.5,0,.3,1)}

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

/* headings break into even lines, and the last line of the page clears the floating music button */
.script-h,.closing .hope,.welcome .couple{text-wrap:balance}
.closing{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* PREVIEW MARK: shown while a couple's block has 'preview': True */
#pv{position:fixed;inset:-20% -40%;z-index:60;pointer-events:none;display:flex;flex-wrap:wrap;align-content:space-around;justify-content:space-around;gap:9vh 6vw;transform:rotate(-24deg)}
#pv span{font:600 15px/1 Arial,Helvetica,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#fff;opacity:.34;text-shadow:0 0 2px rgba(0,0,0,.75),0 1px 6px rgba(0,0,0,.45);white-space:nowrap}
#pvbar{position:fixed;left:0;right:0;top:0;z-index:61;margin:0;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;background:rgba(30,12,14,.88);color:#f3e2c4;font:500 12px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:center;pointer-events:none}

/* ===== NEW COLLECTION (Oct 2026) ===== */

.theme-ivoire{
  --env-img:url("/assets/themes/ivoire/envelope.jpg");
  --page-bg:#fbf5ee;
  --bg-a:#fbf5ee; --ink-a:#5a3f33; --soft-a:#8e7464;
  --bg-b:#f4e8de; --ink-b:#5a3f33; --soft-b:#8e7464;
  --bg-c:#fffaf5; --ink-c:#5a3f33; --soft-c:#8e7464;
  --ink:#5a3f33; --ink-soft:#8e7464;
  --accent:#7c4e3c; --on-accent:#fffaf5; --sig:#7c4e3c;
  --gold:#b8935a; --gold-soft:#dcc7a0; --sketch:#b8935a; --swatch-ring:#fbf5ee; --card:#fffaf5;
  --sheet:#fffaf5; --sheet-ink:#5a3f33; --sheet-soft:#8e7464;
  --intro-bg:radial-gradient(120% 80% at 50% 40%, #fffaf3 0%, #f4e8da 55%, #e4d3bd 100%);
  --kicker:#7b6344; --env-shadow:drop-shadow(0 26px 34px rgba(96,70,34,.4)) drop-shadow(0 5px 8px rgba(96,70,34,.28));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #ffffff 0%, #fff1cc 12%, #f7cf8c 28%, #e9a965 48%, #c98a5e 74%, #9a6a4c 100%);
  --flood:radial-gradient(circle, #ffffff 0%, #fff3d6 34%, rgba(255,226,170,.9) 56%, rgba(240,200,140,0) 72%);
  --reveal:#7c4e3c; --flap-dim:.86;
  --hero-bg:#f6e6d8; --hero-ink:#4a2a1c; --hero-ink-2:#5a3a2a; --hero-scroll:#4a2a1c;
  --hero-shadow:0 0 1px rgba(255,248,238,.95), 0 0 9px rgba(255,248,238,.95), 0 0 22px rgba(255,248,238,.9);
  --veil:none; --copy-cy:27%;
  --chip-bg:rgba(255,255,255,.9); --chip-line:#dcc7a0; --chip-ink:#5a3f33; --chip-on:#7c4e3c; --chip-on-ink:#fffaf5;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20c50-16 100 12 150 0s100-16 150-2 70 6 100-4v20z'/%3E%3C/svg%3E");
  --fx:246,214,170; --fx-hi:255,244,226;
}
.theme-ivoire .hero .copy{left:0}
.theme-ivoire .hero .scroll{text-shadow:0 0 2px rgba(255,248,238,.95), 0 0 10px rgba(255,248,238,.95), 0 0 20px rgba(255,248,238,.85)}

.theme-cristal{
  --env-img:url("/assets/themes/cristal/envelope.jpg");
  --page-bg:#f6f6ee;
  --bg-a:#f6f6ee; --ink-a:#3e4a3b; --soft-a:#6c7866;
  --bg-b:#ebeee2; --ink-b:#3e4a3b; --soft-b:#6c7866;
  --bg-c:#fdfdf8; --ink-c:#3e4a3b; --soft-c:#6c7866;
  --ink:#3e4a3b; --ink-soft:#6c7866;
  --accent:#4c5f45; --on-accent:#fdfdf8; --sig:#4c5f45;
  --gold:#b39a5e; --gold-soft:#d8cda5; --sketch:#b39a5e; --swatch-ring:#f6f6ee; --card:#fdfdf8;
  --sheet:#fdfdf8; --sheet-ink:#3e4a3b; --sheet-soft:#6c7866;
  --intro-bg:radial-gradient(120% 80% at 50% 40%, #fdfdf6 0%, #eceee0 55%, #d6dbc6 100%);
  --kicker:#6a6a48; --env-shadow:drop-shadow(0 26px 34px rgba(70,76,50,.4)) drop-shadow(0 5px 8px rgba(70,76,50,.28));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #ffffff 0%, #fff1cc 12%, #f7cf8c 28%, #e9a965 48%, #c98a5e 74%, #9a6a4c 100%);
  --flood:radial-gradient(circle, #ffffff 0%, #fff3d6 34%, rgba(255,226,170,.9) 56%, rgba(240,200,140,0) 72%);
  --reveal:#4c5f45; --flap-dim:.86;
  --hero-bg:#eef0e4; --hero-ink:#33402f; --hero-ink-2:#45523f; --hero-scroll:#33402f;
  --hero-shadow:0 0 1px rgba(253,253,244,.95), 0 0 9px rgba(253,253,244,.95), 0 0 22px rgba(253,253,244,.9);
  --veil:none; --copy-cy:33%;
  --chip-bg:rgba(255,255,255,.9); --chip-line:#d8cda5; --chip-ink:#3e4a3b; --chip-on:#4c5f45; --chip-on-ink:#fdfdf8;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20c50-16 100 12 150 0s100-16 150-2 70 6 100-4v20z'/%3E%3C/svg%3E");
  --fx:232,222,170; --fx-hi:255,250,228;
}
.theme-cristal .hero .copy{left:0}
.theme-cristal .hero .scroll{text-shadow:0 0 2px rgba(253,253,244,.95), 0 0 10px rgba(253,253,244,.95), 0 0 20px rgba(253,253,244,.85)}

.theme-aurore{
  --env-img:url("/assets/themes/aurore/envelope.jpg");
  --page-bg:#faf0ec;
  --bg-a:#faf0ec; --ink-a:#5b3a36; --soft-a:#8d6a64;
  --bg-b:#f3e1db; --ink-b:#5b3a36; --soft-b:#8d6a64;
  --bg-c:#fff8f5; --ink-c:#5b3a36; --soft-c:#8d6a64;
  --ink:#5b3a36; --ink-soft:#8d6a64;
  --accent:#8c3b3e; --on-accent:#fff8f5; --sig:#8c3b3e;
  --gold:#b98d6a; --gold-soft:#e0c4ad; --sketch:#b98d6a; --swatch-ring:#faf0ec; --card:#fff8f5;
  --sheet:#fff8f5; --sheet-ink:#5b3a36; --sheet-soft:#8d6a64;
  --intro-bg:radial-gradient(120% 80% at 50% 40%, #fff7f3 0%, #f3e0d9 55%, #e4c6bd 100%);
  --kicker:#8a5a50; --env-shadow:drop-shadow(0 26px 34px rgba(110,60,54,.4)) drop-shadow(0 5px 8px rgba(110,60,54,.28));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #ffffff 0%, #fff1cc 12%, #f7cf8c 28%, #e9a965 48%, #c98a5e 74%, #9a6a4c 100%);
  --flood:radial-gradient(circle, #ffffff 0%, #fff3d6 34%, rgba(255,226,170,.9) 56%, rgba(240,200,140,0) 72%);
  --reveal:#8c3b3e; --flap-dim:.86;
  --hero-bg:#f4dcd2; --hero-ink:#55262a; --hero-ink-2:#66363a; --hero-scroll:#55262a;
  --hero-shadow:0 0 1px rgba(255,246,240,.95), 0 0 9px rgba(255,246,240,.95), 0 0 22px rgba(255,246,240,.9);
  --veil:none; --copy-cy:29%;
  --chip-bg:rgba(255,255,255,.9); --chip-line:#e0c4ad; --chip-ink:#5b3a36; --chip-on:#8c3b3e; --chip-on-ink:#fff8f5;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20c50-16 100 12 150 0s100-16 150-2 70 6 100-4v20z'/%3E%3C/svg%3E");
  --fx:246,196,180; --fx-hi:255,238,228;
}
.theme-aurore .hero .copy{left:0}
.theme-aurore .hero .scroll{text-shadow:0 0 2px rgba(255,246,240,.95), 0 0 10px rgba(255,246,240,.95), 0 0 20px rgba(255,246,240,.85)}

.theme-perle{
  --env-img:url("/assets/themes/perle/envelope.jpg");
  --page-bg:#fbf8f6;
  --bg-a:#fbf8f6; --ink-a:#4b3f48; --soft-a:#7f7380;
  --bg-b:#f1e9e7; --ink-b:#4b3f48; --soft-b:#7f7380;
  --bg-c:#fffdfc; --ink-c:#4b3f48; --soft-c:#7f7380;
  --ink:#4b3f48; --ink-soft:#7f7380;
  --accent:#6a5470; --on-accent:#fffdfc; --sig:#6a5470;
  --gold:#b59a78; --gold-soft:#ddd0bf; --sketch:#b59a78; --swatch-ring:#fbf8f6; --card:#fffdfc;
  --sheet:#fffdfc; --sheet-ink:#4b3f48; --sheet-soft:#7f7380;
  --intro-bg:radial-gradient(120% 80% at 50% 40%, #fffdfb 0%, #f1e9e6 55%, #ddd2d0 100%);
  --kicker:#7a6a70; --env-shadow:drop-shadow(0 26px 34px rgba(90,74,84,.4)) drop-shadow(0 5px 8px rgba(90,74,84,.28));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #ffffff 0%, #fff1cc 12%, #f7cf8c 28%, #e9a965 48%, #c98a5e 74%, #9a6a4c 100%);
  --flood:radial-gradient(circle, #ffffff 0%, #fff3d6 34%, rgba(255,226,170,.9) 56%, rgba(240,200,140,0) 72%);
  --reveal:#6a5470; --flap-dim:.86;
  --hero-bg:#f5ebe8; --hero-ink:#3f3040; --hero-ink-2:#524252; --hero-scroll:#3f3040;
  --hero-shadow:0 0 1px rgba(255,251,248,.95), 0 0 9px rgba(255,251,248,.95), 0 0 22px rgba(255,251,248,.9);
  --veil:none; --copy-cy:26.5%;
  --chip-bg:rgba(255,255,255,.9); --chip-line:#ddd0bf; --chip-ink:#4b3f48; --chip-on:#6a5470; --chip-on-ink:#fffdfc;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20c50-16 100 12 150 0s100-16 150-2 70 6 100-4v20z'/%3E%3C/svg%3E");
  --fx:240,214,214; --fx-hi:255,246,244;
}
.theme-perle .hero .copy{left:0}
.theme-perle .hero .scroll{text-shadow:0 0 2px rgba(255,251,248,.95), 0 0 10px rgba(255,251,248,.95), 0 0 20px rgba(255,251,248,.85)}

.theme-celeste{
  --env-img:url("/assets/themes/celeste/envelope.jpg");
  --page-bg:#f7f3f9;
  --bg-a:#f7f3f9; --ink-a:#4a3a56; --soft-a:#7b6b88;
  --bg-b:#ece4f1; --ink-b:#4a3a56; --soft-b:#7b6b88;
  --bg-c:#fdfbfe; --ink-c:#4a3a56; --soft-c:#7b6b88;
  --ink:#4a3a56; --ink-soft:#7b6b88;
  --accent:#5d4677; --on-accent:#fdfbfe; --sig:#5d4677;
  --gold:#b49a6e; --gold-soft:#dccdb1; --sketch:#b49a6e; --swatch-ring:#f7f3f9; --card:#fdfbfe;
  --sheet:#fdfbfe; --sheet-ink:#4a3a56; --sheet-soft:#7b6b88;
  --intro-bg:radial-gradient(120% 80% at 50% 40%, #fcfaff 0%, #ece4f3 55%, #d8cbe4 100%);
  --kicker:#6e5a80; --env-shadow:drop-shadow(0 26px 34px rgba(80,60,100,.4)) drop-shadow(0 5px 8px rgba(80,60,100,.28));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #ffffff 0%, #fff1cc 12%, #f7cf8c 28%, #e9a965 48%, #c98a5e 74%, #9a6a4c 100%);
  --flood:radial-gradient(circle, #ffffff 0%, #fff3d6 34%, rgba(255,226,170,.9) 56%, rgba(240,200,140,0) 72%);
  --reveal:#5d4677; --flap-dim:.86;
  --hero-bg:#e3d6ec; --hero-ink:#3a2747; --hero-ink-2:#4b3858; --hero-scroll:#3a2747;
  --hero-shadow:0 0 1px rgba(252,248,255,.95), 0 0 9px rgba(252,248,255,.95), 0 0 22px rgba(252,248,255,.9);
  --veil:none; --copy-cy:31%;
  --chip-bg:rgba(255,255,255,.9); --chip-line:#dccdb1; --chip-ink:#4a3a56; --chip-on:#5d4677; --chip-on-ink:#fdfbfe;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20c50-16 100 12 150 0s100-16 150-2 70 6 100-4v20z'/%3E%3C/svg%3E");
  --fx:222,206,240; --fx-hi:252,246,255;
}
.theme-celeste .hero .copy{left:0}
.theme-celeste .hero .scroll{text-shadow:0 0 2px rgba(252,248,255,.95), 0 0 10px rgba(252,248,255,.95), 0 0 20px rgba(252,248,255,.85)}

.theme-minuit{
  --env-img:url("/assets/themes/minuit/envelope.jpg");
  --page-bg:#0a1229;
  --bg-a:#101a37; --ink-a:#f2e9d6; --soft-a:#c5b998;
  --bg-b:#0b1329; --ink-b:#f2e9d6; --soft-b:#c5b998;
  --bg-c:#f7f0e3; --ink-c:#1c2a4d; --soft-c:#5f6a82;
  --ink:#f2e9d6; --ink-soft:#c5b998;
  --accent:#d4b06a; --on-accent:#0b1329; --sig:#e6c988;
  --gold:#d4b06a; --gold-soft:rgba(212,176,106,.55); --sketch:#d4b06a; --swatch-ring:#101a37; --card:rgba(255,255,255,.05);
  --sheet:#f7f0e3; --sheet-ink:#1c2a4d; --sheet-soft:#5f6a82;
  --intro-bg:radial-gradient(120% 80% at 50% 45%, #1a274a 0%, #0a1022 60%, #04070f 100%);
  --kicker:#dcc48a; --env-shadow:drop-shadow(0 30px 40px rgba(0,0,0,.65)) drop-shadow(0 6px 10px rgba(0,0,0,.5));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #fffaf0 0%, #ffecb8 10%, #e9c26c 24%, #a07e3c 46%, #1d2b52 74%, #070c1c 100%);
  --flood:radial-gradient(circle, #fffdf3 0%, #fff0c4 30%, rgba(238,208,134,.88) 55%, rgba(212,176,106,0) 72%);
  --reveal:#1c2a4d;
  --hero-bg:#0d1838; --hero-ink:#fff8e6; --hero-ink-2:#f3e2b6; --hero-scroll:#fff8e6;
  --hero-shadow:0 1px 2px rgba(4,10,30,.75), 0 0 12px rgba(4,10,30,.95), 0 0 26px rgba(4,10,30,.8);
  --veil:none; --copy-cy:25%;
  --chip-bg:rgba(4,10,30,.82); --chip-line:rgba(212,176,106,.7); --chip-ink:#f2e9d6; --chip-on:#d4b06a; --chip-on-ink:#0b1329;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20c50-16 100 12 150 0s100-16 150-2 70 6 100-4v20z'/%3E%3C/svg%3E");
  --fx:214,204,232; --fx-hi:255,244,214;
}
.theme-minuit .hero .copy{left:0}
.theme-minuit .hero .scroll{text-shadow:0 1px 6px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.6)}
.theme-minuit .tint-c .pill.solid,.theme-minuit .sheet .send,.theme-minuit .sheet .pick label:has(input:checked){background:#1c2a4d;border-color:#1c2a4d;color:#f7f0e3}
.theme-minuit .tint-c{--gold:#a8853f;--gold-soft:rgba(168,133,63,.5);--sig:#1c2a4d;--swatch-ring:#f7f0e3;--card:#fffaf0}
.theme-minuit .sheet{--gold-soft:rgba(168,133,63,.5);--accent:#1c2a4d;--on-accent:#f7f0e3}
.theme-minuit .reply-done{color:var(--ink)}

.theme-emeraude{
  --env-img:url("/assets/themes/emeraude/envelope.jpg");
  --page-bg:#0a2422;
  --bg-a:#0e2f2c; --ink-a:#f3e9d2; --soft-a:#cdbd96;
  --bg-b:#0a2624; --ink-b:#f3e9d2; --soft-b:#cdbd96;
  --bg-c:#f6efe0; --ink-c:#17403a; --soft-c:#5d7469;
  --ink:#f3e9d2; --ink-soft:#cdbd96;
  --accent:#c9a45c; --on-accent:#0a2624; --sig:#e3c47e;
  --gold:#c9a45c; --gold-soft:rgba(201,164,92,.55); --sketch:#c9a45c; --swatch-ring:#0e2f2c; --card:rgba(255,255,255,.05);
  --sheet:#f6efe0; --sheet-ink:#17403a; --sheet-soft:#5d7469;
  --intro-bg:radial-gradient(120% 80% at 50% 45%, #10332e 0%, #071a17 60%, #030c0b 100%);
  --kicker:#dcc48a; --env-shadow:drop-shadow(0 30px 40px rgba(0,0,0,.65)) drop-shadow(0 6px 10px rgba(0,0,0,.5));
  --glow:radial-gradient(circle at var(--cx) var(--cy), #fffaf0 0%, #ffecb8 10%, #e9c26c 24%, #a07e3c 46%, #173f37 74%, #06201c 100%);
  --flood:radial-gradient(circle, #fffdf3 0%, #fff0c4 30%, rgba(238,208,134,.88) 55%, rgba(212,176,106,0) 72%);
  --reveal:#17403a;
  --hero-bg:#0d2e2e; --hero-ink:#fff8e6; --hero-ink-2:#f3e2b6; --hero-scroll:#fff8e6;
  --hero-shadow:0 1px 2px rgba(2,18,18,.75), 0 0 12px rgba(2,18,18,.95), 0 0 26px rgba(2,18,18,.8);
  --veil:none; --copy-cy:27%;
  --chip-bg:rgba(2,18,18,.82); --chip-line:rgba(212,176,106,.7); --chip-ink:#f3e9d2; --chip-on:#c9a45c; --chip-on-ink:#0a2624;
  --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20Q25 20 25 6Q25 20 50 20T75 6Q75 20 100 20T125 6Q125 20 150 20T175 6Q175 20 200 20T225 6Q225 20 250 20T275 6Q275 20 300 20T325 6Q325 20 350 20T375 6Q375 20 400 20V34z'/%3E%3C/svg%3E");
  --fx:226,198,128; --fx-hi:255,244,214;
}
.theme-emeraude .hero .copy{left:0}
.theme-emeraude .hero .scroll{text-shadow:0 1px 6px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.6)}
.theme-emeraude .tint-c .pill.solid,.theme-emeraude .sheet .send,.theme-emeraude .sheet .pick label:has(input:checked){background:#17403a;border-color:#17403a;color:#f6efe0}
.theme-emeraude .tint-c{--gold:#a8853f;--gold-soft:rgba(168,133,63,.5);--sig:#17403a;--swatch-ring:#f6efe0;--card:#fffaf0}
.theme-emeraude .sheet{--gold-soft:rgba(168,133,63,.5);--accent:#17403a;--on-accent:#f6efe0}
.theme-emeraude .reply-done{color:var(--ink)}
.theme-emeraude section.edge:nth-of-type(even)::before{transform:none}
.theme-ivoire .hero .date,.theme-cristal .hero .date,.theme-aurore .hero .date,.theme-perle .hero .date,.theme-celeste .hero .date,.theme-minuit .hero .date,.theme-emeraude .hero .date{font-size:clamp(14px,4vw,18px)}
.theme-ivoire .hero .wd,.theme-cristal .hero .wd,.theme-aurore .hero .wd,.theme-perle .hero .wd,.theme-celeste .hero .wd,.theme-minuit .hero .wd,.theme-emeraude .hero .wd{font-size:clamp(24px,7.2vw,34px)}
/* new collection: scroll hint sits clear of the section edge; light scenes get a pale base so dark lettering stays crisp */
.theme-ivoire .hero .scroll,.theme-cristal .hero .scroll,.theme-aurore .hero .scroll,.theme-perle .hero .scroll,.theme-celeste .hero .scroll,.theme-minuit .hero .scroll,.theme-emeraude .hero .scroll{bottom:5.2%}
.theme-ivoire .hero .veil::after,.theme-cristal .hero .veil::after,.theme-aurore .hero .veil::after,.theme-perle .hero .veil::after,.theme-celeste .hero .veil::after{height:18%;background:linear-gradient(0deg, rgba(255,250,244,.62), rgba(255,250,244,0))}
.theme-aurore .hero .scroll,.theme-perle .hero .scroll{font-weight:600}

/* =====================================================================
   OPENING · velvet (Oct 2026): a full-screen velvet envelope of four flaps in the design's colour.
   Gold light runs through the embossed flowers, the gold seal cracks and breaks,
   the top flap lifts, then the bottom, then the sides open onto the design's own scene.
   ===================================================================== */
.open-velvet #intro{padding:0;gap:0;overflow:hidden;background:#1b1414;transition:opacity .9s ease, visibility .9s}
.vv-light{--vv-ink:#6b5038;--vv-tap:#8a6a46}
.vv-dark{--vv-ink:#ecd9b0;--vv-tap:#e2c27f}
.vv-scene{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.12);transition:transform 3.2s cubic-bezier(.2,.6,.2,1)}
#intro.opening .vv-scene{transform:scale(1)}
.vv{position:absolute;left:50%;top:50%;width:max(100vw,calc(100vh * .5625));aspect-ratio:9/16;transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;perspective:1600px}
.vv:focus-visible{outline:2px solid #c9a25e;outline-offset:-6px}
/* each flap: the outer span moves and casts the shadow, the inner one is cut to shape */
.vv-f{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:visible;
  transition:transform 1.25s cubic-bezier(.55,.05,.25,1),filter 1.25s ease,opacity .5s ease 1s}
.vv-f i{position:absolute;inset:0;display:block;background:var(--vv-side) center/100% 100% no-repeat}
.vv-l{z-index:1;transform-origin:0 50%;filter:drop-shadow(3px 0 6px rgba(30,18,10,.25))}
.vv-l i{clip-path:polygon(0 0,50.6% 0,50.6% 100%,0 100%)}
.vv-r{z-index:1;transform-origin:100% 50%;filter:drop-shadow(-3px 0 6px rgba(30,18,10,.25))}
.vv-r i{clip-path:polygon(49.4% 0,100% 0,100% 100%,49.4% 100%)}
.vv-b{z-index:2;transform-origin:50% 100%;filter:drop-shadow(0 -4px 8px rgba(30,18,10,.32))}
.vv-b i{background-image:var(--vv-top);clip-path:polygon(3% 100%,97% 100%,50% 54%)}
.vv-t{z-index:3;transform-origin:50% 0;filter:drop-shadow(0 6px 9px rgba(30,18,10,.34))}
.vv-t i{background-image:var(--vv-top);clip-path:polygon(10% 0,90% 0,50% 46%)}
.vv .msglow{z-index:6}
.vv-dark .glowing .msglow{opacity:.75}.vv-dark .glowing.glowfade .msglow{opacity:0}.vv-dark .msglow.bloom{filter:blur(8px) brightness(1.2)}
.msglow{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s}
.msglow.bloom{mix-blend-mode:screen;filter:blur(8px) brightness(1.6) saturate(1.3)}
.glowing .msglow{opacity:1}
.glowfade .msglow{opacity:0;transition:opacity .7s}
.vv-seal{position:absolute;left:50%;top:50%;width:30%;transform:translate(-50%,-50%);z-index:8;transition:transform .4s}
.vv-seal img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(40,25,15,.45)) drop-shadow(0 2px 2px rgba(40,25,15,.35))}
.vv-seal::after{content:"";position:absolute;inset:8%;border-radius:50%;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(120deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 60%) no-repeat;background-size:300% 100%;background-position:130% 0;animation:vvsheen 4.6s ease-in-out 1.4s infinite}
@keyframes vvsheen{0%{background-position:160% 0}55%,100%{background-position:-60% 0}}
.vv:hover .vv-seal{transform:translate(-50%,-50%) scale(1.03)}
.vv-kick{position:absolute;left:0;right:0;top:calc(4% + env(safe-area-inset-top,0px));z-index:9;margin:0;text-align:center;font-family:var(--serif);font-style:italic;font-size:19px;letter-spacing:.06em;color:var(--vv-ink);transition:opacity .6s;pointer-events:none}
.vv-kick b{display:block;font-style:normal;font-weight:500;font-size:22px}
.vv-tap{position:absolute;left:0;right:0;bottom:calc(4% + env(safe-area-inset-bottom,0px));z-index:9;color:var(--vv-tap);pointer-events:none}
#intro.opening .vv-kick,#intro.opening .vv-tap{opacity:0;animation:none}
/* the seal warms, cracks and breaks */
.vv.heat .vv-seal::after{animation:none;opacity:0}
.vv.heat .vv-seal img{filter:drop-shadow(0 0 14px rgba(255,236,200,1)) drop-shadow(0 0 32px rgba(246,214,170,.95)) brightness(1.18);transition:filter 2s ease}
.vv.crack .vv-seal{animation:vvpress .45s ease forwards}
@keyframes vvpress{40%{transform:translate(-50%,-50%) scale(.93)}100%{transform:translate(-50%,-50%) scale(1.02)}}
.vv.split .vv-seal{opacity:0;animation:none}
.vv-halves{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:9;pointer-events:none}
.vv-halves .half{position:absolute;inset:0;opacity:0}
.vv-halves .half img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 8px rgba(40,25,15,.45))}
.vv-halves .l{clip-path:polygon(0 0,52% 0,46% 22%,55% 41%,47% 60%,54% 80%,49% 100%,0 100%)}
.vv-halves .r{clip-path:polygon(52% 0,100% 0,100% 100%,49% 100%,54% 80%,47% 60%,55% 41%,46% 22%)}
.vv-halves .crk{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.vv-halves .crk polyline{fill:none;stroke:#fff6de;stroke-width:2.4;stroke-dasharray:130;stroke-dashoffset:130;filter:drop-shadow(0 0 3px #ffd98f)}
.vv.crack .vv-halves .crk{opacity:1}.vv.crack .vv-halves .crk polyline{transition:stroke-dashoffset .4s ease-in;stroke-dashoffset:0}
.vv.split .vv-halves .crk{opacity:0}
.vv.split .vv-halves .half{opacity:1}
.vv.split .vv-halves .l{animation:vvhalfL 1.4s cubic-bezier(.45,.05,.7,1) forwards}
.vv.split .vv-halves .r{animation:vvhalfR 1.4s cubic-bezier(.45,.05,.7,1) forwards}
@keyframes vvhalfL{0%{transform:none}22%{transform:translate(-12%,-5%) rotate(-12deg)}100%{transform:translate(-80%,230%) rotate(-70deg);opacity:0}}
@keyframes vvhalfR{0%{transform:none}22%{transform:translate(12%,-4%) rotate(11deg)}100%{transform:translate(85%,220%) rotate(64deg);opacity:0}}
.vv-halves .bits{position:absolute;left:50%;top:50%;width:0;height:0}
.vv-halves .bits span{position:absolute;border-radius:40% 60% 50% 45%;box-shadow:inset -1px -1px 1px rgba(0,0,0,.3);opacity:0}
.vv.split .vv-halves .bits span{animation:vvbit 1.2s cubic-bezier(.3,.4,.6,1) forwards}
@keyframes vvbit{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
/* top lifts, bottom lowers, then the sides swing open onto the scene */
.vv.o-top .vv-t{transform:rotateX(-172deg);filter:drop-shadow(0 6px 9px rgba(30,18,10,.34)) brightness(.8);opacity:0}
.vv.o-bot .vv-b{transform:rotateX(172deg);filter:drop-shadow(0 -4px 8px rgba(30,18,10,.32)) brightness(.8);opacity:0}
.vv.o-side .vv-l{transform:rotateY(150deg);filter:brightness(.85);opacity:0}
.vv.o-side .vv-r{transform:rotateY(-150deg);filter:brightness(.85);opacity:0}
.open-velvet #intro.lift{opacity:0}
@media (prefers-reduced-motion: reduce){ .vv-seal::after{animation:none} }