/* Book-mode reader — reading typography inspired by long-form print.
   Rich serif body, drop cap, pull quotes, paper grain, three paper themes. */
.reader {
    --reader-fs: 1.18rem;
    --paper-bg: #fbf6ec;
    --paper-ink: #33302a;
    --paper-soft: #e6dcc8;
    --paper-accent: #9a3b2a;
    max-width: 720px;
    margin: 0 auto;
}
.reader[data-theme="sepia"] { --paper-bg: #f4ecd8; --paper-ink: #5b4636; --paper-soft: #e2d4b8; --paper-accent: #8a5a2b; }
.reader[data-theme="dark"]  { --paper-bg: #1c1f24; --paper-ink: #dcd7cd; --paper-soft: #333842; --paper-accent: #cf9b6b; }

.reader-progress {
    position: fixed; top: 0; left: 0; height: 4px; width: 0;
    background: linear-gradient(90deg, var(--mint), var(--peach));
    z-index: 2000; transition: width .1s linear;
}

.reader-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: .35rem .6rem; margin-bottom: 1.25rem;
    position: sticky; top: 70px; z-index: 20;
}
.reader-bar .center { font-weight: 600; text-align: center; font-size: .95rem; line-height: 1.25; }
.reader-bar .btn { border-radius: 999px; }
.reader-tools .btn { padding: .25rem .55rem; }

/* --- the paper --- */
.reader-paper {
    position: relative;
    background: var(--paper-bg); color: var(--paper-ink);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.25rem);
    overflow: hidden;
}
/* subtle paper grain */
.reader-paper::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
.reader[data-theme="dark"] .reader-paper::before { opacity: .025; }
.reader-paper > * { position: relative; z-index: 1; }

.reader-chapter-title {
    font-family: var(--font-read); font-weight: 600;
    font-size: clamp(1.5rem, 4.5vw, 2.15rem); line-height: 1.15;
    letter-spacing: -.01em; color: var(--paper-ink); margin: 0 0 .35rem;
}
.reader-kicker {
    font-family: var(--font-body); font-size: .72rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--muted); margin: 0 0 1.75rem;
}

/* --- reading content (TinyMCE HTML) --- */
.reader-content {
    font-family: var(--font-read);
    font-size: var(--reader-fs);
    line-height: 1.85;
}
.reader-content p { margin: 0 0 1.2em; }
@media (min-width: 640px) {
    .reader-content p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
}
/* drop cap on the first paragraph */
.reader-content > p:first-of-type::first-letter {
    float: left; font-family: var(--font-read); font-weight: 600;
    font-size: 3.4em; line-height: .84; padding: .04em .09em 0 0; color: var(--paper-accent);
}
.reader-content h1, .reader-content h2, .reader-content h3 {
    font-family: var(--font-read); color: var(--paper-ink);
    line-height: 1.25; margin: 1.8rem 0 .8rem;
}
.reader-content h2 { font-size: 1.5em; }
.reader-content h3 { font-size: 1.25em; }
.reader-content a { color: var(--paper-accent); text-underline-offset: 2px; }
.reader-content strong { font-weight: 600; }
.reader-content ul, .reader-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.reader-content li { margin-bottom: .4em; }
.reader-content img {
    max-width: 100%; height: auto; border-radius: 10px; margin: 1.6rem auto; display: block;
    box-shadow: 0 8px 28px -12px rgba(0,0,0,.3);
}
.reader-content figure { margin: 1.6rem 0; }
.reader-content figcaption { font-size: .82em; color: var(--muted); text-align: center; margin-top: .5rem; }
/* pull quote / blockquote */
.reader-content blockquote {
    margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem;
    border-left: 3px solid var(--paper-accent);
    font-size: 1.14em; line-height: 1.5; font-style: italic; color: var(--paper-ink);
}
.reader-content blockquote p { margin: 0; text-align: left; }
.reader-content hr { border: none; border-top: 1px solid var(--paper-soft); margin: 2rem 0; }

.reader-sep { border: none; border-top: 1px solid var(--paper-soft); margin: 2rem 0 1.5rem; }
.reader-nav { display: flex; justify-content: space-between; gap: 1rem; }
.reader-nav .spacer { flex: 1; }

/* fixed side arrows on wide screens */
.reader-side {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    display: none; place-items: center; z-index: 30;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow); font-size: 1.3rem; color: var(--ink); text-decoration: none;
}
.reader-side.prev { left: max(1rem, calc(50% - 460px)); }
.reader-side.next { right: max(1rem, calc(50% - 460px)); }
@media (min-width: 1100px) { .reader-side { display: grid; } }