:root {
    --main-gradient: linear-gradient(90deg, #ea6511 0%, #e7362c 50%, #cc112c 100%);
    --gradient_90: linear-gradient(180deg, #ea6511 0%, #e7362c 50%, #cc112c 100%);
    --main-yellow: #f5e3c4;
    --black: #000;
    --white: #fff;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helios', -apple-system, Roboto, Helvetica, sans-serif;
    line-height: 1.4;
    color: var(--black);
}

.audiobook-landing {
    padding-bottom: 166px;
    overflow: hidden;
    background: var(--main-gradient);
}
@media (max-width: 991px) { .audiobook-landing { padding-bottom: 100px; } }

.hero-section {
    display: flex; flex-direction: column; position: relative; z-index: 10;
    min-height: 757px; width: 100%; align-items: center; padding: 76px 80px 0;
}
@media (max-width: 991px) { .hero-section { max-width: 100%; padding: 0 20px; } }

.hero-background, .hero-overlay, .content-background, .footer-background {
    position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center;
}
.hero-overlay { object-position: left; }

.hero-content {
    display: flex; flex-direction: column; position: relative; z-index: 10;
    min-height: 694px; width: 1090px; max-width: 100%; align-items: end;
    margin: 0 auto auto; padding: 0 80px 328px;
}
@media (max-width: 991px) { .hero-content { margin-bottom: 10px; padding: 0 0 100px 20px; } }
@media (max-width: 640px) { .hero-content { object-fit: contain; object-position: top; margin-top: auto; position: relative; } }

.book-cover {
    aspect-ratio: 0.56; object-fit: contain; object-position: center; width: 213px; z-index: 10;
    max-width: 100%; background-color: var(--white); margin: -15px 0 -66px;
}
@media (max-width: 991px) { .book-cover { margin-bottom: 10px; } }
@media (max-width: 640px) { .book-cover { width: 141px; margin-right: auto; } }

.main-content {
    display: flex; flex-direction: column; position: relative; min-height: 6302px;
    margin-top: -282px; width: 100%; align-items: center; padding: 349px 80px 40px;
}
@media (max-width: 991px) { .main-content { max-width: 100%; margin-top: -200px; padding: 100px 20px 0; } }

.book-info { position: relative; display: flex; margin-left: 27px; width: 100%; max-width: 1594px; flex-direction: column; align-items: center; }
@media (max-width: 991px) { .book-info { max-width: 100%; } }

.book-header { text-align: center; color: var(--main-yellow); }
.author-name { font: 400 44px 'Helios', sans-serif; }
@media (max-width: 991px) { .author-name { max-width: 100%; } }

.book-title { margin-top: 34px; font: 600 120px 'BastionKontrast', sans-serif; }
@media (max-width: 991px) { .book-title { max-width: 100%; font-size: 40px; } }

.book-subtitle { text-transform: uppercase; margin-top: 52px; font: 400 44px 'Helios', sans-serif; }
@media (max-width: 991px) { .book-subtitle { margin-top: 40px; } }

.book-genre { text-transform: uppercase; margin-top: 43px; font: 400 40px 'Helios', sans-serif; }
@media (max-width: 991px) { .book-genre { margin-top: 40px; } }

.book-description { color: var(--white); font: 400 26px/34px 'Helios', sans-serif; }
.description-intro { margin-top: 43px; }
@media (max-width: 991px) { .description-intro { max-width: 100%; margin-top: 40px; } }
.description-main { margin-top: 27px; }
@media (max-width: 991px) { .description-main { max-width: 100%; } }
.description-conclusion { margin-top: 32px; }
@media (max-width: 991px) { .description-conclusion { max-width: 100%; } }

.chapters-list { margin-top: 91px; width: 1090px; max-width: 100%; }
@media (max-width: 991px) { .chapters-list { margin-top: 40px; } }

.audio-chapter { width: 100%; margin-top: 54px; }
.audio-chapter:first-child { margin-top: 0; }
@media (max-width: 991px) { .audio-chapter { max-width: 100%; margin-top: 40px; } }

.chapter-content { border-radius: 20px; background-color: var(--main-yellow); width: 100%; padding: 37px 80px; }
@media (max-width: 991px) { .chapter-content { max-width: 100%; padding: 20px; } }

.chapter-content-simple { border-radius: 20px; background-color: var(--main-yellow); display: flex; width: 100%; flex-direction: column; align-items: stretch; padding: 42px 80px; }
@media (max-width: 991px) { .chapter-content-simple { max-width: 100%; padding: 0 20px; } }

.chapter-main { gap: 20px; display: flex; }
@media (max-width: 991px) { .chapter-main { flex-direction: column; align-items: stretch; gap: 0; } }

.chapter-text { display: flex; flex-direction: column; align-items: stretch; font-weight: 400; width: 57%; }
@media (max-width: 991px) { .chapter-text { width: 100%; max-width: 100%; margin-top: 40px; } }

.chapter-title { color: #e30613; text-align: center; align-self: start; font: 62px 'BastionKontrast', sans-serif; }
@media (max-width: 991px) { .chapter-title { font-size: 40px; } }

.chapter-excerpt { color: var(--black); margin-top: 32px; font: 18px/23px 'Helios', sans-serif; }
@media (max-width: 991px) { .chapter-excerpt { max-width: 100%; } }

.chapter-illustration { width: 43%; object-fit: contain; object-position: center; }
@media (max-width: 991px) { .chapter-illustration { width: 100%; margin-top: 40px; } }

.chapter-credits { display: flex; flex-direction: column; align-items: stretch; width: 43%; margin-left: 20px; color: #e30613; white-space: nowrap; text-transform: uppercase; font: 400 18px/1.3 'Helios', sans-serif; }
@media (max-width: 991px) { .chapter-credits { width: 100%; margin-top: 40px; white-space: initial; } }

.credits-label { color: #e30613; line-height: 1.3; text-transform: uppercase; align-self: start; }
.credits-image { aspect-ratio: 1.96; object-fit: contain; object-position: center; width: 100%; margin-top: 9px; }

.chapter-controls { width: 100%; display: flex; flex-direction: column; }
@media (max-width: 991px) { .chapter-controls { max-width: 100%; } }

.audio-player {
    border-radius: 100px; border: 3px solid var(--white); box-shadow: 1px 1px 3px 0 rgba(0,0,0,1);
    display: flex; align-items: center; gap: 9px; width: auto; justify-content: flex-start;
    background: var(--gradient_90); color: var(--white); margin: auto auto 0 0;
    padding: 8px 50px 8px 27px; font: 400 14px/1.3 'Helios', sans-serif;
    cursor: pointer; user-select: none;
}
@media (max-width: 991px) { .audio-player { margin-top: 40px; padding: 0 20px; } }

.play-button { aspect-ratio: 1; object-fit: contain; object-position: center; width: 56px; align-self: stretch; flex-shrink: 0; fill: var(--white); }
.time-display { align-self: stretch; margin: auto 0; font-family: monospace; white-space: nowrap; }
.progress-bar { aspect-ratio: 34.48; object-fit: contain; object-position: center; width: 174px; stroke-width: 5px; stroke: var(--white); align-self: stretch; flex-shrink: 0; max-width: 100%; margin: auto 0; }

/* Mobile Audio Player Layout (< 480px) */
@media (max-width: 480px) {
    .audio-player {
        flex-wrap: wrap;
        padding: 12px 15px;
        border-radius: 16px;
        gap: 10px;
        align-items: center;
    }

    /* Row 1: Play/Pause */
    .play-button, .pause-button {
        order: 1;
        width: 44px;
        flex-shrink: 0;
    }

    /* Row 1: Progress Bar (fills remaining space) */
    .progress-bar {
        order: 2;
        flex: 0;
        min-width: 0;
        margin: 0;
        aspect-ratio: auto;
        height: 12px;
        width: 100%;
    }

    /* Row 2: Time Display */
    .time-display {
        order: 3;
        flex: 1;
        margin: 0;
        font-size: 13px;
        align-self: center;
        white-space: nowrap;
    }

    /* Row 2: Volume Toggle (pushed to far right) */
    .volume-toggle {
        order: 4;
        margin-left: auto !important;
        margin-top: 0 !important;
    }
}

.voice-actors { display: flex; width: 100%; align-items: stretch; gap: 7px; white-space: wrap; font: 400 18px 'Helios', sans-serif; margin-left: 20px; }
@media (max-width: 991px) { .voice-actors { margin-top: 40px; white-space: initial; margin-left: 0; } }

.actors-label { color: #e30613; line-height: 1.3; text-transform: uppercase; align-self: start; margin-top: 28px; flex-grow: 1; }
.actors-list { display: flex; align-items: center; color: var(--black); text-align: center; line-height: 23px; justify-content: space-between; }
@media (max-width: 991px) { .actors-list { white-space: initial; } }

.actor { align-self: stretch; display: flex; flex-direction: column; align-items: stretch; width: 135px; margin: auto 0; }
.actor-photo { aspect-ratio: 1; object-fit: contain; object-position: center; width: 135px; border-radius: 50%; }
.actor-name { align-self: center; }

.creator-credits {
    align-self: stretch; display: flex; margin-top: 40px; width: 100%; align-items: stretch; gap: 20px;
    color: var(--main-yellow); text-align: center; text-transform: uppercase; flex-wrap: wrap;
    justify-content: space-around; font: 400 32px 'Helios', sans-serif;
    margin-bottom: 40px;
}
@media (max-width: 991px) { .creator-credits { max-width: 100%; margin-top: 40px; font-size: 40px; } }

.credits-section { border-radius: 24px; display: flex; align-items: center; gap: 10px; line-height: 1; justify-content: center; padding: 12px 30px; }
@media (max-width: 991px) { .credits-section { font-size: 40px; padding: 0 20px; } }

.footer-section { display: flex; flex-direction: column; position: relative; min-height: 471px; margin-top: 9px; padding-top: 247px; }
@media (max-width: 991px) { .footer-section { max-width: 100%; padding-top: 100px; } }

.footer-content {
    position: relative; background-color: var(--black); z-index: 10; display: flex;
    margin-bottom: -166px; flex-direction: column; align-items: center; justify-content: center; padding: 51px 80px;
}
@media (max-width: 991px) { .footer-content { max-width: 100%; margin-bottom: 10px; padding: 0 20px; } }

.footer-info { display: flex; width: 412px; max-width: 100%; flex-direction: column; align-items: center; }
.logo-container { background-color: var(--white); display: flex; width: 250px; max-width: 100%; flex-direction: column; align-items: stretch; justify-content: center; padding: 13px 25px; }
@media (max-width: 991px) { .logo-container { padding: 0 20px; } }
.footer-logo { aspect-ratio: 2.53; object-fit: contain; object-position: center; width: 100%; }
.department-name { color: var(--white); text-align: center; align-self: stretch; margin-top: 47px; font: 400 24px/1.3 'Helios', sans-serif; }
.department-name:nth-of-type(2) { margin-top: 37px; }
@media (max-width: 991px) { .department-name { margin-top: 40px; } }
.year { color: var(--white); text-align: center; margin-top: 38px; font: 400 24px/1.3 'Helios', sans-serif; }

/* Specific variations */
.chapter-2 .chapter-text, .chapter-4 .chapter-text { width: 57%; }
.chapter-3 .chapter-text, .chapter-5 .chapter-text, .chapter-6 .chapter-text, .chapter-7 .chapter-text, .chapter-8 .chapter-text { width: 50%; }
.chapter-8 .chapter-main { gap: 20px; display: flex; }
.chapter-8 .chapter-text { width: 50%; }
.chapter-8 .chapter-credits-extended { width: 50%; }

@media (max-width: 991px) {
    .chapter-2 .chapter-text, .chapter-3 .chapter-text, .chapter-4 .chapter-text,
    .chapter-5 .chapter-text, .chapter-6 .chapter-text, .chapter-7 .chapter-text, .chapter-8 .chapter-text { width: 100%; }
    .chapter-8 .chapter-credits-extended { width: 100%; max-width: 100%; }
}

.chapter-3 .audio-player, .chapter-5 .audio-player, .chapter-6 .audio-player, .chapter-7 .audio-player, .chapter-8 .audio-player { margin-top: 30px; }
.chapter-4 .audio-player { margin-top: 30px; }
.chapter-7 .audio-player, .chapter-8 .audio-player { margin-top: 30px; }

@media (max-width: 991px) {
    .chapter-3 .audio-player, .chapter-4 .audio-player, .chapter-5 .audio-player,
    .chapter-6 .audio-player, .chapter-7 .audio-player, .chapter-8 .audio-player { margin-top: 40px; }
}

/*.chapter-2 .audio-player, .chapter-4 .audio-player {
    border-radius: 100px; border: 3px solid var(--white); box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.25);
    background: var(--gradient_90); align-self: start; display: flex; margin-top: 4px; align-items: center; gap: 9px;
    color: var(--white); padding: 8px 80px 8px 27px; font: 400 14px/1.3 'Helios', sans-serif;
}

@media (max-width: 991px) { .chapter-2 .audio-player, .chapter-4 .audio-player { padding: 0 20px; } }
 */
 
.chapter-8 .chapter-credits-extended .credits-label { align-self: center; }
.chapter-8 .chapter-credits-extended .credits-image { aspect-ratio: 2.4; }
@media (max-width: 991px) { .chapter-8 .chapter-credits-extended .credits-image { max-width: 100%; } }

/* Chapter Two-Column Layout */
.chapter-main {
    display: flex;
    gap: 40px;
    width: 100%;
}
.chapter-left {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.chapter-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

/* Crew Sections (Sound Engineers & Actors) */
.crew-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.crew-label {
    color: #e30613;
    text-transform: uppercase;
    font: 400 18px/1.3 'Helios', sans-serif;
    align-self: flex-start;
}
.crew-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.crew-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -10px; /* Overlap effect */
    position: relative;
    z-index: 1;
    transition: z-index 0.2s ease;
}
.crew-member:first-child {
    margin-left: 0;
}
.crew-member:hover {
    z-index: 10;
}
.crew-photo {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--main-yellow, #f5e3c4);
    background: #fff;
    border: 3px solid white;
}
.crew-name {
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
    line-height: 1.2;
    color: var(--black, #000);
    max-width: 90px;
    word-wrap: break-word;
}

/* Audio Player Context Fix */
.audio-player {
    margin-top: 24px;
    max-width: 100%;
}

/* Responsive: Stack on Mobile */
@media (max-width: 991px) {
    .chapter-main {
        flex-direction: column;
        gap: 30px;
    }
    .chapter-left, .chapter-right {
        flex: none;
        width: 100%;
    }
    .crew-list {
        flex-wrap: wrap;
        gap: 15px;
    }
    .crew-member {
        margin-left: 0;
    }
}

/* Pause Button (matches play button dimensions & styling) */
.pause-button {
    aspect-ratio: 1;
    width: 56px;
    align-self: stretch;
    flex-shrink: 0;
    fill: var(--white, #fff);
}

/* Progress Bar Fill Animation */
.progress-fill {
    transform-origin: 0% 50%;
    transition: transform 0.1s linear;
}

/* Hide/Show utility (JS toggles display) */
.hidden-btn { display: none !important; }