.bottom-art {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(64px, 11vw, 150px);
  overflow: hidden;
  pointer-events: none;
  background: var(--paper);
  z-index: 3;
  /* Forces its own GPU compositing layer — without this, mobile Safari
     redraws/flickers fixed-position elements as its address bar collapses
     and expands during scroll. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 62%),
    linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 62%),
    linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-composite: intersect;
}

.bottom-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

@media (max-width: 640px) {
  .bottom-art {
    height: clamp(110px, 32vw, 190px);
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, black 55%),
      linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, black 55%),
      linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  }
}