/* ============================================================
   Anandhu & Anjali — kasavu
   Palette taken from the cloth: undyed cotton, woven gold zari,
   leaf green from the garden in the photographs.
   ============================================================ */

:root{
  --kasavu:      #F5F0E4;   /* undyed cotton */
  --kasavu-deep: #EBE3D0;   /* second cream, for alternating bands */
  --zari:        #B08D2E;   /* woven gold thread */
  --zari-lt:     #DCC07A;
  --ila:         #243528;   /* deep leaf green */
  --ila-soft:    #3A5240;
  --sindoor:     #8C2F1D;
  --ink:         #2A2620;
  --mute:        #7A7266;
  --on-dark:     #F1EADA;

  --display: "Marcellus", Georgia, serif;
  --body:    "Karla", system-ui, -apple-system, sans-serif;

  --edge: 10px;              /* selvedge width */
  --gutter: 22px;
  --section-y: 76px;

  --zari-weave: repeating-linear-gradient(
    90deg,
    #8E6F1E 0 1px,
    #D9BE75 1px 2px,
    #B08D2E 2px 3px,
    #F2E2AE 3px 4px
  );
}

@media (min-width: 760px){
  :root{ --edge: 16px; --gutter: 40px; --section-y: 118px; }
}

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

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

body{
  margin: 0;
  background: var(--kasavu);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }

/* ------------------------------------------------------------
   SIGNATURE — the woven gold selvedge, unbroken down the page
   ------------------------------------------------------------ */
.selvedge{
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--edge);
  z-index: 40;
  pointer-events: none;
  background: var(--zari-weave);
  background-size: 4px 100%;
}
/* the weft — faint horizontal threads crossing the warp */
.selvedge::before{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,.14) 0 1px, rgba(255,255,255,.05) 1px 3px
  );
}
.selvedge--left { left: 0;  box-shadow: inset -1px 0 0 rgba(90,68,14,.55); }
.selvedge--right{ right: 0; box-shadow: inset  1px 0 0 rgba(90,68,14,.55); }

/* ------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------ */
.wrap{
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  padding-inline: calc(var(--edge) + var(--gutter));
}
.wrap--narrow{ max-width: 660px; }
.center{ text-align: center; }

.band{ padding-block: var(--section-y); position: relative; }
.band--tight{ padding-block: calc(var(--section-y) * .55); }
.band--cream{ background: var(--kasavu); }
.band--sand { background: var(--kasavu-deep); }
.band--green{ background: var(--ila); color: var(--on-dark); }

/* ------------------------------------------------------------
   Type
   ------------------------------------------------------------ */
.eyebrow{
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--zari);
  margin: 0 0 18px;
}
.eyebrow--light{ color: var(--zari-lt); }

.section-title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 26px;
}
.section-title--light{ color: var(--on-dark); }

.prose{ font-size: 17px; margin: 0 0 14px; }
.prose--muted{ color: var(--mute); font-size: 15px; }
.prose--light{ color: var(--on-dark); opacity: .88; }

.rule{
  display: block;
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--zari), transparent);
}
.rule--short{ width: 90px; margin: 0 auto 22px; }

/* ------------------------------------------------------------
   COVER
   ------------------------------------------------------------ */
.cover{
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.cover__panes{ position: absolute; inset: 0; display: flex; z-index: -2; }

.pane{ position: relative; flex: 1; overflow: hidden; }
.pane__slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.pane__slide.is-on{ opacity: 1; }

.cover__wash{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(36,53,40,.55) 0%, rgba(36,53,40,.78) 55%, rgba(36,53,40,.94) 100%),
    linear-gradient(90deg, rgba(20,30,22,.5), rgba(20,30,22,.1) 50%, rgba(20,30,22,.5));
}

.cover__inner{
  text-align: center;
  color: var(--on-dark);
  padding: 60px calc(var(--edge) + var(--gutter));
  width: 100%;
}

.names{
  font-family: var(--display);
  font-weight: 400;
  margin: 0 0 26px;
  line-height: 1.06;
}
.names__one{
  display: block;
  font-size: clamp(44px, 15vw, 96px);
  letter-spacing: .02em;
}
.names__amp{
  display: block;
  font-size: clamp(20px, 5vw, 30px);
  color: var(--zari-lt);
  margin: 28px 0 2px ;
}

.cover__date{
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0;
  color: var(--on-dark);
  opacity: .9;
}

.cover__cue{
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--zari-lt);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.cover__cue svg{ animation: drift 2.6s ease-in-out infinite; }
@keyframes drift{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }

/* ------------------------------------------------------------
   INVITATION
   ------------------------------------------------------------ */
.ganesha{ width: 82px; margin: 0 auto 18px; opacity: .92; }

.invocation{
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .16em;
  color: var(--zari);
  margin: 0 0 44px;
}

.lede{
  font-size: 17px;
  font-style: italic;
  font-weight: 300;
  color: var(--mute);
  max-width: 44ch;
  margin: 0 auto 54px;
}

.person{ margin-bottom: 6px; }
.person__name{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 8vw, 52px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
}
.person__rel{
  font-style: italic;
  color: var(--mute);
  font-size: 15px;
  margin: 0 0 8px;
}
.person__parent{ margin: 2px 0; font-size: 17px; }
.person__meta{
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--zari);
}

.joiner{
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 40px auto;
  max-width: 320px;
}
.joiner__word{
  font-family: var(--display);
  font-size: 15px;
  color: var(--mute);
  font-style: italic;
}

/* ------------------------------------------------------------
   MUHURTHAM
   ------------------------------------------------------------ */
.band--muhurtham{
  background: var(--kasavu-deep);
  border-block: 1px solid rgba(176,141,46,.32);
}
.muhurtham__time{
  font-family: var(--display);
  font-size: clamp(58px, 17vw, 118px);
  line-height: 1;
  margin: 0;
  color: var(--zari);
}
.muhurtham__time span{ font-size: .32em; letter-spacing: .1em; }
.muhurtham__window{
  margin: 14px 0 46px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}

.countdown{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 460px;
  margin: 0 auto 40px;
}
.cd{
  border: 1px solid rgba(176,141,46,.45);
  padding: 14px 4px;
  background: rgba(255,255,255,.42);
}
.cd__n{
  display: block;
  font-family: var(--display);
  font-size: clamp(22px, 6.5vw, 34px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cd__l{
  display: block;
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute);
}
.countdown__done{
  font-family: var(--display);
  font-size: 20px;
  color: var(--zari);
  margin: 0 0 40px;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn{
  display: inline-block;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 15px 32px;
  border: 1px solid var(--zari);
  background: transparent;
  color: var(--zari);
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.btn:hover{ background: var(--zari); color: var(--kasavu); }
.btn--light{ border-color: var(--zari-lt); background: var(--zari-lt); color: var(--ila); }
.btn--light:hover{ background: transparent; color: var(--zari-lt); }
.btn--ghost{ border-color: rgba(241,234,218,.5); color: var(--on-dark); }
.btn--ghost:hover{ background: rgba(241,234,218,.14); color: var(--on-dark); }

:focus-visible{ outline: 2px solid var(--zari); outline-offset: 3px; }

/* ------------------------------------------------------------
   SCHEDULE (dark photo band)
   ------------------------------------------------------------ */
.band--photo{
  background-color: var(--ila);
  background-image:
    linear-gradient(rgba(30,44,33,.84), rgba(30,44,33,.9)),
    url("../assets/img/band.jpg");
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
}

.schedule{ list-style: none; margin: 46px 0 0; padding: 0; }

.sched{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 26px 0;
  border-top: 1px solid rgba(220,192,122,.28);
}
.sched:last-child{ border-bottom: 1px solid rgba(220,192,122,.28); }

.sched__time{
  font-family: var(--display);
  font-size: 26px;
  color: var(--zari-lt);
  margin: 0;
  line-height: 1;
}
.sched__time span{ font-size: .5em; letter-spacing: .08em; }

.sched__body h3{
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  margin: 8px 0 6px;
  color: var(--on-dark);
}
.sched__body p{ margin: 0; font-size: 15.5px; opacity: .82; }

.sched--key .sched__time{ color: #F2E2AE; }
.sched--key .sched__body h3{ font-size: 27px; }

.rituals{
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(220,192,122,.2);
}
.rituals li{
  font-size: 14.5px;
  opacity: .82;
  margin-bottom: 8px;
  padding-left: 16px;
  position: relative;
}
.rituals li::before{
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 5px; height: 5px;
  background: var(--zari-lt);
  transform: rotate(45deg);
}
.rituals b{ font-weight: 500; color: var(--zari-lt); }

@media (min-width: 720px){
  .sched{ grid-template-columns: 150px 1fr; gap: 30px; }
  .sched__time{ text-align: right; padding-top: 4px; }
  .sched__body h3{ margin-top: 0; }
}

/* ------------------------------------------------------------
   PORTRAITS
   ------------------------------------------------------------ */
.portraits{
  display: grid;
  grid-template-columns: 1fr;
  gap: 46px;
  max-width: 760px;
  margin-inline: auto;
}
@media (min-width: 700px){
  .portraits{ grid-template-columns: 1fr 1fr; gap: 54px; }
}

.portrait{ margin: 0; text-align: center; }
.portrait img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(176,141,46,.5);
  padding: 7px;
  background: var(--kasavu);
}
.portrait figcaption h3{
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  margin: 22px 0 6px;
}
.portrait figcaption p{ margin: 0; color: var(--mute); font-size: 15px; }

/* ------------------------------------------------------------
   VENUE
   ------------------------------------------------------------ */
.map{
  margin: 38px 0 34px;
  border: 1px solid rgba(176,141,46,.45);
  padding: 7px;
  background: var(--kasavu);
}
.map iframe{
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
}
@media (min-width: 700px){ .map iframe{ height: 400px; } }

.notes{
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 56px;
  text-align: left;
}
@media (min-width: 700px){ .notes{ grid-template-columns: repeat(3, 1fr); gap: 34px; } }

.note{ border-top: 1px solid rgba(176,141,46,.4); padding-top: 16px; }
.note h4{
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--zari);
  margin: 0 0 8px;
  font-weight: 500;
}
.note p{ margin: 0; font-size: 15px; color: var(--mute); }

/* ------------------------------------------------------------
   RSVP
   ------------------------------------------------------------ */
.actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 34px 0 44px;
}

.contacts{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  justify-content: center;
  padding-top: 30px;
  border-top: 1px solid rgba(220,192,122,.28);
}
.contacts p{ margin: 0; font-size: 15px; }
.contacts span{
  display: block;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--zari-lt);
  margin-bottom: 3px;
}
.contacts a{ color: var(--on-dark); text-decoration: none; border-bottom: 1px solid rgba(220,192,122,.5); }

.dress{
  margin: 34px 0 0;
  font-style: italic;
  font-size: 15px;
  opacity: .78;
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer{
  background: var(--ila);
  color: var(--on-dark);
  text-align: center;
  padding: 60px calc(var(--edge) + var(--gutter));
}
.footer__line{ margin: 0; font-size: 14px; color: var(--on-dark); opacity: .72; }
.footer__names{
  font-family: var(--display);
  font-size: 24px;
  color: var(--zari-lt);
  margin: 10px 0 0;
}
.footer .rule--short{
  background: linear-gradient(90deg, transparent, var(--zari-lt), transparent);
}
/* ------------------------------------------------------------
   MUSIC
   ------------------------------------------------------------ */
.music-btn{
  position: fixed;
  right: calc(var(--edge) + 14px);
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--zari);
  background: var(--kasavu);
  color: var(--zari);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}
.music-btn[aria-pressed="true"]{ background: var(--zari); color: var(--kasavu); }

/* ------------------------------------------------------------
   Reveal on scroll — only armed once JS confirms it can run,
   so the page is fully readable if the script never loads.
   ------------------------------------------------------------ */
.js .reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
}
.js .reveal.is-in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .js .reveal{ opacity: 1 !important; transform: none !important; transition: none; }
  .cover__cue svg{ animation: none; }
}


.loader{
  position: fixed; inset: 0; z-index: 100;
  background: var(--ila);
  display: grid; place-items: center;
  transition: opacity .6s ease, visibility 0s linear .6s;
  overflow: hidden;        /* ← add this */
  isolation: isolate;      /* ← add this */
}
@keyframes loader-failsafe{ to{ opacity: 0; visibility: hidden; } }
html:not(.js) .loader{ animation: loader-failsafe .01s linear 6s forwards; }
.loader.is-done{ opacity: 0; visibility: hidden; }
.loader__inner{ text-align: center; padding: 0 30px; }
.loader__names{
  font-family: var(--display); font-size: clamp(22px, 6vw, 30px);
  color: var(--on-dark); margin: 0 0 26px; letter-spacing: .04em;
}
.loader__bar{ width: min(220px, 60vw); height: 1px; margin: 0 auto; background: rgba(220,192,122,.25); }
.loader__bar span{ display: block; height: 100%; width: 0; background: var(--zari-lt); transition: width .35s ease; }
.loader__pct{
  font-size: 10px; letter-spacing: .3em; color: var(--zari-lt);
  margin: 14px 0 0; font-variant-numeric: tabular-nums;
}
body.is-loading{ overflow: hidden; }



.envelope{ position: relative; perspective: 1400px; }

.js .envelope__body{
  opacity: 0;
  transform: scale(.97) translateY(12px);
  transition: opacity .9s ease .35s, transform .9s ease .35s;
}
.js .envelope.is-open .envelope__body{ opacity: 1; transform: none; }

.envelope__cover{
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  width: 100%;
  border: 1px solid rgba(176,141,46,.45);
  background: var(--kasavu-deep);
  font-family: var(--body); cursor: pointer;
  transform-origin: top center;
  transition: transform 1s cubic-bezier(.6,0,.2,1), opacity .7s ease .2s;
}
.envelope.is-open .envelope__cover{
  transform: rotateX(-95deg);
  opacity: 0;
  pointer-events: none;
}
.envelope__seal{ color: var(--zari); display: block; }
.envelope__hint{
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute);
}


.flow{ position: relative; margin-top: 44px; }

.flow__stage{
  position: relative;
  height: clamp(330px, 78vw, 520px);
  perspective: 1500px;
  transform-style: preserve-3d;
}

.flow__card{
  position: absolute;
  top: 0; left: 50%;
  height: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  cursor: pointer;
  padding: 12px;
  background: var(--kasavu);
  border: 1px solid var(--zari);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(60,45,15,.14);
  transition: transform .8s cubic-bezier(.35,0,.15,1), opacity .8s ease;
  will-change: transform, opacity;
}

/* the second rule — what makes it read as an invitation border */
.flow__card::before{
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(176,141,46,.55);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}
.flow__card::after{
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  background: var(--zari);
  transform: rotate(45deg);
  z-index: 3;
}

.flow__card img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 0; padding: 0; background: none;
  display: block;
}

.flow__arrow{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 30;
  width: 42px; height: 42px;
  border: 1px solid rgba(176,141,46,.5);
  border-radius: 50%;
  background: var(--kasavu);
  color: var(--zari);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.flow__arrow:hover{ background: var(--zari); color: var(--kasavu); }
.flow__prev{ left: 0; }
.flow__next{ right: 0; }
@media (min-width: 900px){
  .flow__prev{ left: -10px; }
  .flow__next{ right: -10px; }
}

.flow__dots{ display: flex; justify-content: center; gap: 9px; margin-top: 26px; }
.flow__dot{
  width: 8px; height: 8px; padding: 0;
  border: 1px solid var(--zari);
  background: transparent; border-radius: 50%;
  cursor: pointer; transition: background .3s;
}
.flow__dot[aria-current="true"]{ background: var(--zari); }

.lb{ position: fixed; inset: 0; z-index: 90; background: rgba(20,30,22,.96); display: grid; place-items: center; }
.lb[hidden]{ display: none; }
.lb__img{ max-width: 88vw; max-height: 82vh; object-fit: contain; }
.lb__x, .lb__nav{
  position: absolute; background: none; border: 0; color: var(--zari-lt);
  cursor: pointer; font-size: 30px; line-height: 1; padding: 14px;
}
.lb__x{ top: 10px; right: 12px; font-size: 38px; }
.lb__prev{ left: 4px; top: 50%; transform: translateY(-50%); }
.lb__next{ right: 4px; top: 50%; transform: translateY(-50%); }
.lb__count{
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  color: var(--on-dark); opacity: .6; font-size: 11px; letter-spacing: .25em; margin: 0;
}
body.lb-open{ overflow: hidden; }

.petals{
  position: fixed;
  inset: 0;
  z-index: 45;              /* above content, below the selvedge (40) is wrong —
                               45 keeps petals over the page but under the loader (100) */
  pointer-events: none;     /* essential: never block a tap */
  overflow: hidden;
}

.petal{
  position: absolute;
  top: -8vh;
  width: 14px;
  height: 14px;
  background: var(--petal, #C86B6B);
  border-radius: 50% 0 50% 50%;
  opacity: 0;
  will-change: transform, opacity;
  animation: petal-fall linear infinite;
}

@keyframes petal-fall{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg);            opacity: 0; }
  10%  {                                                          opacity: .85; }
  50%  { transform: translate3d(40px, 50vh, 0) rotate(200deg);    opacity: .85; }
  90%  {                                                          opacity: .7; }
  100% { transform: translate3d(-25px, 108vh, 0) rotate(420deg);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .petals{ display: none; }
}






.window{
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin: 8px 0 18px; flex-wrap: wrap;
}
.window__t{
  font-family: var(--display);
  font-size: clamp(34px, 9vw, 62px);
  line-height: 1;
  color: var(--zari-lt);
}
.window__t em{ font-style: normal; font-size: .34em; letter-spacing: .1em; }
.window__dash{
  font-family: var(--body);
  font-size: 13px;
  font-style: italic;
  letter-spacing: .1em;
  color: var(--on-dark);
  opacity: .6;
}

.window__note{
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark); opacity: .6; margin: 0 0 58px;
}

.rites{
  display: grid; grid-template-columns: 1fr; gap: 30px;
  text-align: left; max-width: 780px; margin-inline: auto;
}
@media (min-width: 760px){
  .rites{ grid-template-columns: repeat(4, 1fr); gap: 26px; }
}
.rite{ border-top: 1px solid rgba(220,192,122,.35); padding-top: 16px; }
.rite h3{
  font-family: var(--display); font-weight: 400; font-size: 19px;
  color: var(--zari-lt); margin: 0 0 8px;
}
.rite p{ margin: 0; font-size: 14.5px; opacity: .78; }



.mp__lamp{
  display: block;
  margin: 0 auto 22px;
  fill: var(--zari-lt);
  opacity: .9;
}
.mp__flame{ fill: #F2E2AE; }

.mp{
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  padding: 46px 30px 40px;
  border: 1px solid rgba(220,192,122,.55);
  background: rgba(18,28,20,.42);
}
/* the inner rule — a hair inside the outer one */
.mp::before{
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(220,192,122,.3);
  pointer-events: none;
}
/* small diamond centred on the bottom edge, answering the lamp above */
.mp::after{
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  background: var(--zari-lt);
  transform: rotate(45deg);
}

.mp__date{
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--zari-lt);
  opacity: .8;
  margin: 0 0 14px;
}
.mp__title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 7vw, 38px);
  color: var(--on-dark);
  margin: 0 0 26px;
  letter-spacing: .02em;
}

.mp .window{ margin: 0 0 16px; }
.mp .window__note{ margin: 0; }

@media (max-width: 520px){
  .mp{ padding: 34px 18px 30px; }
}

.mp__date sup{
  font-size: .68em;
  vertical-align: super;
  letter-spacing: .1em;
  margin-left: 1px;
}
/* ------------------------------------------------------------
   ENVELOPE
   ------------------------------------------------------------ */
.env{
  position: relative;
  min-height: calc(min(560px, 92vw) * 0.667);
  transition: min-height .9s ease .45s;
}
.env.is-open{ min-height: 0; }

.env__shell{
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(560px, 92vw);
  aspect-ratio: 3 / 2;
  z-index: 5;
  filter: drop-shadow(0 16px 40px rgba(60,45,15,.2));
  transition: transform 1s ease, opacity .9s ease .2s;
}
.env.is-open .env__shell{
  transform: translateX(-50%) translateY(-36px) scale(1.05);
  opacity: 0;
  pointer-events: none;
}
.env__shell img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* invisible hit area over the printed seal */
.env__seal{
  position: absolute;
  left: 50%; top: 66%;
  transform: translate(-50%, -50%);
  width: 15%;
  aspect-ratio: 1;
  border: 0; padding: 0; background: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 6;
  transition: transform .4s ease;
}
.env__seal:hover{ transform: translate(-50%, -50%) scale(1.09); }
.env__seal:focus-visible{ outline: 2px solid var(--zari); outline-offset: 6px; }

/* the invitation, hidden until the seal is tapped */
.js .env__card{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(40px);
  transition: max-height 1.1s ease .25s, opacity .9s ease .4s, transform .9s ease .4s;
}
.js .env.is-open .env__card{
  max-height: 4000px;
  opacity: 1;
  transform: none;
}

/* if the script never runs, show the invitation and skip the envelope */
html:not(.js) .env{ min-height: 0; }
html:not(.js) .env__shell{ display: none; }



.loader__collage{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  animation: collage-drift 18s ease-in-out infinite alternate;
}

.loader__collage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.loader__collage .loader__hero{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(60vh, 48vw);
  height: min(60vh, 48vw);
  border-radius: 50%;
  border: 10px solid var(--kasavu);
  z-index: 1;
}

@media (max-width: 700px){
  .loader__collage{ gap: 5px; padding: 5px; }
  .loader__collage .loader__hero{
    width: min(40vh, 70vw);
    height: min(40vh, 70vw);
    border-width: 6px;
  }
}

@keyframes collage-drift{
  from{ transform: scale(1); }
  to  { transform: scale(1.05); }
}
.loader__collage::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(36,53,40,.92);
  z-index: 2;
}

.loader__inner{
  position: relative;
  z-index: 3;
}

.footer{ padding-top: 74px; }
.footer .countdown{ margin: 0 auto 30px; }
.footer .cd{
  border-color: rgba(220,192,122,.4);
  background: rgba(255,255,255,.06);
}
.footer .cd__n{ color: var(--on-dark); }
.footer .cd__l{ color: var(--zari-lt); opacity: .7; }
.footer .countdown__done{ color: var(--zari-lt); }
.footer .btn{ border-color: var(--zari-lt); color: var(--zari-lt); }
.footer .btn:hover{ background: var(--zari-lt); color: var(--ila); }
.footer .rule--short{ margin-top: 48px; }

.footer__intro{
  font-family: var(--display);
  font-size: clamp(17px, 4.5vw, 22px);
  color: var(--zari-lt);
  margin: 0 0 30px;
  letter-spacing: .02em;
}

@media (max-width: 560px){
  .window{
    flex-direction: column;
    gap: 10px;
  }

  .mp__title{ font-size: 26px; }
  .mp__date{ letter-spacing: .14em; font-size: 12px; }
}