/* ==========================================================
   Zdravko Dimitrijević
   Homepage Version 5
==========================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

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

    color:#F5F1EA;

    background:#1b1026;

}


/* ===================== HERO ===================== */

.hero{

    width:90%;

    max-width:960px;

    text-align:center;

}


/* ===================== LOGO ===================== */

.logo{

    width:245px;

    margin-bottom:70px;

}


/* ===================== NAME ===================== */

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:5.4rem;

    font-weight:500;

    line-height:1;

    color:#F7F5F0;

    margin-bottom:28px;

    letter-spacing:.3px;

    text-shadow:

        0 4px 18px rgba(0,0,0,.45);

}


/* ===================== TAGLINE ===================== */

.tagline{

    font-family:'Cormorant Garamond',serif;

    font-style:italic;

    font-size:1.35rem;

    color:#DDD3C7;

    margin-bottom:72px;

    letter-spacing:.5px;

}


/* ===================== DIVIDER ===================== */

.divider{

    width:110px;

    height:1px;

    margin:auto;

    margin-bottom:72px;

    background:

        linear-gradient(

        to right,

        transparent,

        #C7A24C,

        transparent);

}


/* ===================== NAVIGATION ===================== */

.hero nav{

    display:flex;

    flex-direction:column;

    gap:32px;

}

.hero nav a{

    position:relative;

    display:inline-block;

    width:max-content;

    margin:auto;

    text-decoration:none;

    color:#F5F1EA;

    font-family:'Cormorant SC',serif;

    font-size:1.28rem;

    letter-spacing:3px;

    transition:.35s;

}

.hero nav a:hover{

    color:#D8B56A;

}

.hero nav a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-7px;

    width:0;

    height:1px;

    background:#C7A24C;

    transition:.35s;

}

.hero nav a:hover::after{

    width:100%;

    left:0;

}


/* ===================== MOBILE ===================== */

@media(max-width:768px){

.logo{

    width:170px;

}

h1{

    font-size:3.4rem;

}

.tagline{

    font-size:1.05rem;

}

nav a{

    font-size:1rem;

    letter-spacing:2px;

}

}
/* =======================================================
   MY STORY PAGE
======================================================= */

.story-page{

    background:#1b1026;
    color:#F4F0E8;

}

.page-header{

    width:100%;
    padding:20px 8%;
    position:fixed;
    top:0;
    left:0;

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:rgba(18,10,25,.72);
    backdrop-filter:blur(12px);

    z-index:1000;

}

.header-logo{

    width:70px;
}

.top-nav{

    display:flex;
    gap:34px;

}

.top-nav a{

    color:#F4F0E8;
    text-decoration:none;

    font-family:'Cormorant Garamond',serif;

    font-size:19px;

    letter-spacing:.08em;

    transition:.3s;

}

.top-nav a:hover,
.top-nav .active{

    color:#C8A24C;

}

.story-hero{

    position:relative;

    width:100%;

    height:54vh;

    min-height:420px;

    overflow:hidden;


}
.story-hero img{

    width:100%;
    height:100%;

    object-fit:cover;
object-position:center 20%;
}

.hero-overlay{

    position:absolute;

    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

background:rgba(20,12,30,.22);

    text-align:center;

}

.hero-overlay h1{

    font-family:'Cormorant Garamond',serif;

    font-size:72px;

    font-weight:500;

    margin-bottom:18px;

}

.hero-overlay p{

    font-size:24px;

    color:#F2E8D8;

    font-style:italic;

}

.story-content{

    width:min(1080px,90%);
    margin:60px auto;

}

.story-section{

    margin-bottom:200px;

}

.two-column,
.reverse{

    display:grid;

    grid-template-columns:44% 56%;

    gap:90px;

    align-items:center;

}

.reverse .story-image{

    order:2;

}

.reverse .story-text{

    order:1;

}

.story-image{

    display:flex;
    justify-content:center;
    align-items:center;

}

.story-image img{

    width:100%;
    max-width:410px;

    border-radius:8px;

    display:block;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}
.portrait-image{

    max-width:380px;

}

.wide-image{

    display:flex;
    justify-content:center;

}

.wide-image img{

    width:100%;
    max-width:700px;

    border-radius:8px;

    display:block;

    margin:0 auto 55px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

/* Theatre image only */
.theatre-image img{

    max-width:620px;

}

/* Poppy image only */
.poppy-image img{

    max-width:560px;

}
.story-text,
.section-text{

    max-width:560px;

}
.story-text h2,
.section-text h2{

    font-family:'Cormorant Garamond',serif;

    font-size:44px;

    margin-bottom:28px;

    font-weight:500;

}

.story-text p,
.section-text p{

    font-size:19px;

    line-height:1.95;

    color:#E5DED3;

    margin-bottom:24px;

}

.closing-quote{

    margin-top:60px;

    font-family:'Cormorant Garamond',serif;

    font-size:38px;

    text-align:center;

    color:#C8A24C;

    font-style:italic;

}

.continue-section{

    text-align:center;

    padding:80px 0;

}

.continue-label{

    letter-spacing:.3em;

    text-transform:uppercase;

    font-size:13px;

    color:#B5A98D;

    margin-bottom:20px;

}

.continue-button{

    font-family:'Cormorant Garamond',serif;

    font-size:32px;

    color:#C8A24C;

    text-decoration:none;

    transition:.3s;

}

.continue-button:hover{

    opacity:.7;

}

.site-footer{

    text-align:center;

    padding:70px 0 90px;

}

.footer-logo{

    width:55px;

    margin-bottom:20px;

}

.site-footer p{

    color:#9E9486;

    font-size:14px;

}

@media(max-width:900px){

.two-column,
.reverse{

grid-template-columns:1fr;

gap:40px;

}

.reverse .story-image,
.reverse .story-text{

order:initial;

}

.hero-overlay h1{

font-size:52px;

}

.story-text h2,
.section-text h2{

font-size:38px;

}

.top-nav{

flex-wrap:wrap;
justify-content:center;

}

.page-header{

flex-direction:column;

gap:20px;

}

}