/* Two states, one printer. Only the opening composition uses these rules. */
.two-stage-hero .hero-product {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  top: 36%;
  width: 43%;
  color: var(--ink);
}
.hero-product .hero-category {
  margin: 0 0 22px;
  font: 400 11px/1.5 var(--system-font);
  letter-spacing: .16em;
}
.hero-product h1 {
  margin: 0;
  font-size: 8.5cqw;
  font-weight: var(--headline-weight, 750);
  line-height: .98;
  letter-spacing: -.063em;
}
.hero-product-details {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 32px;
}
.hero-product-name {
  font: 400 10px/1.5 var(--system-font);
  color: #666963;
  letter-spacing: .02em;
}
.hero-price {
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}
.two-stage-hero .product-visual {
  --hero-presence: 1;
  /* Front contact midpoint; JS maps this same render point on mobile. */
  transform-origin: var(--product-anchor-x, 64.396%) var(--product-anchor-y, 84.360%);
  transform: scale(calc(1 + .18 * var(--hero-presence)));
}
/* Avoid the old empty/flash-of-copy first frame before JS initializes. */
.two-stage-hero .explore { visibility: hidden; }
.two-stage-hero .edition { opacity: 0; }
.two-stage-hero .explore .hero-story-title {
  font-size: 8.4cqw;
  line-height: 1.04;
}
.hero-story-title .line-text { white-space: nowrap; }

@media (max-width: 760px) {
  .two-stage-hero .hero-product { left: 5%; top: 14%; width: 90%; }
  .hero-product .hero-category { margin-bottom: 16px; font-size: 9px; }
  .hero-product h1 { font-size: 14.6vw; }
  .hero-product-details { margin-top: 20px; gap: 24px; }
  .hero-price { font-size: 24px; }
  .two-stage-hero .product-visual {
    transform: scale(calc(1 + .16 * var(--hero-presence)));
  }
  .two-stage-hero .explore .hero-story-title { font-size: 11.8vw; }
}
.reduce-motion .two-stage-hero .product-visual { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .two-stage-hero .product-visual { transform: none; }
}