/* ═══════════════════════════════════════════════
   Skin: the-premiere — cinema premiere. Black, gold, film grain.
   Same sections + tokens as our-day; only the look changes.
   ═══════════════════════════════════════════════ */
body{background:var(--cream)}
@keyframes pr-sweep{to{transform:rotate(360deg)}}
@keyframes pr-count{0%{opacity:1;transform:scale(1.25)}8%{transform:scale(1)}30%{opacity:1}33.4%,100%{opacity:0}}
@keyframes pr-grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(2%,2%)}}

/* opening — film leader */
#env-screen{background:var(--s-bg,#0b0a09);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
.pr-grain{position:absolute;inset:-10%;opacity:.08;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1px);background-size:3px 3px;animation:pr-grain .5s steps(2) infinite}
.pr-leader{position:relative;width:190px;height:190px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.pr-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--s-accent,var(--gold));box-shadow:inset 0 0 0 14px rgba(232,201,138,.06)}
.pr-ring::before,.pr-ring::after{content:'';position:absolute;background:rgba(232,201,138,.35)}
.pr-ring::before{left:50%;top:-30px;bottom:-30px;width:1px}
.pr-ring::after{top:50%;left:-30px;right:-30px;height:1px}
.pr-sweep{position:absolute;inset:6px;border-radius:50%;background:conic-gradient(rgba(232,201,138,.28) 0deg,transparent 80deg);opacity:0}
.pr-num{position:relative;font-family:var(--font-caps);font-size:86px;color:var(--s-accent,var(--gold-lt));width:80px;height:100px;display:block}
.pr-num i{position:absolute;inset:0;font-style:normal;text-align:center;line-height:100px;opacity:0}
.pr-num i:first-child{opacity:1}
#env-screen.opened .pr-sweep{opacity:1;animation:pr-sweep 1s linear 3}
#env-screen.opened .pr-num i{animation:pr-count 3s linear forwards}
#env-screen.opened .pr-num i:nth-child(1){animation-delay:0s}
#env-screen.opened .pr-num i:nth-child(2){animation-delay:1s}
#env-screen.opened .pr-num i:nth-child(3){animation-delay:2s}
#env-screen.opened .pr-num i:first-child{opacity:0}
.env-copy{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:opacity .4s}
.env-kicker{font-family:var(--font-caps);font-size:calc(11px * var(--xs));letter-spacing:.4em;text-transform:uppercase;color:var(--s-accent,var(--gold))}
.env-guest{font-family:var(--s-text-font,var(--font-body));font-style:italic;font-size:calc(22px * var(--xs));color:var(--s-text,var(--text))}
.pr-play{width:62px;height:62px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-lt);font-size:20px;margin-top:10px;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 — the poster */
.hero-photo{filter:saturate(.8) contrast(1.05)}
.hero-overlay{background:linear-gradient(180deg,rgba(11,10,9,.85) 0%,rgba(11,10,9,0) 24%,rgba(11,10,9,0) 45%,rgba(11,10,9,.92) 80%,var(--cream) 100%)}
.sd-opening{font-size:calc(.7rem * var(--xs));letter-spacing:.42em;color:var(--s-accent,var(--gold))}
.sd-names-en{flex-direction:column;align-items:center;gap:4px}
.sd-name-en{font-family:var(--s-title-font,var(--font-caps));text-transform:uppercase;letter-spacing:.06em;font-size:calc(clamp(2.6rem,13vw,3.8rem) * var(--ts));line-height:1;color:var(--s-text,#f6eedd)}
.sd-names-sep{font-family:var(--font-body);font-style:italic;font-size:calc(1.6rem * var(--ts));color:var(--el-color,var(--s-accent,var(--gold)))}
.sd-date{color:var(--s-accent,var(--gold-lt));letter-spacing:.3em;font-size:calc(.85rem * var(--xs))}

/* sections — credits rules */
.s-verse::before,.s-welcome::before,.s-couple::before{background:linear-gradient(90deg,transparent,rgba(232,201,138,.5),transparent) !important}
.s-welcome::after{content:none}
.fam-bismillah{font-family:var(--font-caps);text-transform:uppercase;letter-spacing:.32em;font-size:calc(.72rem * var(--ts));color:var(--s-accent,var(--gold))}
.fam-invite-text{font-family:var(--s-text-font,var(--font-body));font-style:italic;font-size:calc(1.35rem * var(--xs));color:var(--s-text,var(--text))}
.fam-couple{flex-direction:column;gap:18px}
.fam-couple-role{font-family:var(--font-caps);text-transform:uppercase;letter-spacing:.32em;font-size:calc(.62rem * var(--xs));color:var(--s-muted,var(--text-light))}
.fam-couple-name{font-family:var(--s-title-font,var(--font-caps));text-transform:uppercase;letter-spacing:.05em;font-size:calc(2rem * var(--ts));color:var(--s-text,var(--text))}
.fam-couple-amp{font-family:var(--font-body);font-style:italic;color:var(--el-color,var(--s-accent,var(--gold)))}

/* countdown — marquee board */
.s-countdown{background:var(--s-bg,var(--cream2))}
.s-countdown::before{opacity:0}
.cd-title{font-family:var(--font-caps);font-size:calc(.75rem * var(--ts));letter-spacing:.42em;text-transform:uppercase;color:var(--s-accent,var(--gold))}
.cd-subtitle{font-family:var(--font-body);font-style:italic;letter-spacing:0;font-size:calc(1.05rem * var(--xs));color:var(--s-muted,var(--text-mid))}
.cd-grid{grid-template-columns:repeat(4,1fr);max-width:360px;gap:6px}
.cd-card{border-radius:4px;background:#000;border:1px solid rgba(232,201,138,.35);padding:16px 4px 12px;box-shadow:inset 0 0 18px rgba(232,201,138,.12)}
.cd-card::before{display:none}
.cd-num{font-family:var(--font-caps);font-size:calc(clamp(1.7rem,8vw,2.3rem) * var(--ts));color:var(--s-text,var(--gold-lt));text-shadow:0 0 12px rgba(232,201,138,.45)}

/* schedule — showtimes */
.s-whenwhere{background:var(--s-bg,var(--cream))}
.ww-title,.loc-title,.gal-title,.rsvp-title{font-family:var(--s-title-font,var(--font-caps));text-transform:uppercase;letter-spacing:.04em;font-size:calc(2.2rem * var(--ts))}
.ww-times{flex-direction:column;gap:0;max-width:360px;margin:0 auto 8px;border-top:1px solid rgba(232,201,138,.3)}
.ww-time-block{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding:14px 0;border-bottom:1px solid rgba(232,201,138,.3)}
.ww-time-block .ww-time-label{order:-1;margin:0;font-size:calc(.7rem * var(--xs))}
.ww-time-num{font-family:var(--font-caps);font-size:calc(1.8rem * var(--ts))}
.ww-arrow{display:none}
.ww-card{background:transparent;border:1px solid rgba(232,201,138,.3);border-radius:0;box-shadow:none}
.ww-card::before{display:none}
.ww-card-icon{display:none}
.ww-card-label{font-family:var(--font-caps);text-transform:uppercase;letter-spacing:.32em;font-size:calc(.65rem * var(--ts))}
.venue-art{background:var(--s-bg,var(--cream))}
.s-location{background:var(--s-bg,var(--cream))}
.map-wrap{border-radius:0;border-color:rgba(232,201,138,.35);filter:grayscale(.6) contrast(1.05)}
.btn-maps{border-radius:0;background:var(--gold);color:var(--on-gold);border-color:var(--gold)}

/* gallery — film strip */
.s-gallery{background:var(--s-bg,#000)}
.s-gallery::before{display:none}
.gal-track{gap:0;padding-top:0;padding-bottom:0;background:#000;
  border-top:22px solid #000;border-bottom:22px solid #000;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  background-image:radial-gradient(circle at 50% 11px,#2a2622 0 5px,transparent 6px),radial-gradient(circle at 50% calc(100% - 11px),#2a2622 0 5px,transparent 6px);background-size:26px 100%;background-repeat:repeat-x}
.gal-stage{position:relative}
.gal-item{flex:0 0 min(70vw,320px);padding:0 6px;transform:none;opacity:.55;filter:sepia(.7) brightness(.8)}
.gal-item.is-active{opacity:1;filter:none}
.gal-frame{aspect-ratio:4/3;border-radius:0;padding:0;border:0;background:#111;box-shadow:none}
.gal-frame::after{display:none}
.gal-frame img{border-radius:0}
.gal-caption{margin-top:16px;letter-spacing:.32em}
.gal-btn{border-radius:0}

/* wishes — ticket stub */
.s-rsvp{background:var(--s-bg,var(--cream))}
.s-rsvp::before{display:none}
.rsvp-card,.rsvp-done{background:#efe4cc;color:#1a1612;border:0;border-radius:2px;position:relative;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.rsvp-card::before,.rsvp-card::after{content:'';position:absolute;top:50%;width:24px;height:24px;border-radius:50%;background:var(--cream);transform:translateY(-50%)}
.rsvp-card::before{left:-12px}.rsvp-card::after{right:-12px}
.rsvp-input{background:#fbf5e6;border-color:rgba(26,22,18,.25);border-radius:2px;color:#1a1612}
.rsvp-input::placeholder{color:#7d7058}
.rsvp-send{border-radius:2px;background:var(--s-accent-fill,#1a1612);color:#e8c98a;font-family:var(--font-caps);letter-spacing:.2em;text-transform:uppercase;font-size:.9rem;box-shadow:none}
.rsvp-note{color:#6b5f49;border-top:1px dashed rgba(26,22,18,.35);padding-top:12px}
.rsvp-done-text{color:#1a1612}

.inv-footer{background:var(--s-bg,var(--cream));border-top-color:rgba(232,201,138,.25)}
.fab{background:rgba(0,0,0,.7);border-color:rgba(232,201,138,.5);color:var(--gold-lt)}

#env-screen{padding-bottom:90px;box-sizing:border-box}
.gal-subtitle{font-family:var(--s-text-font,var(--font-body))}
.sd-names-en{gap:0}
.sd-names-sep{line-height:1.2;padding:6px 0}
.ww-time-num{white-space:nowrap}
.ww-time-num span{font-size:.55em}

/* ══ 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. */
.pr-ring{box-shadow:inset 0 0 0 14px color-mix(in srgb,var(--s-accent,#e8c98a) 6%,transparent)}
.pr-ring::before,.pr-ring::after{background:color-mix(in srgb,var(--s-accent,#e8c98a) 35%,transparent)}
.pr-sweep{background:conic-gradient(color-mix(in srgb,var(--s-accent,#e8c98a) 28%,transparent) 0deg,transparent 80deg)}
.pr-play{border-color:var(--s-accent,var(--gold));color:var(--s-accent,var(--gold-lt))}
.hero-overlay{background:linear-gradient(180deg,color-mix(in srgb,var(--s-bg,#0b0a09) 85%,transparent) 0%,color-mix(in srgb,var(--s-bg,#0b0a09) 0%,transparent) 24%,color-mix(in srgb,var(--s-bg,#0b0a09) 0%,transparent) 45%,color-mix(in srgb,var(--s-bg,#0b0a09) 92%,transparent) 80%,var(--s-bg,var(--cream)) 100%)}
.s-verse::before,.s-welcome::before,.s-couple::before{background:linear-gradient(90deg,transparent,var(--s-line-strong,rgba(232,201,138,.5)),transparent) !important}
.cd-card{background:var(--s-card,#000);border-color:color-mix(in srgb,var(--s-accent,#e8c98a) 35%,transparent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--s-accent,#e8c98a) 12%,transparent)}
.cd-num{text-shadow:0 0 12px color-mix(in srgb,var(--s-accent,#e8c98a) 45%,transparent)}
.ww-times{border-top-color:color-mix(in srgb,var(--s-accent,#e8c98a) 30%,transparent)}
.ww-time-block{border-bottom-color:color-mix(in srgb,var(--s-accent,#e8c98a) 30%,transparent)}
.ww-card{border-color:color-mix(in srgb,var(--s-accent,#e8c98a) 30%,transparent)}
.map-wrap{border-color:color-mix(in srgb,var(--s-accent,#e8c98a) 35%,transparent)}
.btn-maps{background:var(--s-accent,var(--gold));color:var(--s-on-accent,var(--on-gold));border-color:var(--s-accent,var(--gold))}
/* the film strip, in the section's own colors */
.s-gallery{--s-strip:color-mix(in srgb,var(--s-bg) 75%,var(--s-text));--s-hole:color-mix(in srgb,var(--s-bg) 50%,var(--s-text))}
.gal-track{background-color:var(--s-strip,#000);border-top-color:var(--s-strip,#000);border-bottom-color:var(--s-strip,#000);
  background-image:radial-gradient(circle at 50% 11px,var(--s-hole,#2a2622) 0 5px,transparent 6px),radial-gradient(circle at 50% calc(100% - 11px),var(--s-hole,#2a2622) 0 5px,transparent 6px)}
.gal-frame{background:var(--s-strip,#111)}
/* the ticket stub stays the page's colors turned over: light card, dark ink */
.rsvp-card,.rsvp-done{background:var(--s-text,#efe4cc);color:var(--s-bg,#1a1612)}
.rsvp-card::before,.rsvp-card::after{background:var(--s-bg,var(--cream))}
.rsvp-input{background:var(--s-text,#fbf5e6);border-color:color-mix(in srgb,var(--s-bg,#1a1612) 25%,transparent);color:var(--s-bg,#1a1612)}
.rsvp-input::placeholder{color:color-mix(in srgb,var(--s-bg,#7d7058) 60%,var(--s-text,#7d7058))}
.rsvp-send{background:var(--s-accent-fill,var(--s-bg,#1a1612));color:var(--s-accent,#e8c98a)}
.rsvp-note{color:color-mix(in srgb,var(--s-bg,#6b5f49) 70%,var(--s-text,#6b5f49));border-top-color:color-mix(in srgb,var(--s-bg,#1a1612) 35%,transparent)}
.rsvp-done-text{color:var(--s-bg,#1a1612)}
.inv-footer{border-top-color:color-mix(in srgb,var(--s-accent,#e8c98a) 25%,transparent)}
.fab{--fab-ink:var(--gold);color:var(--fab-ink);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}