/*
========================================
SHAHU Awards
Homepage Styles
========================================
*/

/* RESET
======================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#ffffff;
    color:#111111;
    font-family:Inter,sans-serif;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}


/* LAYOUT
======================================== */

.container{
    width:min(1200px,92%);
    margin:0 auto;
}


/* TYPOGRAPHY
======================================== */

h1,
h2,
h3,
h4{
    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-weight:400;
    color:#111111;
}

p{
    margin:0;
}

.section-kicker{
    display:block;
    margin-bottom:1.5rem;
    font-size:.78rem;
    letter-spacing:.35em;
    text-transform:uppercase;
    color:#C59D5F;
}

.section-title{
    font-size:4rem;
    line-height:1.08;
}

.section-text{
    max-width:760px;
    margin-top:2rem;
    font-size:1.15rem;
    color:#555555;
}


/* HEADER
======================================== */

.site-header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:100;

    padding:2rem 0;

}

.header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.site-logo{

    color:#ffffff;

    font-size:1.5rem;

    letter-spacing:.18em;

}

.site-nav{

    display:flex;

    gap:2.5rem;

    align-items:center;

}

.site-nav a{

    color:#ffffff;

    font-size:.92rem;

    letter-spacing:.08em;

}

.nav-button{

    padding:.9rem 1.8rem;

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

}

.nav-button:hover{

    background:#ffffff;

    color:#111111;

}


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

.hero{

    position:relative;

    min-height:100vh;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.45)
    );

}

.hero .container{

    position:relative;

    z-index:2;

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero-content{

    max-width:720px;

    color:#ffffff;

}

.hero-kicker{

    display:block;

    margin-bottom:2rem;

    letter-spacing:.28em;

    text-transform:uppercase;

    font-size:.78rem;

}

.hero-title{

    font-size:6rem;

    line-height:.95;

    color:#ffffff;

}

.hero-text{

    margin:2.5rem 0;

    max-width:560px;

    font-size:1.2rem;

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

}

.hero-button{

    display:inline-block;

    padding:1rem 2.5rem;

    border:1px solid #ffffff;

    color:#ffffff;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-size:.8rem;

    transition:.25s;

}

.hero-button:hover{

    background:#ffffff;

    color:#111111;

}

.hero-note{

    margin-top:2rem;

    font-size:.78rem;

    letter-spacing:.18em;

    opacity:.85;

}


/* MANIFESTO
======================================== */

.manifesto{
    padding:120px 0;
    text-align:center;
    background:#faf8f5;
}

.manifesto-content{
    max-width:900px;
    margin:0 auto;
}

.manifesto .section-kicker{
    display:block;
    margin-bottom:24px;
}

.manifesto .section-title{
    max-width:900px;
    margin:0 auto;
}

.manifesto .section-text{
    max-width:700px;
    margin:36px auto 0;
    text-align:center;
}

/* CATEGORIES
======================================== */

.categories{

    padding:8rem 0;

}

.categories-grid{

    display:grid;

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

    gap:3rem 6rem;

}

.category{

    padding-bottom:1rem;

    border-bottom:1px solid #e5e5e5;

    font-family:"Cormorant Garamond",serif;

    font-size:2.3rem;

}


/* RECOGNITION
======================================== */

.recognition{

    padding:10rem 0;

}

.recognition-grid{

    display:grid;

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

    gap:3rem;

}

.recognition-item{

    padding-top:1.5rem;

    border-top:1px solid #dddddd;

}

.recognition-item h3{

    margin-bottom:1rem;

    font-size:2rem;

}

.recognition-item p{

    color:#666666;

}


/* VENICE
======================================== */

.venice{
    padding:140px 0 0;
}

.venice-content{
    max-width:820px;
    margin:0 auto 100px;
}

.venice-image img{
    display:block;
    width:100%;
    height:70vh;
    object-fit:cover;
}


/* CTA
======================================== */

.cta{

    padding:10rem 0;

    text-align:center;

    border-top:1px solid #eeeeee;

}

.cta-title{

    max-width:760px;

    margin:0 auto 3rem;

    font-size:4.5rem;

    line-height:1.08;

}

.button{

    display:inline-block;

    padding:1rem 2.8rem;

    border:1px solid #111111;

    text-transform:uppercase;

    letter-spacing:.16em;

    font-size:.8rem;

    transition:.25s;

}

.button:hover{

    background:#111111;

    color:#ffffff;

}

.cta-note{

    margin-top:2rem;

    font-size:.8rem;

    letter-spacing:.18em;

    color:#777777;

}


/* FOOTER
======================================== */

.site-footer{

    padding:3rem 0;

    border-top:1px solid #eeeeee;

    text-align:center;

    color:#777777;

}


/* RESPONSIVE
======================================== */

@media (max-width:960px){

    .hero-title{

        font-size:4.5rem;

    }

    .section-title{

        font-size:3rem;

    }

    .cta-title{

        font-size:3rem;

    }

    .recognition-grid{

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

    }

}

@media (max-width:640px){

    .site-nav{

        gap:1.25rem;

    }

    .hero-title{

        font-size:3.2rem;

    }

    .categories-grid{

        grid-template-columns:1fr;

    }

    .recognition-grid{

        grid-template-columns:1fr;

    }

    .manifesto,
    .categories,
    .recognition,
    .cta{

        padding:6rem 0;

    }

    .section-title{

        font-size:2.4rem;

    }

    .cta-title{

        font-size:2.5rem;

    }

}


.hero-actions{
    display:flex;
    align-items:center;
    gap:28px;
    margin:36px 0;
}


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

.hero-deadline{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-left:28px;

    border-left:1px solid rgba(255,255,255,.18);
}

.hero-deadline-label{
    margin:0 0 6px;
    font-size:.68rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
}

.hero-deadline-date{
    margin:0;
    font-size:1.05rem;
    font-weight:500;
    color:rgba(255,255,255,.92);
}

@media (max-width:768px){

    .hero-actions{
        display:block;
    }

    .hero-deadline{
        margin-top:20px;
        padding-left:0;
        border-left:none;
    }

}