.plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}


.plate--inline {
  position: relative;
  inset: auto;
  aspect-ratio: var(--plate-ratio, 4 / 5);
  z-index: 0;
}

.plate__draw,
.plate__img,
.plate__img img,
.plate__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.plate__img img {
  object-fit: cover;
  
  filter: saturate(.55) contrast(1.08);
}


.plate__draw {
  background:
    radial-gradient(circle at 62% 46%, rgba(124, 137, 117, .10), transparent 30%),
    linear-gradient(120deg, var(--bone), var(--paper) 60%, var(--bone));
}


.plate__scrim { z-index: 1; }
.plate__scrim--dark {
  background: linear-gradient(
    to bottom,
    rgba(20, 24, 30, .72),
    rgba(20, 24, 30, .1) 40%,
    rgba(20, 24, 30, .88)
  );
}
.plate__scrim--dark-x {
  background: linear-gradient(
    90deg,
    rgba(20, 24, 30, .96),
    rgba(20, 24, 30, .5) 52%,
    rgba(20, 24, 30, .92)
  );
}
.plate__scrim--paper { background: rgba(242, 237, 227, .82); }
.plate__scrim--bone { background: rgba(232, 226, 213, .8); }
.plate__scrim--ink-soft {
  background: linear-gradient(rgba(20, 24, 30, .78), rgba(20, 24, 30, .94));
}


.plate[data-plate="hero"] .plate__draw {
  background:
    radial-gradient(circle at 62% 48%, rgba(242, 237, 227, .14), transparent 26%),
    linear-gradient(90deg, rgba(20, 24, 30, .95), rgba(20, 24, 30, .28) 52%, rgba(20, 24, 30, .82));
}
.plate[data-plate="hero"] .plate__img img { filter: saturate(.55) contrast(1.1) brightness(.62); }
.plate[data-plate="contact"] .plate__img img { filter: saturate(.6) contrast(1.1); }
.plate[data-plate="founder"] .plate__img img { filter: saturate(.64) contrast(1.08); }