/* ═══════════════════════════════════════════════
   Skin: the-envelope — deep green, antique gold, wax seal
   Loaded after style.css. Same sections, hooks and tokens as our-day;
   only the look changes. Every value still falls back to the theme.
   ═══════════════════════════════════════════════ */
body{background:radial-gradient(ellipse at 50% 0%,#174536 0%,var(--cream) 60%) fixed,var(--cream)}

/* opening — envelope + wax seal */
#env-screen{background:var(--s-bg,#123a2e);display:flex;align-items:center;justify-content:center}
.env-flap{position:absolute;pointer-events:none;transition:transform 1.1s cubic-bezier(.6,0,.3,1),opacity .9s ease}
.env-flap-top{inset:0 0 auto 0;height:58%;background:#174536;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:3;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.env-flap-left{inset:0 auto 0 0;width:52%;background:#0f3328;clip-path:polygon(0 0,100% 50%,0 100%);z-index:2}
.env-flap-right{inset:0 0 0 auto;width:52%;background:#0f3328;clip-path:polygon(100% 0,0 50%,100% 100%);z-index:2}
.env-flap-bottom{inset:auto 0 0 0;height:52%;background:#123a2e;clip-path:polygon(0 100%,50% 0,100% 100%);z-index:2}
.env-seal{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);z-index:4;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c9433a 0%,#9c1f1c 55%,#6e1210 100%);box-shadow:0 10px 26px rgba(0,0,0,.5),inset 0 -6px 14px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;transition:transform .9s cubic-bezier(.5,0,.3,1),opacity .7s ease;animation:env-pulse 2.6s ease-in-out infinite}
.env-seal::before{content:'';position:absolute;inset:10px;border-radius:50%;border:1.5px solid rgba(243,220,159,.65)}
.env-seal span{font-family:var(--font-display);font-size:40px;color:#f3dc9f;text-shadow:0 1px 2px rgba(0,0,0,.4)}
@keyframes env-pulse{0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 0 rgba(217,184,113,.35)}50%{box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 14px rgba(217,184,113,0)}}
.env-copy{position:absolute;left:0;right:0;bottom:22%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.env-kicker{font-family:var(--s-title-font,var(--font-display));font-size:calc(34px * var(--ts));color:var(--s-accent,#f3dc9f)}
.env-guest{font-family:var(--s-text-font,var(--font-body));font-size:calc(16px * var(--xs));color:var(--s-text,#f0e6cd)}
#env-screen .hint-ar{color:var(--s-accent,#d9b871);text-shadow:none}
#env-screen .hint-en{color:var(--s-muted,rgba(217,184,113,.7))}
#env-screen.opened .env-seal{transform:translate(-50%,-50%) scale(1.25) rotate(-12deg);opacity:0;animation:none}
#env-screen.opened .env-flap-top{transform:rotateX(180deg) translateY(-20%);opacity:0}
#env-screen.opened .env-flap-left{transform:translateX(-100%)}
#env-screen.opened .env-flap-right{transform:translateX(100%)}
#env-screen.opened .env-flap-bottom{transform:translateY(100%)}
#env-screen.opened .env-copy{opacity:0;transition:opacity .4s ease}

/* names — arch photo, gold script */
.s-savedate{min-height:auto;flex-direction:column;padding:36px 22px 30px;background:var(--s-bg,transparent)}
.hero-blur-bg,.hero-overlay{display:none !important}
.hero-photo{position:relative;inset:auto;order:2;width:78%;max-width:300px;height:auto;aspect-ratio:3/4.2;object-fit:cover;object-position:center 30%;
  border-radius:999px 999px 8px 8px;padding:8px;border:1px solid var(--s-accent,rgba(217,184,113,.55));box-sizing:border-box;background:transparent;z-index:1}
.savedate-card{display:contents}
.sd-top{order:1;margin-bottom:20px}
.sd-opening{text-transform:none;letter-spacing:0;font-family:var(--s-text-font,var(--font-numbers));font-size:calc(19px * var(--xs));color:var(--s-accent,var(--gold))}
.sd-top-line{display:none}
.sd-names-wrap{order:3;margin-top:18px}
.sd-names-en{flex-direction:column;align-items:center;gap:0}
.sd-name-en{font-size:calc(clamp(3.2rem,15vw,4.4rem) * var(--ts));line-height:1.1;text-shadow:none;
  background:linear-gradient(100deg,var(--gold-dk) 0%,var(--gold-lt) 40%,var(--gold) 60%,var(--gold-lt) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-names-sep{color:var(--el-color,var(--s-accent,var(--gold)));padding:0}
.sd-bottom{order:4;margin-top:14px}
.sd-divider{background:linear-gradient(90deg,transparent,var(--el-color,var(--gold)),transparent)}
.sd-date{color:var(--s-text,var(--text));font-size:calc(clamp(.9rem,4.4vw,1.4rem) * var(--xs))}
.scroll-hint svg{stroke:var(--gold)}

/* verse · welcome · couple */
.s-verse::before,.s-welcome::before,.s-couple::before{background:linear-gradient(90deg,transparent,var(--gold),transparent) !important}
.s-welcome::after{content:none}
.fam-couple-name{background:linear-gradient(100deg,var(--gold-dk),var(--gold-lt),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}

/* countdown — gold rule cells */
.s-countdown{background:var(--s-bg,transparent)}
.s-countdown::before{opacity:.25}
.cd-grid{grid-template-columns:repeat(4,1fr);max-width:360px;gap:8px}
.cd-card{background:transparent;border:0;border-top:1px solid var(--s-accent,rgba(217,184,113,.5));border-radius:0;padding:12px 0 0;backdrop-filter:none}
.cd-card::before{display:none}
.cd-num{font-weight:700;font-size:calc(clamp(1.8rem,8vw,2.4rem) * var(--ts));color:var(--s-text,var(--gold-lt))}
.cd-lbl{letter-spacing:1px;text-transform:none;font-family:var(--font-body);font-size:calc(.8rem * var(--xs))}

/* schedule + venue — bordered cards */
.s-whenwhere{margin:0 18px;border:1px solid rgba(217,184,113,.35);border-radius:16px;padding:44px 20px 36px;background:var(--s-bg,rgba(0,0,0,.12))}
.s-whenwhere::before{display:none}
.ww-card{background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:20px 10px 6px}
.ww-card::before{display:none}
.ww-card-icon{display:none}
.venue-art{background:transparent}
.s-location{background:var(--s-bg,transparent)}
.map-wrap{border-color:rgba(217,184,113,.35)}
.btn-maps{background:var(--s-accent,var(--gold));color:var(--on-gold);border-color:transparent;border-radius:999px;font-weight:600}
.btn-maps:hover{background:var(--gold-lt)}

/* gallery — arches already match; gold frames */
.s-gallery{background:var(--s-bg,transparent)}
.s-gallery::before{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.gal-frame{background:transparent}
.gal-frame img{background:#0f2a22}

/* wishes — cream card, dark ink (like the RSVP card) */
.s-rsvp{background:var(--s-bg,transparent)}
.s-rsvp::before{display:none}
.rsvp-card,.rsvp-done{background:#f4ecd8;border:0;color:#0b211b;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.rsvp-input{background:#fffaf0;border-color:rgba(11,33,27,.25);color:#0b211b}
.rsvp-input::placeholder{color:#7a6f55}
.rsvp-send{background:var(--s-accent-fill,#0b211b);color:#f3dc9f;box-shadow:none}
.rsvp-note{color:#7a6331}
.rsvp-done-text{color:#0b211b}

/* footer */
.inv-footer{background:var(--s-bg,transparent);border-top-color:rgba(217,184,113,.25)}

/* floating buttons in seal colors */
.fab{background:rgba(11,33,27,.75);border-color:rgba(217,184,113,.5);color:#f3dc9f}

/* ══ ONE PALETTE (TEMPLATE_SPEC.md §4 color rule) ══
   The look above, read through the section's colors (style.css: --s-line, --s-on-accent...);
   until the couple picks colors every value falls back to the original. */
#env-screen{--s-flap:color-mix(in srgb,var(--s-bg) 88%,var(--s-text));--s-flap-dk:color-mix(in srgb,var(--s-bg) 94%,black)}
.env-flap-top{background:var(--s-flap,#174536)}
.env-flap-left,.env-flap-right{background:var(--s-flap-dk,#0f3328)}
.env-flap-bottom{background:var(--s-bg,#123a2e)}
.sd-name-en{background-image:linear-gradient(100deg,var(--s-accent,var(--gold-dk)) 0%,var(--s-accent,var(--gold-lt)) 40%,var(--s-accent,var(--gold)) 60%,var(--s-accent,var(--gold-lt)) 100%)}
.fam-couple-name{background-image:linear-gradient(100deg,var(--s-accent,var(--gold-dk)),var(--s-accent,var(--gold-lt)),var(--s-accent,var(--gold)))}
.sd-divider{background:linear-gradient(90deg,transparent,var(--el-color,var(--s-accent,var(--gold))),transparent)}
.scroll-hint svg{stroke:var(--s-accent,var(--gold))}
.s-verse::before,.s-welcome::before,.s-couple::before{background:linear-gradient(90deg,transparent,var(--s-accent,var(--gold)),transparent) !important}
.s-gallery::before{background:linear-gradient(90deg,transparent,var(--s-accent,var(--gold)),transparent)}
.s-whenwhere,.map-wrap{border-color:var(--s-line,rgba(217,184,113,.35))}
.btn-maps{color:var(--s-on-accent,var(--on-gold))}
.btn-maps:hover{background:var(--s-accent,var(--gold-lt))}
.gal-frame img{background:var(--s-bg,#0f2a22)}
/* the wishes card stays the page's colors turned over: light card, dark ink */
.rsvp-card,.rsvp-done{background:var(--s-text,#f4ecd8);color:var(--s-bg,#0b211b)}
.rsvp-input{background:var(--s-text,#fffaf0);border-color:color-mix(in srgb,var(--s-bg,#0b211b) 25%,transparent);color:var(--s-bg,#0b211b)}
.rsvp-input::placeholder{color:color-mix(in srgb,var(--s-bg,#0b211b) 60%,var(--s-text,#f4ecd8))}
.rsvp-send{background:var(--s-accent-fill,var(--s-bg,#0b211b));color:var(--s-accent,#f3dc9f)}
.rsvp-note{color:color-mix(in srgb,var(--s-bg,#7a6331) 70%,var(--s-text,#7a6331))}
.rsvp-done-text{color:var(--s-bg,#0b211b)}
.inv-footer{border-top-color:var(--s-line,rgba(217,184,113,.25))}
body{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--cream) 85%,var(--text)) 0%,var(--cream) 60%) fixed,var(--cream)}
.fab{--fab-ink:var(--gold);color:var(--fab-ink);background:color-mix(in srgb,var(--cream) 75%,transparent);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}