*{box-sizing:border-box}

:root{
  --paper:#f5f0ea;
  --ink:#211d1a;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,sans-serif;
}

.hidden{
  display:none!important;
}

.cover{
  position:relative;
  height:100svh;
  min-height:640px;
  overflow:hidden;
  color:#fff;
  background:#2d2926;
}

/* Foto selalu menjadi fallback paling bawah */
.cover-image,
#coverImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* Video berada di atas foto, tetapi transparan sampai siap */
.cover-video,
#coverVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  opacity:0;
  transition:opacity .45s ease;
  background:transparent;
}

#coverVideo.video-ready{
  opacity:1;
}

.cover-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.16),
      rgba(0,0,0,.08) 40%,
      rgba(0,0,0,.65)
    );
}

.cover-top,
.cover-center,
.cover-foot{
  position:relative;
  z-index:3;
}

.cover-top{
  padding:22px 20px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.cover-center{
  position:absolute;
  left:20px;
  right:20px;
  top:50%;
  transform:translateY(-45%);
  text-align:center;
}

.cover-center>p:first-child{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.cover-center h1{
  margin:14px 0;
  font:400 clamp(54px,16vw,112px)/.86 Georgia,serif;
  letter-spacing:-.045em;
}

.cover-center h1 span{
  display:block;
}

.cover-center h1 em{
  display:block;
  margin:8px 0;
  font-size:.38em;
  font-weight:400;
}

#coverDate{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.guest-card{
  width:min(420px,92%);
  margin:34px auto 16px;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:18px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}

.guest-card span{
  display:block;
  margin-bottom:4px;
  font-size:9px;
  opacity:.72;
}

.guest-card strong{
  font:400 18px Georgia,serif;
}

#openInvitation{
  border:0;
  border-radius:999px;
  padding:13px 20px;
  background:#fff;
  color:#1d1916;
}

.cover-foot{
  position:absolute;
  left:20px;
  right:20px;
  bottom:20px;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.section{
  min-height:80vh;
  padding:72px 20px;
  max-width:960px;
  margin:0 auto;
}

.section h2{
  font:400 clamp(44px,10vw,76px)/.95 Georgia,serif;
}

.music-toggle{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:20;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.9);
}