/* ============================================================
   SECTION BACKGROUNDS
============================================================ */

.section--invite{

  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(
        232,
        195,
        122,
        .09
      ),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      #091122,
      #0a1222
    );

}


.section--couple{

  background:
    radial-gradient(
      ellipse at 10% 30%,
      rgba(
        231,
        154,
        154,
        .07
      ),
      transparent 35%
    ),
    #0b1427;

}


.section--events{

  background:
    radial-gradient(
      ellipse at 85% 15%,
      rgba(
        232,
        195,
        122,
        .08
      ),
      transparent 35%
    ),
    #080f1e;

}


.section--film{
  background:#070b14;
}


.section--card{
  background:#0b1425;
}


.section--gallery{
  background:#09111f;
}


.section--contact{
  background:#080e1b;
}


/* ============================================================
   DATE CARD
============================================================ */

.datecard{

  position:relative;

  width:
    min(
      560px,
      100%
    );

  margin:
    0 auto
    clamp(
      34px,
      6vw,
      54px
    );

  padding:
    clamp(
      22px,
      5vw,
      34px
    )
    clamp(
      18px,
      5vw,
      44px
    );

  display:grid;

  justify-items:center;

  gap:6px;

  text-align:center;

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .3
    );

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        244,
        222,
        .06
      ),
      rgba(
        255,
        244,
        222,
        .015
      )
    );

  box-shadow:

    0 30px 70px -40px
    rgba(
      0,
      0,
      0,
      .9
    ),

    inset
    0 1px
    rgba(
      255,
      255,
      255,
      .06
    );

  backdrop-filter:
    blur(6px);

  overflow:hidden;

}


.datecard::after{

  content:"";

  position:absolute;

  top:0;

  left:-60%;

  width:45%;

  height:100%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(
        255,
        255,
        255,
        .14
      ),
      transparent
    );

  transform:
    skewX(-18deg);

  animation:
    sheen
    6.5s
    ease-in-out
    1.5s
    infinite;

}


@keyframes sheen{

  0%{
    left:-60%;
  }

  55%,
  100%{
    left:130%;
  }

}


.datecard__day,
.datecard__time{

  font-family:
    var(--sans);

  font-weight:300;

  font-size:
    clamp(
      10px,
      2.6vw,
      12.5px
    );

  letter-spacing:.36em;

  text-transform:
    uppercase;

  color:
    var(--gold);

}


.datecard__main{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:
    clamp(
      12px,
      3.4vw,
      22px
    );

  margin:
    4px 0;

}


.datecard__num{

  font-family:
    var(--title);

  font-size:
    clamp(
      56px,
      15vw,
      96px
    );

  line-height:1;

  color:
    #fff8ec;

  text-shadow:
    0 0 42px
    rgba(
      255,
      226,
      170,
      .35
    );

}


.datecard__mid{

  display:grid;

  justify-items:start;

  gap:4px;

  font-family:
    var(--title);

  font-size:
    clamp(
      15px,
      4vw,
      22px
    );

  letter-spacing:.16em;

  text-transform:
    uppercase;

  color:
    var(--ink-soft);

}


.datecard__mid i{

  display:block;

  width:100%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--gold-2),
      transparent
    );

}


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

.countdown{

  display:grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  gap:
    clamp(
      7px,
      2.2vw,
      16px
    );

  width:
    min(
      760px,
      100%
    );

  margin-inline:auto;

}


.cd{

  position:relative;

  padding:
    clamp(
      12px,
      2.8vw,
      18px
    )
    7px;

  border-radius:16px;

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .18
    );

  background:
    linear-gradient(
      160deg,
      rgba(
        255,
        244,
        222,
        .055
      ),
      rgba(
        255,
        244,
        222,
        .012
      )
    );

  box-shadow:
    inset
    0 1px
    rgba(
      255,
      255,
      255,
      .04
    );

  text-align:center;

}


.cd::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(
        232,
        195,
        122,
        .13
      ),
      transparent 65%
    );

  pointer-events:none;

}


.cd b{

  display:block;

  position:relative;

  font-family:
    var(--title);

  font-size:
    clamp(
      24px,
      5vw,
      36px
    );

  font-weight:400;

  color:
    var(--gold-3);

  font-variant-numeric:
    tabular-nums;

}


.cd span{

  display:block;

  position:relative;

  margin-top:5px;

  font-size:
    clamp(
      7px,
      1.8vw,
      9px
    );

  letter-spacing:.22em;

  text-transform:
    uppercase;

  color:
    var(--ink-dim);

}


.cd b.tick{

  animation:
    tick
    .35s
    ease;

}


@keyframes tick{

  50%{

    transform:
      translateY(-3px);

    opacity:.35;

  }

}


/* ============================================================
   COUPLE
============================================================ */

.couple{

  position:relative;

  display:grid;

  grid-template-columns:
    1fr
    70px
    1fr;

  align-items:center;

  gap:
    clamp(
      15px,
      3vw,
      30px
    );

}


.person{
  text-align:center;
}


.person__frame{

  position:relative;

  width:
    min(
      100%,
      410px
    );

  aspect-ratio:
    4 / 5;

  margin-inline:auto;

  overflow:hidden;

  border-radius:
    190px
    190px
    12px
    12px;

  background:
    linear-gradient(
      160deg,
      #151f32,
      #090f1c
    );

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .18
    );

  box-shadow:
    0 35px 75px -45px
    #000;

}


.person__frame img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform
    1.1s
    var(--slow);

  filter:
    saturate(.92);

}


.person:hover
.person__frame img{

  transform:
    scale(1.045);

}


.person__frame.is-empty::after{

  content:"♡";

  position:absolute;

  inset:0;

  display:grid;

  place-items:center;

  font-size:60px;

  color:
    rgba(
      232,
      195,
      122,
      .55
    );

  text-shadow:
    0 0 28px
    rgba(
      232,
      195,
      122,
      .4
    );

}


.person__ring{

  position:absolute;

  inset:9px;

  border:
    1px solid
    rgba(
      255,
      244,
      222,
      .28
    );

  border-radius:
    190px
    190px
    12px
    12px;

  pointer-events:none;

}


.person__name{

  font-size:
    clamp(
      30px,
      8vw,
      46px
    );

  margin:
    20px 0
    4px;

}


.person__role{

  display:block;

  font-size:
    clamp(
      9.5px,
      2.4vw,
      11.5px
    );

  letter-spacing:.36em;

  text-transform:
    uppercase;

  color:
    var(--gold);

  margin-bottom:12px;

}


.person__about{

  font-size:
    clamp(
      14px,
      3.4vw,
      16.5px
    );

  font-weight:300;

  color:
    var(--ink-soft);

  max-width:34ch;

  margin-inline:auto;

}


.couple__heart{

  align-self:center;

  width:
    clamp(
      30px,
      7vw,
      52px
    );

  color:
    var(--rose);

  filter:
    drop-shadow(
      0 0 18px
      rgba(
        231,
        154,
        154,
        .6
      )
    );

  animation:
    beat
    1.9s
    ease-in-out
    infinite;

}


.couple__heart svg{

  width:100%;
  height:auto;

  fill:
    currentColor;

}


@keyframes beat{

  0%,
  100%{
    transform:scale(1);
  }

  18%{
    transform:scale(1.22);
  }

  36%{
    transform:scale(.97);
  }

  54%{
    transform:scale(1.12);
  }

}


/* ============================================================
   EVENTS TIMELINE
============================================================ */

.timeline{

  position:relative;

  padding:
    8px 0;

}


.timeline::before{

  content:"";

  position:absolute;

  left:50%;

  top:0;
  bottom:0;

  width:1px;

  translate:
    -50%
    0;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(
        232,
        195,
        122,
        .45
      ) 8%,
      rgba(
        232,
        195,
        122,
        .45
      ) 92%,
      transparent
    );

}


.timeline::after{

  content:"";

  position:absolute;

  left:50%;

  top:0;

  width:3px;

  height:0;

  translate:
    -50%
    0;

  background:
    linear-gradient(
      180deg,
      var(--gold-3),
      var(--gold-2)
    );

  box-shadow:
    0 0 16px
    rgba(
      232,
      195,
      122,
      .9
    );

  border-radius:3px;

  transition:
    height
    .25s
    linear;

}


.timeline.is-lit::after{

  height:
    var(--lit,0%);

}


.tl{

  position:relative;

  width:50%;

  padding:
    0
    clamp(
      22px,
      4vw,
      46px
    )
    clamp(
      34px,
      6vw,
      58px
    );

}


.tl:nth-child(odd){

  margin-left:0;

  text-align:right;

}


.tl:nth-child(even){

  margin-left:50%;

  text-align:left;

}


.tl__dot{

  position:absolute;

  top:6px;

  width:14px;
  height:14px;

  border-radius:50%;

  background:
    var(--night);

  border:
    1.5px solid
    var(--gold);

  box-shadow:

    0 0 0 4px
    rgba(
      232,
      195,
      122,
      .14
    ),

    0 0 18px
    rgba(
      232,
      195,
      122,
      .22
    );

}


.tl:nth-child(odd)
.tl__dot{

  right:-7px;

}


.tl:nth-child(even)
.tl__dot{

  left:-7px;

}


.tl.is-in
.tl__dot{

  animation:
    dotPop
    .8s
    var(--slow)
    both;

}


@keyframes dotPop{

  0%{
    transform:scale(0);
  }

  62%{
    transform:scale(1.45);
  }

  100%{
    transform:scale(1);
  }

}


.tl__card{

  position:relative;

  display:inline-block;

  text-align:inherit;

  padding:
    clamp(
      16px,
      3.6vw,
      24px
    )
    clamp(
      18px,
      4vw,
      28px
    );

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .2
    );

  border-radius:18px;

  background:
    linear-gradient(
      160deg,
      rgba(
        255,
        244,
        222,
        .055
      ),
      rgba(
        255,
        244,
        222,
        .015
      )
    );

  box-shadow:
    0 26px 60px -44px
    rgba(
      0,
      0,
      0,
      .95
    );

  transition:
    transform
    .7s
    var(--slow),

    border-color
    .7s,

    box-shadow
    .7s;

}


.tl__card:hover{

  transform:
    translateY(-6px);

  border-color:
    rgba(
      232,
      195,
      122,
      .5
    );

  box-shadow:
    0 34px 70px -40px
    rgba(
      0,
      0,
      0,
      1
    );

}


.tl__ico{

  width:44px;
  height:44px;

  margin-bottom:10px;

  display:grid;

  place-items:center;

  border-radius:50%;

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .25
    );

  color:
    var(--gold);

}


.tl__ico svg{

  width:22px;
  height:22px;

  stroke-width:1.5;

}


.tl__title{

  margin:0;

  font-family:
    var(--title);

  font-size:
    clamp(
      20px,
      4.5vw,
      28px
    );

  font-weight:400;

}


.tl__meta{

  margin:
    7px 0 0;

  font-size:
    clamp(
      10px,
      2.4vw,
      12px
    );

  letter-spacing:.15em;

  text-transform:
    uppercase;

  color:
    var(--gold);

}


.tl__place{

  display:block;

  margin-top:8px;

  font-size:12px;

  color:
    var(--ink-soft);

}


.tl__note{

  margin:
    10px 0 0;

  font-family:
    var(--serif);

  font-size:15px;

  color:
    var(--ink-dim);

  line-height:1.5;

}


/* ============================================================
   GALLERY
============================================================ */

.grid{

  display:grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:12px;

}


.gcard{

  position:relative;

  margin:0;

  aspect-ratio:1;

  overflow:hidden;

  border-radius:14px;

  background:#0c1527;

  cursor:pointer;

}


.gcard img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform
    1s
    var(--slow);

  filter:
    saturate(.9);

}


.gcard:hover img{

  transform:
    scale(1.06);

}


.gcard__cap{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:
    28px
    14px
    13px;

  background:
    linear-gradient(
      transparent,
      rgba(
        0,
        0,
        0,
        .78
      )
    );

  font-size:11px;

  color:#fff;

}


.gcard--empty{

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .16
    );

}


.gcard__mark{

  color:
    var(--gold);

  font-size:34px;

}


.gcard__ph{

  font-family:
    var(--serif);

  color:
    var(--ink-dim);

}


/* ============================================================
   CONTACT
============================================================ */

.actions{

  display:grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:12px;

}


.action{

  display:grid;

  justify-items:center;

  gap:7px;

  padding:
    25px
    14px;

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .18
    );

  border-radius:18px;

  background:
    linear-gradient(
      160deg,
      rgba(
        255,
        244,
        222,
        .05
      ),
      rgba(
        255,
        244,
        222,
        .01
      )
    );

  transition:

    transform
    .5s
    var(--slow),

    border-color
    .4s,

    background
    .4s;

}


.action:hover{

  transform:
    translateY(-5px);

  border-color:
    rgba(
      232,
      195,
      122,
      .45
    );

  background:
    rgba(
      232,
      195,
      122,
      .05
    );

}


.action__ico{

  width:30px;

  color:
    var(--gold);

}


.action__ico svg{

  width:100%;

  stroke-width:1.5;

}


.action b{

  font-family:
    var(--title);

  font-size:19px;

  font-weight:400;

}


.action small{

  font-size:10px;

  color:
    var(--ink-dim);

}


.phones{

  display:flex;

  justify-content:center;

  gap:10px;

  flex-wrap:wrap;

  margin-top:25px;

}


.chip{

  display:flex;

  align-items:center;

  gap:10px;

  padding:
    10px
    14px;

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .16
    );

  border-radius:999px;

}


.chip__ico{

  width:20px;

  color:
    var(--gold);

}


.chip__ico svg{
  width:100%;
}


.chip__txt{

  display:grid;

  gap:1px;

}


.chip__txt b{

  font-size:12px;

  font-weight:400;

}


.chip__txt span{

  font-size:9px;

  color:
    var(--ink-dim);

}


/* ============================================================
   VENUE
============================================================ */

.venue{

  margin-top:45px;

  text-align:center;

}


.venue__name{

  font-size:
    clamp(
      40px,
      9vw,
      64px
    );

  margin:
    0 0 5px;

}


.venue__addr{

  margin:0;

  color:
    var(--ink-soft);

  font-size:14px;

}


.venue__map{

  margin-top:24px;

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .18
    );

  border-radius:18px;

  overflow:hidden;

}


.venue__map iframe{

  display:block;

  width:100%;

  height:360px;

  border:0;

  filter:
    grayscale(.8)
    sepia(.15);

}


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

.foot{

  position:relative;

  overflow:hidden;

  text-align:center;

  padding:
    110px
    0
    70px;

  background:
    linear-gradient(
      180deg,
      #070d1c,
      #03060c
    );

}


.foot__sky{

  position:absolute;

  inset:0;

  overflow:hidden;

  opacity:.4;

}


.foot__sky .cloud{

  filter:
    blur(18px);

  opacity:.18;

}


.cloud--f1{

  top:15%;

  left:-20%;

  width:80vw;

  height:120px;

}


.cloud--f2{

  top:58%;

  right:-20%;

  width:80vw;

  height:110px;

}


.foot__note{

  max-width:44ch;

  margin:
    0 auto
    26px;

  font-style:italic;

  font-weight:300;

  color:
    var(--ink-soft);

  font-size:
    clamp(
      15px,
      3.6vw,
      19px
    );

}


.foot__names{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:
    clamp(
      10px,
      3vw,
      22px
    );

  flex-wrap:wrap;

  font-size:
    clamp(
      38px,
      10vw,
      84px
    );

  margin-bottom:14px;

  text-shadow:
    0 0 44px
    rgba(
      232,
      195,
      122,
      .3
    );

}


.foot__names i{

  font-family:
    var(--serif);

  font-size:.44em;

  color:
    var(--gold);

  animation:
    beat
    2.4s
    ease-in-out
    infinite;

}


.foot__date{

  font-size:
    clamp(
      11px,
      2.8vw,
      13.5px
    );

  letter-spacing:.4em;

  text-transform:
    uppercase;

  color:
    var(--ink-soft);

}


.foot__tag{

  margin-top:16px;

  font-size:
    clamp(
      12px,
      3vw,
      15px
    );

  letter-spacing:.22em;

  color:
    var(--gold);

}


.foot__hearts{

  position:relative;

  height:56px;

  margin-top:12px;

  pointer-events:none;

}


.foot__hearts span{

  position:absolute;

  bottom:0;

  width:11px;
  height:11px;

  background:
    var(--rose);

  transform:
    rotate(45deg);

  opacity:0;

  animation:
    rise
    6s
    ease-in
    infinite;

}


.foot__hearts span::before,
.foot__hearts span::after{

  content:"";

  position:absolute;

  width:11px;
  height:11px;

  border-radius:50%;

  background:
    inherit;

}


.foot__hearts span::before{
  left:-55%;
}


.foot__hearts span::after{
  top:-55%;
}


.foot__hearts span:nth-child(1){
  left:22%;
}


.foot__hearts span:nth-child(2){
  left:38%;
  animation-delay:1.2s;
}


.foot__hearts span:nth-child(3){
  left:50%;
  animation-delay:2.4s;
}


.foot__hearts span:nth-child(4){
  left:63%;
  animation-delay:3.6s;
}


.foot__hearts span:nth-child(5){
  left:77%;
  animation-delay:4.8s;
}


@keyframes rise{

  0%{

    opacity:0;

    transform:
      translateY(10px)
      rotate(45deg)
      scale(.5);

  }


  15%{
    opacity:.9;
  }


  100%{

    opacity:0;

    transform:
      translateY(-120px)
      rotate(45deg)
      scale(1.1);

  }

}


/* ============================================================
   LIGHTBOX
============================================================ */

.lb{

  position:fixed;

  inset:0;

  z-index:100;

  display:grid;

  place-items:center;

  grid-template-columns:
    auto
    1fr
    auto;

  gap:8px;

  padding:
    clamp(
      12px,
      4vw,
      40px
    );

  background:
    rgba(
      4,
      7,
      14,
      .94
    );

  backdrop-filter:
    blur(12px);

}


.lb[hidden]{
  display:none;
}


.lb__fig{

  margin:0;

  max-width:
    min(
      90vw,
      1000px
    );

  text-align:center;

}


.lb__fig img{

  max-height:82vh;

  width:auto;

  max-width:100%;

  margin:auto;

  box-shadow:
    0 30px 80px
    #000;

}


.lb__fig figcaption{

  margin-top:12px;

  color:
    var(--ink-soft);

  font-size:12px;

}


.lb__x,
.lb__nav{

  display:grid;

  place-items:center;

  color:
    var(--gold-3);

}


.lb__x{

  position:absolute;

  top:15px;
  right:18px;

  font-size:35px;

}


.lb__nav{

  width:46px;
  height:46px;

  border-radius:50%;

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .3
    );

}


.lb__nav svg{

  width:22px;

}

/* =========================================================
   HEADING → CONTENT GAP
========================================================= */

.section--couple .heading,
.section--events .heading,
.section--film .heading {
    margin-bottom: 50px;
}

@media (max-width: 700px) {

    .section--couple .heading,
    .section--events .heading,
    .section--film .heading {
        margin-bottom: 40px;
    }

}