/* =========================================================
   BOOKS SECTION
   Shared styles for the Books area of MirandaTrent.com
   ========================================================= */

/*'''''''' FONTS ''''''''' */
/* Tangerine Font*/

.tangerine-regular {
  font-family: "Tangerine", cursive;
  font-weight: 400;
  font-style: normal;
}

.tangerine-bold {
  font-family: "Tangerine", cursive;
  font-weight: 700;
  font-style: normal;
}

/* Cormorant Upright*/
.cormorant-upright-light {
  font-family: "Cormorant Upright", serif;
  font-weight: 300;
  font-style: normal;
}

.cormorant-upright-regular {
  font-family: "Cormorant Upright", serif;
  font-weight: 400;
  font-style: normal;
}

.cormorant-upright-medium {
  font-family: "Cormorant Upright", serif;
  font-weight: 500;
  font-style: normal;
}

.cormorant-upright-semibold {
  font-family: "Cormorant Upright", serif;
  font-weight: 600;
  font-style: normal;
}

.cormorant-upright-bold {
  font-family: "Cormorant Upright", serif;
  font-weight: 700;
  font-style: normal;
}

/* Cinzel Font*/

.cinzel-<uniquifier> {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


/* ---------- Books Color Palette ---------- */

:root {
    --book-paper: #fff0dc;
    --book-paper-light: #f7f1de;

    --book-ink: #131010;

    --book-wood: #543a14;
    --book-leather: #a47251;

    --book-gold: #f0bb78;
    --book-brass: #c8a96b;

    --book-plum: #6b3f69;
    --book-lavender: #a376a2;
    --book-sage: #8fa28a;
}


/* ---------- Books Typography ---------- */

/*
    Tangerine = decorative handwriting
    Cinzel = formal headings / labels
    Cormorant Garamond = body text
    Cormorant Upright = occasional accent text
*/

.books-site {
    font-family: "Cormorant Garamond", serif;
    color: var(--book-ink);
}


/* ---------- Books Page Background ---------- */

body.books-page {
    background-color: #261b22;
}


/* ---------- Main Books Container ---------- */

.books-site {
    width: min(1100px, 94%);
    margin: 0 auto;
    padding: 5px 0 50px;
}


/* ---------- Individual "Pages" ---------- */

.book-page {
    position: relative;

    background-color: var(--book-paper);

    max-width: 820px;
    margin: 0 auto 45px;
    padding: 45px 55px;

    border: none;

    box-shadow:
        0 8px 22px rgba(19, 16, 16, 0.28);
}


/* ---------- Main Title ---------- */

.books-title {
    font-family: "Tangerine", cursive;
    font-size: clamp(4rem, 9vw, 7rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;

    color: var(--book-wood);

    margin: 0 0 15px;
}

/* ---------- Book Typography Hierarchy ---------- */

/* Major chapter / section headings */
.book-page > h2 {
    font-family: "Cormorant Upright", serif;
    font-size: 1.65rem;
    font-weight: 600;   

    color: var(--book-wood);
    text-align: center;
}

/* Smaller headings within a chapter */
.book-page h3 {
    font-family: "Cinzel", serif;
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--book-plum);

    text-align: center;
    margin: 30px 0 24px;
}

/* Main reading text */
.book-page p {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--book-ink);

    margin: 0 0 0.5em;
}

/* Handwritten decorative text */
.book-script {
    font-family: "Tangerine", cursive;
    font-size: 2rem;
    font-weight: 700;

    color: var(--book-plum);
}

/* ---------- Elegant Accent Text ---------- */

.book-accent {
    font-family: "Cormorant Upright", serif;
    font-size: 1.2rem;
    font-style: italic;

    color: var(--book-plum);
}


/* ---------- Decorative Divider ---------- */

.book-divider {
    width: 140px;
    height: 1px;

    margin: 25px auto;

    border: 0;

    background-color: var(--book-brass);
}


/* ---------- Contents Page ---------- */

.books-contents {
    text-align: center;

    
}

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

.books-contents h2 {
    font-size: 2rem;
}

.books-contents nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    padding: 0;
}

.books-contents nav a {
    font-family: "Cinzel", serif;
    font-size: 1rem;
    letter-spacing: 0.04em;

    color: var(--book-wood);

    background: none;
    border: 0;
    border-radius: 0;
    padding: 4px 10px;

    text-decoration: none;
}

.books-contents nav a:hover {
    color: var(--book-plum);
    background: none;
}

/* ---------- Victorian Contents Page ---------- */

.contents-volume {
    font-family: "Cormorant Upright", serif;
    font-size: 1.05rem;
    letter-spacing: 0.08em;

    position: relative;
    top: 60px;
    z-index: 3;

    color: var(--book-leather);
}

.books-contents h2 {
    font-family: "Tangerine", cursive;
    font-size: 4rem;
    font-weight: 700;

    color: var(--book-wood);

    margin-bottom: 10px;
}

.contents-nav {
    display: block;
    padding: 20px 0 0;
}

.contents-nav ol {
    list-style: none;

    max-width: 650px;
    margin: 0 auto;
    padding: 0;
}

.contents-nav li {
    display: grid;
    grid-template-columns: 55px 1fr;
    align-items: baseline;

    padding: 10px 0;

    border-bottom: 1px dotted rgba(84, 58, 20, 0.35);

    text-align: left;
}

.contents-number {
    font-family: "Cinzel", serif;
    font-size: 0.95rem;
    font-weight: 600;

    color: var(--book-brass);
}

.contents-nav a {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.3rem;
    font-weight: 600;

    color: var(--book-ink);

    background: none;
    border: none;
    padding: 0;

    text-decoration: none;
}

.contents-nav a:hover {
    color: var(--book-plum);
    background: none;
}

/* ---------- Book Ornament Layouts---------- */

/* ---------- Contents: Top Left Corner ---------- */

.books-contents::before {
    content: "";
    position: absolute;

    top: -7px;
    left: -7px;

    width: 180px;
    height: 180px;

    background-image: url("../../books/ornaments/corner-top-left.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;

    pointer-events: none;
    z-index: 1;
}

/* ---------- Contents: Top Right Corner ---------- */

.books-contents::after {
    content: "";
    position: absolute;

    top: -7px;
    right: -7px;

    width: 180px;
    height: 180px;

    background-image: url("../../books/ornaments/corner-top-right.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;

    pointer-events: none;
    z-index: 1;
}

/* ---------- Contents: Top Center ---------- */

.ornament-top-center {
    position: absolute !important;

    top: -7px;
    left: 50%;
    transform: translateX(-50%);

    width: 460px;
    height: auto;

    pointer-events: none;
    user-select: none;
    z-index: 1 !important;
}

.books-contents::before,
.books-contents::after {
    width: 215px;
    height: 215px;
}

/* ---------- Contents: Bottom Corners ---------- */

.ornament-bottom-corner {
    position: absolute !important;
    bottom: -7px;

    width: 135px;
    height: auto;

    pointer-events: none;
    user-select: none;
    z-index: 1 !important;
}

.ornament-bottom-left {
    left: -7px;
}

.ornament-bottom-right {
    right: -7px;
}

.ornament-bottom-left,
.ornament-bottom-right {
    transform: scaleY(-1);
}


/* ---------- Contents: Bottom Center ---------- */

.ornament-bottom-center {
    position: absolute !important;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);

    width: 250px;
    height: auto;

    pointer-events: none;
    user-select: none;
    z-index: 1 !important;
}

/* =========================================================
   BOOK SECTION ORNAMENTS
   Reusable decorations for individual parchment sections
   ========================================================= */

.ornament-section-top {
    display: block;
    width: 450px;
    max-width: 75%;
    height: auto;

    margin: -45px auto 15px;

    pointer-events: none;
    user-select: none;
}

.ornament-section-bottom {
    display: block;
    width: 280px;
    max-width: 55%;
    height: auto;

    margin: 30px auto -45px;

    pointer-events: none;
    user-select: none;
}

/* ---------- Finding My Way Back ---------- */

.finding-my-way-back .ornament-section-top {
    width: 360px;
}


/* ---------- The Reader I Am Now ---------- */

.reader-i-am-now .ornament-section-top {
    width: 430px;
}

/* ---------- What I Look For in a Book ---------- */

.what-i-look-for .ornament-section-top {
    width: 430px;
}

/* ---------- Books Became My Quiet Place ---------- */

.quiet-place .ornament-section-top {
    width: 430px;
}

/* ---------- Genres Intro ---------- */

.genres-page > h4 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;

    color: var(--book-leather);
    text-align: center;

    max-width: 600px;
    margin: 15px auto 30px;
}

.genres-page > h2 {
    font-family: "Cinzel", serif;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--book-wood);
    text-align: center;
}

/* ---------- Genres Page ---------- */

.genres-page {
    text-align: center;
    position: relative;
}

.genres-page > p,
.genres-page > h4 {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.genres-page h3 {
    text-align: center;
}
/* ---------- Genres Ornamentation ---------- */

.genres-top {
    width: 500px;
    max-width: 80%;
}

.genre-marginal {
    position: absolute;
    width: 85px;
    height: auto;

    pointer-events: none;
    user-select: none;
}

.genre-marginal-left {
    left: 8px;
    top: 28%;
}

.genre-marginal-right {
    right: 8px;
    top: 62%;
}

.genre-marginal-upper-right {
    right: 10px;
    top: 17%;
}

.genre-marginal-lower-left {
    left: 10px;
    top: 76%;
}

/* ---------- Genres: Micro Ornaments ---------- */

.genre-micro {
    position: absolute;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* Ribbon + jewel */
.genre-bow {
    width: 85px;
    top: 47%;
    right: 18px;
}

/* Brass/lavender diamond */
.genre-diamond {
    width: 42px;
    top: 12%;
    left: 22px;
}

/* Crescent moon — PERFECT, DON'T TOUCH HER */
.genre-moon {
    width: 70px;
    top: 87%;
    right: 18px;
}

/* Sage hanging jewel */
.genre-sage-drop {
    width: 55px;
    top: 57%;
    left: 22px;
}
/* =========================================================
   BOOK BLOG
   ========================================================= */

.book-blog-page {
    background-color: #261b22;
}

.warning-spoiler {
    text-align:center;
}

/* =========================================================
   BOOK BLOG
   ========================================================= */

.book-blog {
    width: min(1100px, 94%);
    margin: 0 auto;
    padding: 15px 0 50px;
}

.review-card {
    max-width: 900px;
    margin: 50px auto;
    padding: 35px;

    background-color: #354649;
    color: #F7F1DE;

    border: 1px solid #C8A96B;
    border-radius: 12px;

    box-shadow: 0 8px 22px rgba(19, 16, 16, 0.28);
    overflow: hidden;
}

/*============THIS IS FOR THE CARDS IN BOOK BLOG================*/
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings:
        'FILL' 1,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24;
}

/* ========================================
   BOOK BLOG - REVIEW CARDS
======================================== */

.book-blog {
    width: min(1100px, 90%);
    margin: 0 auto;
}

.review-card-top {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* ---------- Reverse Every Other Review ---------- */

    .review-card-reverse .review-card-top {
        flex-direction: row-reverse;
    }

.review-cover {
    flex: 0 0 220px;
}

.review-cover img {
    width: 220px;
    height: 330px;
    object-fit: contain;
    display: block;
}

.review-content {
    flex: 1;
    min-width: 0;
}

.review-header {
    text-align: center;
}

.review-header h2 {
    margin-top: 0;
    color: #D6A1C4;

}

.review-extra-ratings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 35px;
}

.review-thoughts {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #C8A96B;
}

.review-author {
    color: #F7F1DE;
    margin-bottom: 4px;
}

.review-series {
    color: #E0E7E9;
    margin-top: 0;
}

.review-rating h3,
.rating-item h3,
.review-thoughts h3 {
    color: #F7F1DE;
}

.review-thoughts p {
    color: #F7F1DE;
}

.rating-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.review-rating,
.rating-item {
    width: 100%;
    text-align: center;
}

.review-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rating-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- Smooth Section Navigation ---------- */

html {
    scroll-behavior: smooth;
}

/* =========================================================
   COMPLETED BOOKS
   ========================================================= */


/* ---------- Completed Page Layout ---------- */

.completed-site {
    width: min(1100px, 94%);
    margin: 0 auto;
    padding: 10px 0 60px;
}


/* ---------- Completed Section ---------- */

.completed-section {
    --section-accent: var(--book-plum);

    width: 100%;
    max-width: 900px;
    margin: 0 auto 45px;
    padding: 38px 42px 42px;

    background-color: var(--book-paper-light);

    border: 1px solid var(--section-accent);
    border-top: 6px solid var(--section-accent);

    box-shadow:
    0 8px 22px rgba(19, 16, 16, 0.28),
    inset 0 0 0 5px rgba(255, 255, 255, 0.12),
    inset 0 0 0 6px rgba(78, 34, 15, 0.18);

    scroll-margin-top: 30px;
}


/* ---------- Section Heading ---------- */

.completed-section-header {
    text-align: center;
    margin-bottom: 34px;
}

.completed-section-header h2 {
    font-family: "Cinzel", serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;

    color: var(--section-accent);

    margin: 0 0 7px;
}

.completed-section-header p {
    font-family: "Cormorant Upright", serif;
    font-size: 1.05rem;
    font-style: italic;

    color: var(--book-wood);

    margin: 0;
}


/* ---------- Two Column Archive ---------- */

.completed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 55px;
    row-gap: 26px;
}


/* ---------- Individual Book Entry ---------- */

.completed-entry {
    position: relative;
    padding: 0 0 22px;
}

.completed-entry::after {
    content: "";
    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 0;

    height: 1px;

    background-color: var(--section-accent);
    opacity: 0.45;
}


/* Book Title */

.completed-entry h3 {
    font-family: "Cormorant Upright", serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;

    color: var(--book-wood);

    margin: 0 0 4px;
}


/* Author */

.completed-author {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 500;

    color: var(--section-accent);

    margin: 0 0 7px;
}


/* Genres */

.completed-genres {
    font-family: "Cinzel", serif;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.07em;

    color: var(--book-ink);

    margin: 0;
}

/* ---------- Kindle Books ---------- */

.completed-kindle {
    --section-accent: #5D385B;
    background-color: #9E809B;
}

/* ---------- Physical Books ---------- */

.completed-physical {
    --section-accent: #6B3F69;
    background-color: #AD91AA;
}

/* ---------- Audio Books ---------- */

.completed-audio {
    --section-accent: #7D507B;
    background-color: #C2A9C0;
}

.completed-series {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.78em;
    font-weight: 500;
    color: var(--section-accent);
}

/* ---------- DNF Books ---------- */

.completed-dnf {
    --section-accent: #8D5F8C;
    background-color: #D8C8D8;
}

/* =========================================================
   COMPLETED PAGE ORNAMENTS
   ========================================================= */

.completed-section {
    position: relative;
}

.completed-ornament {
    display: block;
    width: 400px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.completed-ornament-top {
    margin: -18px auto 22px;
}

.completed-ornament-bottom {
    margin: 28px auto -18px;
}

.completed-charm {
    position: absolute;
    width: 32px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    opacity: 0.9;
}

/* Kindle additional ornaments */

.kindle-charm-03 {
    right: 8px;
    top: 18%;
    width: 30px;
}

.kindle-charm-04 {
    right: 8px;
    left: auto;
    top: 49%;
    width: 30px;
}

.kindle-charm-05 {
    right: 7px;
    top: 72%;
    width: 34px;
}

.kindle-charm-06 {
    left: 7px;
    top: 84%;
    width: 32px;
}

.kindle-charm-07 {
    right: 10px;
    top: 91%;
    width: 22px;
}

/* Kindle */
.kindle-charm-left {
    left: 6px;
    top: 38%;
}

.kindle-charm-right {
    left: 6px;
    right: auto;
    top: 58%;
}

/* =========================================================
   PHYSICAL SECTION ORNAMENTS
   ========================================================= */

.physical-charm-01 {
    right: 5px;
    top: 13%;
    width: 38px;
}

.physical-charm-02 {
    left: 7px;
    top: 23%;
    width: 25px;
}

.physical-charm-03 {
    right: 4px;
    top: 33%;
    width: 34px;
}

.physical-charm-04 {
    left: 7px;
    top: 43%;
    width: 25px;
}

.physical-charm-05 {
    right: 4px;
    top: 53%;
    width: 38px;
}

.physical-charm-06 {
    left: 7px;
    top: 63%;
    width: 27px;
}

.physical-charm-07 {
    right: 5px;
    top: 72%;
    width: 34px;
}

.physical-charm-08 {
    left: 7px;
    top: 81%;
    width: 24px;
}

.physical-charm-09 {
    right: 5px;
    top: 89%;
    width: 28px;
}

/* =========================================================
   AUDIO SECTION ORNAMENTS
   ========================================================= */

.audio-charm-01 {
    left: 5px;
    top: 15%;
    width: 38px;
}

.audio-charm-02 {
    right: 7px;
    top: 25%;
    width: 23px;
}

.audio-charm-03 {
    left: 5px;
    top: 36%;
    width: 34px;
}

.audio-charm-04 {
    right: 7px;
    top: 47%;
    width: 24px;
}

.audio-charm-05 {
    left: 5px;
    top: 58%;
    width: 38px;
}

.audio-charm-06 {
    right: 7px;
    top: 69%;
    width: 23px;
}

.audio-charm-07 {
    left: 5px;
    top: 79%;
    width: 32px;
}

.audio-charm-08 {
    right: 7px;
    top: 89%;
    width: 22px;
}

/* =========================================================
   DNF SECTION ORNAMENTS
   ========================================================= */

.dnf-charm-01 {
    left: 8px;
    top: 42%;
    width: 34px;
}

.dnf-charm-02 {
    right: 8px;
    top: 62%;
    width: 22px;
}

/* =========================================================
   WISHLIST & TBR PAGE
   ========================================================= */

.wishlist-page {
    width: min(1100px, 94%);
    margin: 0 auto;
    padding: 10px 0 60px;
}


/* =========================================================
   PAGE INTRO
   ========================================================= */

.wishlist-header {
    width: min(820px, 100%);
    margin: 0 auto 38px;
    text-align: center;
}

.wishlist-header h1 {
    font-family: "Tangerine", cursive;
    font-size: 4rem;
    font-weight: 700;
    color: var(--book-gold);
    margin: 15px 0 8px;
}

.wishlist-header p {
    max-width: 650px;
    margin: 0 auto;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--book-paper-light);
}


/* =========================================================
   SHARED SECTION STYLE
   ========================================================= */

.wishlist-section,
.tbr-section {
    position: relative;
    box-sizing: border-box;

    width: 100%;
    max-width: 900px;
    margin: 0 auto 45px;
    padding: 38px 42px 42px;

    background-color: #AD91AA;

    border: 1px solid var(--book-plum);
    border-top: 6px solid var(--book-plum);

    box-shadow:
        0 8px 22px rgba(19, 16, 16, 0.28),
        inset 0 0 0 5px rgba(255, 255, 255, 0.12),
        inset 0 0 0 6px rgba(78, 34, 15, 0.18);
}


/* =========================================================
   SECTION HEADERS
   ========================================================= */

.wishlist-section-header {
    text-align: center;
    margin-bottom: 30px;
}

.wishlist-section-header h2 {
    font-family: "Cinzel", serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;

    color: var(--book-plum);

    margin: 0 0 7px;
}

.wishlist-section-header p {
    font-family: "Cormorant Upright", serif;
    font-size: 1.05rem;
    font-style: italic;

    color: var(--book-wood);

    margin: 0;
}


/* =========================================================
   AMAZON WISHLIST LINKS
   ========================================================= */

.wishlist-links {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;

    gap: 14px;
    max-width: 760px;
    margin: 0 auto;
}

.wishlist-link {
    display: flex;
    justify-content: center;
    align-items: center;

    min-width: 150px;
    padding: 12px 18px;

    background-color: rgba(255, 240, 220, 0.72);

    border: 1px solid var(--book-brass);
    border-radius: 4px;

    box-shadow:
        0 3px 8px rgba(19, 16, 16, 0.18),
        inset 0 0 0 2px rgba(255, 255, 255, 0.16);

    font-family: "Cinzel", serif;
    font-size: 0.82rem;
    letter-spacing: 0.05em;

    color: var(--book-wood);
    text-align: center;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.wishlist-link:hover {
    transform: translateY(-2px);

    background-color: var(--book-paper);

    border-color: var(--book-gold);
}


/* =========================================================
   TO BE READ
   ========================================================= */


/* Wishlist / TBR page background */
body {
    background-color: #2b1d24;
}

.tbr-section {
    background-color: #C2A9C0;
}

.tbr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 55px;
    row-gap: 0;
}


/* Individual TBR record */

.tbr-entry {
    position: relative;
    padding: 14px 8px 15px;
}

.tbr-entry::after {
    content: "";
    position: absolute;

    left: 6%;
    right: 6%;
    bottom: 0;

    height: 1px;

    background-color: var(--book-plum);
    opacity: 0.35;
}

.tbr-entry h3 {
    font-family: "Cormorant Upright", serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;

    color: var(--book-wood);

    margin: 0 0 3px;
}

.tbr-entry p {
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-style: italic;

    color: var(--book-plum);

    margin: 0;
}


/* =========================================================
   TBR CATEGORY HEADINGS
   ========================================================= */

.tbr-category {
    grid-column: 1 / -1;

    margin: 30px 0 12px;
    padding-bottom: 7px;

    border-bottom: 1px solid rgba(107, 63, 105, 0.55);

    font-family: "Cinzel", serif;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.08em;

    color: var(--book-plum);
}

.tbr-category:first-child {
    margin-top: 0;
}


.tbr-western {
    --tbr-accent: #4F654F;
    background-color: #93A58E;
}

.tbr-fantasy {
    --tbr-accent: #58705A;
    background-color: #A0B09A;
}

.tbr-dark-romance {
    --tbr-accent: #607760;
    background-color: #AAB8A3;
}

.tbr-mystery {
    --tbr-accent: #687F67;
    background-color: #B4C0AD;
}

.tbr-romance {
    --tbr-accent: #70866F;
    background-color: #BEC8B7;
}

.tbr-literary {
    --tbr-accent: #778D76;
    background-color: #C7D0C1;
}

.tbr-scifi {
    --tbr-accent: #7E947D;
    background-color: #D0D8CA;
}

.tbr-poetry {
    --tbr-accent: #859B84;
    background-color: #D9E0D3;
}

.tbr-classics {
    --tbr-accent: #8CA18B;
    background-color: #E1E6DC;
}

.tbr-section {
    position: relative;
    box-sizing: border-box;

    width: 100%;
    max-width: 900px;
    margin: 0 auto 45px;
    padding: 38px 42px 42px;

    border: 1px solid var(--tbr-accent);
    border-top: 6px solid var(--tbr-accent);

    box-shadow:
        0 8px 22px rgba(19, 16, 16, 0.28),
        inset 0 0 0 5px rgba(255, 255, 255, 0.12),
        inset 0 0 0 6px rgba(78, 34, 15, 0.18);
}

.tbr-section-header {
    text-align: center;
    margin-bottom: 30px;
}

.tbr-section-header h2 {
    font-family: "Cinzel", serif;
    font-size: 1.65rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--tbr-accent);
    margin: 0;
}

.tbr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 55px;
    row-gap: 0;
}

.tbr-entry {
    position: relative;
    padding: 15px 8px 16px;
}

.tbr-entry::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 0;
    height: 1px;
    background-color: var(--tbr-accent);
    opacity: 0.4;
}

.tbr-entry h3 {
    font-family: "Cormorant Upright", serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--book-wood);
    margin: 0;
}

.tbr-author {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.9em;
    font-weight: 500;
    font-style: italic;
    color: var(--tbr-accent);
}

/* =========================================================
   TBR GENRE NAVIGATION
   ========================================================= */

.tbr-nav {
    width: min(900px, 100%);
    box-sizing: border-box;
    margin: 0 auto 45px;
    padding: 22px 28px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;

    background-color: #6B5138;
    border: 1px solid var(--book-brass);
    border-top: 5px solid var(--book-brass);

    box-shadow:
        0 8px 22px rgba(19, 16, 16, 0.28),
        inset 0 0 0 5px rgba(255, 240, 220, 0.08);
}

.tbr-nav a {
    font-family: "Cinzel", serif;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--book-ink);
    text-decoration: none;

    padding: 7px 11px;
    border-bottom: 1px solid rgba(240, 187, 120, 0.45);

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.tbr-nav a:hover {
    color: var(--book-gold);
    border-color: var(--book-gold);
    transform: translateY(-1px);
}





/* ---------- Completed Internal Navigation ---------- */

.completed-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;

    margin: 20px auto 38px;

    font-family: "Cinzel", serif;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
}

.completed-nav a {
    color: var(--book-lavender);
    text-decoration: none;

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

.completed-nav a:hover {
    color: var(--book-gold);
    transform: translateY(-1px);
}

.completed-nav span {
    color: var(--book-brass);
    font-size: 0.65rem;
}

.wishlist-section {
    scroll-margin-top: 30px;
}


.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;

    width: 46px;
    height: 46px;

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

    background-color: var(--book-wood);
    border: 1px solid var(--book-brass);
    border-radius: 50%;

    color: var(--book-paper-light);
    font-size: 1.4rem;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(19, 16, 16, 0.35);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease,
        background-color 0.2s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--book-plum);
}
@media (max-width: 700px) {
    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
    }
}

/* =========================================================
   TBR BACKGROUND DECORATION
   ========================================================= */

.tbr-background-decor {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.tbr-background-left,
.tbr-background-right {
    position: absolute;
    top: 50%;
    width: 170px;
    max-height: 70vh;
    object-fit: contain;

    opacity: 0.16;

    transform: translateY(-50%);
}

.tbr-background-left {
    left: 20px;
}

.tbr-background-right {
    right: 20px;
    transform: translateY(-50%) scaleX(-1);
}

.wishlist-page {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .tbr-background-decor {
        display: none;
    }
}



/* ---------- Book Blog: Responsive ---------- */

@media (max-width: 850px) {

    .review-card-top,
    .review-card-reverse .review-card-top {
        flex-direction: column;
        align-items: center;
    }


    
    .review-cover {
        flex: none;
    }

    .review-content {
        width: 100%;
    }

    .review-extra-ratings {
        width: 100%;
    }
}


/* ---------- Mobile ---------- */

@media (max-width: 700px) {

    .books-site {
        width: 94%;
        padding: 25px 0 50px;
    }

    .book-page {
        padding: 45px 25px;
        margin-bottom: 30px;
    }

    .books-title {
        font-size: clamp(3.5rem, 18vw, 5rem);
    }

    .book-page h2 {
        font-size: 1.4rem;
    }

    .book-page p {
        font-size: 1.05rem;
        line-height: 1.7;
    }

        /* Reading Story - mobile heading */
    .reading-story h3 {
        font-size: 1.15rem;
        line-height: 1.45;
    }

    /* ---------- Genres: Mobile ---------- */

    .genre-marginal,
    .genre-micro {
        display: none;
    }

    .completed-site {
        width: 92%;
    }

    .completed-section {
        box-sizing: border-box;
        padding: 30px 24px 32px;
    }

    .completed-section-header {
        margin-bottom: 28px;
    }

    .completed-section-header h2 {
        font-size: 1.5rem;
    }

    .completed-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .completed-entry h3 {
        font-size: 1.25rem;
    }

/*Charms for the completed page*/

    .completed-ornament {
        width: 250px;
    }

    .completed-charm {
        width: 25px;
    }

    .kindle-charm-left {
        left: 5px;
    }

    .kindle-charm-right {
        right: 5px;
    }

    .wishlist-page {
        width: 92%;
    }

    .wishlist-header h1 {
        font-size: 3.2rem;
    }

    .wishlist-section,
    .tbr-section {
        padding: 30px 24px 32px;
    }

    .wishlist-section-header h2 {
        font-size: 1.5rem;
    }

    .wishlist-links {
        gap: 10px;
    }

    .wishlist-link {
        min-width: 120px;
        padding: 11px 14px;
        font-size: 0.75rem;
    }

    .tbr-grid {
        grid-template-columns: 1fr;
    }

    .tbr-category {
        grid-column: 1;
        margin-top: 28px;
    }

    .tbr-entry {
        padding: 13px 5px 14px;
    }

    .tbr-entry h3 {
        font-size: 1.15rem;
    }

    .tbr-section {
        padding: 30px 24px 32px;
    }

    .tbr-grid {
        grid-template-columns: 1fr;
    }

    .tbr-section-header h2 {
        font-size: 1.4rem;
    }

    .tbr-nav {
        padding: 20px 16px;
        gap: 8px 12px;
    }

    .tbr-nav a {
        font-size: 0.7rem;
        padding: 6px 8px;
    }


}