/* Integrated packaging only: the approved hero and standalone preview keep
   their own styling and rendering. Colors/type inherit the main site. */
.site-nav--with-kit { gap: clamp(16px, 1.7vw, 30px); }
@media (min-width: 1241px) and (max-width: 1399px) {
  .site-header { grid-template-columns: minmax(150px, 1fr) auto auto; column-gap: 24px; }
}

.content-section.packaging-section { --packaging-header-height: 78px; padding-top: 0; }
.packaging-story { position: relative; }
.packaging-scene-inner {
  display: grid;
  grid-template-columns: minmax(290px, .85fr) minmax(0, 1.6fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  min-height: calc(100svh - var(--packaging-header-height));
  padding-block: 28px;
}
.packaging-copy { position: relative; z-index: 1; min-width: 0; }
.packaging-copy h2 { font-size: clamp(42px, 4.6vw, 70px); max-width: 12ch; }
.packaging-copy.section-heading > p { max-width: 29ch; margin: 26px 0 0; color: var(--muted); font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; }
.packaging-visual { width: 100%; min-width: 0; margin: 0; justify-self: end; }
.packaging-image-stage { position: relative; aspect-ratio: 1280 / 1067; }
.packaging-poster, .packaging-poster img, .packaging-canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.packaging-canvas { position: absolute; inset: 0; visibility: hidden; }
.packaging-story.has-frame .packaging-canvas { visibility: visible; }
.packaging-story.has-frame .packaging-poster,
.packaging-story.poster-unavailable .packaging-poster { visibility: hidden; }
.packaging-status { position: absolute; inset: auto 0 16px; margin: 0; padding: 10px 16px; background: var(--paper-light); color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; }
.packaging-status[hidden] { display: none; }
.packaging-story[data-state="loading"] .packaging-scene-inner { min-height: calc(100svh - var(--packaging-header-height)); }

.packaging-story.is-animated { height: calc(260svh - var(--packaging-header-height)); }
.packaging-story.is-animated .packaging-scene-inner { position: sticky; top: var(--packaging-header-height); min-height: 0; height: calc(100svh - var(--packaging-header-height)); }
.packaging-story.is-animated .packaging-visual { max-width: calc((100svh - var(--packaging-header-height) - 56px) * 1280 / 1067); }

@media (max-width: 1000px) {
  .packaging-scene-inner { grid-template-columns: minmax(240px, .85fr) minmax(0, 1.25fr); gap: 20px; }
  .packaging-copy h2 { font-size: clamp(40px, 5vw, 52px); }
}
@media (max-width: 700px) {
  .packaging-section { --packaging-header-height: 64px; }
  .packaging-scene-inner { display: flex; flex-direction: column; align-items: stretch; justify-content: center; min-height: auto; gap: 12px; padding-block: 20px; }
  .packaging-copy h2 { max-width: 16ch; font-size: clamp(36px, 9vw, 50px); line-height: 1.02; }
  .packaging-copy.section-heading > p { margin: 18px 0 0; font-size: 16px; max-width: 32ch; }
  .packaging-visual { max-width: 550px; align-self: center; }
  .packaging-story.is-animated .packaging-visual { flex: 0 0 auto; max-width: min(100%, calc((100svh - var(--packaging-header-height) - var(--copy-height, 190px) - 56px) * 1280 / 1067)); }
}
@media (prefers-reduced-motion: reduce) {
  .packaging-story.is-animated { height: auto; }
  .packaging-story.is-animated .packaging-scene-inner { position: static; height: auto; min-height: auto; }
  .packaging-story.is-animated .packaging-visual { max-width: 100%; }
}