/* ==========================================================================
   05 · PLACEHOLDER
   Build-time stand-in for artwork. The shape is seeded from the post ID in
   PHP, so a card always draws the same figure and the page does not reshuffle
   on reload. Palette-coloured and obviously not a photograph, so it cannot be
   shipped by accident.
   ========================================================================== */

.placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  color: var(--olive);
  background:
    radial-gradient(closest-side circle at var(--ph-a, 28%) var(--ph-c, 32%),
      color-mix(in srgb, var(--mulberry) 20%, transparent) 0 62%, transparent 63%),
    radial-gradient(closest-side circle at var(--ph-b, 68%) var(--ph-d, 66%),
      color-mix(in srgb, var(--olive) 22%, transparent) 0 55%, transparent 56%),
    linear-gradient(var(--ph-rot, 160deg), var(--linen), var(--paper));
}

.placeholder--portrait { aspect-ratio: 3 / 4; }
.placeholder--square   { aspect-ratio: 1 / 1; }
.placeholder--wide     { aspect-ratio: 16 / 9; }

.placeholder__mark {
  width: 34%;
  max-width: 120px;
  opacity: 0.55;
}

.placeholder__label {
  position: absolute;
  bottom: var(--s-4);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
}