/* Keep the art-directed campaign frames whole; copy sits only in their quiet left area. */
.hero { position: relative; min-height: 0; height: auto; aspect-ratio: 21 / 9; background: var(--brown); overflow: hidden; }
.hero .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--brown); }
.hero .hero-media picture { display: block; width: 100%; height: 100%; }
.hero .hero-media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; margin: 0; padding: 0; }
.hero .hero-media img.product-reference-banner { width: 100%; margin: 0; padding: 0; }
.hero .hero-media::after { content: ""; position: absolute; inset: 0; display: block; pointer-events: none; background: linear-gradient(90deg, rgba(35, 25, 19, .46) 0%, rgba(35, 25, 19, .22) 33%, rgba(35, 25, 19, 0) 58%); }
.hero .hero-content { position: absolute; z-index: 1; inset: 0; display: flex; align-items: flex-end; width: auto; min-height: 0; margin: 0; padding: clamp(26px, 5vw, 72px) max(5vw, calc((100vw - 1280px) / 2)); color: #fffaf1; }
.hero .hero-copy { width: min(40%, 500px); max-width: 500px; opacity: 0; transform: translateY(12px); animation: hero-copy-reveal 600ms ease-out forwards; }
.hero .eyebrow { margin: 0 0 12px; color: rgba(255, 250, 241, .94); }
.hero h1 { max-width: none; margin: 0; color: #fffaf1; font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.1; }
.hero .lead { max-width: 28rem; margin: 14px 0 22px; color: rgba(255, 250, 241, .94); font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.45; }
.hero .button--light { display: inline-flex; width: auto; height: 44px; min-height: 40px; padding: 0 18px; color: #fffaf1; border-color: rgba(255, 250, 241, .78); background: rgba(35, 25, 19, .14); }
.hero .button--light:hover { color: var(--ink); border-color: #fffaf1; background: #fffaf1; }

@keyframes hero-copy-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.page-hero .page-hero-media { background: var(--brown); }
.page-hero-media img.product-photo-fallback { width: 53%; margin-left: auto; object-fit: contain; object-position: right center; }
.page-hero-media:has(img.product-photo-fallback)::after { background: linear-gradient(90deg, rgba(72,54,42,.92) 0%, rgba(72,54,42,.74) 40%, rgba(72,54,42,.05) 100%); }
.series-card img.product-photo-fallback, .collection-card img.product-photo-fallback, .story-card img.product-photo-fallback, .editorial-media img.product-photo-fallback, .blog-card img.product-photo-fallback, .article-cover.product-photo-fallback { object-fit: contain; background: var(--cream); }
@media (max-width: 720px) {
  .hero { min-height: 0; aspect-ratio: 9 / 16; }
  .hero .hero-content { position: absolute; inset: 0; width: auto; margin: 0; padding: 24px 20px 30px; }
  .hero .hero-copy { width: min(100%, 380px); max-width: 380px; }
  .hero .hero-media::after { background: linear-gradient(0deg, rgba(35, 25, 19, .52) 0%, rgba(35, 25, 19, .22) 35%, rgba(35, 25, 19, 0) 66%); }
  .hero .hero-media img, .hero .hero-media img.product-reference-banner { width: 100%; height: 100%; margin: 0; padding: 0; }
  .page-hero-media img.product-photo-fallback { width: 100%; opacity: .4; object-position: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-copy { opacity: 1; transform: none; animation: none !important; }
}