@layer block {
    .help-resources {
        font-family: var(--font-ui);
        color: var(--color-text);
        text-align: start;

        & .help-resources__title {
            font-family: var(--font-display);
            font-size: var(--text-headline-md);
            font-weight: var(--weight-headline);
            line-height: var(--leading-headline);
        }

        & .help-resources__lead {
            font-size: var(--text-body-md);
            line-height: var(--leading-body-md);
            color: var(--color-text-muted);
        }

        & .help-resources__list {
            display: grid;
            gap: var(--space-3);
            list-style: none;
            padding: 0;
        }

        & .help-resources__name {
            font-size: var(--text-body-md);
            font-weight: var(--weight-label);
        }

        /* The one thing on this component that has to be unmissable and, on a
           phone, big enough to hit without aiming. */
        & .help-resources__phone {
            display: inline-block;
            margin-block-start: var(--space-1);
            padding-block: var(--space-1);
            font-size: var(--text-body-lg);
            font-weight: var(--weight-button);
            color: var(--color-accent);
            text-decoration: underline;
            text-underline-offset: 0.2em;
        }

        & .help-resources__chat {
            margin-inline-start: var(--space-2);
            font-size: var(--text-label-caps);
            color: var(--color-accent);
            text-decoration: underline;
            text-underline-offset: 0.2em;
        }

        & .help-resources__hours,
        & .help-resources__note {
            font-size: var(--text-label-caps);
            color: var(--color-text-muted);
        }

        & .help-resources__emergency {
            font-size: var(--text-label-caps);
            color: var(--color-text-muted);

            & a {
                color: var(--color-accent);
                text-decoration: underline;
                text-underline-offset: 0.2em;
            }
        }

        /* Under a story it is a footnote, not a section: boxed off, quieter, and
           short enough that it reads as an aside to the six words above it
           rather than as the page's conclusion. Each contact collapses onto one
           line — everything except the number, which stays big enough to hit
           with a thumb. */
        &[data-variant="inline"] {
            margin-block-start: var(--space-4);
            padding: var(--space-3);
            border-radius: var(--radius-lg);
            background: var(--color-surface-container);
            font-size: var(--text-label-caps);

            & .help-resources__list {
                gap: var(--space-1);
            }

            & .help-resources__contact {
                display: flex;
                flex-wrap: wrap;
                align-items: baseline;
                column-gap: var(--space-2);
            }

            & .help-resources__lead,
            & .help-resources__name {
                font-size: var(--text-label-caps);
            }

            & .help-resources__phone {
                margin-block-start: 0;
                font-size: var(--text-body-md);
            }

            & .help-resources__chat {
                margin-inline-start: 0;
            }
        }
    }
}