/* ============================================================
   Kartik & Gauravi — Sehgal side
   Twilight & Marigold.
   Design language: printed stationery, not app UI.
   Sharp corners. Hairline rules. Jharokha arch motif.
   ============================================================ */

:root{
  /* blush paper */
  --ink-0:#faf1ec;
  --ink-1:#f6e7de;
  --ink-2:#f0dbce;
  --violet:#e8d3dc;
  --plum:#e3c8c8;

  /* rose gold: on light ground the "gold" roles run dark */
  --gold-1:#7c4b33;
  --gold-2:#a06b4f;
  --gold-3:#b07f60;
  --mari:#c9704a;
  --mari-lt:#d98a63;

  --cream:#43291d;
  --muted:#9b7666;

  --rule:#c48a6a4d;
  --rule-soft:#c48a6a26;

  --maxw:520px;
  --pad:26px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --step:clamp(56px,11vw,84px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Marcellus",Georgia,serif;
  background:var(--ink-0);
  color:var(--cream);
  font-size:15.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-variant-numeric:lining-nums;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:#c48a6a40}
sup{font-size:.55em;line-height:0;vertical-align:baseline;position:relative;top:-.5em;letter-spacing:.02em}

/* micro-label used everywhere for eyebrows */
.eyebrow,.shead-label,.env-sub,.hero-where,.tl-when,.day-date i,.venue-city,.cd i,.foot-sm{
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;
}

/* ---------- the travelling sky ----------
   night is the base; dusk fades out and dawn fades in as you scroll,
   so the page moves from a Melbourne evening to a Bengaluru sunrise. */
/* flat ink ground; a whisper of pattern, not a gradient wash */
.sky{position:fixed;inset:0;z-index:-5;background:#faf1ec}
.sky::after{content:"";position:absolute;inset:0;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><g fill='none' stroke='%23b07f60' stroke-width='.6'><path d='M28 4l24 24-24 24L4 28z'/><path d='M28 16l12 12-12 12-12-12z'/><circle cx='28' cy='28' r='1.6'/><path d='M0 0l8 8M56 0l-8 8M0 56l8-8M56 56l-8-8'/></g></svg>");
  background-size:56px 56px}
.sky-layer{position:absolute;inset:0;will-change:opacity}
.sky-night{background:transparent}
.sky-dusk{opacity:.5;
  background:linear-gradient(180deg,#e6d0dda6 0%,#efdcd6 38%,transparent 78%)}
.sky-dawn{opacity:0;
  background:linear-gradient(180deg,transparent 0%,transparent 55%,#f6c9a366 80%,#eda86e8c 100%)}

.horizon{position:fixed;left:0;right:0;bottom:0;height:34vh;z-index:-4;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 140%, #e8955233 0%, #d98a6314 46%, transparent 74%);}

/* ---------- marigold petals, drifting ---------- */
.petals{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;contain:strict}
.petals span{position:absolute;top:-8%;will-change:transform,opacity;
  border-radius:52% 8% 52% 8%;
  animation:fall linear infinite}
@keyframes fall{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  10%{opacity:.34}
  70%{opacity:.26}
  100%{transform:translate3d(20px,112vh,0) rotate(150deg);opacity:0}}

/* petal burst on opening the envelope */
.burst{position:fixed;inset:0;width:100%;height:100%;z-index:95;pointer-events:none;display:none}
.burst.on{display:block}

.orb{position:fixed;left:50%;bottom:9vh;z-index:-2;width:74px;height:74px;
  margin-left:-37px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 46% 40%,#fff3e0 0%,#f5b96e 42%,#e8873c 74%,#d97c1e00 100%);
  box-shadow:0 0 46px 20px #e8955238,0 0 130px 60px #d9825a1f;
  will-change:transform,opacity}

.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  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='0.85' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* ============================================================
   ENVELOPE GATE
   ============================================================ */
.gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:30px 22px;
  background:#faf1ec;
  transition:opacity .9s var(--ease),visibility .9s}
.gate::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><g fill='none' stroke='%23b07f60' stroke-width='.6'><path d='M28 4l24 24-24 24L4 28z'/><path d='M28 16l12 12-12 12-12-12z'/><circle cx='28' cy='28' r='1.6'/><path d='M0 0l8 8M56 0l-8 8M0 56l8-8M56 56l-8-8'/></g></svg>");
  background-size:56px 56px}
.gate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34vh;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 140%, #e895522e 0%, transparent 72%)}
.gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-inner{width:100%;max-width:390px;text-align:center}

.gate-eyebrow{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;line-height:2;
  color:var(--gold-3);margin-bottom:34px;padding:0 12px}

.env{position:relative;width:100%;aspect-ratio:1.42/1;margin:0 auto;perspective:1200px;
  animation:hover 6.5s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.gate.opening .env{animation:none}
.env-back{position:absolute;inset:0;background:#e9d5c8;border:1px solid var(--rule)}
.env-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:9px;padding:0 20px 24px;
  background:linear-gradient(168deg,#fdf8f3 0%,#f8ebe1 60%,#f3e1d4 100%);
  border:1px solid #c48a6a59;
  box-shadow:0 22px 44px #8e5b4333;
  transition:transform 1s var(--ease),opacity .8s var(--ease)}
.env-body::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule-soft)}
.env-to{font-family:"Marcellus",Georgia,serif;font-size:1.3rem;line-height:1.3;
  color:var(--gold-1);letter-spacing:.01em;padding:0 6px;white-space:nowrap}
.env-to span{font-style:normal;font-size:.78em;color:var(--gold-3);margin:0 .16em}
.env-rule{width:52px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-3),transparent)}
.env-sub{color:var(--muted);font-size:.6rem}

.env-flap{position:absolute;left:0;right:0;top:0;height:56%;transform-origin:top center;
  background:linear-gradient(180deg,#f2ded1 0%,#ecd2c1 55%,#e5c7b4 100%);
  border:1px solid #c48a6a59;border-bottom:none;
  filter:drop-shadow(0 3px 6px #8e5b4326);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform:rotateX(0);backface-visibility:hidden;
  transition:transform 1s var(--ease)}

.letter{position:absolute;left:7%;right:7%;top:9%;bottom:12%;z-index:1;
  background:linear-gradient(170deg,#fffdfa,#faf0e8);
  border:1px solid #c48a6a66;
  display:grid;place-items:center;
  transition:transform .85s var(--ease),opacity .5s var(--ease)}
.letter::before{content:"";position:absolute;inset:5px;border:1px solid #c48a6a33;
  border-radius:50% 50% 0 0/12% 12% 0 0}
.letter-inner{text-align:center}
.letter-mono{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.55rem;
  letter-spacing:.14em;color:var(--gold-1)}
.letter-mono i{font-family:"Marcellus",serif;font-style:normal;font-size:.75em;color:var(--gold-3)}
.letter-rule{width:44px;height:1px;margin:10px auto;
  background:linear-gradient(90deg,transparent,var(--gold-3),transparent)}
.letter-date{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.gate.letter-out .letter{transform:translateY(-62%)}
.gate.zoom .letter{transform:translateY(-64%) scale(3.4);opacity:0}
.gate.zoom .env-body,.gate.zoom .env-flap,.gate.zoom .env-back{opacity:0;transition:opacity .5s var(--ease)}
.gate.zoom{background:transparent;transition:background .7s var(--ease)}

.seal{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;border:none;cursor:pointer;z-index:4;
  background:radial-gradient(circle at 34% 30%,#d98a63 0%,#b86844 44%,#8e4a2e 100%);
  box-shadow:0 5px 14px #8e5b4340,inset 0 -3px 7px #00000042,inset 0 3px 7px #ffffff40;
  display:grid;place-items:center;
  transition:transform .7s var(--ease),opacity .6s var(--ease);
  animation:pulse 2.8s ease-in-out infinite}
.seal-ring{position:absolute;inset:6px;border-radius:50%;border:1px solid #ffe8d980}
.seal-letter{font-family:"Marcellus",Georgia,serif;font-size:1.6rem;color:#fdf3ea;line-height:1}
@keyframes pulse{
  0%{box-shadow:0 5px 14px #8e5b4340,inset 0 -3px 7px #00000042,inset 0 3px 7px #ffffff40,0 0 0 0 #c9704a4d,0 0 0 0 #c9704a24}
  60%{box-shadow:0 5px 14px #8e5b4340,inset 0 -3px 7px #00000042,inset 0 3px 7px #ffffff40,0 0 0 10px #c9704a00,0 0 0 18px #c9704a00}
  100%{box-shadow:0 5px 14px #8e5b4340,inset 0 -3px 7px #00000042,inset 0 3px 7px #ffffff40,0 0 0 0 #c9704a00,0 0 0 0 #c9704a00}}

.gate-hint{margin-top:30px;font-family:"Marcellus",Georgia,serif;font-style:normal;
  font-size:1.02rem;letter-spacing:.04em;color:var(--cream);
  animation:blink 2.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.55}50%{opacity:1}}

.gate.opening .seal{transform:translate(-50%,-50%) scale(2) rotate(20deg);opacity:0}
.gate.opening .env-flap{transform:rotateX(-172deg)}
.gate.opening .env-body{transform:translateY(30px) scale(.975);opacity:0}
.gate.opening .gate-hint,.gate.opening .gate-eyebrow{animation:none;opacity:0;transition:opacity .35s var(--ease)}

/* ============================================================
   TOP BAR + NAV
   ============================================================ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.topbar.solid{background:#faf1ecf2;box-shadow:0 1px 0 var(--rule-soft);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.brand{position:relative;width:42px;height:42px;display:grid;place-items:center}
.ring{position:absolute;inset:0;width:42px;height:42px;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:#b07f6038;stroke-width:1}
.ring-fill{fill:none;stroke:var(--gold-2);stroke-width:1;stroke-linecap:butt;
  stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .1s linear}
.brand-mono{font-family:"Marcellus",Georgia,serif;font-size:.82rem;letter-spacing:.1em;
  color:var(--gold-1);padding-left:.1em}

.ham{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:9px;z-index:60}
.ham span{display:block;width:22px;height:1px;background:var(--gold-2);transition:.4s var(--ease)}
.ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav{position:fixed;inset:0;z-index:50;
  background:linear-gradient(180deg,#faf1ecfa,#f3e2d8fd);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.nav.open{opacity:1;visibility:visible}
.nav a{font-family:"Marcellus",Georgia,serif;font-size:1.32rem;letter-spacing:.06em;
  color:var(--cream);padding:13px 22px;opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.nav.open a{opacity:1;transform:none}
.nav.open a:nth-child(1){transition-delay:.05s}
.nav.open a:nth-child(2){transition-delay:.1s}
.nav.open a:nth-child(3){transition-delay:.15s}
.nav.open a:nth-child(4){transition-delay:.2s}
.nav.open a:nth-child(5){transition-delay:.25s}
.nav.open a:nth-child(6){transition-delay:.3s}
.nav-orn{margin-top:24px;color:var(--gold-3);font-size:.9rem;opacity:0;transition:opacity .6s .38s}
.nav.open .nav-orn{opacity:.7}

/* ============================================================
   SHARED
   ============================================================ */
.site{max-width:var(--maxw);margin:0 auto;position:relative}
.sec{padding:var(--step) var(--pad) 0;text-align:center}
.sec:last-of-type{padding-bottom:8px}

/* numbered section header, printed-programme style */
.shead{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.shead-rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rule));
  transform:scaleX(0);transform-origin:right center;transition:transform 1.1s var(--ease) .15s}
.shead-rule:last-child{background:linear-gradient(90deg,var(--rule),transparent);transform-origin:left center}
.shead.in .shead-rule{transform:scaleX(1)}
.shead-num{font-family:"Marcellus",Georgia,serif;font-style:normal;font-size:.82rem;
  color:var(--gold-3);letter-spacing:.06em}
.shead-label{color:var(--gold-2);white-space:nowrap}

.sec-sub{font-family:"Marcellus",Georgia,serif;font-style:normal;font-weight:400;
  font-size:1.24rem;color:var(--muted);margin-bottom:34px;letter-spacing:.01em}

/* the motif */
.motif{display:flex;justify-content:center;margin:26px auto}
.motif svg{width:64px;height:20px;fill:none;stroke:var(--gold-3);stroke-width:1;
  stroke-linecap:round;overflow:visible}
.motif circle{fill:var(--gold-2);stroke:none}
.motif.sm svg{width:48px;height:15px}

/* panels: printed card, double hairline, no radius */
.panel{position:relative;padding:44px 24px;
  background:linear-gradient(168deg,#ffffff99 0%,#fdf4ee99 100%);
  border:1px solid var(--rule)}
.panel::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule-soft);pointer-events:none}

/* arch device */
/* the invitation's inner rule arches, echoing a jharokha */
.invite-panel::before{border-radius:50% 50% 0 0 / 15% 15% 0 0}
.arch{border-radius:50% 50% 0 0 / 26% 26% 0 0;overflow:hidden}

/* buttons: sharp, printed */
.btn{display:inline-block;border:none;cursor:pointer;font-family:"Marcellus",serif;
  font-size:.68rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:#fdf3ea;padding:15px 30px;
  background:linear-gradient(180deg,#c9835f,#a86a4b 58%,#8e5236);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.btn:active{transform:translateY(1px);opacity:.9}
.btn.ghost{background:none;color:var(--gold-2);border:1px solid var(--rule);
  padding:14px 8px;font-size:.62rem;letter-spacing:.22em;text-align:center}
.btn.ghost:active{background:#c48a6a1a}

.note{margin-top:26px;font-family:"Marcellus",Georgia,serif;font-style:normal;
  font-weight:400;font-size:1.02rem;color:var(--muted);line-height:1.6}

.reveal{opacity:0;transform:translateY(12px);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;display:block;padding:0 0 44px;text-align:center}
.hero-media{position:relative;width:100%;line-height:0}
.hero-photo{width:100%;height:auto;display:block;
  filter:saturate(.94) contrast(1.02) brightness(.97)}
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,#faf1ec99 0%,transparent 14%),
    linear-gradient(180deg,transparent 72%,#faf1ec 100%);}

.hero-copy{position:relative;z-index:2;width:100%;max-width:400px;margin:26px auto 0;padding:0 26px}

/* choreographed entrance: letters, then everything else in order */
.names .ch{display:inline-block;opacity:0;transform:translateY(16px);filter:blur(5px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:var(--d,0s)}
.hero.begin .names .ch{opacity:1;transform:none;filter:blur(0)}
.h-item{opacity:0;transform:translateY(11px);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.hero.begin .h-item{opacity:1;transform:none}
.hero.begin .eyebrow{transition-delay:.05s}
.hero.begin .motif{transition-delay:1.15s}
.hero.begin .hero-when{transition-delay:1.3s}
.hero.begin .hero-where{transition-delay:1.42s}
.hero.begin .countdown{transition-delay:1.58s}
.hero.begin .btn{transition-delay:1.78s}
.eyebrow{color:var(--gold-3);margin-bottom:20px}
.names{font-family:"Marcellus",Georgia,serif;font-weight:400;line-height:1.08;letter-spacing:.02em}
.names span{display:block}
.names .n1,.names .n2{
  font-size:clamp(2.7rem,13.5vw,3.8rem);
  filter:drop-shadow(0 1px 0 #ffffff8c) drop-shadow(0 2px 6px #43291d33)}
.names .ch{
  background:
    linear-gradient(115deg,transparent 43%,#fff6efb3 50%,transparent 57%),
    linear-gradient(177deg,
      #5e3a28 0%, #8e5b43 12%, #cf9573 26%, #f0cdb8 34%,
      #b3765a 44%, #7c4b33 55%, #653a26 60%,
      #b3765a 72%, #ecc4ad 86%, #8e5b43 100%);
  background-size:320% 100%,100% 100%;
  background-position:190% 0,0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero.begin .names .ch{animation:glint 9.5s linear infinite;animation-delay:var(--g,2s)}
.names.tilt .ch{animation:none !important;
  background-position:calc(var(--tilt,190) * 1%) 0,0 0 !important;
  transition:background-position .15s linear}
@keyframes glint{
  0%{background-position:190% 0,0 0}
  9%{background-position:-90% 0,0 0}
  100%{background-position:-90% 0,0 0}}
.names .amp{font-family:"Marcellus",Georgia,serif;font-weight:400;
  font-size:clamp(1.3rem,5.2vw,1.6rem);color:var(--gold-2);margin:5px 0 3px}

.hero-when{margin-top:4px;font-size:1rem;letter-spacing:.14em;color:var(--cream)}
.hero-where{color:var(--muted);margin-top:9px}

/* countdown: bare numerals divided by hairlines */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);
  margin:30px 0 30px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:15px 0}
.cd{position:relative;padding:0 2px}
.cd+.cd::before{content:"";position:absolute;left:0;top:9%;bottom:9%;width:1px;background:var(--rule-soft)}
.cd b{display:block;font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.62rem;
  color:var(--gold-1);line-height:1.15;letter-spacing:.01em;font-variant-numeric:lining-nums tabular-nums}
.cd i{display:block;font-style:normal;color:var(--muted);margin-top:5px;font-size:.56rem;letter-spacing:.26em}

.scroll-cue{position:relative;margin:34px auto 0;z-index:2;display:block;
  width:1px;height:30px;background:linear-gradient(180deg,transparent,var(--gold-3));overflow:hidden}
.scroll-cue span{display:block;width:3px;height:3px;border-radius:50%;background:var(--gold-1);
  margin-left:-1px;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(30px);opacity:0}}

/* ============================================================
   INVITATION
   ============================================================ */
.greeting{font-family:"Marcellus",Georgia,serif;font-style:normal;font-weight:300;
  font-size:1.4rem;color:var(--gold-1);margin-bottom:32px;line-height:1.4;word-break:break-word}
.invite-panel{padding:64px 24px 48px}
.invoc{font-family:"Noto Serif Devanagari",Georgia,serif;font-size:.95rem;letter-spacing:.05em;
  color:var(--gold-3);margin-bottom:20px}
.inv-lead{font-family:"Marcellus",Georgia,serif;font-size:1.24rem;font-weight:400;
  color:var(--gold-1);line-height:1.4;letter-spacing:.01em}
.inv-line{font-size:.96rem;color:var(--muted);margin:16px 0;line-height:1.75}
.inv-name{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:2.1rem;line-height:1.22;letter-spacing:.02em;
  background:
    linear-gradient(177deg,
      #5e3a28 0%, #8e5b43 14%, #cf9573 28%, #f0cdb8 36%,
      #b3765a 46%, #7c4b33 57%, #653a26 62%,
      #b3765a 74%, #ecc4ad 88%, #8e5b43 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 #ffffff80)}
.inv-weds{font-family:"Marcellus",Georgia,serif;font-style:normal;font-size:1rem;
  color:var(--gold-3);margin:8px 0}
.inv-foot{font-family:"Marcellus",Georgia,serif;font-style:normal;font-weight:400;
  font-size:1.05rem;color:var(--muted);line-height:1.7}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline{position:relative;text-align:left;padding-left:24px;margin-top:4px}
.timeline::before{content:"";position:absolute;left:3px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,transparent,var(--rule) 10%,var(--rule) 90%,transparent)}
.tl-item{position:relative;padding-bottom:54px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-24px;top:8px;width:7px;height:7px;
  transform:rotate(45deg) scale(0);background:var(--gold-2);box-shadow:0 0 0 4px var(--ink-0);
  transition:transform .6s var(--ease) .3s}
.reveal.in .tl-dot{transform:rotate(45deg) scale(1)}
.tl-when{color:var(--gold-3);margin-bottom:8px;font-size:.6rem}
.tl-title{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.5rem;
  color:var(--gold-1);line-height:1.25;margin-bottom:14px;letter-spacing:.005em}
.tl-text{font-size:1.02rem;color:var(--cream);opacity:.8;line-height:1.8}
.tl-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:22px 0 4px}
.tl-pair .tl-photo{margin:0}
.tl-photo{margin:24px 0;position:relative}
.tl-photo{opacity:0;transform:translate3d(0,22px,0) scale(.965);
  transition:opacity 1.15s var(--ease) .15s,transform 1.15s var(--ease) .15s;
  will-change:transform,opacity}
.reveal.in .tl-photo{opacity:1;transform:translate3d(0,0,0) scale(1)}
.tl-photo img{width:100%;height:auto;filter:saturate(.95) contrast(1.02) brightness(1);
  transform:scale(1.06)}
.reveal.in .tl-photo img{animation:kb 18s ease-in-out .9s infinite alternate}
.tl-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid #c48a6a38;border-radius:inherit;
  background:linear-gradient(180deg,#ffffff21,transparent 42%,#43291d1a)}

/* ============================================================
   CELEBRATIONS — programme rows, not cards
   ============================================================ */
.days{border-top:1px solid var(--rule)}
.day{display:flex;align-items:baseline;gap:20px;text-align:left;
  padding:24px 4px;border-bottom:1px solid var(--rule-soft)}
.day:last-child{border-bottom:1px solid var(--rule)}
.day-date{flex:0 0 46px}
.day-date b{display:block;font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.72rem;
  color:var(--gold-1);line-height:1;font-variant-numeric:lining-nums}
.day-date i{display:block;font-style:normal;color:var(--gold-3);margin-top:6px;font-size:.56rem}
.day-body h3{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.14rem;
  color:var(--cream);line-height:1.35;margin-bottom:7px;letter-spacing:.005em}
.day-body p{font-size:.94rem;color:var(--muted);line-height:1.65}
.day-body p+p{margin-top:3px}

/* ============================================================
   DRESS CODE
   ============================================================ */
.dresslist{border-top:1px solid var(--rule)}
.dress{padding:22px 8px;border-bottom:1px solid var(--rule-soft)}
.dress:last-child{border-bottom:1px solid var(--rule)}
.dress h3{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.16rem;
  letter-spacing:.04em;color:var(--gold-1);margin-bottom:5px}
.dress p{font-size:.95rem;color:var(--muted);line-height:1.6}

/* ============================================================
   VENUE + SAVE
   ============================================================ */
.venue-photo{margin:0 0 18px;position:relative}
.venue-photo{will-change:transform,opacity}
.venue-photo img{width:100%;height:auto;filter:saturate(.95) contrast(1.02) brightness(1);
  transform:scale(1.06)}
.venue-photo.in img{animation:kb 18s ease-in-out .9s infinite alternate}
.venue-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid #c48a6a38;border-radius:inherit;
  background:linear-gradient(180deg,#ffffff21,transparent 40%,#43291d1a)}
.venue-photo+.panel{margin-top:0}
.panel+.venue-photo{margin-top:18px}

.venue-name{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.8rem;
  color:var(--gold-1);line-height:1.2;letter-spacing:.005em}
.venue-city{color:var(--muted);margin-top:10px}
.venue-addr{font-size:.98rem;color:var(--cream);opacity:.8;line-height:1.75}
.venue-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.venue-getting{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule-soft);
  font-family:"Marcellus",Georgia,serif;font-style:normal;font-weight:400;
  font-size:1rem;color:var(--muted);line-height:1.6}

.save-panel{padding:52px 24px 46px}
.save-script{font-family:"Marcellus",Georgia,serif;font-style:normal;font-weight:400;
  font-size:1.2rem;color:var(--muted)}
.save-names{font-family:"Marcellus",Georgia,serif;font-size:1.35rem;color:var(--gold-1);
  margin-top:6px;line-height:1.35;letter-spacing:.005em}
.save-dates{font-size:1rem;letter-spacing:.14em;color:var(--cream);margin-bottom:28px}
.save-fine{margin-top:18px;font-size:.74rem;color:var(--muted);letter-spacing:.05em}

.foot{text-align:center;padding:var(--step) 26px 46px}
.foot p{font-family:"Marcellus",Georgia,serif;font-size:1.15rem;letter-spacing:.06em;color:var(--gold-2)}
.foot-sm{font-family:"Marcellus",serif !important;color:var(--muted) !important;
  font-size:.58rem !important;letter-spacing:.3em !important;margin-top:11px}

/* ============================================================
   AUDIO
   ============================================================ */
.audio-btn{position:fixed;right:14px;bottom:14px;z-index:45;width:40px;height:40px;cursor:pointer;
  border:1px solid var(--rule);background:#faf1ece6;display:grid;place-items:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.audio-btn[hidden]{display:none}
.wave{display:flex;align-items:center;gap:2.5px;height:14px}
.wave i{display:block;width:1.5px;height:4px;background:var(--gold-2);transition:height .3s var(--ease)}
.audio-btn.playing .wave i{animation:eq .9s ease-in-out infinite}
.audio-btn.playing .wave i:nth-child(2){animation-delay:.18s}
.audio-btn.playing .wave i:nth-child(3){animation-delay:.36s}
@keyframes eq{0%,100%{height:3px}50%{height:13px}}

/* ============================================================
   RESPONSIVE + MOTION
   ============================================================ */
@media (min-width:540px){
  :root{--pad:34px}
  .env-to{font-size:1.62rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .petals,.scroll-cue,.burst,.orb{display:none !important}
  .env{animation:none}
  .names .ch,.h-item{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;animation:none !important}
  .tl-photo,.venue-photo{opacity:1 !important;transform:none !important}
  .tl-photo img,.venue-photo img{animation:none !important;transform:none !important}
  .shead-rule{transform:none !important}
  .tl-dot{transform:rotate(45deg) !important}
  .seal,.gate-hint{animation:none}
  .gate-hint{opacity:.8}
  .reveal{opacity:1;transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}