/* ========================================
   INVITED - JOURNAL
======================================== */

:root{
    --navy:#021018;
    --white:#ffffff;
}



/* ========================================
   BODY
======================================== */

body{

    background:var(--navy);

    color:var(--white);

}



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

.hero{

    min-height:80vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:140px 20px 80px;

}

.hero span{

    letter-spacing:8px;

    font-size:.85rem;

    opacity:.55;

}

.hero h1{

    margin:25px 0;

    font-family:"Cormorant Garamond",serif;

    font-size:5.5rem;

    font-weight:500;

    line-height:1.1;

}

.hero p{

    max-width:760px;

    font-size:1.1rem;

    line-height:2;

    opacity:.8;

}



/* ========================================
   GRID
======================================== */

.journal-grid{

    max-width:1300px;

    margin:100px auto 180px;

    padding:0 70px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.journal-card{

    padding:55px 45px;

    border:1px solid rgba(255,255,255,.12);

    transition:.35s;

    display:flex;

    flex-direction:column;

    min-height:380px;

}

.journal-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,255,255,.35);

    background:rgba(255,255,255,.03);

}

.number{

    font-size:.8rem;

    letter-spacing:5px;

    opacity:.45;

}

.journal-card h2{

    margin:22px 0;

    font-family:"Cormorant Garamond",serif;

    font-size:2.6rem;

    font-weight:500;

}

.journal-card p{

    flex:1;

    line-height:2;

    opacity:.8;

    margin-bottom:45px;

}

.journal-card a{

    display:inline-block;

    width:fit-content;

    padding:14px 32px;

    border:1px solid rgba(255,255,255,.25);

    color:#fff;

    letter-spacing:2px;

    transition:.3s;

}

.journal-card a:hover{

    background:#fff;

    color:#021018;

}



/* ========================================
   QUOTE
======================================== */

.quote{

    padding:80px 20px 220px;

    text-align:center;

}

.quote h2{

    font-family:"Cormorant Garamond",serif;

    font-size:3.8rem;

    font-weight:500;

    max-width:900px;

    margin:auto;

    line-height:1.4;

    opacity:.95;

}



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

@media (max-width:900px){

    .hero{

        min-height:70vh;

        padding:120px 25px 60px;

    }

    .hero h1{

        font-size:3.5rem;

    }

    .hero p{

        font-size:1rem;

    }

    .journal-grid{

        grid-template-columns:1fr;

        padding:0 25px;

        margin:80px auto 120px;

    }

    .journal-card{

        padding:40px 30px;

        min-height:auto;

    }

    .journal-card h2{

        font-size:2.2rem;

    }

    .quote{

        padding:40px 25px 140px;

    }

    .quote h2{

        font-size:2.5rem;

    }

}