/* ═══════════════════════════════════════════════
   Skin: instant-film — instant camera + polaroids. Warm dark, orange, white prints.
   Same sections + tokens as our-day; only the look changes.
   ═══════════════════════════════════════════════ */
body{background:var(--cream)}
@keyframes if-flash{0%{opacity:0}8%{opacity:1}100%{opacity:0}}
@keyframes if-eject{from{transform:translate(-50%,-30%)}to{transform:translate(-50%,72%)}}
@keyframes if-develop{from{filter:brightness(.15) sepia(1)}to{filter:none}}

/* opening — instant camera */
#env-screen{background:var(--s-bg,var(--cream));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.if-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9}
#env-screen.opened .if-flash{animation:if-flash .9s ease-out}
.env-copy{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.env-kicker{font-family:var(--font-caps);font-size:calc(12px * var(--xs));letter-spacing:.3em;text-transform:uppercase;color:var(--s-accent,var(--gold))}
.env-guest{font-family:var(--s-text-font,var(--font-display));font-size:calc(26px * var(--xs));color:var(--s-text,var(--text))}
.if-camera{position:relative;width:250px;height:240px}
.if-top{position:absolute;top:0;left:18px;right:18px;height:44px;background:#efe7db;border-radius:16px 16px 0 0;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.if-flashbulb{width:56px;height:22px;border-radius:6px;background:linear-gradient(#fff,#d9d2c7);border:2px solid #cfc6b9}
.if-shutter{width:26px;height:26px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(255,107,61,.25)}
.if-body{position:absolute;top:40px;left:0;right:0;height:160px;background:#f6efe6;border-radius:26px;box-shadow:0 30px 50px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2}
.if-lens{width:110px;height:110px;border-radius:50%;background:#2a2421;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 8px #3b332f,0 0 0 6px #e6dccf}
.if-lens-in{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6f7f9a,#151a24 60%)}
.if-stripe{position:absolute;bottom:18px;left:0;right:0;height:8px;background:linear-gradient(90deg,#ff6b3d 0 20%,#ffb13d 20% 40%,#7cc46b 40% 60%,#3db1ff 60% 80%,#9a6bff 80%)}
.if-slot{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:150px;height:6px;background:#1b1613;border-radius:3px;z-index:3}
.if-print{position:absolute;left:50%;bottom:40px;width:136px;padding:8px 8px 26px;background:#fff;box-shadow:0 10px 20px rgba(0,0,0,.4);transform:translate(-50%,-30%);z-index:1;display:flex;flex-direction:column;align-items:center}
.if-print-img{width:120px;height:120px;background:#1b1613}
.if-print span{position:absolute;bottom:4px;font-family:var(--font-display);font-size:18px;color:#1b1613}
#env-screen.opened .if-print{animation:if-eject 1.2s cubic-bezier(.3,.7,.3,1) .25s forwards;z-index:4}
#env-screen.opened .if-print-img{background:url(../photos/hero-poster.webp) center 30%/cover;animation:if-develop 1.4s ease .5s both}
#env-screen.opened .env-copy{opacity:0;transition:opacity .3s}
#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 — big polaroid */
.s-savedate{min-height:auto;flex-direction:column;padding:40px 22px 34px;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:80%;max-width:300px;height:auto;aspect-ratio:1;object-fit:cover;object-position:center 30%;
  border:12px solid #fff;border-bottom-width:64px;box-sizing:content-box;background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.5);transform:rotate(-3deg)}
.sd-top{order:1;margin-bottom:22px}
.sd-opening{font-family:var(--s-text-font,var(--font-display));text-transform:none;letter-spacing:0;font-size:calc(2.2rem * var(--xs));color:var(--s-accent,var(--gold))}
.sd-top-line{display:none}
.sd-names-wrap{order:3;margin-top:-56px;position:relative;z-index:2;transform:rotate(-3deg)}
.sd-name-en{color:#1b1613;text-shadow:none;font-size:calc(clamp(2rem,9vw,2.6rem) * var(--ts))}
.sd-names-sep{color:var(--el-color,var(--gold))}
.sd-bottom{order:4;margin-top:40px}
.sd-divider{background:linear-gradient(90deg,transparent,var(--el-color,var(--gold)),transparent)}
.sd-date{color:var(--s-text,var(--text));font-size:calc(1rem * var(--xs))}
.scroll-hint svg{stroke:var(--gold)}

/* verse / welcome / couple — handwritten note */
.s-verse::before,.s-welcome::before,.s-couple::before{background:linear-gradient(90deg,transparent,rgba(255,107,61,.5),transparent) !important}
.s-welcome::after{content:none}
.fam-bismillah{font-family:var(--font-caps);text-transform:uppercase;letter-spacing:.24em;font-size:calc(.8rem * var(--ts));color:var(--s-accent,var(--gold))}
.fam-invite-text{font-family:var(--s-text-font,var(--font-display));font-size:calc(1.7rem * var(--xs));line-height:1.5;color:var(--s-text,var(--text))}
.fam-couple-name{color:var(--s-text,var(--text))}
.fam-couple-role{font-family:var(--font-caps);text-transform:uppercase;letter-spacing:.24em;font-size:calc(.65rem * var(--xs));color:var(--s-accent,var(--gold))}

/* countdown — mini polaroids */
.s-countdown{background:var(--s-bg,var(--cream2))}
.s-countdown::before{opacity:0}
.cd-title{font-family:var(--s-title-font,var(--font-display));color:var(--s-accent,var(--gold))}
.cd-subtitle{font-family:var(--font-display);font-style:normal;letter-spacing:0;font-size:calc(1.3rem * var(--xs));color:var(--s-muted,var(--text-mid))}
.cd-grid{grid-template-columns:repeat(4,1fr);max-width:360px;gap:10px}
.cd-card{background:#fff;border:0;border-radius:2px;padding:12px 4px 22px;box-shadow:0 10px 20px rgba(0,0,0,.4);backdrop-filter:none}
.cd-card:nth-child(odd){transform:rotate(-3deg)}.cd-card:nth-child(even){transform:rotate(2.5deg)}
.cd-card::before{display:none}
.cd-num{color:var(--s-text,#1b1613);font-weight:500;font-size:calc(clamp(1.7rem,8vw,2.3rem) * var(--ts))}
.cd-lbl{color:var(--gold);font-family:var(--font-display);text-transform:none;letter-spacing:0;font-size:calc(1rem * var(--xs))}

/* schedule — taped note card */
.s-whenwhere{background:var(--s-bg,transparent)}
.ww-title,.loc-title,.gal-title,.rsvp-title{color:var(--s-accent,var(--gold))}
.ww-card{background:#fff;color:#1b1613;border:0;border-radius:2px;transform:rotate(1.5deg);box-shadow:0 14px 30px rgba(0,0,0,.45);position:relative;overflow:visible}
.ww-card::before{content:'';display:block;position:absolute;top:-12px;left:50%;width:90px;height:24px;background:rgba(255,177,61,.6);transform:translateX(-50%) rotate(-4deg)}
.ww-card-icon{display:none}
.ww-card-label{color:var(--gold)}
.ww-card-main{color:#1b1613}
.ww-card-sub{color:#6d625a}
.venue-art{background:transparent}
.venue-art svg{stroke:var(--el-color,var(--gold))}
.s-location{background:var(--s-bg,transparent)}
.map-wrap{border:12px solid #fff;border-bottom-width:44px;border-radius:2px;transform:rotate(-1.5deg);box-shadow:0 16px 34px rgba(0,0,0,.45)}
.btn-maps{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}

/* gallery — pile of polaroids */
.s-gallery{background:var(--s-bg,transparent)}
.s-gallery::before{display:none}
.gal-track{gap:0;padding-top:30px;padding-bottom:40px}
.gal-item{flex:0 0 min(64vw,290px);margin:0 -14px;transform:rotate(-6deg) scale(.86);opacity:.8;filter:none}
.gal-item:nth-child(even){transform:rotate(5deg) scale(.86)}
.gal-item.is-active{transform:rotate(-1.5deg) scale(1);opacity:1;z-index:2}
.gal-frame{aspect-ratio:auto;border-radius:2px;padding:10px 10px 52px;border:0;background:#fff;box-shadow:0 18px 36px rgba(0,0,0,.5)}
.gal-frame::after{display:none}
.gal-frame img{aspect-ratio:1;height:auto;border-radius:0}
.gal-item[data-caption]::after{content:attr(data-caption);position:absolute;left:0;right:0;bottom:14px;text-align:center;font-family:var(--font-display);font-size:22px;color:#1b1613;pointer-events:none}
.gal-item{position:relative}
.gal-caption{display:none}
.gal-count{font-family:var(--font-display);font-size:1.4rem}

/* wishes — back of a polaroid / notebook */
.s-rsvp{background:var(--s-bg,transparent)}
.s-rsvp::before{display:none}
.rsvp-card,.rsvp-done{background:#fff;color:#1b1613;border:0;border-radius:2px;box-shadow:0 20px 40px rgba(0,0,0,.45);transform:rotate(-1deg);
  background-image:repeating-linear-gradient(transparent 0 31px,rgba(61,177,255,.18) 31px 32px)}
.rsvp-input{background:transparent;border:0;border-bottom:1px solid rgba(27,22,19,.25);border-radius:0;color:#1b1613;font-family:var(--font-display);font-size:1.4rem}
.rsvp-input::placeholder{color:#9b8e80}
.rsvp-send{background:var(--s-accent-fill,var(--gold));color:#fff;box-shadow:none;border-radius:999px}
.rsvp-note{color:#6d625a}
.rsvp-done-text{color:#1b1613;font-family:var(--font-display);font-style:normal;font-size:1.6rem}

.inv-footer{background:var(--s-bg,transparent);border-top-color:rgba(255,107,61,.25)}
.fab{background:rgba(27,22,19,.75);border-color:rgba(255,107,61,.5);color:var(--gold-lt)}

/* ══ 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 prints (polaroids,
   the note card, the notebook) are the page's colors turned over: light paper, dark ink. */
.hero-photo{border-color:var(--s-text,#fff);background:var(--s-text,#fff)}
.sd-name-en{color:var(--s-bg,#1b1613)}
.sd-names-sep{color:var(--el-color,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,color-mix(in srgb,var(--s-accent,#ff6b3d) 50%,transparent),transparent) !important}
.cd-card{background:var(--s-text,#fff)}
.cd-num{color:var(--s-bg,#1b1613)}
.cd-lbl{color:var(--s-accent,var(--gold))}
.ww-card{background:var(--s-text,#fff);color:var(--s-bg,#1b1613)}
.ww-card::before{background:color-mix(in srgb,var(--s-accent,#ffb13d) 60%,transparent)}
.ww-card-label{color:var(--s-accent,var(--gold))}
.ww-card-main{color:var(--s-bg,#1b1613)}
.ww-card-sub{color:color-mix(in srgb,var(--s-bg,#6d625a) 70%,var(--s-text,#6d625a))}
.venue-art svg{stroke:var(--el-color,var(--s-accent,var(--gold)))}
.map-wrap{border-color:var(--s-text,#fff)}
.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-text,#fff)}
.gal-item[data-caption]::after{color:var(--s-bg,#1b1613)}
.rsvp-card,.rsvp-done{background-color:var(--s-text,#fff);color:var(--s-bg,#1b1613);
  background-image:repeating-linear-gradient(transparent 0 31px,color-mix(in srgb,var(--s-accent,#3db1ff) 18%,transparent) 31px 32px)}
.rsvp-input{border-bottom-color:color-mix(in srgb,var(--s-bg,#1b1613) 25%,transparent);color:var(--s-bg,#1b1613)}
.rsvp-input::placeholder{color:color-mix(in srgb,var(--s-bg,#9b8e80) 55%,var(--s-text,#9b8e80))}
.rsvp-send{background:var(--s-accent-fill,var(--s-accent,var(--gold)));color:var(--s-on-accent,#fff)}
.rsvp-note{color:color-mix(in srgb,var(--s-bg,#6d625a) 70%,var(--s-text,#6d625a))}
.rsvp-done-text{color:var(--s-bg,#1b1613)}
.inv-footer{border-top-color:color-mix(in srgb,var(--s-accent,#ff6b3d) 25%,transparent)}
.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)}