/* ==========================================================================
   Aryan & Meera — wedding invitation
   Colours and sizes all live in the :root block below. Change them there and
   the whole page follows.
   ========================================================================== */

:root{
  /* Palette, pulled from the illustrations themselves */
  --night:      #0C2E3E;
  --teal:       #123C50;
  --teal-deep:  #0A2634;
  --gold:       #C9A227;
  --gold-soft:  #E3C97A;
  --gold-pale:  #F0DFAE;
  --mint:       #9CCDB4;
  --mint-deep:  #7FB79C;
  --navy:       #1B3A5C;
  --plum:       #3E3355;
  --plum-deep:  #2C2340;
  --butter:     #F7EBA8;
  --cream:      #F5E6C8;

  /* Type */
  --display: "Fraunces", Georgia, serif;
  --body:    "Cormorant Garamond", Georgia, serif;
  --util:    "Jost", system-ui, sans-serif;
  --deva:    "Tiro Devanagari Hindi", serif;

  /* Rhythm */
  --gut: clamp(1.25rem, 5vw, 3rem);
  --pad: clamp(4.5rem, 13vw, 9rem);
  --frame: clamp(26px, 5.5vw, 92px);    /* width of the shadow-box edges */
  --tile: clamp(190px, 34vw, 400px);    /* wallpaper motif scale */

  /* Washes laid over the wallpapers so type stays readable on top of them */
  --wash-teal:   linear-gradient(rgba(12,46,62,.74), rgba(12,46,62,.74));
  --wash-mint:   linear-gradient(rgba(156,205,180,.66), rgba(156,205,180,.66));
  --wash-plum:   linear-gradient(rgba(44,35,64,.68), rgba(44,35,64,.68));
  --wash-butter: linear-gradient(rgba(247,235,168,.68), rgba(247,235,168,.68));

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--night);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(1.0625rem,.95rem + .5vw,1.25rem);
  line-height:1.7;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:400; line-height:1.05; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:5px; border-radius:2px; }

section{ position:relative; }

/* ── The shadow box ───────────────────────────────────────────────────────
   Two paper-cut pillars pinned to the viewport edges for the whole scroll,
   so every section reads as sitting inside a paper diorama.               */
.diorama{ position:fixed; inset:0; z-index:40; pointer-events:none; }
.diorama__edge{
  position:absolute; top:-4%; bottom:-4%; width:var(--frame);
  background-repeat:repeat-y; background-size:100% auto;
  filter:drop-shadow(0 0 14px rgba(0,0,0,.5));
  opacity:.72;
  -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.diorama__edge--l{ left:0;  background-image:url(../assets/hero-pillar-left.png); }
.diorama__edge--r{ right:0; background-image:url(../assets/hero-pillar-right.png); }
.diorama__inner{
  position:absolute; inset:0;
  box-shadow:inset 0 0 clamp(40px,9vw,150px) rgba(0,0,0,.55);
}

/* ── Music toggle ────────────────────────────────────────────────────────── */
.music{
  position:fixed; z-index:60;
  right:calc(var(--frame) + .6rem); bottom:1.1rem;
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem .95rem .55rem .7rem;
  border:1px solid rgba(227,201,122,.5); border-radius:999px;
  background:rgba(10,38,52,.78); backdrop-filter:blur(9px);
  color:var(--gold-pale); font-family:var(--util);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease);
}
.music:hover{ background:rgba(18,60,80,.92); border-color:var(--gold-soft); }
.music__icon{
  width:9px; height:11px; flex:none;
  border-left:3px solid currentColor; border-right:3px solid currentColor;
}
.music[aria-pressed="false"] .music__icon{
  width:0; height:0; border:none;
  border-left:9px solid currentColor;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
@media (max-width:560px){ .music__label{ display:none; } }

/* Line-art icons are masked, not placed as images, so each section can
   colour them exactly. Swap the file in content.js and the colour follows. */
.icon{
  display:block; background-color:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}

/* ── Shared bits ─────────────────────────────────────────────────────────── */
.rule{ width:min(250px,48%); margin:clamp(1rem,3vw,1.8rem) auto; opacity:.85; }
.rule--dark{ filter:brightness(0) saturate(100%) invert(16%) sepia(28%) saturate(1100%) hue-rotate(233deg); opacity:.5; }

.section-head{
  font-family:var(--display);
  font-size:clamp(2.4rem,9vw,4.6rem);
  font-variation-settings:"SOFT" 40,"WONK" 1;
  color:var(--gold-soft);
  text-align:center; letter-spacing:-.015em;
  padding:0 var(--gut);
}
.section-head em{
  display:block; font-style:normal;
  font-family:var(--body);
  font-size:.34em; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); opacity:.85; margin-top:1.1rem;
}
.section-head--dark{ color:var(--navy); }
.section-head--dark em{ color:var(--navy); opacity:.6; }
.section-head--light{ color:var(--butter); }

.sanskrit{
  font-family:var(--deva); font-size:clamp(1.05rem,4vw,1.5rem);
  color:var(--gold-soft); text-align:center; letter-spacing:.04em;
  padding:0 var(--gut);
}

/* Scroll reveal — see js/main.js */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ══ 1. HERO ═════════════════════════════════════════════════════════════ */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
  padding:26vh var(--gut) 24vh;
}
.hero__sky{
  position:absolute; inset:-12% 0;
  background:url(../assets/bg-night-sky.jpg) center/cover;
  z-index:-3;
}
.hero__sky::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(10,38,52,.75) 100%);
}
.hero__stars{
  position:absolute; inset:-14% -8%;
  background:url(../assets/stars-sky.png) center/clamp(420px,88vw,760px) repeat;
  opacity:.85; z-index:-2;
}
.hero__names{ text-align:center; z-index:2; }
.hero__eyebrow{
  font-family:var(--util); font-size:clamp(.62rem,2.2vw,.7rem); font-weight:300;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin-bottom:clamp(1rem,3vw,1.8rem);
}
.hero__title{ display:grid; gap:.1em; }
.hero__name{
  display:block;
  font-family:var(--display);
  font-size:clamp(3.2rem,17vw,8.5rem);
  font-variation-settings:"SOFT" 60,"WONK" 1;
  font-weight:300; line-height:.94; letter-spacing:-.035em;
  color:var(--gold-soft);
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.hero__amp{
  display:block;
  font-family:var(--body); font-style:italic;
  font-size:clamp(1.1rem,4.6vw,1.9rem);
  letter-spacing:.3em; text-transform:lowercase;
  color:var(--gold); opacity:.9;
  margin:.15em 0;
}
.hero__when{
  margin-top:clamp(1.4rem,4vw,2.4rem);
  font-family:var(--util); font-weight:300;
  font-size:clamp(.72rem,2.6vw,.85rem);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream); opacity:.8;
}

.hero__arch{
  position:absolute; top:0; left:50%; translate:-50% 0;
  width:min(150%,1200px); z-index:1; pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 78%, transparent 97%);
          mask-image:linear-gradient(#000 78%, transparent 97%);
}
.hero__balloon{ position:absolute; left:5%;  top:52%; width:clamp(70px,15vw,158px); z-index:2; }
.hero__castle { position:absolute; right:-3%; bottom:2%; width:clamp(150px,42vw,380px); z-index:2; }
.hero__moon   { position:absolute; right:6%; top:40%; width:clamp(48px,10vw,100px); z-index:2; }

.hero__scroll{
  position:absolute; bottom:clamp(1.6rem,5vh,3rem); left:50%; translate:-50% 0;
  width:26px; height:44px; border:1px solid rgba(227,201,122,.45);
  border-radius:999px; display:grid; place-items:start center; padding-top:8px;
  z-index:3;
}
.hero__scroll span{
  width:3px; height:8px; border-radius:2px; background:var(--gold-soft);
  animation:drop 1.9s var(--ease) infinite;
}
@keyframes drop{ 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 100%{opacity:0;transform:translateY(15px)} }

/* ══ 2. BLESSING ═════════════════════════════════════════════════════════ */
.blessing{
  background-color:var(--teal);
  background-image:var(--wash-teal), url(../assets/bg-teal-damask.jpg);
  background-size:auto, var(--tile);
  background-position:center, center;
  background-repeat:repeat, repeat;
  padding:calc(var(--pad) * .8) var(--gut) calc(var(--pad) * .18);
  text-align:center; overflow:hidden;
}
.blessing::before{
  content:""; position:absolute; inset:0 0 auto; height:34%;
  background:linear-gradient(var(--night), transparent);
  pointer-events:none;
}
.blessing__scene{
  position:relative; width:min(660px,100%); margin:0 auto clamp(1.2rem,4vw,2.4rem);
  aspect-ratio:4/3;
}
.blessing__land{
  position:absolute; left:50%; bottom:10%; translate:-50% 0; width:96%;
  /* Feather the edges so the panel sits in the wallpaper instead of on it */
  -webkit-mask-image:radial-gradient(96% 96% at 50% 48%, #000 34%, transparent 86%);
          mask-image:radial-gradient(96% 96% at 50% 48%, #000 34%, transparent 86%);
}
.blessing__ring{
  position:absolute; left:50%; top:1%; translate:-50% 0;
  width:30%; z-index:2; filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));
}
.blessing__ganesh{ position:absolute; bottom:0; width:21%; z-index:3;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.45)); }
.blessing__ganesh--l{ left:1%; }
.blessing__ganesh--r{ right:1%; }
.blessing__om{ width:clamp(58px,13vw,104px); margin:0 auto 1.4rem; }

/* ══ 3. INVITATION ═══════════════════════════════════════════════════════ */
.invitation{
  background-color:var(--teal);
  background-image:var(--wash-teal), url(../assets/bg-teal-damask.jpg);
  background-size:auto, var(--tile);
  background-position:center, center;
  background-repeat:repeat, repeat;
  padding:calc(var(--pad) * .12) var(--gut) calc(var(--pad) * .55);
  text-align:center;
}
.invitation__lede{
  font-family:var(--util); font-weight:300;
  font-size:clamp(.66rem,2.2vw,.8rem);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); opacity:.85;
  max-width:34ch; margin:clamp(1rem,3vw,1.7rem) auto .8rem;
  line-height:1.85;
}
.invitation__elders{
  font-size:clamp(1.15rem,4.4vw,1.55rem);
  color:var(--cream); line-height:1.5;
}
.invitation__sep{ color:var(--gold); opacity:.45; margin:.85rem 0; font-size:.6rem; }
.invitation__pair{
  display:grid; gap:.06em; margin:clamp(1.2rem,4vw,2rem) 0;
  font-family:var(--display);
  font-size:clamp(2.1rem,10.5vw,5.4rem);
  font-variation-settings:"SOFT" 60,"WONK" 1;
  font-weight:300; letter-spacing:-.03em; line-height:1.02;
  text-wrap:balance; color:var(--gold-soft);
}
.invitation__pair em{
  font-family:var(--body); font-style:italic;
  font-size:.3em; color:var(--gold); letter-spacing:0;
}

/* ══ 4. EVENTS ═══════════════════════════════════════════════════════════ */
.events{
  background-color:var(--teal);
  background-image:var(--wash-teal), url(../assets/bg-teal-damask.jpg);
  background-size:auto, var(--tile);
  background-position:center, center;
  background-repeat:repeat, repeat;
  padding:var(--pad) var(--gut);
  overflow:hidden;
}
/* Zero-height sticky rail: art hangs off it and rides down beside the cards */
/* Behind the cards, not over them — the floating art is atmosphere,
   and an invitation should never have something sitting on its face. */
.rail{ position:sticky; top:0; height:0; z-index:0; pointer-events:none; }
.rail img{ position:absolute; filter:drop-shadow(0 16px 26px rgba(0,0,0,.45)); }
.rail__moon   { right:-1%; top:16vh; width:clamp(54px,12vw,116px); }
.rail__balloon{ left:-2%;  top:52vh; width:clamp(66px,14vw,142px); }
.rail__castle { left:-3%;  top:78vh; width:clamp(112px,26vw,268px); }

.events__list{
  display:grid; gap:clamp(5rem,15vw,9rem);
  margin-top:clamp(3rem,9vw,5.5rem);
  position:relative; z-index:2;
}
.card__frame{ position:relative; z-index:2; }
.event{ text-align:center; }

/* ── Invitation cards ───────────────────────────────────────────────────
   The artwork is a complete invitation, so it is shown whole — never
   cropped. The frame around it borrows the same gold rule, inner rim and
   deep shadow used by the medallions, so a card reads as part of the page
   rather than something pasted on top of it.                            */
.card{ margin:0; display:flex; flex-direction:column; align-items:center; }

.card__frame{
  position:relative;
  width:min(400px,88%);
  border:2px solid rgba(201,162,39,.75);
  border-radius:10px;
  overflow:hidden;
  background:var(--teal-deep);
  box-shadow:
    0 30px 58px rgba(0,0,0,.5),          /* the card sits above the page */
    0 0 0 1px rgba(10,38,52,.9),         /* dark seam outside the gold   */
    inset 0 0 0 1px rgba(240,223,174,.28); /* fine highlight inside it   */
}
/* a second hairline, echoing the double rule on the round sections */
.card__frame::after{
  content:""; position:absolute; inset:6px;
  border:1px solid rgba(227,201,122,.30);
  border-radius:5px; pointer-events:none;
}
.card__frame img{ width:100%; height:auto; display:block; }

.card__note{
  max-width:34ch;
  margin:clamp(1.1rem,3.4vw,1.7rem) auto 0;
  font-size:clamp(1.02rem,3.7vw,1.2rem);
  line-height:1.6;
  color:var(--cream); opacity:.88;
}

.card__map{
  display:inline-block; margin-top:clamp(.9rem,2.6vw,1.2rem);
  font-family:var(--util); font-weight:300;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-soft); text-decoration:none;
  border-bottom:1px solid rgba(227,201,122,.45); padding-bottom:.3rem;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.card__map:hover{ color:var(--butter); border-color:var(--butter); }


/* ══ 5/7/9. THE THREE ROUND SECTIONS ═════════════════════════════════════ */
.medal{ padding:var(--pad) var(--gut); display:grid; place-items:center; overflow:hidden; }
.medal__disc{
  position:relative;
  width:min(560px,100%); aspect-ratio:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.5rem,2vw,1rem);
  border-radius:50%;
  padding:clamp(2rem,7vw,3.5rem);
  text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.medal__disc::after{
  content:""; position:absolute; inset:clamp(9px,2.2vw,17px);
  border-radius:50%; border:1px solid currentColor; opacity:.35; pointer-events:none;
}

/* The porthole. The ring image has a real hole; the art sits behind it,
   clipped to a circle whose size was measured from each PNG. */
.medal__window{
  position:relative; width:clamp(120px,32%,190px); aspect-ratio:1;
  margin-bottom:clamp(.4rem,2vw,1rem);
}
.medal__art{
  position:absolute; border-radius:50%; overflow:hidden;
  background-size:auto 150%; background-position:center;
  box-shadow:inset 0 0 22px rgba(0,0,0,.55);
}
.medal__ring{ position:relative; width:100%; z-index:2;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.4)); }

/* Hole geometry, measured per PNG */
[data-hole="ring"]        .medal__art{ width:62%; height:62%; left:19%;   top:26%;   }
[data-hole="mangalsutra"] .medal__art{ width:60%; height:60%; left:20.5%; top:15%;   }
[data-hole="bezel"]       .medal__art{ width:47%; height:47%; left:26.5%; top:26.5%; }

.medal__title{
  font-family:var(--display);
  font-size:clamp(2rem,8vw,3.4rem);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:300; letter-spacing:-.02em;
}
.medal__note{
  font-size:clamp(1rem,3.6vw,1.15rem); opacity:.82;
  max-width:26ch;
}
.medal__link{ display:inline-block; margin-top:.6rem; transition:transform .3s var(--ease); }
.medal__link:hover{ transform:translateY(-4px) scale(1.05); }
.medal__link .icon{ width:clamp(58px,14vw,88px); aspect-ratio:1; }
.medal--route  .medal__link .icon{ --ico:url(../assets/icon-pin.png); }
.medal--rsvp   .medal__link .icon{ --ico:url(../assets/icon-rsvp.png); }
.medal--social .medal__link .icon{ --ico:url(../assets/icon-instagram.png); }

.medal--route{ background:var(--night); }
.medal--route .medal__disc{
  background-color:#164B63;
  background-image:var(--wash-teal), url(../assets/bg-teal-damask.jpg);
  background-size:auto, 220px;
  background-position:center, center;
  background-repeat:repeat, repeat;
  color:var(--gold-soft);
  border:2px solid rgba(201,162,39,.55);
}
.medal--rsvp{ background:var(--mint); }
.medal--rsvp .medal__disc{
  background-color:var(--mint);
  background-image:var(--wash-mint), url(../assets/bg-mint-toile.jpg);
  background-size:auto, 220px;
  background-position:center, center;
  background-repeat:repeat, repeat;
  color:var(--navy);
  border:2px solid rgba(27,58,92,.5);
}
.medal--social{ background:var(--butter); }
.medal--social .medal__disc{
  background-color:var(--plum);
  background-image:var(--wash-plum), url(../assets/bg-plum-brocade.jpg);
  background-size:auto, 220px;
  background-position:center, center;
  background-repeat:repeat, repeat;
  color:var(--butter);
  border:2px solid rgba(247,235,168,.4);
}

/* ══ 6. COUPLE ═══════════════════════════════════════════════════════════ */
.couple{
  background-color:var(--mint);
  background-image:var(--wash-mint), url(../assets/bg-mint-toile.jpg);
  background-size:auto, var(--tile);
  background-position:center, center;
  background-repeat:repeat, repeat;
  color:var(--navy);
  padding:var(--pad) var(--gut);
  text-align:center;
}
.couple__frame{ position:relative; width:min(360px,78%); margin:clamp(2.5rem,8vw,4rem) auto 0; }
.couple__bow{
  width:clamp(96px,26%,140px); color:var(--navy);
  margin:0 auto -6%; position:relative; z-index:3; display:block;
}
.couple__arch{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  border-radius:50% 50% 10px 10px / 32% 32% 2% 2%;
  border:3px solid var(--navy);
  box-shadow:0 24px 44px rgba(27,58,92,.3);
}
.couple__arch::after{
  content:""; position:absolute; inset:9px; pointer-events:none;
  border-radius:inherit; border:1.5px dashed rgba(27,58,92,.55);
}
.couple__arch img{ width:100%; height:100%; object-fit:cover; }
.couple__note{
  max-width:52ch; margin:clamp(2.2rem,7vw,3.4rem) auto 0;
  font-size:clamp(1.1rem,4vw,1.32rem); line-height:1.75;
  color:var(--navy); opacity:.9;
}

/* ══ 8. BEFORE YOU COME ══════════════════════════════════════════════════ */
.know{
  background-color:var(--plum);
  background-image:var(--wash-plum), url(../assets/bg-plum-brocade.jpg);
  background-size:auto, var(--tile);
  background-position:center, center;
  background-repeat:repeat, repeat;
  color:var(--butter);
  padding:var(--pad) var(--gut);
  text-align:center;
}
.know::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:clamp(38px,8vw,86px);
  background:url(../assets/divider-scallop.png) center top/cover no-repeat;
  transform:scaleY(-1); transform-origin:top;
}
.know__mark{
  width:clamp(48px,11vw,76px); aspect-ratio:1;
  margin:0 auto clamp(1rem,3vw,1.6rem);
  --ico:url(../assets/icon-question.png);
}
.know__intro{ max-width:44ch; margin:1.6rem auto 0; opacity:.8; }
.know__list{
  display:grid; gap:clamp(2.2rem,6vw,3rem);
  margin-top:clamp(3rem,9vw,4.5rem);
  grid-template-columns:1fr;
}
@media (min-width:720px){ .know__list{ grid-template-columns:1fr 1fr; } }
.know__item{ max-width:34ch; margin-inline:auto; }
.know__item .icon{ width:clamp(46px,10vw,66px); aspect-ratio:1; margin:0 auto .9rem; }
.know__item h3{
  font-family:var(--display); font-size:clamp(1.5rem,5.5vw,2rem);
  font-variation-settings:"SOFT" 40; font-weight:300; color:var(--butter);
  margin-bottom:.5rem;
}
.know__item p{ opacity:.78; font-size:clamp(1rem,3.6vw,1.1rem); }

/* ══ 10. FINALE ══════════════════════════════════════════════════════════ */
.finale{
  background-color:var(--butter);
  background-image:var(--wash-butter), url(../assets/bg-butter-botanical.jpg);
  background-size:auto, var(--tile);
  background-position:center, center;
  background-repeat:repeat, repeat;
  color:var(--plum);
  padding:var(--pad) var(--gut) calc(var(--pad) * .6);
  text-align:center;
}
.finale__ganesh{
  width:clamp(74px,17vw,120px); margin:0 auto clamp(1.4rem,4vw,2.2rem);
  filter:brightness(0) saturate(100%) invert(18%) sepia(22%) saturate(1400%) hue-rotate(233deg);
  opacity:.65;
}
.finale__head{
  font-family:var(--display);
  font-size:clamp(2.2rem,9vw,4rem);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:300; color:var(--plum); letter-spacing:-.02em;
}
.clock{
  display:flex; justify-content:center; gap:clamp(.7rem,3.4vw,1.9rem);
  margin:clamp(2rem,6vw,3rem) 0;
  font-variant-numeric:tabular-nums;
}
.clock__unit{ min-width:clamp(52px,15vw,82px); }
.clock__num{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,9vw,3.4rem); line-height:1;
  color:var(--plum-deep);
}
.clock__lab{
  display:block; margin-top:.55rem;
  font-family:var(--util); font-weight:300;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--plum); opacity:.62;
}
.clock__done{
  font-family:var(--display); font-size:clamp(1.6rem,7vw,2.6rem);
  color:var(--plum-deep);
}
.finale__note{ max-width:46ch; margin:0 auto; opacity:.78; }
.finale__credit{
  font-family:var(--util); font-weight:300;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  opacity:.5;
}

/* ── Motion preferences ──────────────────────────────────────────────────
   Everything still readable, just still.                                   */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  [data-par]{ transform:none !important; }
}

/* ── Wide screens ────────────────────────────────────────────────────────
   The arch is drawn tall. On a landscape viewport it would sit on top of
   the names, so cap its height and start the names below it.            */
@media (min-width:820px){
  .hero{ padding-top:min(44vh,470px); padding-bottom:9vh; }
  .hero__arch{ width:auto; height:min(44vh,470px); }
  .hero__moon{ top:auto; bottom:34%; right:8%; }
  .hero__balloon{ top:auto; bottom:26%; left:8%; }
}

/* Two columns of events once there is room for them */
@media (min-width:900px){
  .events__list{
    grid-template-columns:1fr 1fr;
    gap:clamp(4rem,7vw,6.5rem) clamp(2.5rem,5vw,4rem);
    max-width:1040px; margin-inline:auto;
  }
  .card__frame{ width:min(360px,92%); }
}


/* ══════════════════════════════════════════════════════════════════════════
   LAYERED DEPTH — the motion system
   ══════════════════════════════════════════════════════════════════════════

   Ownership contract, so the two systems never overwrite each other:
     • CSS owns  translate / rotate / scale   — entrances and idle drift
     • JS  owns  transform                    — depth, parallax, scene tilt
   They are separate properties and compose automatically, so one object can
   breathe in the air AND be carried by the scroll at the same time.

   Nothing below changes layout, spacing, colour or type. Every rule here is
   opacity, motion, perspective or shadow.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --soft: cubic-bezier(.33,.02,.24,1);      /* long, unhurried ease-in-out */
  --settle: cubic-bezier(.16,.68,.3,1);     /* arrives, then settles       */
}

/* A scene is a window with real depth. Layers inside it sit at different Z
   and therefore shift against each other when the scene tilts. */
[data-scene]{ /* a grouping marker for the engine; no visual effect of its own */ }
[data-depth]{ backface-visibility:hidden; }

/* Shadow weight tracks depth: paper nearer the viewer casts a deeper, softer
   shadow. --depth is set by the engine. */
[data-depth]{
  filter:drop-shadow(
    0 calc(var(--depth,.8) * 9px)
      calc(var(--depth,.8) * 15px)
      rgba(0,0,0,calc(.10 + var(--depth,.8) * .17)));
}
/* Backdrops are flat light — no shadow on the sky, the stars or the wallpaper */
.hero__sky[data-depth],.hero__stars[data-depth],.medal__art[data-depth]{ filter:none; }
/* This one is recoloured by a filter in the design CSS — leave it alone,
   or the depth shadow would wipe out its tint. */
.finale__ganesh[data-depth]{
  filter:brightness(0) saturate(100%) invert(18%) sepia(22%) saturate(1400%) hue-rotate(233deg);
}

/* ── Idle air ───────────────────────────────────────────────────────────
   Deliberately mismatched periods so the objects never fall into step and
   start reading as a loop.                                              */
@keyframes airFloat{
  0%,100%{ translate:0 0;        rotate:-2.2deg; }
  50%    { translate:9px -24px;  rotate:2.2deg; }
}
@keyframes airBob{
  0%,100%{ translate:0 0;        rotate:0deg; }
  50%    { translate:-6px -15px; rotate:-4.5deg; }
}
@keyframes airDrift{
  0%,100%{ translate:0 0; }
  50%    { translate:-20px -7px; }
}
@keyframes airSway{ 0%,100%{ rotate:-1.5deg; } 50%{ rotate:1.5deg; } }
@keyframes airBreathe{ 0%,100%{ scale:1; } 50%{ scale:1.035; } }
@keyframes airTwinkle{ 0%,100%{ opacity:.5; } 50%{ opacity:.95; } }
@keyframes airNudge{ 0%,100%{ translate:0 0; } 50%{ translate:0 6px; } }
@keyframes sheen{ 0%{ background-position:-140% 0; } 60%,100%{ background-position:240% 0; } }

.hero__balloon,.rail__balloon{ animation:airFloat 13s ease-in-out infinite; }
.hero__moon,   .rail__moon   { animation:airBob 9.5s ease-in-out infinite; }
.hero__castle, .rail__castle { animation:airDrift 17s ease-in-out infinite; }
.hero__stars                 { animation:airTwinkle 8s ease-in-out infinite; }
.rail__balloon{ animation-delay:-4.3s; }
.rail__moon   { animation-delay:-2.7s; }
.rail__castle { animation-delay:-6.1s; }

.blessing__om     { animation:airBreathe 7.5s ease-in-out infinite; }
.blessing__ganesh--l{ animation:airSway 12s ease-in-out infinite; }
.blessing__ganesh--r{ animation:airSway 12s ease-in-out infinite reverse; animation-delay:-3s; }
.rule             { animation:airSway 11s ease-in-out infinite; }
.know__mark       { animation:airBreathe 9s ease-in-out infinite; }
.couple__bow      { animation:airSway 8s ease-in-out infinite; transform-origin:50% 12%; }
.hero__scroll     { animation:airNudge 3.6s ease-in-out infinite; }
.medal__ring      { animation:airBreathe 10s ease-in-out infinite; }
.know__item .icon { animation:airSway 10s ease-in-out infinite; }
.know__item:nth-child(even) .icon{ animation-delay:-4s; }

/* ── The hero settles into place, layer by layer ────────────────────────
   Whole composition eases 95% → 100% while fading up; each paper layer
   carries its own --layer index so nothing arrives together.            */
.hero__sky,.hero__stars,.hero__arch,.hero__castle,.hero__moon,
.hero__balloon,.hero__names{
  opacity:0; scale:.95;
  transition:opacity 1.8s var(--soft), scale 2.2s var(--settle);
  transition-delay:calc(var(--layer,0) * 190ms);
}
.is-loaded .hero__sky,.is-loaded .hero__stars,.is-loaded .hero__arch,
.is-loaded .hero__castle,.is-loaded .hero__moon,.is-loaded .hero__balloon,
.is-loaded .hero__names{ opacity:1; scale:1; }

.hero__sky    { --layer:0; }
.hero__stars  { --layer:1; opacity:0; }
.hero__arch   { --layer:2; }
.hero__castle { --layer:4; }
.hero__moon   { --layer:5; }
.hero__balloon{ --layer:6; }
.hero__names  { --layer:3; }
.is-loaded .hero__stars{ opacity:.85; }

/* The arch keeps its own centring in `translate`, so its entrance rides on
   that property rather than on transform (which the engine drives). */
.hero__arch{ translate:-50% -34px; }
.is-loaded .hero__arch{ translate:-50% 0; }

/* Title letters lift and come into focus one at a time */
.hero__name .ltr{
  display:inline-block;
  opacity:0; translate:0 .42em; rotate:3deg; filter:blur(6px);
  transition:opacity .9s var(--soft), translate 1.1s var(--settle),
             rotate 1.1s var(--settle), filter .9s var(--soft);
  transition-delay:calc(760ms + var(--i) * 62ms);
}
.hero__name.is-in .ltr{ opacity:1; translate:0 0; rotate:0deg; filter:blur(0); }
.hero__title .hero__name:last-of-type .ltr{ transition-delay:calc(1080ms + var(--i) * 62ms); }

/* ── Reveal variants ────────────────────────────────────────────────────
   Sequenced per section by js/main.js via --d.                          */
[data-reveal]{
  opacity:0; translate:0 32px;
  transition:opacity 1.25s var(--soft), translate 1.45s var(--settle);
  transition-delay:calc(var(--d,0) * 165ms);
}
[data-reveal].is-in{ opacity:1; translate:0 0; }

[data-reveal="rise"]{ scale:.985; transition-property:opacity,translate,scale; }
[data-reveal="rise"].is-in{ scale:1; }

/* Buttons and links arrive last, with a small scale */
[data-reveal="pop"]{
  translate:0 14px; scale:.92;
  transition:opacity 1s var(--soft), translate 1.1s var(--settle), scale 1.1s var(--settle);
  transition-delay:calc(var(--d,0) * 165ms + 240ms);
}
[data-reveal="pop"].is-in{ scale:1; }

/* Event artwork unmasks upward inside its arch, like a pop-up opening */
[data-reveal="arch"]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.6s var(--soft);
  transition-delay:calc(var(--d,0) * 165ms + 120ms);
}
[data-reveal="arch"].is-in{ clip-path:inset(0 0 0 0); }

/* Headings arrive out of focus and sharpen as they settle */
.section-head,.medal__title{ transition:opacity 1.3s var(--soft), filter 1.3s var(--soft); }
.section-head[data-reveal]:not(.is-in),
.medal__title[data-reveal]:not(.is-in){ filter:blur(10px); }

/* ── Interaction ────────────────────────────────────────────────────────── */
.card__frame{ transition:box-shadow .9s var(--soft); }
.event:hover .card__frame{
  box-shadow:
    0 44px 78px rgba(0,0,0,.58),
    0 0 0 1px rgba(10,38,52,.9),
    inset 0 0 0 1px rgba(240,223,174,.42);
}
.card__map{ position:relative; }
.card__map::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px;
  background:currentColor; transition:right .6s var(--soft);
}
.card__map:hover::after{ right:0; }
.medal__link{ transition:translate .6s var(--settle); }
.medal__link:hover{ translate:0 -5px; }

/* ── Countdown digits ─────────────────────────────────────────────────── */
.clock__num{ display:inline-block; }
.clock__num.is-tick{ animation:tick .6s var(--settle); }
@keyframes tick{
  0%  { translate:0 -7px; scale:1.09; opacity:.4; filter:blur(3px); }
  100%{ translate:0 0;    scale:1;    opacity:1;  filter:blur(0); }
}

/* A slow gold sheen crossing the couple's names */
.invitation__pair span{
  background:linear-gradient(100deg,
    var(--gold-soft) 0 38%, #FFF3C9 48%, var(--gold-soft) 58% 100%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:sheen 9s ease-in-out infinite;
}

/* ── Reduced motion wins over all of the above ────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  [data-scene]{ perspective:none; }
  [data-depth]{ filter:none !important; transform:none !important; }
  .hero__sky,.hero__stars,.hero__arch,.hero__castle,.hero__moon,
  .hero__balloon,.hero__names{ opacity:1 !important; scale:1 !important; }
  .is-loaded .hero__stars,.hero__stars{ opacity:.85 !important; }
  .hero__arch{ translate:-50% 0 !important; }
  .hero__name .ltr{ opacity:1 !important; translate:0 !important;
                    rotate:0deg !important; filter:none !important; }
  [data-reveal]{ opacity:1 !important; translate:0 !important; scale:1 !important;
                 clip-path:none !important; }
  .section-head,.medal__title{ filter:none !important; }
  .invitation__pair span{ color:var(--gold-soft); -webkit-text-fill-color:currentColor; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE DOORS — the opening sequence
   ══════════════════════════════════════════════════════════════════════════
   The film is 9:16. On a phone it fills the screen outright. On a wide
   screen it keeps its portrait shape and is surrounded by its own blurred
   frame, so there are never black bars — the point is that it reads as the
   site opening, not as a video embedded in a page.
   ══════════════════════════════════════════════════════════════════════════ */

.intro{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:#0B0805;
  overflow:hidden;
  cursor:pointer;
  opacity:1;
  transition:opacity 1.1s var(--soft);
}
/* Scroll is locked until the doors have opened */
body.is-gated{ overflow:hidden; height:100%; }
body.is-gated .music{ display:none; }

/* Blurred surround so a portrait film never sits on letterbox bars */
.intro__backdrop{
  position:absolute; inset:-10%;
  background:url(../assets/intro-poster.jpg) center/cover no-repeat;
  filter:blur(46px) brightness(.42) saturate(.9);
  transform:scale(1.15);
}
.intro::after{                       /* vignette, to melt the film's edges */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 clamp(60px,14vw,220px) rgba(11,8,5,.85);
}

.intro__video{
  position:relative; z-index:1;
  width:auto; height:100%;
  max-width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  background:#0B0805;
  /* a soft feathered edge, so it does not read as a rectangle pasted on */
  -webkit-mask-image:radial-gradient(125% 108% at 50% 50%, #000 76%, transparent 99%);
          mask-image:radial-gradient(125% 108% at 50% 50%, #000 76%, transparent 99%);
}
/* Phones: the film simply becomes the screen */
@media (max-aspect-ratio:3/4){
  .intro__video{ width:100%; height:100%; object-fit:cover;
    -webkit-mask-image:none; mask-image:none; }
  .intro::after{ box-shadow:inset 0 0 clamp(40px,12vw,140px) rgba(11,8,5,.55); }
}

/* The white flash the film ends on, carried over into the page */
.intro__veil{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, #FFF6E2 0%, #F6DFA8 42%, #E8C97C 100%);
  opacity:0;
  transition:opacity 1s var(--soft);
}
.intro.is-flaring .intro__veil{ opacity:1; }

/* ── The invitation panel ─────────────────────────────────────────────── */
.intro__panel{
  position:absolute; z-index:4;
  left:0; right:0; bottom:0;
  text-align:center;
  /* Full width on purpose: a scrim with visible side edges reads as a box
     sitting on the film. Edge to edge, it reads as the film's own light. */
  padding:clamp(5rem,20vh,11rem) var(--gut) clamp(2.2rem,7vh,4.5rem);
  background:linear-gradient(to top,
    rgba(18,11,5,.88) 0%, rgba(18,11,5,.72) 34%,
    rgba(18,11,5,.34) 66%, rgba(18,11,5,0) 100%);
  transition:opacity .7s var(--soft), translate .9s var(--soft);
}
.intro.is-playing .intro__panel{ opacity:0; translate:0 18px; pointer-events:none; }

.intro__eyebrow{
  font-family:var(--util); font-weight:300;
  font-size:clamp(.6rem,2.5vw,.72rem);
  letter-spacing:.32em; text-transform:uppercase;
  color:#F3E4C4; opacity:.92;
  margin-bottom:clamp(.7rem,2vw,1rem);
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.intro__names{
  font-family:var(--display);
  font-size:clamp(1.55rem,6.6vw,2.6rem);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:300; line-height:1.1; letter-spacing:-.01em;
  color:#FFFDF6;
  text-shadow:0 2px 22px rgba(0,0,0,.75);
  margin-bottom:clamp(1.4rem,4.5vw,2.1rem);
  max-width:18ch; margin-inline:auto;
}
/* The ampersand takes its own line, so the two names never break mid-name */
.intro__names span{
  display:block;
  font-family:var(--body); font-style:italic;
  font-size:.52em; color:#EBD49A;
  margin:.16em 0;
}

.intro__open{
  font-family:var(--util); font-weight:400;
  font-size:clamp(.68rem,2.7vw,.78rem);
  letter-spacing:.26em; text-transform:uppercase;
  color:#1B1206;
  background:linear-gradient(160deg,#F7E7B8 0%,#E3C97A 52%,#CBAA55 100%);
  border:0; border-radius:999px;
  padding:clamp(.85rem,2.6vw,1.05rem) clamp(1.7rem,6vw,2.6rem);
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
  transition:translate .4s var(--settle), box-shadow .4s var(--soft);
  animation:openPulse 3.4s ease-in-out infinite;
}
.intro__open:hover{ translate:0 -3px; box-shadow:0 20px 42px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7); }
@keyframes openPulse{
  0%,100%{ box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 0 rgba(227,201,122,.42), inset 0 1px 0 rgba(255,255,255,.6); }
  55%    { box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 16px rgba(227,201,122,0), inset 0 1px 0 rgba(255,255,255,.6); }
}

/* Leaving: the light the film ends on carries through and lifts away */
.intro.is-done{ opacity:0; pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .intro__open{ animation:none; }
}