/* =========================================================
   1. READING PAGE BACKGROUND
   ========================================================= */

/*
   Light mode:
   warm, paper-like background using soft brown radial gradients.
*/
body {
    background:
        repeating-linear-gradient(0deg,
            rgba(90, 65, 35, 0.035) 0px,
            rgba(90, 65, 35, 0.035) 1px,
            transparent 1px,
            transparent 4px),
        radial-gradient(circle at 15% 10%,
            rgba(170, 120, 60, 0.18),
            transparent 38%),
        radial-gradient(circle at 85% 85%,
            rgba(115, 80, 45, 0.12),
            transparent 42%),
        #efe6d2;

    background-attachment: fixed;
}

/*=========================================================2. READING HEADER=========================================================*/

/*
   Warm paper-like header that matches the Reading page.
   It stays mostly opaque because content scrolls behind it.
*/
header {
    background:
        linear-gradient(90deg,
            #d8c3a5,
            #eee2cf,
            #c9ad86);

    color: #2a2118;

    border-bottom: 1px solid rgba(70, 50, 30, 0.25);
}

header a {
    color: #2a2118;
}

body.dark-mode header {
    background:
        linear-gradient(90deg,
            #33281e,
            #241d17,
            #3d2f22);

    color: #f3efe4;
}

body.dark-mode header a {
    color: #f3efe4;
}


/*
   Dark mode:
   darker brown-toned background with subtle texture.
*/
body.dark-mode {
    background:
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.025) 0px,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 4px),
        radial-gradient(circle at 15% 10%,
            rgba(180, 130, 75, 0.13),
            transparent 38%),
        radial-gradient(circle at 85% 85%,
            rgba(110, 75, 45, 0.08),
            transparent 42%),
        #1c1813;

    background-attachment: fixed;
}


/* =========================================================
   2. READING PAGE LAYOUT
   ========================================================= */

/*
   The Reading page is intentionally narrower than the homepage.

   Long-form text is easier to read when it does not stretch
   across the full 1200px site width.
*/
.reading-page {
    max-width: 950px;
}


/*
   Reading sections use slightly less vertical spacing because
   this page contains much more long-form content.
*/
.reading-page section {
    padding-block: 2rem;
}


/* =========================================================
   3. READING STATS
   ========================================================= */

/*
   Desktop layout:

   64              34              6
   Books Owned     Completed       This Year
*/
.reading-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    margin-top: 2rem;
}


/*
   Each statistic stays visually simple instead of looking
   like a separate card.
*/
.reading-stat {
    padding-block: 1.5rem;

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


/* Large statistic number */
.reading-stat strong {
    display: block;

    font-family: "Space Mono", monospace;
    font-size: clamp(2.5rem, 5vw, 4rem);

    line-height: 1;
}


/* Label underneath the statistic */
.reading-stat span {
    display: block;

    margin-top: 0.75rem;

    color: var(--muted);

    font-family: "Space Mono", monospace;
    font-size: 0.9rem;
}


/* =========================================================
   4. BOOKS THAT STAYED WITH ME
   ========================================================= */

/*
   The global <article> rule already creates spacing and borders.

   This removes unnecessary top padding from the first book.
*/
.favorite-books .book-entry:first-of-type {
    padding-top: 0;
}


/* Author name underneath each book title */
.book-author {
    color: var(--muted);

    font-family: "Space Mono", monospace;
    font-size: 0.95rem;
}


/* =========================================================
   5. FAVORITE QUOTES
   ========================================================= */

/*
   The left border separates quotations from normal paragraphs
   without making them look like cards.
*/
.favorite-quote {
    margin: 3rem 0;

    padding:
        0.5rem 0 0.5rem 2rem;

    border-left: 3px solid var(--border);
}


/* Quote text */
.favorite-quote p {
    margin-top: 0;

    max-width: 60ch;

    font-size: 1rem;
    line-height: 1.8;
}


/* Quote author or source */
.favorite-quote cite {
    color: var(--muted);

    font-family: "Space Mono", monospace;
    font-size: 0.9rem;

    font-style: normal;
}


/* =========================================================
   6. AI QUOTE ANALYSIS
   ========================================================= */

/*
   The prompt, AI response, and personal reaction use the same
   visual treatment so they feel like one experiment.
*/
.ai-prompt,
.ai-response,
.ai-reaction {
    margin-top: 3rem;

    padding: 2rem;

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


/*
   Removes excess space above headings inside the boxes.
*/
.ai-prompt h3,
.ai-response h3,
.ai-reaction h3 {
    margin-top: 0;

    font-family: "Space Mono", monospace;
}


/* =========================================================
   7. MOBILE / RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    /*
       Reading stats stack vertically on phones.
    */
    .reading-stats-grid {
        grid-template-columns: 1fr;

        gap: 1rem;
    }


    /*
       Slightly tighter section spacing on smaller screens.
    */
    .reading-page section {
        padding-block: 1.5rem;
    }


    /*
       Quotes need less indentation on narrow screens.
    */
    .favorite-quote {
        margin-block: 2rem;

        padding-left: 1.25rem;
    }


    .favorite-quote p {
        font-size: 1.1rem;
    }


    /*
       Reduce padding inside AI boxes on phones.
    */
    .ai-prompt,
    .ai-response,
    .ai-reaction {
        padding: 1.25rem;
    }
}