/* Page-specific overrides */

.inner-hero .topline {
    color: rgba(255, 248, 236, .88);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .34);
}

.inner-hero:before {
    background-image: url("../img/tarot5d-stories2.webp");
}

#tarot5d-cards {
    padding-top: 46px;
}

#tarot5d-cards .section-title {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .inner-hero:before {
        background-size: auto 100%;
    }
}

@media (max-width: 620px) {
    .inner-hero {
        min-height: 98svh;
        padding-bottom: 0;
        background: #1b1a13;
    }

    .inner-hero::before {
        background-image: url("../img/tarot5d-stories4.webp");
        background-size: auto 94%;
        background-position: center top;
        background-repeat: no-repeat;

        /*
         * Preserve the sunlight, crystal transparency
         * and natural contrast of the original image.
         */
        filter: none;
    }

    /*
     * Remove the shared fog/veil completely on mobile.
     */
    .inner-hero::after {
        background: none;
    }

    /*
     * Keep the wording anchored near the bottom of
     * the slightly shorter mobile hero.
     */
    .inner-hero-content {
        min-height: calc(98svh - 96px);
        padding: 92px 0 16px;
    }

    .inner-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .inner-title {
        margin: 0;
    }

    .inner-intro {
        max-width: 320px;
        margin: 0;
        font-size: 14px;
        line-height: 1.62;
    }
}