/* Motion collection controls remain a full-width row in both video formats. */
body[data-motion-case] .project-layout{row-gap:16px}
body[data-motion-case] .project-layout>.motion-choices{grid-column:1/-1;width:100%;max-width:none;margin:0;align-items:center;justify-content:flex-start;direction:ltr}
body[data-motion-case] .motion-choices button{flex:0 1 auto;white-space:normal;text-align:start}
body[data-motion-case] .media{min-width:0}
@media(max-width:650px){body[data-motion-case] .project-layout>.motion-choices{gap:8px}body[data-motion-case] .motion-choices button{padding:8px 10px}}
/* One desktop canvas for every rendition: the format changes only the media. */
@media(min-width:1001px) and (min-height:700px){
 body.case-page[data-motion-case]{height:100dvh}
 body.case-page[data-motion-case] main{min-height:0}
 body.case-page[data-motion-case] .project-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr);column-gap:55px;align-items:center}
 body.case-page[data-motion-case] .project-layout article{width:100%;max-width:none;display:block}
 body.case-page[data-motion-case] .project-layout article>.detail:last-child{border:0;margin-bottom:0;padding-bottom:0}
 body.case-page[data-motion-case] .media{min-height:0;align-self:center}
 body.case-page[data-motion-case] .project-bottom{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:55px}
}


@media(max-width:650px){body[data-motion-case][data-layout=portrait] .media{width:100%;max-width:none}body[data-motion-case][data-layout=portrait] .mobile-watch{grid-template-columns:minmax(0,1fr);gap:16px;padding:0 0 20px;border-top:0}body[data-motion-case][data-layout=portrait] .mobile-watch .cover{width:100%;height:auto;aspect-ratio:9/16;border-radius:12px}body[data-motion-case][data-layout=portrait] .mobile-watch .cover #case-video{object-fit:contain}}
/* 4.8.76: the current mobile Fashion top carousel, with all project actions below. */
@media(max-width:999px) and (pointer:coarse){
 #filmDialog[data-motion-collection]:not(.expanded-player)[open]{grid-template-rows:44px 64px minmax(0,1fr) auto 44px!important;gap:8px;padding:12px;width:calc(100% - 24px);max-width:calc(100% - 24px)}
 #filmDialog[data-motion-collection]:not(.expanded-player) .film-top{grid-row:1!important}
 #filmDialog[data-motion-collection]:not(.expanded-player) .film-top h2{display:none}
 #filmDialog[data-motion-collection]:not(.expanded-player) .motion-carousel{grid-row:2;grid-column:1;display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;width:100%;height:64px;min-width:0;direction:ltr}
 #filmDialog[data-motion-collection]:not(.expanded-player) #filmStage{grid-row:3!important;display:grid;grid-template-columns:minmax(0,1fr);place-items:center}
 #filmDialog[data-motion-collection]:not(.expanded-player) .film-bottom{grid-row:4!important}
 #filmDialog[data-motion-collection]:not(.expanded-player)>#projectMenuToggle{grid-row:5!important}
 #filmDialog[data-motion-collection] #filmVersions{display:none!important}
 #filmDialog[data-motion-collection].expanded-player .motion-carousel{display:none!important}
 #filmDialog[data-motion-collection] .motion-sheet:not([hidden]){display:flex;position:absolute;inset:0;z-index:35;background:#0009;align-items:flex-end;border-radius:inherit;overflow:hidden}
 /* The old 92px rail offset no longer applies to the current full-width gallery. */
 html body #filmDialog.photo-gallery .film-bottom .photo-swipe-hint{grid-column:1/-1!important;grid-row:2!important;justify-self:center!important;position:static!important;width:100%!important;max-width:100%!important;margin-inline:0!important;transform:none!important;text-align:center!important;align-self:center!important}
}
/* One round close control for portrait/landscape fullscreen, video and photo. */
#filmDialog.expanded-player #closeFilm,#filmDialog.photo-fullscreen #closeFilm,
#player.mobile-immersive #close,#player.portrait-immersive #close,.video-wrap:fullscreen .desktop-fullscreen-close{
 box-sizing:border-box!important;display:grid;place-items:center;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;border:1.25px solid #dedede66!important;border-radius:50%!important;background:#0005!important;color:#dededeb3!important;box-shadow:none!important}
#filmDialog.expanded-player #closeFilm::before,#filmDialog.expanded-player #closeFilm::after,#filmDialog.photo-fullscreen #closeFilm::before,#filmDialog.photo-fullscreen #closeFilm::after{width:20px;left:calc(50% - 10px);height:1.6px;top:calc(50% - .8px);filter:none}
#player.mobile-immersive #close svg,.desktop-fullscreen-close svg{width:22px;height:22px}
@media(max-width:650px){body[data-motion-case] .intro h1{white-space:nowrap}}

@media(max-width:999px) and (pointer:coarse){#filmDialog[data-motion-collection]:not(.expanded-player) .film-top{justify-content:flex-end}}

/* 4.8.76: a video-only carousel must never become a Fashion grid item.
   Legacy Fashion styles intentionally target .collection-carousel, including
   a definite first row. Two visible carousels create an implicit second column. */
#filmDialog:not([data-motion-collection]) .motion-carousel,
#filmDialog:not([data-motion-collection]) .motion-sheet,
#filmDialog.photo-gallery .motion-carousel,
#filmDialog.photo-gallery .motion-sheet,
#filmDialog .motion-carousel[hidden],#filmDialog .motion-sheet[hidden]{display:none!important}
@media(max-width:999px) and (pointer:coarse){
 #filmDialog.photo-gallery:not(.photo-fullscreen) .collection-carousel:not(.motion-carousel){grid-column:1}
 #filmDialog.photo-gallery:not(.photo-fullscreen) #filmMeta{white-space:nowrap}
}