/* A light archive heading when no category banner image is configured. */
.banner-archive:not([style*="background-image"]) {
    position: relative;   /* for the hairline below */
    overflow: hidden;
    padding: 26px 0 !important;
    color: #514349;
    /*
     * A continuous warm-to-rose wash, with no white stop in the middle.
     *
     * It used to run #fff6f2 -> #fff at 48% -> #fff2f8, which on anything
     * wider than a laptop put pure white across the middle two thirds: colour
     * in the far corners, nothing between them, so the band read as a page
     * that had not finished painting rather than as a choice. The two small
     * radial blobs made it worse by adding patches with visible edges.
     *
     * One soft highlight from above gives the strip a little depth without
     * reintroducing an edge anywhere.
     */
    background:
        radial-gradient(140% 200% at 50% -70%, rgb(255 255 255 / 72%), rgb(255 255 255 / 0%) 62%),
        linear-gradient(102deg, #ffeadf 0%, #ffe4e8 46%, #fae3f1 100%) !important;
    border-top: none;
    border-bottom: none;
}

/*
 * Beats `body.search .banner-archive .archive-title { display: none }`, which
 * outranks the plain selector below by one element. Search pages carried the
 * heading in the markup and hid it, so the page never named what had been
 * searched for -- the keyword only appeared inside the box, which is gone now.
 */
body.search .banner-archive:not([style*="background-image"]) .archive-title {
    display: inline-block;
}

.banner-archive:not([style*="background-image"]) .archive-title {
    display: inline-block;
    color: #75636a;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-shadow: 0 3px 10px rgb(95 54 66 / 14%);
}

.banner-archive:not([style*="background-image"]) .archive-desc {
    color: #8b747c;
}

/* A hairline in the logo's own colours, so the band ends on a deliberate
   edge rather than the muddy one the two borders used to make. */
.banner-archive:not([style*="background-image"])::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff926f, #ff6fa5 55%, #e061c8);
    opacity: 0.55;
}

@media (max-width: 767px) {
    .banner-archive:not([style*="background-image"]) {
        padding: 18px 0 !important;
    }
}