/* Business-card watermark integrated into the opening brand panel. */
.hero-art {
  isolation: isolate;
}

.hero-art .hero-watermark {
  position: absolute;
  width: 112%;
  aspect-ratio: 1;
  left: -38%;
  bottom: -46%;
  background: url("boots-buckets-logo.png") center / contain no-repeat;
  opacity: 0.028;
  filter: sepia(1) contrast(0.82);
  mix-blend-mode: multiply;
  transform: none;
  pointer-events: none;
  z-index: 0;
}

.hero-art > img {
  position: relative;
  width: min(720px, 100%);
  z-index: 1;
}

/* The story now stands on its own without a second full-size logo panel. */
.story.story-clean {
  display: block;
  background: var(--paper);
}

.story-clean .story-copy {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: clamp(32px, 8vw, 120px);
  padding-right: clamp(32px, 8vw, 120px);
}

.story-clean .story-copy > p:not(.kicker) {
  max-width: 820px;
}

/* A quiet watermark adds depth to the principles section without competing with the copy. */
.promise {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.promise::before {
  content: "";
  position: absolute;
  width: min(760px, 62vw);
  aspect-ratio: 1;
  top: -30%;
  right: -12%;
  background: url("boots-buckets-logo.png") center / contain no-repeat;
  opacity: 0.022;
  filter: sepia(1) contrast(0.82);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.promise > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 650px) {
  .hero-art .hero-watermark {
    width: 132%;
    left: -52%;
    bottom: -52%;
    opacity: 0.025;
  }

  .story-clean .story-copy {
    padding-left: 24px;
    padding-right: 24px;
  }

  .promise::before {
    width: 125vw;
    top: -12%;
    right: -62%;
    opacity: 0.018;
  }
}