:where(.article) {
    .article-top-wrapper {
        /* top spacing to match the content padding other pages get below the header */
        margin-block-start: var(--size-large);
    }

    .article-header-content {
        text-align: center;
        overflow-wrap: break-word;
        min-width: 0;
        display: flex;
        flex-flow: column wrap;
    }

    .article-image {
        text-align: center;

        img {
            display: block;
            margin-inline: auto;
            height: auto;
            border-radius: 2.5rem;
            max-width: 100%;
        }

        margin-block: var(--size-medium);
    }

    .article-summary {
        display: grid;
        grid-template-columns: 1fr 5fr;
        gap: var(--size-small);
        max-width: var(--content-width-narrow);
        width: 100%;
        margin-inline: auto;
        margin-block: var(--size-large);
        align-items: center;
    }

    .article-summary-title {
        font-size: 3rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .article-summary-description {
        padding-left: var(--size-small);
        border-left: solid var(--color-brand-navy) 2px;
    }

    .green-sparkles {
        display: flex;
        margin-inline: auto;
        margin-block: var(--size-large);
    }

    .article-publish-date {
        margin-left: 2rem;
    }

    .article-date-modified {
        padding-inline: 1rem;
        border-right: 2px solid var(--color-brand-navy);
    }



    .socials > a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        border-radius: 50%;
        border: solid var(--color-brand-navy) 2px;
        aspect-ratio: 1 / 1;
        width: 4rem;
        height: 4rem;

        svg {
            fill: var(--color-brand-navy);
            height: 2rem;
            width: auto;
        }
    }

    .article-functional-buttons {
        gap: 1rem;

        a {
            text-decoration: none;
            color: var(--color-brand-navy);

            &:visited {
                color: var(--color-brand-navy);
            }

            &:hover {
                text-decoration: underline;
            }
        }

        /* pipe separators, including a leading bar: | Print | Email | Share */
        & > *::before {
            content: "|";
            margin-right: 1rem;
            color: var(--color-medium-grey);
        }
    }

    .article-read-time {
        margin-left: 2rem;
    }

    .share-button {
        border: none;
        border-bottom: var(--color-light-grey) 1px;
        background: none;
        color: var(--color-brand-navy);

        &:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }

    .socials {
        gap: 1rem;
    }

    .article-helpful {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding-block: var(--size-large);
    }

    .article-helpful-prompt {
        font-weight: 700;
        color: var(--color-brand-navy);
        font-size: 1.25rem;
        margin: 0;
    }

    .article-helpful-buttons {
        display: flex;
        gap: 1.5rem;
    }

    .article-helpful-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        width: 5rem;
        height: 5rem;
        cursor: pointer;
        transition: background-color 0.15s, color 0.15s;

        color: var(--color-brand-navy);

        svg {
            width: 3.2rem;
            height: 3.2rem;
        }

        &:hover,
        &.is-selected {
            svg {
                fill: var(--color-brand-navy);
            }
        }
    }

    .article-helpful-thanks {
        color: var(--color-brand-navy);
        font-weight: 700;
        margin: 0;
    }

    .print-button {
        background: none;
        color: var(--color-brand-navy);
        border: none;
        padding: 0;

        &:hover {
            cursor: pointer;
            text-decoration: underline;
        }
    }
}

@media print {
    :where(.article) {
        .article-top-wrapper {
            grid-template-columns: 1fr;
        }

        .socials,
        .share-button,
        .article-helpful,
        .print-button,
        .article-functional-buttons {
            display: none !important;
        }

        .green-sparkles {
            display: none !important;
        }

        .article-publish-date,
        .article-date-modified {
            border-right: none;
        }

        .article-summary {
            grid-template-columns: 1fr;
        }
    }
}


@media screen and (width <= 1450px) {
    .article-post > .component-wrapper > .region > .content-wrap {
        padding-inline: 0;
    }

    .article-top-wrapper,
    .article-bottom {
        padding-inline: var(--mobile-inline-padding);
    }
}


@media screen and (max-width: 95rem) {
    :where(.article) {
        .article-top-wrapper {
            grid-template-columns: 1fr;
            row-gap: 1rem;
        }

        .article-read-time {
            margin-left: 0;
        }
    }
}

@media screen and (max-width: 900px) {
    :where(.article) {
        .share-links-and-meta-fields {
            flex-flow: column;
            align-items: center;
            gap: 2rem;
        }

        .article-publish-date {
            margin-left: 0;
        }

        .article-publish-date, .article-date-modified {
            border-right: none;
        }

        .article-summary-title {
            select {
                max-width: 10rem;
            }
        }

        .article-summary {
            display: flex;
            flex-flow: column;
            gap: 2rem;
        }

        .article-summary-title {
            text-align: left;
        }

        .translate-widget {
            grid-column: 1 / -1;
        }
    }
}