*{
margin:0;
padding:0;
box-sizing:border-box;
}

html.locked,
body.locked{
overflow:hidden;
height:100%;
}

body{
font-family:Montserrat,sans-serif;
background:#efe4d6;
color:#735746;
}

h1,h2{
font-family:'Cormorant Garamond',serif;
}

/* OPENING COVER */
#opening{
position:fixed;
inset:0;
z-index:99999;
overflow:hidden;
}

.cover-bg{
position:absolute;
inset:0;
background:
url('../img/cover-couple.jpg') center/cover;
transform:scale(1.05);
}

.cover-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
rgba(70,50,35,.3),
rgba(70,50,35,.6)
);
}

.ornament{
position:absolute;
width:430px;
z-index:2;
animation:floaty 8s infinite;
}

.left{
left:0;
top:70px;
}

.right{
right:0;
bottom:70px;
}

.paper-bg{
position:absolute;
inset:0;
background:url('../img/paper-texture.jpg') center/cover no-repeat;
}

.floral-top{
position:absolute;
left:0;
top:0;
width:420px;
height:420px;
background:url('../img/floral-top.png') center/contain no-repeat;
animation:floaty 8s infinite;
}

.floral-bottom{
position:absolute;
right:0;
bottom:0;
width:420px;
height:420px;
background:url('../img/floral-bottom.png') center/contain no-repeat;
animation:floaty 7s infinite;
}

@keyframes floaty{
50%{
transform:translateY(-18px)
}
}

#envelope{
position:relative;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
z-index:3;
perspective:1200px;
}

.envelope-top{
position:absolute;
width:430px;
height:170px;
top:-90px;
background:#d8c0a8;
clip-path:polygon(0 0,100% 0,50% 100%);
transform-origin:top;
z-index:1;
}

.invite-panel{
background:rgba(255,252,248,.96);
padding:90px;
z-index:3;
margin-top:60px;
max-width:780px;
border-radius:25px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.pre-title{
letter-spacing:6px;
font-size:14px;
}

.invite-panel h1{
font-size:72px;
line-height:1-1;
margin-top:60px;
margin:30px 0;
color:#7a5b46;
}

.invite-panel h4{
font-size:32px;
margin:20px 0 35px;
}

.invite-card{
position:relative;
z-index:3;
background:rgba(255,252,248,.95);
padding:80px;
max-width:820px;
text-align:center;
border-radius:30px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.wax-seal{
    width:90px;
height:90px;
border-radius:50%;
background:#9a7561;
margin:0 auto 30px;
}

.small-title{
letter-spacing:4px;
}

.invite-card h1{
font-size:82px;
margin:25px 0;
}

.divider{
width:130px;
height:18px;
margin:20px auto;
background:url('../img/ornament-divider.png') center/contain no-repeat;
}

button{
padding:18px 60px;
border:none;
background:#8c6c5a;
color:white;
border-radius:60px;
cursor:pointer;
}

.hero{
height:100vh;
background:
url('../img/cover-couple.jpg') center/cover fixed;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.hero-overlay{
position:absolute;
inset:0;
background:rgba(60,40,30,.4);
}

.hero-content{
position:relative;
z-index:2;
text-align:center;
color:white;
}

.hero-content h1{
font-size:110px;
margin:25px 0;
}

.section{
padding:110px 10%;
text-align:center;
}

.section h2{
font-size:60px;
margin-bottom:60px;
}

.couple-box{
display:flex;
gap:70px;
justify-content:center;
flex-wrap:wrap;
}

.person img{
width:250px;
height:250px;
border-radius:50%;
object-fit:cover;
margin-bottom:25px;
}

.story-card,
.event-card{
background:white;
padding:45px;
max-width:820px;
margin:25px auto;
border-radius:30px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

@media(max-width:768px){

.invite-card h1,
.hero-content h1{
font-size:54px;
}

.section h2{
font-size:42px;
}

}