:root{
    --bg:#090b10;
    --panel:#13161d;
    --border:rgba(255,255,255,.08);
    --text:#f5f3ef;
    --muted:#aeb3bc;
    --line:rgba(255,255,255,.08);
}

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

html{
    scroll-behavior:smooth;
    background: #090b10;
    overscroll-behavior-y: none;
}

body{
    margin: 0;
    background:
    radial-gradient(circle at top, rgba(255,255,255,.05), transparent 45%),
    linear-gradient(#0d1017,#090b10);
    color:var(--text);
    font-family:Inter,sans-serif;
    overflow-x:hidden;
}

/* grain */

body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.04;
    background-image:
    url("https://grainy-gradients.vercel.app/noise.svg");
}

/* layout */

.container{
    width:100%;
    padding:0 24px;
    margin:auto;
}

/* hero */

.hero{
    min-height:50vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:90px 0 50px;
    animation:fadeUp 1.2s ease;
}

h1{
    font-family:"Cormorant Garamond",serif;
    font-size:48px;
    font-weight:500;
    letter-spacing:.02em;
    line-height: 1.2;
    margin-bottom:24px;
}

.name-divider{
    opacity:.65;
    padding-bottom: 20em;
}

.hero p{
    max-width:620px;
    margin:auto;
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
    font-weight:300;
}

/* dividers */

.divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin:55px auto 30px;
    color:rgba(255,255,255,.35);
    font-size:.7rem;
    letter-spacing:.3em;
    text-transform:uppercase;
}

.divider:before,
.divider:after{
    content:"";
    height:1px;
    flex:1;
    background:var(--line);
}

/* sections */

section{
    margin-bottom:50px;
    animation:fadeUp 1s ease both;
}

.section-title{
    font-family:"Cormorant Garamond",serif;
    font-size:34px;
    font-weight:500;
    text-align:center;
    margin-bottom:12px;
}

.section-copy{
    text-align:center;
    color:var(--muted);
    max-width:620px;
    margin:0 auto 28px;
    line-height:1.8;
    font-size:15px;
}

.video-wrapper {
max-width: 900px;
margin: 0 auto;
aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
}

.embed{
    display:flex;
    align-items:center;
    justify-content:center;
}

.playlist{
    height:520px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#1d2028;
    border-radius:12px;
    color:#7b8087;
    font-size:14px;
}

.playlist iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* contact */

.contact{
    text-align:center;
    padding:50px 0 70px;
}

.contact h2{
    font-family:"Cormorant Garamond",serif;
    font-size:36px;
    margin-bottom:18px;
}

.contact p{
    color:var(--muted);
    margin-bottom:28px;
    line-height:1.8;
}

.email{
    display:inline-block;
    padding:14px 26px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    text-decoration:none;
    color:white;
    transition:.3s;
    font-size:14px;
}

/* animations */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* tablets + desktop */

@media (min-width:768px){

    .container{
        width:min(900px,90%);
        padding:0;
    }

    .hero{
        min-height:55vh;
        padding:120px 0 80px;
    }

    h1{
        font-size:72px;
    }

    .hero p{
        font-size:19px;
    }

    .divider{
        margin:90px auto 40px;
        font-size:.8rem;
    }

    section{
        margin-bottom:80px;
    }

    .section-title{
        font-size:40px;
    }

    .section-copy{
        font-size:16px;
        margin-bottom:36px;
    }

    .playlist {
        height: 400px;
    }

    .contact{
        padding:80px 0 120px;
    }

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

    .email{
        font-size:16px;
    }
}

@media (hover:hover){
    .email:hover{
        background:white;
        color:#111;
    }
}