.packaging-stage{position:relative;display:block;width:100%;height:100%}
.packaging-stage img{position:absolute;left:50%;top:50%;width:205px;height:250px;object-fit:contain;background:#f7f4ed;box-shadow:0 6px 18px rgba(44,38,31,.16);transition:transform .55s ease,opacity .55s ease;transform:translate(-50%,-50%)}
.packaging-stage img:nth-child(1){transform:translate(-45%,-53%) rotate(-8deg)}.packaging-stage img:nth-child(2){transform:translate(-47%,-52%) rotate(-5deg)}.packaging-stage img:nth-child(3){transform:translate(-49%,-51%) rotate(-3deg)}.packaging-stage img.dealing{transform:translate(24%,-62%) rotate(8deg);opacity:0}
.packaging-detail .artwork-detail-intro::before{background-image:url('./assets/packaging-design/03.png');background-position:65% center;filter:saturate(.7)}
.packaging-detail .artwork-detail-intro::after{background:linear-gradient(90deg,rgba(247,244,237,.97),rgba(247,244,237,.91) 45%,rgba(247,244,237,.60))}
.packaging-groups{padding:6vw}.packaging-group+.packaging-group{margin-top:clamp(80px,10vw,150px)}.packaging-group-head{border-top:1px solid #aaa49b;padding-top:24px;margin-bottom:28px}.packaging-group-head h2{font-size:clamp(23px,2.3vw,34px);font-weight:500;margin:10px 0}.packaging-label,.packaging-description{font:12px/1.5 monospace;color:#62605d}.packaging-label{text-transform:uppercase;letter-spacing:.06em}.packaging-description{max-width:68ch}.packaging-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}.packaging-grid figure{margin:0;min-width:0}.packaging-grid a{display:block}.packaging-grid img{display:block;width:100%;height:auto}.packaging-grid a:focus-visible{outline:2px solid #62605d;outline-offset:4px}
@media(max-width:900px){.packaging-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.packaging-detail .artwork-detail-intro::after{background:rgba(247,244,237,.88)}}@media(max-width:520px){.packaging-groups{padding:22px}.packaging-grid{grid-template-columns:1fr;gap:22px}}@media(prefers-reduced-motion:reduce){.packaging-stage img{transition:none}}
/* Packaging project: keep the stack format while bringing the cover product closer. */
.packaging-stage img[src$="/01.png"]{object-fit:cover;object-position:39% center}
.packaging-grid{grid-template-columns:repeat(var(--packaging-columns,3),minmax(0,1fr));align-items:center}
.packaging-grid figure{display:flex;align-items:center;justify-content:center;height:clamp(170px,20vw,280px)}
.packaging-grid a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.packaging-grid img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:700px){.packaging-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.packaging-grid figure{height:clamp(140px,34vw,230px)}}
@media(max-width:380px){.packaging-grid{grid-template-columns:1fr}.packaging-grid figure{height:auto}.packaging-grid img{max-height:340px}}

/* Soften only the introduction background; foreground type stays crisp. */
.packaging-detail .artwork-detail-intro::before{filter:saturate(.7) blur(6px);inset:-10px}