/* ============================================================
   Prasanna Kumar & Abhisha — Engagement Invitation
   Mobile-first, vanilla CSS. No build step.
   ============================================================ */

:root{
  --ivory:#FDF9F2;
  --cream:#F7EFE2;
  --cream-deep:#F1E3CD;
  --beige:#E6D6BB;
  --sand:#DCC7A6;
  --maroon:#7A1E33;
  --maroon-deep:#5E1526;
  --maroon-soft:#9C2B44;
  --gold:#C9A227;
  --gold-light:#E7CE8E;
  --gold-deep:#9C7A1B;
  --sage:#8A9A7B;
  --sage-deep:#6E7F5A;
  --forest:#41573F;
  --forest-deep:#2E3F2C;
  --blush:#D9A6AE;
  --blush-soft:#F0D3CC;
  --ink:#40302A;
  --ink-soft:#6B564C;

  --f-display:'Cormorant Garamond', 'Marcellus', Georgia, 'Times New Roman', serif;
  --f-title:'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --f-body:'Mulish', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap: min(100% - 2.5rem, 60rem);
  --wrap-narrow: min(100% - 2.5rem, 38rem);
  --radius: 1.1rem;
  --shadow: 0 1.25rem 2.5rem -1.25rem rgba(94,21,38,.28);
  --shadow-soft: 0 .75rem 1.75rem -1rem rgba(94,21,38,.22);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  /* keep anchored sections clear of the floating nav */
  scroll-padding-bottom:6rem;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--f-body);
  font-weight:300;
  color:var(--ink);
  background-color:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
  /* layered, subtle "paper" ground: rangoli glow + floral dots + gold rules */
  background-image:
    radial-gradient(58rem 34rem at 50% -6rem, rgba(233,206,142,.42), transparent 70%),
    radial-gradient(42rem 30rem at 110% 42%, rgba(217,166,174,.22), transparent 70%),
    radial-gradient(46rem 32rem at -12% 76%, rgba(138,154,123,.20), transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(201,162,39,.14) 1.5px, transparent 1.6px),
    radial-gradient(circle at 50% 50%, rgba(217,166,174,.16) 1.5px, transparent 1.6px),
    linear-gradient(180deg, var(--ivory), var(--cream) 38%, var(--cream-deep));
  background-size:auto, auto, auto, 4.5rem 4.5rem, 4.5rem 4.5rem, auto;
  background-position:0 0, 0 0, 0 0, 0 0, 2.25rem 2.25rem, 0 0;
  background-attachment:scroll;
}

img{ width:100%; height:auto; object-fit:contain; display:block; }

h1,h2,h3{ margin:0; font-weight:400; line-height:1.15; }

/* ---------------------------------------------------------- layout */
.wrap{ width:var(--wrap); margin-inline:auto; }
.wrap--narrow{ width:var(--wrap-narrow); }

.section{
  position:relative;
  padding-block: clamp(2.25rem, 6vw, 3.75rem);
}
/* every section after the hero is its own rounded panel, like a card in a stack */
main > .section:not(.hero){
  width:min(100% - 1rem, 78rem);
  margin:0 auto clamp(.6rem,2vw,1rem);
  border-radius:clamp(1rem,3vw,1.5rem);
  overflow:hidden;
  border:1px solid rgba(201,162,39,.28);
  background:linear-gradient(170deg, #FEFBF5 0%, var(--ivory) 40%, var(--cream) 100%);
  box-shadow:0 .9rem 2rem -1.2rem rgba(94,21,38,.24);
  padding-inline:clamp(.25rem,2vw,1.5rem);
}
main > .section:not(.hero) > .wrap{ width:min(100% - 2rem, 62rem); }

.panel-garland{
  position:absolute; top:-.5rem; right:-1.5rem;
  width:clamp(7rem,26vw,13rem);
  opacity:.55; pointer-events:none; z-index:0;
  transform:scaleX(-1);
}
main > .section:not(.hero) > .wrap{ position:relative; z-index:1; }
.section:last-of-type{ padding-bottom: clamp(6rem, 13vw, 7.5rem); }

.section--tint{ background:linear-gradient(170deg, #FDF7EC 0%, #F9F0E1 55%, #F4E8D5 100%) !important; }
.section--tint > .wrap{ position:relative; z-index:1; }

/* ---------------------------------------------------------- type */
.eyebrow{
  margin:0 0 .5rem;
  font-family:var(--f-body);
  font-size:clamp(.72rem,2.6vw,.82rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--sage-deep);
  font-weight:600;
}

.head{ text-align:center; margin-bottom:clamp(1.2rem,4vw,1.9rem); }
.head__title{
  font-family:var(--f-title);
  font-size:clamp(2rem,8vw,3.1rem);
  color:var(--maroon);
  letter-spacing:.02em;
}
.head__sub{
  margin:.6rem auto 0;
  max-width:30rem;
  color:var(--ink-soft);
  font-size:clamp(.98rem,3.4vw,1.08rem);
}

.divider{
  width:min(20rem,70%);
  margin:.6rem auto 0;
  height:auto;
}

.heart{ color:var(--maroon-soft); }

/* ---------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5ch;
  font-family:var(--f-body); font-weight:600;
  font-size:clamp(.95rem,3.4vw,1.05rem);
  letter-spacing:.09em; text-transform:uppercase;
  padding:.95rem 2.1rem;
  border-radius:999px;
  border:1px solid var(--gold);
  text-decoration:none;
  cursor:pointer;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background-position .5s var(--ease);
}
.btn--primary{
  color:#FBF6EC;
  background-image:linear-gradient(120deg, #4E6849, var(--forest) 45%, var(--forest-deep));
  background-size:180% 100%;
  box-shadow:var(--shadow);
}
.btn--primary .heart{ color:var(--gold-light); }
.btn--forest{
  color:#FBF6EC;
  background-image:linear-gradient(120deg, #4E6849, var(--forest) 45%, var(--forest-deep));
  background-size:180% 100%;
  box-shadow:var(--shadow);
}
.btn--forest:hover,.btn--forest:focus-visible{ background-position:100% 0; transform:translateY(-2px); }
.btn__pin{ font-size:.7em; color:var(--gold-light); }
.btn--primary:hover,.btn--primary:focus-visible{
  background-position:100% 0;
  transform:translateY(-2px);
  box-shadow:0 1.5rem 2.75rem -1.1rem rgba(94,21,38,.42);
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--block{ display:flex; width:100%; }
:focus-visible{ outline:2px solid var(--maroon-soft); outline-offset:3px; }

/* ============================================================ HERO */
.hero{
  min-height:100svh;
  display:flex; align-items:center;
  padding-block: clamp(2.5rem,8vw,5rem) clamp(5.5rem,13vw,6.5rem);
  overflow:hidden;
}
.hero__inner{ text-align:center; position:relative; z-index:2; }
.hero .divider{ margin-top:.6rem; }
.hero .eyebrow{ margin-bottom:.35rem; }

.hero__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2.2rem,10.5vw,5.4rem);
  color:var(--maroon);
  letter-spacing:.01em;
  margin-bottom:.3rem;
  max-width:100%;
}

.hero__art{
  width:auto;
  max-width:min(100%, 21rem);
  max-height:min(26svh, 20rem);
  margin:.3rem auto .7rem;
  filter:drop-shadow(0 1.2rem 1.8rem rgba(94,21,38,.18));
}

.names{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
}
.names__name{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.6rem,6.8vw,2.9rem);
  color:var(--maroon-deep);
}
.names__amp{
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(1.3rem,5vw,1.9rem);
  color:var(--gold-deep);
}

.hero__date{
  margin:.55rem 0 .15rem;
  font-family:var(--f-title);
  font-size:clamp(.92rem,3.6vw,1.35rem);
  letter-spacing:.1em;
  color:var(--sage-deep);
}
.hero__tag{
  margin:0 auto .85rem;
  max-width:24rem;
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(1rem,4vw,1.3rem);
  color:var(--ink-soft);
  line-height:1.5;
}

/* corners, lanterns, diyas */
.corner{
  position:absolute; width:clamp(4.5rem,17vw,9rem); opacity:.5; pointer-events:none; z-index:1;
}
.corner--tl,.corner--tr{ display:none; }
.corner--tl{ top:.5rem; left:.5rem; }
.corner--tr{ top:.5rem; right:.5rem; transform:scaleX(-1); }
.corner--bl{ bottom:.5rem; left:.5rem; transform:scaleY(-1); }
.corner--br{ bottom:.5rem; right:.5rem; transform:scale(-1); }

.lanterns{
  position:absolute; inset:0 0 auto; height:0; pointer-events:none; z-index:1;
}
.lantern{
  position:absolute; top:0;
  width:clamp(2rem,6vw,3rem);
  transform-origin:50% 0;
  opacity:.85;
  animation:sway 6.5s ease-in-out infinite;
}
.lantern--1{ left:14%; animation-delay:-.6s; }
.lantern--2{ right:14%; animation-delay:-2.4s; }
.lantern--3{ left:50%; top:-1.5rem; width:clamp(1.6rem,4.6vw,2.3rem); opacity:.6; animation-delay:-3.8s; }

.diyas{
  display:flex; justify-content:center; gap:clamp(1.5rem,8vw,3rem);
  margin-top:clamp(.85rem,3.5vw,2.5rem);
}
.diya{
  width:clamp(2rem,7.5vw,3.4rem);
  animation:flicker 3.4s ease-in-out infinite;
}
.diya:nth-child(2){ animation-delay:-1.1s; }
.diya:nth-child(3){ animation-delay:-2.2s; }

/* ============================================================ STORY */
.story__art{
  width:min(100%, 40rem);
  margin:0 auto clamp(1rem,3.5vw,1.5rem);
  filter:drop-shadow(0 1.1rem 1.6rem rgba(94,21,38,.16));
}

.pull{
  text-align:center;
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(1.35rem,5.6vw,2rem);
  color:var(--maroon);
  margin:0 auto clamp(1.1rem,3.5vw,1.6rem);
  max-width:24rem;
  line-height:1.35;
}

.story__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-bottom:clamp(1.1rem,3.5vw,1.6rem);
}
@media (min-width:38em){ .story__grid{ grid-template-columns:repeat(2,1fr); gap:1.25rem; } }

.card{
  background:rgba(255,253,249,.86);
  border:1px solid rgba(201,162,39,.35);
  border-radius:var(--radius);
  padding:clamp(1rem,3.8vw,1.4rem);
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; right:-2.5rem; bottom:-2.5rem;
  width:7rem; height:7rem; border-radius:50%;
  background:radial-gradient(circle, rgba(217,166,174,.28), transparent 70%);
}
.card__title{
  font-family:var(--f-title);
  font-size:clamp(1.3rem,5vw,1.6rem);
  color:var(--maroon);
}
.card__meta{
  margin:.15rem 0 .75rem;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage-deep); font-weight:600;
}
.card p:last-child{ margin:0; color:var(--ink-soft); }

.prose{
  max-width:36rem; margin-inline:auto; text-align:center;
  font-size:clamp(1rem,3.6vw,1.1rem);
  color:var(--ink-soft);
}
.prose p{ margin:0 0 .7rem; }
.prose p:last-child{ margin-bottom:0; }
.prose__accent{
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(1.2rem,4.6vw,1.5rem);
  color:var(--maroon);
}

/* ============================================================ VENUE */
.venue__art{
  width:min(100%, 46rem);
  margin:0 auto clamp(1rem,3.5vw,1.4rem);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.venue__info{ text-align:center; margin-bottom:clamp(1rem,3.5vw,1.4rem); }
.venue__name{
  font-family:var(--f-title);
  font-size:clamp(1.5rem,6vw,2.1rem);
  color:var(--maroon);
  margin-bottom:.5rem;
}
.venue__addr{
  font-style:normal;
  color:var(--ink-soft);
  font-size:clamp(.98rem,3.5vw,1.08rem);
  line-height:1.75;
}

.map{
  display:block;
  max-width:44rem; margin-inline:auto; margin-bottom:1rem;
  text-decoration:none;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(201,162,39,.45);
  background:rgba(255,253,249,.9);
  box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.map:hover,.map:focus-visible{ transform:translateY(-3px); box-shadow:var(--shadow); }
.map__img{ border-bottom:0; }
.map__cta{
  display:flex; align-items:center; justify-content:center; gap:.6ch;
  padding:.85rem 1rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  font-size:clamp(.85rem,3.2vw,.95rem);
  color:var(--maroon);
  background:linear-gradient(180deg, rgba(247,239,226,.6), rgba(230,214,187,.55));
}
.pin{ display:inline-block; animation:bounce 2.4s ease-in-out infinite; }

/* ============================================================ DETAILS */
.timeline{
  list-style:none; margin:0 0 clamp(1.5rem,4.5vw,2.25rem); padding:0 0 0 1.6rem;
  position:relative;
  max-width:40rem; margin-inline:auto;
}
.timeline::before{
  content:""; position:absolute; left:.32rem; top:.6rem; bottom:.6rem;
  width:1px; background:linear-gradient(180deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
}
.event{
  position:relative;
  background:rgba(255,253,249,.88);
  border:1px solid rgba(201,162,39,.35);
  border-radius:var(--radius);
  padding:clamp(.95rem,3.6vw,1.35rem);
  box-shadow:var(--shadow-soft);
}
.event + .event{ margin-top:.7rem; }
.event__dot{
  position:absolute; left:-1.6rem; top:1.6rem;
  width:.72rem; height:.72rem; margin-left:-.05rem;
  border-radius:50%; background:var(--maroon);
  box-shadow:0 0 0 .28rem rgba(201,162,39,.28);
}
.event__title{
  font-family:var(--f-title);
  font-size:clamp(1.25rem,5vw,1.6rem);
  color:var(--maroon);
  margin-bottom:.4rem;
}
.event__when{ margin:0; font-weight:600; color:var(--ink); }
.event__time{
  margin:.1rem 0 0;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.35rem,5.4vw,1.7rem);
  color:var(--gold-deep); letter-spacing:.05em;
}
.event__note{ margin:.45rem 0 0; color:var(--ink-soft); }

.countdown{ text-align:center; }
.countdown__label{
  margin:0 0 .7rem;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sage-deep); font-weight:600;
}
.countdown__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(.45rem,2.2vw,1rem);
  max-width:34rem; margin-inline:auto;
}
.cd{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:clamp(.6rem,2.6vw,.95rem) .25rem;
  border-radius:.85rem;
  border:1px solid rgba(201,162,39,.45);
  background:linear-gradient(180deg, rgba(255,253,249,.95), rgba(241,227,205,.85));
  box-shadow:var(--shadow-soft);
}
.cd__num{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.5rem,7.5vw,2.4rem);
  line-height:1.1;
  color:var(--maroon);
  font-variant-numeric:tabular-nums;
}
.cd__unit{
  font-size:clamp(.6rem,2.5vw,.72rem);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage-deep); font-weight:600;
}
.countdown__done{
  margin:1rem 0 0;
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.1rem,4.4vw,1.35rem);
  color:var(--maroon);
}

/* ============================================================ SPLIT LAYOUT */
.split{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1rem,3.5vw,2rem);
  align-items:center;
}
.split__art{ width:min(100%,34rem); margin-inline:auto; }
.split__text--center{ text-align:center; }

@media (min-width:52em){
  .split{ grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); }
  .split--art-right .split__text{ order:1; }
  .split--art-right .split__art{ order:2; }
  .split--art-left .split__art{ order:1; }
  .split--art-left .split__text{ order:2; }
  .split__art{ width:100%; }
}

/* ============================================================ STORY BEATS */
.beats{ list-style:none; margin:0 0 1.1rem; padding:0; }
.beat{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.85rem;
  align-items:start;
  margin-bottom:.9rem;
}
.beat p{
  margin:0;
  font-size:clamp(1rem,3.5vw,1.08rem);
  color:var(--ink-soft);
  line-height:1.6;
}
.beat__icon{
  display:grid; place-items:center;
  width:2.5rem; height:2.5rem;
  border-radius:50%;
  border:1px solid rgba(201,162,39,.5);
  background:rgba(255,253,249,.9);
  color:var(--maroon-soft);
  font-family:var(--f-body); font-weight:600; font-size:.82rem;
  box-shadow:0 .4rem .9rem -.6rem rgba(94,21,38,.3);
}
.beat__icon--img{ padding:.42rem; }
.beat__icon--img img{ width:100%; height:auto; }

/* ============================================================ HERO EXTRAS */
.rings{
  width:clamp(3.2rem,11vw,4.5rem);
  margin:.15rem auto .1rem;
  filter:drop-shadow(0 .3rem .5rem rgba(94,21,38,.18));
}
.garland{
  position:absolute; top:-1.25rem;
  width:clamp(7rem,31vw,18rem);
  opacity:.7; pointer-events:none; z-index:1;
}
.garland--l{ left:-1.75rem; }
.garland--r{ right:-1.75rem; transform:scaleX(-1); }

/* ---- countdown, hero variant (compact) ---- */
.countdown--hero{ margin:0 auto .65rem; max-width:22rem; }
.countdown--hero .countdown__label{
  margin:0 0 .45rem;
  font-size:clamp(.6rem,2.4vw,.68rem); letter-spacing:.2em;
}
.countdown--hero .countdown__grid{ gap:.4rem; }
.countdown--hero .cd{ padding:.45rem .15rem; border-radius:.7rem; }
.countdown--hero .cd__num{ font-size:clamp(1.15rem,5.4vw,1.6rem); }
.countdown--hero .cd__unit{ font-size:clamp(.5rem,2vw,.6rem); letter-spacing:.11em; }
.hero__dot{ color:var(--gold); padding-inline:.15rem; }

/* ============================================================ HERO CTA */
.cta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem;
  margin-inline:auto;
  max-width:24rem;
}
.cta .btn{
  padding-inline:.6rem;
  font-size:clamp(.72rem,3vw,1.05rem);
  white-space:nowrap;
}
@media (min-width:34em){
  .cta{ gap:.8rem; max-width:30rem; }
  .cta .btn{ padding-inline:1.4rem; }
}
.btn__icon{ font-size:1.05em; line-height:1; }
.btn--ghost{
  color:var(--forest);
  background:rgba(255,253,249,.86);
  box-shadow:var(--shadow-soft);
}
.btn--ghost:hover,.btn--ghost:focus-visible{
  transform:translateY(-2px);
  background:#fff;
  box-shadow:var(--shadow);
}

/* ============================================================ STREAM */
.stream{
  position:relative;
  aspect-ratio:16 / 9;
  max-width:46rem;
  margin-inline:auto;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(201,162,39,.5);
  background:#1b1512;
  box-shadow:var(--shadow);
}
.stream__placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; text-align:center; padding:1rem;
  background:
    radial-gradient(60% 70% at 50% 42%, rgba(201,162,39,.20), transparent 70%),
    linear-gradient(160deg, #2A1B20, #1B1512 60%, #241A15);
}
.stream__play{
  width:clamp(3rem,11vw,4.25rem); aspect-ratio:1; margin-bottom:.55rem;
  border-radius:50%;
  border:1px solid rgba(231,206,142,.65);
  background:rgba(231,206,142,.10);
  display:grid; place-items:center;
}
.stream__play::after{
  content:""; display:block;
  border-style:solid;
  border-width:.5em 0 .5em .82em;
  border-color:transparent transparent transparent #E7CE8E;
  font-size:clamp(.85rem,3vw,1.15rem);
  margin-left:.22em;
}
.stream__title{
  margin:0;
  font-family:var(--f-title);
  font-size:clamp(1.05rem,4.2vw,1.4rem);
  color:#F3E3C6; letter-spacing:.03em;
}
.stream__sub{
  margin:0;
  font-size:clamp(.78rem,2.9vw,.9rem);
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(231,206,142,.72);
}
.stream iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  display:block;
}

/* ============================================================ CLOSING */
.section--closing{ text-align:center; }
.mandala{
  width:clamp(6rem,26vw,9rem);
  margin:0 auto 1rem;
  opacity:.75;
  animation:spin 90s linear infinite;
}
.closing__lead{
  margin:0 0 .9rem;
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.05rem,4.2vw,1.3rem);
  color:var(--ink-soft); line-height:1.7;
}
.closing__names{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.6rem,7vw,2.6rem);
  color:var(--maroon);
}
.closing__amp{ color:var(--gold-deep); font-style:italic; }
.closing__date{
  margin:.6rem 0 0;
  font-size:clamp(.85rem,3.2vw,.98rem);
  letter-spacing:.12em; color:var(--sage-deep);
}
.closing__foot{
  margin:1rem 0 0;
  font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}

/* ============================================================ NAV */
.nav{
  position:fixed; z-index:50;
  left:50%; transform:translateX(-50%);
  bottom:max(.6rem, env(safe-area-inset-bottom));
  display:flex; align-items:stretch;
  width:min(100% - 1.25rem, 32rem);
  padding:.35rem;
  border-radius:999px;
  border:1px solid rgba(201,162,39,.55);
  background:rgba(253,249,242,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 .8rem 1.8rem -.7rem rgba(94,21,38,.3);
}
.nav a{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.05rem;
  padding:.45rem .2rem;
  border-radius:999px;
  text-decoration:none; color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav__icon{ font-size:1.05rem; line-height:1.2; }
.nav__label{
  font-size:clamp(.58rem,2.6vw,.68rem);
  letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.nav a:hover{ color:var(--maroon); }
.nav a.is-active{
  color:var(--ivory);
  background:linear-gradient(120deg, var(--maroon-soft), var(--maroon-deep));
}

/* ============================================================ PETALS */
.petals{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.petal{
  position:absolute; top:-3rem;
  width:1.1rem; height:auto; opacity:.55;
  animation:fall linear infinite;
}

/* ============================================================ REVEAL */
.reveal{
  opacity:0;
  transform:translateY(1.5rem);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================ KEYFRAMES */
@keyframes sway{
  0%,100%{ transform:rotate(-3.5deg); }
  50%{ transform:rotate(3.5deg); }
}
@keyframes flicker{
  0%,100%{ transform:translateY(0) scale(1); filter:brightness(1); }
  50%{ transform:translateY(-.2rem) scale(1.03); filter:brightness(1.1); }
}
@keyframes bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-.28rem); }
}
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes fall{
  0%{ transform:translate3d(0,-3rem,0) rotate(0deg); opacity:0; }
  10%{ opacity:.55; }
  90%{ opacity:.5; }
  100%{ transform:translate3d(var(--drift,4rem), 105vh, 0) rotate(320deg); opacity:0; }
}

/* ============================================================ LARGER SCREENS */
@media (min-width:48em){
  .hero__art{ max-width:min(100%, 22rem); max-height:min(32svh, 22rem); }
  .hero__inner{ padding-top:1rem; }
}
@media (min-width:64em){
  /* wide screens: text column beside a large portrait of the couple */
  .hero{ padding-block:2rem 5.5rem; }
  .hero__inner{
    display:grid;
    grid-template-columns:1fr 1.02fr;
    /* 9 rows = the hero's 9 text children; the artwork spans all of them
       in column 2. Update this count if a row is added or removed. */
    grid-template-rows:repeat(8, auto);
    column-gap:clamp(2rem,4vw,3.5rem);
    align-items:center;
    text-align:left;
  }
  .hero__inner > *{ grid-column:1; }
  .hero__inner > .hero__art{
    grid-column:2;
    grid-row:1 / -1;
    align-self:center;
    max-width:100%;
    max-height:min(70svh,34rem);
    margin:0;
  }
  .hero__title{ font-size:clamp(3rem,4.8vw,4.2rem); }
  .names__name{ font-size:clamp(1.9rem,2.7vw,2.35rem); }
  .hero .names{ align-items:flex-start; }
  .hero .rings{ margin-inline:0; }
  .hero .divider{ width:16rem; margin-inline:0; }
  .hero__tag{ margin-inline:0; }
  .hero .countdown--hero{ margin-inline:0; }
  .hero .countdown__label{ text-align:left; }
  .hero .cta{ margin-inline:0; max-width:26rem; }
  .hero .diyas{ display:none; }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .petals{ display:none; }
}