/* plate.css — the image-background contract (v3.3 images-first).
   Each decorative section gets a <figure class="plate"> holding, bottom→top:
     .plate__draw   code-drawn gradient — load placeholder / no-image fallback only
     .plate__img    the <picture> (AVIF→WebP→img), the launch visual
     .plate__scrim  overlay that guarantees text contrast over the image
   Drop a Higgsfield still in by swapping the <picture> srcset — markup never changes,
   so layout/CLS never regress. */

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

/* Inline variant for contained images (e.g. founder portrait): sets its own box. */
.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;
  /* quiet, editorial treatment so backgrounds never fight the copy */
  filter: saturate(.55) contrast(1.08);
}

/* code-drawn placeholder (shows before/without an image). Tuned per slot below. */
.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));
}

/* scrims — choose per section ground for AA contrast */
.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));
}

/* slot-specific placeholder tints (only seen if an image fails to load) */
.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); }