/* Novel detail page. */

.novel-head { margin-bottom: 12px; }

.novel-hero {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.novel-cover {
    flex: 0 0 120px;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--tag-bg);
    display: grid;
    place-items: center;
}

.novel-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

/* Tap-to-enlarge cover overlay (built by pages/novel.js). */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgb(0 0 0 / 85%);
    cursor: zoom-out;
}
.lightbox[hidden] { display: none; }

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.novel-title {
    margin: 0 0 4px;
    font-size: 26px;
}

.novel-author {
    margin: 0 0 10px;
    color: var(--ink-soft);
}

.novel-count {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 14px;
}

.novel-cta {
    width: 100%;
    margin-bottom: 14px;
}

.novel-desc {
    color: var(--ink-soft);
    line-height: 1.6;
    font-family: "Charis SIL", georgia, serif;
}

.novel-desc p { margin: 0 0 0.6em; }
.novel-desc p:last-child { margin-bottom: 0; }

/* A deliberately blank line is an empty <p>: zero height with collapsing
 * margins, so it needs a line box of its own to survive. */
.novel-desc p:empty { min-height: 1em; }

/* Collapsed height is a whole number of lines, so the cut never lands mid-glyph.
 * max-height (not line-clamp) because the description is multi-paragraph. */
.novel-desc.is-collapsed {
    max-height: 4.8em; /* 3 lines at line-height 1.6 */
    overflow: hidden;
}

.novel-desc-toggle {
    display: block;
    margin-left: auto;
    padding: 2px 4px;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.novel-desc-toggle[aria-expanded="true"] { transform: rotate(180deg); }

.novel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

.chapters-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.chapters-head h2 {
    font-size: 16px;
    margin: 0;
}

.chapters-sort {
    width: auto;
    padding: 6px 12px;
    font-size: 13px;
}

.chapter-row {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.chapter-label {
    color: var(--ink-soft);
    min-width: 32px;
}

.chapter-title {
    flex: 1 1 auto;
}

/* Read through: fade the row's contents rather than recolour them — --ink-soft
 * sits too close to --ink in these warm palettes to read as "done". Applied to
 * the children, not the row, so the divider line keeps its full weight. */
.chapter-read > * {
    opacity: 0.45;
}

.chapter-date {
    flex: 0 0 auto;
    color: var(--ink-soft);
    font-size: 13px;
    white-space: nowrap;
}

/* ---------- desktop ----------
 * Same DOM, more room: the hero cover grows and the CTA stops spanning the
 * column. The page stays a centred --measure column — the description and
 * chapter list are prose-shaped, and stretching them past a comfortable measure
 * would hurt rather than help.
 */

@media (width >= 900px) {
    .novel-hero {
        gap: 24px;
        margin-bottom: 24px;
    }

    .novel-cover { flex: 0 0 180px; }
    .novel-title { font-size: 32px; }

    /* Sized to its label instead of the full column, per the desktop design. */
    .novel-cta { width: 100%; }
}