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

html{
    scroll-behavior:smooth;
}

body{
    background:#020617;
    color:white;
    overflow-x:hidden;
    font-family:"Inter",sans-serif;
}

canvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-1;
}

section{
    position:relative;
    width:100%;
}

/* ---------------- HERO ---------------- */

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
}

.hero-content{
    width:100%;
    max-width:900px;
    text-align:center;
}

.hero h1{
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(4rem,8vw,7rem);
    font-weight:600;
    margin-bottom:30px;
    letter-spacing:1px;
}

.hero p{
    font-size:clamp(1.2rem,2vw,1.6rem);
    line-height:1.8;
    color:rgba(255,255,255,.78);
    margin-bottom:60px;
}

button{
    border:none;
    outline:none;
    cursor:pointer;

    padding:18px 44px;

    border-radius:999px;

    background:white;

    color:#111;

    font-size:1rem;

    transition:.35s;
}

button:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 40px rgba(255,255,255,.18);
}

.scroll-indicator{
    margin-top:80px;
    font-size:2rem;
    opacity:.5;
}

/* ---------------- STORY ---------------- */

#story{
    position:relative;
}

#storyPin{

    width:100%;
    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

#storyText{

    max-width:600px;

    width:min(88vw,600px);

    margin:auto;

    font-family:"Cormorant Garamond", serif;

    font-size: clamp(1.55rem, 2.3vw, 2rem);

    font-weight:500;

    line-height:1.9;

    letter-spacing:.3px;

    text-align:center;

    opacity:0;

    transform:translateY(15px);

    text-wrap:balance;

}

/* ---------------- END ---------------- */

.ending{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.ending h2{

    font-family:"Cormorant Garamond",serif;

    font-size:2.5rem;

    font-weight:500;

    margin-bottom:10px;

}

.ending h1{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(4rem,8vw,6rem);

    font-weight:600;

    margin-bottom:30px;

}

.ending p{

    font-size:1.3rem;

    color:rgba(255,255,255,.7);

}

/* ---------------- MOBILE ---------------- */

@media (max-width:768px){

.hero h1{

    font-size:3.5rem;

}

.hero p{

    font-size:1.1rem;

}

#storyText{

    max-width:650px;

    width:min(90vw,650px);

    margin:auto;

    font-size:clamp(1.6rem,2.8vw,2.3rem);

    line-height:1.75;

}

.ending h1{

    font-size:3.5rem;

}

}