/* ==========================================================
   CONNECT PAGE
========================================================== */

.connect-page{

    background:#1B1026;

    color:#E7DED2;

    min-height:100vh;

}


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

.connect-main{

    width:min(1180px,90%);

    margin:0 auto;

    padding-top:80px;

}


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

.connect-header{

    text-align:center;

    margin-bottom:85px;

}


.connect-header h1{

    font-family:'Cormorant Garamond',serif;

    font-size:5.2rem;

    font-weight:400;

    line-height:1;

    color:#E7DED2;

    margin:0 0 22px;

}


.connect-header p{

    font-family:'Cormorant Garamond',serif;

    font-style:italic;

    font-size:1.5rem;

    color:#DDD3C7;

    margin:0;

}


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

.connect-grid{

    display:grid;

    grid-template-columns:470px 470px;

    justify-content:center;

    gap:120px;

    align-items:center;

}


/* ==========================================================
   PORTRAIT
========================================================== */

.portrait-panel{

    width:100%;

}


.portrait-panel img{

    width:100%;

    max-width:470px;

    display:block;

    border-radius:8px;

    box-shadow:

        0 24px 60px rgba(0,0,0,.34);

}


/* ==========================================================
   CONTACT LINKS
========================================================== */

.contact-panel{

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:100%;

}


.contact-section{

    margin-bottom:58px;

}


.contact-section:last-child{

    margin-bottom:0;

}


/* THE ACTUAL LINKS */

.contact-link{

    display:inline-block;

    font-family:'Cormorant SC',serif;

    font-size:1.05rem;

    font-weight:500;

    letter-spacing:.32em;

    text-transform:uppercase;

    color:#C8A24C;

    text-decoration:none;

    position:relative;

    transition:

        color .3s ease,

        opacity .3s ease;

}


/* SUBTLE GOLD LINE */

.contact-link::after{

    content:"";

    display:block;

    width:0;

    height:1px;

    margin-top:10px;

    background:#C8A24C;

    transition:width .35s ease;

}


/* HOVER */

.contact-link:hover{

    color:#D8B56A;

}


.contact-link:hover::after{

    width:100%;

}


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

.site-footer{

    text-align:center;

    padding:130px 0 70px;

}


.site-footer p{

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

    font-size:.9rem;

    color:#9E9486;

    margin:0;

}


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

@media(max-width:900px){

    .connect-main{

        width:min(90%,600px);

        padding-top:60px;

    }


    .connect-header{

        margin-bottom:60px;

    }


    .connect-header h1{

        font-size:3.8rem;

    }


    .connect-header p{

        font-size:1.3rem;

    }


    .connect-grid{

        grid-template-columns:1fr;

        gap:65px;

    }


    .portrait-panel{

        display:flex;

        justify-content:center;

    }


    .portrait-panel img{

        max-width:400px;

    }


    .contact-panel{

        align-items:center;

        text-align:center;

    }


    .contact-section{

        margin-bottom:45px;

    }


    .contact-link{

        font-size:.95rem;

        letter-spacing:.25em;

    }


    .site-footer{

        padding:90px 0 50px;

    }

}


@media(max-width:500px){

    .connect-header h1{

        font-size:3rem;

    }


    .connect-header p{

        font-size:1.2rem;

    }


    .portrait-panel img{

        max-width:100%;

    }


    .contact-link{

        font-size:.85rem;

        letter-spacing:.18em;

    }

}