header {
  position: relative;
  /* Full-bleed with compensating padding so the illustration's offscreen bleed
     is clipped at the viewport edge instead of widening the document */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  overflow-x: clip;
  overflow-y: visible;
}

.header__illustration {
  position: absolute;
  top: -12rem;
  right: -640px;
  width: 1200px;
  height: 1103px;
  background: linear-gradient(135deg, rgb(150, 130, 80), rgb(230, 225, 210), rgb(186, 165, 110), rgb(240, 235, 220), rgb(160, 140, 90), rgb(225, 215, 190));
  background-size: 400% 400%;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: shimmer 8s ease-in-out infinite;
  z-index: -1;
}

.header__illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
  mix-blend-mode: multiply;
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Tablet and phone: full size, pushed further offscreen so it just peeks in */
@media (max-width: 940px) {
  .header__illustration {
    right: -780px;
  }
}

/* Ghosted behind content once things get narrow */
@media (max-width: 900px) {
  .header__illustration {
    opacity: 0.2;
  }
}

@media (max-width: 640px) {
  .header__illustration {
    right: -960px;
  }
}