/* Editorial direction: quieter surfaces, photography and restrained motion. */
.project-tile .tile-image { filter: brightness(.78) saturate(.58) grayscale(.12); transform: scale(1.025); }
.tile-maquettes .tile-image { object-position: 50% 42%; }
.tile-packaging .tile-image { object-position: 50% 45%; }
.tile-plv .tile-image { object-position: 50% 38%; }
.tile-couleur .tile-image { object-position: 52% 50%; }
.project-tile.is-active .tile-image,
.project-tile:focus-visible .tile-image,
.project-tile.tile-packaging.is-active .tile-image,
.project-tile.tile-packaging:focus-visible .tile-image { filter: brightness(1) saturate(1.02) grayscale(0); transform: scale(1.075); }
.tile-shade { background: linear-gradient(180deg,#0002,transparent 35%,#0002 60%,#050505d9); }
.material-strips { gap: 8px; height: 510px; }
.material-tile { border: 0; border-radius: 2px; }
.material-tile::after { display: none; }
.material-tile:nth-child(n) .tile-image { object-position: 50% center; filter: brightness(.79) saturate(.66) grayscale(.08); transform: scale(1.025); }
.material-tile:nth-child(1) .tile-image { object-position: 46% center; }
.material-tile:nth-child(3) .tile-image { object-position: 53% center; }
.material-tile .tile-shade { background: linear-gradient(180deg,transparent 43%,#0001 58%,#070707c9 100%); }
.material-copy { left: 21px; right: 16px; bottom: 26px; }
.material-copy h3 { font-size: clamp(27px,2.25vw,35px); line-height: 1.02; text-shadow: 0 2px 16px #0004; }
.material-explore { color: #f1e8dc; margin-top: 0; letter-spacing: .03em; }
.material-tile.is-active .tile-image,
.material-tile:focus-visible .tile-image { filter: brightness(1) saturate(1.04) grayscale(0); transform: scale(1.08); }
.material-strips.has-active .material-tile:not(.is-active) { opacity: .76; }
.material-tile.is-active .material-explore,
.material-tile:focus-visible .material-explore { margin-top: 16px; }
.materials .section-heading { margin-bottom: 30px; }
.materials-foot p { color: #a79c90; }
.detail-visual { position: relative; padding: 0; background: #0b0b0b; }
.detail-visual img { width: 100%; height: 100%; max-height: 680px; object-fit: contain; }
.detail-visual.texture img { object-fit: cover; }
.detail-visual.show-original img { object-fit: contain; }
.image-note { position: absolute; inset: auto 0 0; margin: 0; padding: 30px 18px 15px; font-size: 10px; line-height: 1.6; color: #ddd4c9; text-align: center; background: linear-gradient(transparent,#000b); }

@media (max-width:700px) {
  .project-tile .tile-image { filter:brightness(.91) saturate(.79) grayscale(.04); }
  .material-strips { height:auto; gap:8px; }
  .material-tile,.material-tile:last-child { min-height:290px; }
  .material-tile:nth-child(n) .tile-image { filter:brightness(.88) saturate(.9) grayscale(0); }
  .material-copy { left:17px; right:12px; bottom:23px; }
  .material-copy h3 { font-size:30px; }
  .material-explore { max-height:30px; opacity:.8; margin-top:13px; font-size:10px; }
  .material-tile.is-active .material-explore { margin-top:13px; }
  .detail-visual { height:300px; }
  .detail-visual img { height:300px; }
}
@media (max-width:380px) { .material-copy h3 { font-size:27px; } .material-copy { left:14px; } }
@media (prefers-reduced-motion:reduce) {
  .project-tile.is-active .tile-image,.project-tile:focus-visible .tile-image,
  .project-tile.tile-packaging.is-active .tile-image,.project-tile.tile-packaging:focus-visible .tile-image,
  .material-tile.is-active .tile-image,.material-tile:focus-visible .tile-image { transform:scale(1.025); }
}

/* The six materials stay on one line with the hover accordion on every screen wider than a phone. */
@media(min-width:701px){
  .scenes-off .material-strips{display:flex;height:clamp(380px,62vh,540px)}
  .scenes-off .material-tile,.scenes-off .material-tile:last-child{height:auto;min-height:0}
  .scenes-off .material-copy h3{font-size:clamp(22px,2.6vw,32px)}
}
@media(prefers-reduced-motion:reduce){.project-tile:is(.is-active,:focus-visible) .tile-image,.project-tile.tile-packaging:is(.is-active,:focus-visible) .tile-image{transform:none}}
