:root {
  --accent: #d6e95c;
  --dark: #17221f;
  --warm: #ffb273;
  --cool: #83cdd1;
}

.preview-site {
  background: var(--paper);
  color: var(--ink);
}

.preview-site nav span {
  color: var(--ink);
  font-size: 13px;
}

.hero-card {
  background: var(--accent);
  height: var(--hero-height, 460px);
}

.hero-photo {
  height: 100%;
  inset: 0;
  object-fit: var(--hero-fit, cover);
  object-position: var(--hero-position, center);
  position: absolute;
  transform: scale(var(--hero-zoom, 1));
  transform-origin: var(--hero-position, center);
  width: 100%;
  z-index: 1;
}

.hero-card.has-photo::after {
  background: linear-gradient(transparent, rgba(12, 20, 17, 0.72));
  content: "";
  inset: 45% 0 0;
  position: absolute;
  z-index: 2;
}

.hero-card.has-photo .hero-art {
  display: none;
}

.hero-card.has-photo p {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.capability,
footer {
  background: var(--dark);
}

.contact {
  background: var(--accent);
}

.contact::after,
.orb-one {
  background: var(--warm);
}

.orb-two {
  background: var(--cool);
}

@media (max-width: 800px) {
  .hero-card {
    height: min(var(--hero-height, 460px), 370px);
  }
}