@font-face {
font-family: 'Ravensara';
src: url('./fonts/RavensaraAntiquaStencil-Regular.woff2') format('woff2');
}

/* RESET */

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

/* BASE */
body {
font-family: "Avenir", sans-serif;
background: black;
overflow: hidden;
}

/* HERO */
.hero {
position: relative;
width: 100%;
height: 100vh;
}

/* VIDEO */
.hero video {
position: absolute;
width: 140%;
height: 140%;
object-fit: cover;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* OVERLAY */
.overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.6),
rgba(0,0,0,0.2),
rgba(0,0,0,0.7)
);
}

/* =========================
TOP ARTIST NAME
========================= */

.artist {
position: absolute;
top: 6%;
left: 50%;
transform: translateX(-50%);

font-family: 'Ravensara', serif; /* 👈 artsy font */
font-size: 48px;
letter-spacing: 6px;
color: white;
opacity: 0.9;
}

/* =========================
CENTER BLOCK
========================= */

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}

/* TITLE */

.title {
font-family: 'Ravensara', serif;
font-size: 200px;
letter-spacing: 20px;
line-height: 0.85;
color: white;
}

/* BUTTON */

.button {
margin-top: 10px;
padding: 8px 16px;
border: 1px solid rgba(255,255,255,0.6);
color: white;
text-decoration: none;
font-size: 11px;
letter-spacing: 2px;
}

.button:hover {
background: rgba(255,255,255,0.15);
}

/* RESPONSIVE */

@media (max-width: 768px) {
.title {
font-size: 90px;
letter-spacing: 10px;
}

.artist {
font-size: 26px;
}
}