/* Founder section backdrop and portrait.
 *
 * The portrait is deliberately NOT part of the background image any more.
 * Relying on background-size: cover to place it was unstable: across 1280-1920
 * the cover scale runs 0.88x to 1.28x and the section's own height swings between
 * 1356 and 1624, so a figure aligned to the divider rule at one viewport width
 * ended up at the nose or the chest at another.
 *
 * The backdrop is now a pure CSS gradient (resolution independent) and the cutout
 * is placed at a fixed pixel offset from the top of the section -- the same way
 * the divider rule above it is positioned -- so the two keep their relationship
 * at any width.
 *
 * `top` below is the knob: increasing it pushes the figure further down the
 * section, which moves the divider higher up the face.
 */

.founder-bg {
  /* Vignette first so it sits over the glow, matching the darker, moodier tone
     the previous baked plate had. Without it the bare gradient reads far too
     bright against the rest of the page. */
  background-image:
    radial-gradient(112% 96% at 50% 40%,
      transparent 26%, rgba(20, 6, 8, 0.45) 58%, rgba(12, 4, 6, 0.80) 80%, rgba(8, 3, 5, 0.95) 100%),
    linear-gradient(to bottom,
      rgba(8, 3, 5, 0.72) 0%, rgba(8, 3, 5, 0.20) 14%, transparent 32%,
      transparent 62%, rgba(8, 3, 5, 0.55) 84%, rgba(8, 3, 5, 0.92) 100%),
    radial-gradient(88% 76% at 50% 40%,
      #f9a03f 0%, #ef7c22 18%, #d85c14 34%, #b8410e 50%,
      #8a2a09 66%, #571708 80%, #250a07 92%, #0d0507 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/* Height is fixed so the chin stays a constant distance from the section top;
   only the horizontal centring is fluid. */
.founder-bg::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* The divider rule (the one carrying the small x marker) sits ~950px below the
     section top. In the cutout the neck falls at ~58% of the figure's height, so
     top = 950 - (0.58 * 720) leaves the whole face above the rule with the neck
     crossing it. Increase `top` to drop the figure, decrease it to raise. */
  top: 505px;
  height: 720px;
  aspect-ratio: 1163 / 909;
  background-image: url('/images/founder-cutout2.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1024px) {
  .founder-bg::after { top: 445px; height: 600px; }
}

@media (max-width: 767px) {
  .founder-bg::after { top: 408px; height: 460px; }
}