/* ===========================================================
   A & Z — Wedding Site
   Palette: sage #848b79 · black · white · gold
   =========================================================== */
:root{
  --sage:#848b79;
  --sage-deep:#4a5043;
  --sage-dark:#2f342b;
  --sage-soft:#c9cdc1;
  --sage-mist:#eef0ea;
  --grey:#d9dbd6;
  --ivory:#fbfaf6;
  --gold:#c9a77a;
  --gold-light:#e6cfa8;
  --gold-deep:#a98550;
  --ink:#16181a;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', system-ui, sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ivory);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-locked{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:none;border:0;background:none;color:inherit}

/* Hide native cursor only on devices with a real pointer */
@media (hover:hover) and (pointer:fine){
  html.has-cursor, html.has-cursor *{cursor:none !important}
}

/* ---------------- Cursor ---------------- */
#cursor{
  position:fixed;left:0;top:0;width:46px;height:46px;z-index:99999;pointer-events:none;
  color:#fff;opacity:0;transform:translate3d(-100px,-100px,0);
  transition:opacity .3s, color .35s;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.35));
  will-change:transform;
}
#cursor svg{width:100%;height:100%;transform-origin:50% 90%;transition:transform .45s var(--ease)}
#cursor.is-hover svg{transform:scale(1.35) rotate(-8deg)}
#cursor.is-down svg{transform:scale(.85)}
#cursor.on-light{color:var(--sage-deep);filter:drop-shadow(0 0 2px rgba(255,255,255,.7))}
.petal{
  position:fixed;z-index:99998;pointer-events:none;width:7px;height:10px;border-radius:70% 0 70% 0;
  border:1px solid rgba(255,255,255,.85);opacity:.9;
  animation:petalFall 1.1s ease-out forwards;
}
.petal.on-light{border-color:var(--gold)}
@keyframes petalFall{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.4)}}
@media (hover:none),(pointer:coarse){#cursor,.petal{display:none}}

#leaves{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* ---------------- Intro ---------------- */
#intro{
  position:fixed;inset:0;z-index:1000;overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%, #6b7260 0%, var(--sage-deep) 55%, var(--sage-dark) 100%);
  transition:opacity 1.2s ease, visibility 1.2s;
}
#intro.is-done{opacity:0;visibility:hidden;pointer-events:none}
.intro-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.45) 100%);pointer-events:none}
.grain{
  position:absolute;inset:-50%;opacity:.12;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

.gold-dust{position:absolute;inset:0;pointer-events:none}
.gold-dust i{
  position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
  background:var(--gold-light);box-shadow:0 0 8px var(--gold);opacity:0;
  animation:dust linear infinite;
}
@keyframes dust{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(-105vh) translateX(var(--dx))}}

.stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* Stage 1 */
.stage-logo{transition:opacity 1.2s ease, transform 1.4s var(--ease);z-index:3}
.logo-main{
  width:min(300px,62vw);opacity:0;transform:scale(.92);
  animation:logoIn 2.4s var(--ease) .4s forwards;
  filter:drop-shadow(0 0 22px rgba(201,167,122,.35));
  -webkit-mask-image:linear-gradient(115deg,#000 40%,rgba(0,0,0,.35) 50%,#000 60%);
  -webkit-mask-size:250% 100%;mask-size:250% 100%;
}
.logo-main.shimmer{animation:logoShimmer 2.6s ease-in-out 1}
@keyframes logoIn{to{opacity:1;transform:scale(1)}}
@keyframes logoShimmer{0%{-webkit-mask-position:120% 0;mask-position:120% 0}100%{-webkit-mask-position:-20% 0;mask-position:-20% 0}}
.logo-caption{
  margin-top:28px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.25rem;
  letter-spacing:.12em;color:var(--sage-soft);opacity:0;animation:fadeUp 1.6s var(--ease) 1.8s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stage-logo.leave{opacity:0;transform:translateY(-60px) scale(.6);pointer-events:none}

/* Stage 2 */
.stage-envelope{opacity:0;visibility:hidden;transition:opacity 1.2s ease;z-index:2;padding:0 16px}
.stage-envelope.show{opacity:1;visibility:visible}
.env-hint{
  position:absolute;top:9vh;font-family:var(--serif);font-style:italic;font-size:1.3rem;letter-spacing:.1em;
  color:var(--gold-light);transition:opacity .6s;
}
.env-hint.hide{opacity:0}

.envelope-wrap{
  position:relative;width:min(560px,90vw);aspect-ratio:1.45/1;perspective:1600px;
  transform:translateY(120vh) rotate(-4deg);
}
.stage-envelope.show .envelope-wrap{animation:envArrive 2.2s var(--ease) .2s forwards}
@keyframes envArrive{to{transform:translateY(0) rotate(0)}}
.envelope-wrap.floating .envelope{animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}50%{transform:translateY(-10px) rotateX(1deg) rotateY(-1deg)}}

.envelope{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .2s ease-out}
.env-back,.env-front,.env-flap{position:absolute;left:0;right:0}
.env-back{inset:0;background:linear-gradient(160deg,#e9e5da,#d9d4c4);border-radius:4px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.env-front{
  inset:0;z-index:4;border-radius:4px;
  background:linear-gradient(170deg,#f5f2e9,#e6e1d2);
  clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);
  filter:drop-shadow(0 -2px 3px rgba(0,0,0,.08));
}
.env-front::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent 49.6%,rgba(169,133,80,.35) 50%,transparent 50.4%),
             linear-gradient(to top left,transparent 49.6%,rgba(169,133,80,.35) 50%,transparent 50.4%);
  opacity:.0;
}
.env-flap{
  top:0;height:56%;z-index:6;transform-origin:50% 0;
  background:linear-gradient(180deg,#f7f4eb,#e4dfcf);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform 1s var(--ease) , z-index 0s .45s;
  backface-visibility:visible;
}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:1;background:linear-gradient(0deg,#ddd8c7,#cfc9b6)}

.seal{
  position:absolute;left:50%;top:56%;width:22%;aspect-ratio:1;z-index:7;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e8d2a9,var(--gold) 55%,var(--gold-deep));
  box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 0 0 4px rgba(255,255,255,.18), inset 0 -6px 10px rgba(0,0,0,.18);
  display:grid;place-items:center;transition:transform .5s var(--ease), opacity .6s;
}
.seal::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(201,167,122,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.seal img{width:64%;filter:brightness(.55) saturate(1.4) contrast(1.2);opacity:.8}
.seal:hover{transform:translate(-50%,-50%) scale(1.07)}
.envelope.open .seal{transform:translate(-50%,-50%) scale(.2) rotate(40deg);opacity:0;pointer-events:none}

.env-shadow{position:absolute;left:8%;right:8%;bottom:-38px;height:30px;background:radial-gradient(ellipse,rgba(0,0,0,.45),transparent 70%);filter:blur(6px)}

/* Card inside envelope */
.card{
  position:absolute;left:5%;right:5%;top:6%;bottom:6%;z-index:3;
  background:linear-gradient(180deg,#fffefb,#f7f4ea);border-radius:3px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  transition:transform 1.4s var(--ease) .5s, left 1.2s var(--ease), right 1.2s var(--ease);
  display:flex;align-items:center;justify-content:center;
}
.card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,167,122,.55);pointer-events:none}
.card-inner{opacity:0;transition:opacity .8s ease 1.1s;text-align:center;padding:30px 20px 20px;width:100%}
.envelope.open .card{transform:translateY(-58%);z-index:8;left:3%;right:3%;top:0;bottom:auto;height:128%;align-items:flex-start}
.envelope.open .card-inner{opacity:1}
.envelope-wrap{transition:margin-top 1.4s var(--ease) .3s}
.envelope-wrap.opened{margin-top:34vh}

.card-crest{width:52px;margin:0 auto 8px;filter:brightness(.72) saturate(1.5) contrast(1.15)}
.card-eyebrow{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--sage)}
.card-line{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--sage-deep);margin:6px 0 4px}
.card-names{font-family:'Pinyon Script',var(--serif);font-weight:400;font-size:clamp(2rem,5vw,2.8rem);color:var(--sage-deep);line-height:1.05}
.card-names span{color:var(--gold);font-style:italic;padding:0 .08em}
.card-date{font-family:var(--serif);font-size:1.05rem;letter-spacing:.18em;color:var(--gold-deep);margin:4px 0 14px}

.countdown{display:flex;justify-content:center;gap:clamp(10px,2.4vw,22px)}
.countdown div{min-width:54px}
.countdown b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,4vw,2.1rem);color:var(--sage-deep);font-variant-numeric:tabular-nums;line-height:1}
.countdown small{display:block;margin-top:6px;font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sage)}

.enter-btn{
  position:relative;margin-top:18px;padding:12px 30px;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sage-deep);border:1px solid var(--gold);overflow:hidden;transition:color .5s;
}
.enter-btn span{position:relative;z-index:1}
.enter-btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .5s var(--ease)}
.enter-btn:hover{color:#fff}
.enter-btn:hover::before{transform:none}

.skip{position:absolute;bottom:5vh;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sage-soft);opacity:.7;transition:opacity .3s}
.skip:hover{opacity:1}

.curtain{
  position:absolute;inset:0;z-index:20;background:var(--ivory);display:grid;place-items:center;
  clip-path:circle(0% at 50% 50%);pointer-events:none;
}
.curtain img{width:120px;opacity:0}
.curtain.go{animation:curtainIn 1.5s var(--ease) forwards}
.curtain.go img{animation:fadeUp 1s ease .5s forwards}
@keyframes curtainIn{to{clip-path:circle(150% at 50% 50%)}}

/* ---------------- Main site ---------------- */
#site{opacity:0;transition:opacity 1.2s ease}
#site.visible{opacity:1}
.container{width:min(860px,88vw);margin:0 auto;text-align:center}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,56px);transition:background .5s, padding .5s, backdrop-filter .5s;color:#fff;
}
.nav.scrolled{background:rgba(47,52,43,.82);backdrop-filter:blur(12px);padding-top:10px;padding-bottom:10px}
.nav-logo img{height:48px}
.nav nav{display:flex;gap:clamp(14px,2.4vw,34px);align-items:center}
.nav nav a{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;position:relative;padding:4px 0}
.nav nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav nav a:hover::after{transform:scaleX(1)}
.nav-cta{border:1px solid var(--gold);padding:9px 20px !important;transition:background .4s}
.nav-cta:hover{background:var(--gold)}
@media(max-width:760px){.nav nav a:not(.nav-cta){display:none}}

.hero{position:relative;min-height:100vh;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:-6%;background:url("../images/venue.jpg") center/cover no-repeat;transform:scale(1.08);will-change:transform}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,34,28,.55),rgba(30,34,28,.25) 45%,rgba(30,34,28,.75))}
.hero-content{position:relative;z-index:2;padding:110px 20px 80px}
.hero-crest{width:84px;margin:0 auto 18px}
.eyebrow{font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-light)}
.eyebrow.dark{color:var(--gold-deep)}
.hero-names{font-family:var(--serif);font-weight:300;font-size:clamp(4rem,13vw,9rem);line-height:1;margin:14px 0 6px;letter-spacing:.02em}
.hero-names span{font-style:italic;color:var(--gold-light);padding:0 .06em}
.hero-date{font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.7rem);letter-spacing:.35em;margin-bottom:34px}
.countdown-hero b{color:#fff;font-size:clamp(2rem,5.4vw,3.4rem)}
.countdown-hero small{color:var(--gold-light)}
.countdown-hero{margin-bottom:42px}
.countdown-hero div{padding:0 clamp(8px,2vw,22px);border-left:1px solid rgba(255,255,255,.25)}
.countdown-hero div:first-child{border-left:0}

.btn-gold{
  display:inline-block;padding:15px 38px;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  border:1px solid var(--gold);color:#fff;position:relative;overflow:hidden;transition:color .5s;
}
.btn-gold::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn-gold:hover::before{transform:none}
.btn-gold{z-index:0}

.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);width:22px;height:38px;border:1px solid rgba(255,255,255,.6);border-radius:14px;z-index:3}
.scroll-cue span{position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;background:var(--gold-light);border-radius:2px;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

.story{padding:clamp(80px,12vw,160px) 0 0;background:var(--ivory);text-align:center}
.section-title{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5vw,3.8rem);color:var(--sage-deep);margin:16px 0 22px;line-height:1.15}
.section-title em{color:var(--gold-deep)}
.lead{font-size:1.02rem;line-height:1.9;color:#555a50;max-width:560px;margin:0 auto}
.gallery{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:clamp(10px,2vw,26px);padding:clamp(50px,8vw,100px) clamp(12px,4vw,56px) 0;align-items:end}
.gallery figure{overflow:hidden;aspect-ratio:3/4}
.gallery figure.tall{aspect-ratio:3/4.4}
.gallery figure:first-child,.gallery figure:last-child{aspect-ratio:3/3.6}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.gallery figure:hover img{transform:scale(1.06)}
@media(max-width:700px){.gallery{grid-template-columns:1fr 1fr}.gallery figure:last-child{display:none}}

.placeholder{min-height:46vh;display:grid;place-content:center;text-align:center;gap:10px;background:var(--sage-mist)}
.placeholder.alt{background:var(--ivory)}
.soon{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--sage)}
.footer{background:var(--sage-dark);color:var(--sage-soft);text-align:center;padding:60px 20px;font-family:var(--serif);letter-spacing:.2em}
.footer img{width:70px;margin:0 auto 14px}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.2s var(--ease), transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s !important;transition-duration:.01s !important}
}

/* ===========================================================
   FULL SITE (v2) — cream paper, eucalyptus, torn edges
   =========================================================== */
:root{--paper:#f6f1e6}
.ph{color:var(--gold-deep);font-style:italic}           /* placeholders: search "TBC" to find them */

/* hero names in script */
.hero-names{font-family:'Pinyon Script',var(--serif);font-weight:400;font-size:clamp(3.4rem,11vw,8rem);line-height:1.02;display:flex;flex-direction:column;align-items:center;margin:10px 0 8px}
.hero-names .amp{font-family:var(--serif);font-style:italic;font-size:.34em;color:var(--gold-light);letter-spacing:.1em;margin:-.1em 0}
.hero-names .n2{margin-top:-.08em}
@media(min-width:900px){
  .hero-names{flex-direction:row;justify-content:center;gap:.28em;align-items:baseline}
  .hero-names .amp,.hero-names .n2{margin:0}
  .hero-names .amp{font-size:.4em}
}
.hero-venue{font-size:.72rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold-light);margin:-14px 0 30px}

/* nav toggle (mobile) */
.nav-toggle{display:none;width:34px;height:34px;position:relative;z-index:3}
.nav-toggle span{position:absolute;left:5px;right:5px;height:1px;background:#fff;transition:transform .4s var(--ease),top .4s var(--ease)}
.nav-toggle span:first-child{top:12px}.nav-toggle span:last-child{top:21px}
.nav-toggle[aria-expanded=true] span:first-child{top:16px;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] span:last-child{top:16px;transform:rotate(-45deg)}
.nav nav a.active:not(.nav-cta){color:var(--gold-light)}
@media(max-width:760px){
  .nav-toggle{display:block}
  .nav nav{position:fixed;inset:0;background:rgba(47,52,43,.97);flex-direction:column;justify-content:center;gap:26px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;z-index:2}
  .nav nav.open{opacity:1;visibility:visible}
  .nav nav a:not(.nav-cta){display:block !important;font-size:.9rem}
}

/* paper */
.paper{
  position:relative;overflow:hidden;background-color:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .3  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding:clamp(80px,11vw,140px) 0;text-align:center;
}
.paper .container{position:relative;z-index:2}
.container.narrow{width:min(640px,90vw)}
.paper .section-title{margin-bottom:26px}

/* eucalyptus decoration */
.euc{position:absolute;width:clamp(160px,26vw,340px);pointer-events:none;z-index:1;opacity:.9}
.euc svg{width:100%;height:auto;display:block;overflow:visible}
.euc.tl{top:-10px;left:-20px}
.euc.tr{top:-10px;right:-20px;transform:scaleX(-1)}
.euc.br{bottom:-10px;right:-20px;transform:rotate(180deg)}
.euc.bl{bottom:-10px;left:-20px;transform:scaleY(-1)}
.euc path.stem{stroke:#8a9179;stroke-width:1.4;fill:none;stroke-linecap:round}
.euc path.leaf{stroke:#7c846d;stroke-width:.8}
.euc .sway{transform-origin:0 0;animation:sway 9s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(1.6deg)}}

/* welcome */
.quote{font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.7;color:var(--sage-deep);max-width:420px;margin:0 auto 44px}
.quote small{display:block;margin-top:8px;font-style:normal;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sage)}
.mono{width:min(150px,36vw);margin:0 auto 26px}
.paper .lead{margin-top:18px}
.parents{display:flex;justify-content:center;align-items:flex-start;gap:clamp(18px,5vw,50px);margin:46px auto 10px}
.parents i{width:1px;align-self:stretch;background:linear-gradient(transparent,var(--gold),transparent)}
.parents h4{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sage);font-weight:500;margin-bottom:8px}
.parents p{font-family:var(--serif);font-size:1.25rem;color:var(--sage-deep)}
.script-names{font-family:'Pinyon Script',var(--serif);font-weight:400;font-size:clamp(3.2rem,10vw,6rem);color:var(--sage-deep);line-height:1.05;margin:56px 0 22px;display:flex;flex-direction:column;align-items:center}
.script-names em{font-family:var(--serif);font-size:.36em;color:var(--gold);margin:-.05em 0}
.date-block{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"dow n yr" "mth n mth2";align-items:center;gap:0 22px;max-width:420px;margin:34px auto 34px}
.date-block b{grid-area:n;font-family:var(--serif);font-weight:400;font-size:clamp(4rem,12vw,6.4rem);color:var(--sage-deep);line-height:1}
.date-block span{font-size:.7rem;letter-spacing:.38em;text-transform:uppercase;color:var(--sage-deep);padding:6px 0;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.date-block .dow{grid-area:dow}.date-block .yr{grid-area:yr}
.date-block .mth{grid-area:mth;grid-column:1/-1;grid-row:3;border:0;color:var(--gold-deep);margin-top:6px}
.btn-line,.btn-dark{display:inline-flex;align-items:center;gap:10px;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;transition:all .5s var(--ease)}
.btn-line{padding:13px 26px;border:1px solid var(--gold);color:var(--sage-deep)}
.btn-line:hover{background:var(--gold);color:#fff}
.btn-dark{padding:13px 28px;background:var(--sage-dark);color:#fff;border:1px solid var(--sage-dark)}
.btn-dark:hover{background:transparent;color:var(--sage-dark)}
.btn-dark.big{padding:17px 44px;margin-top:10px}
.ico{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.btn-line .ico{width:18px;height:18px}
.paper .gallery{margin-top:clamp(60px,8vw,110px)}
.welcome{padding-bottom:0}
.welcome .gallery{padding-bottom:0}

/* details */
.venue-photo{margin:10px auto 50px;max-width:980px;position:relative}
.venue-photo img{display:block;transition:transform 2s var(--ease)}
.venue-photo{width:min(980px,92vw)}
.details .container{width:min(980px,92vw)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px)}
.detail{background:rgba(255,255,255,.55);border:1px solid rgba(201,167,122,.5);padding:44px 24px 40px;position:relative}
.detail::before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,167,122,.25);pointer-events:none}
.detail .ico{width:44px;height:44px;color:var(--gold-deep);margin:0 auto 14px}
.detail h4{font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--sage-deep);font-weight:500}
.detail .time{font-family:var(--serif);font-size:2rem;color:var(--sage-deep);margin:12px 0 4px}
.detail .place{font-family:var(--serif);font-size:1.25rem;color:var(--sage-deep)}
.detail .addr{font-size:.82rem;color:var(--sage);margin:4px 0 24px}
@media(max-width:700px){.detail-grid{grid-template-columns:1fr}}

/* itinerary */
.itinerary{background:var(--paper);padding:30px 0}
.wash{
  position:relative;padding:clamp(80px,10vw,130px) 0;text-align:center;
  background:
    radial-gradient(ellipse at 18% 22%,rgba(255,255,255,.35),transparent 55%),
    radial-gradient(ellipse at 82% 70%,rgba(94,104,82,.18),transparent 60%),
    radial-gradient(ellipse at 40% 90%,rgba(255,255,255,.22),transparent 50%),
    #cdd3c4;
}
.timeline{list-style:none;position:relative;max-width:420px;margin:50px auto 0;text-align:left}
.timeline::before{content:"";position:absolute;left:calc(46px + 22px);top:6px;bottom:6px;width:1px;background:var(--sage-deep);transform:scaleY(0);transform-origin:top;transition:transform 2.4s var(--ease)}
.timeline.in::before{transform:scaleY(1)}
.timeline li{display:grid;grid-template-columns:46px 44px 1fr;align-items:center;column-gap:0;padding:15px 0;position:relative}
.timeline li .ico{width:38px;height:38px;color:var(--sage-deep);grid-column:1}
.timeline li::after{content:"";position:absolute;left:calc(46px + 19px);top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--sage-dark)}
.timeline .t{grid-column:3;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);padding-left:20px;grid-row:1}
.timeline .d{grid-column:3;grid-row:2;font-family:var(--serif);font-size:1.3rem;color:var(--ink);padding-left:20px}
.timeline li .ico{grid-row:1/3}
.timeline li::after{margin-left:0}
.timeline .ph{color:var(--sage-deep);opacity:.65}

/* dress code */
.swatches{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:40px 0 18px}
.swatches button{width:62px;height:62px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:transform .5s var(--ease),box-shadow .5s}
.swatches button:hover,.swatches button.sel{transform:translateY(-8px) scale(1.1);box-shadow:0 14px 24px rgba(0,0,0,.18)}
.swatch-name{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--sage);min-height:1.6em}

/* stay */
.stay{background:var(--sage-mist);padding:clamp(80px,11vw,140px) 0;text-align:center}
.stay-card{max-width:520px;margin:44px auto 0;background:#fff;padding:46px 30px;border:1px solid rgba(201,167,122,.45);box-shadow:0 20px 50px rgba(47,52,43,.08)}
.stay-card .ico{width:46px;height:46px;color:var(--gold-deep);margin:0 auto 12px}
.stay-card h4{font-family:var(--serif);font-weight:400;font-size:1.7rem;color:var(--sage-deep);margin-bottom:10px}
.stay-card p{font-size:.92rem;line-height:1.8;color:#5a5f52;margin-bottom:26px}
.stay-card small{display:block;margin-top:14px;color:var(--gold-deep);font-style:italic}

/* form */
.form{margin-top:44px;text-align:left}
.fld{display:block;margin-bottom:24px}
.fld>span,.choice legend{display:block;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:8px}
.fld input,.fld textarea{width:100%;font:inherit;font-size:1rem;padding:12px 2px;background:transparent;border:0;border-bottom:1px solid var(--sage);color:var(--ink);outline:0;border-radius:0;transition:border-color .4s,box-shadow .4s}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--gold-deep);box-shadow:0 1px 0 var(--gold-deep)}
.fld textarea{resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
@media(max-width:600px){.row2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;opacity:0}
.choice{border:0;margin:6px 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice legend{grid-column:1/-1}
.choice label{cursor:none}
.choice input{position:absolute;opacity:0}
.choice span{display:block;text-align:center;padding:15px 10px;border:1px solid var(--sage);font-family:var(--serif);font-size:1.1rem;color:var(--sage-deep);transition:all .45s var(--ease)}
.choice label:hover span{border-color:var(--gold-deep)}
.choice input:checked+span{background:var(--sage-deep);color:#fff;border-color:var(--sage-deep)}
.choice input:focus-visible+span{outline:2px solid var(--gold)}
.stepper{display:flex;align-items:center;border-bottom:1px solid var(--sage)}
.stepper input{text-align:center;border:0 !important;box-shadow:none !important;pointer-events:none}
.stepper button{width:40px;height:40px;font-size:1.3rem;color:var(--sage-deep);transition:color .3s}
.stepper button:hover{color:var(--gold-deep)}
#attendExtra{transition:opacity .5s,max-height .7s var(--ease);max-height:600px;overflow:hidden}
#attendExtra.off{opacity:0;max-height:0}
.form .btn-dark{display:flex;margin:10px auto 0;cursor:none}
.form .btn-dark[disabled]{opacity:.6;pointer-events:none}
.form-status{text-align:center;margin-top:16px;font-size:.88rem;min-height:1.4em;color:#8a3b34}
.fld.err input,.fld.err textarea{border-bottom-color:#b4534a}
.choice.err span{border-color:#b4534a}
.thanks{padding:50px 0;animation:fadeUp 1.2s var(--ease)}
.thanks img{width:110px;margin:0 auto 14px}
.thanks h4{font-family:'Pinyon Script',var(--serif);font-weight:400;font-size:3.4rem;color:var(--sage-deep)}
.thanks p{font-family:var(--serif);font-size:1.3rem;color:var(--sage)}

/* faq */
.faq{padding-top:0}
.faq details{border-bottom:1px solid rgba(132,139,121,.4);text-align:left}
.faq summary{list-style:none;padding:22px 4px;font-family:var(--serif);font-size:1.35rem;color:var(--sage-deep);display:flex;justify-content:space-between;align-items:center;cursor:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;color:var(--gold-deep);transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 24px;line-height:1.8;color:#5a5f52;font-size:.95rem}

.footer .f-names{font-family:'Pinyon Script',var(--serif);font-size:2.6rem;letter-spacing:.04em;color:var(--gold-light);margin-bottom:6px}
.footer p{font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;margin-top:6px}
.footer .f-fam{opacity:.6;font-size:.64rem}
.gallery img{object-position:50% 78%}

/* ===========================================================
   INTRO v3 — black logo → welcome text → sage envelope
   =========================================================== */

#intro{background:#000;transition:background-color 1.8s ease, opacity 1.2s ease, visibility 1.2s}
#intro.sage{background:#848b79}
.intro-vignette{background:radial-gradient(circle at 50% 50%,rgba(201,167,122,.10),transparent 55%);transition:background 1.8s ease}
#intro.sage .intro-vignette{background:radial-gradient(ellipse at center,rgba(255,255,255,.07) 0%,transparent 45%,rgba(40,46,36,.32) 100%)}

/* Stage 1 — logo eases in and eases out */
.logo-main{
  width:min(320px,64vw);opacity:0;-webkit-mask-image:none;mask-image:none;
  animation:logoSeq 5s ease-in-out .3s forwards;
  filter:drop-shadow(0 0 26px rgba(201,167,122,.30));
}
@keyframes logoSeq{
  0%{opacity:0;transform:scale(.94);filter:blur(10px) drop-shadow(0 0 26px rgba(201,167,122,.30))}
  36%{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 26px rgba(201,167,122,.30))}
  62%{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 26px rgba(201,167,122,.30))}
  100%{opacity:0;transform:scale(1.06);filter:blur(10px) drop-shadow(0 0 26px rgba(201,167,122,.30))}
}

/* Stage 2 — welcome text, large, easing to centre */
.stage-welcome{opacity:0;visibility:hidden;pointer-events:none;z-index:3;transition:opacity 1.2s ease}
.stage-welcome.show{opacity:1;visibility:visible}
.stage-welcome.out{opacity:0}
.welcome-text{
  font-family:'Pinyon Script',var(--serif);font-weight:400;
  font-size:clamp(3.7rem,12.5vw,8.6rem);line-height:1.18;color:var(--gold-light);
  display:flex;flex-direction:column;align-items:center;padding:0 5vw;
  text-shadow:0 0 30px rgba(201,167,122,.25);
}
.wl{display:block;opacity:0;transform:translateY(70px) scale(1.14);filter:blur(10px)}
.l2{font-size:.62em;margin:.02em 0}
.stage-welcome.show .wl{animation:wlIn 2s cubic-bezier(.16,1,.3,1) forwards}
.stage-welcome.show .l2{animation-delay:.5s}
.stage-welcome.show .l3{animation-delay:1s}
@keyframes wlIn{to{opacity:1;transform:none;filter:blur(0)}}

/* Stage 3 — envelope on sage: quicker, smoother arrival */
.stage-envelope{transition:opacity .8s ease}
.envelope-wrap{transform:translateY(50px);opacity:0}
.stage-envelope.show .envelope-wrap{animation:envArrive 1.1s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes envArrive{to{transform:none;opacity:1}}
.env-hint{top:8vh;color:#fff;font-size:clamp(1.15rem,3vw,1.45rem);opacity:0;transition:opacity .9s ease .7s;text-shadow:0 1px 8px rgba(0,0,0,.18)}
.stage-envelope.show .env-hint{opacity:1}
.stage-envelope.show .env-hint.hide{opacity:0;transition-delay:0s}
.env-back{box-shadow:0 30px 70px rgba(40,46,36,.45)}
.envelope-wrap.opened{margin-top:0}
.envelope-wrap{transition:margin-top 1.4s var(--ease) .3s}

/* card: opens upward (JS sets top/bottom) */
.card{transition:top 1.4s var(--ease) .45s, bottom 1.4s var(--ease) .45s;align-items:flex-start}
.envelope.open .card{transform:none;left:5%;right:5%;height:auto;z-index:8}
.card-inner{padding:34px 20px 30px}
.card-circle{
  display:block;width:112px;height:112px;margin:22px auto 0;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold),0 10px 24px rgba(0,0,0,.18);
}
.enter-btn{padding:12px 44px}

/* logo sits under the opened invitation */
.env-logo{
  position:absolute;left:50%;top:calc(100% + 54px);width:58px;transform:translateX(-50%);
  opacity:0;transition:opacity 1.2s ease 1.6s;pointer-events:none;
}
.envelope-wrap.opened .env-logo{opacity:.95}

.skip{position:absolute;top:4vh;right:5vw;bottom:auto;left:auto;z-index:30;opacity:0;animation:fadeUp 1.2s ease 1.2s forwards}
.skip:hover{opacity:1}
@media (max-height:760px){.card-circle{width:84px;height:84px;margin-top:14px}.card-inner{padding-top:26px;padding-bottom:22px}.env-logo{width:44px;top:calc(100% + 44px)}}
.stage-logo{pointer-events:none}

/* ===========================================================
   v4 — white intro, formal type, new hero, refined envelope
   =========================================================== */
/* rings cursor */
#cursor svg{transform-origin:50% 50%}

/* ---------- Intro: pristine white ---------- */
#intro{background:#fff}
#intro.sage{background:#848b79}
.intro-vignette{background:none}
#intro.sage .intro-vignette{background:radial-gradient(ellipse at center,rgba(255,255,255,.08) 0%,transparent 45%,rgba(40,46,36,.30) 100%)}
.grain{opacity:0;transition:opacity 1.8s ease}
#intro.sage .grain{opacity:.12}
.gold-dust i{background:var(--gold);box-shadow:none}

.logo-main{
  width:min(180px,42vw);filter:none;
  animation:logoSeq2 4.6s ease-in-out .3s forwards;
}
@keyframes logoSeq2{
  0%{opacity:0;transform:scale(.95);filter:blur(8px)}
  38%{opacity:1;transform:scale(1);filter:blur(0)}
  62%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{opacity:0;transform:scale(1.04);filter:blur(8px)}
}

/* welcome: one formal line */
.welcome-text{
  font-family:var(--serif);font-weight:400;color:var(--sage-deep);text-shadow:none;
  font-size:clamp(.95rem,3.9vw,2.05rem);letter-spacing:.04em;line-height:1.4;
  white-space:nowrap;padding:0;display:block;
}
.welcome-text .wl{display:block;opacity:0;transform:translateY(18px);filter:blur(6px)}
.stage-welcome.show .wl{animation:wlIn 1.8s cubic-bezier(.16,1,.3,1) forwards}
.welcome-rule{display:block;width:0;height:1px;background:var(--gold);margin:22px auto 0;transition:width 1.6s var(--ease) .9s}
.stage-welcome.show .welcome-rule{width:64px}

#intro .skip{color:var(--sage)}
#intro.sage .skip{color:rgba(255,255,255,.85)}

/* ---------- Envelope: refined ---------- */
.envelope-wrap{width:min(580px,90vw)}
.env-back{background:linear-gradient(160deg,#dde2d3,#c8d0bc);border-radius:3px;box-shadow:0 34px 70px rgba(30,34,24,.38)}
.env-front{background:linear-gradient(172deg,#fcfaf4 0%,#f0ebdd 100%);border-radius:3px}
.env-front::after{
  opacity:1;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 100 L50 56 L100 100' fill='none' stroke='%23b8985f' stroke-opacity='.45' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>") center/100% 100% no-repeat;
}
.env-flap{background:linear-gradient(180deg,#fcfaf4,#ebe5d4)}
.envelope.open .env-flap{background:linear-gradient(0deg,#c8d0bc,#dde2d3)}
.seal{
  width:24%;
  background:radial-gradient(circle at 34% 28%,#ecd8b0,#c9a77a 52%,#a98550);
  box-shadow:0 10px 20px rgba(60,40,10,.35),inset 0 0 0 5px rgba(255,255,255,.16),inset 0 0 0 7px rgba(120,86,40,.25),inset 0 -8px 12px rgba(0,0,0,.18);
}
.env-label{position:absolute;left:0;right:0;bottom:8%;z-index:5;text-align:center;pointer-events:none}
.env-label b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,3.4vw,1.55rem);letter-spacing:.1em;color:var(--sage-deep)}
.env-label span{display:block;margin-top:5px;font-size:clamp(.5rem,1.5vw,.62rem);letter-spacing:.36em;text-transform:uppercase;color:var(--gold-deep)}

/* ---------- Invitation card: spacing & hierarchy ---------- */
.card{background:linear-gradient(180deg,#fffefb,#f8f5ec)}
.card-inner{padding:48px 28px 40px}
.card-eyebrow{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--sage);margin-bottom:12px}
.card-rule{display:block;width:44px;height:1px;background:var(--gold);margin:0 auto 18px}
.card-line{max-width:300px;margin:0 auto 18px;line-height:1.9;font-size:.6rem;letter-spacing:.3em}
.card-names{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,7.4vw,3.6rem);letter-spacing:.02em;line-height:1.05;margin-bottom:14px}
.card-names span{font-style:italic;font-size:.7em;padding:0 .1em}
.card-date{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--serif);font-size:1.05rem;letter-spacing:.18em;margin:0 0 30px}
.card-date::before,.card-date::after{content:"";width:26px;height:1px;background:var(--gold)}
.card .countdown{gap:0;margin-bottom:32px}
.card .countdown div{padding:0 clamp(10px,3vw,22px)}
.card .countdown div+div{border-left:1px solid rgba(201,167,122,.5)}
.enter-btn{margin-top:0;padding:14px 58px;letter-spacing:.42em}
@media (max-width:480px){
  .card-inner{padding:38px 18px 32px}
  .card-date{font-size:.92rem;letter-spacing:.1em;gap:10px}
  .card-date::before,.card-date::after{width:16px}
}

/* ---------- Hero: new photo ---------- */
.hero{display:flex;min-height:max(100vh,640px)}
.hero-bg{background-image:url("../images/couple-2.jpeg");background-position:41% 72%}
.hero-overlay{background:linear-gradient(180deg,rgba(36,40,32,.62) 0%,rgba(36,40,32,.10) 34%,rgba(36,40,32,.10) 62%,rgba(36,40,32,.72) 100%)}
.hero-content{width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:104px 20px 76px}
.hero-top,.hero-bottom{display:flex;flex-direction:column;align-items:center}
@media (max-width:1099px){.hero{min-height:max(125vh,820px)}}
@media (min-width:1100px){
  .hero-bg{background-position:50% 74%}
  .hero-overlay{background:linear-gradient(90deg,rgba(36,40,32,.04) 0%,rgba(36,40,32,.10) 38%,rgba(36,40,32,.66) 72%,rgba(36,40,32,.76) 100%)}
  .hero-content{width:min(520px,44vw);margin:0 7vw 0 auto;justify-content:center;gap:34px;padding-top:96px;padding-bottom:70px}
}

/* ---------- Names: same formal serif everywhere ---------- */
.hero-names{font-family:var(--serif);font-weight:300;font-size:clamp(3.6rem,8.6vw,6.4rem);line-height:1;letter-spacing:.02em;flex-direction:column;align-items:center;gap:0;margin:12px 0 8px}
.hero-names .amp{font-family:var(--serif);font-style:italic;font-size:.3em;margin:.35em 0;color:var(--gold-light)}
.hero-names .n2{margin-top:0}
.script-names{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,8vw,5rem);letter-spacing:.02em;line-height:1.05}
.script-names em{font-size:.38em;margin:.3em 0}
.footer .f-names{font-family:var(--serif);font-weight:300;font-size:2.5rem;letter-spacing:.08em}
.thanks h4{font-family:var(--serif);font-weight:300;font-size:2.8rem}
.gold-dust{opacity:0;transition:opacity 2s ease}
#intro.sage .gold-dust{opacity:1}

/* hero fixes */
.hero{align-items:stretch;place-items:stretch}
.hero-names .n1,.hero-names .n2{color:#fff;font-style:normal}
@media (max-width:1099px){
  .hero{min-height:max(135vh,900px)}
  .hero-overlay{background:linear-gradient(180deg,rgba(36,40,32,.74) 0%,rgba(36,40,32,.50) 26%,rgba(36,40,32,.06) 48%,rgba(36,40,32,.06) 66%,rgba(36,40,32,.78) 100%)}
}
.hero-venue{color:#fff;opacity:.92}
.footer .f-names{text-transform:none;letter-spacing:.06em;font-size:2.8rem}
@media (max-width:1099px){
  .hero-overlay{background:linear-gradient(180deg,rgba(36,40,32,.76) 0%,rgba(36,40,32,.58) 30%,rgba(36,40,32,.30) 42%,rgba(36,40,32,.05) 56%,rgba(36,40,32,.05) 66%,rgba(36,40,32,.78) 100%)}
}

/* ===========================================================
   v5 — gold type, shared green, collage, premium details
   =========================================================== */
:root{--bar:#3d4339}

/* nav + footer share one green */
.nav.scrolled{background:rgba(61,67,57,.94)}
.footer{background:var(--bar)}
@media(max-width:760px){.nav nav{background:rgba(61,67,57,.98)}}

/* metallic gold type */
.card-names,.env-label b{
  background:linear-gradient(100deg,#8d6a2f 0%,#b8913f 26%,#d1ad62 50%,#b08a3e 74%,#8d6a2f 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:goldShift 7s ease-in-out infinite;
}
.card-names span{color:inherit;-webkit-text-fill-color:transparent}
.env-label b{font-weight:500;letter-spacing:.06em}
@keyframes goldShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:101;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}

/* welcome verse */
.quote{font-size:1.3rem;max-width:480px}
.quote small{letter-spacing:.32em}
.welcome{padding-bottom:clamp(80px,11vw,140px)}

/* ---------- Moments: layered collage ---------- */
.moments{background:var(--sage-mist);padding:clamp(80px,11vw,140px) 0;text-align:center;overflow:hidden}
.pair{position:relative;width:min(1120px,92vw);margin:clamp(50px,7vw,90px) auto 0;aspect-ratio:1120/780}
.pair+.pair{margin-top:clamp(30px,4vw,60px)}
.m{position:absolute;margin:0;will-change:transform}
.m-img{overflow:hidden;background:#dfe3d6;box-shadow:0 24px 50px rgba(47,52,43,.16)}
.m img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.18);transition:transform 2.2s var(--ease)}
.m-img.in img{transform:scale(1)}
.m-img.in:hover img{transform:scale(1.05)}
.m-img.reveal{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease)}
.m-img.reveal.in{clip-path:inset(0 0 0 0)}
.m::before{content:"";position:absolute;inset:0;border:1px solid var(--gold);transform:translate(16px,16px);z-index:-1;pointer-events:none}
.m figcaption{position:absolute;bottom:-26px;left:0;font-family:var(--serif);font-style:italic;font-size:.95rem;letter-spacing:.2em;color:var(--gold-deep)}
.m .m-img{cursor:none}

/* row 1: big image left, smaller overlapping right */
.p1 .ma{left:3%;top:0;width:47%;aspect-ratio:3/4}
.p1 .mb{left:44%;bottom:0;width:31%;aspect-ratio:4/5;z-index:2}
.p1 .mb .m-img{border:8px solid var(--sage-mist);box-sizing:content-box;margin:-8px}
.p1 .c1{position:absolute;right:3%;top:6%;width:24%;text-align:left}
/* row 2: mirrored */
.p2 .md{right:3%;top:0;width:47%;aspect-ratio:3/4}
.p2 .mc{left:19%;bottom:0;width:31%;aspect-ratio:4/5;z-index:2}
.p2 .mc .m-img{border:8px solid var(--sage-mist);box-sizing:content-box;margin:-8px}
.p2 .c2{position:absolute;left:3%;top:6%;width:24%;text-align:right}
.p2 .md::before{transform:translate(-16px,16px)}
.m-cap{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.3;color:var(--sage-deep)}
.m-cap span{font-style:italic;color:var(--gold-deep)}

@media(max-width:760px){
  .pair{aspect-ratio:auto;display:block;width:88vw;margin-top:46px}
  .pair .m{position:relative}
  .pair .ma,.pair .md{width:78%;margin:0 0 0 0}
  .pair .mb,.pair .mc{width:58%;margin:-22% 0 0 auto;left:auto;bottom:auto}
  .pair .m-cap{position:static;width:auto;text-align:center;margin-top:44px}
  .p1 .ma,.p2 .md{left:auto;right:auto}
  .m::before{transform:translate(10px,10px)}
  .p2 .md::before{transform:translate(10px,10px)}
}

/* ---------- Dress code ---------- */
.dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:38px 0 8px;text-align:left}
.dc{background:rgba(255,255,255,.55);border:1px solid rgba(201,167,122,.5);padding:24px 22px;position:relative}
.dc h4{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:8px}
.dc p{font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--sage-deep)}
@media(max-width:600px){.dc-grid{grid-template-columns:1fr}}
.swatches{margin-top:34px}
.avoid{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sage)}
.no{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid #bbb;display:inline-block}
.no-white{background:#fff}
.no-black{background:#1b1b1b;border-color:#1b1b1b}
.no::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:1.5px;background:#a94a42;transform:rotate(-45deg)}

/* ---------- Details ---------- */
.detail{transition:transform .5s var(--ease),box-shadow .5s;transform-style:preserve-3d;will-change:transform}
.detail:hover{box-shadow:0 22px 44px rgba(47,52,43,.14)}

/* ---------- Timeline: active step ---------- */
.timeline li::after{transition:transform .5s var(--ease),background .5s}
.timeline li .ico,.timeline .d{transition:color .5s}
.timeline li.active::after{background:var(--gold-deep);transform:scale(2)}
.timeline li.active .ico{color:var(--gold-deep)}
.timeline li.active .d{color:var(--gold-deep)}

/* ---------- Buttons: soft shine ---------- */
.btn-dark,.btn-gold,.btn-line{position:relative;overflow:hidden}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(24,27,22,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.lb[hidden]{display:flex}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:88vw;max-height:86vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.96);transition:transform .7s var(--ease),opacity .4s}
.lb.open img{transform:scale(1)}
.lb img.swap{opacity:0}
.lb button{position:absolute;color:#fff;font-size:2.4rem;line-height:1;padding:14px 20px;opacity:.8;transition:opacity .3s,color .3s}
.lb button:hover{opacity:1;color:var(--gold-light)}
.lb-x{top:14px;right:16px;font-size:2.8rem !important}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lb-next{right:10px;top:50%;transform:translateY(-50%)}

/* ===========================================================
   v6 — client edits, premium finish, full responsiveness
   =========================================================== */
:root{
  --foil:linear-gradient(100deg,#8d6a2f 0%,#b8913f 26%,#d6b66c 50%,#b08a3e 74%,#8d6a2f 100%);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:64px}
body{overflow-x:clip}
body.is-locked{height:100vh;height:100dvh}
body.menu-open{overflow:hidden}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
#intro :focus-visible,.hero :focus-visible,.footer :focus-visible{outline-color:var(--gold-light)}

/* ---------- Intro: welcome message in gold, in a finer typeface ---------- */
.welcome-text{white-space:normal;display:flex;flex-direction:column;align-items:center;padding:0 6vw;max-width:100vw}
.welcome-text .wl{background:var(--foil);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.welcome-text .wl-a{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,4.6vw,2.2rem);letter-spacing:.07em;line-height:1.3;
}
.welcome-text .wl-b{
  font-family:'Pinyon Script',var(--serif);font-weight:400;font-style:normal;
  font-size:clamp(3.4rem,15vw,7rem);line-height:1.25;padding:.04em .12em .12em;letter-spacing:.01em;margin-top:.1em;
}
.stage-welcome.show .wl-b{animation-delay:.7s}
.welcome-rule{margin-top:14px;background:linear-gradient(90deg,transparent,var(--gold-deep),transparent)}
.stage-welcome.show .welcome-rule{width:clamp(70px,16vw,120px)}

/* ---------- Intro: hint matches "Skip intro", but smaller ---------- */
.env-hint{
  font-family:var(--sans);font-style:normal;font-weight:400;
  font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-shadow:none;top:max(8vh,calc(var(--safe-t) + 52px));
}
.skip{top:max(4vh,calc(var(--safe-t) + 16px));right:max(5vw,calc(var(--safe-r) + 16px));padding:10px 4px}

/* ---------- Envelope label: two lines, smaller ---------- */
.env-label{bottom:9%}
.env-label b{font-size:inherit;letter-spacing:0;line-height:1.15}
.env-label .el-names{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(.82rem,2.5vw,1.02rem);letter-spacing:.07em;text-transform:none;margin:0;color:inherit;-webkit-text-fill-color:transparent}
.env-label .el-wed{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(.7rem,2vw,.84rem);letter-spacing:.34em;text-indent:.34em;text-transform:none;margin:2px 0 0;color:inherit;-webkit-text-fill-color:transparent}
.env-label .el-date{margin-top:7px;font-size:clamp(.44rem,1.25vw,.54rem);letter-spacing:.38em}

/* ---------- Envelope: always fits the screen (portrait, landscape, tiny phones) ---------- */
.env-fit{position:relative;display:flex;justify-content:center;width:100%;transform:scale(var(--fit,1));transform-origin:50% 50%}
.envelope-wrap{width:min(580px,90vw,calc((100vh - 150px) * 1.45));width:min(580px,90vw,calc((100dvh - 150px) * 1.45))}
.card .countdown div{min-width:0;flex:1 1 0}
@media (max-width:420px){
  .card-inner{padding:34px 12px 28px}
  .card .countdown div{padding:0 clamp(4px,1.6vw,10px)}
  .card .countdown b{font-size:clamp(1.15rem,6vw,1.5rem)}
  .card .countdown small{font-size:.46rem;letter-spacing:.18em}
  .card-line{font-size:.54rem;letter-spacing:.22em}
  .enter-btn{padding:13px 40px;letter-spacing:.34em}
}

/* ---------- Gold foil type for names & emphasis ---------- */
.section-title em{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.04em}
.section-title::after{
  content:"";display:block;width:84px;height:1px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.section-title{text-wrap:balance}
.lead{text-wrap:pretty;font-weight:300;color:#4f5448}
.quote,.m-cap,.parents p{text-wrap:balance}

/* ---------- Photos: no numbers; venue gets the gold offset frame ---------- */
.m figcaption{display:none}
.venue-photo{
  position:relative;overflow:visible;isolation:isolate;
  width:min(980px,calc(92vw - 16px));margin:10px auto 64px;
}
.venue-photo::before{
  content:"";position:absolute;inset:0;border:1px solid var(--gold);
  transform:translate(16px,16px);z-index:-1;pointer-events:none;
}
.vp-img{overflow:hidden;background:#dfe3d6;box-shadow:0 24px 50px rgba(47,52,43,.16)}
.vp-img img{width:100%;aspect-ratio:16/8;object-fit:cover}
.venue-photo:hover .vp-img img{transform:scale(1.04)}

/* ---------- Nav: blur lives on a layer so the mobile menu can fill the screen ---------- */
.nav{padding-left:max(clamp(20px,4vw,56px),var(--safe-l));padding-right:max(clamp(20px,4vw,56px),var(--safe-r));padding-top:calc(18px + var(--safe-t))}
.nav.scrolled{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding-top:calc(10px + var(--safe-t))}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:rgba(61,67,57,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,167,122,.25);
}
.nav.scrolled::before{opacity:1}
.nav-toggle{width:44px;height:44px;margin-right:-8px}
.nav-toggle span{left:10px;right:10px}
.nav-toggle span:first-child{top:16px}.nav-toggle span:last-child{top:27px}
.nav-toggle[aria-expanded=true] span:first-child,.nav-toggle[aria-expanded=true] span:last-child{top:21px}
@media (max-width:900px) and (min-width:761px){.nav nav a{letter-spacing:.18em}.nav nav{gap:16px}}
@media(max-width:760px){
  .nav nav{height:100vh;height:100dvh;padding:calc(var(--safe-t) + 20px) 20px calc(var(--safe-b) + 20px)}
  .nav nav a:not(.nav-cta){font-family:var(--serif);font-size:1.7rem !important;letter-spacing:.12em;text-transform:none}
  .nav-cta{margin-top:10px}
}

/* ---------- Hero ---------- */
@supports (min-height:100dvh){
  .hero{min-height:max(100dvh,640px)}
  @media (max-width:1099px){.hero{min-height:max(135dvh,900px)}}
}
.hero-content{padding-left:max(20px,var(--safe-l));padding-right:max(20px,var(--safe-r))}
.hero-names{text-shadow:0 2px 30px rgba(20,24,16,.35)}
@media (max-width:480px){
  .hero-crest{width:68px}
  .hero-date{letter-spacing:.24em}
  .hero-venue{letter-spacing:.4em}
  .countdown-hero div{padding:0 clamp(6px,2.4vw,12px)}
  .countdown-hero b{font-size:clamp(1.6rem,8vw,2.2rem)}
  .countdown-hero small{font-size:.5rem;letter-spacing:.2em}
  .btn-gold{padding:15px 32px;letter-spacing:.28em}
}
@media (max-height:520px) and (orientation:landscape){
  .hero,.hero{min-height:max(100dvh,560px)}
  .hero-content{padding-top:80px;padding-bottom:56px}
  .hero-crest{width:52px;margin-bottom:8px}
  .scroll-cue{display:none}
}

/* ---------- Welcome / details / dress code / form at small sizes ---------- */
@media (max-width:440px){
  .parents{flex-direction:column;align-items:center;gap:20px}
  .parents i{width:60px;height:1px;align-self:center;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
  .date-block{gap:0 14px}
  .detail{padding:38px 18px 34px}
  .swatches{gap:12px}
  .swatches button{width:50px;height:50px}
  .timeline{max-width:100%;padding:0 4px}
  .faq summary{font-size:1.2rem}
  .stay-card{padding:38px 20px}
}
.stepper button{width:44px;height:44px}
.faq summary{min-height:56px}
input,textarea{border-radius:0}
.fld input,.fld textarea{font-size:max(16px,1rem)}   /* stops iOS zooming into fields */
.btn-dark,.btn-line,.btn-gold{min-height:44px;justify-content:center}

/* ---------- Footer ---------- */
.footer{position:relative;padding:72px 20px calc(60px + var(--safe-b))}
.footer::before{content:"";position:absolute;top:0;left:50%;width:min(320px,60vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.footer .f-love{margin-top:26px;font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.12em;font-size:1.05rem;color:var(--gold-light);opacity:.9}

/* ---------- Big screens scale up gracefully ---------- */
@media (min-width:1700px){html{font-size:112.5%}}
@media (min-width:2200px){html{font-size:125%}}

/* ---------- Lightbox on phones ---------- */
@media (max-width:600px){
  .lb img{max-width:96vw}
  .lb-prev{left:0}.lb-next{right:0}
}

/* ---------- Touch devices: no hover-only motion ---------- */
@media (hover:none){
  .venue-photo:hover .vp-img img,.m-img.in:hover img{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card-names,.env-label b{animation:none}
}
@media (max-width:760px){
  .venue-photo{width:calc(92vw - 10px);margin-bottom:48px}
  .venue-photo::before{transform:translate(10px,10px)}
  .vp-img img{aspect-ratio:4/3}
}

/* envelope label: keep clear of the wax seal on small envelopes */
.env-label{bottom:5%}
.env-label .el-names{font-size:clamp(.78rem,2.4vw,1rem)}
.env-label .el-wed{font-size:clamp(.64rem,1.9vw,.82rem);margin-top:1px}
.env-label .el-date{margin-top:5px;font-size:clamp(.4rem,1.2vw,.52rem)}
@media (min-width:600px){.env-label{bottom:8%}}
/* landscape phones: keep the card wide enough to read; the fit-scale shrinks the whole group */
.envelope-wrap{width:max(min(580px,90vw,calc((100vh - 150px) * 1.45)),min(440px,90vw))}
@supports (height:100dvh){.envelope-wrap{width:max(min(580px,90vw,calc((100dvh - 150px) * 1.45)),min(440px,90vw))}}

/* photo frames always follow the photo box, whatever shape the file is */
.m-img{height:100%}

/* ---------- Sharp card text: no 3D / compositing layers once the envelope is open ---------- */
.env-fit{transform:none}
.envelope-wrap.settled{perspective:none;transform:none;animation:none;opacity:1}
.envelope.settled{transform-style:flat;transform:none !important;animation:none;will-change:auto}
.card,.card-inner{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;backface-visibility:hidden}
.env-label{bottom:9%}
@media (min-width:600px){.env-label{bottom:11%}}

/* ---------- Phones: calmer, roomier envelope ---------- */
@media (max-width:600px){
  .env-hint{display:none}
  .seal{width:21%}
  .env-label{bottom:6.5%}
  .env-label .el-names{font-size:.74rem;letter-spacing:.08em}
  .env-label .el-wed{font-size:.62rem;letter-spacing:.3em;text-indent:.3em;margin-top:2px}

  .envelope.open .card{left:4%;right:4%}
  .card::before{inset:7px}
  .card-inner{padding:42px 26px 34px}
  .card-eyebrow{font-size:1rem;margin-bottom:10px}
  .card-rule{margin-bottom:16px}
  .card-line{font-size:.5rem;letter-spacing:.24em;line-height:2;margin-bottom:16px;max-width:230px}
  .card-names{font-size:clamp(1.7rem,8.2vw,2.15rem);margin-bottom:12px}
  .card-date{font-size:.8rem;letter-spacing:.1em;gap:8px;margin-bottom:26px}
  .card-date::before,.card-date::after{width:12px}
  .card .countdown{margin-bottom:28px}
  .card .countdown div{padding:0 clamp(4px,1.8vw,9px)}
  .card .countdown b{font-size:clamp(1.05rem,5.2vw,1.35rem)}
  .card .countdown small{font-size:.42rem;letter-spacing:.16em;margin-top:5px}
  .enter-btn{padding:12px 34px;font-size:.58rem;letter-spacing:.34em}
}

/* ===========================================================
   v7 — story, parents, retinue, venue photo 2, dress code, #919986
   =========================================================== */
:root{--bar:#919986}

/* ---------- Nav + footer: one soft sage (#919986) ---------- */
.nav::before{background:rgba(145,153,134,.96);border-bottom:1px solid rgba(255,255,255,.28)}
.nav nav a{color:#fff;font-weight:500;text-shadow:0 1px 10px rgba(47,52,43,.22)}
.nav nav a.active:not(.nav-cta){color:#fff}
.nav nav a.active:not(.nav-cta)::after{transform:scaleX(1);background:#fff}
.nav-cta{border-color:rgba(255,255,255,.75)}
.nav-cta:hover{background:rgba(255,255,255,.2)}
@media(max-width:760px){.nav nav{background:rgba(145,153,134,.99)}}
.footer{background:#919986;color:#fff}
.footer .f-names,.footer .f-love{color:#fff}
.footer .f-fam{opacity:.9}
.footer .f-love{opacity:1}
.footer::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
.footer :focus-visible{outline-color:#fff}
@media (max-width:900px) and (min-width:761px){.nav nav{gap:12px}.nav nav a{letter-spacing:.14em;font-size:.64rem}}

/* ---------- Love story (after the photos) ---------- */
.love-story{margin-top:clamp(80px,10vw,140px);width:min(820px,90vw)}
.years{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:36px auto 52px;max-width:780px;position:relative}
.years::before{content:"";position:absolute;top:4px;left:12.5%;right:12.5%;height:1px;background:var(--gold)}
.years li{position:relative;padding-top:28px}
.years li::before{content:"";position:absolute;top:0;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px var(--sage-mist)}
.years b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,4.6vw,2.5rem);line-height:1;color:var(--sage-deep)}
.years span{display:block;margin-top:10px;padding:0 8px;font-size:.6rem;letter-spacing:.2em;line-height:1.7;text-transform:uppercase;color:var(--gold-deep)}
.story-text{max-width:620px;margin:0 auto}
.story-text p{font-family:var(--serif);font-weight:400;font-size:clamp(1.18rem,2.3vw,1.4rem);line-height:1.85;color:#434a3d;margin:0 0 1.3em;text-wrap:pretty}
.story-text .story-close{font-style:italic;color:var(--gold-deep);margin-bottom:0}
.story-text .story-close::before{content:"";display:block;width:64px;height:1px;margin:34px auto 26px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
@media(max-width:520px){
  .years{grid-template-columns:repeat(2,1fr);row-gap:32px;margin-bottom:44px}
  .years::before{display:none}
  .years li{padding-top:24px}
}

/* ---------- Parents ---------- */
.parents-sec{padding:clamp(80px,10vw,130px) 0}
.parents-full{margin-top:44px;gap:clamp(24px,6vw,72px);align-items:stretch}
.parents-full>div{flex:1 1 0;max-width:360px}
.parents-full p{font-size:clamp(1.45rem,3.2vw,2rem);line-height:1.35}
@media(max-width:560px){
  .parents-full{flex-direction:column;align-items:center;gap:26px}
  .parents-full i{width:64px;height:1px;align-self:center;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
  .parents-full>div{max-width:100%}
}

/* ---------- Meet the Retinue ---------- */
.retinue{background:var(--sage-mist);padding:clamp(80px,11vw,140px) 0 clamp(80px,10vw,130px);text-align:center;overflow:hidden}
.container.wide{width:min(1080px,92vw)}
.rt-group{margin-top:clamp(60px,8vw,100px)}
.rt-title{display:flex;align-items:center;justify-content:center;gap:20px;font-size:.68rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-deep)}
.rt-title::before,.rt-title::after{content:"";flex:0 1 90px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.rt-title::after{transform:scaleX(-1)}
.rt-row{--gx:clamp(18px,3vw,36px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(34px,5vw,54px) var(--gx);margin-top:38px}
.rt{--n:4;--max:230px;margin:0;width:calc((100% - (var(--n) - 1) * var(--gx)) / var(--n));max-width:var(--max)}
.cols-1 .rt{--n:1;--max:270px}
.cols-2 .rt{--n:2;--max:310px}
.cols-3 .rt{--n:3;--max:250px}
.cols-4 .rt{--n:4;--max:228px}
.rt-photo{position:relative;isolation:isolate;aspect-ratio:3/4;border-radius:999px 999px 0 0;background:linear-gradient(160deg,#e3e6db,#c9cdc1);box-shadow:0 18px 40px rgba(47,52,43,.14)}
.rt-photo::before{content:"";position:absolute;inset:0;border:1px solid var(--gold);border-radius:inherit;transform:translate(9px,9px);z-index:-1;pointer-events:none}
.rt-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%;border-radius:inherit}
.rt-photo.noimg::after{content:attr(data-i);position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:.12em;color:var(--gold-deep)}
.rt figcaption{margin-top:26px}
.rt figcaption small{display:block;margin-bottom:7px;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)}
.rt figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.08rem,2vw,1.32rem);line-height:1.25;color:var(--sage-deep);text-wrap:balance}
.rt figcaption span{display:block;margin-top:5px;font-family:var(--serif);font-style:italic;font-size:1rem;color:#6a7161}
.cols-2 .rt figcaption b{font-size:clamp(1.15rem,2.4vw,1.5rem)}
.rt:nth-child(2){transition-delay:.12s}.rt:nth-child(3){transition-delay:.24s}.rt:nth-child(4){transition-delay:.36s}
@media(max-width:600px){
  .rt-row{--gx:16px;margin-top:30px}
  .cols-3 .rt,.cols-4 .rt,.cols-2 .rt{--n:2}
  .cols-1 .rt{--max:210px}
  .rt-photo::before{transform:translate(7px,7px)}
  .rt figcaption{margin-top:22px}
  .rt figcaption span{font-size:.92rem}
  .rt-title{gap:14px;letter-spacing:.32em}
  .rt-title::before,.rt-title::after{flex-basis:40px}
}

/* ---------- Venue photo 2 + ceremony / reception notes ---------- */
.venue-photo-2{margin-top:clamp(44px,6vw,76px)}
.venue-photo-2::before{transform:translate(-16px,16px)}
.venue-photo-2 .vp-img img{object-position:60% 60%}
@media(min-width:761px){.venue-photo-2 .vp-img img{aspect-ratio:3/2}}
@media(max-width:760px){.venue-photo-2::before{transform:translate(-10px,10px)}}
.detail .time{margin-bottom:2px}
.detail .note{margin:4px auto 16px;max-width:260px;font-size:.66rem;letter-spacing:.2em;line-height:1.8;text-transform:uppercase;color:var(--gold-deep)}

/* ---------- Dress code: colours to avoid ---------- */
.avoid{flex-direction:column;align-items:center;gap:14px;margin-top:44px}
.avoid-label{margin-bottom:4px}
.av-row{display:flex;justify-content:center;gap:clamp(8px,2.2vw,14px)}
.av-row button{position:relative;width:clamp(30px,9vw,42px);aspect-ratio:1;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.14);box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .45s var(--ease),box-shadow .45s}
.av-row button::after{content:"";position:absolute;left:9%;right:9%;top:50%;height:1.5px;margin-top:-.75px;border-radius:2px;background:#b5473e;transform:rotate(-42deg)}
.av-row button:hover,.av-row button.sel{transform:translateY(-4px) scale(1.08);box-shadow:0 10px 18px rgba(0,0,0,.16)}
.avoid-name{margin-top:6px;min-height:1.6em;font-family:var(--serif);font-style:italic;font-size:1.15rem;letter-spacing:.02em;text-transform:none;color:var(--sage)}
@media(max-width:600px){.rt-row{padding:0 10px}.parents-sec .container,.retinue .container{overflow:visible}}

/* ===========================================================
   v8 — one gold-frame system for every photo:
   the frame draws itself in on scroll, then answers your hover
   =========================================================== */
:root{--glide:cubic-bezier(.22,.8,.24,1)}

/* ---- Venue photos: wipe-in reveal, image settles, gold frame draws on ---- */
.venue-photo.reveal{opacity:1;transform:none}
.vp-img{position:relative;clip-path:inset(100% -80px -80px -80px);transition:clip-path 1.7s var(--glide)}
.venue-photo.in .vp-img{clip-path:inset(0 -80px -80px -80px)}
.vp-img img{transform:scale(1.2);transition:transform 2.6s var(--glide),filter 1.2s var(--glide)}
.venue-photo.in .vp-img img{transform:scale(1)}
.venue-photo::before{clip-path:inset(0 100% 100% 0);transition:transform 1s var(--glide),clip-path 1.9s var(--glide) .45s}
.venue-photo.in::before{clip-path:inset(0 0 0 0)}

/* inner hairline + soft light sweep (both hidden until hover) */
.vp-img::after,.m-img::after{
  content:"";position:absolute;inset:16px;border:1px solid rgba(240,222,184,.95);pointer-events:none;z-index:2;
  opacity:0;transform:scale(1.045);transition:opacity .9s var(--glide),transform 1.3s var(--glide);
}
.vp-img::before,.m-img::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 36%,rgba(255,243,210,.34) 50%,transparent 64%);
  transition:transform 1.5s var(--glide);
}

/* ---- Story collage: frame draws on after the photo wipes in ---- */
.m{position:absolute}
.m-img{position:relative}
.m::before{clip-path:inset(0 100% 100% 0);transition:transform 1s var(--glide),clip-path 1.9s var(--glide) .5s}
.m:has(.m-img.in)::before{clip-path:inset(0 0 0 0)}
.m img{transition:transform 2.4s var(--glide),filter 1.2s var(--glide)}

/* ---- Retinue arches ---- */
.rt-photo{transition:transform 1s var(--glide),box-shadow 1s var(--glide)}
.rt-photo::before{clip-path:inset(0 100% 100% 0);transition:transform 1s var(--glide),clip-path 1.8s var(--glide) .4s}
.rt.in .rt-photo::before{clip-path:inset(0 0 0 0)}
.rt-photo img{transition:filter 1.2s var(--glide)}
.rt-photo:not(.noimg)::after{
  content:"";position:absolute;inset:11px;border:1px solid rgba(240,222,184,.95);border-radius:999px 999px 0 0;
  pointer-events:none;opacity:0;transform:scale(1.05);transition:opacity .9s var(--glide),transform 1.2s var(--glide);
}
.rt figcaption b{transition:color .8s var(--glide)}

/* ---- What happens on hover (mouse devices only) ---- */
@media (hover:hover) and (pointer:fine){
  /* venue photos */
  .venue-photo:hover::before{transform:translate(7px,7px)}
  .venue-photo-2:hover::before{transform:translate(-7px,7px)}
  .venue-photo:hover .vp-img img{transform:scale(1.07);filter:saturate(1.1) contrast(1.03)}
  .venue-photo:hover .vp-img::after{opacity:1;transform:scale(1)}
  .venue-photo:hover .vp-img::before{transform:translateX(130%)}
  /* collage */
  .m:hover::before{transform:translate(7px,7px)}
  .m-img.in:hover img{transform:scale(1.07);filter:saturate(1.1) contrast(1.03)}
  .m:hover .m-img::after{opacity:1;transform:scale(1)}
  .m:hover .m-img::before{transform:translateX(130%)}
  /* retinue */
  .rt:hover .rt-photo{transform:translateY(-10px);box-shadow:0 30px 50px rgba(47,52,43,.2)}
  .rt:hover .rt-photo::before{transform:translate(5px,5px)}
  .rt:hover .rt-photo::after{opacity:1;transform:scale(1)}
  .rt:hover .rt-photo img{filter:saturate(1.1) contrast(1.03)}
  .rt:hover figcaption b{color:var(--gold-deep)}
}
/* touch screens: a gentle press response instead of hover */
@media (hover:none){
  .venue-photo:active .vp-img img,.m-img.in:active img{filter:saturate(1.1)}
  .rt:active .rt-photo{transform:translateY(-4px)}
}
/* the old rule that disabled hover zoom on touch is superseded */
@media (prefers-reduced-motion:reduce){
  .vp-img,.venue-photo::before,.m::before,.rt-photo::before{clip-path:none !important}
  .vp-img img{transform:none !important}
}

/* ===========================================================
   v9 — Retinue portraits: clear gold outline + richer hover
   =========================================================== */
.rt-photo{--frame:#b8913f;overflow:visible;box-shadow:none;background:none;transition:transform 1.1s var(--glide)}
/* the photo itself sits in its own clipped arch so it can zoom */
.rt-img{position:relative;width:100%;height:100%;overflow:hidden;border-radius:999px 999px 0 0;background:linear-gradient(160deg,#e3e6db,#c9cdc1);box-shadow:0 18px 40px rgba(47,52,43,.16);transition:box-shadow 1.1s var(--glide)}
.rt-img img{transform:scale(1.14);transition:transform 2.4s var(--glide),filter 1.2s var(--glide)}
.rt.in .rt-img img{transform:scale(1)}
/* 1) the gold outline: offset arch, always visible, draws on as you scroll */
.rt-photo::before{
  inset:0;border:1.5px solid var(--frame);border-radius:999px 999px 0 0;
  transform:translate(12px,12px);z-index:-1;
  transition:transform 1.1s var(--glide),clip-path 1.9s var(--glide) .4s,border-color .8s,filter .8s;
}
/* 2) a fine inner arch line, softly visible at rest */
.rt-img::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(255,244,214,.75);border-radius:999px 999px 0 0;
  pointer-events:none;z-index:2;opacity:.5;transform:scale(1);transition:opacity .9s var(--glide),inset .9s var(--glide),border-color .9s;
}
/* 3) light sweep */
.rt-img::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;transform:translateX(-140%);
  background:linear-gradient(105deg,transparent 34%,rgba(255,243,210,.45) 50%,transparent 66%);
  transition:transform 1.6s var(--glide);
}
.rt-photo:not(.noimg)::after{display:none}      /* old inner line replaced by .rt-img::after */
/* name gets a gold rule that draws in on hover */
.rt figcaption b{position:relative;display:inline-block;padding-bottom:8px}
.rt figcaption b::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--frame);transform:translateX(-50%);transition:width 1s var(--glide)}
.rt figcaption small{transition:letter-spacing 1s var(--glide)}

@media (hover:hover) and (pointer:fine){
  .rt{cursor:default}
  .rt:hover .rt-photo{transform:translateY(-12px)}
  .rt:hover .rt-photo::before{transform:translate(6px,6px);border-color:#d6b66c;filter:drop-shadow(0 0 8px rgba(214,182,108,.55))}
  .rt:hover .rt-img{box-shadow:0 34px 56px rgba(47,52,43,.26)}
  .rt:hover .rt-img img{transform:scale(1.09);filter:saturate(1.12) contrast(1.04)}
  .rt:hover .rt-img::after{opacity:1;inset:14px;border-color:rgba(255,246,222,.98)}
  .rt:hover .rt-img::before{transform:translateX(140%)}
  .rt:hover figcaption b{color:var(--gold-deep)}
  .rt:hover figcaption b::after{width:70%}
  .rt:hover figcaption small{letter-spacing:.38em}
}
@media (hover:none){
  .rt:active .rt-photo{transform:translateY(-6px)}
  .rt:active .rt-photo::before{transform:translate(6px,6px)}
  .rt:active .rt-img img{transform:scale(1.06)}
}
@media(max-width:600px){.rt-photo::before{transform:translate(8px,8px)}}
@media (prefers-reduced-motion:reduce){.rt-img img{transform:none !important}}

/* ===========================================================
   v10 — Retinue portraits are circular (photos carry their own round border)
   Show each image whole, ring it in gold, no cropping or zooming
   =========================================================== */
@property --p{syntax:"<angle>";inherits:false;initial-value:0deg}
.cols-1 .rt{--max:240px}.cols-2 .rt{--max:280px}.cols-3 .rt{--max:230px}.cols-4 .rt{--max:210px}
.rt-photo{aspect-ratio:1/1;border-radius:50%}
.rt-img{border-radius:50%;background:var(--ivory)}
.rt-photo.noimg .rt-img{background:linear-gradient(160deg,#e3e6db,#c9cdc1)}
.rt-img img{object-fit:contain;object-position:center;border-radius:50%;transform:none !important}   /* never crop their circle */
.rt-img::after{display:none}                                                                    /* their own border is the inner ring */

/* gold ring 1: concentric, draws itself clockwise as you scroll */
.rt-photo::before{
  --p:0deg;inset:-11px;border:1.5px solid var(--frame);border-radius:50%;opacity:1;clip-path:none;z-index:-1;
  transform:none;
  -webkit-mask:conic-gradient(#000 var(--p),transparent 0);mask:conic-gradient(#000 var(--p),transparent 0);
  transition:--p 2s var(--glide) .3s,inset 1s var(--glide),border-color .8s,box-shadow .9s;
}
.rt.in .rt-photo::before{--p:360deg}

/* gold ring 2: fine dashed ring, appears and slowly turns on hover */
.rt-photo:not(.noimg)::after{
  display:block;content:"";position:absolute;inset:-22px;border:1px dashed rgba(184,145,63,.9);border-radius:50%;
  z-index:-1;pointer-events:none;opacity:0;transform:scale(.94);transition:opacity .9s var(--glide),transform 1.2s var(--glide);
}
.rt-photo.noimg::after{border-radius:50%}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.rt figcaption{margin-top:36px}

@media (hover:hover) and (pointer:fine){
  .rt:hover .rt-photo{transform:translateY(-10px) scale(1.04)}
  .rt:hover .rt-photo::before{inset:-14px;transform:none;border-color:#d6b66c;box-shadow:0 0 20px rgba(214,182,108,.55)}
  .rt:hover .rt-photo:not(.noimg)::after{opacity:1;transform:scale(1);animation:ringSpin 26s linear infinite}
  .rt:hover .rt-img img{transform:none !important;filter:saturate(1.1) contrast(1.03)}
  .rt:hover .rt-img{box-shadow:0 30px 50px rgba(47,52,43,.24)}
}
@media (hover:none){
  .rt:active .rt-photo{transform:translateY(-5px) scale(1.03)}
  .rt:active .rt-img img{transform:none !important}
}
@media(max-width:600px){
  .rt-row{--gx:26px;gap:44px var(--gx);padding:0 14px}
  .rt-photo::before{inset:-8px}
  .rt-photo:not(.noimg)::after{inset:-15px}
  .rt:hover .rt-photo::before{inset:-10px}
  .rt figcaption{margin-top:30px}
}
@media (prefers-reduced-motion:reduce){.rt:hover .rt-photo::after{animation:none}}
.rt-img{box-shadow:0 12px 26px rgba(47,52,43,.12)}

/* ===========================================================
   v11 — dress code: recommended palette in 3 balanced rows; only white, black, green avoided
   =========================================================== */
.swatches{flex-direction:column;align-items:center;flex-wrap:nowrap;gap:clamp(12px,2.4vw,18px)}
.sw-row{display:flex;justify-content:center;gap:clamp(10px,2.6vw,20px)}
.swatches button{width:clamp(44px,12.4vw,64px);height:auto;aspect-ratio:1;border:3px solid #fff;outline:1px solid rgba(0,0,0,.10);outline-offset:-1px}
@media (max-width:440px){.swatches button{width:clamp(44px,12.4vw,64px);height:auto}}
.avoid .av-row{gap:clamp(14px,4vw,26px)}
.avoid .av-row button{width:clamp(44px,12vw,54px)}

/* ===========================================================
   v12 — proposal photos + 7-per-row palette
   =========================================================== */
.proposal-photos{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(26px,5vw,54px);width:min(640px,calc(100% - 14px));margin:46px auto 54px}
.proposal-photos .venue-photo{width:auto;margin:0}
.proposal-photos .venue-photo::before{transform:translate(10px,10px)}
.proposal-photos .vp-img img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:cover}
.proposal-photos .venue-photo::after{display:none}
@media (hover:hover) and (pointer:fine){
  .proposal-photos .venue-photo:hover::before{transform:translate(5px,5px)}
}
@media(max-width:520px){
  .proposal-photos{gap:22px;margin:36px auto 42px}
  .proposal-photos .venue-photo::before{transform:translate(7px,7px)}
  .proposal-photos .vp-img::after{inset:9px}
}
.swatches{gap:clamp(9px,2vw,16px)}
.sw-row{gap:clamp(8px,1.9vw,16px)}
.swatches button{width:clamp(34px,9.4vw,56px);border-width:2px}
@media (max-width:440px){.swatches button{width:clamp(34px,9.4vw,56px)}}
.avoid .av-row button{width:clamp(46px,12vw,56px)}


/* ===========================================================
   v6 — sharp hero (separate desktop / mobile photos), lighter overlay, accommodation
   =========================================================== */
.hero-bg{inset:-12% 0;background:none !important;transform:none;overflow:hidden}
.hero-bg picture,.hero-bg img{display:block;width:100%;height:100%}
.hero-bg img{object-fit:cover;object-position:50% 62%;image-rendering:auto}
@media (max-width:899px){.hero-bg img{object-position:50% 55%}}
/* lighter, tinted overlay: only enough to keep the text readable */
.hero-overlay{background:linear-gradient(180deg,rgba(36,40,32,.34) 0%,rgba(36,40,32,0) 30%,rgba(36,40,32,0) 64%,rgba(36,40,32,.42) 100%)}
@media (min-width:1100px){
  .hero-overlay{background:linear-gradient(90deg,rgba(36,40,32,0) 0%,rgba(36,40,32,0) 40%,rgba(36,40,32,.30) 72%,rgba(36,40,32,.38) 100%)}
}
@media (max-width:1099px){
  .hero-overlay{background:linear-gradient(180deg,rgba(36,40,32,.46) 0%,rgba(36,40,32,.26) 24%,rgba(36,40,32,0) 44%,rgba(36,40,32,0) 68%,rgba(36,40,32,.46) 100%)}
}
.hero-content .eyebrow,.hero-date,.hero-venue,.countdown-hero{text-shadow:0 1px 14px rgba(20,24,16,.55)}
.hero-names{text-shadow:0 2px 26px rgba(20,24,16,.5)}

/* accommodation */
.stay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1040px;margin:46px auto 0}
.stay-grid .stay-card{max-width:none;margin:0;padding:40px 26px;transition:transform .35s var(--ease),box-shadow .35s}
.stay-grid .stay-card p{margin-bottom:0}
.stay-offer{max-width:720px;margin:34px auto 0;padding:30px 32px;border:1px solid rgba(201,167,122,.55);background:rgba(255,255,255,.55);display:flex;align-items:center;gap:22px;text-align:left}
.stay-offer p{margin:0;font-size:.95rem;line-height:1.8;color:#4a5043}
.stay-offer b{color:var(--gold-deep);font-weight:500}
.offer-badge{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;border:1px solid var(--gold);font-family:var(--serif);font-size:1.15rem;color:var(--gold-deep);text-align:center;line-height:1.1;letter-spacing:.04em}
@media (max-width:860px){.stay-grid{grid-template-columns:1fr;max-width:480px}}
@media (max-width:520px){.stay-offer{flex-direction:column;text-align:center;padding:26px 20px}}
.rsvp-fallback{display:block;margin-top:10px;color:var(--gold-deep)}

/* v6b — readable text on the bright sky without a heavy dark wash */
.hero-content .eyebrow{color:#fff;opacity:.95}
.hero-crest{filter:drop-shadow(0 2px 10px rgba(30,34,26,.55)) brightness(1.08)}
.hero-names .amp{color:#f1d9a6;text-shadow:0 2px 14px rgba(30,34,26,.6)}
.countdown-hero small{color:#f1d9a6;text-shadow:0 1px 10px rgba(30,34,26,.7)}
.hero-overlay{background:linear-gradient(180deg,rgba(58,64,50,.42) 0%,rgba(58,64,50,0) 28%,rgba(58,64,50,0) 66%,rgba(58,64,50,.4) 100%)}
@media (min-width:1100px){
  .hero-overlay{background:radial-gradient(ellipse 36% 62% at 75% 52%,rgba(58,64,50,.52) 0%,rgba(58,64,50,.30) 55%,rgba(58,64,50,0) 100%),linear-gradient(180deg,rgba(58,64,50,.30) 0%,rgba(58,64,50,0) 22%)}
}
@media (max-width:1099px){
  .hero-overlay{background:linear-gradient(180deg,rgba(58,64,50,.58) 0%,rgba(58,64,50,.38) 26%,rgba(58,64,50,0) 46%,rgba(58,64,50,0) 70%,rgba(58,64,50,.42) 100%)}
}

/* v7 */
.hero-bg{background:#4a5043 !important}
.hero-bg img{opacity:0;transition:opacity .8s ease}
.hero-bg img[src]{opacity:1}
.form-note{margin:6px 0 22px;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.7;color:#5a5f52;text-align:center}
.nav-cta{white-space:nowrap}