How to style sub-elements for modified parent Element?

[Juggern4ut]

I use BEM in all my project and I love the readability of the resulting SCSS code, but from time to time I run into the following Problem:

Suppose I have this HTML

<article class="card card--special">
    <p class="card__title">This is a title</p>
    <button class="card__cta">Show Details</button>
</article>

Using the following SCSS works great:

.card {
    // ...some stylings

    &__title {
        // ...some stylings
    }

    &__cta {
        // ...some stylings
    }
}

But how would I write my SCSS if i want the title, aswell as the cta to have a different styling, based on the modifier of the card? (In this case card--special)? I don't think it is helpful for the readability to have the modifier on the title aswell as the cta. Or did I understand a core concept of BEM wrong?

I would love a solution where I could encapsulate it within the .card{...} block so the whole Styling is contained within it.