/* =========================================================
   LULU'S JOURNAL
   CLASSIC BURGUNDY / BROWN / CREAM / PINK
   ========================================================= */


/* =========================================================
   COLOR PALETTE
   ========================================================= */

:root {

    --burgundy: #7a2638;

    --burgundy-dark: #521827;

    --rose: #a95768;

    --dusty-pink: #d9a5ad;

    --pale-pink: #f3dfe0;

    --dark-brown: #3d2927;

    --brown: #76534a;

    --light-brown: #a78375;

    --cream: #f8f0e3;

    --ivory: #fffaf2;

    --white: #fffdf8;

    --border: #d6b9ae;

    --shadow:
        rgba(61, 41, 39, 0.15);
}


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

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    padding: 0;

    min-height: 100vh;

    color: var(--dark-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    line-height: 1.7;


    /* BACKGROUND IMAGE */

    background-image:



        url("Wallpaper2.jpeg");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;
}


::selection {

    background: var(--dusty-pink);

    color: var(--dark-brown);
}


/* =========================================================
   TOP STRIP
   ========================================================= */

.top-strip {

    width: 100%;

    padding: 7px 10px;

    background: var(--burgundy-dark);

    color: var(--cream);

    text-align: center;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   MAIN SITE
   ========================================================= */

.site {

    width: 94%;

    max-width: 1350px;

    margin: 30px auto;

    background:
        rgba(255, 250, 242, .96);

    border: 1px solid var(--border);

    box-shadow:
        0 12px 45px var(--shadow);
}


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

.header {

    position: relative;

    min-height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    background:

        linear-gradient(
            135deg,
            #fffaf2,
            #f8e9e3
        );

    border-bottom: 1px solid var(--border);

    text-align: center;
}


.header-text {

    position: relative;

    z-index: 2;
}


.small-title {

    margin: 0 0 10px;

    color: var(--burgundy);

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.header h1 {

    margin: 0;

    color: var(--burgundy-dark);

    font-size:
        clamp(45px, 7vw, 78px);

    font-weight: normal;

    letter-spacing: -2px;

    line-height: 1;

    text-shadow:
        2px 2px 0 rgba(255,255,255,.8);
}


.subtitle {

    margin: 18px 0 0;

    color: var(--brown);

    font-size: 14px;

    font-style: italic;

    letter-spacing: .5px;
}


.header-decoration {

    position: absolute;

    right: 7%;

    color: var(--burgundy);

    opacity: .10;

    font-size: 110px;

    line-height: 1;
}


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

.navigation {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 2px;

    padding: 8px;

    background: var(--dark-brown);

    border-bottom: 4px solid var(--dusty-pink);
}


.navigation a {

    padding: 8px 18px;

    color: var(--cream);

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 1.5px;

    text-decoration: none;

    text-transform: uppercase;

    transition: .2s;
}


.navigation a:hover {

    background: var(--burgundy);

    color: white;

    text-decoration: none;
}


/* =========================================================
   THREE COLUMN LAYOUT
   ========================================================= */

.layout {

    display: grid;

    grid-template-columns:
        225px
        minmax(400px, 1fr)
        255px;

    gap: 22px;

    padding: 28px;
}


.sidebar {

    min-width: 0;
}


.posts {

    min-width: 0;
}


/* =========================================================
   GENERAL BOX
   ========================================================= */

.box {

    position: relative;

    margin-bottom: 22px;

    background: var(--white);

    border: 1px solid var(--border);

    box-shadow:
        3px 4px 0 rgba(122,38,56,.06);
}


.box-title {

    padding: 9px 13px;

    background:

        linear-gradient(
            90deg,
            var(--pale-pink),
            var(--cream)
        );

    border-bottom: 1px solid var(--border);

    color: var(--burgundy-dark);

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.box-content {

    padding: 16px;
}


/* =========================================================
   ABOUT ME
   ========================================================= */

.profile-picture {

    display: block;

    width: 145px;

    height: 145px;

    margin: 0 auto 17px;

    object-fit: cover;

    border: 5px solid var(--cream);

    border-radius: 50%;

    outline: 1px solid var(--border);

    box-shadow:
        0 5px 15px rgba(61,41,39,.15);
}


.about-box h2 {

    margin: 5px 0 10px;

    color: var(--burgundy);

    font-size: 21px;

    font-weight: normal;

    text-align: center;
}


.about-box p {

    color: var(--brown);

    font-size: 12px;

    line-height: 1.7;
}


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

a {

    color: var(--burgundy);

    text-decoration: none;

    transition: .2s;
}


a:hover {

    color: var(--rose);

    text-decoration: underline;
}


.read-more {

    display: inline-block;

    margin-top: 7px;

    color: var(--burgundy);

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: .5px;

    text-transform: uppercase;
}


/* =========================================================
   MINI NAVIGATION
   ========================================================= */

.mini-links {

    display: flex;

    flex-direction: column;
}


.mini-links a {

    padding: 6px;

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

    color: var(--brown);

    font-size: 12px;
}


.mini-links a:hover {

    padding-left: 12px;

    background: var(--pale-pink);

    color: var(--burgundy);

    text-decoration: none;
}


/* =========================================================
   CURRENTLY
   ========================================================= */

.currently p {

    margin: 0 0 12px;

    color: var(--brown);

    font-size: 11px;
}


.currently strong {

    color: var(--burgundy);

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================================
   WELCOME
   ========================================================= */

.welcome-box {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 22px;

    padding: 15px 18px;

    background: var(--pale-pink);

    border: 1px solid var(--dusty-pink);

    border-left: 5px solid var(--burgundy);
}


.sparkle {

    color: var(--burgundy);

    font-size: 23px;
}


.welcome-box strong {

    color: var(--burgundy-dark);

    font-size: 15px;
}


.welcome-box p {

    margin: 2px 0 0;

    color: var(--brown);

    font-size: 12px;
}

/* =========================================================
   NANA & BIBITA — MONTHLY PHOTO
========================================================= */

.monthly-photo-box {
    width: 100%;
}


.monthly-photo-content {
    padding: 12px;
    text-align: center;
}


/* PHOTO */

.monthly-photo {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    border: 1px solid var(--border);

    padding: 4px;

    background: var(--cream);

    box-shadow:
        3px 3px 0 var(--pale-pink);
}


/* DATE / CAPTION */

.monthly-photo-caption {
    margin: 10px 7 2px;

    color: var(--burgundy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    font-style: italic;

    letter-spacing: .5px;
}
/* =========================================================
   BLOG POST
   ========================================================= */

.post {

    margin-bottom: 30px;

    background: var(--white);

    border: 1px solid var(--border);

    box-shadow:
        3px 4px 0 rgba(61,41,39,.05);
}


.post-header {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 18px 20px;

    background:
        linear-gradient(
            90deg,
            #fff9f3,
            #fffdf9
        );

    border-bottom: 1px solid var(--border);
}


.post-date {

    margin: 0 0 4px;

    color: var(--burgundy);

    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 2px;
}


.post h2 {

    margin: 0;

    color: var(--dark-brown);

    font-size: 26px;

    font-weight: normal;

    line-height: 1.3;
}


.post-number {

    color: var(--light-brown);

    font-family: monospace;

    font-size: 11px;
}


/* =========================================================
   POST IMAGE
   ========================================================= */

.post-image {

    width: 100%;

    max-height: 360px;

    overflow: hidden;

    background: var(--cream);
}


.post-image img {

    display: block;

    width: 100%;

    max-height: 360px;

    object-fit: cover;

    transition:
        transform .5s ease;
}


.post-image img:hover {

    transform: scale(1.025);
}


/* =========================================================
   POST BODY
   ========================================================= */

.post-body {

    padding: 21px;

    color: var(--brown);

    font-size: 14px;
}


.post-body p {

    margin-top: 0;

    margin-bottom: 17px;
}


/* =========================================================
   QUOTE
   ========================================================= */

.quote {

    margin: 22px 0;

    padding: 18px 20px;

    background: var(--cream);

    border-left: 4px solid var(--burgundy);

    color: var(--brown);

    font-size: 16px;

    font-style: italic;
}


/* =========================================================
   SONG LIST
   ========================================================= */

.song-list {

    margin: 10px 0;

    padding-left: 25px;
}


.song-list li {

    padding: 6px 0;

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

    color: var(--brown);
}


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

.post-footer {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

    padding: 10px 20px;

    background: #fffaf5;

    border-top: 1px dotted var(--border);

    color: var(--brown);

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: .5px;
}


/* =========================================================
   COMMENTS
   ========================================================= */

.post-comments {

    padding: 0 20px 20px;

    background: #fffaf5;
}


.comments-heading {

    padding: 12px 0;

    margin-bottom: 10px;

    border-top: 1px solid var(--border);

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

    color: var(--burgundy);

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/*
   Common Ninja itself controls the actual
   comments, replies and reactions.

   These styles give its surrounding area
   the same visual language as the website.
*/

.comments-widget {

    min-height: 50px;

    color: var(--brown);
}


.comments-placeholder {

    margin: 0;

    padding: 15px;

    background: var(--cream);

    border: 1px dashed var(--border);

    color: var(--light-brown);

    text-align: center;

    font-size: 11px;

    font-style: italic;
}


/* =========================================================
   MUSIC PLAYER
   ========================================================= */

.album {

    margin-bottom: 15px;
}


.album img {

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border: 1px solid var(--border);

    box-shadow:
        4px 4px 0 var(--pale-pink);
}


.music-box h3 {

    margin: 5px 0 0;

    color: var(--dark-brown);

    font-size: 17px;

    font-weight: normal;
}


.artist {

    margin: 0 0 12px;

    color: var(--burgundy);

    font-size: 11px;

    font-style: italic;
}


audio {

    width: 100%;

    height: 35px;
}


.music-note {

    margin: 9px 0 0;

    color: var(--light-brown);

    text-align: center;

    font-size: 9px;

    font-style: italic;
}


/* =========================================================
   MAN OF THE WEEK
   ========================================================= */

.man-box {

    overflow: hidden;
}


.man-box::after {

    content: "✦";

    position: absolute;

    right: 12px;

    top: 45px;

    color: var(--burgundy);

    opacity: .08;

    font-size: 60px;
}


.man-photo {

    width: 100%;

    margin-bottom: 15px;
}


.man-photo img {

    display: block;

    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    border: 1px solid var(--border);

    filter: sepia(10%);
}


.man-label {

    margin: 0;

    color: var(--burgundy);

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: bold;

    letter-spacing: 2px;

    text-align: center;
}


.man-name {

    margin: 5px 0 0;

    color: var(--dark-brown);

    font-size: 22px;

    font-weight: normal;

    line-height: 1.2;

    text-align: center;
}


.man-title {

    margin: 4px 0 12px;

    color: var(--light-brown);

    font-size: 10px;

    font-style: italic;

    text-align: center;
}


.man-divider {

    margin: 10px 0;

    color: var(--burgundy);

    text-align: center;

    font-size: 18px;
}


.man-description {

    color: var(--brown);

    font-size: 11px;

    line-height: 1.7;

    text-align: center;
}


.man-rating {

    margin: 15px 0 8px;

    color: var(--burgundy);

    letter-spacing: 3px;

    text-align: center;
}


.man-week {

    margin: 0;

    color: var(--light-brown);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 1px;

    text-align: center;

    text-transform: uppercase;
}


/* =========================================================
   FEATURED POST
   ========================================================= */

.featured-date {

    margin: 0;

    color: var(--burgundy);

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: bold;

    letter-spacing: 2px;
}


.featured-box h2 {

    margin: 8px 0;

    color: var(--dark-brown);

    font-size: 19px;

    font-weight: normal;

    line-height: 1.35;
}


.featured-box p {

    color: var(--brown);

    font-size: 12px;
}


/* =========================================================
   UPDATES
   ========================================================= */

.updates p {

    margin: 0 0 9px;

    padding-bottom: 9px;

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

    color: var(--brown);

    font-size: 10px;
}


.updates strong {

    display: block;

    color: var(--burgundy);

    font-family: monospace;

    font-size: 10px;
}


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

.pagination {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 10px 0 30px;

    padding: 14px;

    border-top: 1px dotted var(--border);

    border-bottom: 1px dotted var(--border);
}


.pagination a {

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: .5px;

    text-transform: uppercase;
}


.pagination span {

    color: var(--light-brown);

    font-size: 9px;
}


/* =========================================================
   SITE COMMENT CORNER
   ========================================================= */

.site-comments {

    padding: 38px 25px 42px;

    background:

        linear-gradient(
            135deg,
            #f7e6e0,
            #fffaf2
        );

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);
}


.site-comments-inner {

    width: 90%;

    max-width: 850px;

    margin: auto;

    padding: 25px;

    background:
        rgba(255,255,255,.80);

    border: 1px solid var(--border);

    box-shadow:
        3px 4px 0 rgba(122,38,56,.07);
}


.site-comments-title {

    color: var(--burgundy-dark);

    font-size: 23px;

    font-weight: normal;

    text-align: center;
}


.site-comments-title span {

    padding: 0 12px;

    color: var(--rose);
}


.site-comments-intro {

    margin: 8px 0 20px;

    color: var(--brown);

    font-size: 12px;

    font-style: italic;

    text-align: center;
}


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

footer {

    padding: 28px;

    background: var(--dark-brown);

    border-top: 5px solid var(--burgundy);

    color: var(--cream);

    text-align: center;
}


footer p {

    margin: 3px;
}


.footer-small {

    color: #cbb5af;

    font-family: Arial, sans-serif;

    font-size: 9px;
}


.footer-links {

    margin-top: 12px;

    font-family: Arial, sans-serif;

    font-size: 10px;
}


.footer-links a {

    color: var(--dusty-pink);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .layout {

        grid-template-columns:
            190px
            minmax(300px, 1fr)
            210px;

        gap: 15px;

        padding: 18px;
    }


    .profile-picture {

        width: 120px;

        height: 120px;
    }

}


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

@media (max-width: 800px) {

    .site {

        width: 96%;

        margin: 10px auto;
    }


    .layout {

        display: flex;

        flex-direction: column;

        padding: 12px;
    }


    .posts {
        order: 1;
    }


    .left-sidebar {
        order: 2;
    }


    .right-sidebar {
        order: 3;
    }


    .header {

        min-height: 155px;

        padding: 25px 15px;
    }


    .header h1 {

        font-size: 44px;
    }


    .header-decoration {

        right: 3%;

        font-size: 65px;
    }


    .site-comments {

        padding: 25px 12px 30px;
    }


    .site-comments-inner {

        width: 100%;

        padding: 18px;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .navigation {

        flex-direction: column;

        align-items: stretch;
    }


    .navigation a {

        text-align: center;
    }


    .header h1 {

        font-size: 35px;

        letter-spacing: -1px;
    }


    .post h2 {

        font-size: 21px;
    }


    .post-header {

        padding: 14px;
    }


    .post-body {

        padding: 15px;
    }


    .post-footer {

        flex-direction: column;

        padding: 10px 14px;
    }


    .post-comments {

        padding-left: 14px;

        padding-right: 14px;
    }


    .pagination {

        flex-direction: column;

        gap: 8px;

        text-align: center;
    }


    .site-comments-title {

        font-size: 18px;
    }

}