/* ============================================= */
/* STORY PAGE — "Read Her Story"                 */
/* ============================================= */

/*
    This stylesheet is additive: it imports alongside style.css and only
    defines the layout, 3D book animation, and reading-view styles that
    don't exist anywhere else on the site. All colors, fonts, and spacing
    reuse the custom properties already declared in style.css's :root.
*/

/* ============================================= */
/* 1. PAGE SHELL                                 */
/* ============================================= */

/*
    Flex column lets the main content grow and pushes the footer to the
    bottom of the viewport even when the book is short. Without this, the
    footer would ride up and float in the middle of the screen on tall
    displays.
*/
.story-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.story-header {
    text-align: center;
    padding: 1.75rem 1rem;
    background-color: var(--color-primary);
    color: #fff;
}

.story-header h1 {
    font-style: italic;
    font-weight: 600;
    font-size: var(--text-h1);
    margin-bottom: 0.25rem;
}

.story-header p {
    opacity: 0.9;
    font-size: 1.05rem;
}

/*
    The story nav holds two clusters: a "Back to Home" link on the left,
    and the reader-controls cluster (chrome / zen / pages / text size /
    theme) on the right. Keeping every view/appearance toggle in one
    place matches the existing dark-mode control so users always know
    where to look.
*/
.story-nav {
    justify-content: space-between;
    padding: 0 1rem;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.story-nav ul {
    align-items: center;
    gap: 1.5rem;
}

.story-nav__primary {
    flex-wrap: wrap;
}

/*
    Reader-controls cluster. Short labeled buttons (not icons alone) so
    the controls are obvious and not buried, per brief 2d. Tight gap keeps
    the group reading as a single toolbar.
*/
.reader-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reader-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.reader-btn:hover,
.reader-btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
    outline: none;
}

/* "On" state for toggle buttons (active mode). */
.reader-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Text-size segmented control */
.text-size-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 0.15rem;
}

.text-size-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 0.4rem 0 0.5rem;
}

.text-size-btn {
    padding: 0.25rem 0.55rem;
    border: none;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 999px;
    transition: background-color 0.15s;
}

.text-size-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.text-size-btn.active,
.text-size-btn[aria-pressed="true"] {
    background: #fff;
    color: var(--color-primary);
}

.story-main {
    flex: 1; /* fill the available vertical space between header and footer */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1.5rem 1rem;
}

/* ============================================= */
/* 2. THE BOOK STAGE (3D setup)                  */
/* ============================================= */

/*
    The stage is the 3D "stage floor." perspective sets the viewer's distance
    from that floor. A smaller value (e.g. 400px) makes the 3D effect look
    dramatic and distorted; a larger value (e.g. 2000px) looks flatter.
    1200px gives a clear "door swinging open" feel without looking warped.

    Why here and not on .book? perspective must be on an ancestor of the
    element being transformed. It establishes the shared 3D coordinate system
    that both the cover and interior inherit.
*/
.book-stage {
    width: 100%;
    max-width: 700px;
    margin: 1rem auto;
    perspective: 1200px;
}

/*
    The book is the parent of both cover and interior. It needs an explicit
    height so the absolutely positioned children have something to fill.
    aspect-ratio: 3 / 4 keeps the proportions roughly book-shaped on every
    screen width.

    transform-style: preserve-3d is what lets the cover swing in 3D space
    instead of being flattened into the parent's 2D plane. Without it, the
    rotateY would look like a simple width squeeze.
*/
.book {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    /*
        Constrain the book's height so the full cover card is always visible
        within the viewport. We subtract roughly the header, nav, story-main
        padding, and footer so the book never overflows the flex layout.
    */
    max-height: min(90dvh, calc(100dvh - 16rem));
    transform-style: preserve-3d;
}

/*
    OPEN-STATE SIZING — when the book is open, abandon the width-driven
    aspect-ratio and instead fill the actual available vertical space using
    flexbox. body.book-open is set by story.js in openBook() / closeBook().
    Using dvh accounts for the mobile browser address bar showing/hiding.
*/
.book-open .story-main {
    padding: 0 1rem;
}

.book-open .book-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
}

.book-open .book.is-open {
    aspect-ratio: auto;
    max-height: none;
    flex: 1;
    min-height: 0;
}

/* ============================================= */
/* 3. THE COVER                                  */
/* ============================================= */

/*
    The cover is a real <button>. We reset its default browser styles
    (background, border, padding, font, text-align) so it looks like our
    custom book cover, but it keeps the built-in keyboard and accessibility
    behavior.
*/
.book-cover {
    position: absolute;
    inset: 0; /* shorthand for top/right/bottom/left: 0 */
    z-index: 2; /* sits on top of the interior before opening */

    /*
        transform-origin is the hinge of the door. "left center" means the
        left edge stays pinned while the right edge swings away. If you
        changed this to "right center" the book would open from the wrong
        side; if you used "center" it would spin around its middle.
    */
    transform-origin: left center;
    transform-style: preserve-3d;

    /*
        Two properties animate:
        - transform 1s ease: the rotateY swing
        - opacity 0.6s ease 0.4s: fade out slightly *after* the swing has
          started, so the cover doesn't vanish too early.
    */
    transition: transform 1s ease, opacity 0.6s ease 0.4s;

    /* Reset button defaults */
    background: var(--color-primary);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px 16px 16px 4px;
    padding: 2rem;
    color: #fff;
    font-family: inherit;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /*
        backface-visibility: hidden means the *reverse* side of the cover
        (what you would see if you looked at it from behind after it rotates
        past 90 degrees) is invisible. That lets the interior show through
        cleanly once the cover swings past halfway.
    */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari prefix */
}

.book-cover:hover,
.book-cover:focus-visible {
    /* A subtle lift on hover/focus so users know it's interactive. */
    box-shadow: 0 0 0 4px rgba(139, 94, 52, 0.35);
    outline: none; /* we replaced the default outline with a shadow */
}

.book-cover__image {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    border: 4px solid rgba(255, 255, 255, 0.2);
}

.book-cover__title {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.book-cover__author {
    display: block;
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.book-cover__hint {
    display: block;
    font-size: 0.95rem;
    font-style: italic;
    opacity: 0.75;
}

/* ============================================= */
/* 4. THE INTERIOR / READING VIEW                */
/* ============================================= */

/*
    The interior sits underneath the cover (z-index: 1). It starts invisible
    and non-interactive (visibility: hidden), then fades in once the cover
    has swung aside.

    We use visibility together with opacity because opacity: 0 alone still
    lets screen readers and mouse clicks reach the content. visibility:
    hidden removes it from interaction until we want it shown.
*/
.book-interior {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: #fff;
    color: var(--color-text);
    border-radius: 4px 16px 16px 4px;
    box-shadow: 0 10px 40px rgba(74, 55, 40, 0.12);

    opacity: 0;
    visibility: hidden;

    /*
        Two transitions:
        - opacity 0.6s ease 0.5s: fade in half a second after the cover
          starts moving, so the interior appears just as the cover passes
          the midpoint.
        - visibility 0s linear 1.1s: keep visibility: hidden until the fade
          is definitely complete. The delay must match or exceed the longest
          transition above it.
    */
    transition: opacity 0.6s ease 0.5s, visibility 0s linear 1.1s;

    overflow: hidden; /* the inner .book-pages handles scrolling, not this box */
    display: flex;
    flex-direction: column;
}

.book-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;

    background: rgba(139, 94, 52, 0.1);
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-primary);
}

.book-close:hover,
.book-close:focus-visible {
    background: rgba(139, 94, 52, 0.2);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.book-close svg {
    width: 1rem;
    height: 1rem;
}

.book-pages {
    flex: 1;
    min-height: 0; /* prevent flex child's implicit min-height from blocking scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
    touch-action: pan-y; /* let vertical swipes scroll — horizontal passes through to body */
    overscroll-behavior: contain; /* prevent scroll chaining to the body */
    padding: 2rem;

    /*
        A very subtle left "gutter" shadow suggests the fold between pages.
        It is decorative; the real content is not paginated at this stage.
    */
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 0%, transparent 8%);
}

.book-pages p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.book-pages p:last-child {
    margin-bottom: 0;
}

/*
    When the book is opened, the first paragraph gets a little extra top
    margin so the text doesn't feel crammed against the top edge on short
    screens. We use :first-child rather than a class so it still works
    when the real paragraphs replace the placeholders.
*/
.book-pages p:first-child {
    margin-top: 0.5rem;
}

/* ============================================= */
/* 5. PREFACE & CHAPTER STYLING                  */
/* ============================================= */

/*
    The preface is the visible "before you read" area the user requested.
    It sits at the top of the reading view so the first thing a reader sees
    after opening the book is context and an estimate of reading time, not
    immediately Chapter 1.
*/
.preface {
    padding: 2rem;
    margin-bottom: 2rem;
    background: rgba(139, 94, 52, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(139, 94, 52, 0.12);
    text-align: center;
}

.preface h2 {
    font-size: var(--text-h3);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-style: italic;
}

.reading-time {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 1.25rem;
}

.theme-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.theme-list li {
    font-size: 0.9rem;
    padding: 0.35rem 0.75rem;
    background: rgba(139, 94, 52, 0.1);
    border-radius: 999px;
    color: var(--color-primary);
}

/*
    Each chapter is wrapped in an <article> so the manuscript has clear
    semantic boundaries. The heading combines the chapter number and the
    title from the document.
*/
.chapter {
    margin-bottom: 5rem;
}

.chapter:last-child {
    margin-bottom: 0;
}

.chapter-heading {
    font-size: var(--text-h3);
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(139, 94, 52, 0.15);
    line-height: 1.3;
}

.chapter-number {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

/* ============================================= */
/* 6. THEME TOGGLE                               */
/* ============================================= */

/*
    The dark-mode toggle lives in the sticky nav. It is a plain button
    with an icon; the text label is provided by aria-label for screen
    readers. The two SVG icons (sun/moon) are toggled by CSS so the icon
    always matches the current mode.
*/
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    outline: none;
}

.theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* In light mode, show the moon icon (switch to dark). Hide the sun. */
.icon-sun { display: none; }
.icon-moon { display: block; }

/* ============================================= */
/* 7. OPEN STATE                                 */
/* ============================================= */

/*
    Adding the .is-open class to .book triggers the CSS transitions above.
    The cover rotates -180 degrees around the Y-axis (swinging to the left)
    and fades out. The interior fades in and becomes visible/interactive.
*/
.book.is-open .book-cover {
    transform: rotateY(-180deg);
    opacity: 0;
    pointer-events: none; /* clicks pass through the now-invisible cover */
}

.book.is-open .book-interior {
    opacity: 1;
    visibility: visible;
    /* Cancel the visibility delay so it becomes interactive immediately. */
    transition-delay: 0.5s, 0s;
}

/* ============================================= */
/* 8. REDUCED MOTION                             */
/* ============================================= */

/*
    prefers-reduced-motion is an OS-level user preference. If it is set,
    we remove all transitions and instantly show the interior / hide the
    cover. No swinging animation, no fade — just a clean state change.
    This respects people who can feel sick from motion or who simply want
    faster, less distracting interfaces.
*/
@media (prefers-reduced-motion: reduce) {
    .book-cover,
    .book-interior {
        transition: none;
    }

    .book.is-open .book-cover {
        /* Don't rotate; just remove the cover from view and interaction. */
        transform: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .book.is-open .book-interior {
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .book-cover:hover,
    .book-cover:focus-visible {
        /* Keep the focus indicator but lose the animated shadow grow. */
        box-shadow: 0 0 0 3px rgba(139, 94, 52, 0.45);
    }
}

/* ============================================= */
/* 9. MOBILE ADJUSTMENTS                         */
/* ============================================= */

@media (max-width: 700px) {
    .story-header h1 {
        font-size: 1.6rem;
    }

    .book-stage {
        margin: 0.25rem auto;
        width: 100%;
    }

    .book {
        /*
            On mobile, a slightly shorter ratio so the reading area inside
            is taller. The book still reads as portrait, but the interior
            gets more vertical space for comfortable scrolling.
        */
        aspect-ratio: 4 / 5;
        max-height: min(90dvh, calc(100dvh - 10rem));
    }

    .book-cover {
        padding: 1.25rem;
    }

    .book-cover__image {
        width: 120px;
        height: 120px;
        margin-bottom: 1rem;
    }

    .book-cover__title {
        font-size: 1.5rem;
    }

    .book-cover__author {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .book-cover__hint {
        font-size: 0.85rem;
    }

    .book-pages {
        padding: 1.25rem;
    }

    .book-pages p {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* Very small screens: keep the cover readable. */
@media (max-width: 360px) {
    .book-cover__image {
        width: 100px;
        height: 100px;
    }

    .book-cover__title {
        font-size: 1.25rem;
    }
}

/* ============================================= */
/* 10. READER PREFERENCES                        */
/* ============================================= */
/*
    All sections here are ADDITIVE. The default structured/boxed layout
    defined above is never removed — these classes layer on top of it when
    the reader chooses a different presentation, and lift cleanly when the
    choice changes. State is persisted in localStorage (see story.js).
*/

/* --- 10a. Chrome hide (header + footer) ---------- */
/*
    Hiding feels like decluttering, not deleting: a simple display:none
    with no transform/scroll jump. The story-nav remains sticky so the
    reader can always toggle chrome back on.
*/
.chrome-hidden .story-header,
.chrome-hidden footer {
    display: none;
}
.chrome-hidden .story-main {
    padding-top: 1rem;
}

/* --- 10b. Zen mode ------------------------------- */
/*
    A second reading style, alternate to the default boxed one — never a
    replacement. The vibe is reading a manuscript in Google Docs:
    generous whitespace, varied vertical rhythm (not the uniform "rushed"
    spacing of the default), no card border, a softer serif face, larger
    line-height. The default .book-interior is overridden here, not edited
    above, so reverting is a class removal.
*/
.zen .book-stage {
    max-width: 820px;
}

.zen .book-interior {
    background: var(--color-bg);
    box-shadow: none;
    border-radius: 6px;
}

.zen .book-pages {
    padding: 3.5rem 3.5rem 4.5rem;
    background: none; /* drop the fold gutter shadow */
    font-family: Georgia, 'Times New Roman', serif;
}

.zen .book-pages p {
    font-size: 1.2rem;
    line-height: 2;
    margin-bottom: 1.6rem;
}

/* Varied, unhurried rhythm between sections: chapters breathe more than
   paragraphs, and the first paragraph after a heading settles in gently. */
.zen .chapter {
    margin-bottom: 4.5rem;
}

.zen .chapter:last-of-type {
    margin-bottom: 3rem;
}

.zen .chapter-heading {
    font-style: italic;
    border-bottom: none;
    margin-bottom: 2rem;
    padding-bottom: 0;
}

.zen .chapter-heading::after {
    content: '';
    display: block;
    width: 3rem;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
    margin-top: 1.25rem;
}

/* Preface in zen reads as a quiet centered invitation, not a boxed card. */
.zen .preface {
    background: none;
    border: none;
    padding: 0 1rem 2.5rem;
    margin-bottom: 3rem;
}

/* On phones, zen keeps its air but trims the side padding a little. */
@media (max-width: 700px) {
    .zen .book-pages {
        padding: 2.25rem 1.5rem 3rem;
    }
    .zen .book-pages p {
        font-size: 1.08rem;
        line-height: 1.95;
        margin-bottom: 1.35rem;
    }
    .zen .chapter {
        margin-bottom: 3.25rem;
    }
}

/* --- 10c. Text size (S / M / L) ------------------ */
/*
    Default is Medium (no class needed). Small = denser, Large = roomier.
    Applied to .book-pages p (and the preface/heading siblings scale
    proportionally so the hierarchy stays coherent).
*/
.text-small .book-pages p {
    font-size: 0.875rem;
    line-height: 1.65;
}
.text-large .book-pages p {
    font-size: 1.35rem;
    line-height: 1.85;
}
.text-small .book-pages .reading-time,
.text-small .book-pages .theme-list li { font-size: 0.8rem; }
.text-large .book-pages .reading-time,
.text-large .book-pages .theme-list li { font-size: 1.05rem; }

/* Zen + text size compose multiplicatively (zen's own sizes above get
   nudged when a size class is also active). */
.zen.text-small .book-pages p { font-size: 0.95rem; line-height: 1.85; }
.zen.text-large .book-pages p { font-size: 1.5rem;  line-height: 2.1; }

/* --- 10d. Author reveal (end-of-read note) ------ */
/*
    Lives at the very end of .book-pages, so it's only seen once the
    reader has finished the entire text. Styled as a warm closing note
    rather than a byline: centered, italic, soft rule above, generous
    space before it.
*/
.author-reveal {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(139, 94, 52, 0.25);
    text-align: center;
}

.author-reveal__line {
    font-style: italic;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.author-reveal__sub {
    font-size: 1rem;
    opacity: 0.75;
}

/* Zen keeps the reveal warm but borderless, matching its manuscript feel. */
.zen .author-reveal {
    border-top: none;
    margin-top: 5rem;
    padding-top: 1rem;
}
.zen .author-reveal__line { font-size: 1.35rem; }

@media (max-width: 700px) {
    .author-reveal { margin-top: 3rem; padding-top: 2rem; }
}

/* ============================================= */
/* 10d. PAGE-BY-PAGE MODE                        */
/* ============================================= */

/*
    page-mode applies to <html> and flips .book-pages from vertical scroll
    to CSS-column based horizontal pagination.  Column widths are set in px
    by JS (column-width doesn't accept percentages per spec).
*/

/* Container: fixed height, no scroll. */
.page-mode .book-pages {
    overflow: hidden;
    touch-action: none;
    position: relative;
}

/* Column wrapper: browser breaks flowing text into full-width columns. */
.book-columns {
    column-gap: 0;
    height: 100%;
    /* column-width is set by JS in px */
}

.book-columns.animate {
    transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .book-columns.animate {
        transition: none;
    }
}

/* ============================================= */
/* 10e. PAGE NAVIGATION (arrows + indicator)     */
/* ============================================= */

.page-nav {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.92), transparent);
    pointer-events: none;
}

.page-mode .page-nav {
    display: flex;
}

.page-nav__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(139, 94, 52, 0.12);
    color: var(--color-primary);
    font-size: 1.4rem;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.15s;
}

.page-nav__arrow:hover,
.page-nav__arrow:focus-visible {
    background: rgba(139, 94, 52, 0.25);
    outline: none;
}

.page-nav__arrow:disabled {
    opacity: 0.3;
    cursor: default;
    background: rgba(139, 94, 52, 0.06);
}

.page-nav__indicator {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.55);
    user-select: none;
    pointer-events: auto;
}

/* Hide page nav when chrome is hidden (swipe still works). */
.chrome-hidden .page-nav {
    display: none;
}

/* Dark mode overrides for page nav. */
.dark-mode .page-nav {
    background: linear-gradient(to top, rgba(31, 26, 20, 0.92), transparent);
}

.dark-mode .page-nav__arrow {
    background: rgba(201, 168, 124, 0.15);
    color: var(--color-accent);
}

.dark-mode .page-nav__arrow:hover,
.dark-mode .page-nav__arrow:focus-visible {
    background: rgba(201, 168, 124, 0.28);
}

.dark-mode .page-nav__arrow:disabled {
    background: rgba(201, 168, 124, 0.06);
}

.dark-mode .page-nav__indicator {
    color: rgba(255, 255, 255, 0.55);
}
.swipe-hint {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--color-text);
    opacity: 0.4;
    transition: opacity 0.8s ease;
}

.swipe-hint--hidden {
    opacity: 0;
}

/* ============================================= */
/* 11. DARK MODE                                 */
/* ============================================= */

/*
    When .dark-mode is on <html>, override the custom properties used across
    the whole page. Because custom properties inherit down the tree, every
    element using var(--color-bg), var(--color-text), etc. automatically
    switches to the dark palette. This keeps the override in one place.
*/
html.dark-mode {
    --color-bg: #1a1612;          /* very dark warm brown */
    --color-text: #f5f0e6;        /* warm off-white */
    --color-primary: #3d2e22;     /* dark brown for header/nav/buttons */
    --color-primary-hover: #4a3a2c;
    --color-accent: #c9a87c;      /* light brass for links and accents */
}

/*
    The book cover is explicitly styled, so we override it directly. In dark
    mode it looks like dark leather with brass accents instead of a brown
    cover on a dark page.
*/
.dark-mode .book-cover {
    background: #2d241b;
    border-color: rgba(201, 168, 124, 0.25);
    color: var(--color-accent);
}

.dark-mode .book-cover:hover,
.dark-mode .book-cover:focus-visible {
    box-shadow: 0 0 0 4px rgba(201, 168, 124, 0.25);
}

.dark-mode .book-cover__image {
    border-color: rgba(201, 168, 124, 0.25);
}

/*
    Reading pages in dark mode use a dark sepia background. The left gutter
    shadow is inverted so it reads as a soft highlight instead of a dark
    smudge on a dark page.
*/
.dark-mode .book-interior {
    background: #1f1a14;
    color: var(--color-text);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.dark-mode .book-pages {
    background:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 0%, transparent 8%);
}

.dark-mode .book-close {
    background: rgba(201, 168, 124, 0.15);
    color: var(--color-accent);
}

.dark-mode .book-close:hover,
.dark-mode .book-close:focus-visible {
    background: rgba(201, 168, 124, 0.25);
}

/*
    Preface and chapter headings adapt to the dark palette via the variables,
    but we give the preface a slightly lighter dark background so it still
    stands out from the page background.
*/
.dark-mode .preface {
    background: rgba(201, 168, 124, 0.08);
    border-color: rgba(201, 168, 124, 0.18);
}

.dark-mode .reading-time {
    color: #b8b0a3;
}

.dark-mode .theme-list li {
    background: rgba(201, 168, 124, 0.12);
    color: var(--color-text);
}

.dark-mode .preface h2,
.dark-mode .chapter-heading {
    color: var(--color-accent);
}

.dark-mode .chapter-heading {
    border-bottom-color: rgba(201, 168, 124, 0.2);
}

/*
    In dark mode, show the sun icon (switch to light) and hide the moon.
*/
.dark-mode .icon-moon { display: none; }
.dark-mode .icon-sun { display: block; }

/*
    Dark mode tweaks for the reader features. The reader controls and
    theme toggle already live on the dark sticky nav, so they need no
    override. The author-reveal uses --color-primary which
    becomes very dark in dark mode; nudge it to the brass accent for
    readable contrast on the dark reading surface.
*/
.dark-mode .author-reveal {
    border-top-color: rgba(201, 168, 124, 0.3);
}
.dark-mode .author-reveal__line {
    color: var(--color-accent);
}

/*
    Reduced motion still works in dark mode because it only removes
    transitions; it doesn't conflict with these color overrides.
*/

/* ============================================= */
/* 12. SETTINGS PANEL (gear popover)             */
/* ============================================= */
.settings-wrapper {
    position: relative;
}

.settings-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.settings-gear:hover,
.settings-gear:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    outline: none;
}

.settings-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 220px;
    background: var(--color-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    z-index: 200;
}

.settings-panel[hidden] {
    display: none;
}

.settings-panel__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.settings-panel .text-size-group {
    display: inline-flex;
    gap: 0;
    border-color: rgba(255, 255, 255, 0.2);
    justify-content: center;
}

.theme-group {
    justify-content: flex-end;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Dark mode: the panel background follows --color-primary which already
   darkens, so reader-btn / text-size-btn / theme-toggle all still read well. */

/* ============================================= */
/* 13. MOBILE HEADER COLLAPSE (scroll-driven)    */
/* ============================================= */
@media (max-width: 700px) {
    .story-header {
        transition: max-height 0.35s ease, padding 0.3s ease, opacity 0.3s ease;
        max-height: 300px;
        overflow: hidden;
    }

    .story-header--hidden {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }
}

/* ============================================= */
/* 14. DESKTOP ENHANCEMENTS                      */
/* ============================================= */
@media (min-width: 901px) {
    /* Constrain the reading column and center it. */
    .story-main {
        padding: 2rem 2rem;
        justify-content: center; /* vertically center the book card */
    }

    .book-stage {
        max-width: 700px;
    }

    .book {
        aspect-ratio: 3 / 4;
    }

    .book-pages {
        padding: 3rem 3.5rem;
    }

    .book-pages p {
        font-size: 1.15rem;
    }
}