/* =========================================================
   STONEFACE — photographic when we have it, painted when
   we don't. See lib/graniteTexture.js for the painting.
   ========================================================= */

.stoneface {
  position: relative;
  width: 100%;
  height: 100%;
}

.stoneface__cut {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: var(--cut);
  overflow: hidden;
  background: #17150f;
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.7));
}

.stoneface img,
.stoneface__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The texture is painted at 240×300 and stretched. Smoothing is exactly
     what we want here — it softens the crystals into grain. */
  image-rendering: auto;
}

/* Sun off the top-left edge, shadow gathering at the base. Kept in CSS
   rather than baked into the texture so it stays consistent with the rest
   of the page's lighting when the real photographs land. */
.stoneface__light {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      163deg,
      rgba(255, 244, 214, 0.14) 0%,
      transparent 30%,
      rgba(6, 5, 4, 0.24) 72%,
      rgba(6, 5, 4, 0.58) 100%
    ),
    /* A single conchoidal fracture, off-centre, so the face is a rock and
       not a swatch. */
      linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, 0.055) 42.5%, transparent 45%);
  pointer-events: none;
}