/* Variable-driven hero controls shared by the public page and the visual editor. */
.hero-wash {
  opacity: var(--hero-fade-opacity, 1);
  background: linear-gradient(90deg,
    #f6f1e9 0 var(--hero-fade-start, 47%),
    rgba(246,241,233,.99) var(--hero-fade-soft-1, 50.5%),
    rgba(246,241,233,.82) var(--hero-fade-soft-2, 52.5%),
    rgba(246,241,233,.45) var(--hero-fade-soft-3, 57.5%),
    transparent var(--hero-fade-end, 60%));
}

.hero-center-signature {
  top: var(--hero-identity-y, 14.5%);
  left: var(--hero-identity-x, 49.5%);
  opacity: var(--hero-identity-opacity, 1);
  transform: translate(-50%, -50%) scale(var(--hero-identity-scale, 1));
}

.hero-center-signature::before {
  opacity: 0;
  transition: opacity .2s ease;
}

.hero-center-signature.has-haze::before {
  opacity: 1;
}

.hero-center-title {
  color: var(--hero-identity-gold, #a97837);
  font-size: var(--hero-title-size, 28px);
  text-shadow: var(--hero-identity-shadow, 0 1px 0 rgba(255,253,250,.6));
}

.hero-center-divider {
  width: var(--hero-divider-width, 76px);
  opacity: var(--hero-divider-opacity, .46);
  background: var(--hero-identity-gold, #a97837);
}

.hero-center-subtitle {
  font-size: var(--hero-subtitle-size, 11px);
}

.hero-center-location {
  color: color-mix(in srgb, var(--hero-identity-gold, #a97837) 76%, #233143);
  font-size: var(--hero-location-size, 10px);
}

@media (max-width: 1600px) and (min-width: 1281px) {
  .hero-center-signature { top: calc(var(--hero-identity-y, 14.5%) + 1%); }
}

@media (max-width: 1280px) and (min-width: 821px) {
  .hero-center-signature {
    top: calc(var(--hero-identity-y, 14.5%) + 2%);
    left: calc(var(--hero-identity-x, 49.5%) + 1%);
  }
}

@media (max-width: 820px) {
  .hero-wash {
    opacity: 1;
    background: linear-gradient(180deg,#f6f1e9 0 44%,rgba(246,241,233,.68) 49%,rgba(246,241,233,.16) 54%,transparent 59%);
  }

  .hero-center-signature {
    top: var(--hero-identity-mobile-y, 486px);
    left: var(--hero-identity-mobile-x, 50%);
    transform: translateX(-50%) scale(var(--hero-identity-scale, 1));
  }
}

@media (max-width: 560px) {
  .hero-center-signature { top: calc(var(--hero-identity-mobile-y, 486px) - 8px); }
}