/* =========================================
   FOOTER SCENE
   Every page ends on the same picture: an old cowboy beside his fallen
   horse under the storm (assets/images/img/footer-fallen-horse-5.webp), the
   closing frame to the fence-line banner at the top. The picture is a band
   at the top of the footer (::before) that fades in from the page colour
   (--footer-from) and down into dark ground, where the footer text sits.
   Loaded last from includes/head.php, after every shell.
   ========================================= */

body .site-footer {
  --footer-from: #2a211b;          /* dark pages (style.css) */
  --footer-ground: #17110d;
  --footer-band: clamp(260px, 40vw, 540px);
  position: relative;
  margin-top: 80px;
  padding: calc(var(--footer-band) - 40px) 0 34px;
  border-top: 0;
  text-align: center;
  background: var(--footer-ground);
  overflow: hidden;
}

body.light-shell .site-footer {
  --footer-from: var(--ls-paper);
}

body.open-story:not(.light-shell) .site-footer {
  --footer-from: #1c1916;          /* story pages (story-shell.css) */
}

body .site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--footer-band);
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      var(--footer-from) 0%,
      transparent 28%,
      transparent 64%,
      var(--footer-ground) 100%
    ),
    url("/assets/images/img/footer-fallen-horse-5.webp") center 62% / cover no-repeat;
}

/* Text above the picture layer. */
body .site-footer > .container {
  position: relative;
}

html body .site-footer,
html body .site-footer p {
  color: #d9ccb8;
}

html body .site-footer a,
html body .site-footer .footer-links a {
  color: #efe3cf;
  opacity: 0.9;
}

html body .site-footer a:hover,
html body .site-footer a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

/* Narrow screens crop the sides; keep the man and the horse in frame. */
@media (max-width: 640px) {
  body .site-footer::before {
    background-position: 0 0, 32% 62%;
  }
}

@media print {
  body .site-footer {
    background: none;
    padding-top: 20px;
  }

  body .site-footer::before {
    display: none;
  }
}