.site-heading-layout:has(> .site-page-heading) {
    margin-block-start: var(--site-heading-offset-start, revert-layer);
}

.site-page-heading {
    --_site-heading-background: var(--site-heading-background, transparent);

    /* The border image paints to both edges without widening the content box. */
    border-image: linear-gradient(to bottom,
        var(--_site-heading-background) calc(100% - var(--site-heading-border-width, 0px)),
        var(--site-heading-border-color, var(--_site-heading-background)) 0
    ) fill 0 / 0 / 0 100vmax;
    padding-block: var(--site-heading-padding-block, 0px);
}

.site-page-heading__inner {
    display: flex;
    flex-direction: column;
    gap: var(--site-heading-gap, 1rem);
}

.site-page-heading__breadcrumb,
.site-page-heading__breadcrumb nav {
    font-family: var(--site-heading-breadcrumb-font-family, inherit);
    font-size: var(--site-heading-breadcrumb-font-size, revert-layer);
    font-style: var(--site-heading-breadcrumb-font-style, inherit);
    font-weight: var(--site-heading-breadcrumb-font-weight, revert-layer);
    line-height: var(--site-heading-breadcrumb-line-height, revert-layer);
    letter-spacing: var(--site-heading-breadcrumb-letter-spacing, inherit);
    text-transform: var(--site-heading-breadcrumb-text-transform, inherit);
    color: var(--site-heading-breadcrumb-color, inherit);
}

.site-page-heading__breadcrumb :is(a, span, i) {
    color: var(--site-heading-breadcrumb-color, revert-layer);
}

.site-page-heading__breadcrumb a:hover {
    color: var(--site-heading-breadcrumb-hover-color, var(--site-heading-breadcrumb-color, revert-layer));
}

.site-page-heading__title {
    max-width: var(--site-heading-title-max-width, none);
    font-family: var(--site-heading-title-font-family, var(--font-heading, revert-layer));
    font-size: var(--site-heading-title-font-size, revert-layer);
    font-style: var(--site-heading-title-font-style, inherit);
    font-weight: var(--site-heading-title-font-weight, revert-layer);
    line-height: var(--site-heading-title-line-height, revert-layer);
    letter-spacing: var(--site-heading-title-letter-spacing, inherit);
    text-transform: var(--site-heading-title-text-transform, inherit);
    color: var(--site-heading-title-color, revert-layer);
}

.site-page-heading__subtitle {
    max-width: var(--site-heading-subtitle-max-width, none);
    font-family: var(--site-heading-subtitle-font-family, inherit);
    font-size: var(--site-heading-subtitle-font-size, 1rem);
    font-style: var(--site-heading-subtitle-font-style, inherit);
    font-weight: var(--site-heading-subtitle-font-weight, inherit);
    line-height: var(--site-heading-subtitle-line-height, inherit);
    letter-spacing: var(--site-heading-subtitle-letter-spacing, inherit);
    text-transform: var(--site-heading-subtitle-text-transform, inherit);
    color: var(--site-heading-subtitle-color, inherit);
}

.site-page-heading__title + .site-page-heading__subtitle {
    margin-block-start: var(--site-heading-gap, 1rem);
}

/* Keep the context-tab links usable on narrow screens. */
.profile-context-tabs > .sm\:hidden {
    display: none;
}

.profile-context-tabs > .sm\:block {
    display: block;
    overflow-x: auto;
}

.site-section-heading__eyebrow {
    color: var(--color-accent);
}

.site-section-heading__icon-background {
    background-color: var(--color-accent);
}

.site-section-heading__icon-ring {
    background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
}