/* Grimoire paged reader — "paper pages", single on mobile, spread on desktop. */

.reader {
    max-width: 680px;
    margin: 0 auto;
}

.reader-book { position: relative; }

/* Leaves container: one leaf by default, two side-by-side when spread */
.reader-leaves {
    display: block;
}

.reader-leaves.is-spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 1040px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent 49.4%, rgba(0, 0, 0, 0.5) 49.7%, rgba(0, 0, 0, 0.5) 50.3%, transparent 50.6%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.reader-leaf {
    min-height: 66vh;
    max-height: 66vh;
    overflow: hidden;
    padding: 12px 14px 8px;
}

.reader-leaves.is-spread .reader-leaf {
    padding: 22px 34px;
}

.reader-leaves.is-spread .reader-leaf[data-leaf="0"] { padding-right: 44px; }
.reader-leaves.is-spread .reader-leaf[data-leaf="1"] { padding-left: 44px; }

.reader-leaf.is-blank { background: transparent; }

.reader-leaf p { margin: 0 0 1.4em; }

/* Drop cap on the opening page. Works for a normal first paragraph (right
   after the header) and for an explicit .dropcap paragraph, used when a log
   date precedes the first line. */
.reader-leaf .story-header + p::first-letter,
.reader-leaf p.dropcap::first-letter {
    float: left;
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 3.1em;
    line-height: 0.8;
    padding: 0.05em 0.12em 0 0;
    color: #d8cdb8;
}

/* Page-turn feel */
.reader-leaves.turning {
    animation: reader-turn 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
    transform-origin: center center;
}

@keyframes reader-turn {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Click zones over the left/right thirds */
.reader-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30%;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

.reader-edge-prev { left: 0; cursor: w-resize; }
.reader-edge-next { right: 0; cursor: e-resize; }

/* Bottom bar */
.reader-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(138, 125, 104, 0.22);
}

.reader-btn {
    background: none;
    border: 1px solid rgba(138, 125, 104, 0.3);
    color: #cfc4b0;
    border-radius: 6px;
    width: 44px;
    height: 34px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.reader-btn:hover:not(:disabled) { border-color: #8a7d68; color: #efe6d4; }
.reader-btn:disabled { opacity: 0.3; cursor: default; }

.reader-progress {
    font-family: 'IM Fell English', Georgia, serif;
    letter-spacing: 2px;
    color: #8a7d68;
    min-width: 90px;
    text-align: center;
}

.reader-chapter-nav { margin-top: 28px; padding-top: 18px; }

.reader-toggle {
    display: block;
    margin: 22px auto 0;
    background: none;
    border: none;
    color: #6f6353;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
}

.reader-toggle:hover { color: #cfc4b0; }

.story-container.is-paged { animation: none; }

/* When spread is active, let the parchment panel widen to hold the book */
@media (min-width: 900px) {
    .story-container.is-paged { max-width: 1120px; }
    .reader { max-width: 1040px; }
}

@media (max-width: 600px) {
    .reader-leaf { min-height: 72vh; max-height: 72vh; }
}

@media (prefers-reduced-motion: reduce) {
    .reader-leaves.turning { animation: none; }
}