/* Article-template refinement: opt-in until visual acceptance. */
.article-refined .article-hero__content {
    width: 87%;
    max-width: none;
}

.article-refined .article-hero h1 {
    max-width: none;
    font-size: clamp(1.875rem, calc(1.25rem + 2.8vw), 3.875rem);
    letter-spacing: -0.025em;
    line-height: 1.08;
}

.article-refined .article-hero__lead {
    max-width: none;
}

.article-refined .article-quiz {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    padding: 1.75rem 0 1.75rem 2rem;
    border-radius: var(--radius-md);
}

.article-refined .article-quiz h2 {
    margin-bottom: 1.525rem;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    letter-spacing: -0.025em;
    line-height: 1.14;
}

.article-refined .article-quiz__button {
    width: fit-content;
    max-width: 100%;
    min-height: 3.375rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    text-decoration: none;
}

.article-refined .article-quiz__image {
    display: block;
    width: 100%;
    height: auto;
    align-self: end;
    margin-bottom: -1.75rem;
}

@media (max-width: 48rem) {
    .article-refined .article-hero__content {
        width: 100%;
    }

    .article-refined .article-body > h2,
    .article-refined .article-summary h2,
    .article-refined .channel-cta h2 {
        font-size: 1.9375rem;
        letter-spacing: -0.025em;
        line-height: 1.08;
    }

    .article-refined .article-body > h3 {
        letter-spacing: -0.025em;
        line-height: 1.08;
    }

    .article-refined .channel-cta__visual {
        min-height: 12rem;
    }

    .article-refined .channel-cta__visual img {
        width: 18rem;
        bottom: -2.533333rem;
    }

    .article-refined .related-link {
        min-height: 11.2rem;
    }
}

@media (max-width: 36rem) {
    .article-refined .article-quiz {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem 1.25rem 0;
    }

    .article-refined .article-quiz__image {
        width: 63.75%;
        max-width: 13.6rem;
        margin: 0 -1.25rem 0 auto;
    }
}