/* ═══════════════════════════════════════════════
   Skin: our-album — your story as a music album. Dark, peach, vinyl.
   Same sections + tokens as our-day; only the look changes.
   ═══════════════════════════════════════════════ */
body{background:radial-gradient(ellipse at 50% 0%,#3a2119 0%,var(--cream) 55%) fixed,var(--cream)}
@keyframes al-spin{to{transform:rotate(360deg)}}
@keyframes al-out{to{transform:translateX(38%) rotate(200deg)}}

/* opening — record sleeve */
#env-screen{background:var(--s-bg,var(--cream));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
.al-stage{position:relative;width:250px;height:250px}
.al-vinyl{position:absolute;inset:10px;border-radius:50%;background:repeating-radial-gradient(circle,#161111 0 2px,#221b19 2px 3px);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;transform:translateX(18%)}
.al-label{width:38%;height:38%;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 3px rgba(0,0,0,.15)}
.al-label span{font-family:var(--font-caps);font-size:16px;color:var(--on-gold)}
.al-sleeve{position:absolute;inset:0;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.85);transition:transform 1s cubic-bezier(.5,0,.3,1)}
.al-sleeve img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.al-sticker{position:absolute;top:10px;right:10px;background:var(--gold);color:var(--on-gold);font-family:var(--font-caps);font-size:10px;letter-spacing:.2em;padding:5px 8px;border-radius:99px}
html[lang=ar] .al-sticker{font-size:0;letter-spacing:0}
html[lang=ar] .al-sticker::after{content:attr(data-ar);font-family:'Amiri',serif;font-size:12px}
#env-screen.opened .al-vinyl{animation:al-out 1.4s cubic-bezier(.4,0,.2,1) forwards}
#env-screen.opened .al-sleeve{transform:translateX(-30%)}
.env-copy{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:opacity .4s}
.env-kicker{font-family:var(--s-title-font,var(--font-caps));font-size:calc(22px * var(--ts));letter-spacing:.06em;color:var(--s-text,var(--text))}
.env-guest{font-family:var(--s-text-font,var(--font-body));font-size:calc(15px * var(--xs));color:var(--s-muted,var(--text-mid))}
.al-play{width:58px;height:58px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:flex;align-items:center;justify-content:center;font-size:20px;margin-top:12px;padding-left:4px;box-sizing:border-box}
#env-screen.opened .env-copy{opacity:0}
#env-screen .hint-ar{color:var(--s-accent,var(--gold));text-shadow:none}
#env-screen .hint-en{color:var(--s-muted,var(--text-mid))}

/* names — now playing: cover + spinning record */
.s-savedate{min-height:auto;flex-direction:column;padding:34px 22px 30px;background:var(--s-bg,transparent)}
.hero-blur-bg,.hero-overlay{display:none !important}
.savedate-card{display:contents}
.hero-photo{position:relative;inset:auto;order:2;width:78%;max-width:300px;height:auto;aspect-ratio:1;object-fit:cover;object-position:center 30%;border-radius:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.85),18px 0 0 -6px #1c1513,34px 0 0 -10px #161111}
.sd-top{order:1;margin-bottom:18px}
.sd-opening{font-family:var(--font-caps);font-size:calc(.68rem * var(--xs));letter-spacing:.32em;color:var(--s-accent,var(--gold))}
.sd-top-line{display:none}
.sd-names-wrap{order:3;margin-top:22px;align-items:flex-start;max-width:300px;width:78%}
.sd-names-en{justify-content:flex-start;gap:8px;flex-wrap:wrap}
.sd-name-en{font-family:var(--s-title-font,var(--font-caps));text-shadow:none;letter-spacing:.02em;font-size:calc(clamp(1.6rem,7vw,2rem) * var(--ts));color:var(--s-text,var(--text))}
.sd-names-sep{font-family:var(--font-caps);font-size:calc(1.4rem * var(--ts));color:var(--el-color,var(--s-accent,var(--gold)));padding:0}
.sd-bottom{order:4;width:78%;max-width:300px;align-items:stretch;margin-top:10px}
.sd-divider{width:100%;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--el-color,var(--gold)) 0 38%,rgba(246,239,233,.18) 38%)}
.sd-date{text-align:left;color:var(--s-muted,var(--text-mid));font-size:calc(.8rem * var(--xs));letter-spacing:.12em}
.scroll-hint{align-self:center}
.scroll-hint svg{stroke:var(--gold)}

/* verse — liner notes card */
.s-verse{margin:0 14px;border-radius:20px;background:var(--s-bg,var(--gold));padding:26px 22px !important}
.s-verse::before{display:none}
.fam-ayah,.fam-ayah-title,.fam-ayah-ref{color:var(--s-text,var(--on-gold)) !important}
.s-welcome::before,.s-couple::before{background:linear-gradient(90deg,transparent,rgba(240,160,122,.45),transparent) !important}
.s-welcome::after{content:none}
.fam-bismillah{font-family:var(--font-caps);font-size:calc(.85rem * var(--ts));letter-spacing:.12em;color:var(--s-accent,var(--gold))}
.fam-couple{flex-direction:column;gap:10px;max-width:360px;margin:0 auto}
.fam-couple-block{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;border-radius:14px;background:rgba(246,239,233,.06);border:1px solid rgba(246,239,233,.08);gap:12px}
.fam-couple-role{order:2;margin:0;font-family:var(--font-caps);font-size:calc(.6rem * var(--xs));letter-spacing:.2em;text-transform:uppercase;color:var(--s-muted,var(--text-light))}
.fam-couple-name{font-family:var(--s-title-font,var(--font-caps));font-size:calc(1.15rem * var(--ts));color:var(--s-text,var(--text))}
.fam-couple-amp{display:none}

/* countdown — player pills */
.s-countdown{background:var(--s-bg,transparent)}
.s-countdown::before{opacity:0}
.cd-title{font-family:var(--font-caps);font-size:calc(1.4rem * var(--ts));color:var(--s-text,var(--text))}
.cd-subtitle{font-style:normal;letter-spacing:.04em;color:var(--s-muted,var(--text-mid))}
.cd-grid{grid-template-columns:repeat(4,1fr);max-width:360px;gap:8px}
.cd-card{border-radius:16px;background:rgba(246,239,233,.06);border:1px solid rgba(246,239,233,.08);padding:16px 4px 12px}
.cd-card::before{display:none}
.cd-num{font-family:var(--font-caps);font-size:calc(clamp(1.5rem,7vw,2rem) * var(--ts));color:var(--s-text,var(--text))}
.cd-lbl{color:var(--s-accent,var(--gold))}

/* schedule + venue — "live at" card */
.s-whenwhere{margin:0 14px;border-radius:20px;background:var(--s-bg,rgba(246,239,233,.05));border:1px solid rgba(246,239,233,.08);padding:40px 18px 30px}
.s-whenwhere::before{display:none}
.ww-title,.loc-title,.gal-title,.rsvp-title{font-family:var(--s-title-font,var(--font-caps));font-size:calc(1.7rem * var(--ts));letter-spacing:.02em;color:var(--s-text,var(--text))}
.ww-time-num{font-family:var(--font-caps)}
.ww-card{background:transparent;border:0;box-shadow:none}
.ww-card::before{display:none}
.ww-card-icon{display:none}
.venue-art{background:transparent}
.venue-art svg{stroke:var(--el-color,var(--gold))}
.s-location{background:var(--s-bg,transparent)}
.map-wrap{border-radius:20px;border-color:rgba(246,239,233,.1)}
.btn-maps{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600}

/* gallery — album artwork */
.s-gallery{background:var(--s-bg,transparent)}
.s-gallery::before{display:none}
.gal-item{flex:0 0 min(62vw,280px);transform:scale(.84);opacity:.5;filter:none}
.gal-item.is-active{transform:scale(1);opacity:1}
.gal-frame{aspect-ratio:1;border-radius:12px;padding:0;border:0;background:#1c1513;box-shadow:0 30px 50px -20px rgba(0,0,0,.85),14px 0 0 -6px #1c1513,26px 0 0 -9px #161111}
.gal-frame::after{display:none}
.gal-frame img{border-radius:12px}
.gal-caption{font-family:var(--font-caps);letter-spacing:.1em;text-transform:none;font-size:1rem;color:var(--s-text,var(--text))}
.gal-btn{border-radius:50%;background:rgba(246,239,233,.06);border-color:rgba(246,239,233,.12);color:var(--text)}
.gal-count{font-family:var(--font-caps)}

/* wishes — review card */
.s-rsvp{background:var(--s-bg,transparent)}
.s-rsvp::before{display:none}
.rsvp-card,.rsvp-done{background:#f6efe9;color:#120d0c;border:0;border-radius:20px}
.rsvp-input{background:#fff;border-color:rgba(18,13,12,.15);color:#120d0c}
.rsvp-input::placeholder{color:#8a7d76}
.rsvp-send{background:var(--s-accent-fill,#120d0c);color:#f6efe9;box-shadow:none}
.rsvp-note{color:#7a6c65}
.rsvp-done-text{color:#120d0c}

.inv-footer{background:var(--s-bg,transparent);border-top-color:rgba(246,239,233,.1)}
.fab{background:rgba(18,13,12,.75);border-color:rgba(240,160,122,.5);color:var(--gold-lt)}

#env-screen{padding-bottom:110px;box-sizing:border-box}
.fam-invite-text,.gal-subtitle,.cd-subtitle{font-family:var(--s-text-font,var(--font-body));font-style:normal;text-transform:none}
.fam-invite-text{font-size:calc(1.3rem * var(--xs))}
.ww-time-num{white-space:nowrap}

/* ══ 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. The glass cards are the
   section's text color, see-through; the review card is the page's colors turned over. */
.hero-photo,.gal-frame{--al-edge:color-mix(in srgb,var(--s-bg,#1c1513) 85%,var(--s-text,#1c1513));--al-edge-dk:color-mix(in srgb,var(--s-bg,#161111) 92%,var(--s-text,#161111))}
.hero-photo{box-shadow:0 30px 60px -20px rgba(0,0,0,.85),18px 0 0 -6px var(--al-edge),34px 0 0 -10px var(--al-edge-dk)}
.sd-divider{background:linear-gradient(90deg,var(--el-color,var(--s-accent,var(--gold))) 0 38%,color-mix(in srgb,var(--s-text,#f6efe9) 18%,transparent) 38%)}
.scroll-hint svg{stroke:var(--s-accent,var(--gold))}
.s-welcome::before,.s-couple::before{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--s-accent,#f0a07a) 45%,transparent),transparent) !important}
.fam-couple-block,.cd-card{background:color-mix(in srgb,var(--s-text,#f6efe9) 6%,transparent);border-color:color-mix(in srgb,var(--s-text,#f6efe9) 8%,transparent)}
.s-whenwhere{border-color:color-mix(in srgb,var(--s-text,#f6efe9) 8%,transparent)}
.venue-art svg{stroke:var(--el-color,var(--s-accent,var(--gold)))}
.map-wrap{border-color:color-mix(in srgb,var(--s-text,#f6efe9) 10%,transparent)}
.btn-maps{background:var(--s-accent,var(--gold));color:var(--s-on-accent,var(--on-gold));border-color:var(--s-accent,var(--gold))}
.gal-frame{background:var(--s-bg,#1c1513);box-shadow:0 30px 50px -20px rgba(0,0,0,.85),14px 0 0 -6px var(--al-edge),26px 0 0 -9px var(--al-edge-dk)}
.gal-btn{background:color-mix(in srgb,var(--s-text,#f6efe9) 6%,transparent);border-color:color-mix(in srgb,var(--s-text,#f6efe9) 12%,transparent);color:var(--s-text,var(--text))}
.rsvp-card,.rsvp-done{background:var(--s-text,#f6efe9);color:var(--s-bg,#120d0c)}
.rsvp-input{background:var(--s-text,#fff);border-color:color-mix(in srgb,var(--s-bg,#120d0c) 15%,transparent);color:var(--s-bg,#120d0c)}
.rsvp-input::placeholder{color:color-mix(in srgb,var(--s-bg,#8a7d76) 55%,var(--s-text,#8a7d76))}
.rsvp-send{background:var(--s-accent-fill,var(--s-bg,#120d0c));color:var(--s-text,#f6efe9)}
.rsvp-note{color:color-mix(in srgb,var(--s-bg,#7a6c65) 65%,var(--s-text,#7a6c65))}
.rsvp-done-text{color:var(--s-bg,#120d0c)}
.inv-footer{border-top-color:color-mix(in srgb,var(--s-text,#f6efe9) 10%,transparent)}
body{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--cream) 80%,var(--gold)) 0%,var(--cream) 55%) 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)}