/* Ivan & Chanel — wedding site */
:root{
  --cream:#f7f0e6; --cream-2:#efe4d3; --choc:#3b2a24; --mocha:#7b5b49; --mocha-soft:#a98b76;
  --euc:#587562; --euc-dark:#45604f; --euc-pale:#e2e9df; --gold:#b8975a; --gold-soft:#d9bd86;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --script:'Pinyon Script','Snell Roundhand','Apple Chancery',cursive;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  --tear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 L0,10.8 L16,10.3 L28,7.5 L41,8.8 L49,7.3 L63,4.4 L79,4.7 L86,3.1 L92,2.2 L97,2.8 L112,3.6 L123,4.5 L132,10.6 L147,10.4 L154,7.8 L169,9.2 L178,13.4 L183,10.9 L194,13.7 L200,16.0 L208,11.0 L225,12.6 L233,8.9 L247,7.5 L258,5.2 L264,4.7 L274,2.5 L291,5.4 L306,3.0 L322,3.4 L339,2.3 L353,2.4 L359,3.2 L367,3.5 L377,8.0 L389,10.4 L396,16.0 L404,12.9 L420,10.8 L436,10.2 L442,7.7 L450,7.4 L465,8.4 L472,9.7 L480,12.6 L492,10.8 L499,4.5 L510,2.0 L519,2.5 L528,8.6 L541,9.1 L548,3.3 L564,7.9 L569,7.7 L583,7.6 L589,7.2 L605,9.3 L619,11.9 L632,17.1 L642,19.7 L654,18.6 L666,17.7 L679,20.1 L693,18.7 L705,18.5 L711,17.6 L723,18.0 L736,19.1 L752,15.1 L761,17.3 L768,19.5 L778,18.5 L791,16.1 L806,20.1 L816,18.4 L822,20.0 L837,20.4 L846,15.9 L854,13.2 L866,12.8 L882,17.6 L887,14.6 L893,15.6 L902,16.6 L908,16.2 L923,14.2 L929,16.2 L941,18.7 L958,18.1 L969,14.6 L979,17.1 L988,17.2 L999,18.4 L1008,20.2 L1015,19.7 L1021,19.0 L1037,17.7 L1053,20.3 L1063,18.1 L1077,19.4 L1090,17.6 L1107,19.1 L1122,18.6 L1137,14.8 L1147,17.3 L1158,13.2 L1164,13.9 L1173,16.4 L1180,18.3 L1195,20.3 L1200,20.3 L1200,40Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--choc) var(--paper);color:var(--choc);font:300 1rem/1.75 var(--sans);-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--euc-dark)}
h1,h2,h3,p{margin:0}
.page{max-width:640px;margin:0 auto;background:var(--cream) var(--paper);position:relative;overflow-x:clip;box-shadow:0 0 80px rgba(0,0,0,.35)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:#fff;padding:8px 14px;z-index:100}.skip:focus{top:8px}

/* ---------- type ---------- */
.label{font:500 .7rem/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--mocha)}
.h-xl{font:400 clamp(2.5rem,12vw,3.7rem)/.95 var(--serif);text-transform:uppercase;letter-spacing:.02em;color:var(--choc)}
.h-md{font:500 1.5rem/1.2 var(--serif);text-transform:uppercase;letter-spacing:.08em}
.script{font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0}
.small{font-size:.9rem}
.lead{max-width:30em}
.ph{display:inline}
html.show-ph .ph{background:rgba(184,151,90,.2);border-bottom:1px dashed var(--gold);padding:0 3px}
.on-dark .label{color:var(--gold-soft)}

/* ---------- sections, torn edges ---------- */
section{position:relative;padding:72px 28px 64px;--bg:var(--cream)}
section.mocha{--bg:var(--mocha);background:var(--mocha) var(--paper);color:#fbf3e7}
section.mocha .h-xl,section.mocha a{color:#fbf3e7}
section.pale{--bg:var(--euc-pale);background:var(--euc-pale) var(--paper)}
section.choc{--bg:var(--choc);background:var(--choc) var(--paper);color:#eadccb}
section.cream{background:var(--cream) var(--paper)}
.tear{position:absolute;left:0;right:0;top:-23px;height:24px;pointer-events:none;z-index:2;filter:drop-shadow(0 -1px 1.5px rgba(59,42,36,.22))}
.tear i{display:block;height:100%;background:var(--bg) var(--paper);-webkit-mask:var(--tear) 0 0/100% 100% no-repeat;mask:var(--tear) 0 0/100% 100% no-repeat}
.photo-tear{position:relative}
.photo-tear::before,.photo-tear::after{content:"";position:absolute;left:0;right:0;height:22px;z-index:2;background:var(--bg-above,var(--cream)) var(--paper);-webkit-mask:var(--tear) 0 0/100% 100% no-repeat;mask:var(--tear) 0 0/100% 100% no-repeat}
.photo-tear::before{top:-1px;transform:scaleY(-1)}
.photo-tear::after{bottom:-1px;background:var(--bg-below,var(--cream)) var(--paper)}
.flourish{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold);margin:20px 0}
.flourish svg{width:84px;height:24px;stroke:currentColor;fill:none;stroke-width:1}
.flourish .flip{transform:scaleX(-1)}
.flourish .dia{width:6px;height:6px;background:currentColor;transform:rotate(45deg)}
.icon{width:44px;height:44px;stroke:var(--gold);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-block;white-space:nowrap;background:var(--euc);color:#fff;border:0;border-radius:999px;padding:15px 34px;font:500 .78rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,transform .25s;min-height:48px}
.btn:hover{background:var(--euc-dark);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn.ghost{background:transparent;border:1px solid currentColor;color:inherit}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.sm{padding:12px 24px}

/* ---------- envelope intro ---------- */
.intro{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;gap:34px;background:#4a352c var(--paper);transition:opacity 1s ease .15s,visibility 0s 1.2s}
html.js .intro{display:flex}
html.skip-intro .intro,.intro.gone{display:none!important}
.intro.leaving{opacity:0;visibility:hidden;pointer-events:none}
.intro .hint{font:500 .72rem var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-soft);animation:pulse 2.4s ease-in-out infinite}
.intro.open .hint{opacity:0;animation:none;transition:opacity .3s}
.env{all:unset;cursor:pointer;display:block;width:min(86vw,380px);aspect-ratio:10/7;position:relative;perspective:1200px;filter:drop-shadow(0 22px 28px rgba(0,0,0,.4));-webkit-tap-highlight-color:transparent}
.env:focus-visible{outline:2px solid var(--gold);outline-offset:8px}
.env>*{position:absolute;inset:0}
.env .back{background:#d9c7b0}
.env .card{inset:5% 6% 4%;background:var(--cream) var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;transition:transform 1s cubic-bezier(.5,0,.2,1) .55s;z-index:1}
.env .card small{font:500 .6rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mocha)}
.env .card b{font:400 2.1rem/1 var(--script);color:var(--choc)}
.env .pocket{z-index:2;pointer-events:none}
.env .pocket::before,.env .pocket::after{content:"";position:absolute;inset:0}
.env .pocket::before{background:linear-gradient(100deg,#e6d3ba,#dac4a8);clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%)}
.env .pocket::after{background:linear-gradient(#e6d3ba,#d6c1a6);clip-path:polygon(0 100%,50% 44%,100% 100%)}
.env .env-names{inset:auto 0 11% 0;z-index:4;transition:opacity .3s;text-align:center;font:400 clamp(1.7rem,8.5vw,2.3rem)/1 var(--script);color:var(--choc);pointer-events:none}
.env .flap{z-index:3;transform-origin:50% 0;transition:transform .8s cubic-bezier(.4,0,.2,1),z-index 0s .4s;backface-visibility:visible}
.env .flap::before{content:"";position:absolute;inset:0;background:linear-gradient(#f0e1cc,#e2cfb5);clip-path:polygon(0 0,100% 0,50% 62%)}
.env .seal{inset:auto;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9bd86,#a8823f);display:grid;place-items:center;font:400 1rem var(--script);color:#fff8e6;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:opacity .3s}
.intro.open .env .flap{transform:rotateX(180deg);z-index:0}
.intro.open .env .seal,.intro.open .env .env-names{opacity:0}
.intro.open .env .card{transform:translateY(-62%) scale(1.04)}
.intro.open .env{animation:envOut .9s ease 1.5s forwards}
@keyframes envOut{to{transform:translateY(40px) scale(.96);opacity:0}}
@keyframes pulse{50%{opacity:.45}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,900px);display:flex;flex-direction:column;justify-content:flex-end;color:#fbf3e7;background:#2a1b15;overflow:hidden;padding:0 24px 56px}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%}
.hero img{object-fit:cover;object-position:50% 20%;transform:scale(1.08);transition:transform 3s cubic-bezier(.2,.6,.2,1)}
.revealed .hero img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,23,15,.25) 0,rgba(38,23,15,0) 30%,rgba(38,23,15,.15) 55%,rgba(38,23,15,.78) 100%)}
.hero-in{position:relative;z-index:1;text-align:center}
.hero .label{color:#f1e4d0;margin-bottom:10px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.names{display:block;font:400 clamp(3.2rem,17vw,5.6rem)/.9 var(--serif);text-transform:uppercase;letter-spacing:.03em;text-shadow:0 2px 24px rgba(30,16,10,.45)}
.names span{display:block}
.names .n1{text-align:left}.names .n2{text-align:right}
.names .amp{font:400 clamp(2.4rem,13vw,4rem)/.7 var(--script);color:var(--gold-soft);text-transform:none;margin:-.05em 0 -.1em;text-align:center}
.hero-date{margin-top:22px;font:400 1.15rem var(--serif);letter-spacing:.32em;text-transform:uppercase}
.hero-sub{font:500 .72rem var(--sans);letter-spacing:.34em;text-transform:uppercase;color:#f1e4d0;margin-top:2px}
.cue{display:block;margin:26px auto 0;width:1px;height:42px;background:linear-gradient(var(--gold-soft),transparent);animation:cue 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}}

/* ---------- countdown ---------- */
.count-sec{padding-top:66px;text-align:center}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);max-width:420px;margin:26px auto 0}
.countdown div{padding:4px 0;border-left:1px solid rgba(184,151,90,.7)}
.countdown div:first-child{border-left:0}
.countdown b{display:block;font:400 clamp(2.2rem,11vw,3rem)/1 var(--serif);color:var(--choc);font-variant-numeric:lining-nums tabular-nums}
.countdown small{font:500 .62rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mocha)}
.deadline-strip{margin:34px auto 26px;max-width:380px;border:1px solid var(--gold);padding:16px 18px;background:rgba(255,255,255,.4)}
.deadline-strip strong{display:block;font:400 1.5rem/1.2 var(--serif);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}

/* ---------- date & venue ---------- */
.dv h2{margin:12px 0 18px}
.dv .when{font:400 1.2rem var(--serif);letter-spacing:.1em;text-transform:uppercase;margin-top:18px}
.dv .where{font:500 .74rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mocha);margin-bottom:16px}
.collage{position:relative;height:clamp(340px,92vw,520px);margin:36px 0 10px}
.collage figure{position:absolute;margin:0;overflow:hidden;background:var(--cream-2);box-shadow:0 14px 30px rgba(59,42,36,.22)}
.collage img{width:100%;height:100%;object-fit:cover}
.collage .c1{left:0;top:0;width:60%;height:70%;z-index:1}
.collage .c1 img{object-position:50% 40%}
.collage .c2{right:0;top:12%;width:56%;height:38%;z-index:2;border:6px solid var(--cream)}
.collage .c3{right:6%;bottom:0;width:48%;height:38%;z-index:3;border:6px solid var(--cream)}
.collage .c4{left:10%;bottom:4%;width:34%;height:30%;z-index:4;border:6px solid var(--cream)}
.collage .c4 img{object-position:50% 50%}
.details-panel{display:none;margin-top:26px;padding:22px;border:1px solid rgba(184,151,90,.7);background:rgba(255,255,255,.5)}
.details-panel.open{display:block;animation:rise .5s ease}
.details-panel h3{font:500 1.1rem var(--serif);letter-spacing:.14em;text-transform:uppercase;margin:14px 0 2px;color:var(--mocha)}
.details-panel h3:first-child{margin-top:0}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

/* ---------- timeline ---------- */
.day h2{text-align:center}
.day .sub{text-align:center;margin-top:8px}
.timeline{list-style:none;margin:40px 0 0;padding:0 0 0 0;position:relative}
.timeline::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:1px;background:var(--gold)}
.timeline li{position:relative;display:flex;align-items:center;gap:20px;padding:14px 0 14px 36px}
.timeline li::before{content:"";position:absolute;left:3px;top:50%;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--cream);border:1px solid var(--gold);box-shadow:0 0 0 4px var(--cream)}
.timeline time{display:block;font:400 1.5rem/1.1 var(--serif);font-variant-numeric:lining-nums}
.timeline .t{font:500 .78rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mocha)}
.timeline p.small{margin-top:2px}
.band{margin:44px -28px -64px;height:340px;position:relative;--bg-above:var(--cream);--bg-below:var(--mocha)}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}

/* ---------- story ---------- */
.story{display:grid;gap:34px}
.story h2{margin:12px 0 18px}
.story p+p{margin-top:1em}
.story-photo{position:relative;margin:6px 8px 0 28px;transform:rotate(1.6deg)}
.story-photo img{width:100%;height:auto;border:8px solid #fffaf2;box-shadow:0 18px 34px rgba(59,42,36,.25);aspect-ratio:4/5;object-fit:cover;object-position:50% 26%}
.story-photo figcaption{position:absolute;right:-6px;bottom:-26px;font:400 1.9rem var(--script);color:var(--mocha);background:var(--cream);padding:0 12px}

/* ---------- accommodation ---------- */
.stay h2{margin:12px 0 18px;font-size:clamp(2rem,9.6vw,3.1rem)}
.stay .pics{position:relative;height:clamp(300px,78vw,430px);margin:34px 0}
.stay .pics img{position:absolute;object-fit:cover;box-shadow:0 14px 30px rgba(0,0,0,.3);border:6px solid var(--cream)}
.stay .pics .p1{left:0;top:0;width:68%;height:68%}
.stay .pics .p2{right:0;bottom:0;width:58%;height:58%}
.stay ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.stay li{display:flex;gap:14px;align-items:flex-start}
.stay li::before{content:"";flex:none;width:7px;height:7px;margin-top:.7em;background:var(--gold-soft);transform:rotate(45deg)}

/* ---------- rsvp ---------- */
.rsvp{text-align:center}
.rsvp h2{margin:12px 0 10px}
.deadline-big{margin:22px auto 8px;max-width:420px;padding:20px 16px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.deadline-big strong{display:block;font:400 clamp(1.8rem,9vw,2.4rem)/1.1 var(--serif);text-transform:uppercase;letter-spacing:.05em}
.days-left{font:500 .72rem var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--euc-dark);margin-top:6px}
form.rsvp-form{text-align:left;margin-top:34px;display:grid;gap:22px}
.guest{border:1px solid rgba(169,139,118,.55);background:rgba(255,255,255,.62);padding:22px 18px 8px;margin:0;position:relative;min-width:0}
.guest legend{font:500 .72rem var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--mocha);padding:0 8px;background:var(--cream)}
.field{margin-bottom:18px}
.field>label,.field>.q{display:block;font:500 .9rem/1.4 var(--sans);margin-bottom:6px;color:var(--choc)}
.opt{font-weight:300;color:var(--mocha)}
input[type=text],input[type=tel],textarea{width:100%;font:300 1rem var(--sans);color:var(--choc);padding:13px 14px;border:1px solid #c9b6a6;border-radius:2px;background:#fffdf9}
textarea{min-height:84px;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--euc);border-color:var(--euc)}
.pills{display:flex;gap:10px}
.pills label{flex:1;margin:0;position:relative}
.pills input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pills span{display:block;text-align:center;padding:13px 8px;border:1px solid #c9b6a6;border-radius:2px;background:#fffdf9;font-size:.95rem;transition:all .2s}
.pills input:checked+span{background:var(--euc);border-color:var(--euc);color:#fff}
.pills input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.two{display:grid;gap:12px}
@media(min-width:480px){.two{grid-template-columns:1fr 1fr}}
.when-yes[hidden]{display:none}
.err{display:none;color:#9a3b2a;font-size:.85rem;margin-top:5px}
.field.bad .err{display:block}
.field.bad input[type=text],.field.bad textarea,.field.bad .pills span{border-color:#9a3b2a}
.rm{position:absolute;right:10px;top:-14px;background:var(--cream);border:1px solid #c9b6a6;border-radius:999px;font:500 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);padding:6px 12px;cursor:pointer}
.add-guest{justify-self:start;background:none;border:1px dashed var(--mocha);color:var(--mocha);padding:13px 22px;font:500 .74rem var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border-radius:999px}
.add-guest:hover{background:rgba(123,91,73,.08)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{padding:16px 18px;border-radius:2px;font-size:.95rem;scroll-margin-top:90px}
.msg.err-box{background:#f8e9e4;border:1px solid #c47a68;color:#6e2a1d}
.msg.err-box a{color:inherit}
.thanks{text-align:center;padding:34px 22px;border:1px solid var(--gold);background:rgba(255,255,255,.65);margin-top:34px;scroll-margin-top:90px}
.thanks h3{font:400 2rem/1.1 var(--serif);text-transform:uppercase;letter-spacing:.05em;margin:6px 0 12px}
.thanks ul{list-style:none;padding:0;margin:16px 0;font-size:.95rem}
.thanks .script{font-size:2rem;line-height:1.25;color:var(--mocha)}
.form-note{font-size:.82rem;color:var(--mocha);text-align:center}

/* ---------- playlist ---------- */
.playlist{text-align:center}
.playlist .icon{margin:0 auto 6px}
.playlist h2{margin:10px 0 10px}
.song-form{margin:28px auto 0;max-width:420px;text-align:left;display:grid;gap:14px}
.song-form .btn{justify-self:center;margin-top:6px}
.song-ok{margin-top:18px;font:400 1.6rem var(--script);color:var(--euc-dark)}

/* ---------- contact ---------- */
.contact{text-align:center}
.contact h2{margin:12px 0 14px}
.contact .people{display:grid;gap:18px;margin:26px 0}
.contact .person b{display:block;font:400 1.4rem var(--serif);letter-spacing:.12em;text-transform:uppercase}
.contact .person span{font-size:.95rem}
.contact .btn{background:#fbf3e7;color:var(--mocha);letter-spacing:.16em}
.contact .btn:hover{background:#fff}

/* ---------- faq ---------- */
.faq h2{margin:12px 0 22px}
.faq details{border-bottom:1px solid rgba(169,139,118,.55)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 0;font:500 1.15rem/1.3 var(--serif);letter-spacing:.1em;text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 0 20px;max-width:34em}

/* ---------- sign-off ---------- */
.signoff{text-align:center;padding-bottom:56px}
.arch{width:min(62%,260px);aspect-ratio:3/4;margin:0 auto 34px;border-radius:999px 999px 0 0;overflow:hidden;border:1px solid var(--gold);padding:8px;background:transparent}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;border-radius:999px 999px 0 0}
.signoff .with{font:400 1.7rem var(--script);color:var(--gold-soft)}
.signoff .sign{font:400 clamp(3.2rem,16vw,5rem)/1.05 var(--script);color:#fbf3e7;margin:4px 0 8px}
.signoff .meta{font:500 .7rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft)}
.signoff .meta+.meta{margin-top:6px}
.signoff .btn{margin-top:26px}

/* ---------- floating ---------- */
.fab{position:fixed;z-index:60;right:max(16px,calc(50% - 320px + 16px));bottom:18px;width:58px;height:58px;border-radius:50%;background:var(--euc-dark);display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 0 2px var(--gold);transition:transform .25s,opacity .4s;color:#fff}
.fab:hover{transform:scale(1.07)}
.fab svg{width:30px;height:30px}
.fab.hide{opacity:0;pointer-events:none}
.rsvp-pill{position:fixed;z-index:60;left:max(16px,calc(50% - 320px + 16px));bottom:26px;background:var(--cream);color:var(--choc);text-decoration:none;font:500 .72rem var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:14px 22px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 1px var(--gold);transform:translateY(90px);opacity:0;transition:transform .5s,opacity .5s}
.rsvp-pill.show{transform:none;opacity:1}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.2,.6,.2,1) var(--d,0s)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal-img{opacity:0;transform:scale(1.05) translateY(14px);transition:opacity 1s ease var(--d,0s),transform 1.2s cubic-bezier(.2,.6,.2,1) var(--d,0s)}
html.js .reveal-img.in{opacity:1;transform:none}
.story-photo.reveal.in{transform:rotate(1.6deg)}
.story-photo.reveal{transform:translateY(22px) rotate(1.6deg)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html.js .reveal,html.js .reveal-img{opacity:1;transform:none}
}
@media (min-width:700px){body{padding:0}}

/* dress code */
.dress h2{margin:12px 0 18px}
.swatches{list-style:none;padding:0;margin:18px 0 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 16px;max-width:340px}
.swatches li{display:flex;flex-direction:column;align-items:center;gap:9px}
.swatches i{display:block;width:100%;max-width:84px;aspect-ratio:1;border-radius:50%;box-shadow:0 6px 14px rgba(59,42,36,.2)}
.swatches span{font:500 .66rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mocha);text-align:center}

/* location */
.location h2{margin:12px 0 18px}
.venue-name{all:unset;cursor:pointer;display:inline-block;font:500 1.5rem/1.2 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:var(--choc);border-bottom:1px solid var(--gold);padding-bottom:3px}
.venue-name:hover{color:var(--euc-dark)}
.venue-name:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.location address{font-style:normal;margin:12px 0 22px}
.map{border:6px solid #fffaf2;box-shadow:0 14px 30px rgba(59,42,36,.2);aspect-ratio:4/3;background:var(--cream-2)}
.map iframe{width:100%;height:100%;border:0;display:block}
.map-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.map-btns .btn.ghost{color:var(--euc-dark)}
.map-btns .btn.ghost:hover{background:rgba(88,117,98,.1)}
.nav-dialog{border:1px solid var(--gold);padding:28px 24px;background:var(--cream) var(--paper);color:var(--choc);max-width:min(92vw,380px);text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.nav-dialog::backdrop{background:rgba(38,23,15,.6)}
.nav-dialog h3{font:500 1.5rem var(--serif);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.nav-dialog .btn{display:block;margin-top:12px}
.nav-dialog .btn.ghost{color:var(--euc-dark)}
.nav-dialog .close{all:unset;cursor:pointer;display:block;margin:18px auto 0;font:500 .72rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mocha);padding:8px}

/* accommodation price */
.price{margin:26px 0 4px;font:400 1.1rem/1.5 var(--serif);letter-spacing:.05em}
.price strong{font:400 2.4rem/1 var(--serif);display:block;color:#fbf3e7}
.price span{font:500 .72rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.stay ul{margin-top:22px}

/* RSVP: sleepover + cost */
select{width:100%;font:300 1rem var(--sans);color:var(--choc);padding:13px 14px;border:1px solid #c9b6a6;border-radius:2px;background:#fffdf9}
select:focus{outline:2px solid var(--euc);border-color:var(--euc)}
.field.bad select{border-color:#9a3b2a}
.cost{margin:4px 0 14px;padding:16px;border:1px solid var(--gold);background:rgba(255,255,255,.7);text-align:center}
.cost p{margin:0}
.cost-line{font-size:.95rem;color:var(--mocha)}
.cost-total{font:400 2.4rem/1.2 var(--serif);color:var(--choc)}
.cost-sub{font-size:.85rem;color:var(--mocha)}
.pay-card{margin:22px 0;padding:22px 18px;border:1px solid var(--gold);background:#fffdf9;text-align:left}
.pay-card .label{margin-top:12px}
.pay-card .label:first-child{margin-top:0}
.pay-amount{font:400 2.6rem/1.1 var(--serif);color:var(--choc)}
.pay-by{margin:4px 0 16px}

/* bank details */
.bank{margin:22px 0 8px;border-top:1px solid rgba(184,151,90,.7)}
.bank-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(184,151,90,.45)}
.bank-row .k{flex:0 0 34%;font:500 .66rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mocha)}
.bank-row .v{flex:1;min-width:0;overflow-wrap:anywhere}
.copy{flex:none;background:var(--euc);color:#fff;border:0;border-radius:999px;padding:9px 14px;font:500 .66rem var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;min-height:40px}
.copy:hover{background:var(--euc-dark)}
.ref{margin-top:10px;font:400 1.15rem var(--serif);font-style:italic;color:var(--mocha)}
.gifts{text-align:center}
.gifts h2{margin:12px 0 18px}
.gifts .lead{margin:0 auto}
.gifts .bank{text-align:left;max-width:420px;margin:28px auto 8px}

/* ===== Batch 1: easier to read + centred (same fonts, same look) ===== */
body{font-weight:400;font-size:1.1rem;line-height:1.8}
.label{font-size:.88rem;letter-spacing:.24em;color:#654636}
.h-xl{font-weight:600}
section{text-align:center}
.lead{margin-left:auto;margin-right:auto;font-size:1.15rem}
.timeline,.faq details,.rsvp-form,.guest,.bank,.song-form,.thanks .pay-card,.stay ul{text-align:left}
.stay ul{display:inline-grid;max-width:30em}
.faq details{max-width:34em;margin-left:auto;margin-right:auto}
.faq summary{font-size:1.3rem}
.flourish{justify-content:center!important}

/* hero */
.hero{text-align:center}
.hero-tag{font:italic 500 clamp(1.9rem,8.6vw,2.5rem)/1.15 var(--serif);letter-spacing:.04em;color:#fff;margin-bottom:12px;text-shadow:0 2px 16px rgba(30,16,10,.75)}
.hero-date{margin-top:24px;font:500 clamp(1.5rem,6.8vw,2rem)/1.2 var(--serif);letter-spacing:.14em;text-shadow:0 2px 14px rgba(30,16,10,.6)}
.venue-trigger{all:unset;cursor:pointer;-webkit-tap-highlight-color:transparent}
.venue-trigger:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.hero-sub{display:inline-block;margin-top:14px;font:500 1rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(220,194,142,.85);padding-bottom:5px;text-shadow:0 1px 10px rgba(30,16,10,.6)}

/* countdown */
.count-title{font:italic 500 clamp(1.6rem,7.2vw,2.1rem)/1.2 var(--serif);letter-spacing:.03em;color:#654636}
.countdown small{font-size:.76rem;color:#654636}
.deadline-strip strong{font-size:clamp(1.5rem,7vw,1.9rem)}

/* date & venue */
.dv{text-align:center}
.dv .when{font:400 1rem/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#654636;margin-top:22px}
.dv .when strong{display:block;font:500 clamp(2rem,9.4vw,2.6rem)/1.2 var(--serif);letter-spacing:.05em;color:var(--choc);margin-top:8px}
.dv .where{display:inline-block;font:500 clamp(1.4rem,6.4vw,1.8rem)/1.3 var(--serif);letter-spacing:.07em;text-transform:uppercase;color:var(--choc);border-bottom:1px solid var(--gold);padding-bottom:5px;margin:0}
.dv .where:hover{color:var(--euc-dark)}
.dv .tap{margin:12px 0 26px;font:500 .82rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#654636}

/* dress code */
.dress .label,.dress p{text-align:center}
.swatches{margin-left:auto;margin-right:auto;justify-items:center}
.swatches span{font-size:.76rem;color:#654636}

.hero .names .amp{font-size:clamp(3rem,15vw,4.6rem);line-height:.6;margin:.05em 0}

/* ===== Batch 2: bigger envelope, equal palette circles, booking form ===== */
.intro{overflow:hidden;gap:36px}
.env{--w:min(128vw,600px);width:var(--w);aspect-ratio:10/8.6;font-size:calc(var(--w) / 22)}
.env .card small{font-size:.64em}
.env .card b{font-size:2.3em}
.env .env-names{font-size:2.3em}
.env .seal{width:3.1em;height:3.1em;margin:-1.55em 0 0 -1.55em;font-size:1.15em}
.intro .hint{all:unset;box-sizing:border-box;cursor:pointer;font:500 1.05rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#2e1e17;background:var(--gold-soft);padding:22px 52px;border-radius:999px;min-height:64px;box-shadow:0 10px 26px rgba(0,0,0,.4);animation:pulse 2.4s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.intro .hint:focus-visible{outline:2px solid #fff;outline-offset:4px}
.intro.open .hint{opacity:0;animation:none;pointer-events:none}

.swatches{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px;max-width:330px;margin:22px auto 0;justify-items:center}
.swatches li{width:100%;gap:11px}
.swatches i{width:76px;height:76px;max-width:none;aspect-ratio:auto;flex:none}
.swatches span{letter-spacing:.1em;line-height:1.3;display:block}

.book-card{max-width:460px;margin:34px auto 0;padding:28px 20px 12px;background:var(--cream);color:var(--choc);border:1px solid var(--gold);text-align:left;animation:rise .5s ease}
.book-card h3{font:600 1.8rem/1.2 var(--serif);letter-spacing:.05em;text-transform:uppercase;text-align:center;margin-bottom:10px}
.book-card>.small{text-align:center;color:#654636;margin-bottom:22px}
.book-thanks{max-width:460px;margin:34px auto 0;color:var(--choc);background:var(--cream)}
.book-thanks .btn.ghost{color:var(--mocha)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

/* ===== Batch 3: brown buttons, date block, venue photo, numbers ===== */
:root{--euc:#4a3228;--euc-dark:#3b2a24}                 /* buttons and accents: chocolate brown, like the text */
body{font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}   /* numbers as tall as the capitals */
section.sand{--bg:#efe4d3;background:#efe4d3 var(--paper)}
section.mocha .btn:not(.ghost),section.choc .btn:not(.ghost){background:#f7f0e6;color:var(--choc)}
section.mocha .btn:not(.ghost):hover,section.choc .btn:not(.ghost):hover{background:#fff}
section.mocha .book-card .btn,section.mocha .thanks .btn:not(.ghost){background:var(--euc);color:#fff}
section.mocha .book-card .btn:hover{background:var(--euc-dark)}
.dv .when{display:block;margin-top:26px;color:var(--choc)}
.dv .when .dow{display:block;font:500 clamp(1.7rem,7.8vw,2.2rem)/1.2 var(--serif);letter-spacing:.3em;margin-right:-.3em;text-transform:uppercase;color:var(--choc)}
.dv .when strong{display:block;white-space:nowrap;font:600 clamp(1.9rem,8.3vw,2.7rem)/1.15 var(--serif);letter-spacing:.02em;color:var(--choc);margin-top:8px}
.dv .where{margin-top:30px}
.venue-photo{margin:38px auto 0;max-width:560px;border:8px solid #fffaf2;box-shadow:0 16px 34px rgba(59,42,36,.22)}
.venue-photo img{width:100%;height:auto;display:block}
.faq summary{font-size:1.35rem}

*{font-variant-numeric:lining-nums!important;font-feature-settings:'lnum' 1!important}   /* all numbers lining, so 12 and 2027 match FEBRUARY */
section.choc .h-xl,section.choc a:not(.btn){color:#fbf3e7}
.gifts .h-xl{font-size:clamp(1.8rem,8.2vw,2.7rem);letter-spacing:.03em}

/* ===== Batch 5: approved parts of batch 4 + logo + photo crops ===== */
.names .n1,.names .n2{text-align:center}
.names{line-height:.98}
.names .amp{margin:.1em 0 .02em;font-size:clamp(2.8rem,14vw,4.4rem);line-height:.7}
.timeline{width:fit-content;max-width:100%;margin:36px auto 0}
.day .lead{margin-bottom:0}
.gifts{padding-bottom:96px}

/* I&C monogram, a soft watermark at the top left of the first page */
.hero .logo{position:absolute;left:18px;top:18px;z-index:2;width:62px;height:62px;border-radius:50%;border:1px solid rgba(248,232,200,.8);display:grid;place-items:center;color:#f8e8c8;opacity:.9;pointer-events:none;text-shadow:0 1px 8px rgba(30,16,10,.5)}
.hero .logo::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(248,232,200,.35)}
.hero .logo span{font:500 1.18rem/1 var(--serif);letter-spacing:.02em}
.hero .logo i{font:400 1.45rem/1 var(--script);font-style:normal;color:#f1d9a0;margin:0 2px;-webkit-text-stroke:.5px #f1d9a0}

/* three photos of the couple: tall frames, faces kept in view */
.collage{height:clamp(470px,128vw,640px)}
.collage .c1{left:0;top:0;width:58%;height:60%}
.collage .c1 img{object-position:50% 45%}
.collage .c2{right:0;top:6%;width:46%;height:44%}
.collage .c2 img{object-position:50% 4%}
.collage .c3{right:12%;bottom:0;width:50%;height:46%}
.collage .c3 img{object-position:50% 6%}

/* ===== Batch 6: soft stone base with alternating browns (Mix B) ===== */
:root{--paper:none;--cream:#f2e9df;--mocha:#7b5b49;--choc:#3b2a24}
.page{background:var(--cream)}
section.cream{--bg:#f2e9df;background:#f2e9df}
section.mocha{--bg:#7b5b49;background:#7b5b49}
section.choc{--bg:#3b2a24;background:#3b2a24}
.count-sec{background:#f2e9df;--bg:#f2e9df}
.band{--bg-above:#f2e9df;--bg-below:#f2e9df}
.photo-tear::before,.photo-tear::after{background-color:#f2e9df}
.tear i{background-image:none}
/* text on the brown sections */
section.mocha,section.choc{color:#fbf3e7}
section.mocha .h-xl,section.choc .h-xl{color:#fbf3e7}
section.mocha .label,section.choc .label,section.mocha .opt,section.choc .opt{color:#dcc28e}
section.mocha .lead,section.mocha p,section.mocha address,section.choc .lead,section.choc p,section.choc address{color:#fbf3e7}
section.mocha .field>label,section.choc .field>label{color:#fbf3e7}
section.mocha .btn:not(.ghost),section.choc .btn:not(.ghost){background:#f4ead9;color:#3b2a24}
section.mocha .btn:not(.ghost):hover,section.choc .btn:not(.ghost):hover{background:#fff}
section.choc .book-card .btn,section.choc .thanks .btn:not(.ghost),section.choc .book-card .btn:hover{background:#4a3228;color:#fff}
section.choc .book-card p,section.choc .thanks p,section.choc .book-card .field>label,section.choc .book-card h3{color:#3b2a24}
section.choc .book-card .opt{color:#654636}
section.choc .thanks .btn.ghost{color:#654636}
.song-ok{color:#f4ead9}
.playlist .icon{stroke:#dcc28e}
.playlist .msg.err-box{color:#6e2a1d}

/* ===== Batch 6b: RSVP contact fields + Contribution/bank details in the page's own font ===== */
input[type=email]{width:100%;font:300 1rem var(--sans);color:var(--choc);padding:13px 14px;border:1px solid #c9b6a6;border-radius:2px;background:#fffdf9}
input[type=email]:focus{outline:2px solid var(--euc);border-color:var(--euc)}
.field.bad input[type=email],.field.bad input[type=tel]{border-color:#9a3b2a}
.name-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:.88rem;color:#654636;margin:6px 0 0}
.bank{max-width:420px;margin:30px auto 8px;border:0;text-align:center}
.bank-row{display:block;padding:20px 0;border-bottom:1px solid rgba(184,151,90,.6);text-align:center}
.bank-row:first-child{border-top:1px solid rgba(184,151,90,.6)}
.bank-row .k{display:block;flex:none;font:500 .8rem/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#654636;margin-bottom:8px}
.bank-row .v{display:block;font:500 1.7rem/1.2 var(--serif);letter-spacing:.03em;color:var(--choc);overflow-wrap:anywhere}
.bank-row .v.ph{font-size:1.4rem}
.bank-row .copy{margin-top:14px}
.pay-card .bank{margin-top:18px}
.pay-card .bank-row{text-align:center}
.pay-card .ref-row .v{font-size:1.5rem}

/* ===== Batch 7: one-off fixes ===== */
:root{--sand:#e6d9c7}
section.sand{--bg:#e6d9c7;background:#e6d9c7}
/* Location: light, with dark readable text and two matching buttons */
.location .h-xl,.location .venue-name,.location address{color:#3b2a24}
.location .label{color:#654636}
.location .venue-name{border-bottom-color:#b8975a}
.location .map{border-color:#fffaf2}
.map-btns .btn,.map-btns .btn.ghost{background:#4a3228;color:#fff;border:0}
.map-btns .btn:hover{background:#3b2a24}
/* Accommodation is the lighter mocha: make sure the booking card and payment card stay readable on it */
section.mocha .book-card,section.mocha .thanks{color:#3b2a24}
section.mocha .book-card p,section.mocha .book-card h3,section.mocha .book-card label,section.mocha .thanks p,section.mocha .thanks h3,section.mocha .thanks li,section.mocha .thanks strong{color:#3b2a24}
section.mocha .book-card .label,section.mocha .thanks .label,section.mocha .book-card .opt,section.mocha .thanks .small{color:#654636}
section.mocha .thanks .script{color:#654636}
section.mocha .book-card .btn,section.mocha .book-card .btn:hover,section.mocha .thanks .btn:not(.ghost){background:#4a3228;color:#fff}
section.mocha .thanks .btn.ghost,section.mocha .book-thanks .btn.ghost{color:#654636;border-color:#654636}
section.mocha .bank-row .v,section.mocha .pay-amount{color:#3b2a24}
/* photo under the timeline: tall enough to keep the whole head in */
.band{height:auto;aspect-ratio:4/5;margin-bottom:-76px}
.band img{object-position:50% 12%}
/* three photos after the dress code: each frame has the photo's own proportions, so nothing is cropped */
.collage{height:clamp(500px,140vw,720px)}
.collage figure{height:auto}
.collage .c1{left:0;top:0;width:58%;aspect-ratio:1480/2000}
.collage .c2{right:0;top:7%;width:46%;aspect-ratio:1333/2000}
.collage .c3{right:12%;bottom:0;width:50%;aspect-ratio:1500/2000}
.collage .c1 img,.collage .c2 img,.collage .c3 img{object-position:50% 50%}
/* every input the same size, including email and the dropdown */
input[type=text],input[type=tel],input[type=email],textarea,select{-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:56px;font:400 1.05rem/1.3 var(--sans);color:#3b2a24;padding:15px 16px;border:1px solid #c4ae9e;border-radius:3px;background:#fffdf9}
textarea{min-height:96px}
select{background-image:linear-gradient(45deg,transparent 50%,#7b5b49 50%),linear-gradient(135deg,#7b5b49 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
input::placeholder,textarea::placeholder{color:#8a7466;opacity:1}

/* ===== Batch 8: the lighter brown alternates with the light pages ===== */
.photo-tear::before{background:var(--bg-above,#7b5b49)}
.photo-tear::after{background:var(--bg-below,#f2e9df)}
/* Date & Venue on mocha */
.dv.mocha .when,.dv.mocha .when .dow,.dv.mocha .when strong,.dv.mocha .where,.dv.mocha .where:hover{color:#fbf3e7}
.dv.mocha .where{border-bottom-color:#dcc28e}
.dv.mocha .tap{color:#dcc28e}
.dv.mocha .venue-photo{border-color:#f4ead9}
/* Wedding Day on mocha */
.day.mocha .sub,.day.mocha .timeline time{color:#fbf3e7}
.day.mocha .timeline .t{color:#dcc28e}
.day.mocha .timeline li::before{background:#7b5b49;box-shadow:0 0 0 4px #7b5b49}
.day.mocha .flourish{color:#dcc28e}

/* ===== Batch 9: envelope in the style of the reference (caramel paper, cream wax seal, blossom sprigs) ===== */
.intro{background:radial-gradient(ellipse at 50% 36%,#fbf4e8 0,#f0e4d2 62%,#e6d6bf 100%);gap:30px;overflow:hidden}
.invite-title{font:400 clamp(2.5rem,11vw,3.3rem)/1 var(--script);color:#5a3a2a;text-align:center;margin-bottom:-4px}
.invite-title small{display:block;margin-top:10px;font:500 .78rem var(--sans);letter-spacing:.32em;text-transform:uppercase;color:#7b5b49}
.env{width:min(94vw,540px);aspect-ratio:10/7.4;font-size:calc(min(94vw,540px) / 22);filter:drop-shadow(0 26px 26px rgba(70,40,22,.38)) drop-shadow(0 4px 6px rgba(70,40,22,.25))}
.env .back{background:#7f5036;border-radius:3px}
.env .card{inset:6% 7% 5%;background:#fbf5ea;border:1px solid rgba(184,151,90,.7);outline:1px solid rgba(184,151,90,.35);outline-offset:-9px;box-shadow:0 2px 8px rgba(60,35,20,.25)}
.env .card small{font-size:.62em;color:#7b5b49}
.env .card b{font-size:2.5em;color:#3b2a24}
.env .pocket::before{background:linear-gradient(100deg,#b57a53,#a46a46);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);border-radius:3px}
.env .pocket::after{background:linear-gradient(#b9805a,#a2693f);clip-path:polygon(0 100%,50% 46%,100% 100%)}
.env .flap::before{background:linear-gradient(#c28a60,#ac734d);clip-path:polygon(0 0,100% 0,50% 64%)}
.env .pocket::before,.env .pocket::after,.env .flap::before{background-blend-mode:soft-light}
.env .flap::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 64%);background:repeating-linear-gradient(112deg,rgba(255,235,210,.10) 0 2px,transparent 2px 7px)}
.env .seal{inset:auto;left:50%;top:55%;width:4.4em;height:4.2em;margin:-2.1em 0 0 -2.2em;border-radius:54% 46% 52% 48%/48% 54% 46% 52%;background:radial-gradient(circle at 35% 28%,#fffaf0,#efe3c9 58%,#d9c8a4);box-shadow:0 .25em .6em rgba(60,35,20,.45),inset 0 .12em .2em rgba(255,255,255,.8),inset 0 -.15em .25em rgba(150,120,70,.35);color:#a85537;font:400 1.5em/1 var(--script);z-index:5;display:grid;place-items:center;transition:opacity .3s}
.env .seal::before{content:"";position:absolute;inset:.42em;border-radius:50%;border:1px solid rgba(168,85,55,.35)}
.env .flora{position:absolute;inset:auto;z-index:6;width:46%;height:auto;pointer-events:none;transition:opacity .3s;filter:drop-shadow(0 .15em .2em rgba(60,35,20,.3))}
.env .fl-l{left:-5%;bottom:-6%;transform:rotate(-4deg)}
.env .fl-r{right:-5%;bottom:-8%;width:38%;transform:scaleX(-1) rotate(-8deg)}
.env .env-names{display:none}
.intro.open .env .flora,.intro.open .env .seal{opacity:0}
.intro .hint{background:#4a3228;color:#f7efe2;box-shadow:0 10px 24px rgba(70,40,22,.4);animation:pulse 2.4s ease-in-out infinite}
.intro .hint:focus-visible{outline:2px solid #b8975a}
.intro.open .invite-title{opacity:0;transition:opacity .4s}

.intro .hint{animation:hintglow 2.6s ease-in-out infinite;opacity:1}
@keyframes hintglow{50%{box-shadow:0 10px 24px rgba(70,40,22,.4),0 0 0 10px rgba(74,50,40,.12)}}

/* ===== Batch 10: realistic brown paper envelope, no flowers ===== */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .13 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");--fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .08 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='400' height='300' filter='url(%23f)'/%3E%3C/svg%3E")}
.intro{background:radial-gradient(ellipse at 50% 34%,#fbf4e8 0,#f0e4d2 60%,#e3d3bb 100%)}
.env{filter:drop-shadow(0 30px 24px rgba(55,30,15,.38)) drop-shadow(0 6px 5px rgba(55,30,15,.28))}
.env .back{background:var(--grain),var(--fibre),linear-gradient(160deg,#9a6a4a,#7a4f35);background-blend-mode:multiply,multiply,normal;border-radius:2px;box-shadow:inset 0 -2em 3em rgba(40,20,8,.25)}
.env .card{inset:7% 8% 6%;background:var(--grain),#fbf6ec;background-blend-mode:multiply;border:0;outline:0;box-shadow:0 1px 3px rgba(40,20,8,.45)}
.env .pocket::before{background:var(--grain),var(--fibre),linear-gradient(100deg,#a9774f,#94623d);background-blend-mode:multiply,multiply,normal;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%)}
.env .pocket::after{background:var(--grain),var(--fibre),linear-gradient(#b0805a,#8d5c38);background-blend-mode:multiply,multiply,normal;clip-path:polygon(0 100%,50% 47%,100% 100%)}
.env .flap::before{background:var(--grain),var(--fibre),linear-gradient(#b98760,#a2714a 70%,#92623e);background-blend-mode:multiply,multiply,normal;clip-path:polygon(0 0,100% 0,50% 65%)}
.env .flap::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(-1% 0,101% 0,50% 71%);background:rgba(35,16,6,.5);filter:blur(7px);transform:translateY(1.2%)}
.env .seal{background:radial-gradient(circle at 36% 30%,#fffdf6 0,#f3e9d2 45%,#d8c6a0 100%);box-shadow:0 .35em .7em rgba(35,16,6,.55),0 .08em .15em rgba(35,16,6,.5),inset 0 .14em .22em rgba(255,255,255,.9),inset 0 -.2em .3em rgba(140,110,60,.4);color:#8a4a2c;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.env .seal::before{inset:.5em;border:1px solid rgba(140,100,60,.45)}
.env .seal::after{content:"";position:absolute;left:18%;top:14%;width:30%;height:18%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(2px);transform:rotate(-30deg)}

/* paper, not wood: soft fine grain only */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .08 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");--fibre:linear-gradient(transparent,transparent)}
.env .card{background:#fcf7ee;background-blend-mode:normal}
.intro.open .env .flap::after{opacity:0}

/* ===== Batch 11: chocolate felt envelope with rounded flap (replicates the reference) ===== */
.intro{background:radial-gradient(ellipse at 50% 40%,#faf7f2 0,#efe9e1 65%,#e4dcd0 100%);gap:34px}
.env{width:min(94vw,540px);aspect-ratio:10/7.4;font-size:calc(min(94vw,540px) / 22);filter:drop-shadow(0 28px 22px rgba(30,15,8,.33)) drop-shadow(0 6px 5px rgba(30,15,8,.22));perspective:1400px}
.env>svg,.env .flap svg{display:block;width:100%;height:100%;overflow:visible}
.env .back{background:linear-gradient(#3b261e,#2f1d16);border-radius:3px}
.env .pocket::before,.env .pocket::after,.env .flap::before,.env .flap::after{content:none!important}
.env .pocket{z-index:2}
.env .card{inset:9% 7% 8%;background:#efe6d6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;z-index:1;box-shadow:0 1px 4px rgba(0,0,0,.4);border:0;outline:0;transition:transform 1.05s cubic-bezier(.5,0,.2,1) .55s}
.env .card b{font:400 2.5em/1.1 var(--script);color:#2c1d16}
.env .card small{font:500 .7em var(--sans);letter-spacing:.34em;color:#6a5446;text-transform:uppercase}
.env .flap{inset:0;z-index:3;transform-origin:50% 0;transition:transform .9s cubic-bezier(.4,0,.2,1),z-index 0s .45s;background:none}
.env .flap .fn{position:absolute;left:0;right:0;top:15%;text-align:center;font:400 2.7em/1 var(--script);color:#f4ead8;transition:opacity .25s;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.env .seal,.env .env-names,.env .flora{display:none}
.intro.open .env .flap{transform:rotateX(180deg);z-index:0}
.intro.open .env .flap .fn{opacity:0}
.intro.open .env .card{transform:translateY(-40%)}
.intro .hint{background:#3b261e;color:#f7efe2}

.env .back{background:#2b1913}

/* ===== Batch 12: softer, more realistic envelope + works on every screen ===== */
.env{width:min(94vw,540px,calc((100vh - 200px) * 1.3));width:min(94vw,540px,calc((100svh - 200px) * 1.3));font-size:calc(var(--ew) / 22);--ew:min(94vw,540px,calc((100vh - 200px) * 1.3))}
@supports (height:100svh){.env{--ew:min(94vw,540px,calc((100svh - 200px) * 1.3))}}
.env .back{background:linear-gradient(#34201a,#2a1812)}
/* paper sheen: a soft light from the top left across the whole envelope */
.env::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:3px;background:linear-gradient(125deg,rgba(255,235,215,.13) 0,rgba(255,235,215,0) 38%,rgba(0,0,0,.14) 100%)}
.intro.open .env::after{opacity:0}
.env .card{background:linear-gradient(#f1e9da,#e8ddca)}
/* older phones / browsers */
.page{overflow-x:hidden;overflow-x:clip}
.hero{min-height:100vh;min-height:min(100svh,940px)}
@media (max-width:420px){.hero{min-height:100vh;min-height:100svh}}
.fab{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.rsvp-pill{bottom:calc(26px + env(safe-area-inset-bottom,0px))}
.fab,.rsvp-pill{max-width:calc(100vw - 32px)}
input,select,textarea{font-size:max(16px,1rem)}   /* stops iPhones zooming into the form */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
/* short screens (phones on their side) */
@media (max-height:520px){
  .intro{gap:14px;padding:10px}
  .intro .hint{padding:14px 36px;min-height:48px;font-size:.9rem}
  .hero{min-height:560px}
}
/* tablets and laptops: a little more breathing room, still one tidy column */
@media (min-width:768px){
  .page{max-width:720px}
  body{font-size:1.15rem}
  section{padding-left:48px;padding-right:48px}
  .h-xl{font-size:clamp(3rem,5.2vw,4rem)}
  .collage{height:760px}
  .hero{min-height:min(100vh,980px)}
}
@media (min-width:1100px){
  .page{max-width:760px}
}


/* invoice download */
.pay-card .keep{margin:18px 0 10px;text-align:center;color:#654636}
.pay-card .btn.dl,.pay-card .btn.dl:hover{display:block;margin:0 auto 6px;background:#4a3228;color:#fff}
.pay-card .btn.dl{display:block;box-sizing:border-box;width:100%;max-width:100%;padding:18px 14px;white-space:normal;text-align:center;letter-spacing:.16em;font-size:.82rem}