/* ==========================================================================
   EUNIZA @ 18 — Luxury Debut E-Invitation
   Design tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Cinzel:wght@400;500;600&family=Jost:wght@300;400;500&display=swap');

:root{
  /* color */
  --burgundy-deep:   #3A0D1B;
  --burgundy:        #5C1A2B;
  --wine:            #7A2438;
  --gold:            #B8935A;
  --gold-light:      #D9BE8F;
  --gold-pale:       #EADFC5;
  --ivory:           #F8F1E7;
  --cream:           #EFE3D0;
  --charcoal:        #241014;
  --overlay-dark:    rgba(20,4,10,0.55);

  /* type */
  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-label:   'Cinzel', serif;
  --f-body:    'Jost', 'Helvetica Neue', sans-serif;

  /* rhythm */
  --section-pad: clamp(72px, 11vw, 168px);
  --edge-pad: clamp(24px, 6vw, 96px);
  --max-w: 1240px;

  --ease: cubic-bezier(.65,0,.35,1);
  --ease-soft: cubic-bezier(.22,1,.36,1);
}

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

html{
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin:0;
  background: var(--burgundy-deep);
  color: var(--ivory);
  font-family: var(--f-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background: var(--gold); color: var(--burgundy-deep); }

:focus-visible{
  outline: 1px solid var(--gold-light);
  outline-offset: 4px;
}

/* texture overlay used on burgundy backgrounds for a subtle paper/grain feel */
.grain{
  position:relative;
}
.grain::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Shared type utilities
   ========================================================================== */

.eyebrow{
  font-family: var(--f-label);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
}

.display{
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.rule{
  width: 64px;
  height: 1px;
  background: var(--gold);
  border:none;
  margin: 22px 0;
}
.rule.center{ margin-left:auto; margin-right:auto; }

.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  color: var(--gold);
}
.ornament .line{
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament .line.flip{ background: linear-gradient(90deg, var(--gold), transparent); }
.ornament svg{ width:14px; height:14px; }

/* ==========================================================================
   Envelope — opening experience
   ========================================================================== */

#envelope-gate{
  position: fixed;
  inset: 0;
  z-index: 999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(120% 120% at 50% 20%, var(--wine) 0%, var(--burgundy) 45%, var(--burgundy-deep) 100%);
  transition: opacity 1.1s var(--ease-soft), visibility 1.1s;
}
#envelope-gate.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.envelope-scene{
  position:relative;
  --ew: clamp(260px, 46vw, 380px);
  --eh: calc(var(--ew) * 2 / 3);
  --eh-half: calc(var(--eh) / 2);
  --ew-half: calc(var(--ew) / 2);
  width: var(--ew);
  height: var(--eh);
  filter: drop-shadow(0 26px 46px rgba(0,0,0,0.55));
}

.envelope-instruction{
  position:absolute;
  left:50%;
  bottom: -50px;
  transform: translateX(-50%);
  white-space:nowrap;
  text-align:center;
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform:uppercase;
  color: var(--gold-light);
  opacity: 0.85;
  animation: pulse-fade 2.6s ease-in-out infinite;
}
@keyframes pulse-fade{
  0%,100%{ opacity:0.55; }
  50%{ opacity:0.95; }
}

.envelope-wrapper{
  position:absolute; inset:0;
}

/* the letter — sits behind the pouch, slides up and out on open */
.envelope-card{
  position:absolute;
  top: 5%;
  left:50%;
  width: 76%;
  height: 84%;
  transform: translateX(-50%);
  z-index:2;
  background: var(--ivory);
  border-radius: 2px;
  box-shadow: 0 -10px 26px rgba(0,0,0,0.28);
  transition: top 1.05s var(--ease-soft) .62s;
}
.envelope-card::before{
  content:"";
  position:absolute; inset:9px;
  border: 1px solid rgba(90,26,43,0.32);
}
#envelope-gate.opening .envelope-card{
  top: -78%;
}

/* the pouch — front pocket, built from CSS borders (kite shape) */
.env-pouch{
  position:absolute; inset:0;
  z-index:3;
  border-top: var(--eh-half) solid transparent;
  border-right: var(--ew-half) solid #6a2036;
  border-bottom: var(--eh-half) solid #5c1a2b;
  border-left: var(--ew-half) solid #4e1729;
}
.env-pouch::after{
  /* subtle grain/vignette over the visible pocket area only, via the same kite mask */
  content:"";
  position:absolute;
  top: var(--eh-half); left:0; right:0; bottom:0;
  background: radial-gradient(120% 140% at 50% 0%, transparent 45%, rgba(0,0,0,0.22) 100%);
}

/* the flap — two stacked layers so it can swing open without a visible backface flicker */
.env-lid{
  position:absolute; inset:0;
  border-right: var(--ew-half) solid transparent;
  border-bottom: var(--eh-half) solid transparent;
  border-left: var(--ew-half) solid transparent;
  transform-origin: top center;
  transition: transform .6s var(--ease-soft);
}
.env-lid.one{
  border-top: var(--eh-half) solid #7A2438;
  transform: rotateX(0deg);
  z-index:4;
  transition-delay: 0s;
}
.env-lid.two{
  border-top: var(--eh-half) solid #3d1121;
  transform: rotateX(90deg);
  z-index:1;
  transition-delay: .22s;
}
#envelope-gate.opening .env-lid.one{
  transform: rotateX(94deg);
  transition-delay: 0s;
  z-index: 1; /* drop below the letter once it starts lifting, so the flap doesn't slice across it mid-rotation */
}
#envelope-gate.opening .env-lid.two{
  transform: rotateX(180deg);
  transition-delay: .18s;
}

/* ---- wax seal — rides on the front flap, lifts away with it -------- */
.wax-seal{
  position:absolute;
  left:0; top:0;
  width: clamp(56px, 15vw, 84px);
  height: clamp(56px, 15vw, 84px);
  transform: translate(-50%,-50%);
  z-index:5;
  display:flex; align-items:center; justify-content:center;
  border:none;
  padding:0;
  background:transparent;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.5));
  transition: transform .4s var(--ease-soft), opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.wax-seal svg{ width:100%; height:100%; overflow:visible; }
.wax-seal:hover{ transform: translate(-50%,-50%) scale(1.045); }
.wax-seal:active{ transform: translate(-50%,-50%) scale(0.95); }
.wax-seal .crack-line{
  opacity:0;
  transition: opacity .15s ease;
}
.wax-seal.cracking{ transform: translate(-50%,-50%) scale(0.92); }
.wax-seal.cracking .crack-line{ opacity:1; }
#envelope-gate.opening .wax-seal{
  opacity:0;
  transform: translate(-50%,-50%) scale(0.6);
  transition: opacity .25s ease, transform .3s ease;
}

.envelope-card-preview{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  text-align:center;
  padding: 12% 12%;
  opacity:0;
  transition: opacity .7s ease 1.05s;
}
#envelope-gate.opening .envelope-card-preview{ opacity:1; }
.envelope-card-preview .monogram-frame{
  width: 44px; height:44px;
  border: 1px solid var(--wine);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 14px;
}
.envelope-card-preview .initial{
  font-family: var(--f-display);
  font-style: italic;
  font-size: 21px;
  color: var(--burgundy);
}
.envelope-card-preview .name{
  font-family: var(--f-display);
  font-size: clamp(26px,5.6vw,36px);
  color: var(--burgundy);
}
.envelope-card-preview .sub{
  font-family: var(--f-label);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--wine);
  margin-top: 10px;
}

/* ==========================================================================
   Site reveal
   ========================================================================== */

#site{
  opacity:0;
  transition: opacity 1.2s var(--ease-soft);
}
#site.revealed{ opacity:1; }

/* ==========================================================================
   Reveal-on-scroll utility
   ========================================================================== */

.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
}
.reveal.in{
  opacity:1;
  transform:none;
}
.reveal-stagger > *{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
.reveal-stagger.in > *{
  opacity:1;
  transform:none;
}
.reveal-stagger.in > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay: .14s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay: .23s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay: .32s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay: .41s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay: .50s; }

/* ==========================================================================
   Nav dot / progress (minimal, unobtrusive)
   ========================================================================== */

#top-mark{
  position: fixed;
  top: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  font-family: var(--f-label);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold-light);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events:none;
  mix-blend-mode: difference;
}
#top-mark.show{ opacity: 0.85; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  min-height: 100svh;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:stretch;
  background: var(--burgundy-deep);
}
.hero-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: clamp(90px,10vh,120px) var(--edge-pad) 80px;
  background:
    radial-gradient(120% 100% at 0% 0%, var(--wine) 0%, var(--burgundy) 42%, var(--burgundy-deep) 100%);
}
.hero-copy .eyebrow{ margin-bottom: 18px; }
.hero-name{
  font-size: clamp(56px, 9vw, 128px);
  color: var(--ivory);
}
.hero-age{
  font-style: italic;
  font-size: clamp(28px, 4vw, 52px);
  color: var(--gold-light);
  margin-top: 6px;
}
.hero-date{
  margin-top: 30px;
  font-family: var(--f-label);
  font-size: clamp(12px,1.1vw,14px);
  letter-spacing: 0.3em;
  color: var(--gold-pale);
}
.hero-tagline{
  margin-top: 26px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 24px);
  color: rgba(248,241,231,0.82);
  max-width: 30ch;
}
.hero-scroll{
  margin-top: clamp(48px, 8vh, 96px);
  display:flex;
  align-items:center;
  gap:12px;
  font-family: var(--f-label);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold-light);
  opacity:0.8;
}
.hero-scroll .line{
  width:1px; height: 40px;
  background: linear-gradient(var(--gold), transparent);
  animation: draw-down 2.4s var(--ease) infinite;
}
@keyframes draw-down{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

.hero-photo{
  position:relative;
  overflow:hidden;
}
.hero-photo img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.06);
  filter: saturate(0.92) contrast(1.02);
}
.hero-photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, var(--burgundy-deep) 0%, transparent 12%);
}
.hero-photo::before{
  content:"";
  position:absolute; inset:0;
  z-index:2;
  box-shadow: inset 0 -120px 120px -80px rgba(20,4,10,0.5);
}

@media (max-width: 880px){
  .hero{ grid-template-columns: 1fr; grid-template-rows: auto 52vh; }
  .hero-copy{ padding-top: 128px; }
  .hero-photo::after{ background: linear-gradient(180deg, var(--burgundy-deep) 0%, transparent 10%); }
}

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */

.countdown-section{
  padding: clamp(56px,7vw,88px) var(--edge-pad);
  background: var(--burgundy);
  border-top: 1px solid rgba(217,190,143,0.18);
  border-bottom: 1px solid rgba(217,190,143,0.18);
}
.countdown-inner{
  max-width: var(--max-w);
  margin:0 auto;
  text-align:center;
}
.countdown-label{
  margin-bottom: 34px;
}
.countdown-grid{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap: clamp(18px, 4vw, 56px);
  flex-wrap:wrap;
}
.countdown-unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width: 68px;
}
.countdown-num{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 84px);
  color: var(--ivory);
  line-height:1;
  font-variant-numeric: tabular-nums;
}
.countdown-unit-label{
  margin-top: 10px;
  font-family: var(--f-label);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold-light);
}
.countdown-sep{
  font-family: var(--f-display);
  font-size: clamp(30px,4vw,52px);
  color: var(--gold);
  transform: translateY(-6px);
  opacity: 0.6;
}
.countdown-arrived{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(26px,3.4vw,38px);
  color: var(--gold-pale);
}

/* ==========================================================================
   ABOUT / PHOTO INTRO
   ========================================================================== */

.about{
  padding: var(--section-pad) var(--edge-pad);
  max-width: var(--max-w);
  margin:0 auto;
}
.about-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 6vw, 72px);
  align-items:center;
}
.about-copy{ order:2; }
.about-images{
  order:1;
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.about-images .img-current{
  margin-top: 46px;
  aspect-ratio: 4/5.1;
  overflow:hidden;
  border-radius: 2px;
}
.about-images .img-baby{
  aspect-ratio: 4/5.1;
  overflow:hidden;
  border-radius: 2px;
}
.about-images img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(0.94);
}
.about-line-1{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--gold-pale);
  line-height:1.3;
}
.about-line-2{
  font-family: var(--f-display);
  font-size: clamp(30px, 4vw, 46px);
  color: var(--ivory);
  margin-top: 14px;
  line-height:1.15;
}
.about-body{
  margin-top: 26px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(248,241,231,0.72);
  font-weight: 300;
}
@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-copy{ order:1; }
  .about-images{ order:2; }
}

/* ==========================================================================
   GALLERY — masonry + slideshow
   ========================================================================== */

.gallery-section{
  padding: var(--section-pad) var(--edge-pad);
  background: linear-gradient(180deg, var(--burgundy-deep), var(--burgundy) 50%, var(--burgundy-deep));
}
.section-heading{
  text-align:center;
  max-width: var(--max-w);
  margin: 0 auto clamp(40px,6vw,72px);
}
.section-heading h2{
  font-family: var(--f-display);
  font-size: clamp(34px, 4.6vw, 58px);
  color: var(--ivory);
  margin-top: 14px;
}
.section-heading .eyebrow{ display:block; }
.section-heading p.section-sub{
  margin-top: 16px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  color: rgba(248,241,231,0.65);
}

.masonry{
  max-width: var(--max-w);
  margin: 0 auto;
  columns: 4 240px;
  column-gap: 16px;
}
.masonry figure{
  break-inside: avoid;
  margin: 0 0 16px;
  overflow:hidden;
  border-radius: 2px;
  position:relative;
}
.masonry img{
  width:100%;
  display:block;
  transition: transform 1.1s var(--ease-soft);
  filter: saturate(0.94);
}
.masonry figure:hover img{ transform: scale(1.045); }
.masonry figure::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(217,190,143,0.18);
  pointer-events:none;
}

.slideshow{
  max-width: var(--max-w);
  margin: clamp(56px,8vw,96px) auto 0;
  position:relative;
}
.slideshow-viewport{
  position:relative;
  aspect-ratio: 16/9.2;
  overflow:hidden;
  border-radius: 2px;
}
.slideshow-track{
  display:flex;
  width:100%; height:100%;
  transition: transform .85s var(--ease-soft);
}
.slideshow-slide{
  flex: 0 0 100%;
  height:100%;
  position:relative;
}
.slideshow-slide img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(0.92);
}
.slideshow-slide::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(217,190,143,0.22);
}
.slideshow-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 22px;
  margin-top: 22px;
}
.slideshow-arrow{
  width: 40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(217,190,143,0.4);
  background:transparent;
  color: var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.slideshow-arrow:hover{ border-color: var(--gold); background: rgba(217,190,143,0.08); transform: scale(1.04); }
.slideshow-arrow svg{ width:16px; height:16px; }
.slideshow-dots{
  display:flex; gap:8px;
}
.slideshow-dot{
  width:6px; height:6px;
  border-radius:50%;
  background: rgba(217,190,143,0.35);
  border:none;
  padding:0;
  transition: background .3s ease, transform .3s ease;
}
.slideshow-dot.active{ background: var(--gold); transform: scale(1.3); }

@media (max-width: 640px){
  .masonry{ columns: 2 160px; }
}

/* ==========================================================================
   TRADITIONS — 18 Roses / Candles / Treasures / Blue Bills / Shots
   ========================================================================== */

.traditions{
  padding: var(--section-pad) var(--edge-pad);
  background: var(--burgundy-deep);
}
.tradition-list{
  max-width: var(--max-w);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
}
.tradition{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(24px,5vw,64px);
  padding: clamp(40px,6vw,64px) 0;
  border-top: 1px solid rgba(217,190,143,0.16);
  align-items:start;
}
.tradition:last-child{ border-bottom: 1px solid rgba(217,190,143,0.16); }
.tradition-intro{
  position:sticky;
  top: 90px;
}
.tradition-icon{
  width: 46px; height:46px;
  color: var(--gold);
  margin-bottom: 20px;
}
.tradition-num{
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold-light);
}
.tradition-title{
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--ivory);
  margin-top: 10px;
}
.tradition-desc{
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(248,241,231,0.62);
  max-width: 34ch;
}
.tradition-names{
  columns: 2 180px;
  column-gap: 32px;
}
.tradition-names li{
  font-family: var(--f-display);
  font-size: 19px;
  color: rgba(248,241,231,0.88);
  padding: 9px 0;
  border-bottom: 1px solid rgba(217,190,143,0.12);
  break-inside: avoid;
  display:flex;
  gap: 10px;
  align-items:baseline;
}
.tradition-names li .idx{
  font-family: var(--f-label);
  font-size: 10px;
  color: var(--gold);
  min-width: 20px;
}
@media (max-width: 780px){
  .tradition{ grid-template-columns: 1fr; }
  .tradition-intro{ position:static; }
  .tradition-names{ columns: 2 130px; }
}

/* ==========================================================================
   DRESS CODE
   ========================================================================== */

.dresscode{
  position:relative;
  padding: clamp(90px,12vw,150px) var(--edge-pad);
  background: linear-gradient(180deg, var(--burgundy) 0%, var(--wine) 100%);
  text-align:center;
  overflow:hidden;
}
.dresscode::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(217,190,143,0.12), transparent 70%);
}
.dresscode-inner{
  position:relative;
  max-width: 760px;
  margin:0 auto;
}
.dresscode-title{
  font-family: var(--f-display);
  font-size: clamp(38px, 6vw, 72px);
  color: var(--ivory);
  margin-top: 16px;
}
.dresscode-note{
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(248,241,231,0.75);
  max-width: 46ch;
  margin-left:auto; margin-right:auto;
}
.palette-swatches{
  margin-top: 44px;
  display:flex;
  justify-content:center;
  gap: 18px;
  flex-wrap:wrap;
}
.swatch{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}
.swatch .chip{
  width: 46px; height:46px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(217,190,143,0.4), 0 6px 14px rgba(0,0,0,0.35);
}
.swatch span{
  font-family: var(--f-label);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--gold-pale);
  text-transform:uppercase;
}

/* ==========================================================================
   RSVP
   ========================================================================== */

.rsvp{
  padding: var(--section-pad) var(--edge-pad);
  background: var(--burgundy-deep);
  text-align:center;
}
.rsvp-inner{
  max-width: 640px;
  margin:0 auto;
}
.rsvp-title{
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 60px);
  color: var(--ivory);
  margin-top: 16px;
}
.rsvp-message{
  margin-top: 22px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: rgba(248,241,231,0.78);
}
.rsvp-meta{
  margin-top: 20px;
  font-size: 13px;
  color: rgba(248,241,231,0.55);
  line-height: 1.8;
}
.rsvp-btn{
  margin-top: 40px;
  display:inline-flex;
  align-items:center;
  gap: 14px;
  padding: 18px 46px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-pale);
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background .4s ease, color .4s ease, box-shadow .4s ease;
}
.rsvp-btn:hover{
  background: var(--gold);
  color: var(--burgundy-deep);
  box-shadow: 0 10px 30px -10px rgba(184,147,90,0.6);
}
.rsvp-deadline{
  margin-top: 28px;
  font-family: var(--f-label);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--gold);
  opacity: 0.75;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer{
  padding: clamp(64px,8vw,96px) var(--edge-pad) clamp(36px,5vw,48px);
  background: var(--burgundy-deep);
  border-top: 1px solid rgba(217,190,143,0.18);
  text-align:center;
}
.footer-monogram{
  font-family: var(--f-display);
  font-style: italic;
  font-size: 40px;
  color: var(--gold);
}
.footer-name{
  margin-top: 18px;
  font-family: var(--f-display);
  font-size: clamp(26px,3vw,36px);
  color: var(--ivory);
}
.footer-date{
  margin-top: 8px;
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--gold-light);
}
.footer-closing{
  margin-top: 26px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  color: rgba(248,241,231,0.6);
}
.footer-fine{
  margin-top: 44px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(248,241,231,0.32);
}