/* HOME PAGE — hero text forced to the far left */

.home-hero{
    position:relative;
    min-height:calc(100vh - 74px);
    display:flex;
    align-items:center;
    background-image:url('../images/home-hero.jpg');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    overflow:hidden;
}

.home-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(15,13,10,.72) 0%,
        rgba(15,13,10,.48) 35%,
        rgba(15,13,10,.12) 62%,
        rgba(15,13,10,.03) 100%
    );
}

/* IMPORTANT:
   This element also has class="container" in index.html.
   These rules deliberately override the global .container centering. */
.home-hero .home-hero-content{
    position:relative;
    z-index:1;
    color:#fff;

    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-top:70px;
    padding-right:20px;
    padding-bottom:70px;
    padding-left:20px;
}

.home-kicker{
    margin-bottom:14px;
    font-size:.83rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:#e2c17c;
}

.home-hero h1{
    max-width:720px;
    margin:0 0 10px;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(4rem,8vw,7rem);
    line-height:.95;
    font-weight:600;
    text-shadow:0 3px 18px rgba(0,0,0,.24);
}

.home-tagline{
    margin-bottom:18px;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.7rem,3vw,2.5rem);
    font-weight:600;
}

.home-intro{
    margin-bottom:30px;
    font-size:1rem;
    line-height:1.75;
    color:rgba(255,255,255,.92);
}

.home-button{
    display:inline-block;
    padding:12px 24px;
    border:1px solid #c89b43;
    border-radius:28px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-weight:600;
    backdrop-filter:blur(3px);
    transition:.25s;
}

.home-button:hover{
    background:#b08a3e;
    color:#fff;
}

@media(max-width:800px){
    .home-hero{
        min-height:760px;
        align-items:flex-end;
        background-position:58% center;
    }

    .home-hero-overlay{
        background:linear-gradient(
            0deg,
            rgba(15,13,10,.78) 0%,
            rgba(15,13,10,.45) 46%,
            rgba(15,13,10,.06) 78%
        );
    }

    .home-hero .home-hero-content{
        padding:0 20px 65px;
    }
}

@media(max-width:520px){
    .home-hero{
        min-height:680px;
        background-position:58% center;
    }

    .home-hero h1{
        font-size:3.6rem;
    }
}