.raven-fairytale {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: clamp(20rem, 45vw, 44rem);
    padding:
        clamp(2rem, 5.5vw, 5rem)
        var(--page-gutter)
        clamp(0.25rem, 0.4vw, 0.5rem);
    place-items: center;
    overflow: hidden;
    background: var(--color-black);
    color: var(--color-white);
}

.raven-fairytale__inner {
    container-type: inline-size;
    display: flex;
    width: min(100%, 88rem);
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
}

.raven-fairytale__text {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(2.4rem, 6.1cqw, 5.32rem);
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: -0.035em !important;
    text-align: center;
}

.raven-fairytale__line {
    display: block;
    white-space: nowrap;
}

.raven-fairytale__mobile-break {
    display: none;
}

.raven-fairytale__muted,
.raven-fairytale__highlight {
    display: inline-block;
}

.raven-fairytale__muted {
    font-weight: 400;
}

.raven-fairytale__highlight {
    margin-inline-start: 0.14em;
    color: var(--color-raven-red);
    font-weight: 700;
}

@media (max-width: 1024px) {
    .raven-fairytale__text {
        font-size: clamp(2.35rem, 6.1cqw, 4.4rem);
        line-height: 1.22;
    }
}

.raven-fairytale__cta {
    display: inline-flex;
    min-height: clamp(1.65rem, 2vw, 2rem);
    margin-top: clamp(2rem, 3.5vw, 3.2rem);
    padding-inline: clamp(0.85rem, 1.3vw, 1.2rem);
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: var(--color-raven-red);
    color: var(--color-white);
    font-family: Arial, sans-serif;
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.raven-fairytale__cta:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 0.3rem;
}

.has-gsap .raven-fairytale__highlight,
.has-gsap .raven-fairytale__muted,
.has-gsap .raven-fairytale__cta {
    visibility: hidden;
}

@media (max-width: 768px) {
    .raven-fairytale {
        min-height: clamp(30rem, 140vw, 40rem);
        padding-block: clamp(3.5rem, 15vw, 5rem);
    }

    .raven-fairytale__inner {
        width: min(100%, 35rem);
    }

    .raven-fairytale__text {
        font-size: clamp(1.15rem, 6.5vw, 2rem);
        line-height: 1.22;
        text-wrap: balance;
    }

    .raven-fairytale__line {
        display: inline;
        white-space: normal;
    }

    .raven-fairytale__line::after {
        content: " ";
    }

    .raven-fairytale__mobile-break {
        display: inline;
    }

    .raven-fairytale__cta {
        min-height: 1.8rem;
        margin-top: clamp(6rem, 31vw, 7.5rem);
        font-size: clamp(0.68rem, 3.1vw, 0.82rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .raven-fairytale__cta {
        transition: none;
    }
}