:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
[hidden]{display:none!important}
/* Layout: a single invitation axis on hand-made paper; watercolour florals live in the margins and drift with scroll; sections alternate centred ceremony moments with split editorial spreads. */
:root{
  color-scheme: light;
  --paper:#FAF9F6;
  --paper-2:#F4F0E8;
  --ink:#3B3027;
  --ink-soft:#76675A;
  --gold:#C9A35D;
  --gold-hi:#E8D3A5;
  --gold-deep:#9C7A3C;
  --line:rgba(201,163,93,.30);
  --rose:#DE9B9C;
  --blush:#F6D1CE;
  --sky:#D2E9F9;
  --sage:#8E8A64;
  --card:rgba(255,255,255,.62);
  --f-script:"Pinyon Script","Great Vibes","Apple Chancery",cursive;
  --f-display:"Montserrat","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --f-ui:"Montserrat","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --ease:cubic-bezier(.22,.8,.22,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:#FDFAF6}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:#FDFAF6;
  color:var(--ink);
  font-family:var(--f-display);
  font-size:clamp(14px,.5vw + 12px,16px);
  line-height:1.75;font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
::selection{background:var(--blush);color:var(--gold-deep)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--f-ui);font-weight:400;font-size:.68rem;
  letter-spacing:.38em;text-transform:uppercase;color:var(--gold);
}
.script{font-family:var(--f-script);font-weight:400;line-height:1.05}
.foil{
  background:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 22%,var(--gold-hi) 40%,#F7ECD3 48%,var(--gold-hi) 56%,var(--gold) 74%,var(--gold-deep) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:foil 7s var(--ease) infinite;
}
@keyframes foil{0%,15%{background-position:100% 0}60%,100%{background-position:0 0}}
h2{font-family:var(--f-script);font-weight:400;font-size:clamp(2.8rem,5vw + 1.2rem,5.2rem);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:0}
h2 em{font-style:normal;color:var(--gold)}
.rule{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--gold)}
.rule::before,.rule::after{content:"";height:1px;width:clamp(40px,8vw,90px);background:linear-gradient(90deg,transparent,var(--line))}
.rule::after{transform:scaleX(-1)}
.rule svg{width:14px;height:14px;fill:currentColor}

.wrap{
  width:100%;max-width:1180px;margin-inline:auto;
  padding-left:var(--gutter);padding-right:var(--gutter-r);
}
section{position:relative}

/* ---------- top bar ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
.bar{
  position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:50;
  padding:14px var(--gutter-r) 14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .6s var(--ease);
}
.bar.solid{background:rgba(250,249,246,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.bar .mono{font-family:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;font-size:clamp(1.8rem,1.2vw + 1.3rem,2.3rem);line-height:1;color:var(--gold);letter-spacing:.02em;text-decoration:none}
.bar .mono i{font-family:var(--f-script);font-style:normal;font-size:1.2em;margin:0 .05em}
.bar nav{display:flex;gap:clamp(14px,2.4vw,34px);align-items:center}
.bar nav a{font-family:var(--f-ui);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);transition:color .3s}
.bar nav a:hover{color:var(--gold)}
.bar nav a.pill{color:var(--paper);background:var(--gold);padding:10px 18px;border-radius:999px;letter-spacing:.24em;transition:background .3s,transform .3s var(--ease)}
.bar nav a.pill:hover{background:var(--gold-deep);color:var(--paper);transform:translateY(-1px)}
@media (max-width:640px){.bar nav a:not(.pill){display:none}}

/* ---------- hero ---------- */
.hero{
  min-height:min(100svh,980px);
  display:grid;justify-items:center;align-items:start;text-align:center;
  padding-block:clamp(72px,8vh,96px) 70px;overflow:hidden;isolation:isolate;
}
.corner{position:absolute;width:clamp(185px,27vw,420px);z-index:-1;pointer-events:none}
.corner img{width:100%}
.c-tl{top:0;left:0}.c-tl img{transform-origin:0 0}
.c-tr{top:0;right:0}.c-tr img{transform-origin:100% 0}
.c-bl{bottom:0;left:0}.c-bl img{transform-origin:0 100%}
.c-br{bottom:0;right:0}.c-br img{transform-origin:100% 100%}
.c-ml,.c-mr{top:50%;width:clamp(86px,11vw,185px);transform:translateY(-50%)}
.c-ml{left:0}.c-ml img{transform-origin:0 50%}
.c-mr{right:0}.c-mr img{transform-origin:100% 50%}
.c-bl,.c-br{width:clamp(165px,24vw,380px)}
@media (max-width:640px){.hero{padding-top:108px;padding-bottom:185px}.c-bl,.c-br{width:140px}.c-tl,.c-tr{width:150px}.c-ml,.c-mr{width:66px;opacity:.9}}
.hero-inner{display:grid;justify-items:center;gap:clamp(10px,2vw,18px);max-width:760px}
.crest{width:clamp(250px,36vw,400px);position:relative}
.crest img{width:100%;filter:drop-shadow(0 18px 30px rgba(201,163,93,.12))}
.crest .glint{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("crest.webp") center/contain no-repeat;mask:url("crest.webp") center/contain no-repeat;
  background:linear-gradient(115deg,transparent 35%,rgba(250,240,215,.85) 50%,transparent 65%);
  background-size:300% 100%;background-position:120% 0;mix-blend-mode:screen;
  animation:glint 6s 2.4s var(--ease) infinite}
@keyframes glint{0%{background-position:120% 0}45%,100%{background-position:-60% 0}}
.bismillah{width:clamp(220px,32vw,380px);height:auto;display:block;margin-bottom:clamp(4px,1vw,12px);overflow:visible}
.hero .lede{font-style:italic;font-weight:300;color:var(--ink-soft);font-size:clamp(1.05rem,1vw + .8rem,1.3rem);margin:0}
.names{font-size:clamp(3.4rem,8.5vw,7.4rem);margin:clamp(14px,3vw,30px) 0 0;padding:.08em .15em .12em;white-space:nowrap}
.names .amp{font-size:.7em;padding:0 .12em}
@media (max-width:520px){.names{white-space:normal;line-height:1}.names .amp{display:block;font-size:.55em;padding:.05em 0}}
.date-line{display:flex;align-items:center;gap:clamp(12px,3vw,28px);font-family:var(--f-ui);font-weight:300;letter-spacing:.32em;text-transform:uppercase;font-size:clamp(.7rem,.5vw + .55rem,.86rem);color:var(--ink)}
.date-line b{font-family:var(--f-display);font-weight:300;font-size:2.6em;letter-spacing:0;color:var(--gold);line-height:1}
.date-line span{display:grid;gap:2px;text-align:center}
.date-line .sep{width:1px;height:46px;background:var(--line)}
.scroll-cue{margin-top:clamp(18px,4vh,40px);display:grid;justify-items:center;gap:10px;text-decoration:none}
.scroll-cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:-1px;top:-14px;width:3px;height:14px;border-radius:2px;background:var(--gold);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{to{top:46px}}

/* petals canvas */
#petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:110}

/* ---------- countdown ---------- */
/* countdown: painted band behind a lace doily; type scales with the doily via container units */
.count{padding-block:clamp(44px,8vw,110px);text-align:center;overflow:hidden;
  background:#CDBFA9 url("count-bg.jpg") center/cover no-repeat;display:grid;place-items:center}
.count-doily{position:relative;width:min(78%,520px);aspect-ratio:1086/742;container-type:inline-size;
  background:url("count-doily.webp") center/100% 100% no-repeat;filter:drop-shadow(0 18px 30px rgba(50,35,20,.28))}
.count-inner{position:absolute;left:13.5%;right:13.5%;top:18.5%;bottom:18.5%;display:grid;align-content:center;justify-items:center;gap:3.4cqw}
.count .eyebrow{display:block;margin:0;font-size:clamp(.5rem,2.05cqw,.78rem);letter-spacing:.12em;white-space:nowrap;color:var(--gold-deep)}
.count .ticks{margin:0;flex-wrap:nowrap;gap:6.5cqw}
.count .tick{min-width:0;gap:1.2cqw}
.count .tick .n{font-size:9.2cqw;font-weight:300}
.count .tick .l{font-size:max(.48rem,1.75cqw);letter-spacing:.18em}
.count .tick + .tick::before{left:-3.25cqw}
.ticks{display:flex;justify-content:center;gap:clamp(8px,3vw,46px);flex-wrap:wrap;margin-top:clamp(24px,4vw,40px)}
.tick{min-width:clamp(70px,16vw,150px);display:grid;gap:6px;justify-items:center}
.tick .n{font-weight:300;font-size:clamp(2.8rem,7vw,6rem);line-height:1;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);display:block;overflow:hidden;height:1.05em}
.tick .n span{display:block}
.tick .l{font-family:var(--f-ui);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft)}
.tick + .tick{position:relative}
.tick + .tick::before{content:"";position:absolute;left:calc(clamp(8px,3vw,46px) / -2);top:18%;height:46%;width:1px;background:var(--line)}



/* ---------- the evening ---------- */
.evening{padding-block:clamp(60px,9vw,130px);background:linear-gradient(rgba(255,253,250,.45),rgba(255,253,250,.45)),#EFE8DE url("landing-bg.jpg") center/cover no-repeat}
.spread{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:center}
@media (max-width:860px){.spread{grid-template-columns:1fr}}
.spread-head{position:relative}
.spread-head .big{font-size:clamp(4.6rem,11vw,9.5rem);color:var(--gold);display:block;margin:-.1em 0 -.15em -.04em;opacity:.95}
.spread-head p{color:var(--ink-soft);max-width:38ch;margin:18px 0 0;font-size:1.02em;font-weight:300}
.spread-head .sprig{position:absolute;width:clamp(90px,12vw,150px);right:4%;top:-30px;opacity:.9;pointer-events:none}
.details{display:grid;gap:0;border-top:1px solid var(--line)}
.detail{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr);position:relative;gap:clamp(14px,3vw,40px);padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.detail dt{align-self:baseline}
.detail dd{align-self:baseline}
.detail-btn{display:inline-block;margin-top:16px;font-family:var(--f-ui);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:var(--paper);background:var(--gold-deep);padding:14px 28px;border-radius:999px;box-shadow:0 12px 26px -14px rgba(118,80,15,.7);transition:transform .4s var(--ease),background .3s}
.detail-btn:hover{transform:translateY(-2px);background:var(--gold)}
.detail-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.detail dt{font-family:var(--f-ui);font-size:clamp(.82rem,.4vw + .7rem,.98rem);font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.detail dd{margin:0;min-width:0}
.detail strong{display:block;font-family:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;font-weight:400;font-size:clamp(1.5rem,1.6vw + .9rem,2.1rem);line-height:1.15}
.detail strong .tba{font-family:var(--f-ui)}
.detail small{display:block;font-family:var(--f-ui);font-weight:300;font-size:.82rem;letter-spacing:.02em;color:var(--ink-soft);margin-top:6px}
.tba{display:inline-block;font-family:var(--f-ui);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);background:rgba(216,204,151,.25);border:1px solid var(--line);padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:middle}

/* ---------- dress code ---------- */
.dress{padding-block:clamp(90px,11vw,160px);overflow:hidden;isolation:isolate;margin-block:0}
.dress::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,253,249,0) 0%,rgba(255,253,249,.2) 30%,rgba(255,253,249,.72) 58%,rgba(255,253,249,.95) 85%,rgba(255,253,249,.98) 100%),#E6DBC9 url("paper.jpg") repeat;
  background-size:auto,380px auto;background-blend-mode:normal,multiply}
.dress-head{text-align:center;display:grid;gap:14px;justify-items:center;margin-bottom:clamp(30px,5vw,60px)}
.dress-head p{margin:0;color:var(--ink-soft);max-width:52ch;font-weight:300}
.dress-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(30px,6vw,90px);align-items:center}
@media (max-width:860px){.dress-grid{grid-template-columns:1fr}}
.couple{position:relative;justify-self:center;width:min(100%,480px);isolation:isolate}
.couple img{width:100%;position:relative;z-index:1;filter:drop-shadow(0 14px 18px rgba(50,55,30,.14))}
.arch{position:absolute;inset:0 0 6%;z-index:0;border-radius:999px 999px 16px 16px;overflow:hidden;
  background:
    radial-gradient(55% 32% at 50% 16%,rgba(255,248,226,.70),rgba(255,248,226,0) 72%),
    radial-gradient(55% 45% at 90% 62%,rgba(176,193,201,.60),rgba(176,193,201,0) 70%),
    radial-gradient(40% 30% at 70% 30%,rgba(214,212,173,.55),rgba(214,212,173,0) 70%),
    linear-gradient(180deg,#CBCCAA 0%,#B2B690 42%,#959A74 100%);
  box-shadow:inset 0 0 50px rgba(70,76,40,.42),inset 0 0 6px rgba(70,76,40,.35),0 40px 60px -36px rgba(60,60,30,.55)}
.arch::after{content:"";position:absolute;inset:0;background:url("paper.jpg") 0 0/300px auto;mix-blend-mode:multiply;opacity:.85}
.arch::before{content:"";position:absolute;inset:12px;z-index:1;border-radius:999px 999px 8px 8px;border:1px solid rgba(243,227,191,.9);box-shadow:0 0 0 4px rgba(243,227,191,.12)}
.floor{position:absolute;left:22%;right:22%;bottom:4%;height:5%;z-index:1;border-radius:50%;background:radial-gradient(closest-side,rgba(40,45,20,.38),transparent);filter:blur(4px)}
.motes{position:absolute;inset:22% 33% 14% 32%;z-index:2;pointer-events:none}
.motes i{position:absolute;width:var(--s,4px);height:var(--s,4px);border-radius:50%;background:#FFF3D2;
  box-shadow:0 0 6px 2px rgba(255,236,190,.75),0 0 16px 4px rgba(243,214,150,.35);opacity:0;
  animation:mote var(--d,7s) var(--dl,0s) ease-in-out infinite}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}20%{opacity:.95}50%{opacity:.35}70%{opacity:.9}100%{opacity:0;transform:translate(var(--x,10px),-46px)}}
.palettes{display:grid;gap:clamp(28px,4vw,44px)}
.pal h3{margin:0 0 16px;display:flex;align-items:baseline;gap:14px;font-weight:400}
.pal h3 .script{font-size:clamp(2.2rem,3vw + 1rem,3rem);color:var(--gold)}
.pal h3 small{font-family:var(--f-ui);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 4px;max-width:340px}
.swatches[data-sw="ladies"]{grid-template-columns:repeat(5,minmax(0,1fr));max-width:420px}
@media (min-width:1100px),(min-width:620px) and (max-width:859px){.swatches[data-sw="ladies"]{grid-template-columns:repeat(9,minmax(0,1fr));max-width:none}}
.swatches .sw{width:100%}
.sub{display:block;font-family:var(--f-ui);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
[hidden]{display:none!important}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,48px)}
@media (max-width:520px){.pair{grid-template-columns:1fr}}
.sw{
  --c:#ccc;position:relative;display:grid;justify-items:center;align-content:start;gap:9px;width:clamp(58px,6.2vw,70px);border:0;padding:0;cursor:pointer;background:none;color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.sw .dot{position:relative;display:block;width:clamp(40px,4.2vw,50px);aspect-ratio:1;border-radius:52% 48% 50% 50%/48% 52% 48% 52%;
  background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 6px 14px -8px rgba(60,40,20,.45);
  background-image:radial-gradient(circle at 34% 30%,rgba(255,255,255,.38),rgba(255,255,255,0) 55%,rgba(0,0,0,.06));
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--c),#fff 32%),var(--c) 55%,color-mix(in srgb,var(--c),#000 8%));
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.sw:hover .dot,.sw:focus-visible .dot{transform:translateY(-3px) scale(1.06);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 0 4px rgba(255,255,255,.9),0 0 0 5px var(--line),0 12px 20px -10px rgba(60,40,20,.45)}
.sw .tip{font-family:var(--f-ui);font-size:.58rem;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);text-align:center;transition:color .3s}
.sw:hover .tip,.sw:focus-visible .tip{color:var(--gold-deep)}
.dress-note{margin-top:clamp(26px,4vw,40px);font-family:var(--f-ui);font-weight:300;font-size:.82rem;color:var(--ink-soft);letter-spacing:.02em;max-width:56ch}

/* side garlands */
.garland{position:absolute;top:0;bottom:0;width:clamp(70px,8vw,120px);pointer-events:none;z-index:0;overflow:hidden;opacity:.9}
.garland img{width:100%}
.g-l{left:0}.g-r{right:0;transform:scaleX(-1)}
@media (max-width:1100px){.garland{display:none}}

/* ---------- RSVP ---------- */
.rsvp{padding-block:clamp(60px,9vw,130px) clamp(24px,3vw,48px)}
.rsvp-card{
  position:relative;max-width:760px;margin-inline:auto;
  background:var(--card);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:clamp(18px,3vw,28px);
  padding:clamp(28px,6vw,64px) clamp(20px,6vw,72px);
  box-shadow:0 40px 80px -50px rgba(156,122,60,.35);
}
.rsvp-card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(201,163,93,.16);border-radius:calc(clamp(18px,3vw,28px) - 6px);pointer-events:none}
.rsvp-head{text-align:center;display:grid;gap:12px;justify-items:center;margin-bottom:clamp(26px,4vw,40px)}
.rsvp-head h2 .script{font-size:1.25em;color:var(--gold);display:block;line-height:.9}
.rsvp-head p{margin:0;color:var(--ink-soft);font-weight:300}
form{display:grid;gap:clamp(20px,3vw,28px);position:relative;z-index:1}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,28px)}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.field{display:grid;gap:8px;min-width:0}
.field label,.field .lab{font-family:var(--f-ui);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:8px 2px 10px;border-radius:0;outline:none;transition:border-color .3s;width:100%;
}
.field textarea{resize:vertical;min-height:84px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--ink-soft),transparent 45%)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--gold)}
.field .uline{height:1px;margin-top:-9px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.field input:focus + .uline,.field textarea:focus + .uline{transform:scaleX(1)}
.field.err input{border-bottom-color:#B5533F}
.err-msg{font-family:var(--f-ui);font-size:.75rem;color:#9E4532;min-height:0}
.choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:420px){.choice{grid-template-columns:1fr}}
.opt{position:relative;text-transform:none!important;letter-spacing:normal!important}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.opt span{
  display:grid;gap:2px;justify-items:center;text-align:center;padding:16px 12px;border:1px solid var(--line);border-radius:14px;
  transition:background .4s var(--ease),border-color .4s,color .4s,transform .4s var(--ease);
}
.opt span .script{font-family:var(--f-ui);font-style:normal;font-weight:500;font-size:clamp(.95rem,.5vw + .8rem,1.1rem);line-height:1.15;letter-spacing:.01em;color:var(--gold);transition:color .4s}
.opt span small{font-family:var(--f-ui);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);transition:color .4s}
.opt input:hover + span{transform:translateY(-2px);border-color:var(--gold)}
.opt input:checked + span{background:var(--gold);border-color:var(--gold)}
.opt input:checked + span .script,.opt input:checked + span small{color:var(--paper)}
.opt input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}
.guests{display:flex;align-items:center;gap:18px}
.step{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--gold);font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;transition:background .3s,color .3s}
.step:hover{background:var(--gold);color:var(--paper)}
.step:disabled{opacity:.35;pointer-events:none}
.gcount{font-size:2.2rem;font-weight:400;min-width:2ch;text-align:center;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.gwrap{overflow:hidden;transition:grid-template-rows .6s var(--ease),opacity .4s;display:grid;grid-template-rows:1fr}
.gwrap > div{min-height:0}
.gwrap.closed{grid-template-rows:0fr;opacity:0}
.submit{
  justify-self:center;position:relative;overflow:hidden;font-family:var(--f-ui);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--paper);background:var(--gold-deep);border:0;border-radius:999px;padding:18px 40px;cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s;box-shadow:0 14px 30px -16px rgba(156,122,60,.7)
}
.submit::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(244,238,214,.45) 50%,transparent 70%);transform:translateX(-100%);transition:transform .9s var(--ease)}
.submit:hover{transform:translateY(-2px)}
.submit:hover::before{transform:translateX(100%)}
.submit[disabled]{opacity:.6;pointer-events:none}
.form-foot{text-align:center;font-family:var(--f-ui);font-weight:300;font-size:.75rem;color:var(--ink-soft);margin:0}

/* thank-you state */
.thanks{display:grid;justify-items:center;text-align:center;gap:14px;position:relative;z-index:1}
.seal{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#E8D3A5,var(--gold) 55%,var(--gold-deep));box-shadow:0 14px 30px -12px rgba(156,122,60,.6),inset 0 -6px 12px rgba(0,0,0,.15)}
.seal span{font-family:var(--f-script);color:#FFF6DC;font-size:2.4rem;line-height:1;margin-top:6px;text-shadow:0 1px 0 rgba(0,0,0,.18)}
.thanks h3{font-family:var(--f-script);font-weight:400;font-size:clamp(2.6rem,5vw,3.6rem);color:var(--gold);margin:6px 0 0;line-height:1}
.thanks p{margin:0;color:var(--ink-soft);max-width:44ch}
.copybox{width:100%;margin-top:10px;text-align:left;font-family:var(--f-ui);font-weight:300;font-size:.85rem;white-space:pre-wrap;background:rgba(255,255,255,.7);border:1px dashed var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);user-select:all}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ghost{font-family:var(--f-ui);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);background:transparent;border:1px solid var(--line);border-radius:999px;padding:12px 20px;cursor:pointer;text-decoration:none;transition:background .3s,color .3s}
.ghost:hover{background:var(--gold);color:var(--paper);border-color:var(--gold)}

/* host panel */
.host{max-width:760px;margin:clamp(30px,5vw,48px) auto 0;border:1px solid var(--line);border-radius:20px;padding:clamp(20px,4vw,34px);background:rgba(255,255,255,.55)}
.host header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.host h3{margin:0;font-family:var(--f-script);font-weight:400;font-size:2.2rem}
.host .tot{display:flex;gap:18px;font-family:var(--f-ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.host .tot b{font-family:var(--f-ui);font-size:1.4rem;font-weight:400;color:var(--gold);letter-spacing:0;margin-right:4px}
.host ul{list-style:none;margin:0;padding:0;display:grid}
.host li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:12px 0;border-top:1px solid var(--line)}
.host li .who{font-size:1.1rem}
.host li .meta{font-family:var(--f-ui);font-size:.72rem;color:var(--ink-soft)}
.host li .msg{grid-column:1/-1;color:var(--ink-soft);font-size:.95rem}
.badge{font-family:var(--f-ui);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;padding:4px 10px;border-radius:999px;align-self:center}
.badge.yes{background:rgba(142,138,100,.18);color:#5C5A3A}
.badge.no{background:rgba(222,155,156,.22);color:#8A4A4C}
.host .empty{color:var(--ink-soft);margin:0}

/* ---------- footer ---------- */
footer{position:relative;isolation:isolate;text-align:center;padding-block:clamp(36px,5vw,80px) clamp(110px,14vw,200px);padding-left:var(--gutter);padding-right:var(--gutter-r);overflow:hidden}
footer .fc{position:absolute;bottom:0;z-index:-1;width:clamp(150px,24vw,360px);pointer-events:none}
footer .fc img{width:100%}
footer .fc-l{left:0}
footer .fc-r{right:0}
@media (max-width:640px){footer .fc{width:118px}}
footer .script{font-size:clamp(2.8rem,6vw,4.6rem);margin:0}
footer .eyebrow{display:block;margin-top:14px}
footer .tiny{font-family:var(--f-ui);font-weight:300;font-size:.7rem;color:var(--ink-soft);margin-top:26px;letter-spacing:.06em}

/* reveal helper (visible at rest; JS only animates from here) */
.split-line{display:block;overflow:hidden;padding-bottom:.08em}
.split-line > span{display:inline-block}


/* ---------- opening screen: painted backdrop, love-letter envelope ---------- */
#intro{position:fixed;inset:0;z-index:100;overflow:hidden;background:#B9AA92;color:#FFFDF8;
  display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 4vh) var(--gutter-r) calc(env(safe-area-inset-bottom,0px) + 4vh) var(--gutter);
  animation:introFail .8s 9s forwards}
@keyframes introFail{to{opacity:0;visibility:hidden}}
.ls-bg{position:absolute;inset:-3%;background:url("ls-bg.jpg") center 40%/cover no-repeat;will-change:transform}
.ls-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 42%,rgba(70,52,34,.26),rgba(70,52,34,.08) 60%,rgba(70,52,34,.22) 100%)}
.ls-stack{position:relative;display:grid;justify-items:center;text-align:center;gap:clamp(6px,1.2vh,12px);width:min(100%,760px)}
.ls-from{font-family:var(--f-ui);font-weight:400;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(.95rem,1.1vw + .55rem,1.35rem);margin:0;text-shadow:0 1px 14px rgba(60,40,20,.35)}
.ls-names{font-family:var(--f-script);font-weight:400;line-height:1;margin:0 0 clamp(14px,3.4vh,40px);
  font-size:clamp(3.1rem,7.2vw,6.4rem);white-space:nowrap;text-shadow:0 2px 22px rgba(60,40,20,.35)}
.ls-env{position:relative;display:block;width:min(86vw,640px,calc(52vh * 1.247));border:0;padding:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.ls-env img{width:100%;display:block;filter:drop-shadow(0 2px 3px rgba(50,35,20,.25)) drop-shadow(0 26px 40px rgba(50,35,20,.35));transition:transform .9s var(--ease)}
.ls-env:hover img,.ls-env:focus-visible img{transform:translateY(-6px) rotate(-.4deg)}
.ls-env:focus-visible{outline:1px solid rgba(255,253,248,.8);outline-offset:10px;border-radius:4px}
.ls-open{margin-top:clamp(20px,5vh,56px);font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(.95rem,1vw + .6rem,1.3rem);color:#FFFDF8;background:none;border:0;cursor:pointer;padding:10px 6px;position:relative;
  text-shadow:0 1px 14px rgba(60,40,20,.4)}
.ls-open::after{content:"";position:absolute;left:6px;right:6px;bottom:4px;height:1px;background:currentColor;opacity:.55;transform:scaleX(.18);transition:transform .8s var(--ease),opacity .8s}
.ls-open:hover::after,.ls-open:focus-visible::after{transform:scaleX(1);opacity:.85}
.ls-open:focus-visible{outline:none}

/* opened envelope scene: pieces placed on a 1000 x 1150 layout grid */
.ls-scene{position:absolute;left:50%;top:50%;width:min(94vw,calc(82vh / 1.15),760px);aspect-ratio:1000/1150;transform:translate(-50%,-54%);pointer-events:none;visibility:hidden}
.ls-scene > *{position:absolute;display:block;height:auto;will-change:transform}
.sc-amar{left:54%;top:22.5%;width:50%;transform-origin:72% 6%}
.sc-env_back{left:15%;top:11.65%;width:70.5%;clip-path:inset(34% 0 0 0)}
.ls-scene{perspective:2400px}
.sc-flap{left:15%;top:11.65%;width:70.5%;aspect-ratio:1683/1876;transform-origin:50% 34%;transform-style:preserve-3d}
.sc-flap img{position:absolute;inset:0;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.sc-flap .fb{transform-origin:50% 34%;transform:rotateX(180deg)}
.sc-closed{left:15%;top:34.89%;width:70.5%;aspect-ratio:1683/1238;opacity:0}
.sc-oval{left:14%;top:9.5%;width:34%;aspect-ratio:660/900}
.sc-oval video,.sc-oval img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  -webkit-mask:url("oval-mask.png") 0 0/100% 100% no-repeat;mask:url("oval-mask.png") 0 0/100% 100% no-repeat}
.sc-letter{left:33.1%;top:-2%;width:37.5%}
.sc-strip{left:60.4%;top:2.95%;width:23.3%;transform:rotate(18.7deg)}
.sc-heart{left:32.4%;top:36.6%;width:35.2%}
.sc-env_front{left:15%;top:34.52%;width:70.5%}
.sc-bunch{left:0%;top:32.5%;width:36.9%;transform-origin:60% 100%}
/* vinyl tucked in front of the envelope: disc peeks from its sleeve, spins while the music plays */
.sc-disc{left:54.6%;top:58.4%;width:28%;aspect-ratio:1;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 4px 6px rgba(20,12,6,.3))}
.sc-sleeve{left:44.5%;top:63.5%;width:39.6%;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 10px 16px rgba(50,35,20,.22));outline:none}
.sc-sleeve:focus-visible{filter:drop-shadow(0 0 2px var(--gold)) drop-shadow(0 10px 16px rgba(50,35,20,.22))}
.ls-scene .sc-shadow{left:14%;right:14%;top:84%;height:9%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 40%,rgba(60,40,20,.38) 0%,rgba(60,40,20,.24) 35%,rgba(60,40,20,.09) 65%,rgba(60,40,20,0) 100%);filter:blur(14px);mix-blend-mode:multiply}
.ls-continue{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + clamp(20px,5vh,48px));transform:translateX(-50%);visibility:hidden;opacity:0}

/* landing: the opened envelope on white */
.hero.landing{background:linear-gradient(rgba(255,253,250,.45),rgba(255,253,250,.45)),#EFE8DE url("landing-bg.jpg") center/cover no-repeat;height:auto;min-height:118vh;min-height:118svh;align-items:center;align-content:center;gap:clamp(6px,2vh,20px);padding-block:clamp(70px,9vh,96px) clamp(24px,4vh,40px)}
.count{position:relative}
.hero.landing .ls-scene{position:relative;left:auto;top:auto;transform:none;visibility:visible;width:min(94vw,calc((100svh - 150px) / 1.15),760px)}
.tap-hint{position:absolute;left:clamp(20px,5vw,80px);top:50%;transform:translateY(-50%);z-index:4;margin:0;max-width:200px;display:grid;gap:10px;justify-items:start;
  font-family:var(--f-ui);font-size:.74rem;line-height:1.7;letter-spacing:.04em;color:var(--ink-soft);text-align:left;pointer-events:none}
.tap-hint svg{width:30px;height:30px;color:var(--gold);animation:tapNudge 2.4s ease-in-out infinite}
@keyframes tapNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:1099px){.hero.landing{padding-bottom:215px!important}}
@media (max-width:1099px){.tap-hint{left:50%;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + clamp(40px,7vh,72px) + 92px);transform:translateX(-50%);max-width:none;width:max-content;max-width:calc(100% - 32px);
  grid-auto-flow:column;align-items:center;gap:10px;font-size:.66rem;line-height:1.5;text-align:left}.tap-hint svg{width:22px;height:22px}}
.landing-title{margin:0 0 clamp(4px,2vh,24px);font-weight:400;font-size:clamp(2.3rem,4.6vw,3.8rem);line-height:1.15;text-align:center;padding:.1em .3em .4em}
.hero.landing .scroll-cue{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + clamp(40px,7vh,72px));transform:translateX(-50%);z-index:4}
.hero.landing .scroll-cue{margin-top:0}
@media (max-width:640px){.hero.landing{min-height:100svh;padding-block:110px 200px}}
@media (min-width:900px){
  .hero.landing{padding-block:clamp(110px,15vh,170px) 150px}
  .hero.landing .ls-scene{width:min(62vw,calc((100svh - 120px) / 1.15),900px)}
}

/* zoomable keepsakes in the envelope */
.ls-scene .zoomable{pointer-events:auto;cursor:zoom-in;transition:scale .55s var(--ease),filter .55s var(--ease);outline:none}
.ls-scene .zoomable:hover,.ls-scene .zoomable:focus-visible{scale:1.04;filter:drop-shadow(0 18px 26px rgba(60,40,20,.28))}
.ls-scene .zoomable:focus-visible{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px var(--gold)) drop-shadow(0 18px 26px rgba(60,40,20,.28))}
#zoomLayer{position:fixed;inset:0;z-index:120;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;cursor:zoom-out}
.zoom-item{position:fixed;z-index:121;transform-origin:50% 50%;filter:drop-shadow(0 30px 50px rgba(60,40,20,.28))}
.zoom-item > img,.zoom-item > .zv{position:absolute;inset:0;width:100%;height:100%}
.zoom-item .zv img,.zoom-item .zv video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  -webkit-mask:url("oval-straight-mask.png") 0 0/100% 100% no-repeat;mask:url("oval-straight-mask.png") 0 0/100% 100% no-repeat}
.zv-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(20,16,12,.45);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:2}
.zv-play svg{width:26px;height:26px;margin-left:3px}
.zoom-close{position:absolute;top:-6px;right:-6px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#FFFFFF;color:var(--gold-deep);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px -8px rgba(60,40,20,.35);opacity:0;transform:scale(.6);transition:opacity .35s,transform .45s var(--ease),background .3s,color .3s}
.zoom-close.on{opacity:1;transform:scale(1)}
.zoom-close:hover,.zoom-close:focus-visible{background:var(--gold);color:#fff;outline:none}
.zoom-close svg{width:16px;height:16px}
@media (min-width:900px){
  .ls-from{font-size:clamp(.85rem,.7vw + .45rem,1.1rem)}
  .ls-names{font-size:clamp(2.8rem,5.2vw,4.9rem);margin-bottom:clamp(12px,2.6vh,30px)}
  .ls-env{width:min(44vw,500px,calc(44vh * 1.247))}
  .ls-open{font-size:clamp(.85rem,.6vw + .5rem,1.1rem);margin-top:clamp(16px,4vh,44px)}
}

.ls-from,.ls-open{font-size:clamp(.72rem,.6vw + .5rem,.95rem)!important;letter-spacing:.24em}
@media (max-width:520px){.ls-names{font-size:clamp(2.6rem,13vw,3.6rem)}.ls-env{width:92vw}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  #petals{display:none}
}
/* tablet & phone: envelope, hint, scroll cue and band edge spaced evenly in normal flow */
@media (max-width:1099px){
  .hero.landing{--sp:clamp(28px,5vh,44px);min-height:0;height:auto;align-content:start;gap:0;padding-bottom:var(--sp)!important}
  .hero.landing .tap-hint{position:static;transform:none;margin-top:calc(var(--sp) - 10px);width:auto;max-width:calc(100% - 32px)}
  .hero.landing .scroll-cue{position:static;transform:none;margin-top:var(--sp)}
  .hero.landing .tap-hint{bottom:auto}
  .hero.landing .scroll-cue{bottom:auto}
}