/* Books trial: navigation floats over one continuous illustrated masthead. */
/* The scene reaches the viewport edges; catalog and navigation retain their readable width. */
.books-page .page-shell {
    --books-inset: clamp(1rem, 3vw, 2rem);
    max-width: none;
    padding-top: 0;
}
.books-page .section-stack,
.books-page .tumblethorn-footer { max-width: 1496px; margin-inline: auto; }
.books-page .top-nav.site-nav {
    position: absolute;
    top: 1rem;
    left: max(var(--books-inset), calc((100% - 1496px) / 2));
    right: max(var(--books-inset), calc((100% - 1496px) / 2));
    margin: 0;
}
.books-page .hero-page { margin: 0 calc(-1 * var(--books-inset)) 0.75rem; }
.books-page .hero-showcase-books {
    --books-bottom-fade: clamp(6rem, 12vw, 11rem);
    --books-image-position: right center;
    --books-image-size: auto 100%;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(30rem, 40vw, 37rem);
    padding: 10rem max(calc(var(--books-inset) + 4vw), calc((100% - 1392px) / 2)) 2.5rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
/* Fade only the artwork and its wash, keeping text and controls fully opaque. */
.books-page .hero-showcase-books::before,
.books-page .hero-showcase-books::after {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--books-bottom-fade)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--books-bottom-fade)), transparent 100%);
}
.books-page .hero-showcase-books::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: url('../images/emma-reading-notebook-clean.webp') var(--books-image-position) / var(--books-image-size) no-repeat, #eee8fc;
}
.books-page .hero-showcase-books::before {
    z-index: -1;
    background: linear-gradient(90deg, #eee8fc 0%, #eee8fcf5 24%, #eee8fcc4 36%, #eee8fc4d 50%, transparent 64%);
}
.books-page .hero-showcase-books .hero-copy {
    width: 43%;
    max-width: 29rem;
    padding: 0;
    margin: 0;
    align-items: flex-start;
    text-align: left;
    transform: none;
}
.books-page .hero-showcase-books .hero-title {
    margin: 0;
    font-size: clamp(3.75rem, 7.5vw, 7rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: #6523be;
    background: none;
    text-shadow: 0 2px 0 #ffffffb3;
}
.books-page .hero-showcase-books .hero-subtitle {
    margin: 1rem 0 0;
    max-width: 25ch;
    color: #352567;
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
    line-height: 1.5;
}
.books-page .hero-showcase-books .hero-actions { width: auto; margin: 1.5rem 0 0; }
.books-page .hero-showcase-books .hero-actions .hero-primary-cta:nth-child(1) {
    color: #fff;
    background: linear-gradient(180deg, #8d48de, #6422bd);
    border: 1px solid #ffffffc9;
    box-shadow: 0 4px 10px #59289130;
}
@media (min-width: 721px) and (max-width: 1180px) {
    .books-page .hero-showcase-books { min-height: 28rem; padding-top: 7rem; }
}
@media (max-width: 720px) {
    .books-page .hero-showcase-books {
        min-height: 0;
        padding: calc(10rem + 65vw) 1.25rem 1.5rem;
        border-radius: 0;
        --books-bottom-fade: 5rem;
        --books-image-position: right 6rem;
        --books-image-size: auto calc(14rem + 40vw);
    }
    .books-page .hero-showcase-books::before {
        background: linear-gradient(180deg, #eee8fc 0, #eee8fcb3 8rem, transparent 13rem, transparent calc(6rem + 45vw), #eee8fc calc(10rem + 65vw));
    }
    .books-page .hero-showcase-books .hero-copy { width: 100%; max-width: none; }
    .books-page .hero-showcase-books .hero-title { font-size: clamp(3.25rem, 12vw, 4.5rem); }
    .books-page .hero-showcase-books .hero-subtitle { font-size: 1.1rem; margin-top: 0.6rem; }
    .books-page .hero-showcase-books .hero-actions { margin-top: 1rem; }
}

@media (max-width: 720px) { .books-page .hero-showcase-books::after { background-image: url('../web-assets/responsive/books-hero-960.webp'); } }