/* ── Page backdrop ────────────────────────────────────────
   Optional photo anchored to the bottom of the content column.
   #content is a flex column, so `flex: 1 0 auto` lets this absorb
   the leftover height on a short page — pushing itself to the
   bottom — while a long page just gets the min-height. */

.page-backdrop {
  position: relative;
  flex: 1 0 auto;
  min-height: clamp(220px, 32vh, 420px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Fades the top edge into the page color so the photo doesn't cut in on a hard
   horizontal line. Matches #content's background. */
.page-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #1a1616 0%,
    rgba(26, 22, 22, 0.75) 25%,
    rgba(26, 22, 22, 0) 70%
  );
}

@media (max-width: 992px) {
  .page-backdrop {
    min-height: clamp(180px, 28vh, 320px);
  }
}