@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400&display=swap');

/* EXISTING SITE RULE — LEAVE THIS */

.elementor-element.elementor-element-e6feece.e-con-full.menu-all.e-flex.e-con.e-child {
    position: relative;
}


/* =========================================
JOURNAL — BACKGROUND
========================================= */

.blog body,
.blog .site,
.blog .site-content,
.blog #content,
.blog #primary,
.blog .site-main{
    background:#0d221d !important;
}

.blog .site-content,
.blog #content,
.blog #primary{
    max-width:100% !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
}


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

.blog .page-header .page-title,
.blog .page-header h1.entry-title{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
}

.blog .page-header{
    text-align:center;
    padding:110px 30px 60px;
}

.blog .page-header::before{
    content:"THE BONOO JOURNAL";
    display:block;
    color:#c8a15b;
    letter-spacing:5px;
    font-size:11px;
    font-family:'Inter', sans-serif;
    margin-bottom:18px;
}

.blog .page-header::after{
    content:"Journal";
    display:block;
    color:#f4e7d3;
    font-family:'Cormorant Garamond', serif;
    font-size:64px;
    font-weight:400;
    line-height:1;
}


/* =========================================
POSTS — SIMPLE STACKED BOXES
========================================= */

.blog .site-main{
    max-width:800px !important;
    margin:0 auto !important;
    padding:20px 30px 100px !important;
}

.blog article.post,
.blog article.hentry{
    background:#111814 !important;
    border:1px solid rgba(200,161,91,0.3) !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 0 16px !important;
    transition:border-color 0.3s ease, background 0.3s ease;
}

.blog article.post:hover,
.blog article.hentry:hover{
    border-color:#c8a15b !important;
    background:#16211b !important;
}


/* TITLE — THE WHOLE BOX */

.blog article .entry-header{
    padding:32px 34px !important;
    margin:0 !important;
    background:transparent !important;
}

.blog article .entry-title{
    margin:0 !important;
    padding:0 !important;
}

.blog article .entry-title a{
    color:#f4e7d3 !important;
    font-family:'Cormorant Garamond', serif !important;
    font-size:28px !important;
    font-weight:400 !important;
    line-height:1.3 !important;
    text-decoration:none !important;
    display:block;
    transition:color 0.3s ease;
}

.blog article .entry-title a:hover{
    color:#c8a15b !important;
}


/* HIDE EVERYTHING ELSE */

.blog article .post-thumbnail,
.blog article .wp-post-image,
.blog article .entry-content,
.blog article .entry-summary,
.blog article .entry-meta,
.blog article .entry-footer,
.blog article .cat-links,
.blog article a.more-link{
    display:none !important;
}


/* PAGINATION */

.blog .navigation.posts-navigation,
.blog .pagination{
    text-align:center;
    padding-top:30px;
}

.blog .nav-links a,
.blog .pagination a{
    color:#f4e7d3 !important;
    font-family:'Cormorant Garamond', serif !important;
    font-size:14px !important;
    letter-spacing:2px;
    text-decoration:none !important;
    border:1px solid rgba(200,161,91,0.4);
    padding:11px 26px;
    display:inline-block;
    margin:0 5px;
    transition:0.3s ease;
}

.blog .nav-links a:hover,
.blog .pagination a:hover{
    background:rgba(200,161,91,0.1);
    border-color:#c8a15b;
}


/* =========================================
SINGLE POST
========================================= */

.single-post body,
.single-post .site,
.single-post .site-content,
.single-post #content,
.single-post #primary,
.single-post .site-main{
    background:#0d221d !important;
}

.single-post .site-content,
.single-post #content,
.single-post #primary,
.single-post .site-main{
    max-width:100% !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
}

.single-post .post-thumbnail,
.single-post .wp-post-image,
.single-post .entry-header,
.single-post .entry-meta,
.single-post .post-navigation,
.single-post .comments-area{
    display:none !important;
}

.single-post .entry-content{
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#0d221d !important;
}


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

@media(max-width:768px){

    .blog .page-header{
        padding:80px 22px 40px;
    }

    .blog .page-header::after{
        font-size:40px;
    }

    .blog .page-header::before{
        font-size:10px;
        letter-spacing:4px;
        margin-bottom:14px;
    }

    .blog .site-main{
        padding:10px 22px 70px !important;
    }

    .blog article .entry-header{
        padding:24px 24px !important;
    }

    .blog article .entry-title a{
        font-size:22px !important;
    }

}