/* ===========================================
   UNLOCK STORIES
   -------------------------------------------
   Design: Minimal Editorial
   =========================================== */

:root{

    --yellow:#FFC700;
    --black:#111114;
    --offwhite:#F4F4F2;
    --grey:#6B6B68;

    --container:1300px;

    --transition:.45s cubic-bezier(.16,1,.3,1);

}

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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--yellow);

    color:var(--black);

    font-family:"Inter",sans-serif;

    overflow-x:hidden;

    line-height:1.4;

}


/* =======================
Navigation
======================= */

nav{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:34px 70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:100;

    mix-blend-mode:multiply;

}

.logo{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.logo h3{
    font-size:22px;
    font-weight:600;
    letter-spacing:-0.03em;
    margin:0;
}

.tagline{
    font-size:12px;
    color:rgba(17,17,20,.65);
    letter-spacing:.08em;
    text-transform:uppercase;
}



/* =======================
Hero
======================= */

.hero{

    min-height:115vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 70px;

}

.hero-inner{

    width:min(100%,1100px);

}

.eyebrow{

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:12px;

    margin-bottom:50px;

    opacity:.65;

}

.hero h1{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(90px,11vw,180px);

    line-height:.88;

    font-weight:500;

    letter-spacing:-0.04em;

    max-width:900px;

}

.intro{

    margin-top:50px;

    font-size:24px;

    font-weight:300;

    max-width:560px;

    line-height:1.6;

}

.button{

    display:inline-block;

    margin-top:70px;

    text-decoration:none;

    color:var(--black);

    border-bottom:2px solid var(--black);

    padding-bottom:8px;

    font-weight:500;

    transition:var(--transition);

}

.button:hover{

    transform:translateX(8px);

}



/* =======================
Typography Sections
======================= */

.statement{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:0 70px;

}

.statement h2{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(70px,9vw,150px);

    line-height:.9;

    font-weight:500;

    letter-spacing:-0.04em;

}

.statement span{

    display:block;

    opacity:.35;

}



/* =======================
Reveal
======================= */

.reveal{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}

.words{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.words span{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(70px,8vw,140px);

    text-align:center;

    transition:.4s;

}

.words span:hover{

    transform:translateX(10px);

}



/* =======================
Closing
======================= */

.closing{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:0 70px;

}

.closing h2{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(70px,9vw,140px);

    line-height:.95;

    max-width:900px;

}

.closing p{

    margin-top:60px;

    max-width:650px;

    font-size:26px;

    line-height:1.7;

    font-weight:300;

}



/* =======================
Footer
======================= */

footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:50px 70px;

    border-top:1px solid rgba(0,0,0,.15);

    font-size:14px;

}



/* =======================
Fade Animation
======================= */

.statement,
.hero-inner,
.reveal,
.closing{

    opacity:0;

    transform:translateY(40px);

    transition:1s cubic-bezier(.16,1,.3,1);

}

.show{

    opacity:1;

    transform:none;

}



/* =======================
Responsive
======================= */

@media(max-width:900px){

nav{

padding:30px;

}

.hero{

padding:0 30px;

}

.statement{

padding:0 30px;

}

.closing{

padding:0 30px;

}

footer{

padding:40px 30px;

flex-direction:column;

gap:12px;

align-items:flex-start;

}

.hero h1{

font-size:72px;

}

.statement h2{

font-size:72px;

}

.closing h2{

font-size:70px;

}

.intro{

font-size:20px;

}

.words span{

font-size:68px;

}

}