/* =========================================================
   ✨ FONTS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Princess+Sofia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Princess+Sofia&family=Uncial+Antiqua&display=swap');

@font-face {
    font-family: "Old Cupboard";
    src: url("fonts/OldCupboard.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

/* =========================================================
   🌲 JOURNAL — CLEANED CORE STYLES
   ========================================================= */


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
}


/* =========================================================
   FOREST JOURNAL BACKGROUND
   ========================================================= */

body:not(.bookshelf-page) {
    background-color: #2d1e2d;
    color: #b7cea6;

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


/* =========================================================
   WHOLE SITE
   ========================================================= */

.site {
    width: 100%;
    min-height: 100vh;
    position: relative;
}


/* =========================================================
   LITTLE HEADER DECORATION
   ========================================================= */

.site-header {
    position: fixed;

    left: 32px;
    top: 15px;

    width: 180px;

    text-align: center;

    z-index: 30;
}

.site-header img {
    max-width: 115px;
    height: auto;

    image-rendering: pixelated;
}


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

.layout {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 100vh;

    padding:
        40px 45px 35px 315px;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: 250px;

    z-index: 20;

    display: flex;
    flex-direction: column;

    padding:
        40px 22px 25px;

    color: #d8e4c9;

    background-color: #154634;

    border: 30px solid transparent;

    border-image-source:
        url("images/acornborder.png");

    border-image-slice: 18;

    border-image-repeat: round;

    box-shadow:
        5px 0 18px
        rgba(0, 0, 0, 0.25);

    overflow: hidden;
}


.sidebar > * {
    position: relative;
    z-index: 2;
}


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

.sidebar-top {
    text-align: center;
    padding-bottom: 4px;
}

.sidebar-top h2 {
    margin: 18;

    color: #b48d5a;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 35px;
    font-weight: normal;

    line-height: 1;
    letter-spacing: 0.7px;
}


/* =========================================================
   DROP CAPS
   ========================================================= */

.toc-header-first,
.about-first-letter {
    font-family:
        "Princess Sofia",
        cursive;

    font-size: 1.2em;
    line-height: 1;

    color: #b48d5a;

    display: inline-block;

    transform: translateY(2px);
}


/* =========================================================
   SIDEBAR INTRO
   ========================================================= */

.sidebar-intro {
    margin:
        13px 2px 9px;

    color: #b7cea6;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 14px;
    line-height: 1.3;
}


/* =========================================================
   SIDEBAR DIVIDER
   ========================================================= */

.sidebar-divider {
    display: block;

    width: 70%;
    height: auto;

    margin:
        8px auto;

    opacity: 0.8;
}


/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */

#toc {
    flex: 1;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 2px 1px;

    scrollbar-width: thin;

    scrollbar-color:
        #71906e
        transparent;
}

#toc::-webkit-scrollbar {
    width: 4px;
}

#toc::-webkit-scrollbar-thumb {
    background: #71906e;
    border-radius: 5px;
}

#toc::-webkit-scrollbar-track {
    background: transparent;
}


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

.toc-link {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 5px;

    padding:
        6px 2px;

    margin:
        2px 0;

    border: none;
    background: transparent;

    color: #b7cea6;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 14px;
    line-height: 1.15;

    text-align: left;

    cursor: pointer;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.toc-link:hover {
    color: #d9c28b;

    transform:
        scale(1.035);

    transform-origin: left center;
}


/* =========================================================
   TOC MOTIFS
   ========================================================= */

.toc-ornament {
    width: 19px;
    height: 19px;

    object-fit: contain;

    flex:
        0 0 19px;

    margin-right: 13px;

    image-rendering: pixelated;

    transition:
        transform 0.3s ease;
}

.toc-link:hover .toc-ornament {
    animation:
        tinyWiggle 0.55s ease-in-out;
}


@keyframes tinyWiggle {

    0% {
        transform: rotate(0deg);
    }

    25% {
        transform:
            rotate(-7deg)
            translateY(-1px);
    }

    50% {
        transform:
            rotate(6deg)
            translateY(-1px);
    }

    75% {
        transform:
            rotate(-4deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


/* =========================================================
   TOC DROP CAPS
   ========================================================= */

.toc-first-letter {
    font-family:
        "Princess Sofia",
        cursive;

    font-size: 1.3em;
    line-height: 0.6;

    color: #d9b87a;

    display: inline-block;

    margin-right: -1px;

    transform:
        translateY(1px);
}


/* =========================================================
   READ MORE
   ========================================================= */

.read-more {
    display: block;

    margin:
        8px 2px 3px;

    color: #c6b27e;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 14px;
    font-style: italic;

    text-decoration: none;
    text-align: center;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.read-more:hover {
    color: #e0cb91;

    transform:
        scale(1.04);
}


/* =========================================================
   SIDEBAR BIO
   ========================================================= */

.sidebar-bottom {
    flex-shrink: 0;
    padding-top: 2px;
}

.sidebar-bio {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    padding:
        5px 1px;

    color: #b7cea6;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 11px;
    line-height: 1.2;

    text-align: center;
}

.bio-portrait {
    width: 180px;
    height: 180px;

    object-fit: contain;

    image-rendering: pixelated;
}

.bio-text {
    text-align: center;
}


/* =========================================================
   JOURNAL AREA
   ========================================================= */

.journal-area {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding:
        20px 0;
}


/* =========================================================
   PAGE BUTTONS
   ========================================================= */

.page-button {
    flex:
        0 0 auto;

    width: 30px;
    height: auto;

    border: none;
    background: transparent;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4px;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.page-button img {
    width: 30px;
    height: auto;

    max-height: 65px;

    object-fit: contain;

    image-rendering: pixelated;

    transition:
        transform 0.3s ease;
}

#previousButton img {
    transform: none;
}

.page-button:hover:not(:disabled) {
    transform:
        scale(1.08);
}

.page-button:disabled {
    opacity: 0.25;
    cursor: default;
}


/* =========================================================
   OPEN JOURNAL
   ========================================================= */

.open-journal {
    width:
        min(850px, 100%);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    position: relative;

    transform:
        rotate(-0.7deg);

    filter:
        drop-shadow(
            0 12px 14px
            rgba(0, 0, 0, 0.28)
        );
}


/* =========================================================
   JOURNAL PAGES
   ========================================================= */

.journal-page {
    position: relative;

    min-width: 0;

    height: 555px;

    padding:
        42px 43px 35px;

    overflow-y: auto;
    overflow-x: hidden;

    color: #5b5a4d;

    background-color: #e8dfc9;

    border-top:
        1px solid #c9bda3;

    border-bottom:
        1px solid #bcae91;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(82, 96, 68, 0.35)
        transparent;
}

.journal-page::-webkit-scrollbar {
    width: 5px;
}

.journal-page::-webkit-scrollbar-track {
    background: transparent;
}

.journal-page::-webkit-scrollbar-thumb {
    background:
        rgba(82, 96, 68, 0.35);

    border-radius: 10px;
}

.journal-page::-webkit-scrollbar-thumb:hover {
    background:
        rgba(82, 96, 68, 0.55);
}


/* =========================================================
   LEFT PAGE
   ========================================================= */

#left-page {
    border-left:
        1px solid #c5b797;

    border-radius:
        9px 2px 2px 9px;

    box-shadow:
        inset -14px 0 22px
        rgba(76, 58, 35, 0.09),

        inset 0 0 18px
        rgba(76, 58, 35, 0.05);
}


/* =========================================================
   RIGHT PAGE
   ========================================================= */

#right-page {
    border-right:
        1px solid #c5b797;

    border-radius:
        2px 9px 9px 2px;

    box-shadow:
        inset 14px 0 22px
        rgba(76, 58, 35, 0.09),

        inset 0 0 18px
        rgba(76, 58, 35, 0.05);
}


/* =========================================================
   CENTER SEAM
   ========================================================= */

.open-journal::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;
    bottom: 0;

    width: 3px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(90, 69, 42, 0.20),
            rgba(255, 255, 255, 0.30),
            transparent
        );

    pointer-events: none;

    z-index: 5;
}


/* =========================================================
   DATE
   ========================================================= */

.entry-date {
    margin:
        0 0 10px;

    color: #8f8066;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 13px;
    font-style: italic;

    letter-spacing: 0.4px;
}


/* =========================================================
   JOURNAL TITLE
   ========================================================= */

.journal-page h2 {
    margin:
        0 0 20px;

    color: #526044;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 30px;
    font-weight: normal;

    line-height: 1.1;
}


/* =========================================================
   JOURNAL TEXT
   ========================================================= */

.journal-page > div {
    color: #5b5a4d;

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

    font-size: 15px;
    line-height: 1.7;
}

.journal-page p {
    margin:
        0 0 17px;
}


/* =========================================================
   JOURNAL DROP CAP
   ========================================================= */

#left-content p:first-child::first-letter,
#right-content p:first-child::first-letter {
    float: left;

    font-family:
        "Princess Sofia",
        cursive;

    color: #526044;

    font-size: 2em;
    line-height: 0.72;

    padding:
        6px 6px 0 0;
}


/* =========================================================
   ENTRY IMAGES
   ========================================================= */

.journal-page img {
    display: block;

    max-width: 100%;
    height: auto;

    margin:
        16px auto;
}


/* =========================================================
   🍄 COVER PAGE
   ========================================================= */

.cover-page {
    height: 555px;

    overflow: hidden;

    background-color: #e6dcc3;

    text-align: center;

    padding:
        34px 35px 28px !important;
}


/* Cover title */

.cover-page h2 {
    margin:
        0 0 8px;

    color: #526044;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 30px;
    font-weight: normal;

    line-height: 0.95;

    text-align: center;
}


/* =========================================================
   COVER SUBTITLE
   ========================================================= */

.cover-subtitle {
    margin:
        0 auto 8px;

    color: #75684f;

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

    font-size: 11px;

    font-style: italic;

    line-height: 1.25;

    text-align: center;
}


/* =========================================================
   MRS. BEAR
   ========================================================= */

.cover-decoration {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    margin:
        0;
}

.cover-decoration img {
    display: block;

    width: 250px !important;
    height: auto !important;

    max-width: 250px !important;
    max-height: auto !important;

    margin:
        0 auto !important;

    object-fit: contain;

    image-rendering: pixelated;
}


/* =========================================================
   COVER DIVIDER
   ========================================================= */

.cover-divider {
    color: #a48961;

    font-size: 18px;

    line-height: 1;

    margin:
        4px 0 5px;
}


/* =========================================================
   COVER SIGNATURE
   ========================================================= */

.cover-name {
    margin:
        0 !important;

    color: #8a7051 !important;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 14px !important;

    font-style: normal !important;

    line-height: 1.1;

    text-align: center;
}


/* =========================================================
   BLANK PAGE
   ========================================================= */

.blank-page {
    background-color: #e5dac0;
    opacity: 0.7;
}


/* =========================================================
   JOURNAL SIGNATURE
   ========================================================= */

.journal-signature {
    margin-top:
        20px !important;

    color: #8a5f68;

    font-family:
        "Princess Sofia",
        cursive;

    font-size: 27px;

    line-height: 1;

    text-align: left;

    transform:
        rotate(-2deg);
}


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

.journal-navigation {
    width: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 13px;

    margin:
        3px 0 15px;

    text-align: center;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 16px;

    color: #9a806f;
}

.journal-navigation a {
    color: #d8c99f;

    text-decoration: none;

    transition:
        color 0.25s ease;
}

.journal-navigation a:hover {
    color: #b7cea6;
}

.journal-navigation span {
    color: #8a5f68;
    opacity: 0.7;
}


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

.site > footer {
    width:
        min(760px, calc(100% - 330px));

    margin:
        8px auto 0;

    text-align: center;

    color: #9caf91;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 12px;

    padding-bottom:
        12px;
}




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

.about-section {
    width: 100%;
    margin: 0;

    min-height: auto;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 50px 25px 10px;

    box-sizing: border-box;
}


/* =========================================================
🌸 ABOUT PAPER
========================================================= */
.about-paper {
    position: relative;

    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    box-sizing: border-box;

    background-color: #1d2249;

    border: 30px solid transparent;

    border-image:
        url("floral1v2.png")
        30 30
        round;

    padding: 25px 35px 30px;

    color: #d8d4c5;

    box-shadow:
        4px 6px 14px
        rgba(0, 0, 0, 0.25);
}

/* =========================================================
🌸 ABOUT TITLE
========================================================= */

.about-title {

margin:
    0 0 25px;

text-align: center;

color: #d8d4c5;

font-family:
    "Old Cupboard",
    Georgia,
    serif;

font-size: 30px;

font-weight: normal;

line-height: 1.2;


}

.about-first-letter {

font-family:
    "Princess Sofia",
    cursive;

font-size: 40px;

color: #b7cea6;


}

/* =========================================================
🌿 CONTENT
========================================================= */

.about-content {

display: flex;

align-items: flex-start;

gap: 35px;


}

/* =========================================================
🏡 PICTURE SIDE
========================================================= */

.about-picture {

flex:
    0 0 190px;

width: 190px;

text-align: center;


}

/* =========================================================
🖼️ COTTAGE IMAGE
========================================================= */

.about-picture img {

display: block;

width: 150px;

height: auto;

margin: 0 auto;

image-rendering: pixelated;


}

/* =========================================================
✎ PICTURE CAPTION
========================================================= */

.picture-caption {

margin:
    10px 0 0;

color: #c8b99b;

font-family:
    "Princess Sofia",
    cursive;

font-size: 17px;

line-height: 1.3;

transform: rotate(-2deg);


}

/* =========================================================
🌿 WELCOME TEXT
========================================================= */

.about-text {

flex: 1;

min-width: 0;

padding-top: 3px;

color: #6c5ee2;

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

font-size: 15px;

line-height: 1.7;


}

/* =========================================================
✿ WELCOME HEADING
========================================================= */

.about-text h3 {

margin:
    0 0 14px;

color: #b7cea6;

font-family:
    "Old Cupboard",
    Georgia,
    serif;

font-size: 23px;

font-weight: normal;

line-height: 1.3;


}

.about-text p {

margin:
    0 0 13px;


}

.about-text p:last-child {

margin-bottom: 0;

}

/* =========================================================
🌿 NAVIGATION — CENTERED UNDER JOURNAL AREA
========================================================= */
.journal-navigation {
    width: calc(100% - 300px);

    margin-left: 300px;

    box-sizing: border-box;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 13px;

    margin-top: 8px;
    margin-bottom: 20px;

    text-align: center;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 16px;

    color: #9a806f;
}

.journal-navigation a {
    color: #d8c99f;

    text-decoration: none;

    transition:
        color 0.25s ease;
}

.journal-navigation a:hover {
    color: #b7cea6;
}

.journal-navigation span {
    color: #8a5f68;
    opacity: 0.7;
}

/* =========================================================
   🌿 MAIN FOOTER
   ========================================================= */

.site > footer {

    width:
        min(760px, calc(100% - 330px));

    margin:
        15px auto 0;

    margin-left:
        calc(
            300px +
            ((100% - 300px - 760px) / 2)
        );

    text-align: center;

    color: #9caf91;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 12px;

    padding-bottom:
        15px;
}


/* =========================================================
🌿 ABOUT CONTENT
========================================================= */

.about-content {

display: flex;

align-items: flex-start;

justify-content: center;

gap: 30px;

}

/* =========================================================
🌸 LITTLE PICTURE
========================================================= */

.about-picture {

flex:
    0 0 150px;

width: 150px;

text-align: center;

}

/* =========================================================
🖼️ PICTURE
========================================================= */

.about-picture img {

display: block;

width: 150px;

height: auto;

margin: 0 auto;

border-radius: 6px;

}

/* =========================================================
✎ PICTURE CAPTION
========================================================= */

.picture-caption {

margin:
    8px 0 0;

color: #8a7254;

font-family:
    "Princess Sofia",
    cursive;

font-size: 18px;

line-height: 1.2;

transform: rotate(-2deg);

}

/* =========================================================
🌿 WELCOME TEXT
========================================================= */

.about-text {

flex: 1;

color: #665f52;

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

font-size: 15px;

line-height: 1.65;

padding-top: 2px;

}

.about-text p {

margin:
    0 0 12px;

}

.about-text p:last-child {

margin-bottom: 0;

}



/* =========================================================
   🦋 LUNA MOTH STICKER
   ========================================================= */

.moth-sticker {

    position: absolute;

    right: -45px;

    top: 5px;

    z-index: 5;

}


/* =========================================================
   🦋 MOTH
   ========================================================= */

.about-moth {

    display: block;

    width: 70px;

    height: auto;

    image-rendering: pixelated;

    pointer-events: auto;

    cursor: pointer;

    animation:
        moth-wiggle 5s ease-in-out infinite;
}


/* =========================================================
   🌙 LITTLE ADOPTION NOTE
   ========================================================= */

.moth-note {

    position: absolute;

    top: 65px;

    right: 5px;

    width: 125px;

    padding: 5px 8px;

    box-sizing: border-box;

    background: #f3eedc;

    color: #486044;

    border: 1px solid #b7cea6;

    border-radius: 5px;

    font-family:
        "Princess Sofia",
        cursive;

    font-size: 15px;

    line-height: 1.2;

    text-align: center;

    text-decoration: none;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(-5px)
        rotate(-3deg);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

}


/* SHOW NOTE */

.moth-sticker.open .moth-note {

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0)
        rotate(-3deg);

}


/* HOVER */

.moth-note:hover {

    color: #8a5f68;

    border-color: #8a5f68;

}


/* =========================================================
   🦋 VERY SLIGHT MOTH WOBBLE
   ========================================================= */

@keyframes moth-wiggle {

    0%,
    85% {
        transform: rotate(-35deg);
    }

    88% {
        transform: rotate(-36deg);
    }

    91% {
        transform: rotate(-34deg);
    }

    94% {
        transform: rotate(-35.5deg);
    }

    97%,
    100% {
        transform: rotate(-35deg);
    }

}


/* =========================================================
✿ LITTLE WELCOME HEADING
========================================================= */

.welcome-heading {

color: #486044;

font-family:
    "Old Cupboard",
    Georgia,
    serif;

font-size: 22px;

margin-bottom: 12px !important;

}


/* =========================================================
✎ MY LITTLE SKETCHBOOK
========================================================= */

.art-page {

margin: 0;

min-height: 100vh;

background-color: #2d1e2d;

color: #b7cea6;

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

overflow-x: hidden;

}

/* =========================================================
📖 SKETCHBOOK
========================================================= */

.sketchbook {

width: 900px;

max-width: calc(100% - 40px);

margin: 45px auto 70px;

padding: 45px 55px 50px;

box-sizing: border-box;

background-color: #f5f0df;

border-radius: 18px;

box-shadow:
    6px 8px 0 rgba(20, 12, 20, 0.25),
    inset 0 0 30px rgba(100, 75, 50, 0.08);

position: relative;

transform: rotate(-0.4deg);

}

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

.sketchbook-header {

text-align: center;

margin-bottom: 25px;

}

.header-flower {

color: #8a5f68;

font-size: 25px;

margin-bottom: 3px;

}

.sketchbook-header h1 {

margin: 0;

color: #486044;

font-family:
    "Old Cupboard",
    Georgia,
    serif;

font-size: 38px;

font-weight: normal;

}

.art-first-letter {

font-family:
    "Princess Sofia",
    cursive;

font-size: 62px;

color: #8a5f68;

line-height: 0;

}

.sketchbook-header p {

margin: 8px 0 0;

color: #7a725f;

font-style: italic;

font-size: 15px;

}

.sketchbook-divider {

margin-top: 17px;

color: #a98d73;

font-size: 14px;

letter-spacing: 2px;

}

/* =========================================================
🌿 INTRO
========================================================= */

.art-intro {

width: 75%;

margin: 0 auto 35px;

text-align: center;

color: #665f52;

font-size: 15px;

line-height: 1.7;

}

.art-intro p {

margin: 7px 0;

}

/* =========================================================
🎨 ART GALLERY
========================================================= */

.art-gallery {

display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 45px 35px;

align-items: start;

padding: 15px 10px 30px;

}

/* =========================================================
📜 INDIVIDUAL PAPER
========================================================= */

.art-piece {

position: relative;

transition:
    transform 0.25s ease;

}

.art-piece:nth-child(1) {

transform: rotate(-2deg);

}

.art-piece:nth-child(2) {

transform: rotate(1.5deg);

}

.art-piece:nth-child(3) {

transform: rotate(-1deg);

}

.art-piece:nth-child(4) {

transform: rotate(2.2deg);

}

.art-piece:nth-child(5) {

transform: rotate(-2.5deg);

}

.art-piece:nth-child(6) {

transform: rotate(1deg);

}

.art-piece:nth-child(7) {

transform: rotate(-1.5deg);

}

.art-piece:nth-child(8) {

transform: rotate(2deg);

}

/* =========================================================
📄 PAPER
========================================================= */

.art-paper {

background-color: #fffdf3;

padding: 18px 18px 12px;

border-radius: 4px;

box-shadow:
    3px 5px 8px rgba(50, 35, 30, 0.18);

box-sizing: border-box;

}

/* =========================================================
🖼️ ART IMAGE
========================================================= */

.art-paper img {

display: block;

width: 100%;

height: auto;

max-height: 500px;

object-fit: contain;

image-rendering: auto;

border-radius: 2px;

}

/* =========================================================
✎ CAPTION
========================================================= */

.art-caption {

margin: 12px 4px 3px;

color: #766d5d;

font-family:
    "Princess Sofia",
    cursive;

font-size: 18px;

line-height: 1.2;

text-align: center;

transform: rotate(-1deg);

}

/* =========================================================
🌸 LITTLE HOVER
========================================================= */

.art-piece:hover {

z-index: 10;

transform:
    translateY(-3px)
    rotate(0deg);

}

/* =========================================================
✎ NOTE
========================================================= */

.sketchbook-note {

margin: 15px auto 35px;

text-align: center;

color: #766d5d;

font-family:
    "Princess Sofia",
    cursive;

font-size: 19px;

transform: rotate(-1deg);

}

.sketchbook-note span {

color: #8a5f68;

margin: 0 10px;

}

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

.art-navigation {

display: flex;

justify-content: center;

align-items: center;

gap: 18px;

margin-top: 30px;

font-family:
    "Old Cupboard",
    Georgia,
    serif;

font-size: 17px;

}

.art-navigation a {

color: #486044;

text-decoration: none;

}

.art-navigation a:hover {

color: #8a5f68;

}

.art-navigation span {

color: #a98d73;

}

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

.art-footer {

margin-top: 35px;

text-align: center;

color: #8a806d;

font-size: 12px;

font-style: italic;

}


/* =========================================================
   =========================================================
   📚 BOOKSHELF PAGE
   Existing bookshelf styling preserved
   =========================================================
   ========================================================= */

.bookshelf-page {

    background-color: #6B7651;

    background-image:
        url("images/ACWallpaperTile.png");

    background-repeat: repeat;

    background-size: auto;

    background-attachment: fixed;
}


.bookshelf {

    width: 100%;

    box-sizing: border-box;

    padding:
        30px 20px 70px;
}


.shelf-header {

    text-align: center;

    margin-bottom: 35px;
}


.shelf-header h1 {

    font-family:
        "Old Cupboard",
        serif;

    color: #d8c99f;

    font-size: 36px;

    margin:
        0 0 8px;
}


.shelf-header p {

    color: #c8d2b6;

    font-style: italic;

    margin: 0;
}


.collection-shelf {

    width: 620px;

    max-width: 100%;

    margin: 0 auto;

    text-align: center;

    box-sizing: border-box;

    background-color: #552028;

    border:
        12px solid #552028;

    border-radius: 4px;

    box-shadow:
        0 8px 0 #30181E,
        inset 0 0 0 4px #6B3038,
        inset 0 0 20px rgba(20, 10, 5, 0.35);

    padding: 18px;
}


.bookshelf-stack {

    width: 100%;

    margin: 0 auto;

    image-rendering: pixelated;

    box-sizing: border-box;
}


.shelf {

    position: relative;

    width: 100%;

    height: 145px;

    box-sizing: border-box;

    background-image:
        url("https://hillhouse.neocities.org/cliques/library/images/shelf.png");

    background-repeat: repeat-x;

    background-position: center bottom;

    background-size: auto 145px;

    background-color: #552028;

    border: none;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 8px;

    padding: 0 18px;

    margin: 0;
}


.book {

    width: 25%;

    max-width: 25%;

    height: 130px;

    flex:
        0 0 25%;

    min-width: 0;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    position: relative;

    z-index: 5;

    text-decoration: none;
}


.book img {

    max-width: 75px;

    max-height: 120px;

    width: auto;

    height: auto;

    image-rendering: pixelated;

    transform-origin: bottom center;

    margin-bottom: 8px;

    transition:
        transform 0.45s ease;
}


.book:nth-child(1) img {
    transform: rotate(-4deg);
}


.book:nth-child(2) img {
    transform: rotate(2deg);
}


.book:nth-child(3) img {
    transform: rotate(-2deg);
}


.book:nth-child(4) img {
    transform: rotate(4deg);
}


.book:nth-child(5) img {
    transform: rotate(-3deg);
}


.book:nth-child(1):hover img {
    transform:
        rotate(-4deg)
        translateY(-3px)
        rotate(-2deg);
}


.book:nth-child(2):hover img {
    transform:
        rotate(2deg)
        translateY(-3px)
        rotate(2deg);
}


.book:nth-child(3):hover img {
    transform:
        rotate(-2deg)
        translateY(-3px)
        rotate(-2deg);
}


.book:nth-child(4):hover img {
    transform:
        rotate(4deg)
        translateY(-3px)
        rotate(2deg);
}


.book:nth-child(5):hover img {
    transform:
        rotate(-3deg)
        translateY(-3px)
        rotate(-2deg);
}


.book-card {

    position: fixed;

    top: 50%;

    right: 30px;

    width: 300px;

    max-width:
        calc(100vw - 40px);

    box-sizing: border-box;

    padding:
        35px 30px 30px;

    background-color: #fffaf0;

    border:
        2px solid #c7b99a;

    border-radius: 8px;

    box-shadow:
        5px 7px 0 rgba(61, 73, 53, 0.25),
        inset 0 0 25px rgba(112, 86, 61, 0.08);

    z-index: 2000;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(-50%)
        translateX(120%);

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;

    color: #4c5544;
}


.book-card.open {

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(-50%)
        translateX(0);
}


.close-card {

    position: absolute;

    top: 8px;

    right: 12px;

    border: none;

    background: transparent;

    color: #8a7254;

    font-size: 24px;

    cursor: pointer;
}


.close-card:hover {

    color: #8a5f68;

    transform: scale(1.15);
}


.card-ornament {

    text-align: center;

    color: #6b7651;

    font-size: 25px;

    margin-bottom: 5px;
}


.book-card h3 {

    font-family:
        "Old Cupboard",
        serif;

    color: #486044;

    text-align: center;

    font-size: 26px;

    margin: 5px 0;
}


.card-author {

    text-align: center;

    color: #8a7254;

    font-style: italic;

    font-size: 14px;
}


.card-rating {

    text-align: center;

    color: #b47b45;

    font-size: 22px;

    letter-spacing: 3px;

    margin: 15px 0;
}


.card-divider {

    text-align: center;

    color: #c7b99a;

    margin:
        10px 0 15px;
}


.card-review {

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

    color: #4c5544;

    font-size: 15px;

    line-height: 1.7;
}


.card-artist {

    margin-top: 25px;

    padding-top: 12px;

    border-top:
        1px dashed #c7b99a;

    text-align: center;

    font-size: 13px;

    color: #8a7254;
}


.card-artist a {

    color: #6b7651;

    text-decoration: none;

    font-family:
        "Old Cupboard",
        serif;
}


.card-artist a:hover {

    color: #8a5f68;
}


.shelf-footer {

    text-align: center;

    margin-top: 25px;
}


.shelf-footer a {

    font-family:
        "Old Cupboard",
        serif;

    color: #d8c99f;

    text-decoration: none;

    font-size: 17px;
}


.shelf-footer a:hover {

    color: #ac72c5;
}



/* =========================================================
   📚 LITTLE FOREST BOOKSHELF
   ========================================================= */
   
   .bookshelf-page {
    background-color: #6B7651;

    background-image: url("images/ACWallpaperTile.png");

    background-repeat: repeat;

    background-size: auto;

    background-attachment: fixed;
}


.bookshelf {
    width: 100%;
    box-sizing: border-box;

    padding: 30px 20px 70px;
}


/* =========================================================
   📖 BOOKSHELF HEADER
   ========================================================= */

.shelf-header {
    text-align: center;
    margin-bottom: 35px;
}


.shelf-header h1 {
    font-family: "Old Cupboard", serif;

    color: #d8c99f;

    font-size: 36px;

    margin: 0 0 8px;
}


.shelf-header p {
    color: #c8d2b6;

    font-style: italic;

    margin: 0;
}


/* =========================================================
   🪵 THE WHOLE BOOKSHELF
   ========================================================= */

.collection-shelf {

    width: 620px;

    max-width: 100%;

    margin: 0 auto;

    text-align: center;

    box-sizing: border-box;

    /*
       This is the big wooden frame
       around the entire bookshelf.
    */

    background-color: #552028;

    border: 12px solid #552028;

    border-radius: 4px;

    /*
       Extra wooden-looking edge.
    */

    box-shadow:
        0 8px 0 #30181E,
        inset 0 0 0 4px #6B3038,
        inset 0 0 20px rgba(20, 10, 5, 0.35);

    padding: 18px;

}


/* =========================================================
   🌳 STACK OF SHELVES
   ========================================================= */

.bookshelf-stack {

    width: 100%;

    margin: 0 auto;

    image-rendering: pixelated;

    /*
       IMPORTANT:
       This keeps the shelf pieces inside
       the wooden frame.
    */

    box-sizing: border-box;
}

/* =========================================================
   📚 INDIVIDUAL SHELF
   ========================================================= */

.shelf {

    position: relative;

    width: 100%;

    height: 145px;

    box-sizing: border-box;

    /*
       🌹 ORIGINAL PIXEL SHELF TEXTURE
    */

    background-image:
        url("https://hillhouse.neocities.org/cliques/library/images/shelf.png");

    background-repeat: repeat-x;

    background-position: center bottom;

    background-size: auto 145px;

    /*
       Burgundy underneath the pixel art.
    */

    background-color: #552028;

    /*
       No extra borders here!
       The shelf.png provides the visible
       shelf edge.
    */

    border: none;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 8px;

    padding: 0 18px;

    margin: 0;

}


/* =========================================================
   📖 BOOKS
   ========================================================= */

.book {

    /*
       Four books fit across.
    */

    width: 25%;

    max-width: 25%;

    height: 130px;

    flex: 0 0 25%;

    min-width: 0;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    position: relative;

    z-index: 5;

    text-decoration: none;

}


/* =========================================================
   📖 BOOK IMAGES
   ========================================================= */

.book img {

    max-width: 75px;

    max-height: 120px;

    width: auto;

    height: auto;

    image-rendering: pixelated;

    transform-origin: bottom center;
    
    margin-bottom: 8px;

    transition:
        transform 0.45s ease;

}


/* =========================================================
   🌿 CROOKED SCRAPBOOK BOOKS
   ========================================================= */

.book:nth-child(1) img {
    transform: rotate(-4deg);
}


.book:nth-child(2) img {
    transform: rotate(2deg);
}


.book:nth-child(3) img {
    transform: rotate(-2deg);
}


.book:nth-child(4) img {
    transform: rotate(4deg);
}


.book:nth-child(5) img {
    transform: rotate(-3deg);
}


/* =========================================================
   🍄 GENTLE WOBBLE
   ========================================================= */

.book:nth-child(1):hover img {
    transform:
        rotate(-4deg)
        translateY(-3px)
        rotate(-2deg);
}


.book:nth-child(2):hover img {
    transform:
        rotate(2deg)
        translateY(-3px)
        rotate(2deg);
}


.book:nth-child(3):hover img {
    transform:
        rotate(-2deg)
        translateY(-3px)
        rotate(-2deg);
}


.book:nth-child(4):hover img {
    transform:
        rotate(4deg)
        translateY(-3px)
        rotate(2deg);
}


.book:nth-child(5):hover img {
    transform:
        rotate(-3deg)
        translateY(-3px)
        rotate(-2deg);
}


/* =========================================================
   📜 BOOK REVIEW CARD
   ========================================================= */

.book-card {

    position: fixed;

    top: 50%;

    right: 30px;

    width: 300px;

    max-width: calc(100vw - 40px);

    box-sizing: border-box;

    padding: 35px 30px 30px;

    background-color: #fffaf0;

    border: 2px solid #c7b99a;

    border-radius: 8px;

    box-shadow:
        5px 7px 0 rgba(61, 73, 53, 0.25),
        inset 0 0 25px rgba(112, 86, 61, 0.08);

    z-index: 2000;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(-50%)
        translateX(120%);

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;

    color: #4c5544;
}


/* =========================================================
   🌸 OPEN CARD
   ========================================================= */

.book-card.open {

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================================
   ❌ CLOSE BUTTON
   ========================================================= */

.close-card {

    position: absolute;

    top: 8px;

    right: 12px;

    border: none;

    background: transparent;

    color: #8a7254;

    font-size: 24px;

    cursor: pointer;
}


.close-card:hover {

    color: #8a5f68;

    transform: scale(1.15);
}


/* =========================================================
   ❦ CARD ORNAMENT
   ========================================================= */

.card-ornament {

    text-align: center;

    color: #6b7651;

    font-size: 25px;

    margin-bottom: 5px;
}


/* =========================================================
   📖 CARD TITLE
   ========================================================= */

.book-card h3 {

    font-family: "Old Cupboard", serif;

    color: #486044;

    text-align: center;

    font-size: 26px;

    margin: 5px 0;
}


/* =========================================================
   ✍️ AUTHOR
   ========================================================= */

.card-author {

    text-align: center;

    color: #8a7254;

    font-style: italic;

    font-size: 14px;
}


/* =========================================================
   ⭐ RATING
   ========================================================= */

.card-rating {

    text-align: center;

    color: #b47b45;

    font-size: 22px;

    letter-spacing: 3px;

    margin: 15px 0;
}


/* =========================================================
   🌸 CARD DIVIDER
   ========================================================= */

.card-divider {

    text-align: center;

    color: #c7b99a;

    margin: 10px 0 15px;
}


/* =========================================================
   📝 REVIEW
   ========================================================= */

.card-review {

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

    color: #4c5544;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   🎨 PIXEL ARTIST
   ========================================================= */

.card-artist {

    margin-top: 25px;

    padding-top: 12px;

    border-top: 1px dashed #c7b99a;

    text-align: center;

    font-size: 13px;

    color: #8a7254;
}


.card-artist a {

    color: #6b7651;

    text-decoration: none;

    font-family: "Old Cupboard", serif;
}


.card-artist a:hover {

    color: #8a5f68;
}


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

.shelf-footer {

    text-align: center;

    margin-top: 25px;
}


.shelf-footer a {

    font-family: "Old Cupboard", serif;

    color: #d8c99f;

    text-decoration: none;

    font-size: 17px;
}


.shelf-footer a:hover {

    color: #ac72c5;
}


/* =========================================================
   🌿 LITTLE LIBRARY FLOOR
   ========================================================= */

.library-floor {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding-top: 25px;

    box-sizing: border-box;
}


/* =========================================================
   🕯️ LAMP
   ========================================================= */

.library-lamp {

    position: relative;

    width: 90px;

    height: 110px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    cursor: pointer;

    image-rendering: pixelated;

    z-index: 5;
}


.library-lamp img {

    position: relative;

    z-index: 3;

    max-width: 90px;

    max-height: 110px;

    width: auto;

    height: auto;

    image-rendering: pixelated;

    transition:
        filter 0.4s ease;
}


/* =========================================================
   ✨ LAMP LIGHT
   ========================================================= */

.lamp-light {

    position: absolute;

    z-index: 1;

    width: 220px;

    height: 220px;

    left: 50%;

    top: 40%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,

            rgba(255, 235, 150, 0.50) 0%,

            rgba(255, 215, 110, 0.28) 25%,

            rgba(255, 190, 70, 0.13) 45%,

            rgba(255, 170, 50, 0.05) 65%,

            transparent 75%
        );

    filter: blur(3px);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.5s ease;
}


/* =========================================================
   🌟 LAMP ON
   ========================================================= */

.library-lamp.lamp-on .lamp-light {

    opacity: 1;

    animation:
        lamp-glow 2.8s ease-in-out infinite;
}


.library-lamp.lamp-on img {

    filter:
        drop-shadow(
            0 0 7px
            rgba(255, 225, 130, 1)
        )

        drop-shadow(
            0 0 20px
            rgba(255, 190, 70, 0.7)
        );
}


/* =========================================================
   🌙 LITTLE MESSAGE
   ========================================================= */

.lamp-message {

    margin-top: 2px;

    color: #d8c99f;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 15px;

    font-style: italic;

    opacity: 0.85;

    transition:
        color 0.3s ease;
}


.library-floor:has(.library-lamp.lamp-on)
.lamp-message {

    color: #f0d58c;
}


/* =========================================================
   🌱 FUTURE DECORATIONS
   ========================================================= */

.library-decorations {

    width: 100%;

    min-height: 30px;

    margin-top: 15px;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    gap: 12px;

    flex-wrap: wrap;
}


.library-decorations img {

    max-width: 80px;

    height: auto;

    image-rendering: pixelated;
}


/* =========================================================
   🕯️ GENTLE FLICKER
   ========================================================= */

@keyframes lamp-glow {

    0%,
    100% {

        opacity: 0.78;

        transform:
            translate(-50%, -50%)
            scale(0.97);
    }

    50% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.04);
    }

    72% {

        opacity: 0.88;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

/* =========================================================
   🌿 SMALL JOURNAL FIXES
   ========================================================= */

/* Move the Journal heading a little higher */
.sidebar {
    padding-top: 40px;
}


/* Give the tagline a little more breathing room */
.sidebar-intro {
    margin-top: 15px;
    margin-bottom: 10px;
}


/* Make the journal entry links less cramped */
.toc-link {
    padding-top: 7px;
    padding-bottom: 7px;
}


/* =========================================================
   🧚 BIO — PORTRAIT ABOVE TEXT
   ========================================================= */

.sidebar-bio {
    flex-direction: column;
    text-align: center;
    gap: 4px;
}

.bio-portrait {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    object-fit: contain;
    image-rendering: pixelated;
}



/* Center the bio text */
.bio-text {
    text-align: center;
}


/* =========================================================
   📖 JOURNAL ENTRY TEXT
   ========================================================= */

/* Darker text on the cream paper */
.journal-page > div {
    color: #5b5a4d;
}


/* A little more breathing room around entry titles */
.journal-page h2 {
    margin-bottom: 24px;
}

/* =========================================================
   🌸 PIXEL CLIQUE — UNDER ABOUT ME
   ========================================================= */

.page-clique {
    width: 100%;
    margin-left: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 5px 25px 5px;

    box-sizing: border-box;
}


.page-clique img {
    max-width: 115px;
    height: auto;

    image-rendering: pixelated;

    transition:
        transform 0.3s ease;
}

.page-clique img:hover {
    transform:
        scale(1.04)
        rotate(-2deg);
}
.journal-signature {
    font-family: "Princess Sofia", cursive;
    font-size: 27px;
    color: #8a5f68;
    text-align: left;
    margin-top: 25px !important;
    transform: rotate(-2deg);
}
.status-box {

    width: 190px;

    padding: 10px 13px;

    background: #e8dfc9;

    border: 1px solid #c5b797;

    border-radius: 5px;

    box-shadow:
        2px 3px 7px
        rgba(40, 30, 25, 0.18);

    color: #5b5a4d;

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

    font-size: 11px;

    line-height: 1.5;

    transform: rotate(-1deg);
}


.status-title {

    margin-bottom: 5px;

    color: #526044;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    font-size: 14px;

    text-align: center;
}


.status-item {

    padding: 2px 0;

}


.status-item span {

    color: #8a5f68;

    font-family:
        "Old Cupboard",
        Georgia,
        serif;

    margin-right: 4px;

}
/* =================================================
   📖 CURRENTLY READING BOX
   ================================================= */

.currently-reading {
    position: fixed;

    left: 35px;
    top: 50%;
    transform: translateY(-50%);

    width: 210px;
    padding: 22px 20px;

    background: #eee5ca;
    color: #4b4a32;

    border: 3px double #77734c;
    border-radius: 4px;

    box-shadow:
        5px 5px 0 rgba(58, 61, 39, 0.35),
        inset 0 0 0 1px rgba(255,255,255,0.5);

    text-align: center;

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

    z-index: 20;
}



/* little decorative top */

.reading-ornament {
    color: #77734c;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 5px;
}


.currently-reading h2 {
    margin: 0;

    color: #505b3c;

    font-size: 21px;
    font-weight: normal;

    letter-spacing: 1px;
}


.reading-divider {
    margin: 8px 0 14px;

    color: #8b8660;

    font-size: 12px;
}


/* book cover */

.reading-cover {
    display: block;

    width: 135px;
    max-height: 190px;

    object-fit: cover;

    margin: 0 auto 14px;

    border: 3px solid #77734c;

    box-shadow:
        3px 3px 0 rgba(65, 68, 43, 0.25);
}


.currently-reading h3 {
    margin: 5px 0 3px;

    color: #4c5738;

    font-size: 17px;
    font-weight: bold;
}


.reading-author {
    margin: 0;

    font-size: 13px;

    color: #77704e;

    font-style: italic;
}


.reading-status {
    margin: 14px 5px 10px;

    font-size: 13px;

    line-height: 1.5;

    color: #5d6045;
}


/* progress bar */

.reading-progress {
    width: 100%;
    height: 11px;

    background: #c8c6a9;

    border: 1px solid #77734c;

    overflow: hidden;
}


.reading-progress-bar {
    height: 100%;

    background: #69764e;

    transition: width 0.4s ease;
}


.reading-pages {
    margin: 6px 0 15px;

    font-size: 11px;

    color: #77704e;
}


.reading-footer {
    padding-top: 10px;

    border-top: 1px dotted #96916c;

    font-size: 11px;

    color: #77734c;
}


/* =================================================
   📱 SMALL SCREENS
   ================================================= */

@media (max-width: 1100px) {

    .currently-reading {
        position: relative;

        right: auto;
        top: auto;

        width: 240px;

        margin: 25px auto;
    }

}