/* Visual refinements layered over the generated site stylesheet. */
.vineCanopy {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.82) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.82) 72%,
    transparent 100%
  );
}

.vineCanopy::before,
.vineCanopy::after {
  inset: -10px -14px -14px;
  filter: blur(1.5px) saturate(0.94);
}

@media (width <= 500px) {
  .vineCanopy {
    height: clamp(270px, 72vw, 340px);
    opacity: 0.7;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 46%,
      rgba(0, 0, 0, 0.76) 66%,
      transparent 96%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 46%,
      rgba(0, 0, 0, 0.76) 66%,
      transparent 96%
    );
  }

  .intro h1 {
    font-size: clamp(32px, 9.5vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.045em;
  }

  .identity b {
    font-size: 12px;
  }
}