/* =========================================================================
   COASTAL VOWS — Wedding Invitation
   Palette + typography are driven by CSS variables. Motion is defined here;
   assets/js/main.js only toggles classes / drives parallax.
   ========================================================================= */

:root{
  --emerald:#1D362C;
  --emerald-deep:#12241d;
  --sand:#F6D5B6;
  --sand-soft:#FBEBD6;
  --navy:#04132C;
  --terracotta:#A36237;
  --brass:#C89B5A;
  --brass-lite:#e2c48a;
  --cream:#FBF3E7;

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', system-ui, sans-serif;

  --coral:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23C89B5A' stroke-width='1.1' opacity='0.9'%3E%3Cpath d='M0 130 C40 90 60 170 100 130 S160 90 200 130 240 170 260 130'/%3E%3Cpath d='M0 60 C40 20 60 100 100 60 S160 20 200 60 240 100 260 60'/%3E%3Cpath d='M0 200 C40 160 60 240 100 200 S160 160 200 200 240 240 260 200'/%3E%3Cpath d='M130 0 c-14 26 26 40 0 66 c-20 20 20 40 0 64'/%3E%3Cpath d='M60 130 c18 -18 -6 -34 10 -52 M200 130 c-18 -18 6 -34 -10 -52'/%3E%3C/g%3E%3C/svg%3E");

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

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html,body{overflow-x:hidden;width:100%}
body{
  font-family:var(--sans);
  background:var(--navy);
  color:var(--cream);
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--brass);color:var(--navy)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  opacity:.8;
}
.serif{font-family:var(--serif)}
.rule{height:1px;width:120px;background:linear-gradient(90deg,transparent,var(--brass),transparent);margin:1.6rem auto}
.rule--left{margin-left:0}

/* ---------- generic section ---------- */
section{position:relative;width:100%;overflow:hidden}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,9vw,8rem) clamp(1.25rem,5vw,3.5rem)}

/* ---------- reveal system ---------- */
.reveal{opacity:0;transform:translateY(42px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}

/* line reveal for hero words (motion owned by GSAP in main.js) */
.mask{display:block}
.mask > span{display:block}

/* =========================================================================
   MUSIC TOGGLE + SCROLL PROGRESS
   ========================================================================= */
.music-toggle{
  position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  width:52px;height:52px;border-radius:50%;
  background:rgba(4,19,44,.55);border:1px solid rgba(200,155,90,.5);
  backdrop-filter:blur(10px);display:grid;place-items:center;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s;
}
.music-toggle:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(200,155,90,.35)}
.music-toggle__bars{display:flex;align-items:flex-end;gap:3px;height:18px}
.music-toggle__bars i{width:3px;height:6px;background:var(--brass-lite);border-radius:2px}
.music-toggle.is-playing .music-toggle__bars i{animation:eq .9s ease-in-out infinite}
.music-toggle.is-playing .music-toggle__bars i:nth-child(2){animation-delay:.2s}
.music-toggle.is-playing .music-toggle__bars i:nth-child(3){animation-delay:.4s}
.music-toggle.is-playing .music-toggle__bars i:nth-child(4){animation-delay:.15s}
@keyframes eq{0%,100%{height:5px}50%{height:18px}}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:70;
  background:linear-gradient(90deg,var(--terracotta),var(--brass-lite));}

/* =========================================================================
   1. HERO
   ========================================================================= */
.hero{min-height:100svh;background:#e98b52;display:flex;align-items:center;justify-content:center}
.hero__bg{position:absolute;inset:-8% 0 -8% 0;z-index:0;will-change:transform}
.hero__bg img{width:100%;height:116%;object-fit:cover;object-position:center 60%}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(233,139,82,.15) 0%,rgba(4,19,44,.05) 45%,rgba(29,54,44,.55) 100%);}
.hero__inner{position:relative;z-index:3;text-align:center;padding:2rem 1.25rem}
.hero__eyebrow{color:var(--cream);margin-bottom:1.6rem}
.hero__names{font-family:var(--serif);color:var(--cream);font-weight:500;line-height:.98;
  text-shadow:0 2px 30px rgba(4,19,44,.45)}
.hero__names .n{font-size:clamp(3rem,13vw,8.5rem);letter-spacing:.06em}
.hero__names .amp{font-size:clamp(1rem,3.4vw,1.7rem);letter-spacing:.55em;text-transform:uppercase;
  font-family:var(--sans);font-weight:300;margin:.5rem 0;opacity:.92}
.hero__date{color:var(--cream);letter-spacing:.36em;font-size:clamp(.8rem,2.6vw,1.05rem);text-transform:uppercase}
.hero__loc{color:var(--cream);opacity:.9;letter-spacing:.24em;font-size:.72rem;text-transform:uppercase;margin-top:.6rem}
.hero__cue{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--cream);
  font-size:.6rem;letter-spacing:.35em;text-transform:uppercase}
.hero__cue .arrow{width:1px;height:44px;background:linear-gradient(var(--cream),transparent);position:relative;overflow:hidden}
.hero__cue .arrow::after{content:"";position:absolute;top:-44px;left:0;width:1px;height:44px;background:var(--brass-lite);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{top:-44px}60%,100%{top:44px}}

/* lanterns */
.lanterns{position:absolute;inset:0;z-index:2;pointer-events:none}
.lantern{position:absolute;bottom:-14vh;border-radius:38% 38% 46% 46%/30% 30% 60% 60%;
  background:radial-gradient(ellipse at 50% 70%,#ffd9a0 0%,#ff9d4d 42%,#f0602e 78%,rgba(240,96,46,.2) 100%);
  box-shadow:0 0 26px 6px rgba(255,150,70,.55),0 0 60px 12px rgba(255,110,50,.25);
  opacity:0;animation:rise linear infinite;}
.lantern::before{content:"";position:absolute;inset:14% 22% 30% 22%;border-radius:40%;
  background:radial-gradient(circle at 50% 60%,rgba(255,246,220,.95),rgba(255,200,120,.15));filter:blur(1px)}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) rotate(-2deg);opacity:0}
  8%{opacity:.9}
  85%{opacity:.85}
  100%{transform:translateY(-125vh) translateX(var(--drift,20px)) rotate(3deg);opacity:0}
}

/* =========================================================================
   2. BLESSINGS
   ========================================================================= */
.blessings{background:var(--emerald);color:var(--cream);text-align:center}
.blessings::before{content:"";position:absolute;inset:0;opacity:.10;
  background-image:var(--coral);background-size:520px;pointer-events:none}
.blessings::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 35%,transparent 40%,rgba(4,19,44,.35) 100%);pointer-events:none}
.blessings .wrap{position:relative;z-index:2;max-width:760px}
.kalash{width:82px;height:82px;margin:0 auto 1.8rem;color:var(--brass-lite)}
.blessings__sanskrit{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,3.4vw,1.5rem);color:var(--brass-lite);letter-spacing:.12em}
.blessings__intro{margin-top:2.4rem;letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;opacity:.7}
.blessings__gp{font-family:var(--serif);font-size:clamp(1.05rem,3vw,1.35rem);margin-top:.5rem;opacity:.85}
.blessings__parents{font-family:var(--serif);font-size:clamp(1.35rem,4.5vw,2.1rem);margin-top:1.2rem;color:var(--cream)}
.blessings__invite{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,4.5vw,2.15rem);
  line-height:1.4;margin-top:2rem;color:var(--sand)}

/* =========================================================================
   3. EVENTS
   ========================================================================= */
.events{background:var(--sand);color:var(--emerald)}
.events__head{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.events__head .eyebrow{color:var(--terracotta)}
.events__title{font-family:var(--serif);font-size:clamp(2.4rem,7vw,4.2rem);font-weight:600;letter-spacing:.01em;margin-top:.4rem}
.events__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(1.6rem,3.5vw,2.6rem)}
.ecard{position:relative;text-align:center;transition:transform .55s var(--ease)}
.ecard:hover{transform:translateY(-10px)}
.ecard__frame{position:relative;aspect-ratio:3/4;margin-bottom:1.3rem}
.ecard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:url(#archClip);-webkit-clip-path:url(#archClip);transition:transform 1.4s var(--ease)}
.ecard:hover .ecard__img{transform:scale(1.06)}
.ecard__arch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ecard__arch path{fill:none;stroke:var(--accent,#C89B5A);stroke-width:2;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.15))}
.ecard__glow{position:absolute;inset:0;clip-path:url(#archClip);-webkit-clip-path:url(#archClip);
  box-shadow:inset 0 0 0 0 transparent;opacity:0;transition:opacity .55s var(--ease);
  background:radial-gradient(circle at 50% 30%,var(--accent) 0%,transparent 60%);mix-blend-mode:multiply}
.ecard:hover .ecard__glow{opacity:.28}
.ecard__badge{position:absolute;top:8%;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cream);
  background:var(--accent,#A36237);padding:.35rem .8rem;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.ecard__name{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.2rem);font-weight:600;color:var(--accent)}
.ecard__meta{font-size:.82rem;letter-spacing:.06em;margin-top:.5rem;color:var(--emerald);opacity:.85}
.ecard__meta strong{font-weight:500}
.ecard__dress{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;margin-top:.7rem;color:var(--terracotta)}
.ecard__route{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--emerald);
  border-bottom:1px solid var(--accent);padding-bottom:2px;transition:gap .35s var(--ease),color .3s}
.ecard__route:hover{gap:.75rem;color:var(--accent)}

/* =========================================================================
   4. ROUTE MEDALLION
   ========================================================================= */
.route{background:var(--emerald);color:var(--cream);text-align:center}
.route .wrap{display:flex;flex-direction:column;align-items:center}
.medallion{position:relative;width:min(72vw,340px);aspect-ratio:1;display:grid;place-items:center;margin:1rem 0}
.medallion__burst{position:absolute;inset:0;color:var(--brass);animation:spin 42s linear infinite}
.medallion__ring{position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(200,155,90,.45)}
.medallion__link{position:relative;z-index:2;width:56%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#234135,#12241d);
  border:1px solid rgba(200,155,90,.5);box-shadow:0 20px 60px rgba(0,0,0,.4);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.medallion__link:hover{transform:scale(1.05);box-shadow:0 24px 70px rgba(200,155,90,.35)}
.medallion__link span{font-family:var(--serif);font-size:1.5rem;font-style:italic;color:var(--sand);line-height:1.1;padding:0 1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.route__sub{opacity:.7;letter-spacing:.2em;text-transform:uppercase;font-size:.68rem;margin-top:1rem}

/* =========================================================================
   3D DIORAMA (shared by Couple + Finale)
   ========================================================================= */
.diorama{position:relative;width:100%;max-width:820px;margin:0 auto;aspect-ratio:4/5;
  perspective:1000px;perspective-origin:50% 40%}
@media(min-width:768px){.diorama{aspect-ratio:16/12}}
.diorama__room{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(-110px) rotateX(4deg)}
.face{position:absolute;overflow:hidden;backface-visibility:hidden}
.face--back{inset:0}
.face--floor{left:-3%;right:-3%;bottom:0;height:52%;transform-origin:bottom;transform:rotateX(64deg)}
.face--ceil{left:-3%;right:-3%;top:0;height:34%;transform-origin:top;transform:rotateX(-64deg)}
.face--left{top:0;bottom:0;left:0;width:38%;transform-origin:left center;transform:rotateY(56deg)}
.face--right{top:0;bottom:0;right:0;width:38%;transform-origin:right center;transform:rotateY(-56deg)}
.grid-lines{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:40px 40px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)}
/* shadow-box framing + depth vignette */
.diorama::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  box-shadow:inset 0 0 130px 24px rgba(0,0,0,.42)}
.diorama::before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  border:1px solid rgba(200,155,90,.45);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.diorama__figure{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:5;
  width:min(52%,320px);will-change:transform;filter:drop-shadow(0 30px 34px rgba(0,0,0,.55))}
.diorama__shadow{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:4;
  width:42%;height:6%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);filter:blur(7px)}

/* couple section variant (teal sea shadow-box) */
.couple{background:#2f7c85;color:var(--cream);text-align:center}
.couple .wrap{padding-top:clamp(3.5rem,7vw,6rem)}
.couple__head .eyebrow{color:var(--brass-lite)}
.couple__title{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,9vw,5rem);line-height:.95;margin:.3rem 0 2rem}
.couple__title .a{color:#e98bb5}.couple__title .b{color:var(--terracotta)}.couple__title .amp{font-style:italic;color:var(--sand)}
.couple .face--back{background:linear-gradient(180deg,#cdeef0 0%,#6fbcc1 46%,#2f7c85 100%)}
.couple .face--floor{background:linear-gradient(180deg,#4f9aa1,#8fcdd1)}
.couple .face--ceil{background:linear-gradient(180deg,#1f5e66,#3f8b93)}
.couple .face--left{background:linear-gradient(90deg,#1c565d,#357e86)}
.couple .face--right{background:linear-gradient(90deg,#357e86,#1c565d)}
.couple__lines{max-width:560px;margin:2.4rem auto 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,3.4vw,1.55rem);color:var(--cream);line-height:1.5}

/* =========================================================================
   6. NOTE
   ========================================================================= */
.note{background:var(--sand);color:var(--emerald);text-align:center}
.note .wrap{max-width:720px}
.note .eyebrow{color:var(--terracotta)}
.note__msg{font-family:var(--serif);font-size:clamp(1.6rem,5vw,2.6rem);line-height:1.45;margin-top:1.4rem;font-weight:500}
.note__sign{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--terracotta);margin-top:1.8rem}

/* =========================================================================
   7. GALLERY
   ========================================================================= */
.gallery{background:var(--emerald-deep);color:var(--cream)}
.gallery__head{text-align:center;margin-bottom:2.4rem}
.gallery__head .eyebrow{color:var(--brass-lite)}
.gallery__head h2{font-family:var(--serif);font-size:clamp(2.2rem,6vw,3.4rem);font-weight:500;margin-top:.3rem}
.gallery__track{display:flex;gap:1.4rem;overflow-x:auto;padding:0 clamp(1.25rem,5vw,3.5rem) 1.5rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery__track::-webkit-scrollbar{display:none}
.gcard{position:relative;flex:0 0 auto;width:min(78vw,420px);aspect-ratio:3/4;border-radius:18px;overflow:hidden;
  scroll-snap-align:center;box-shadow:0 24px 60px rgba(0,0,0,.45);border:1px solid rgba(200,155,90,.25)}
.gcard img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:none}
.gcard.kb-in img{animation:kbIn 9s ease-in-out infinite alternate}
.gcard.kb-out img{animation:kbOut 9s ease-in-out infinite alternate}
@keyframes kbIn{from{transform:scale(1.02)}to{transform:scale(1.18) translate(-2%,-2%)}}
@keyframes kbOut{from{transform:scale(1.18) translate(2%,1%)}to{transform:scale(1.02)}}
.gcard__cap{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.4rem 1.2rem;
  background:linear-gradient(transparent,rgba(4,19,44,.8));font-family:var(--serif);font-style:italic;font-size:1.3rem}
.gallery__hint{text-align:center;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;opacity:.55;margin-top:.5rem}

/* =========================================================================
   8. RSVP
   ========================================================================= */
.rsvp{background:var(--emerald);color:var(--cream);text-align:center}
.rsvp .wrap{display:flex;flex-direction:column;align-items:center;max-width:680px}
.conch{width:min(46vw,180px);color:var(--brass-lite);margin-bottom:1.6rem}
.rsvp__title{font-family:var(--serif);font-size:clamp(2.1rem,6vw,3.4rem);font-weight:500;line-height:1.15}
.rsvp__sub{opacity:.8;margin-top:1rem;max-width:440px}
.wa-btn{display:inline-flex;align-items:center;gap:.7rem;margin-top:2.2rem;
  padding:1.05rem 2.4rem;border-radius:999px;font-family:var(--sans);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;font-size:.82rem;
  color:var(--navy);background:linear-gradient(135deg,var(--brass-lite),var(--brass));
  box-shadow:0 12px 34px rgba(200,155,90,.35);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.wa-btn:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(200,155,90,.55)}
.wa-btn svg{width:20px;height:20px}

/* =========================================================================
   9. THINGS TO KNOW
   ========================================================================= */
.info{background:var(--sand);color:var(--emerald)}
.info__head{text-align:center;margin-bottom:3rem}
.info__head .eyebrow{color:var(--terracotta)}
.info__head h2{font-family:var(--serif);font-size:clamp(2.1rem,6vw,3.2rem);font-weight:500;margin-top:.3rem}
.info__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.icard{text-align:center;padding:1rem}
.icard__ic{width:56px;height:56px;margin:0 auto 1.2rem;color:var(--terracotta)}
.icard h3{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin-bottom:.5rem}
.icard p{font-size:.9rem;opacity:.85;letter-spacing:.02em}

/* =========================================================================
   10. FINALE — countdown + footer (midnight navy)
   ========================================================================= */
.finale{background:var(--navy);color:var(--cream);text-align:center}
.stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--cream);
  animation:twinkle var(--dur,4s) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.95;transform:scale(1.3)}}
.finale .wrap{position:relative;z-index:2}
.finale .face--back{background:radial-gradient(circle at 50% 20%,#0d2249 0%,#04132C 70%)}
.finale .face--floor{background:linear-gradient(180deg,#0a1c3d,#04132C)}
.finale .face--ceil{background:linear-gradient(180deg,#04132C,#0a1c3d);opacity:.8}
.finale .face--left{background:linear-gradient(90deg,#050f24,#0a1c3d)}
.finale .face--right{background:linear-gradient(90deg,#0a1c3d,#050f24)}
.finale__eyebrow{color:var(--brass-lite)}
.finale__title{font-family:var(--serif);font-size:clamp(2rem,6vw,3.2rem);font-weight:500;margin:.3rem 0 2.4rem}
.countdown{display:flex;justify-content:center;gap:clamp(.5rem,2.5vw,1.6rem);margin:2.8rem 0 1rem;flex-wrap:wrap}
.cd-unit{min-width:74px}
.cd-num{font-family:var(--serif);font-size:clamp(2.4rem,9vw,4.4rem);font-weight:600;color:var(--sand);
  line-height:1;display:inline-block;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.cd-num.flip{transform:translateY(-40%);opacity:0}
.cd-label{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6;margin-top:.7rem}
.cd-sep{display:none}
.footer{margin-top:4rem;padding-top:2.6rem;border-top:1px solid rgba(200,155,90,.2)}
.footer__thanks{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,3.4vw,1.6rem);color:var(--sand);max-width:560px;margin:0 auto 2rem}
.footer__contacts{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;margin-bottom:2rem}
.footer__c .n{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.footer__c .p{font-family:var(--serif);font-size:1.25rem;color:var(--cream);margin-top:.3rem}
.footer__c a{transition:color .3s}.footer__c a:hover{color:var(--brass-lite)}
.footer__credit{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;opacity:.45;margin-top:1rem}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:600px){
  .hero__names .n{letter-spacing:.03em}
  .footer__contacts{gap:1.6rem}
  .diorama{aspect-ratio:3/4}
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .mask > span{transform:none!important}
  .lanterns,.stars{display:none!important}
  .medallion__burst{animation:none}
  .gcard img{animation:none!important}
  .hero__cue .arrow::after{animation:none}
  .cd-num{transition:none}
  .music-toggle.is-playing .music-toggle__bars i{animation:none}
  *{scroll-behavior:auto!important}
}