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

.bbw-blog{

    padding:3rem 0 4rem;

}

/*
==================================================
ENTRY LIST
==================================================
*/

.bbw-entry{

    padding-bottom:2.5rem;

    margin-bottom:2.5rem;

    border-bottom:2px dotted var(--bbw-teal);

}

.bbw-entry:last-child{

    padding-bottom:0;

    margin-bottom:0;

    border-bottom:none;

}

.bbw-entry-meta{

    margin-bottom:.75rem;

    color:var(--bbw-teal-dark);

    font-family:
        "Arial Narrow",
        "Franklin Gothic Condensed",
        Arial,
        sans-serif;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}

.bbw-entry-meta-sep{

    margin:0 .5rem;

}

.bbw-entry-title{

    margin-bottom:1rem;

}

.bbw-entry-title a{

    display:inline-block;

    text-decoration:none;

}

.bbw-entry-title span{

    display:inline-block;

    padding:.5rem 1rem;

    background:var(--bbw-teal);

    color:var(--bbw-paper-light);

    font-family:"Anton",sans-serif;

    font-size:clamp(1.3rem,2.6vw,1.8rem);

    font-weight:400;

    letter-spacing:.02em;

    box-shadow:4px 4px 0 rgba(0,0,0,.12);

    transition:background .2s ease;

}

.bbw-entry-title a:hover span,
.bbw-entry-title a:focus-visible span{

    background:var(--bbw-teal-dark);

}

.bbw-entry-excerpt{

    margin-bottom:1.25rem;

    font-size:1.05rem;

    line-height:1.7;

}

.bbw-entry-excerpt p{

    margin:0;

}

.bbw-entry-more{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    padding-bottom:.3rem;

    color:var(--bbw-teal-dark);

    border-bottom:2px solid var(--bbw-teal);

    font-family:
        "Arial Narrow",
        "Franklin Gothic Condensed",
        Arial,
        sans-serif;

    font-size:.85rem;

    font-weight:800;

    letter-spacing:.12em;

    text-decoration:none;

    text-transform:uppercase;

}

.bbw-entry-more:hover,
.bbw-entry-more:focus-visible{

    color:var(--bbw-red);

    border-color:var(--bbw-red);

}

.bbw-blog-empty{

    text-align:center;

}

/*
==================================================
TWO-COLUMN LAYOUT + ARCHIVE SIDEBAR
==================================================
*/

.bbw-blog-layout{

    display:grid;

    grid-template-columns:1fr 280px;

    gap:2.5rem;

    align-items:start;

}

.bbw-blog-sidebar{

    background:var(--bbw-paper-light);

    border:3px solid var(--bbw-teal);

    padding:1.5rem 1.75rem;

    box-shadow:4px 4px 0 rgba(0,0,0,.12);

}

.bbw-blog-sidebar-title{

    margin-bottom:1rem;

    padding-bottom:.75rem;

    border-bottom:2px solid var(--bbw-teal);

    color:var(--bbw-teal);

    font-size:1.25rem;

}

.bbw-blog-archive-list{

    margin:0;

    padding:0;

    list-style:none;

}

.bbw-blog-archive-list li{

    padding:.5rem 0;

    border-bottom:1px dotted var(--bbw-teal);

}

.bbw-blog-archive-list li:last-child{

    border-bottom:none;

}

.bbw-blog-archive-list a{

    color:var(--bbw-red-dark);

    font-family:
        "Arial Narrow",
        "Franklin Gothic Condensed",
        Arial,
        sans-serif;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.03em;

    text-decoration:none;

    text-transform:uppercase;

}

.bbw-blog-archive-list a:hover,
.bbw-blog-archive-list a:focus-visible{

    color:var(--bbw-red);

}

.bbw-blog-archive-empty{

    margin:0;

    font-size:.9rem;

}

/*
==================================================
PAGINATION
==================================================
*/

.pagination{

    margin-top:1rem;

    text-align:center;

}

.pagination .nav-links{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:.5rem;

}

.pagination .page-numbers{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:2.25rem;

    padding:.4rem .7rem;

    color:var(--bbw-teal-dark);

    background:var(--bbw-paper-light);

    border:2px solid var(--bbw-teal);

    font-family:
        "Arial Narrow",
        "Franklin Gothic Condensed",
        Arial,
        sans-serif;

    font-size:.85rem;

    font-weight:800;

    text-decoration:none;

}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible{

    color:var(--bbw-paper-light);

    background:var(--bbw-teal);

}

.pagination .page-numbers.current{

    color:var(--bbw-paper-light);

    background:var(--bbw-red);

    border-color:var(--bbw-red-dark);

}

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

.bbw-single{

    padding:3rem 0 4rem;

}

.bbw-post{

    max-width:820px;

    margin-inline:auto;

}

.bbw-post-thumb{

    margin-bottom:1.75rem;

}

.bbw-post-thumb img{

    width:100%;

    border:4px solid var(--bbw-teal);

    box-shadow:6px 6px 0 rgba(0,0,0,.14);

}

.bbw-post-meta{

    margin-bottom:1.5rem;

    color:var(--bbw-teal-dark);

    font-family:
        "Arial Narrow",
        "Franklin Gothic Condensed",
        Arial,
        sans-serif;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}

.bbw-post-meta-sep{

    margin:0 .5rem;

}

.bbw-post-content{

    max-width:none;

    margin-inline:0;

}

/*
==================================================
POST NAVIGATION
==================================================
*/

.post-navigation{

    max-width:820px;

    margin:3rem auto 0;

    padding-top:2rem;

    border-top:2px dotted var(--bbw-teal);

}

.post-navigation .nav-links{

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    gap:1rem;

}

.post-navigation a{

    display:block;

    color:var(--bbw-ink);

    text-decoration:none;

}

.post-navigation a:hover,
.post-navigation a:focus-visible{

    color:var(--bbw-red);

}

.bbw-post-nav-label{

    display:block;

    margin-bottom:.25rem;

    color:var(--bbw-teal-dark);

    font-family:
        "Arial Narrow",
        "Franklin Gothic Condensed",
        Arial,
        sans-serif;

    font-size:.75rem;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.post-navigation .nav-next{

    text-align:right;

}

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

@media (max-width:900px){

    .bbw-blog-layout{

        grid-template-columns:1fr;

    }

    .bbw-blog-sidebar{

        order:2;

    }

}

@media (max-width:640px){

    .bbw-blog{

        padding:2rem 0 3rem;

    }

    .post-navigation .nav-links{

        flex-direction:column;

    }

    .post-navigation .nav-next{

        text-align:left;

    }

}