/* ── Decorative noise-field strips ───────────────────────────────────────
   Drawn by assets/js/blobs.js. Each canvas paints only its two blob colours
   and leaves its own background transparent, so the third "band" is whatever
   the page background happens to be — light or dark, no extra bookkeeping.
   Swap the two custom properties to restyle both strips at once. */

.gh-blobs {
    --blob-color-1: #4a7fbf;
    --blob-color-2: #1b3a6b;

    display: block;
    /* Break out of the .gh-outer inline padding so the strip runs full bleed.
       max-width must be cleared: the served reset puts `max-width: 100%` on
       canvas, which otherwise clamps the width below straight back to the
       content box and leaves the whole overhang missing off the right edge. */
    width: calc(100% + 2 * max(4vmin, 20px));
    max-width: none;
    margin-inline: calc(-1 * max(4vmin, 20px));
    pointer-events: none;
}

:root.dark-theme .gh-blobs {
    --blob-color-1: #6d4fd0;
    --blob-color-2: #33216b;
}

.gh-blobs-footer {
    height: clamp(160px, 26vw, 400px);
    margin-top: 64px;
}

/* Shallower than the footer: it is above the fold and only has to establish
   the motif, not carry the bottom of the page. */
.gh-blobs-header {
    height: clamp(90px, 12vw, 170px);
    margin-bottom: 48px;
}

/* The band's dense edge is meant to butt against the navigation, so drop the
   header's usual top gap when it leads with one. Browsers without :has() just
   keep the 40px gap, which degrades harmlessly. */
.gh-header:has(> .gh-blobs-header) {
    margin-top: 0;
}