.product-story {
  background:
    linear-gradient(125deg, rgb(255 255 255 / 38%), transparent 54%),
    #eee6da;
}

.product-story__inner {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 9rem);
}

.product-story__heading {
  max-width: 31rem;
}

.product-story__heading .eyebrow {
  color: #755522;
}

.product-story__heading h2 {
  margin-top: 1rem;
  color: #0a1110;
  font-size: clamp(2.8rem, 5.2vw, 5.7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.product-story__heading > span {
  display: block;
  width: min(9rem, 38vw);
  height: 1px;
  margin-top: 1.7rem;
  background: linear-gradient(90deg, #a37934, transparent);
}

.product-story__narrative {
  width: min(100%, 50rem);
}

.product-story__narrative > p {
  color: rgb(8 17 16 / 72%);
  font-size: clamp(1.08rem, 1.45vw, 1.35rem);
  line-height: 1.85;
}

.product-story__narrative > p:first-child {
  color: #17201e;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.15vw, 2rem);
  line-height: 1.5;
}

.product-story__narrative > p + p {
  margin-top: 1.4rem;
}

.product-story__highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgb(8 17 16 / 14%);
}

.product-story__highlights li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.2rem;
  color: #65491d;
  font-family: var(--font-brand);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  line-height: 1.55;
  text-transform: uppercase;
}

.product-story__highlights li::before {
  position: absolute;
  top: 0.92rem;
  left: 0;
  width: 0.45rem;
  height: 1px;
  content: "";
  background: #9b7030;
}

.product-story.is-motion-ready .product-story__heading,
.product-story.is-motion-ready .product-story__narrative {
  opacity: 0;
  transform: translateY(1rem);
}

.product-story.is-motion-ready .product-story__highlights li {
  opacity: 0;
  transform: translateY(0.65rem);
}

.product-story.is-product-detail-visible .product-story__heading,
.product-story.is-product-detail-visible .product-story__narrative {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 680ms var(--ease-luxury),
    transform 780ms var(--ease-luxury);
}

.product-story.is-product-detail-visible .product-story__narrative {
  transition-delay: 70ms;
}

.product-story.is-product-detail-visible .product-story__highlights li {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 620ms var(--ease-luxury),
    transform 720ms var(--ease-luxury);
  transition-delay: 130ms;
}

.product-story.is-product-detail-visible
  .product-story__highlights li:nth-child(2) {
  transition-delay: 185ms;
}

.product-story.is-product-detail-visible
  .product-story__highlights li:nth-child(3) {
  transition-delay: 240ms;
}

.product-story.is-product-detail-visible
  .product-story__highlights li:nth-child(4) {
  transition-delay: 295ms;
}

@media (max-width: 899px) {
  .product-story__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .product-story__heading {
    max-width: 38rem;
  }
}

@media (max-width: 599px) {
  .product-story__inner {
    gap: 2rem;
  }

  .product-story__highlights {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-story .product-story__heading,
  .product-story .product-story__narrative,
  .product-story .product-story__highlights li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}