/* openparty.css
   PET THE JANE Open Party
   Base stylesheet (starter)
*/

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Pretendard,sans-serif;
  color:#444;
  background:
    radial-gradient(circle at top,#fff8fa 0%,#fff 45%),
    #fff;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
table{width:100%;border-collapse:collapse}

.opening{overflow:hidden}
.hero{position:relative;height:100vh;min-height:720px}
.hero img{width:100%;height:100%;object-fit:cover}
.hero:before{
 content:"";position:absolute;inset:0;
 background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.45));
}
.hero-text{
 position:absolute;left:50%;top:50%;
 transform:translate(-50%,-50%);
 width:min(900px,90%);
 text-align:center;color:#fff;z-index:2
}
.hero-text span{display:block;letter-spacing:8px;font-size:13px;margin-bottom:24px}
.hero-text h1{font-size:clamp(42px,6vw,78px);font-weight:300;line-height:1.15;margin-bottom:24px}
.hero-text p{font-size:clamp(18px,2vw,24px)}

.wrap{max-width:1000px;margin:0 auto;padding:120px 24px}
.wrap section{margin:120px 0}

.eyebrow{
 display:block;text-align:center;
 color:#d9a8b3;
 letter-spacing:5px;
 font-size:12px;
 font-weight:700;
 margin-bottom:18px
}
.wrap h2{
 text-align:center;
 font-size:clamp(30px,4vw,48px);
 font-weight:300;
 color:#222;
 margin-bottom:32px
}
.wrap p{
 text-align:center;
 color:#666;
 line-height:2;
 font-size:18px;
 margin-bottom:18px
}

.invite-card{text-align:center}
.invite-card img{
 max-width:720px;
 width:100%;
 margin:auto;
 border-radius:24px;
 box-shadow:0 30px 70px rgba(0,0,0,.12)
}

.cards{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:28px;
 margin-top:50px
}
.card{
 background:#fff;
 border:1px solid #eee;
 border-radius:22px;
 padding:48px 30px;
 transition:.35s;
 position:relative;
 overflow:hidden
}
.card:before{
 content:"";
 position:absolute;left:0;top:0;
 width:100%;height:4px;
 background:linear-gradient(90deg,#efc7d0,#ffe2e8)
}
.card:hover{
 transform:translateY(-8px);
 box-shadow:0 18px 45px rgba(0,0,0,.08)
}
.card h3{font-size:28px;font-weight:300;margin-bottom:18px}
.card p{margin:0;font-size:16px}

.information{
 background:#fff;
 border-radius:24px;
 box-shadow:0 16px 50px rgba(0,0,0,.05);
 padding:50px 40px
}
.information th{
 width:170px;
 background:#fafafa;
 padding:18px;
 border-bottom:1px solid #eee
}
.information td{
 padding:18px;
 border-bottom:1px solid #eee
}

.thanks{text-align:center;padding-bottom:80px}

.fade{
 opacity:0;
 transform:translateY(40px);
 transition:opacity .8s,transform .8s;
}
.fade.show{opacity:1;transform:none}

@media(max-width:768px){
 .hero{min-height:560px}
 .wrap{padding:80px 20px}
 .cards{grid-template-columns:1fr}
 .information{padding:24px 18px}
 .information th{width:100px}
 .wrap section{margin:80px 0}
}