*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,"Times New Roman",serif;background:#f5f2ee;color:#2b211d}
.hero{
height:100vh;
position:relative;
background-image:url("images/hero.jpg");
background-repeat:no-repeat;
background-size:cover;
background-position:center 40%;
display:flex;
align-items:center;
}
.hero-overlay{
position:absolute;inset:0;
background:linear-gradient(90deg,rgba(245,242,238,.62) 0%,rgba(245,242,238,.28) 35%,rgba(245,242,238,0) 70%);
}
.hero-content{
position:relative;
margin-left:8%;
max-width:420px;
color:#2b211d;
text-shadow:0 1px 5px rgba(255,255,255,.35);
}
h1{font-size:4rem;font-weight:400;margin-bottom:.6rem}
p{text-transform:lowercase;line-height:1.7}
.cta{
display:inline-block;
margin-top:2rem;
padding:14px 32px;
border-radius:999px;
text-decoration:none;
color:#fff;
background:rgba(43,33,29,.78);
border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(12px);
box-shadow:0 12px 28px rgba(0,0,0,.18);
transition:.3s;
}
.cta:hover{transform:translateY(-2px);background:rgba(43,33,29,.9)}
.gallery{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:14px;
padding:42px 5%;
}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.card span{display:block;text-align:center;padding-top:10px;text-transform:lowercase;font-size:.95rem}
.fanvue{text-align:center;padding:50px 20px 70px}
.fade{opacity:0;transform:translateY(24px);transition:.8s ease}
.fade.show{opacity:1;transform:none}
@media(max-width:900px){
.hero{height:72vh;background-position:center top}
h1{font-size:3rem}
.gallery{grid-template-columns:repeat(2,1fr)}
}