.site-backdrop {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
}

/* Homepage sword figure lives in home.css (.home-sword), not the fixed corner. */

.site-backdrop[data-anchor="bottom-right"] {
    right: var(--backdrop-x);
    bottom: var(--backdrop-y);
}

.site-backdrop[data-anchor="bottom-left"] {
    left: var(--backdrop-x);
    bottom: var(--backdrop-y);
}

.site-backdrop[data-anchor="top-right"] {
    right: var(--backdrop-x);
    top: var(--backdrop-y);
}

.site-backdrop[data-anchor="top-left"] {
    left: var(--backdrop-x);
    top: var(--backdrop-y);
}

.site-backdrop img {
    display: block;
    width: auto;
    height: auto;
    /* Stay outside the middle column, and inside this corner's own cap.
       A smaller file is not scaled up. A short window shrinks the picture
       so a band of the page remains between the top and bottom corners. */
    max-width: min(var(--backdrop-max-w), max(0px, calc((100vw - var(--middle-column) - 5rem) / 2 - var(--backdrop-x, 1.5rem))));
    max-height: min(var(--backdrop-max-h), max(0px, calc((100vh - 20rem) / 2 - var(--backdrop-y, 1.5rem))));
}

/* Homepage: corner art stays fully visible; size against the ~40rem stack
   so the pictures still show when the 53rem gutter math would collapse them. */
body.home .site-backdrop img {
    max-width: min(var(--backdrop-max-w), max(0px, calc((100vw - min(40rem, 100%) - 3rem) / 2)));
    max-height: min(var(--backdrop-max-h), max(0px, calc((100vh - 16rem) / 2)));
}

.page,
.gallery-wrap,
.guestbook-wrap {
    max-width: var(--middle-column);
}

.home-page {
    max-width: min(40rem, 100%);
}

#page-root {
    position: relative;
    z-index: 1;
}

/*
  Sitewide vertical gradient:
  top = charcoal near-black, easing into the palette purple (--bg / #31263E)
  and a touch of --inner-bg / #44355B at the bottom.
*/
body {
    --grad-charcoal: #121014;
    --grad-purple: var(--bg);
    --grad-purple-lit: var(--inner-bg);
    background-color: var(--grad-charcoal);
    background-image: linear-gradient(
        to bottom,
        var(--grad-charcoal) 0%,
        color-mix(in srgb, var(--grad-charcoal) 70%, var(--grad-purple)) 28%,
        color-mix(in srgb, var(--grad-charcoal) 35%, var(--grad-purple)) 55%,
        var(--grad-purple) 78%,
        color-mix(in srgb, var(--grad-purple) 55%, var(--grad-purple-lit)) 100%
    );
    background-attachment: fixed;
}

.page__header,
.page__aside,
.page__footer,
.guestbook-header,
.guestbook-wrap > main,
.gallery-header,
.gallery-wrap > main,
.home-header,
.home-main,
.home-footer {
    background-color: transparent;
}

body:not(.home) .site-backdrop {
    display: none;
}