/* ══════════════════════════════════════════════════════════
   Peonie & Alhamza · Uluwatu — image-first watercolor invitation
   The look lives in assets/*.jpg|png (see assets/PROMPTS.md).
   Code = full-bleed image display, zoom-open, type, motion.
   ══════════════════════════════════════════════════════════ */

:root{
  --cream:#F3EEE2;  --ivory:#FAF6EC;  --parch:#EBE3D4;
  --sage:#9BA88C;   --sage-dp:#6E7A5E;  --sage-dk:#4E5A3D;
  --gold:#B79A63;   --gold-dp:#9A7E4B;
  --ink:#41473A;    --taupe:#8A8672;
  --line:rgba(65,71,58,.15);  --line-gold:rgba(183,154,99,.5);

  --serif:'Cormorant Garamond', Georgia, serif;
  --script:'Pinyon Script', cursive;
  --sans:'Jost', system-ui, sans-serif;

  --maxw:500px;
  --silk:cubic-bezier(.19,1,.22,1);
  --unfold:cubic-bezier(.55,.06,.22,1);   /* weighty ease-in-out for the envelope open: gentle start → soft landing */
  --pad:clamp(26px,7vw,46px);

  --wash:
    radial-gradient(80% 55% at 24% 12%, rgba(155,168,140,.42), transparent 55%),
    radial-gradient(72% 52% at 86% 20%, rgba(188,205,214,.42), transparent 55%),
    radial-gradient(90% 60% at 50% 110%, rgba(155,168,140,.5), transparent 60%),
    linear-gradient(180deg, var(--ivory), var(--parch));

  --wm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Cg fill='rgba(110,122,94,.05)' font-family='Georgia, serif' font-style='italic' font-size='16'%3E%3Ctext x='6' y='30' transform='rotate(-18 6 30)'%3EPeonie %26 Alhamza%3C/text%3E%3Ctext x='158' y='92' transform='rotate(-18 158 92)'%3EUluwatu%3C/text%3E%3Ctext x='-34' y='140' transform='rotate(-18 -34 140)'%3EPeonie %26 Alhamza%3C/text%3E%3C/g%3E%3C/svg%3E");
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--serif);color:var(--ink);background:#2c3326;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.gated{overflow:hidden;height:100svh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em,i{font-style:italic}
sup{font-size:.52em;vertical-align:super}
button{font-family:inherit}
/* ambient surround (only visible wider than the column) — the card floats on a soft, dreamy backdrop */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:#20261a}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(140% 105% at 50% 32%,rgba(40,48,32,0) 0%,rgba(22,27,16,.34) 62%,rgba(12,15,9,.72) 100%)}
@media (min-width:520px){
  body::before{inset:-5%;background:#28301f url("assets/cover.jpg?v=3") center/cover no-repeat;
    filter:blur(38px) brightness(.66) saturate(1.32);transform:scale(1.12)}
}
.frame{max-width:var(--maxw);margin-inline:auto;background:var(--cream);position:relative;overflow:hidden;box-shadow:0 40px 120px -34px rgba(0,0,0,.7)}

/* clean loader */
.preloader{position:fixed;inset:0;z-index:200;background:var(--cream);display:grid;place-items:center;
  transition:opacity .7s var(--silk),visibility .7s}
.preloader.done{opacity:0;visibility:hidden}
.preloader__mark{font-family:var(--script);font-size:2.7rem;color:var(--sage-dp);animation:plpulse 1.7s ease-in-out infinite}
.preloader__mark i{font-style:italic;color:var(--gold)}
@keyframes plpulse{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:.9;transform:scale(1.02)}}

/* image slot: transparent until it resolves — real image on load, soft wash only on a genuine miss (no placeholder flash) */
[data-bg]{background-size:cover;background-position:center}
[data-bg].is-fallback{background-image:var(--wash)}
[data-bg].has-bg{background-color:var(--ivory)}

/* ══════════════ TYPE ══════════════ */
.kicker{font-family:var(--sans);font-size:.62rem;font-weight:400;letter-spacing:.42em;text-transform:uppercase;color:var(--taupe)}
.script{font-family:var(--script);color:var(--sage-dp);font-size:clamp(2.1rem,9vw,2.8rem);line-height:1.1}
.script--sm{font-size:clamp(1.7rem,7vw,2.1rem)}
.h-serif{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,11vw,3.2rem);line-height:1.04;color:var(--ink)}
.h-serif em{font-style:italic;color:var(--sage-dp)}
.sect-head{text-align:center;margin-bottom:2.4rem}
.sect-head .kicker{display:block;margin-bottom:.9rem}
.section{padding:clamp(72px,16vw,104px) var(--pad);position:relative;overflow:hidden;background-image:var(--wm);background-size:300px 150px}
.section>*{position:relative;z-index:2}

.rule{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:0 auto}
.rule span{height:1px;width:min(54px,15vw);background:linear-gradient(90deg,transparent,var(--line-gold))}
.rule span:last-child{background:linear-gradient(90deg,var(--line-gold),transparent)}
.rule i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold);flex:none}
.rule--light span{background:linear-gradient(90deg,transparent,rgba(232,236,224,.5))}
.rule--light span:last-child{background:linear-gradient(90deg,rgba(232,236,224,.5),transparent)}
.rule--light i{background:var(--cream)}

/* decorations (watercolor greenery) */
.deco{position:absolute;z-index:1;pointer-events:none;opacity:.92;filter:drop-shadow(0 6px 10px rgba(60,70,45,.12))}
.deco--tr{top:-14px;right:-26px;width:34vw;max-width:150px;transform:rotate(28deg)}
.deco--bl{bottom:-18px;left:-30px;width:34vw;max-width:150px;transform:scaleX(-1) rotate(20deg)}
.deco--card-tl{top:-22px;left:-24px;width:96px;transform:rotate(-18deg);z-index:3}
.deco--card-tr{top:-22px;right:-24px;width:96px;transform:scaleX(-1) rotate(-18deg);z-index:3}
.deco--corner{bottom:-14px;left:-26px;width:52vw;max-width:220px;opacity:.95;z-index:1}
.deco--bouquet{width:46vw;max-width:196px;opacity:.97;z-index:3;filter:drop-shadow(0 8px 14px rgba(60,70,45,.16))}
.deco--bouquet-tr{top:-38px;right:-42px;transform:rotate(6deg)}
.deco--bouquet-bl{bottom:-40px;left:-44px;transform:scaleX(-1) rotate(4deg)}

/* scenic divider band */
.divider{position:relative;height:clamp(230px,54vw,330px);z-index:0}
.divider:not(.has-bg){background:var(--wash)}
.divider::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--cream),transparent 24%,transparent 76%,var(--parch))}

/* buttons */
.btn{--bg:var(--sage-dp);--fg:var(--ivory);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.62rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  padding:1.05em 2em;border:0;cursor:pointer;background:var(--bg);color:var(--fg);border-radius:2px;transition:letter-spacing .6s var(--silk),background .5s,color .5s}
.btn span{transform:translateX(.15em)}
.btn:hover{letter-spacing:.4em}
.btn--solid:hover{background:var(--sage-dk)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border:1px solid var(--line-gold)}
.btn--ghost:hover{--fg:var(--ivory);background:var(--sage-dp);border-color:var(--sage-dp)}
.btn--full{width:100%}

/* ══════════════ GATE (cover image + seal, zoom-open) ══════════════ */
.gate{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);
  z-index:120;cursor:pointer;outline:none;overflow:hidden;container-type:size;
  transition:opacity 1.1s var(--silk),visibility 1.1s}
.gate:focus-visible{box-shadow:inset 0 0 0 2px var(--line-gold)}
.gate.is-gone{opacity:0;visibility:hidden}
.gate__scene{position:absolute;inset:0;z-index:0;transition:transform 1.8s var(--silk),filter 1.4s var(--silk);transform:scale(1.02)}
.gate__veil{position:absolute;inset:0;z-index:1;transition:opacity 1.2s var(--silk);
  background:
    radial-gradient(66% 48% at 50% 46%, rgba(247,242,232,.5), transparent 72%),
    linear-gradient(180deg, rgba(60,70,50,.28), rgba(60,70,50,.12) 40%, rgba(60,70,50,.4))}
.gate__hint{position:absolute;left:0;right:0;bottom:9%;z-index:4;display:flex;flex-direction:column;gap:.55rem;text-align:center}
.gate__open{font-family:var(--sans);font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;color:var(--sage-dk);text-shadow:0 1px 10px rgba(255,255,255,.5);animation:breathe 2.8s ease-in-out infinite}
.gate__sound{font-family:var(--sans);font-size:.54rem;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
/* seal — anchored to the flap point INSIDE the stage, so it scales & aligns with the envelope at any aspect */
.seal-anchor{position:absolute;left:50%;top:49%;width:37%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:3}
.seal{position:absolute;inset:0;filter:drop-shadow(0 8px 14px rgba(45,52,30,.4));transition:transform 1s var(--silk),opacity .9s ease}
.seal__img{width:100%;height:100%;object-fit:contain;display:none}
.seal.has-img .seal__fallback{display:none}
.seal.has-img .seal__img{display:block}
.seal__fallback,.seal__fallback svg{position:absolute;inset:0;width:100%;height:100%}
.seal__fallback svg{overflow:visible}
.seal__mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--script);font-size:clamp(1.7rem,8vw,2.3rem);color:#fbf6e6;line-height:1;padding-bottom:.06em;
  text-shadow:0 1.5px 0 rgba(70,55,15,.5),0 -1px 0 rgba(255,255,255,.15)}
.seal__mono i{padding:0 .02em}
.gate:hover .seal{transform:scale(1.03)}
/* soft light bloom that bursts from the seal as it breaks */
.gate__bloom{position:absolute;left:50%;top:50%;width:46vmax;height:46vmax;z-index:2;pointer-events:none;
  transform:translate(-50%,-50%) scale(0);opacity:0;border-radius:50%;
  background:radial-gradient(circle, rgba(255,251,238,.95) 0%, rgba(255,248,230,.45) 32%, transparent 66%)}

/* OPEN — unseal (press → break → lift), light bloom, scene push-in */
.gate.is-open .gate__scene{transform:scale(1.44);filter:brightness(1.12) saturate(1.06)}
.gate.is-open .gate__veil{opacity:0}
.gate.is-open .seal{animation:unseal 1.5s var(--unfold) forwards}
.gate.is-open .gate__bloom{animation:bloom 1.9s var(--unfold) forwards}
.gate.is-open .gate__hint{opacity:0;transition:opacity .5s}
@keyframes unseal{0%{transform:scale(1)}14%{transform:scale(.9)}100%{transform:scale(1.55) translateY(-9%);opacity:0}}
@keyframes bloom{0%{transform:translate(-50%,-50%) scale(.1);opacity:0}22%{opacity:.9}100%{transform:translate(-50%,-50%) scale(2.7);opacity:0}}

/* ══════════════ ENVELOPE MODE (?envelope) — paper flaps unfold ══════════════ */
/* the STAGE: aspect-locked to the envelope image, sized to cover the gate column, centred (+overscan hides the deckle) */
.env{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.02);
  width:max(100cqw, 100cqh * 0.7123);height:max(100cqh, 100cqw * 1.4039);
  z-index:1;perspective:1600px}
.gate--envelope{background:var(--cream)}              /* cream backdrop — never a blue edge at any aspect */
.gate--envelope .gate__scene{opacity:0;transition:opacity .9s var(--silk)}  /* scene hidden until the flap lifts */
.gate--envelope .gate__veil{display:none}
/* zoom mode (?zoom): the stage carries only the seal over the scene */
.gate:not(.gate--envelope) .env__body,.gate:not(.gate--envelope) .env__flap{display:none}
/* single top flap (sliced from the painted envelope) lifts to reveal the scene */
.env__body{position:absolute;inset:0;background:url("assets/env-body.png?v=13") center/cover;z-index:1}
.env__flap{position:absolute;inset:0;background:url("assets/env-flap.png?v=13") top center/100% auto no-repeat;z-index:2;
  transform-origin:50% 0;backface-visibility:hidden;transition:transform 2.3s var(--unfold) .3s}
/* OPEN: the top flap lifts back, the holder (body) slides down, the scene eases in between */
.gate--envelope.is-open .env__flap{transform:rotateX(172deg)}   /* +ve = free edge lifts toward the viewer (opens outward) */
.gate--envelope.is-open .env__body{transform:translateY(112%);opacity:0;
  transition:transform 2.3s var(--unfold) .55s,opacity .7s var(--unfold) 2.1s}
/* scene gently pushes in — transform/filter given explicit transitions (previously replaced by the shorthand → snapped) */
.gate--envelope.is-open .gate__scene{opacity:1;transform:scale(1.1);filter:brightness(1.04) saturate(1.02);
  transition:opacity 1s var(--unfold) .4s,transform 2.7s var(--unfold) .4s,filter 2.7s var(--unfold) .4s}

/* mute */
.mute{position:fixed;z-index:90;bottom:18px;right:max(18px,calc(50vw - var(--maxw)/2 + 18px));width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-gold);cursor:pointer;background:rgba(78,90,61,.92);color:var(--ivory);display:grid;place-items:center;backdrop-filter:blur(6px);
  opacity:0;transform:scale(.7);transition:opacity .7s var(--silk),transform .7s var(--silk)}
.mute[hidden]{display:none}
.mute.is-ready{opacity:1;transform:none}
.mute svg{width:20px;height:20px;fill:currentColor}
.mute__off{display:none}.mute.is-muted .mute__on{display:none}.mute.is-muted .mute__off{display:block}

/* petals + progress */
.petals{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-8%;border-radius:80% 0 80% 0;opacity:.8;will-change:transform;animation:fall linear forwards}
@keyframes fall{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(var(--dx,20px),108vh,0) rotate(460deg)}}
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:70;background:linear-gradient(90deg,var(--sage-dp),var(--sage),var(--gold));transition:width .1s linear;opacity:.9}

/* ══════════════ COVER (hero, full-bleed image) ══════════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;padding:var(--pad);color:var(--ink)}
.hero__scene{position:absolute;inset:0;z-index:0;animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{0%{transform:scale(1.02)}100%{transform:scale(1.1)}}
.hero__veil{position:absolute;inset:0;z-index:1;background:
  radial-gradient(92% 62% at 50% 52%, rgba(250,246,236,.42), transparent 72%),
  linear-gradient(180deg, rgba(250,246,236,.3), rgba(250,246,236,.08) 32%, rgba(70,80,55,.18))}
.deco--hero-l{position:absolute;top:-16px;left:-40px;width:40vw;max-width:180px;transform:rotate(18deg);z-index:1;opacity:.9}
.deco--hero-r{position:absolute;top:6%;right:-46px;width:38vw;max-width:170px;transform:scaleX(-1) rotate(150deg);z-index:1;opacity:.9}
.hero__content{position:relative;z-index:2;max-width:24rem}
.hero__eyebrow{font-family:var(--sans);font-size:.64rem;letter-spacing:.44em;text-transform:uppercase;color:var(--sage-dk);margin-bottom:1.2rem;text-shadow:0 1px 10px rgba(255,255,255,.4)}
.hero__monowrap{position:relative;margin-bottom:.6rem;min-height:2.4rem;display:grid;place-items:center}
.hero__mono{font-family:var(--script);font-size:clamp(2rem,9vw,2.6rem);line-height:1;background:linear-gradient(160deg,#c8c39a,#9aa27e 40%,#e7e3c9 55%,#7e8a6c 78%,#b3a06a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(80,90,55,.3))}
.hero__mono-img{display:none;max-height:5.5rem;width:auto}
.hero__monowrap.has-mono .hero__mono{display:none}
.hero__monowrap.has-mono .hero__mono-img{display:block}
.hero__names{font-family:var(--serif);font-weight:400;line-height:.98;display:flex;flex-direction:column;align-items:center;color:var(--ink);text-shadow:0 2px 18px rgba(255,255,255,.35)}
.hero__names>span{font-size:clamp(3.1rem,18vw,4.8rem);letter-spacing:.01em}
.hero__amp{font-family:var(--script);font-size:clamp(2rem,9vw,2.6rem);color:var(--sage-dp);margin:-.06em 0;font-weight:400}
.hero__rule{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:1.5rem 0 1.2rem}
.hero__rule span{height:1px;width:44px;background:linear-gradient(90deg,transparent,var(--line-gold))}
.hero__rule span:last-child{background:linear-gradient(90deg,var(--line-gold),transparent)}
.hero__rule i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold)}
.hero__place{font-family:var(--sans);font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--sage-dk)}
.hero__date{font-family:var(--serif);font-style:italic;font-size:1.4rem;margin-top:.5rem;color:var(--sage-dp)}
.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.hero__scroll span{font-family:var(--sans);font-size:.54rem;letter-spacing:.32em;text-transform:uppercase;color:var(--sage-dk)}
.hero__scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--sage-dp),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:-45%;left:0;width:1px;height:45%;background:var(--gold);animation:trail 2.3s var(--silk) infinite}
@keyframes trail{0%{top:-45%}100%{top:100%}}
.gtx{opacity:0;transform:translateY(20px);filter:blur(5px);transition:opacity 1.4s var(--silk),transform 1.4s var(--silk),filter 1.4s var(--silk)}
.frame.is-revealed .gtx{opacity:1;transform:none;filter:none}

/* ══════════════ COUNTDOWN ══════════════ */
.count{background:var(--ivory);text-align:center}
.count .script--sm{margin-bottom:1.6rem}
.count__grid{display:flex;justify-content:center;max-width:26rem;margin:0 auto 2rem}
.count__cell{flex:1;position:relative;padding:0 .3rem}
.count__cell+.count__cell::before{content:"";position:absolute;left:0;top:10%;height:52%;width:1px;background:var(--line)}
.count__cell b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,11vw,3rem);color:var(--sage-dp);line-height:1;font-variant-numeric:tabular-nums}
.count__cell span{font-family:var(--sans);font-size:.5rem;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);margin-top:.8rem;display:block}
.count__cell b.tick{animation:softtick .6s var(--silk)}
@keyframes softtick{0%{opacity:.3}100%{opacity:1}}

/* invitation */
.intro{background:var(--cream);text-align:center}
.intro .script{margin:1.3rem 0}
.intro__lede{max-width:25rem;margin:0 auto 1.3rem;font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,5.6vw,1.65rem);line-height:1.55;color:var(--ink)}

/* plate cards */
.plate{background:var(--ivory) url("assets/paper.jpg") center/cover;position:relative;overflow:hidden;border-radius:3px;box-shadow:0 30px 60px -42px rgba(65,71,58,.6);outline:1px solid var(--line-gold);outline-offset:-9px}
.plate--pad{padding:2.4rem 1.9rem}
.plate--center{text-align:center}
.venue{background:var(--parch)}
.plate__art{height:200px;position:relative;overflow:hidden;display:grid;place-items:center}
.plate__art.is-fallback{background:radial-gradient(90% 80% at 50% 16%, rgba(206,216,196,.5), transparent 60%),linear-gradient(160deg,#aeb79a,#8b9a76 55%,#6e7a5e)}
.plate__mono{display:none;position:relative;z-index:1;font-family:var(--script);font-size:3rem;color:var(--ivory);text-shadow:0 2px 14px rgba(50,58,40,.4)}
.plate__art.is-fallback .plate__mono{display:block}
.plate__cap{padding:1.9rem 1.6rem 2.1rem;text-align:center;position:relative}
.plate__badge{display:inline-block;font-family:var(--sans);font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin-bottom:.9rem}
.plate__cap h3{margin-bottom:.6rem}
.plate__cap p{color:var(--taupe);font-size:1.02rem;max-width:22rem;margin:0 auto 1.5rem}
.venue__maps{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* order */
.order{background:var(--cream)}
.run{list-style:none;position:relative;z-index:2}
.run__item{display:grid;grid-template-columns:52px 20px 1fr;align-items:start;gap:.5rem;padding:.85rem 0}
.run__time{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--sage-dp);text-align:right;padding-top:.1rem}
.run__dot{position:relative;justify-self:center;width:6px;height:6px;margin-top:.55rem;transform:rotate(45deg);background:var(--gold);z-index:1}
.run__item:not(:last-child) .run__dot::after{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%) rotate(-45deg);width:1px;height:calc(100% + 1.5rem);background:var(--line)}
.run__body h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;line-height:1.1}
.run__body p{font-size:.98rem;color:var(--taupe);margin-top:.1rem}

/* dress */
.dress{background:var(--parch)}
.dress__title{font-family:var(--serif);font-size:2rem;margin-bottom:.6rem}
.dress__note{color:var(--taupe);font-size:1.02rem;max-width:22rem;margin:0 auto 1rem}
.dress__white{font-family:var(--serif);font-style:italic;color:var(--sage-dp);font-size:1.12rem}
.swatches{display:flex;justify-content:center;gap:.6rem;margin-top:1.5rem}
.swatches span{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--line)}

/* gifts */
.gifts{background:var(--cream)}
.gifts__lede{color:var(--taupe);font-size:1.04rem;max-width:24rem;margin:0 auto 1.5rem}
.reveal-toggle{font-family:var(--sans);background:transparent;border:1px solid var(--line-gold);color:var(--ink);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;padding:.95em 1.9em;cursor:pointer;border-radius:2px;transition:background .5s,color .5s,letter-spacing .5s}
.reveal-toggle:hover{letter-spacing:.38em}
.reveal-toggle[aria-expanded="true"]{background:var(--sage-dp);color:var(--ivory);border-color:var(--sage-dp)}
.gifts__details{max-width:20rem;margin:1.7rem auto 0;animation:fade .7s var(--silk)}
.gifts__details dl{display:grid;gap:.85rem;text-align:left}
.gifts__details>dl>div{border-bottom:1px solid var(--line);padding-bottom:.65rem}
.gifts__details dt{font-family:var(--sans);font-size:.54rem;letter-spacing:.28em;text-transform:uppercase;color:var(--taupe);margin-bottom:.2rem}
.gifts__details dd{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}

/* travel / stay */
.pair{background:var(--parch)}
.pair:nth-of-type(odd){background:var(--cream)}
.pair .plate p{color:var(--taupe);font-size:1.04rem;max-width:24rem;margin-inline:auto}

/* gallery */
.gallery{background:var(--ivory);text-align:center}
.gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:26rem;margin:0 auto}
.shot{aspect-ratio:1;position:relative;overflow:hidden;border-radius:3px;display:flex;align-items:flex-end;padding:.6rem;box-shadow:0 16px 30px -24px rgba(65,71,58,.6)}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(50,58,40,.5))}
.shot span{position:relative;z-index:1;color:var(--ivory);font-family:var(--serif);font-style:italic;font-size:.9rem;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.gallery__hint{margin-top:1.4rem;font-size:.82rem;color:var(--taupe);letter-spacing:.04em}

/* rsvp */
.rsvp{background:var(--ivory)}
.rsvp__by{margin-top:.7rem;font-family:var(--serif);font-style:italic;color:var(--sage-dp);font-size:1.08rem}
.rsvp__form{max-width:26rem;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.5rem;grid-column:1/-1}
.field--half{grid-column:auto}
.field>span{font-family:var(--sans);font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--taupe)}
.field>span i{text-transform:none;letter-spacing:0;color:var(--sage);font-style:italic}
.field input,.field select,.field textarea{font-family:var(--serif);font-size:1.05rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:.55em .1em;width:100%;transition:border-color .5s}
.field textarea{resize:vertical;min-height:2.6em}
.field input::placeholder,.field textarea::placeholder{color:#b3ac97;font-style:italic}
.field :is(input,select,textarea):focus{outline:0;border-color:var(--sage-dp)}
.field--choice{border:0}.field--choice>span{margin-bottom:.3rem}
.choice{display:flex;gap:.9rem}
.choice label{flex:1;position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0}
.choice b{display:block;text-align:center;font-family:var(--sans);font-weight:400;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;padding:1.05em .5em;border:1px solid var(--line);border-radius:2px;transition:all .5s;color:var(--taupe)}
.choice input:checked+b{background:var(--sage-dp);color:var(--ivory);border-color:var(--sage-dp)}
.rsvp__form .btn{margin-top:.5rem}
.rsvp__thanks{text-align:center;max-width:24rem;margin:0 auto;padding:1rem 0;animation:fade .9s var(--silk);position:relative;z-index:2}
.rsvp__thanks-leaf{width:70px;margin:0 auto 1rem;opacity:.9}
.rsvp__thanks h3{margin-bottom:.5rem}.rsvp__thanks p{color:var(--taupe)}
@keyframes fade{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}

/* footer */
.foot{background:var(--sage-dp);color:var(--ivory);text-align:center;padding:clamp(72px,15vw,100px) var(--pad);position:relative;overflow:hidden}
.foot__script{font-family:var(--script);font-size:clamp(2.2rem,10vw,2.9rem);color:#e6ecd8;margin-bottom:.6rem;position:relative;z-index:2}
.foot__mono{font-family:var(--serif);font-size:1.7rem;letter-spacing:.02em;color:var(--ivory);position:relative;z-index:2}
.foot__mono i{font-style:italic;color:#d9e0c6}
.foot .rule{margin:1.3rem auto;position:relative;z-index:2}
.foot__meta{font-family:var(--sans);font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:#d3dcc0;opacity:.9;margin-top:.6rem;position:relative;z-index:2}
.deco--foot-l{position:absolute;bottom:-20px;left:-34px;width:130px;transform:rotate(-14deg);opacity:.5;filter:brightness(1.4)}
.deco--foot-r{position:absolute;top:-20px;right:-34px;width:120px;transform:scaleX(-1) rotate(160deg);opacity:.5;filter:brightness(1.4)}

/* ══════════════ PHASES ══════════════
   body[data-phase]: "save-the-date" now → "invite" once timings, dress code, menu and RSVP are locked */
body[data-phase="save-the-date"] .only-invite{display:none!important}
body[data-phase="invite"] .only-std{display:none!important}
.tbc,.dress__tbc{font-family:var(--sans);font-size:.54rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dp)}
.tbc{text-align:center;margin-top:1.5rem}
.dress__tbc{margin-bottom:.9rem}
.run--plain .run__item{grid-template-columns:20px 1fr}

/* ══════════════ PLAN YOUR TRIP ══════════════ */
.trip{background:var(--cream)}
.trip--alt{background:var(--parch)}
.trip__lede{font-size:1.12rem;line-height:1.6;color:var(--ink);text-align:center;max-width:24rem;margin:0 auto}
.trip__week{display:flex;justify-content:center;max-width:22rem;margin:1.9rem auto 1.5rem}
.trip__week>div{flex:1;text-align:center;padding:.1rem .4rem;position:relative}
.trip__week>div+div::before{content:"";position:absolute;left:0;top:12%;height:72%;width:1px;background:var(--line)}
.trip__week b{display:block;font-family:var(--serif);font-weight:500;font-size:1.55rem;line-height:1.1;color:var(--sage-dp)}
.trip__week span{display:block;margin-top:.5rem;font-family:var(--sans);font-size:.5rem;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe)}
.trip__week .is-day b{color:var(--gold-dp);font-style:italic}
.trip__note{max-width:23rem;margin:0 auto;text-align:center;font-style:italic;font-size:1rem;color:var(--taupe)}
.trip__note--sm{margin-top:1.1rem;font-size:.92rem}
.trip__block{max-width:26rem;margin:2.6rem auto 0}
.trip__h{font-family:var(--serif);font-weight:500;font-size:1.55rem;line-height:1.15;text-align:center;color:var(--ink);margin-bottom:.55rem}
.trip__block>p{text-align:center;color:var(--taupe);font-size:1.04rem}
.trip__list{list-style:none;counter-reset:t;margin-top:1.1rem;border-top:1px solid var(--line)}
.trip__list li{display:grid;grid-template-columns:1.7rem 1fr;column-gap:.6rem;padding:.95rem 0;border-bottom:1px solid var(--line);counter-increment:t}
.trip__list li::before{content:counter(t);grid-row:1 / span 2;font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.15;color:var(--gold-dp)}
.trip__list b{font-family:var(--serif);font-weight:500;font-size:1.18rem;line-height:1.25}
.trip__list span{font-size:1rem;line-height:1.55;color:var(--taupe)}
.trip a{color:var(--sage-dp);border-bottom:1px solid var(--line-gold)}
.trip__warn{margin-top:1.1rem;text-align:center;font-style:italic;font-size:.98rem;color:var(--sage-dk)}
.areas{margin-top:1.7rem;border-top:1px solid var(--line)}
.areas>div{display:grid;grid-template-columns:1fr auto;column-gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.areas dt{font-family:var(--serif);font-weight:500;font-size:1.22rem;line-height:1.25;color:var(--ink)}
.areas>div>span{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--sage-dp);white-space:nowrap}
.areas dd{grid-column:1 / -1;margin-top:.15rem;font-size:1rem;line-height:1.55;color:var(--taupe)}
.areas--plain{margin-top:0;border-top:0}
.areas--plain>div:first-child{padding-top:0}
.areas--plain>div:last-child{border-bottom:0;padding-bottom:0}
.trip__callout{max-width:26rem;margin:1.9rem auto 0;padding:1.5rem 1.3rem;text-align:center;border:1px solid var(--line-gold);border-radius:2px;background:rgba(250,246,236,.65)}
.trip__ck{font-family:var(--sans);font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:.6rem}
.trip__callout p:not(.trip__ck){font-size:1.04rem;line-height:1.6;color:var(--ink)}

/* guidebook link */
.guide{background:var(--parch)}
.guide .kicker{display:block;margin-bottom:.9rem}
.guide__h{font-size:clamp(2rem,9vw,2.7rem);margin-bottom:.9rem}
.guide__p{max-width:23rem;margin:0 auto 1.7rem;font-size:1.04rem;color:var(--taupe)}

/* still to come (save-the-date) */
.tocome__lede{max-width:23rem;margin:0 auto 1.5rem;font-size:1.16rem;line-height:1.6;color:var(--ink)}
.tocome__k{margin:1.5rem 0 .6rem;font-family:var(--sans);font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;color:var(--taupe)}
.tocome__p{max-width:23rem;margin:0 auto;font-size:1.02rem;color:var(--taupe)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity 1.4s var(--silk),transform 1.4s var(--silk),filter 1.4s var(--silk)}
.reveal.is-in{opacity:1;transform:none;filter:none}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.25s!important}
  .petals{display:none}
  .reveal,.gtx{opacity:1;transform:none;filter:none}
  .hero__scene{animation:none}
  .gate.is-open .gate__scene{transform:none}
}

/* ══════════════ WHITE + LIGHT CREAM, READABLE (branch: classic-white) ══════════════
   Same watercolour design; lighter grounds, darker small text, nothing under ~11px.
   Every text colour below is ≥ 4.5:1 on white and on the light cream. */
:root{
  --ivory:#FFFFFF;    /* countdown, gallery, reply — was #FAF6EC */
  --cream:#FDFBF6;    /* page, intro, order, trip — was #F3EEE2 */
  --parch:#F6F1E6;    /* venue, dress, stay, guidebook — was beige #EBE3D4 */
  --taupe:#5F5B4C;    /* body + labels — was #8A8672 (3.3:1 on beige) */
  --gold-dp:#7A6335;  /* small "to follow" labels — was #9A7E4B */
}
/* plates: keep a ghost of the leaf paper, but text no longer sits on it */
.plate{background:linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.86)),#fff url("assets/paper.jpg") center/cover}
.trip__callout{background:#fff}

/* bouquet no longer covers "Together with their families" */
.intro{padding-top:clamp(118px,30vw,150px)}
.deco--bouquet-tr{top:-60px;right:-50px;width:40vw;max-width:170px}

/* body copy: a touch bigger and heavier — Cormorant is light at 16px */
.plate__cap p,.run__body p,.dress__note,.gifts__lede,.trip__block>p,.trip__list span,.areas dd,
.guide__p,.tocome__p,.trip__note,.rsvp__thanks p{font-size:1.1rem;font-weight:500}
.trip__lede,.trip__callout p:not(.trip__ck),.tocome__lede{font-weight:500}
.hero__date{color:var(--sage-dk)}
.dress__white,.trip a,.trip__warn{color:var(--sage-dk)}

/* small capitals: up from 8–10px to 11–12px */
.kicker{font-size:.72rem;font-weight:500;letter-spacing:.34em}
.hero__place{font-size:.74rem;font-weight:500}
.hero__scroll span{font-size:.7rem}
.hero__eyebrow{font-size:.72rem;font-weight:500}
.count__cell span{font-size:.72rem;font-weight:500;letter-spacing:.2em}
.plate__badge,.gifts__details dt,.field>span{font-size:.72rem;font-weight:500}
.btn,.reveal-toggle,.choice b{font-size:.7rem;font-weight:500}
.tbc,.dress__tbc,.trip__ck,.tocome__k{font-size:.7rem;font-weight:500}
.trip__week span{font-size:.7rem;font-weight:500;letter-spacing:.2em}
.foot__meta{font-size:.72rem;font-weight:500;opacity:1;color:#fff}
.gate__open{font-size:.72rem}
.gate__sound{font-size:.62rem}

/* gallery captions: darker scrim so white italics read on pale watercolour */
.shot::after{background:linear-gradient(180deg,transparent 35%,rgba(40,46,32,.72))}
.shot span{font-size:1rem;font-weight:500}

/* P&A cipher on the cover: larger and a richer gold so it reads against the pale sky */
.hero__mono-img{max-height:7.4rem;filter:saturate(1.7) contrast(1.12) brightness(.9) drop-shadow(0 0 .5px rgba(96,72,28,.7))}
/* the "&" between the names: Pinyon's ampersand was a faint squiggle — use Cormorant italic, antique gold */
.hero__amp{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.3rem,10.5vw,2.9rem);color:var(--gold-dp);margin:.02em 0 -.04em;line-height:1}
/* new light cover needs no veil — the cream wash + dark foot was muddying it */
.hero__veil{display:none}
/* surround (desktop) and overscroll: light, not a dim brown blur */
body{background:#F6F1E6}
body::before{background:#F6F1E6}
body::after{background:radial-gradient(140% 105% at 50% 32%,rgba(255,255,255,0) 0%,rgba(80,74,52,.06) 70%,rgba(60,56,38,.14) 100%)}
@media (min-width:520px){
  body::before{background:#F6F1E6 url("assets/cover.jpg?v=3") center/cover no-repeat;filter:blur(38px) brightness(1.02) saturate(.95);opacity:.85}
}
.frame{box-shadow:0 30px 90px -30px rgba(60,56,38,.35)}

/* ══════════════ BUKIT MAP (where to stay) ══════════════ */
.map{position:relative;max-width:30rem;margin:0 auto 2rem}
.map img{width:100%;height:auto;border-radius:3px}
.map__pin{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;
  background:var(--sage-dk);color:#fff;font:600 .72rem/22px var(--sans);text-align:center;
  box-shadow:0 0 0 2px #fff,0 2px 6px rgba(40,46,32,.3)}
.map__villa{position:absolute;width:0;height:0}
.map__villa i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;transform:rotate(45deg);background:var(--gold-dp);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(40,46,32,.3)}
.map__villa b{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:3px 8px;border-radius:10px;white-space:nowrap;
  background:var(--gold-dp);color:#fff;font:600 .64rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.map__tag{position:absolute;transform:translate(0,-50%);padding:3px 8px;border-radius:10px;background:rgba(255,255,255,.92);
  color:var(--ink);font:600 .64rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.map figcaption{margin-top:.5rem;text-align:center;font:500 .7rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.areas__n{display:inline-block;width:22px;height:22px;margin-right:.55rem;border-radius:50%;background:var(--sage-dk);color:#fff;
  font:600 .7rem/22px var(--sans);text-align:center;vertical-align:.2em}
/* attire illustration */
.dress__fig{max-width:300px;margin:.4rem auto 1.1rem}
.dress__fig img{width:100%;height:auto}
/* venue illustration: show the whole painting (it was cropped to a 200px strip, cutting the palms) */
.plate__art{height:auto;aspect-ratio:1300/924;background-size:contain;background-repeat:no-repeat}
/* maker's mark */
.foot__credit{position:relative;z-index:2;margin-top:2.4rem;font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#fff}
/* order of the day removed: keep venue (cream) and dress from running together */
.dress{background:var(--ivory)}

/* ══════════════ MOTION: lanterns swing, palms sway ══════════════ */
.lantern{position:absolute;display:block;max-width:none;pointer-events:none;transform-origin:50% 0;
  animation:swing var(--d,5s) ease-in-out var(--t,0s) infinite alternate;will-change:transform}
@keyframes swing{from{transform:rotate(calc(var(--a,2deg) * -1))}to{transform:rotate(var(--a,2deg))}}
.plate__art .palm{position:absolute;inset:0;background:center/contain no-repeat;pointer-events:none;will-change:transform}
.plate__art .palm--l{background-image:url("assets/venue-palm-l.png");transform-origin:19.85% 21.65%;animation:sway-l 4.4s ease-in-out -1.1s infinite alternate}
.plate__art .palm--r{background-image:url("assets/venue-palm-r.png");transform-origin:84% 24.03%;animation:sway-r 5.2s ease-in-out -2.4s infinite alternate}
@keyframes sway-l{from{transform:rotate(-1.6deg)}to{transform:rotate(2deg)}}
@keyframes sway-r{from{transform:rotate(2.2deg)}to{transform:rotate(-1.4deg)}}
@media (prefers-reduced-motion:reduce){.lantern,.plate__art .palm{animation:none}}

/* map: loads with the page now; a watercolour-blue placeholder holds its space, and it fades in faster */
.map img{background:#d9e8ee}
.map.reveal{transition-duration:.6s}

/* ══════════════ MOTION: curtain hems drift, string lights breathe together ══════════════ */
.hero__scene .curtain,.hero__scene .bulbs{position:absolute;display:block;pointer-events:none}
.hero__scene .bulbs{background:url("assets/bulb-glow.webp") 0 0/100% 100% no-repeat;opacity:.35;animation:glow 5.2s ease-in-out infinite alternate;will-change:opacity}
@keyframes glow{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero__scene .bulbs{animation:none;opacity:.7}}
.hero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero__scene.film-mode{animation:none;transform:none}
.has-film .lantern,.has-film .curtain,.has-film .bulbs{visibility:hidden;transition:visibility 0s .9s}
.has-film .hero__film{opacity:1}

/* ══════════════ COVER TYPE: a smaller cipher and names; venue + date lifted onto the calm horizon ══════════════ */
.hero{justify-content:flex-start}
.hero__content{margin-top:max(0px,calc(50svh - 14.25rem - var(--pad)))}   /* keeps "Save the date" where it sat */
.hero__monowrap{margin-bottom:.3rem}
.hero__mono-img{max-height:4.6rem}
.hero__names>span{font-size:clamp(2.5rem,12.5vw,3.25rem)}
.hero__amp{font-size:clamp(1.6rem,7vw,1.95rem)}
.hero__rule{margin:.85rem 0 .7rem}
.hero__place,.hero__date{color:var(--ink);text-shadow:0 0 5px rgba(253,251,246,.95),0 0 12px rgba(253,251,246,.9),0 0 24px rgba(253,251,246,.8)}
.hero__place{font-weight:600;font-size:.76rem;letter-spacing:.28em}
.hero__date{font-weight:500;font-size:1.3rem;margin-top:.3rem}
/* pin the painting (still and film) to the top so a short, wide window crops the path, not the palms */
.hero__scene[data-bg]{background-position:50% 0;transform-origin:50% 0}
.hero__film{object-position:50% 0}

/* ══════════════ ENVELOPE → COVER: open straight onto the live cover ══════════════
   No second, zoomed copy of the painting inside the gate to cross-fade away: the gate's cream
   ground clears as the flap lifts, and what shows through is the real cover (film or still). */
.gate--envelope .gate__scene{display:none}
.gate--envelope.is-open{background-color:transparent;transition:background-color 1.1s var(--silk) .45s,opacity 1.1s var(--silk),visibility 1.1s}
/* film: the poster is frame one, so show it at once — playback starting changes nothing on screen */
.hero__film{opacity:1;transition:none}

/* ══════════════ TWO GROUNDS ONLY: white and cream, alternating — the beige is retired ══════════════
   count W · intro C · [divider] · venue C · dress W · plan C · stay W · travel C · guidebook W · reply C · footer
   Cards take the other ground: white cards on cream sections, cream cards on white ones — a hairline apart, not a block. */
.venue{background:var(--cream)}
.trip--alt,.guide{background:var(--ivory)}
.rsvp.only-std{background:var(--cream)}
.divider::before{background:linear-gradient(180deg,var(--cream),transparent 24%,transparent 76%,var(--cream))}
.trip--alt .plate,.guide .plate{background:linear-gradient(rgba(253,251,246,.82),rgba(253,251,246,.82)),var(--cream) url("assets/paper.jpg") center/cover}
.plate{box-shadow:0 24px 50px -40px rgba(65,71,58,.45)}

/* the P&A cipher is gone from the cover: names follow "Save the date" directly */
.hero__eyebrow{margin-bottom:1.5rem}

/* ══════════════ 11 Oct: cover text a little lower · gifts · us · rsvp ══════════════ */
.hero__content{margin-top:max(0px,calc(50svh - 11.5rem - var(--pad)))}
.gifts__lede{margin-bottom:1.6rem}
.cjk{font-family:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",serif;font-style:normal;font-weight:400;font-size:.9em}
.gifts__monzo{min-width:12rem}
/* the pre-wedding photo: full width, settling into the green footer below */
.us{margin:0;position:relative;background:var(--sage-dp)}
.us img{display:block;width:100%;height:auto}
.us::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;pointer-events:none;
  background:linear-gradient(180deg,rgba(110,122,94,0),var(--sage-dp))}
.us.reveal{transform:none;filter:none}
/* rsvp: honeypot off-screen, error line */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.rsvp__err{grid-column:1/-1;margin:.2rem 0 0;font-size:.95rem;color:#8a3b2e;text-align:center}
.us{margin-bottom:-1px;overflow:hidden}
.us::after{bottom:-1px;height:18%;background:linear-gradient(180deg,rgba(110,122,94,0),var(--sage-dp) 86%)}

/* film: a still of frame one sits under the video; the video only shows while it is presenting frames */
.hero__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none}
.hero__film{opacity:0;transition:none;background:transparent}
.hero__film.is-live,.has-film .hero__film.is-live{opacity:1}
.has-film .hero__film:not(.is-live){opacity:0}