#materials{padding:100px 0 70px;background:#eee8dd;color:#242a27;overflow:hidden}
#materials .mp-heading{text-align:center;padding:0 6%;max-width:1000px;margin:auto}
#materials .mp-eyebrow{font-size:11px;letter-spacing:3px;margin:0 0 22px}
#materials h2{font:400 clamp(32px,3.6vw,58px)/1.15 'Poiret One',sans-serif;letter-spacing:1px;margin:0 0 22px}
#materials .mp-subtitle{font-size:clamp(18px,1.6vw,22px);line-height:1.6;margin:0}
#materials .mp-fan{position:relative;max-width:1200px;width:90%;aspect-ratio:3;margin:90px auto 0}
#materials .mp-card{position:absolute;top:0;left:50%;width:25%;aspect-ratio:3/4;border:0;padding:0;background:none;cursor:pointer;transform:translateX(calc(-50% + var(--offset)));isolation:isolate;overflow:visible}
#materials .mp-card img{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px;box-shadow:-3px 1px 5px -1px #241a1299,-13px 4px 19px -5px #30221780,0 12px 24px -8px #3b302b33;transform:translateY(0) scale(1);transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1);will-change:transform;pointer-events:none}
#materials .mp-card:focus-visible{outline:2px solid #536967;outline-offset:8px;z-index:10}
#materials .mp-card:focus-visible img{transform:translateY(-42px) scale(1.05)}
#materials .mp-hint{margin-top:24px;text-align:center;font-size:15px;letter-spacing:1px;margin:24px 0 0}
#materials .mp-dialog{box-sizing:border-box;border:0;padding:0;width:min(1040px,92vw);max-width:92vw;max-height:90dvh;margin:auto;background:#f4f0e7;color:#242a27;overflow:auto;overscroll-behavior:contain}
#materials .mp-dialog::backdrop{background:rgb(24 29 26 / .72);animation:mp-backdrop .4s ease}
#materials .mp-panel{display:grid;grid-template-columns:44% 56%;position:relative}
#materials .mp-photo{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;align-self:center}
#materials .mp-copy{padding:70px 9% 45px;align-self:center}
#materials .mp-count{font-size:14px;letter-spacing:3px;margin:0 0 30px}
#materials .mp-category,#materials .mp-app-label{font-size:12px;letter-spacing:2px;line-height:1.6;margin:0 0 14px;color:#52605a}
#materials h3{font:400 clamp(32px,3.2vw,49px)/1.1 'Poiret One',sans-serif;margin:0 0 24px}
#materials .mp-description,#materials .mp-applications{font-size:19px;line-height:1.65;margin:0 0 25px}
#materials .mp-applications{font-size:16px}
#materials .mp-close,#materials .mp-navigation button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;min-height:44px;padding:10px 12px}
#materials .mp-close{position:absolute;top:8px;right:12px;z-index:2;background:#f4f0e7;font-size:16px}
#materials .mp-close span{font-family:Arial,sans-serif;margin-left:8px}
#materials .mp-navigation{display:flex;justify-content:space-between;gap:14px;margin-top:28px}
#materials .mp-navigation button{font-size:17px}
#materials .mp-dialog button:focus-visible{outline:2px solid #536967;outline-offset:2px}
#materials .mp-flight{position:fixed;z-index:5;pointer-events:none;object-fit:cover;max-width:none;aspect-ratio:3/4;transform-origin:center;border-radius:9px}
@keyframes mp-backdrop{from{background:transparent}to{background:rgb(24 29 26 / .72)}}
@media(max-width:700px){
#materials{padding:65px 0 55px}
#materials .mp-fan{width:92%;aspect-ratio:2.34;margin-top:65px}
#materials .mp-card{width:32%;transform:translateX(calc(-50% + var(--mobile-offset)))}
#materials .mp-card img{border-radius:5px;box-shadow:-2px 1px 3px #241a1280,-7px 2px 10px -2px #30221780,0 7px 14px -5px #3b302b33}
#materials .mp-hint{font-size:14px}
#materials .mp-dialog{width:92vw;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
#materials .mp-panel{grid-template-columns:1fr}
#materials .mp-photo{width:100%;max-height:48dvh;object-fit:contain;background:#e9e1d4}
#materials .mp-copy{padding:30px 7% 24px}
#materials .mp-count{margin-bottom:18px}
#materials h3{font-size:34px}
#materials .mp-description{font-size:19px}
#materials .mp-close{position:sticky;top:0;grid-column:1;grid-row:1;justify-self:end;margin:8px 10px -52px 0}
#materials .mp-navigation{margin-top:15px}
}
@media(prefers-reduced-motion:reduce){#materials *,#materials *::backdrop{animation:none!important;transition:none!important}}


/* Keep the hit area and resting stack fixed. Hover is independent of player initialization. */
#materials .mp-card{z-index:1;transition:z-index 0s .55s}
#materials .mp-card:nth-child(2){z-index:2}
#materials .mp-card:nth-child(3){z-index:3}
#materials .mp-card:nth-child(4){z-index:4}
#materials .mp-card:nth-child(5){z-index:5}
#materials .mp-card:nth-child(6){z-index:6}
@media (any-hover:hover){
 #materials .mp-card:hover{z-index:1000;transition-delay:0s}
 #materials .mp-card:hover img{transform:translateY(-64px) scale(1.04);box-shadow:-4px 2px 8px -2px #241a1299,-16px 12px 26px -5px #30221780,0 26px 40px -8px #3b302b55}
 /* A new hover immediately restores all other cards to their original layer. */
 #materials .mp-fan:has(.mp-card:hover) .mp-card:not(:hover){transition-delay:0s}
}
#materials .mp-card:focus-visible{z-index:1000;transition-delay:0s}