/* Edward & Rae: tokens from the E&R design system (tokens/colors.css, typography.css, spacing.css) */
:root{
--paper-white:#FFFFFF;--paper-offwhite:#FBF8F5;
--blush-50:#FCF4F4;--blush-100:#F9E9EA;--blush-200:#FCE2E3;--blush-300:#F3DBDB;--blush-400:#EBC9CB;--blush-500:#DDAFB3;
--bronze-300:#C6A688;--bronze-500:#A9815F;--bronze-600:#9A7352;--bronze-700:#7E5C40;
--foil-300:#D6C9A4;--foil-500:#C9B689;--foil-700:#A8935F;
--ink-900:#2F2C2C;--ink-800:#3E3E3E;--ink-700:#494142;--ink-500:#6E6566;--ink-300:#A39A9B;
--poppy-peach:#F4C9B8;--error:#B5594F;--success:#7E8F64;
--font-display:'Cinzel','Trajan Pro',serif;
--font-caps:'Marcellus','Optima',serif;
--font-italic:'Cormorant Garamond','Garamond',serif;
--font-sans:'Open Sans','Helvetica Neue',sans-serif;
--shadow-card:0 1px 2px rgba(62,40,40,.06),0 12px 32px -12px rgba(62,40,40,.18);
--shadow-envelope:0 30px 60px -20px rgba(80,50,50,.28);
--ease-paper:cubic-bezier(.22,.61,.36,1);
--ease-unfold:cubic-bezier(.65,0,.35,1);
--gutter:clamp(20px,5vw,64px);
/* light direction for the blind emboss, driven by pointer / device tilt */
--lx:1px;--ly:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--paper-white);color:var(--ink-800);font-family:var(--font-caps);-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
a{color:var(--bronze-600);text-decoration:none;border-bottom:1px solid var(--bronze-300)}
a:hover{color:var(--bronze-700);border-bottom-color:var(--bronze-600)}
::selection{background:var(--blush-300);color:var(--ink-900)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid rgba(169,129,95,.55);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shared type ---------- */
.h-section{margin:0;font:600 clamp(34px,6vw,60px)/1.12 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--bronze-500);text-align:center;text-wrap:balance}
.caps{font:400 clamp(15px,1.7vw,19px)/1.75 var(--font-caps);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-800);text-align:center}
.italic{font-family:var(--font-italic);font-style:italic}
.foil{font:500 clamp(15px,1.5vw,17px)/1.65 var(--font-sans);letter-spacing:.06em;color:var(--foil-700)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border:1px solid var(--bronze-500);background:var(--bronze-500);color:#fff;font:600 13px/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;border-radius:2px;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s;text-decoration:none}
.btn:hover{background:var(--bronze-600);border-color:var(--bronze-600);color:#fff}
.btn:active{transform:translateY(1px);background:var(--bronze-700)}
.btn.ghost{background:transparent;color:var(--bronze-600)}
.btn.ghost:hover{background:var(--blush-100);color:var(--bronze-700)}
.btn.sm{min-height:40px;padding:0 18px;font-size:11px}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease-paper),transform 1.1s var(--ease-paper);transition-delay:calc(var(--d,0) * 90ms)}
.rv.in{opacity:1;transform:none}

/* ---------- florals ---------- */
.floral{position:absolute;pointer-events:none;user-select:none;will-change:transform}
main{background:var(--blush-50)}
main>section{transform-origin:50% 0;will-change:transform}
.h-section.rv{clip-path:inset(0 50% 0 50%);letter-spacing:.24em;transform:none;transition:clip-path 1.3s var(--ease-unfold),letter-spacing 1.6s var(--ease-paper),opacity .8s}
.h-section.rv.in{clip-path:inset(0 -5% -40% -5%);letter-spacing:.06em}
.h-section.rv::after{content:"";display:block;height:1px;width:0;margin:.32em auto 0;background:linear-gradient(90deg,transparent,var(--bronze-300) 20%,var(--bronze-500) 50%,var(--bronze-300) 80%,transparent);transition:width 1.6s var(--ease-unfold) .7s}
.h-section.rv.in::after{width:min(240px,60%)}
.vcard.rv{transform:translateY(40px) rotate(-1.2deg)}
.vcard.rv:nth-child(2){transform:translateY(40px) rotate(1.2deg)}
.vcard.rv.in{transform:none}
.scroll-line{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--bronze-500);transform-origin:0 50%;transform:scaleX(var(--sp,0));z-index:45;pointer-events:none;opacity:.85}
.floral.tl{top:0;left:0}.floral.tr{top:0;right:0}.floral.bl{bottom:0;left:0}.floral.br{bottom:0;right:0}
.floral.papercut{filter:drop-shadow(2px 3px 4px rgba(120,80,80,.18))}

/* =========================================================
   1. ENVELOPE INTRO
   ========================================================= */
#intro{position:fixed;inset:0;z-index:60;background:var(--blush-100);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,5vh,44px);overflow:hidden;transition:opacity 1.1s var(--ease-paper),visibility 0s linear 1.1s}
#intro.gone{opacity:0;visibility:hidden}
/* theatre: the room is dimmed, a spotlight falls on the envelope; lights come up when it opens */
#intro::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 62% 46% at 50% 54%,rgba(60,30,30,0) 0%,rgba(60,30,30,0) 42%,rgba(84,40,44,.34) 100%);transition:opacity 1.6s var(--ease-paper)}
#intro.lit::before{opacity:0}
#intro .env-wrap,#intro .invited{z-index:1}
.invited .lt{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(3px);animation:letterIn .9s var(--ease-paper) forwards;animation-delay:calc(var(--k) * 55ms + 2600ms)}
@keyframes letterIn{to{opacity:1;transform:none;filter:none}}
.env-hint{animation:breathe 2.6s ease-in-out 4.6s infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}
#intro.pushing{background:#fff;transition:background .9s var(--ease-paper) .2s,opacity .6s,visibility 0s linear .6s}
#intro.pushing .floral,#intro.pushing .invited{opacity:0;transition:opacity .5s}
#intro.pushing .env-back,#intro.pushing .env-pocket,#intro.pushing .env-flap{opacity:0;transition:opacity .55s var(--ease-paper) .15s}
#intro.pushing .env-card{box-shadow:none;transition:transform 1.5s var(--ease-unfold),box-shadow .5s}
#intro.pushing .env-card .mono{opacity:0;transition:opacity .4s}
#intro.pushing.gone{transition:opacity .45s,visibility 0s linear .45s}
/* stage scenery: white paper-cut flats standing in the two front corners, lit, rising as the curtains part */
/* the florals are translucent tints made for light paper; stacked white silhouettes give each one a solid paper body so it reads as a lit cut-out on the dim stage */
#intro .scenery{z-index:2;width:clamp(140px,34vw,340px);translate:0 35%;opacity:0;transition:translate 2s cubic-bezier(.2,.8,.2,1) 1.2s,opacity 1.4s var(--ease-paper) 1.2s;
 filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(2px 4px 6px rgba(70,35,40,.35)) drop-shadow(0 0 22px rgba(255,246,236,.35))}
#intro .scenery.br{width:clamp(200px,54vw,500px)}
#intro .scenery.flip{scale:1 -1}
#intro.raised .scenery{translate:0 0;opacity:1}
.invited{position:relative;font:500 13px var(--font-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--bronze-600);opacity:0;animation:fadeUp 1.4s var(--ease-paper) .3s forwards}
.env-wrap{position:relative;perspective:1600px;opacity:0;animation:envIn 1.8s var(--ease-paper) 2.3s forwards}
.env{--w:min(520px,86vw);position:relative;width:var(--w);height:calc(var(--w) * .68);cursor:pointer;perspective:1400px;transition:transform 1.2s var(--ease-unfold);animation:float 6s ease-in-out 4.2s infinite}
.env:hover .env-hint{color:var(--bronze-700)}
.env-back{position:absolute;inset:0;background:var(--paper-offwhite);box-shadow:var(--shadow-envelope)}
.env-card{position:absolute;left:5%;right:5%;top:4%;height:92%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;z-index:1;transition:transform 1.5s var(--ease-unfold)}
.env-pocket{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.env-pocket path{stroke:rgba(110,90,90,.38);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.env-pocket .side{fill:#F6F0EB}
.env-pocket .bottom{fill:var(--paper-offwhite);filter:drop-shadow(0 -2px 3px rgba(90,60,60,.07))}
.env-flap{position:absolute;left:0;right:0;top:0;height:62%;transform-origin:top;transform-style:preserve-3d;transition:transform .95s var(--ease-unfold);z-index:4}
.env-flap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.env-flap .face{transform:translateZ(1px);filter:drop-shadow(0 2px 2px rgba(90,60,60,.12))}
.env-flap .face path,.env-flap .liner .paper{fill:var(--paper-offwhite);stroke:rgba(110,90,90,.38);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.env-flap .liner{transform:rotateX(180deg) translateZ(1px)}
.env-label{position:absolute;left:0;right:0;bottom:13%;z-index:5;text-align:center;pointer-events:none;transition:opacity .4s}
.env-label .to{font:italic 400 clamp(19px,2.6vw,23px) var(--font-italic);color:var(--ink-500)}
.env-hint{font:600 11px var(--font-display);letter-spacing:.26em;color:var(--bronze-500);margin-top:8px;transition:color .2s}
.env.open .env-label{opacity:0}
.env.open .env-flap{transform:rotateX(180deg)}
.env.lift .env-flap{z-index:0}
.env.lift .env-card{transform:translateY(-62%);z-index:3}
.env.lift .env-pocket{z-index:4}
.env.lift .env-label{z-index:5}
.env.lift{animation:none;transform:translateY(22%)}
.mini-mono{font-size:clamp(22px,4.4vw,40px)}
@keyframes envIn{from{opacity:0;transform:translateY(40px) rotateX(18deg)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* =========================================================
   MONOGRAM (names lockup, blind emboss)
   ========================================================= */
.mono{display:flex;flex-direction:column;line-height:.95;font-family:var(--font-display);font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.mono .amp{font-family:var(--font-italic);font-style:italic;text-transform:none;font-size:.92em;margin-right:.06em}
.mono.center{align-items:center}
.mono.emboss{color:#FDFBF9;--emb:0 -1px 0 #fff,0 0 1px rgba(110,90,85,.9),0 0 1px rgba(110,90,85,.9),0 0 2px rgba(110,90,85,.35),var(--lx) var(--ly) 4px rgba(70,45,40,.30);text-shadow:var(--emb)}
.inv .mono.emboss{font-weight:500}
/* the names on the site are gold foil, like the rest of the main card's lettering, for legibility on screens */
#names.mono.emboss{color:var(--foil-700);--emb:0 1px 0 rgba(255,255,255,.85),0 0 1px rgba(110,88,36,.6),var(--lx) var(--ly) 5px rgba(110,85,40,.22);text-shadow:var(--emb)}
.mono.bronze{color:var(--bronze-500)}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gutter);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--blush-300);transform:translateY(-100%);transition:transform .6s var(--ease-paper)}
.nav.show{transform:none}
.nav .mark{font:500 15px var(--font-display);letter-spacing:.1em;color:var(--bronze-500);border:0;white-space:nowrap}
.nav .mark i{font-family:var(--font-italic);text-transform:none}
.nav ul{display:flex;gap:clamp(14px,2.4vw,30px);list-style:none;margin:0;padding:0}
.nav ul a{font:600 11px var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-700);border-bottom:1px solid transparent;padding:4px 0}
.nav ul a:hover,.nav ul a.on{color:var(--bronze-600);border-bottom-color:var(--bronze-300)}
@media (max-width:720px){.nav ul li.opt{display:none}.nav{padding:10px 16px}.nav ul{gap:14px}.nav ul a{font-size:10px;letter-spacing:.14em}}
@media (max-width:420px){.nav .mark{display:none}.nav{justify-content:center}}

/* =========================================================
   2. INVITATION HERO
   ========================================================= */
#invitation{position:relative;overflow:hidden;background:#fff;min-height:100vh;min-height:100svh}
#names.ln{opacity:1;transform:none;filter:none}
#names .ch{display:inline-block;opacity:0}
#invitation.live #names .ch{animation:stamp .95s var(--ease-paper) both;animation-delay:calc(var(--k) * 70ms + 900ms)}
#names.stamped .ch{animation:none;opacity:1}
@keyframes stamp{0%{opacity:0;transform:translateY(-.12em) scale(1.18);text-shadow:none}50%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:none;text-shadow:var(--emb)}}
#invitation .vine{position:absolute;top:0;right:0;height:100%;max-width:46%;object-fit:cover;object-position:left top;clip-path:inset(0 0 100% 0);transition:clip-path 3.4s cubic-bezier(.45,0,.2,1) .3s}
#invitation.live .vine{clip-path:inset(0 0 0 0)}
#invitation::after{content:"";position:absolute;inset:-20% -60%;pointer-events:none;z-index:2;background:linear-gradient(105deg,transparent 40%,rgba(255,250,235,.0) 44%,rgba(255,246,220,.75) 50%,rgba(255,250,235,0) 56%,transparent 60%);transform:translateX(-70%);opacity:0}
#invitation.live::after{animation:sweep 2.4s cubic-bezier(.5,0,.3,1) 2.6s 1 both}
@keyframes sweep{0%{transform:translateX(-70%);opacity:1}100%{transform:translateX(70%);opacity:1}}
#invitation .vine-alt{position:absolute;pointer-events:none;opacity:0;transition:opacity 2s var(--ease-paper) .4s}
#invitation.live .vine-alt{opacity:1}
.inv{position:relative;max-width:1120px;margin:0 auto;padding:clamp(104px,14vh,150px) var(--gutter) clamp(80px,10vh,110px)}
.inv-col{max-width:640px;display:flex;flex-direction:column;gap:26px}
.inv .ln{opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity 1.2s var(--ease-paper),transform 1.2s var(--ease-paper),filter 1.2s var(--ease-paper);transition-delay:calc(var(--i) * 260ms + 300ms)}
#invitation.live .ln{opacity:1;transform:none;filter:none}
.parents{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:clamp(20px,4vw,40px);row-gap:2px;margin-top:6px}
.parents div{font:400 clamp(14px,1.8vw,19px)/1.5 var(--font-display);letter-spacing:.03em;text-transform:uppercase;color:var(--foil-700)}
.inv .mono{font-size:clamp(54px,10.4vw,128px)}
.mono>span{white-space:nowrap}
.date-line{font:700 clamp(20px,2.6vw,32px)/1.25 var(--font-display);letter-spacing:.05em;color:var(--foil-700);position:relative}
/* foil sheen: a narrow highlight that follows the pointer across the foil date */
.sheen{background:linear-gradient(100deg,var(--foil-700) 0%,var(--foil-700) calc(var(--sx,50%) - 14%),#E8DCB8 var(--sx,50%),var(--foil-700) calc(var(--sx,50%) + 14%),var(--foil-700) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.venue .lead{font:500 clamp(15px,1.5vw,17px)/1.6 var(--font-sans);letter-spacing:.06em;color:var(--foil-700);white-space:pre-line}
.venue .name{font:600 clamp(19px,2.1vw,24px)/1.3 var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--foil-700);margin-top:4px}
.venue .place{font:italic 400 clamp(17px,1.9vw,20px) var(--font-italic);color:var(--ink-700)}
.venue .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.inv-foot{margin-top:40px;padding-top:34px;border-top:1px solid var(--blush-300);display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:600 10px var(--font-display);letter-spacing:.3em;color:var(--bronze-500);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity 1s 3.6s;border:0}
#invitation.live .scroll-cue{opacity:1}
.scroll-cue::after{content:"";width:1px;height:34px;background:linear-gradient(var(--bronze-500),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){
 #invitation .vine{max-width:34%;height:auto;max-height:78%;object-fit:contain;object-position:right top;right:-6%}
 #invitation.live .vine{opacity:.42}
 .inv-col{max-width:none;padding-right:8%}
 .inv .foil br,.venue .lead br{display:none}
 .venue .lead{white-space:normal}
 .scroll-cue{display:none}
}
@media (max-width:440px){
 .parents{grid-template-columns:1fr;grid-auto-flow:row}
 .parents div:nth-child(1){order:1}.parents div:nth-child(3){order:2;margin-bottom:8px}
 .parents div:nth-child(2){order:3}.parents div:nth-child(4){order:4}
}

/* =========================================================
   3. SAVE THE DATE (scratch) + COUNTDOWN
   ========================================================= */
#date{position:relative;overflow:hidden;background:var(--blush-200);padding:clamp(90px,13vh,140px) var(--gutter)}
#date .floral.tr{width:min(36vw,420px)}
#date .floral.bl{width:min(26vw,300px)}
.date-inner{position:relative;max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.eyebrow{font:500 13px var(--font-sans);letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-600)}
.scratch{position:relative;width:min(560px,100%);aspect-ratio:2.1/1;margin-top:18px;background:var(--paper-offwhite);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none}
.scratch .under{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px}
.scratch .day{font:italic 400 clamp(18px,2.4vw,22px) var(--font-italic);color:var(--ink-700)}
.scratch .big{font:600 clamp(38px,8vw,72px)/1 var(--font-display);letter-spacing:.08em;color:var(--bronze-500)}
.scratch .city{font:500 12px var(--font-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--bronze-600)}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;transition:opacity 1.2s var(--ease-paper)}
.scratch.done canvas{opacity:0;pointer-events:none}
.scratch.done .big{animation:datePop 1.4s cubic-bezier(.2,.9,.3,1.2) both}
.scratch.done .day,.scratch.done .city{animation:fadeUp 1.2s var(--ease-paper) .3s both}
@keyframes datePop{0%{transform:scale(.86);letter-spacing:.2em;opacity:.4}60%{transform:scale(1.06)}100%{transform:none;letter-spacing:.08em;opacity:1}}
.scratch-tip{font:italic 400 19px var(--font-italic);color:var(--ink-500);transition:opacity .5s}
.scratch-tip.hide{opacity:0}
.countdown{display:flex;justify-content:center;gap:clamp(10px,3vw,34px);margin-top:clamp(36px,6vh,56px)}
.cd-unit{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:clamp(62px,15vw,104px)}
.cd-num{position:relative;width:clamp(62px,17vw,104px);height:clamp(66px,17vw,98px);font:400 clamp(32px,8vw,56px)/1 var(--font-display);color:var(--ink-800);font-variant-numeric:tabular-nums;perspective:420px;box-shadow:var(--shadow-card)}
.cd-num::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(62,40,40,.14);z-index:4}
.fl-up,.fl-dn,.fl-leaf{position:absolute;left:0;right:0;height:50%}
.fl-up,.fl-dn,.fl-f,.fl-b{overflow:hidden;background:var(--paper-offwhite)}
.fl-up{top:0}.fl-dn{bottom:0;background:#F8F3EF}
.fl-f,.fl-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fl-b{transform:rotateX(180deg);background:#F8F3EF}
.cd-num span{position:absolute;left:0;right:0;height:200%;display:flex;align-items:center;justify-content:center}
.fl-up span,.fl-f span{top:0}
.fl-dn span,.fl-b span{bottom:0}
.fl-leaf{top:0;transform-origin:50% 100%;transform-style:preserve-3d;z-index:3;visibility:hidden}
.cd-num.flip .fl-leaf{visibility:visible;animation:leaf .62s cubic-bezier(.5,.05,.5,1) forwards}
.cd-num.flip .fl-f{animation:shade .62s forwards}
@keyframes leaf{to{transform:rotateX(-180deg)}}
@keyframes shade{to{filter:brightness(.88)}}
.cd-lbl{font:600 10px var(--font-display);letter-spacing:.26em;color:var(--bronze-500)}
.cd-sep{width:1px;align-self:stretch;background:var(--blush-500);opacity:.6}

/* =========================================================
   4. EVENTS OF THE DAY
   ========================================================= */
#schedule{position:relative;overflow:hidden;background:var(--blush-100);padding:clamp(96px,14vh,160px) var(--gutter) clamp(180px,24vh,250px)}
#schedule .floral.tl{width:min(36vw,420px)}
#schedule .floral.br{width:min(30vw,360px)}
.sched{position:relative;z-index:1;max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(48px,8vh,90px)}
.tline{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tline .rail{position:absolute;left:12.5%;right:12.5%;top:132px;height:2px;background:var(--bronze-500);transform-origin:left;transform:scaleX(var(--p,0))}
.ev{display:flex;flex-direction:column;align-items:center;text-align:center}
.ev .pic{height:116px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px}
.ev .pic img{height:96px;width:auto;opacity:0;transform:translateY(12px) scale(.92);transition:opacity .9s var(--ease-paper),transform .9s var(--ease-paper)}
.ev .tick{width:2px;height:58px;background:var(--bronze-500);margin-top:2px;transform-origin:top;transform:scaleY(0);transition:transform .6s var(--ease-paper)}
.ev .txt{margin-top:18px;display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity .9s var(--ease-paper)}
.ev .t{font:400 clamp(20px,2.4vw,26px) var(--font-caps);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-700)}
.ev .s{font:italic 400 clamp(17px,1.9vw,19px) var(--font-italic);color:var(--ink-700)}
.ev .h{font:400 clamp(20px,2.4vw,26px) var(--font-caps);letter-spacing:.02em;color:var(--ink-700)}
.ev.on .pic img{opacity:1;transform:none}
.ev.on .tick{transform:scaleY(1)}
.ev.on .txt{opacity:1}
.ev .pic img.missing{display:none}
@media (max-width:720px){
 /* zig-zag: rail down the middle, a diamond node per event, pictogram and words trading sides */
 .tline{grid-template-columns:1fr;row-gap:clamp(40px,9vw,56px);padding:18px 0}
 .tline .rail{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:top;transform:scaleY(var(--p,0));margin-left:-1px}
 .ev{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;text-align:left}
 .ev>*{grid-row:1}
 .ev .pic{grid-column:1;height:auto;padding:0;justify-content:flex-end}
 .ev .pic img{height:64px;transform:translateX(-26px) scale(.9)}
 .ev .tick{display:block;grid-column:2;justify-self:center;width:14px;height:14px;margin:0;background:var(--blush-100);border:2px solid var(--bronze-500);transform:rotate(45deg) scale(0);transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
 .ev.on .tick{transform:rotate(45deg) scale(1)}
 .ev .txt{grid-column:3;margin:0;transform:translateX(26px);transition:opacity .9s var(--ease-paper),transform .9s var(--ease-paper)}
 .ev .t{font-size:21px;letter-spacing:.05em}
 .ev .s{font-size:17px;margin-top:-1px}
 .ev .h{font-size:19px;color:var(--bronze-600);margin-top:2px}
 .ev:nth-child(odd) .pic{grid-column:3;justify-content:flex-start}
 .ev:nth-child(odd) .pic img{transform:translateX(26px) scale(.9)}
 .ev:nth-child(odd) .txt{grid-column:1;text-align:right;transform:translateX(-26px)}
 .ev.on .pic img,.ev.on .txt{transform:none}
}
.venues{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.vcard{background:var(--paper-offwhite);box-shadow:var(--shadow-card);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.vcard .k{font:italic 400 19px var(--font-italic);color:var(--ink-500)}
.vcard .n{font:600 clamp(18px,2vw,22px)/1.3 var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--bronze-500)}
.vcard .p{font:400 15px/1.6 var(--font-caps);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-700)}
.vcard .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}

/* =========================================================
   6. RSVP + ATTIRE
   ========================================================= */
#rsvp{position:relative;overflow:hidden;background:#fff;padding:clamp(96px,14vh,150px) var(--gutter)}
#rsvp .floral.tr{width:min(44vw,560px)}
#rsvp .floral.bl{width:min(26vw,300px)}
.rsvp{position:relative;max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.seats-u{border-bottom:1px solid var(--ink-800);padding:0 10px}
.deadline{font:700 clamp(20px,2.6vw,24px) var(--font-display);letter-spacing:.04em;color:var(--bronze-500)}
.form-card{width:100%;margin-top:30px;padding:clamp(24px,4vw,44px);background:var(--paper-offwhite);box-shadow:var(--shadow-card)}
.form{display:flex;flex-direction:column;gap:26px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field>label,.legend{font:600 11px var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-600)}
.field input,.field textarea{width:100%;border:0;border-bottom:1px solid var(--ink-300);background:transparent;padding:10px 2px;font:400 18px var(--font-italic);color:var(--ink-800);border-radius:0;transition:border-color .2s}
.field textarea{min-height:84px;resize:vertical;border:1px solid var(--blush-400);padding:12px;background:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-300);font-style:italic}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--bronze-500)}
.field .err{font:italic 15px var(--font-italic);color:var(--error);min-height:0}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:6px}
.choice{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:10px 16px;border:1px solid var(--blush-400);background:#fff;cursor:pointer;font:italic 400 20px var(--font-italic);color:var(--ink-700);transition:border-color .2s,background .2s,color .2s}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice:hover{border-color:var(--bronze-300)}
.choice.on{border-color:var(--bronze-500);background:var(--blush-50);color:var(--bronze-700)}
.choice.on::before{content:"";width:8px;height:8px;background:var(--bronze-500);transform:rotate(45deg)}
.seats{display:flex;align-items:center;gap:18px;margin-top:6px}
.seats button{width:44px;height:44px;border:1px solid var(--bronze-300);background:#fff;color:var(--bronze-600);font:400 22px var(--font-display);cursor:pointer;border-radius:2px}
.seats button:disabled{opacity:.35;cursor:default}
.seats output{font:400 30px var(--font-display);color:var(--ink-800);min-width:30px;text-align:center}
.seats .of{font:italic 18px var(--font-italic);color:var(--ink-500)}
.thanks{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 0;text-align:center}
.thanks img{height:84px}
.thanks .tt{font:600 26px var(--font-display);letter-spacing:.06em;color:var(--bronze-500)}
.thanks .tm{font:italic 21px var(--font-italic);color:var(--ink-700)}
.note{font:italic 16px var(--font-italic);color:var(--ink-500);text-align:center}
#attire{margin-top:clamp(80px,12vh,140px);display:flex;flex-direction:column;align-items:center;gap:18px}
.attire-art{width:min(480px,90%);margin-top:14px;clip-path:inset(0 100% 0 0);transition:clip-path 2.6s var(--ease-unfold)}
#attire.in .attire-art{clip-path:inset(0 0 0 0)}

/* =========================================================
   7. CLOSING
   ========================================================= */
.closing{position:relative;overflow:hidden;background:var(--blush-200);padding:clamp(90px,14vh,130px) 24px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.closing .mono{font-size:clamp(40px,7vw,64px)}
.closing .mono.rv{transform:scale(1.25);filter:blur(10px);transition:opacity 1.6s var(--ease-paper),transform 2s var(--ease-unfold),filter 1.6s var(--ease-paper)}
.closing .mono.rv.in{transform:none;filter:none}
.closing .meta{font:500 14px var(--font-sans);letter-spacing:.16em;color:var(--bronze-600)}
.closing .floral.tl{width:min(30vw,300px);opacity:.9}
.closing .floral.br{width:min(32vw,320px);opacity:.9}

/* =========================================================
   PETALS
   ========================================================= */
#petals{position:fixed;inset:0;z-index:70;pointer-events:none}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
 html{scroll-behavior:auto}
 #petals{display:none}
}

/* =========================================================
   MUSIC BUTTON
   ========================================================= */
.music{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:75;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 14px;border:1px solid var(--bronze-300);background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--bronze-600);font:600 10px var(--font-display);letter-spacing:.22em;text-transform:uppercase;border-radius:2px;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .8s var(--ease-paper),transform .8s var(--ease-paper),background .2s}
.music.show{opacity:1;transform:none;pointer-events:auto}
.music:hover{background:#fff}
.music .bars{display:flex;align-items:flex-end;gap:2px;height:14px}
.music .bars i{width:2px;height:3px;background:var(--bronze-500);transition:height .3s}
.music[aria-pressed="true"] .bars i{animation:eq 1.1s ease-in-out infinite}
.music[aria-pressed="true"] .bars i:nth-child(2){animation-delay:-.4s}
.music[aria-pressed="true"] .bars i:nth-child(3){animation-delay:-.75s}
.music[aria-pressed="true"] .bars i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
@media (max-width:440px){.music .lbl{display:none}.music{padding:0 14px}}

/* closing actions */
.closing-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}

/* pictograms answer a tap */
.ev .pic img{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ev .pic img.jig{animation:jig .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes jig{0%{rotate:0deg;scale:1}25%{rotate:-9deg;scale:1.12}55%{rotate:7deg;scale:1.06}80%{rotate:-3deg}100%{rotate:0deg;scale:1}}

/* hero depth: the vine and the words drift apart with the pointer */
@media (hover:hover){
 #invitation .vine{translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -10px);transition:clip-path 3.4s cubic-bezier(.45,0,.2,1) .3s,translate .6s var(--ease-paper)}
 #invitation .inv-col{translate:calc(var(--mx,0) * 6px) calc(var(--my,0) * 4px);transition:translate .6s var(--ease-paper)}
}

/* =========================================================
   PAPER THEATRE: curtains, valance, spotlight beam
   ========================================================= */
#intro:not(.raised) .env{pointer-events:none}
.curtain{position:absolute;top:0;bottom:0;width:51%;z-index:6;pointer-events:none;
 background:
  linear-gradient(180deg,rgba(80,40,45,0) 70%,rgba(80,40,45,.22) 100%),
  repeating-linear-gradient(90deg,#E6BDC1 0 18px,#F1D2D4 18px 34px,#EAC6C9 34px 44px,#DCAEB2 44px 52px);
 box-shadow:0 0 40px rgba(80,40,45,.28);
 transition:transform 2.3s cubic-bezier(.75,0,.2,1),filter 2.3s;
 will-change:transform}
.curtain.cl{left:0;transform-origin:0 50%}
.curtain.cr{right:0;transform-origin:100% 50%}
/* paper-cut hem: a row of scallops along the bottom of each drape */
.curtain::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:26px;background:radial-gradient(circle at 50% 0,#D9A9AE 0 12px,transparent 12.5px) 0 0/26px 26px repeat-x}
#intro.raised .curtain.cl{transform:scaleX(.1) skewY(-1.5deg)}
#intro.raised .curtain.cr{transform:scaleX(.1) skewY(1.5deg)}
.valance{position:absolute;top:0;left:0;right:0;z-index:7;height:clamp(46px,8vh,78px);pointer-events:none;
 background:repeating-linear-gradient(90deg,#DDAFB3 0 22px,#E6BDC1 22px 40px);
 box-shadow:0 6px 18px rgba(80,40,45,.22);
 -webkit-mask:radial-gradient(circle at 50% 100%,transparent 0 13px,#000 13.5px) 0 100%/40px 100% repeat-x;
 mask:radial-gradient(circle at 50% 100%,transparent 0 13px,#000 13.5px) 0 100%/40px 100% repeat-x;
 transition:transform 2.3s cubic-bezier(.75,0,.2,1)}
.valance::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:1px;background:var(--bronze-300)}
#intro.raised .valance{transform:translateY(-35%)}
.beam{position:absolute;top:0;left:50%;width:min(150vw,1000px);height:100%;transform:translateX(-50%);z-index:0;pointer-events:none;
 background:linear-gradient(to bottom,rgba(255,250,240,.6),rgba(255,250,240,.12) 70%,rgba(255,250,240,0));
 clip-path:polygon(45% 0,55% 0,96% 100%,4% 100%);opacity:0;transition:opacity 1.6s var(--ease-paper) 1.1s}
#intro.raised .beam{opacity:.75;animation:flicker 5s ease-in-out 3s infinite}
#intro.lit .beam{opacity:0;animation:none;transition-delay:0s}
#intro.lit .curtain.cl{transform:scaleX(0)}
#intro.lit .curtain.cr{transform:scaleX(0)}
#intro.lit .valance{transform:translateY(-110%)}
@keyframes flicker{0%,100%{opacity:.75}45%{opacity:.62}50%{opacity:.8}55%{opacity:.68}}

/* =========================================================
   KINETIC MARQUEE
   ========================================================= */
.marquee{position:relative;overflow:hidden;background:#fff;padding:clamp(56px,9vh,96px) 0;display:flex;flex-direction:column;gap:clamp(6px,1.5vh,14px)}
.mq-row{white-space:nowrap;will-change:transform}
.mq-row span{display:inline-block}
.mq-a{font:500 clamp(54px,11vw,150px)/1 var(--font-display);letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px var(--bronze-300)}
.mq-a span{background:linear-gradient(90deg,transparent 0 35%,var(--foil-500) 50%,transparent 65%) 0 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;background-position:var(--glint,100%) 0}
.mq-b{font:italic 400 clamp(30px,6vw,76px)/1.1 var(--font-italic);color:var(--blush-500)}

/* =========================================================
   FINALE: lights down for the curtain call, fireworks behind the names
   ========================================================= */
.closing{transition:background 1.8s var(--ease-paper);min-height:92vh;min-height:92svh;justify-content:center}
.closing .meta,.closing .btn{transition:color 1.8s,border-color 1.8s,background 1.8s}
.closing.call{background:#2F2C2C}
.closing.call::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 60% at 50% 45%,rgba(169,129,95,.28),rgba(47,44,44,0) 70%);animation:fadeUp 2s var(--ease-paper) both}
.closing.call .mono{color:var(--foil-300);text-shadow:0 0 18px rgba(214,201,164,.35)}
.closing.call .meta{color:var(--blush-300)}
.closing.call .btn.ghost{color:var(--foil-300);border-color:rgba(214,201,164,.5)}
.closing.call .btn.ghost:hover{background:rgba(255,255,255,.06)}
.closing.call .floral{opacity:0;transition:opacity 1.8s}

/* =========================================================
   THE SUITE: the printed cards tumble out of the dark and fan out
   ========================================================= */
#suite{position:relative;height:430vh;background:#2B2627}
.suite-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1700px;display:flex;align-items:center;justify-content:center}
.suite-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 46% 58% at 50% 52%,rgba(255,236,224,.2),rgba(255,236,224,.05) 55%,rgba(0,0,0,0) 75%)}
.suite-stage::after{content:"";position:absolute;left:50%;top:0;width:min(140vw,1100px);height:100%;transform:translateX(-50%);pointer-events:none;background:linear-gradient(to bottom,rgba(255,246,232,.14),rgba(255,246,232,0) 75%);clip-path:polygon(43% 0,57% 0,92% 100%,8% 100%);opacity:var(--beam,0)}
.suite-eyebrow,.suite-tip{position:absolute;left:0;right:0;text-align:center;pointer-events:none;transition:opacity .8s}
.suite-eyebrow{top:clamp(84px,13vh,120px);font:500 12px var(--font-sans);letter-spacing:.34em;text-transform:uppercase;color:var(--foil-300);opacity:var(--eyebrow,0)}
.suite-tip{bottom:clamp(40px,8vh,80px);font:italic 400 19px var(--font-italic);color:var(--blush-300);opacity:var(--tip,0)}
.suite-deck{position:relative;width:0;height:0;transform-style:preserve-3d;transition:transform .5s var(--ease-paper)}
.scard{position:absolute;left:0;top:0;padding:0;border:0;background:none;transform-style:preserve-3d;cursor:zoom-in;will-change:transform,opacity;opacity:0;-webkit-tap-highlight-color:transparent}
.scard .f,.scard .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:block}
.scard .f img{width:100%;height:100%;display:block;object-fit:cover;box-shadow:0 2px 3px rgba(0,0,0,.25),0 40px 70px -24px rgba(0,0,0,.7)}
.scard .b{transform:rotateY(180deg);background:#FBF8F5;box-shadow:inset 0 0 0 10px #FBF8F5,inset 0 0 0 11px var(--blush-300),0 40px 70px -24px rgba(0,0,0,.7)}
.scard:focus-visible{outline:2px solid var(--foil-300);outline-offset:6px}
.lightbox{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(28,22,23,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:zoom-out;animation:fadeUp .4s var(--ease-paper)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(92vw,900px);max-height:86vh;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);animation:lbIn .6s cubic-bezier(.2,.9,.3,1.15)}
@keyframes lbIn{from{transform:scale(.7) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.lb-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;width:44px;height:44px;border:1px solid rgba(214,201,164,.5);background:transparent;color:var(--foil-300);font:300 28px/1 var(--font-sans);cursor:pointer;border-radius:2px}
@media (prefers-reduced-motion:reduce){#suite{height:auto}.suite-stage{position:relative;height:100vh}}

/* finale stage: the dust canvas sits behind the lettering; names, date and buttons wait for the dust */
.finale-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.closing .mono,.closing .meta,.closing .closing-acts{position:relative;z-index:2}
.closing.call{cursor:pointer}
.closing.call .mono{transform:none!important;filter:none!important;opacity:0!important;transition:opacity 1.8s var(--ease-paper)!important}
.closing.call .meta,.closing.call .closing-acts{opacity:0!important;transform:translateY(10px)!important;transition:opacity 1.2s var(--ease-paper),transform 1.2s var(--ease-paper)!important}
.closing.call.formed .mono{opacity:1!important}
.closing.call.formed .meta{opacity:1!important;transform:none!important;transition-delay:.9s!important}
.closing.call.formed .closing-acts{opacity:1!important;transform:none!important;transition-delay:1.4s!important}

/* music button on the dark stages (the suite, the finale) */
body.dark-stage .music{background:rgba(43,38,39,.72);border-color:rgba(214,201,164,.45);color:var(--foil-300)}
body.dark-stage .music .bars i{background:var(--foil-300)}
body.dark-stage .nav{background:rgba(43,38,39,.82);border-bottom-color:rgba(214,201,164,.18)}
body.dark-stage .nav ul a{color:var(--blush-300)}
body.dark-stage .nav ul a.on,body.dark-stage .nav ul a:hover{color:var(--foil-300);border-bottom-color:rgba(214,201,164,.5)}
body.dark-stage .nav .mark{color:var(--foil-300)}
.nav{transition:transform .6s var(--ease-paper),background .5s,border-color .5s}

/* =========================================================
   INVITATION, EDITORIAL: blessing, giant names, date lockup, arched venues
   ========================================================= */
#invitation{padding:clamp(96px,13vh,140px) var(--gutter) clamp(90px,13vh,140px);min-height:auto}
#invitation .ln{opacity:0;transform:translateY(16px);filter:blur(4px);transition:opacity 1.2s var(--ease-paper),transform 1.2s var(--ease-paper),filter 1.2s var(--ease-paper);transition-delay:calc(var(--i) * 240ms + 300ms)}
#invitation.live .ln{opacity:1;transform:none;filter:none}
.hero{position:relative;z-index:2;max-width:1200px;margin:0 auto;min-height:calc(100svh - 230px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(12px,2.2vh,22px)}
.kicker{margin:0;font:600 clamp(14px,1.5vw,17px)/1.6 var(--font-sans);letter-spacing:.08em;color:var(--foil-700)}
#invitation .parents{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,40px);margin:0}
#invitation .parents>*{order:0!important;margin:0!important}
#invitation .parents>div{display:flex;flex-direction:column;gap:2px;font:400 clamp(12.5px,1.55vw,18px)/1.5 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--foil-700)}
#invitation .parents>div:first-child{text-align:right}
#invitation .parents>div:last-child{text-align:left}
.pdiv{width:7px;height:7px;background:var(--foil-500);transform:rotate(45deg);flex:none}
.we{margin:clamp(4px,2vh,18px) 0 0;font:italic 400 clamp(24px,2.8vw,32px) var(--font-italic);color:var(--foil-700)}
.bigname.mono{position:relative;display:grid;grid-template-columns:1fr;width:100%;margin:0;font-size:clamp(66px,14vw,210px);line-height:.92;isolation:isolate}
.bigname .n1{justify-self:start;padding-left:1%}
.bigname .n2{justify-self:end;padding-right:5%}
.bigname .amp-big{position:absolute;left:50%;top:50%;translate:-50% -44%;z-index:-1;pointer-events:none;font:italic 300 2.15em/1 var(--font-italic);text-transform:none;color:var(--foil-300);opacity:.55}
#names .amp-big .ch{text-shadow:none!important}
.req{margin:clamp(6px,2vh,16px) 0 0;max-width:31em;font:500 clamp(15px,1.6vw,18px)/1.7 var(--font-sans);letter-spacing:.06em;color:var(--foil-700)}

.dateband{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin:clamp(60px,11vh,120px) auto 0;gap:4px}
.d-dow{display:flex;align-items:center;gap:16px;font:italic 400 clamp(24px,3vw,36px) var(--font-italic);color:var(--ink-700)}
.d-dow::before,.d-dow::after{content:"";width:clamp(36px,8vw,90px);height:1px;background:var(--bronze-300)}
.d-lock{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.d-num{font:600 clamp(120px,22vw,300px)/.84 var(--font-display);letter-spacing:-.02em;padding:0 .02em}
.d-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left}
.d-th{font:600 clamp(11px,1.2vw,14px) var(--font-display);letter-spacing:.34em;color:var(--bronze-500)}
.d-mon{font:600 clamp(28px,4.6vw,62px)/1 var(--font-display);letter-spacing:.08em;color:var(--foil-700)}
.d-yr{font:400 clamp(22px,3.4vw,46px)/1 var(--font-display);letter-spacing:.34em;color:var(--ink-700)}

.arches{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,4vw,56px);max-width:960px;margin:clamp(60px,11vh,120px) auto 0;filter:drop-shadow(0 22px 34px rgba(62,40,40,.13))}
.arch{position:relative;background:var(--paper-offwhite);border-radius:999px 999px 4px 4px;padding:clamp(78px,10vw,118px) clamp(18px,3vw,40px) clamp(30px,4vw,46px);clip-path:inset(100% 0 0 0 round 999px 999px 4px 4px);transition:clip-path 1.7s var(--ease-unfold);transition-delay:calc(var(--d,0) * 120ms)}
.arch.in{clip-path:inset(0 0 0 0 round 999px 999px 4px 4px)}
.arch::before{content:"";position:absolute;inset:10px;border:1px solid var(--bronze-300);border-radius:999px 999px 2px 2px;pointer-events:none}
.arch::after{content:"";position:absolute;left:50%;top:26px;width:8px;height:8px;margin-left:-4px;background:var(--foil-500);transform:rotate(45deg)}
.arch-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease-paper),transform 1s var(--ease-paper);transition-delay:calc(var(--d,0) * 120ms + 700ms)}
.arch.in .arch-in{opacity:1;transform:none}
.a-k{font:600 11px var(--font-display);letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-500)}
.a-lead{font:italic 400 clamp(17px,1.8vw,20px)/1.45 var(--font-italic);color:var(--ink-700);max-width:21em}
.a-n{margin:6px 0 0;font:600 clamp(20px,2.4vw,28px)/1.25 var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--foil-700)}
.a-p{font:400 clamp(13px,1.3vw,14px)/1.6 var(--font-caps);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-700);margin-bottom:12px}
#invitation .inv-foot{position:relative;z-index:2;justify-content:center;margin:clamp(44px,8vh,80px) auto 0;padding:0;border:0}

/* the line-art vine climbs both sides */
#invitation .vine.vr,#invitation .vine.vl{position:absolute;z-index:1;height:auto;max-height:none;max-width:none;width:clamp(150px,25vw,360px);object-fit:contain;opacity:1}
#invitation .vine.vr{top:0;right:-1%;left:auto}
#invitation .vine.vl{top:46%;left:-2%;right:auto;scale:-1 1}
@media (max-width:760px){
 #invitation .vine.vr,#invitation .vine.vl{width:28vw;opacity:.3}
 #invitation .vine.vr{right:-4%}
 #invitation .vine.vl{top:58%}
 .hero{min-height:calc(100svh - 170px)}
 .bigname .n2{padding-right:2%}
 .arches{grid-template-columns:1fr;max-width:420px}
}

/* =========================================================
   EVENTS OF THE DAY: afternoon light to after-party night, pinned while the day passes
   ========================================================= */
#schedule{position:relative;height:440vh;padding:0;overflow:visible;background:#FBF3EE}
.sky-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--sky,#FBF3EE);color:var(--sky-ink,#3E3E3E);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.6vh,18px);padding:76px var(--gutter) clamp(20px,4vh,40px)}
.sky-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 55% at 50% 105%,var(--glow,rgba(255,214,170,.55)),rgba(255,214,170,0) 70%)}
.sun{position:absolute;left:var(--sx,22%);top:var(--sy,24%);width:clamp(110px,15vw,200px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:var(--sun-o,1);
 background:radial-gradient(circle,var(--sun-core,#FFF6DF) 0 34%,var(--sun-edge,#F7DDB0) 52%,rgba(247,221,176,0) 71%)}
.moon{position:absolute;right:16%;top:17%;width:clamp(34px,4vw,52px);aspect-ratio:1;border-radius:50%;pointer-events:none;box-shadow:inset -12px 5px 0 0 #F3E9DD;opacity:var(--moon-o,0);rotate:-20deg;filter:drop-shadow(0 0 14px rgba(243,233,221,.45))}
.stars{position:absolute;inset:0 0 35% 0;pointer-events:none;opacity:var(--stars-o,0)}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#FFF6E6;animation:twinkle 3s ease-in-out infinite;animation-delay:var(--dl)}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.disco{position:absolute;inset:-30%;pointer-events:none;opacity:var(--disco-o,0);
 background-image:radial-gradient(circle,rgba(255,240,210,.9) 0 1.6px,transparent 2.6px),radial-gradient(circle,rgba(243,219,219,.8) 0 1.2px,transparent 2.2px);
 background-size:86px 86px,131px 131px;background-position:0 0,40px 60px;
 -webkit-mask:radial-gradient(circle at 50% 45%,#000 0 25%,transparent 62%);mask:radial-gradient(circle at 50% 45%,#000 0 25%,transparent 62%);
 animation:discoSpin 38s linear infinite}
@keyframes discoSpin{to{rotate:360deg}}
.sky-head{position:relative;z-index:2}
.sky-head .h-section{color:var(--head,#A9815F);font-size:clamp(26px,4.4vw,50px)}
.clock{position:relative;z-index:2;display:flex;align-items:baseline;font:500 clamp(68px,14vw,190px)/1 var(--font-display);color:var(--clock,#A8935F);font-variant-numeric:tabular-nums;letter-spacing:.01em;text-shadow:0 2px 0 rgba(255,255,255,var(--clock-hl,.6))}
.clock .c-h{min-width:1.3ch;text-align:right}
.clock .c-colon{margin:0 .04em;animation:breathe 2s ease-in-out infinite}
.clock .c-ap{font-size:.22em;letter-spacing:.24em;margin-left:.3em}
.acts{position:relative;z-index:2;width:min(560px,100%);height:clamp(220px,32vh,290px)}
.act{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;will-change:transform,opacity}
.medal{width:clamp(92px,13vh,128px);aspect-ratio:1;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;
 box-shadow:0 14px 34px -12px rgba(62,40,40,.35),0 0 0 1px rgba(169,129,95,.3),0 0 0 9px rgba(255,255,255,.28),0 0 40px var(--medal-glow,rgba(255,240,210,0))}
.medal img{width:60%;height:auto;cursor:pointer}
.a-t{font:400 clamp(28px,4.2vw,46px)/1.1 var(--font-caps);letter-spacing:.06em;text-transform:uppercase;color:var(--sky-ink)}
.a-s{font:italic 400 clamp(19px,2.2vw,25px) var(--font-italic);color:var(--sky-ink)}
.a-h{margin-top:4px;font:600 12px var(--font-display);letter-spacing:.3em;color:var(--head,#A9815F)}
.rail{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);width:min(760px,96%);margin-top:clamp(4px,2vh,22px)}
.rail-line{position:absolute;left:12.5%;right:12.5%;top:8px;height:2px;background:var(--rail-bg,rgba(169,129,95,.25))}
.rail-fill{height:100%;width:var(--fill,0%);background:var(--head,#A9815F)}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;color:var(--sky-ink,#3E3E3E);font:600 11px var(--font-display);letter-spacing:.16em}
.node i{width:14px;height:14px;transform:rotate(45deg);border:2px solid var(--head,#A9815F);background:var(--sky,#FBF3EE);transition:background .4s,transform .4s}
.node.on i{background:var(--head,#A9815F)}
.node.cur i{transform:rotate(45deg) scale(1.4)}
.node span{opacity:.7;transition:opacity .4s}
.node.cur span{opacity:1}
@media (max-width:560px){.node{font-size:9.5px;letter-spacing:.08em}.sky-stage{padding-top:70px}}
@media (prefers-reduced-motion:reduce){#schedule{height:auto}.sky-stage{position:relative}}

/* the finale fills the whole screen, names at full stage size */
.closing{min-height:100vh;min-height:100svh;padding-top:clamp(70px,10vh,110px)}
.closing .mono{font-size:clamp(58px,10.5vw,150px)}
.closing .meta{font-size:clamp(14px,1.4vw,18px)}

/* =========================================================
   ATTIRE: fitting-room mirror, gentlemen from the left, ladies from the right
   ========================================================= */
#dress{position:relative;overflow:hidden;background:var(--blush-100);padding:clamp(90px,14vh,150px) var(--gutter)}
#dress .floral.tl{width:min(34vw,380px)}
#dress .floral.br{width:min(30vw,340px)}
#attire.dress{position:relative;z-index:1;max-width:1040px;flex-direction:initial;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(36px,6vw,90px);margin-top:0!important}
.mirror{position:relative;justify-self:center;width:min(440px,100%);aspect-ratio:5/6;border-radius:999px 999px 6px 6px;background:#fff;padding:18px;
 box-shadow:0 0 0 1px var(--bronze-300),0 0 0 9px #fff,0 0 0 10px var(--bronze-300),0 30px 60px -28px rgba(80,50,50,.35)}
.mirror::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(252,226,227,.7),rgba(255,255,255,0) 70%);pointer-events:none}
.mirror::after{content:"";position:absolute;left:50%;top:16px;width:9px;height:9px;margin-left:-4.5px;background:var(--foil-500);transform:rotate(45deg)}
.mirror-in{position:absolute;inset:20% 7% 9%;}
.mirror .half{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform 1.6s cubic-bezier(.2,.8,.2,1),opacity 1.2s var(--ease-paper)}
.mirror .gents{clip-path:inset(0 50.5% 0 0);transform:translateX(-36%);opacity:0}
.mirror .ladies{clip-path:inset(0 0 0 49.5%);transform:translateX(36%);opacity:0;transition-delay:.15s}
.dress.in .mirror .half{transform:none;opacity:1}
.dress-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,2vh,20px)}
.dress-copy .h-section{text-align:left}
.dress-copy .h-section.rv::after{margin-left:0}
.dress-strict{font:italic 400 clamp(38px,5vw,64px)/1.05 var(--font-italic);color:var(--ink-800)}
.dress-rows{display:flex;flex-direction:column;width:100%;max-width:380px;border-top:1px solid var(--blush-500);margin-top:4px}
.dr{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 2px;border-bottom:1px solid var(--blush-500)}
.dr-k{font:600 11px var(--font-display);letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-500)}
.dr-v{font:400 clamp(18px,2vw,22px) var(--font-caps);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-800)}
@media (max-width:760px){
 #attire.dress{grid-template-columns:1fr;gap:40px}
 .mirror{width:min(340px,86vw);order:2}
 .dress-copy{align-items:center;text-align:center}
 .dress-copy .h-section{text-align:center}
 .dress-copy .h-section.rv::after{margin-left:auto}
 .dress-rows{max-width:320px}
}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.send-err{min-height:0;text-align:center;font:italic 17px/1.5 var(--font-italic);color:var(--error)}
.send-err:empty{display:none}

/* optional-field hint inside a label */
.field>label .opt{font:italic 400 15px var(--font-italic);letter-spacing:0;text-transform:none;color:var(--ink-500);margin-left:6px}