/* ══════════════════════════════════════════════════════════
   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") 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}
}